Układ podzielonego ekranu

Część sekcji Praktyczny frontend ścieżki HTML w Coddy. Lekcja 29 z 35.

Układy dzielonego ekranu dzielą obszar wyświetlania na dwie odrębne sekcje, zwykle umieszczone obok siebie. Ten wzorzec sprawdza się przy porównywaniu treści, prezentowaniu dwóch motywów lub oddzielaniu nawigacji od głównej zawartości.

Najpierw utwórzmy strukturę HTML:

<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>

Teraz dodajmy CSS, aby utworzyć układ podzielonego ekranu:

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

/* Na urządzeniach mobilnych sekcje układają się pionowo */
.split-screen__left {
  background-color: #f0f0f0;
}

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

/* Na większych ekranach sekcje wyświetlają się obok siebie */
@media (min-width: 768px) {
  .split-screen {
    flex-direction: row;
  }
  
  .split-screen__left,
  .split-screen__right {
    flex: 1;
  }
}

Ten układ zaczyna się jako pionowy stos na urządzeniach mobilnych, zgodnie z naszym podejściem mobile-first. Gdy szerokość ekranu osiągnie 768px lub więcej, układ zmienia się w podział poziomy.

Treść wyzwania:

Utwórz responsywny układ z podzielonym ekranem do prezentacji produktu. Po lewej stronie powinny być wyświetlane informacje o produkcie, a po prawej jego obraz.

Wymagania:

Podział ekranu powinien być pionowy na urządzeniach mobilnych (poniżej 768px) i poziomy na większych ekranach
Lewa strona powinna mieć ciemne tło (#222) i biały tekst
Prawa strona powinna mieć jasne tło (#f5f5f5)
Dodaj wypełnienie o wartości 2rem po obu stronach
Na ekranach większych niż 768px lewa strona powinna zajmować 40% szerokości, a prawa 60%

Wyzwanie

Łatwy

Otrzymujesz stronę HTML z dwiema sekcjami stylizowanymi zgodnie z podejściem mobile-first. Twoim zadaniem jest przekształcenie jej w układ Split Screen Layout, który dobrze sprawdzi się na komputerach.

Na większych ekranach (min-width: 768px) wyświetl je obok siebie.
Ustaw kolor tła lewej strony na rgb(74, 144, 226), a kolor tekstu na rgb(255, 255, 255).
Ustaw kolor tła prawej strony na rgb(255, 255, 255), a kolor tekstu na rgb(51, 51, 51).

Spróbuj swoich sił

<!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>