Testseite für responsives Layout - Schritt 4


Responsives Layout

Skizzieren Sie die notwendigen Boxen für die bisherige Testseite, so dass drei Layouts umgesetzt werden können:

  • Standardmäßig ist die dritte Box mit ihren Inhalten ausgeblendet und die beiden Boxen mit Text stehen untereinander.
  • Ab einer Fensterbreite von 768px wird die dritte Box eingeblendet.
    Die beiden Textboxen stehen nebeneinander, die dritte Box unter ihnen ist horizontal zentriert.
  • Ab einer Fensterbreite von 1200px stehen alle drei Boxen nebeneinander.

Leiten Sie aus Ihren Skizzen die notwendigen Boxen für die Webseite ab und ergänzen Sie die bisherige HTML-Struktur um diese Boxen.

Mobile Ansicht
Mobile Ansicht der Testseite mit Bild.
Tablet-Ansicht
Tablet-Ansicht der Testseite mit Bild.
Desktop-Ansicht
Desktop-Ansicht der Testseite mit Bild.