HTML + CSS: Projekt: Eine komplette Landing Page

Kurz: 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.

Teil des Kurses HTML + CSS

Kapitel 26 von 27 im Kurs HTML + CSS. Mit Fortschritt, Quiz und Zertifikat auf der Lernseite.

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.

landing.html

<style>
  :root {
    --bg: #ffffff; --text: #0f172a; --grau: #64748b; --karte: #f1f5f9;
    --primaer: #4f46e5; --primaer-dunkel: #3730a3; --akzent: #f59e0b;
    --radius: 14px; --max: 960px;
  }
  @media (prefers-color-scheme: dark) {
    :root { --bg: #0f172a; --text: #f1f5f9; --grau: #94a3b8; --karte: #1e293b; --primaer: #818cf8; --primaer-dunkel: #a5b4fc; }
  }
  *, *::before, *::after { box-sizing: border-box; }
  body { margin: 0; font: 1rem/1.6 system-ui, sans-serif; background: var(--bg); color: var(--text); }
  .container { width: min(100% - 2rem, var(--max)); margin-inline: auto; }
  a { color: inherit; }
  :focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; }
 
  /* 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>

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

1. Füge einen Abschnitt “Das sagen Nutzer” mit drei Zitaten hinzu
2. Baue das Menü auf dem Handy zu einem Burger-Button mit <details> oder JavaScript
3. Füge ein Kontaktformular mit Validierung hinzu
4. Optimiere: Prüfe die Seite mit Lighthouse (Leistung, Barrierefreiheit, SEO)
5. 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

Quiz zur Selbstkontrolle

Welche Technik macht die Funktionskarten ohne Media Query responsiv?

• grid mit repeat(auto-fit, minmax(…)) (richtig)
• float
• position: absolute
• table-layout

Wozu dient der Sprunglink am Seitenanfang?

• Tastaturnutzer überspringen das Menü (richtig)
• Er scrollt nach oben
• Er verlinkt Werbung
• Er lädt die Seite neu

Was macht prefers-reduced-motion?

• Erkennt den Wunsch nach weniger Bewegung (richtig)
• Misst die Geschwindigkeit
• Verlangsamt das Netzwerk
• Deaktiviert JavaScript

Weiter im Kurs

Zurück: CSS sauber organisieren

Weiter: Nachschlagen: Spickzettel

Alle Kapitel: HTML + CSS im Überblick