Geteilter Bildschirm-Layout

Teil des Abschnitts Praktisches Frontend der HTML-Journey von Coddy. Lektion 29 von 35.

Geteilte Bildschirm-Layouts teilen den Ansichtsbereich in zwei separate Bereiche, typischerweise nebeneinander. Dieses Muster eignet sich gut zum Vergleichen von Inhalten, zum Präsentieren dualer Themen oder zum Trennen der Navigation vom Hauptinhalt.

Zuerst erstellen wir die HTML-Struktur:

<div class="split-screen">
  <div class="split-screen__left">
    <h2>Left Side</h2>
    <p>This is the left side content.</p>
  </div>
  <div class="split-screen__right">
    <h2>Right Side</h2>
    <p>This is the right side content.</p>
  </div>
</div>

Fügen wir nun das CSS hinzu, um unser Layout mit geteiltem Bildschirm zu erstellen:

.split-screen {
  display: flex;
  flex-direction: column;
}

/* Auf Mobilgeräten stapeln sich die Abschnitte vertikal */
.split-screen__left {
  background-color: #f0f0f0;
}

.split-screen__right {
  background-color: #e0e0e0;
}

/* Auf größeren Bildschirmen werden sie nebeneinander angezeigt */
@media (min-width: 768px) {
  .split-screen {
    flex-direction: row;
  }
  
  .split-screen__left,
  .split-screen__right {
    flex: 1;
  }
}

Dieses Layout beginnt auf mobilen Geräten als vertikaler Stapel und folgt damit unserem Mobile-First-Ansatz. Wenn die Bildschirmbreite 768px oder mehr erreicht, ändert sich das Layout in eine horizontale Aufteilung.

Aufgabenstellung:

Erstelle ein responsives geteiltes Bildschirm-Layout für eine Produktpräsentation. Die linke Seite soll Produktinformationen anzeigen, und die rechte Seite soll das Produktbild zeigen.

Anforderungen:

Der geteilte Bildschirm sollte auf Mobilgeräten (unter 768px) vertikal und auf größeren Bildschirmen horizontal sein
Die linke Seite sollte einen dunklen Hintergrund (#222) und weißen Text haben
Die rechte Seite sollte einen hellen Hintergrund (#f5f5f5) haben
Füge beiden Seiten ein Padding von 2rem hinzu
Auf Bildschirmen, die größer als 768px sind, sollte die linke Seite 40% der Breite und die rechte Seite 60% einnehmen

Aufgabe

Einfach

Du erhältst eine HTML-Seite mit zwei Abschnitten, die nach dem Mobile-First-Prinzip gestaltet sind. Deine Aufgabe besteht darin, sie in ein Split-Screen-Layout umzuwandeln, das auf Desktop-Geräten gut funktioniert.

Auf größeren Bildschirmen (min-width: 768px) sollen sie nebeneinander angezeigt werden.
Gib der linken Seite die Hintergrundfarbe rgb(74, 144, 226) und die Textfarbe rgb(255, 255, 255).
Gib der rechten Seite die Hintergrundfarbe rgb(255, 255, 255) und die Textfarbe rgb(51, 51, 51).

Probier es selbst

<!DOCTYPE html>
<html>
<head>
  <title>Split Screen Layout</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: Arial, sans-serif;
      background: #f4f4f4;
    }

    .container {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

    .left,
    .right {
      padding: 3rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
    }

    .left h1 {
      font-size: 2.5rem;
      margin-bottom: 1rem;
    }

    .right h2 {
      margin-bottom: 1rem;
    }

    form {
      display: flex;
      flex-direction: column;
      width: 100%;
      max-width: 300px;
    }

    input {
      padding: 10px;
      margin-bottom: 15px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }

    button {
      padding: 10px;
      border: none;
      background: #4a90e2;
      color: white;
      font-weight: bold;
      border-radius: 5px;
      cursor: pointer;
      transition: background 0.3s;
    }

    button:hover {
      background: #357ab7;
    }

    @media (min-width: 768px) {
     
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="left">
      <h1>Welcome!</h1>
      <p>Discover new opportunities, connect with others, and grow with us.</p>
    </div>
    <div class="right">
      <h2>Sign Up</h2>
      <form>
        <input type="text" placeholder="Your Name">
        <input type="email" placeholder="Your Email">
        <button type="submit">Join Now</button>
      </form>
    </div>
  </div>
</body>
</html>