CSS Code-Challenge: Über uns Seite

Wie funktioniert diese Challenge?

1. Diese Coding-Challenge besteht aus 10 verschiedenen Aufgaben.
2. Jede Aufgabe wird einzeln gelöst und in den untenstehenden Code-Editor eingegeben.

Probleme? Wenn du eine Aufgabe nicht lösen kannst, klicke auf die jeweilige Code-Lösung unter der Aufgabe. Den Code dieser fertigen Lösung kannst du dann kopieren und in den Code-Editor einfügen.

Aber bitte nicht schummeln. Versuche zunächst die Aufgaben selbständig zu lösen 😉

Starten wir mit der ersten Aufgabe:

1. Body-Selektor mit Hintergrund

Selektiere das body-Element und setze den Hintergrund auf #88C4FF

[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

body {
  background: #88C4FF;
}

[/lp_spoiler]

2. Font-Family verwenden

Setze die Schriftart auf: Arial, Helvetica, sans-serif

[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

body {
 font-family: Arial, Helvetica, sans-serif;
}

[/lp_spoiler]

3. Innenabstand auf dem body setzen

Setze einen Innenabstand auf 20px;

[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

body {
 padding: 20px;
}

[/lp_spoiler]

4. Klasse heading selektieren und Hintergund

Selektiere die heading-Klasse und setze einen Hintergrund auf: #3399FF
[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

.heading {
  background: #3399FF;
}

[/lp_spoiler]

5. Farbe setzen

Setze die Farbe im heading auf: white

[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

.heading {
  color: white;
}

[/lp_spoiler]

6. Innenabstand im Heading setzen

Setze einen Innenabstand auf 20px;
[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

.heading {
  padding: 20px;
}

[/lp_spoiler]

7. Schriftgröße ändern

Setze die Schriftgröße auf 25px;
[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

.heading {
  font-size: 25px;
}

[/lp_spoiler]

8. Footer mit zentrierten Text

Zentriere die Inhalte der Klasse footer mit text-align.

[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

.footer {
        text-align: center;
      }

[/lp_spoiler]

9. h2-Elemnt mit oberen Abstand

Setze einen oberen Abstand von 25px in allen h2-Elementen.

[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

h2 {
  margin-top: 25px;
}

[/lp_spoiler]

10. Überschriften kursiv

Setze alle h2-Elemente auf kursiv.

[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

h2 {
  font-style: italic;
}

[/lp_spoiler]