Emzett Digital

Projekt: Eine komplette Landing Page

Hier setzt du alles zusammen: semantisches HTML, Variablen, Flexbox, Grid, Responsive Design, Barrierefreiheit und kleine Animationen. Die Seite ist eine Vorstellung für eine fiktive Lern-App. Du kannst den Code ändern und sofort das Ergebnis sehen.

Probier es selbst · landing.html

Dein Code

/* Kopfzeile */
  header { position: sticky; top: 0; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--karte); z-index: 10; }
  header .container { display: flex; align-items: center; gap: 1rem; padding-block: .8rem; }
  .logo { font-weight: 900; font-size: 1.2rem; margin-right: auto; text-decoration: none; }
  nav ul { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; }
  nav a { text-decoration: none; color: var(--grau); }
  nav a:hover { color: var(--text); }
  @media (max-width: 560px) { nav { display: none; } }

/* Buttons */
  .btn { display: inline-block; padding: .7em 1.3em; border-radius: 999px; font-weight: 700; text-decoration: none; border: 2px solid var(--primaer); background: var(--primaer); color: #fff; transition: transform .15s, background .15s; }
  .btn:hover { background: var(--primaer-dunkel); transform: translateY(-2px); }
  .btn--zweit { background: transparent; color: var(--primaer); }

/* Hero */
  .hero { padding-block: clamp(2.5rem, 8vw, 5rem); text-align: center; }
  .hero h1 { font-size: clamp(2rem, 1rem + 5vw, 3.6rem); line-height: 1.1; margin: 0 0 1rem; text-wrap: balance; }
  .hero h1 span { background: linear-gradient(90deg, var(--primaer), var(--akzent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .hero p { max-width: 55ch; margin: 0 auto 1.5rem; color: var(--grau); font-size: 1.15rem; }
  .hero .aktionen { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }

/* Funktionen */
  .raster { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); padding-bottom: 3rem; }
  .karte { background: var(--karte); padding: 1.3rem; border-radius: var(--radius); transition: transform .2s; }
  .karte:hover { transform: translateY(-4px); }
  .karte .icon { width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 50%; background: var(--primaer); color: #fff; font-weight: 900; }
  .karte h3 { margin: .4rem 0; }
  .karte p { margin: 0; color: var(--grau); }

/* Preise */
  .preise { padding-block: 2rem 3rem; }
  .preise h2, .funktionen h2 { text-align: center; font-size: 1.8rem; }
  .preisliste { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); align-items: start; }
  .preis { border: 2px solid var(--karte); border-radius: var(--radius); padding: 1.3rem; text-align: center; }
  .preis--top { border-color: var(--primaer); position: relative; }
  .preis--top::before { content: "Beliebt"; position: absolute; top: -.8rem; left: 50%; translate: -50%; background: var(--akzent); color: #000; font-size: .75rem; font-weight: 800; padding: .15rem .7rem; border-radius: 999px; }
  .preis .betrag { font-size: 2.4rem; font-weight: 900; }
  .preis ul { list-style: none; padding: 0; margin: 1rem 0; color: var(--grau); }
  .preis li::before { content: "✓ "; color: var(--primaer); font-weight: 900; }

/* FAQ */
  details { border-bottom: 1px solid var(--karte); padding: .8rem 0; }
  summary { cursor: pointer; font-weight: 700; }

footer { background: var(--karte); padding-block: 1.5rem; text-align: center; color: var(--grau); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
</style>

<a href="#inhalt" style="position:absolute;left:-999px">Zum Inhalt springen</a>
<header>
  <div class="container">
    <a class="logo" href="#">Lerni<span style="color:var(--akzent)">.</span></a>
    <nav aria-label="Hauptmenü">
      <ul><li><a href="#funktionen">Funktionen</a></li><li><a href="#preise">Preise</a></li><li><a href="#faq">FAQ</a></li></ul>
    </nav>
    <a class="btn" href="#preise">Starten</a>
  </div>
</header>

<main id="inhalt">
  <section class="hero container">
    <h1>Lerne Programmieren, <span>Schritt für Schritt</span></h1>
    <p>Kleine Lektionen, echte Beispiele und sofortiges Feedback. Direkt im Browser, ohne Installation.</p>
    <div class="aktionen">
      <a class="btn" href="#preise">Kostenlos starten</a>
      <a class="btn btn--zweit" href="#funktionen">Mehr erfahren</a>
    </div>
  </section>

<section class="funktionen container" id="funktionen" aria-labelledby="f-titel">
    <h2 id="f-titel">Alles, was du zum Lernen brauchst</h2>
    <div class="raster">
      <article class="karte"><div class="icon" aria-hidden="true">1</div><h3>Kleine Lektionen</h3><p>Zehn Minuten am Tag reichen für echten Fortschritt.</p></article>
      <article class="karte"><div class="icon" aria-hidden="true">2</div><h3>Sofort ausprobieren</h3><p>Code im Browser ausführen und Ergebnisse direkt sehen.</p></article>
      <article class="karte"><div class="icon" aria-hidden="true">3</div><h3>Abzeichen</h3><p>Sammle Erfolge und verfolge deine Lernserie.</p></article>
    </div>
  </section>

<section class="preise container" id="preise" aria-labelledby="p-titel">
    <h2 id="p-titel">Faire Preise</h2>
    <div class="preisliste">
      <div class="preis"><h3>Free</h3><div class="betrag">0 €</div><ul><li>Alle Grundkurse</li><li>Quizze</li></ul><a class="btn btn--zweit" href="#">Wählen</a></div>
      <div class="preis preis--top"><h3>Plus</h3><div class="betrag">5 €<small style="font-size:.9rem">/Monat</small></div><ul><li>Alle Kurse</li><li>Zertifikate</li><li>Keine Werbung</li></ul><a class="btn" href="#">Wählen</a></div>
      <div class="preis"><h3>Team</h3><div class="betrag">20 €<small style="font-size:.9rem">/Monat</small></div><ul><li>Bis 10 Personen</li><li>Fortschrittsberichte</li></ul><a class="btn btn--zweit" href="#">Wählen</a></div>
    </div>
  </section>

<section class="container" id="faq" aria-labelledby="q-titel" style="padding-bottom:3rem">
    <h2 id="q-titel" style="text-align:center">Häufige Fragen</h2>
    <details><summary>Brauche ich Vorkenntnisse?</summary><p>Nein, die Kurse beginnen bei null.</p></details>
    <details><summary>Kann ich jederzeit kündigen?</summary><p>Ja, monatlich und ohne Frist.</p></details>
    <details><summary>Funktioniert es auf dem Handy?</summary><p>Ja, die Seite passt sich jeder Bildschirmgröße an.</p></details>
  </section>
</main>

<footer><div class="container"><p>&copy; 2025 Lerni. <a href="#">Impressum</a> · <a href="#">Datenschutz</a></p></div></footer>

Ergebnis

Was steckt drin?

Technik	Wo
Semantisches HTML	`header`, `nav`, `main`, `section` mit Überschrift, `article`, `details`, `footer`
Variablen und Dunkelmodus	`:root` und `prefers-color-scheme`
Flexbox	Kopfzeile, Aktionsbuttons
Grid	Funktionskarten und Preise mit `auto-fit/minmax`
Flüssige Typografie	`clamp()` in der Überschrift, `text-wrap: balance`
Responsive	`min(100% - 2rem, ...)`, Media Query für das Menü
Barrierefreiheit	Sprunglink, Landmarks, `aria-label`, sichtbarer Fokus, Kontrast, `aria-hidden` für Icons
Animation	Hover-Effekte, `prefers-reduced-motion`
Moderne CSS-Funktionen	`color-mix`, `backdrop-filter`, `sticky`, Verlaufstext

Aufgaben zum Weiterbauen

Füge einen Abschnitt "Das sagen Nutzer" mit drei Zitaten hinzu
Baue das Menü auf dem Handy zu einem Burger-Button mit <details> oder JavaScript
Füge ein Kontaktformular mit Validierung hinzu
Optimiere: Prüfe die Seite mit Lighthouse (Leistung, Barrierefreiheit, SEO)
Veröffentliche sie kostenlos mit GitHub Pages, Netlify oder Cloudflare Pages

Merke

Aus Semantik, Variablen, Flexbox/Grid, Responsive und Barrierefreiheit entsteht eine professionelle Seite
Mobile First, Inhalt zuerst, dann Gestaltung
Teste mit Tastatur, Handy und Lighthouse
Veröffentlichen kannst du statische Seiten kostenlos