52 lines
7 KiB
HTML
52 lines
7 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="de" data-theme="light">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<title>Vorschau 2</title>
|
||
|
|
<link rel="stylesheet" href="fernweh2/assets/css/screen.css">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<header class="site-header container">
|
||
|
|
<a class="site-brand" href="#"><span class="site-brand__title">Fernweh</span></a>
|
||
|
|
<nav class="site-nav" id="site-nav"><ul class="nav">
|
||
|
|
<li class="nav-current"><a href="#">Start</a></li>
|
||
|
|
<li class="nav-has-children"><a href="#">Unsere Reisen</a><button class="nav-submenu-toggle"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M6 9l6 6 6-6"/></svg></button><ul class="nav-submenu"><li><a href="#">Europa</a></li><li><a href="#">Asien</a></li></ul></li>
|
||
|
|
<li><a href="#">Tipps</a></li><li><a href="#">Über uns</a></li>
|
||
|
|
</ul></nav>
|
||
|
|
<div class="site-actions">
|
||
|
|
<button class="icon-link"><svg viewBox="0 0 24 24" width="19" height="19" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg></button>
|
||
|
|
<button class="icon-link theme-toggle"><svg class="theme-toggle__moon" viewBox="0 0 24 24" width="19" height="19" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg><svg class="theme-toggle__sun" viewBox="0 0 24 24" width="19" height="19" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="4"/></svg></button>
|
||
|
|
<a class="btn" href="#">Abonnieren</a>
|
||
|
|
<button class="icon-link nav-toggle"><svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M4 7h16M4 12h16M4 17h16"/></svg></button>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
<main class="site-main container">
|
||
|
|
<article class="hero"><img class="hero__image" id="heroimg"><div class="hero__text"><a class="hero__tag" href="#">Norwegen</a><h2 class="hero__title"><a href="#">Durch die Fjorde Norwegens</a></h2><p class="hero__excerpt">Zwei Wochen mit Fähre, Zelt und sehr wenig Schlaf unter der Mitternachtssonne.</p><time class="hero__date">4. Oktober 2026</time></div></article>
|
||
|
|
<div class="post-grid post-grid--two post-grid--lead" id="lead"></div>
|
||
|
|
<section class="section"><header class="section__header"><h2 class="section__title">Reiseziele</h2></header><div class="tiles" id="tiles"></div></section>
|
||
|
|
<section class="section tag-section"><header class="section__header"><h2 class="section__title">Europa</h2><a class="section__more" href="#">Alle ansehen →</a></header><div class="post-grid post-grid--two" id="g1"></div></section>
|
||
|
|
<section class="section"><header class="section__header"><h2 class="section__title">Weitere Beiträge</h2></header><div class="post-grid" id="g2"></div></section>
|
||
|
|
<nav class="pagination"><span></span><span class="meta">Seite 1 von 9</span><a class="pagination__link pagination__link--older" href="#">Ältere Beiträge →</a></nav>
|
||
|
|
<section class="about"><img class="about__portrait" id="about"><div class="about__text"><h2 class="section__title">Über uns</h2><p>Wir sind Anna und Roland und reisen seit 2009 gemeinsam um die Welt.</p><a class="about__more" href="#">Mehr über uns →</a><div class="social-links"><a class="icon-link" href="#"><svg viewBox="0 0 24 24" width="19" height="19" fill="currentColor"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9.75h4V21H3V9.75z"/></svg></a></div></div></section>
|
||
|
|
</main>
|
||
|
|
<article class="article"><header class="article__header container container--narrow"><a class="label">Zypern</a><h1 class="article__title">Drei Wochen im Troodos-Gebirge</h1><p class="article__excerpt">Von Bergdörfern, Klöstern und sehr viel Halloumi.</p><div class="meta article__meta"><span>Von Roland</span><span>·</span><time>4. Oktober 2026</time><span>·</span><span>6 Min. Lesezeit</span></div></header>
|
||
|
|
<section class="gh-content"><p>Unser Weg führte uns zuerst nach Omodos, wo <a href="#">die Zeit</a> stehen geblieben scheint. Der Text läuft in einer angenehm schmalen Spalte.</p><h2>Die Anreise</h2><p>Noch ein Absatz mit etwas Text, damit man den Zeilenabstand beurteilen kann.</p><blockquote>Reisen ist die einzige Sache, die man kauft und die einen reicher macht.</blockquote><figure class="kg-card kg-image-card kg-width-wide"><img id="wide"><figcaption>Breites Bild</figcaption></figure><hr><ul><li>Punkt eins</li><li>Punkt zwei</li></ul></section>
|
||
|
|
<footer class="article__tags container container--narrow"><a class="label label--boxed">Zypern</a><a class="label label--boxed">Wandern</a></footer></article>
|
||
|
|
<footer class="site-footer"><div class="site-footer__inner container"><a class="site-footer__title">Fernweh</a><nav class="site-footer__nav"><ul class="nav"><li><a>Impressum</a></li><li><a>Datenschutz</a></li></ul></nav><div class="social-links"><a class="icon-link" href="#"><svg viewBox="0 0 24 24" width="19" height="19" fill="currentColor"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9.75h4V21H3V9.75z"/></svg></a></div><p class="site-footer__copy">© 2026 Fernweh · Betrieben mit Ghost</p></div></footer>
|
||
|
|
<script>
|
||
|
|
var hues=[200,30,150,280,10,90,220,330,60,180,250,120];
|
||
|
|
function img(i,w,h){return 'data:image/svg+xml,'+encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="'+w+'" height="'+h+'"><rect width="100%" height="100%" fill="hsl('+hues[i%12]+',25%,55%)"/></svg>');}
|
||
|
|
var titles=['Durch die Fjorde Norwegens','Trends in Lissabon: Azulejos','Interview: Sarah aus Florenz','Ein Wochenende in Triest','Mit dem Zug durch Vietnam','Wandern auf Madeira','Die schönsten Strände Zyperns','Kyoto im Herbst','Roadtrip durch Schottland','Marrakesch für Einsteiger','Inselhüpfen in Griechenland','Winter in Lappland'];
|
||
|
|
function card(i,tag){return '<article class="card"><a class="card__image"><img src="'+img(i,750,560)+'"></a><div class="card__body"><a class="label card__tag">'+tag+'</a><h2 class="card__title"><a href="#">'+titles[i%12]+'</a></h2><p class="card__excerpt">Unser Weg führte uns über kleine Küstenstraßen zu Orten, die in keinem Reiseführer stehen.</p><time class="meta card__date">4. Oktober 2026</time></div></article>';}
|
||
|
|
document.getElementById('heroimg').src=img(0,1920,960);
|
||
|
|
document.getElementById('lead').innerHTML=card(1,'Portugal')+card(2,'Italien');
|
||
|
|
document.getElementById('g1').innerHTML=card(3,'Europa')+card(4,'Europa');
|
||
|
|
var a='';for(var i=3;i<12;i++)a+=card(i,'Reise');document.getElementById('g2').innerHTML=a;
|
||
|
|
var names=['Europa','Asien','Zypern','Italien','Norwegen','Wandern','Städte','Inseln'];a='';for(i=0;i<8;i++)a+='<a class="tile'+(i<5?' tile--image':'')+'" href="#">'+(i<5?'<img src="'+img(i+2,400,500)+'">':'')+'<span class="tile__text"><span class="tile__name">'+names[i]+'</span><span class="tile__count">'+(84-i*9)+' Beiträge</span></span></a>';document.getElementById('tiles').innerHTML=a;
|
||
|
|
document.getElementById('about').src=img(4,400,400);document.getElementById('wide').src=img(8,1140,600);
|
||
|
|
if(location.hash==='#dark')document.documentElement.setAttribute('data-theme','dark');
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|