Skip to content

CSS Vertiefung: Projekt

Die Gestaltung der Startseite bekommt nun den letzten Schliff. Wir arbeiten an den Abständen, Ausrichtungen, … aus.

Ziel(e)

  • Ich kann eine Aufgabe nach Aufgabenstellung lösen.

  • Ich komme selbständig zu den notwendigen Informationen.

Aufgabe

Setze mit den neu gelernten CSS-Eigenschaften die Startseite gemäss Screenshot um. Folgendes ist umzusetzen:

Link bei Berührung (Hover):

  • Schriftfarbe: grün

  • Nicht unterstrichen

Kopfzeile – oberer Bereich (Logo und Nav):

  • Abstand innen: oben und unten: 20px / rechts und links. 50px

  • Logo- und Nav-Bereich nebeneinander, je 49.8% breit (Tipp: Eigenschaft «display»)

Kopfzeile – unterer Bereich (Image mit Titel):

  • Hintergrundbild «erde-5104732_1920.jpg» - lege das Bild am richtigen Ort mit einer sinnvollen Benennung ab

  • Hintergrundbild-Position: zentriert

  • Höhe: 250px

  • Text-Ausrichtung: zentriert

  • Abstand innen oben: 150px

Navigation:

  • Text rechts ausgerichtet

Navigationspunkte:

  • Aufzählungspunkte nebeneinander (Tipp: Eigenschaft «display»)

  • Abstand zwischen den einzelnen Aufzählungspunkte links: 20px

  • Aufzählungspunkte in Grossbuchstaben

  • Aufzählungspunkte fett geschrieben

Hauptbereich:

  • Abstand innen: oben und unten: 70px / rechts und links. 50px

Fussbereich:

  • Abstand innen: oben und unten: 20px / rechts und links. 50px

  • Die zwei Bereiche nebeneinander, je 49.8% breit (Tipp: Eigenschaft «display»)

  • Der Text in dem rechten Bereich, rechts ausgerichtet und kursiv

  • Link bei Berührung (Hover): weiss

Prüfe zum Schluss, ob es deckungsgleich mit dem finalen Screenshot ist, falls nicht, wende noch andere CSS-Attribute an, um die Deckungsgleichheit zu erreichen.

Musterlösung

homepage-project