151 lines
6.0 KiB
HTML
151 lines
6.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>RetroWave Studio 2010</title>
|
|
<meta
|
|
name="description"
|
|
content="Eine bewusst im Stil von 2010 gestaltete Retro-Website mit glänzenden Panels, Sidebar-Widgets und nostalgischem Web-Charme."
|
|
/>
|
|
<link rel="stylesheet" href="styles.css" />
|
|
</head>
|
|
<body>
|
|
<div class="page-shell">
|
|
<header class="topbar">
|
|
<div class="brand">
|
|
<div class="brand-mark">RW</div>
|
|
<div>
|
|
<p class="eyebrow">Webdesign aus 2010</p>
|
|
<h1>RetroWave Studio</h1>
|
|
</div>
|
|
</div>
|
|
<div class="topbar-meta">
|
|
<p class="status-pill">Online seit 2010</p>
|
|
<p>Letztes Update: 24.06.2010</p>
|
|
</div>
|
|
</header>
|
|
|
|
<nav class="nav">
|
|
<a class="active" href="#start">Start</a>
|
|
<a href="#features">Features</a>
|
|
<a href="#news">News</a>
|
|
<a href="#kontakt">Kontakt</a>
|
|
</nav>
|
|
|
|
<main class="layout">
|
|
<section class="hero panel" id="start">
|
|
<div class="hero-copy">
|
|
<p class="section-label">Willkommen</p>
|
|
<h2>Die digitale Visitenkarte mit Glanz, Schatten und Tabellen-Energie.</h2>
|
|
<p>
|
|
Diese Seite ist absichtlich so gestaltet, als hätte sie ein Webdesigner
|
|
im Jahr 2010 mit viel Liebe zu Verläufen, abgerundeten Ecken und
|
|
kleinen Statusboxen gebaut.
|
|
</p>
|
|
<div class="cta-row">
|
|
<a class="button primary" href="#features">Mehr erfahren</a>
|
|
<a class="button secondary" href="#kontakt">Kontakt aufnehmen</a>
|
|
</div>
|
|
</div>
|
|
|
|
<aside class="hero-widget">
|
|
<div class="widget-title">Web 2.0 Status</div>
|
|
<ul class="status-list">
|
|
<li><span>Design:</span> Glossy</li>
|
|
<li><span>Layout:</span> Fixed + elegant</li>
|
|
<li><span>Extras:</span> Badge, Box, Shadow</li>
|
|
<li><span>Mood:</span> Nostalgisch</li>
|
|
</ul>
|
|
</aside>
|
|
</section>
|
|
|
|
<section class="content-grid">
|
|
<div class="main-column">
|
|
<section class="panel" id="features">
|
|
<p class="section-label">Highlights</p>
|
|
<h3>Typische Merkmale einer 2010er-Website</h3>
|
|
<div class="feature-grid">
|
|
<article class="feature-card">
|
|
<h4>Glänzende Panels</h4>
|
|
<p>Hell-dunkle Verläufe, kräftige Rahmen und große Schatten für mehr Tiefe.</p>
|
|
</article>
|
|
<article class="feature-card">
|
|
<h4>Sidebar-Widgets</h4>
|
|
<p>Nachrichten, Links, Status und kleine Boxen, die wie aus einem CMS-Theme wirken.</p>
|
|
</article>
|
|
<article class="feature-card">
|
|
<h4>Große Call-to-Actions</h4>
|
|
<p>Buttons mit Farbverlauf, damit jeder Klick wichtig aussieht.</p>
|
|
</article>
|
|
<article class="feature-card">
|
|
<h4>Retro-Komposition</h4>
|
|
<p>Ein zentriertes Layout mit klarer Hierarchie und etwas „Portal“-Charakter.</p>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel" id="news">
|
|
<p class="section-label">News</p>
|
|
<h3>Aktuelle Meldungen</h3>
|
|
<div class="news-list">
|
|
<article class="news-item">
|
|
<time datetime="2010-06-24">24.06.2010</time>
|
|
<h4>Das neue Startlayout ist online</h4>
|
|
<p>Die Seite wurde mit kräftigen Farben, Schatten und klassischer Seitenleiste umgesetzt.</p>
|
|
</article>
|
|
<article class="news-item">
|
|
<time datetime="2010-06-18">18.06.2010</time>
|
|
<h4>Kontaktbereich und Buttons ergänzt</h4>
|
|
<p>Jetzt gibt es direkte Absprünge zu den wichtigsten Bereichen der Seite.</p>
|
|
</article>
|
|
<article class="news-item">
|
|
<time datetime="2010-06-10">10.06.2010</time>
|
|
<h4>Retro-Designrichtung festgelegt</h4>
|
|
<p>Die visuelle Sprache folgt dem typischen Web-2.0-Look der damaligen Zeit.</p>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<aside class="side-column">
|
|
<section class="panel mini-panel">
|
|
<p class="section-label">Profil</p>
|
|
<h3>Studio Info</h3>
|
|
<p>
|
|
Klein, präsent und leicht nostalgisch. Perfekt für Projektseiten,
|
|
Portfolios oder persönliche Startseiten im Stil der späten 2000er.
|
|
</p>
|
|
</section>
|
|
|
|
<section class="panel mini-panel">
|
|
<p class="section-label">Links</p>
|
|
<h3>Quick Links</h3>
|
|
<ul class="link-list">
|
|
<li><a href="#start">Startseite</a></li>
|
|
<li><a href="#features">Leistungsübersicht</a></li>
|
|
<li><a href="#news">Neuigkeiten</a></li>
|
|
<li><a href="#kontakt">Impressum/Kontakt</a></li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section class="panel mini-panel" id="kontakt">
|
|
<p class="section-label">Kontakt</p>
|
|
<h3>Schreib uns</h3>
|
|
<p>Mail: <a href="mailto:hello@retrowave-studio.example">hello@retrowave-studio.example</a></p>
|
|
<p>Telefon: +49 30 1234 5678</p>
|
|
<p class="small-note">Bürozeiten: Mo-Fr, 09:00 bis 18:00 Uhr</p>
|
|
</section>
|
|
</aside>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="footer">
|
|
<p>© 2010 RetroWave Studio. Alle Rechte vorbehalten.</p>
|
|
<p class="footer-note">Optimiert für ein Gefühl von 2010, nicht für Browser mit zu viel Minimalismus.</p>
|
|
</footer>
|
|
</div>
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|