Web - Übung 4, HTML & CSS

Übung 4 – Website: Der Zoo und seine Bewohner

• 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:

• 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>