Web - Übung 9, HTML & CSS - Responsive Design

From Coders.Bay Wiki
Jump to navigation Jump to search

Übung 9 - Website Travel Destination Erweiterung - Teil 3[edit]

  • Nutze das Gridsystem (z.B.: generelle Layoutstruktur/ Seitenaufbau) und Flexboxen(z.B.: Navigationselemente)für das Layout
  • Erstelle verschiedene Breakpoints (Media Queries) in deiner Seite, wenn notwendig!
  • Erstelle (falls noch nicht vorhanden) ein Kontaktformular für deine Reisedestination Seite bei der du mittels Dropdown eine Destination auch auswählen kannst plus ein paar anderer Formularfelder. In der mobilen Ansicht sollen die Labels für die Inputfelder darüber stehen, auf großen Screens daneben.
  • Baue eine Klappnavigation (Burgermenue) z.B.: anhand der Vorlage: https://www.w3schools.com/howto/howto_js_mobile_navbar.asp
  • Binde für die unterschiedlichen Displaygrößen unterschiedliche Fotos ein
  • Baue eine Keyframe Animation
  • nutze Custom Properties um die Farben oder sich wiederholende Maßeinheiten als Variable abzuspeichern
  • baue bei deinen Bildern einen Filtereffekt ein