Projekt 1: Landingpage Alarado – Fonts, Variablen und Responsive

Ziel: Sie ergänzen im bestehenden LU01-Projekt die TODO in LU02:

  1. Google Font einbinden
  2. CSS-Variablen in :root definieren und verwenden
  3. Typografie, Navigation und Buttons gemäss Design stylen
  4. Responsive Anpassungen mit einer Media Query umsetzen

Ziel-Layout:

Voraussetzungen

Ausgangslage:

Falls Sie in der letzten Unterrichtseinheit nicht weit gekommen sind, laden Sie sich dieses HTML-File herunter und verbessern Sie Ihren Code nach dieser Vorlage. Code nach LU01

Arbeitsweise

Hilfreiche Links

Schritt 1: Google Font Poppins einbinden

Aufgabe

Schritt 2: CSS-Variablen in :root definieren

Aufgabe

Beispielstruktur für :root 

:root {
  /* Farben */
  --color-bg-light: ...;
  --color-text-light: ...;
  --color-accent: ...;
 
  /* Typografie */
  --size-h1-desktop: ...;
  --size-h1-mobile: ...;
  --weight-h1: ...;
 
  --size-h3: ...;
  --weight-h3: ...;
 
  --size-nav: ...;
  --weight-nav: ...;
 
  --size-button: ...;
  --weight-button: ...;
}

Regel: Ab jetzt verwenden Sie im CSS möglichst oft var(–…) statt einzelne Zahlen zu kopieren.

Schritt 3: Grundstyles im body setzen

Aufgabe

Beispiel welche Eigenschaften erwartet werden 

body {
  font-family: ...;
  background-color: var(...);
  color: var(...);
  height: 100vh; 
}

Überprüfen Sie Folgendes:

Schritt 4: Navigation stylen

Aufgabe

Für „alle Links ausser active“ eignet sich ein Selektor wie a:not(.active). 1)

Schritt 5: Typografie für h3 und h1

Aufgabe

Beispiel welche Eigenschaften erwartet werden 

h3 {
  font-size: var(...);
  font-weight: var(...);
  text-transform: uppercase;
  margin-bottom: ...;
}
 
h1 {
  font-size: var(...);
  font-weight: var(...);
  margin-bottom: ...;
}

Schritt 6: Buttons stylen

Aufgabe

Beispiel welche Bereiche Sie umsetzen sollen 

button { ... }
button:hover { ... }
 
button.highlight { ... }
button.active { ... }

Überprüfen Sie folgendes

Schritt 7: Responsive Regeln mit Media Query

Aufgabe

Gerüst für den Media Query Block 

@media screen and (width < 1024px) {
  /* Hero Layout anpassen */
  /* Content-Wrapper Breite anpassen */
  /* Container Padding anpassen */
  /* Typografie Mobile anpassen */
  /* Navigation/Switch ausblenden, Hamburger einblenden */
}

Kaskade merken: Wenn ein Selektor im @media Block gleich ist wie oben, überschreibt die Regel im @media Block die vorherige Regel, sobald die Bedingung stimmt.

Überprüfen Sie Folgendes:

Schritt 8: Responsive testen mit DevTools

Aufgabe

Achten Sie besonders auf Folgendes:

1)
Der Selektor trifft alle Links, die nicht die Klasse active haben.