Web - Übung 4, HTML & CSS
Übung 4 – Website: Der Zoo und seine Bewohner[edit]
- Darf auch ein Tierheim /Wildpark/ Aquazoo/ Aquarium sein
- setze Links und spiel dich mit dem Linkzuständen in CSS (hover, visited, active)
- Baue strukturelle Pseudoklassen und Pseudoelemente in dein CSS ein
- nutze Attributselektoren um ein Formular zu gestalten (sollte noch kein Formular vorhanden sein, baue eines)
- nutze die Selektoren, die wir kennen gelernt haben
- füge mit ::before oder ::after Icons ein (Icons unter zB Google Icons https://fonts.google.com/icons)
- style den ersten Buchstaben jeder Überschrift anders (eventuell mit einer anderen Schriftart: Google Fonts)
- nutze die Vererbung in deinem Stylesheet für das Styling von Elementen
- Nutze relative Größen um die Seite responsive zu gestalten
- Setze eine Überschrift die mit der .calc() Funktion im CSS je nach Bildschrimgröße die Schriftgröße mitskaliert
Google Icons ❤️ einbinden:[edit]
- Stylesheet:
Für Google Icons das Stylesheet einbinden:
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
- Snippet für Icon im HTML an der gewünschten Stelle einfügen:
<span class="material-icons-outlined"> heart_minus </span>