CSS - Aufgaben
Aufgabe 1 - Header-Navigation
Erstelle nachfolgende Seite.
Der Schwerpunkt ist die Navigation im Header: Das Bild und die Links auf der rechten Seite.
Aufgabe 2 - relative Positionierung
In Aufgabe 1 hast du eine Seite mit Header und Navigation erstellt.
Adjustiere dort das Bild oben links.
Aufgabe 3 - Info-Box
Erstelle eine HTML-Seite (oder erweitere eine andere so, dass) die ganz unten eine Meldung anzeigt mit einem “OK”-Button.
Inspiriere dich an den nervigen Cookie-Meldungen von anderen Seiten.
Du kannst die Meldung ganz unten oder in der Mitte des Bildschirms anzeigen.
Wenn du willst, kannst du über alles andere ein “Overlay” schmeissen mit einem Transparenzwert von 50 - 90%, damit der User sich automatisch auf die Meldung fokussiert.
Wenn du willst, kannst du alles andere auch verschwommen darstellen. Hierfür könnte das CSS-Property backdrop-filter interessant sein, siehe https://www.w3schools.com/cssref/css3_pr_backdrop-filter.php.
Erstelle nun eine Cookie-Meldung wie diese (der weisse Teil mit dem roten Button ist die Meldung, der Rest gehört zum Hintergrund):
Aufgabe 4 - Bootstrap
Nachfolgend ist eine Beispiel-Seite. Setze diese mit Bootstrap um:
Schaue dir diese Seite auf auf kleineren Bildschirmen an - also verändere die Fenster-Breite deines Browsers. Du wirst sehen, dass z.B. die einzelnen Abos untereinander erscheinen, wenn die Breite kleiner wird. Berücksichtige dies auch in deinem Code.
Hinweis
Solltest du nicht weiterkommen, dann schaue in den Entwickler-Tools ([F12]-Taste) im DOM nach. Da diese Seite auch mit Bootstrap umgesetzt wurde, kannst du nachschauen, welche Bootstrap-Klassen sie verwendet haben.
Aufgabe 5 - Transitionen
Erstelle einen Fliesstext. Dort drin soll es bestimmte Elemente haben wie z.B. Links. Diese Elemente befinden sich zwingend im Fliesstext.
Lasse diese Elemente (z.B. Links) vergrössern und gib’ ihnen z.B. einen Border, wenn sich die Maus darüber befindet. Zusätzlich sollen noch weitere Informationen zum Element angezeigt werden.
Beispiel: Auf Wikipedia erscheint eine kleine Ansicht, die eine Kurzbeschreibung beinhaltet, wenn du mit der Maus über einen Wikipedia-Link darüberfährst.
Aufgabe 6 - Animationen
Hier hattest du ein Beispiel für einen Ladebalken: https://www.w3schools.com/howto/howto_css_loader.asp
Sicherlich kennst du den Ladebalken von Apple. Sieh dir den Cupertino Loading Indicator als GIF hier an: https://flutterawesome.com/a-collection-of-high-fidelity-loading-animations-in-gif-format-with-flutter/
Implementiere diesen Loading Indicator. Du darfst gerne ein (aber nicht mehrere) Bild benutzen, welches du dann entsprechend animierst.