Difference between revisions of "Web - Übung 4, HTML & CSS"
Jump to navigation
Jump to search
Line 14: | Line 14: | ||
*Stylesheet: | *Stylesheet: | ||
Für Google Icons das Stylesheet einbinden: | Für Google Icons das Stylesheet einbinden: | ||
<pre><link href="https://fonts.googleapis.com/ | <pre><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" /></pre> | ||
*Snippet für Icon im HTML an der gewünschten Stelle einfügen: | *Snippet für Icon im HTML an der gewünschten Stelle einfügen: |
Revision as of 09:14, 23 May 2023
Ü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"> favorite_border </span>