Split-Screen-Layout

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

Split-Screen-Layouts unterteilen den Viewport in zwei verschiedene Abschnitte, die in der Regel nebeneinander liegen. Dieses Muster ist effektiv für den Vergleich von Inhalten, die Präsentation dualer Themen oder die Trennung 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 Split-Screen-Layout zu erstellen:

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

/* Auf Mobilgeräten werden die Abschnitte vertikal gestapelt */
.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 Mobilgeräten als vertikaler Stapel und folgt damit unserem Mobile-First-Ansatz. Wenn die Bildschirmbreite 768px oder mehr erreicht, wechselt das Layout zu einer horizontalen Teilung.

Aufgabenstellung:

Erstellen Sie ein responsives Split-Screen-Layout für eine Produktpräsentation. Die linke Seite soll Produktinformationen anzeigen und die rechte Seite das Produktbild.

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ügen Sie auf beiden Seiten ein Padding von 2rem hinzu
Auf Bildschirmen größer als 768px sollte die linke Seite 40% der Breite einnehmen und die rechte Seite 60%

Aufgabe

Einfach

Sie haben eine HTML-Seite mit zwei Abschnitten erhalten, die nach dem Mobile-First-Prinzip gestaltet sind. Ihre Aufgabe ist es, diese in ein Split-Screen-Layout umzuwandeln, das auf dem Desktop gut funktioniert.

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

Spickzettel

Split-Screen-Layouts unterteilen den Viewport in zwei Abschnitte, die in der Regel nebeneinander liegen. Sie eignen sich gut zum Vergleichen von Inhalten oder zum Trennen der Navigation vom Hauptinhalt.

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>

CSS für ein responsives Split-Screen-Layout:

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

/* Mobil: Abschnitte werden vertikal gestapelt */
.split-screen__left {
  background-color: #f0f0f0;
}

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

/* Größere Bildschirme: Anzeige nebeneinander */
@media (min-width: 768px) {
  .split-screen {
    flex-direction: row;
  }
  
  .split-screen__left,
  .split-screen__right {
    flex: 1;
  }
}

Das Layout beginnt auf mobilen Geräten gemäß dem Mobile-First-Ansatz als vertikaler Stapel und wechselt dann auf Bildschirmen ab 768px Breite zu einer horizontalen Teilung.

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>