Tata Letak Layar Terbagi

Termasuk bagian Frontend Praktis dalam perjalanan HTML di Coddy. Pelajaran 29 dari 35.

Tata letak layar terbagi membagi viewport menjadi dua bagian yang berbeda, biasanya berdampingan. Pola ini efektif untuk membandingkan konten, menampilkan dua tema, atau memisahkan navigasi dari konten utama.

Pertama, mari buat 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>

Sekarang, mari tambahkan CSS untuk membuat tata letak layar terbagi:

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

/* Di layar ponsel, bagian-bagian tersusun secara vertikal */
.split-screen__left {
  background-color: #f0f0f0;
}

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

/* Di layar yang lebih besar, bagian-bagian tampil berdampingan */
@media (min-width: 768px) {
  .split-screen {
    flex-direction: row;
  }
  
  .split-screen__left,
  .split-screen__right {
    flex: 1;
  }
}

Tata letak ini awalnya berupa susunan vertikal di perangkat seluler, sesuai dengan pendekatan yang mengutamakan perangkat seluler. Saat lebar layar mencapai 768px atau lebih, tata letak berubah menjadi pembagian horizontal.

Isi Tantangan:

Buat tata letak layar terbagi yang responsif untuk menampilkan produk. Sisi kiri harus menampilkan informasi produk, dan sisi kanan harus menampilkan gambar produk.

Persyaratan:

Layar terbagi harus tersusun vertikal di perangkat seluler (di bawah 768px) dan horizontal di layar yang lebih besar
Sisi kiri harus memiliki latar belakang gelap (#222) dan teks putih
Sisi kanan harus memiliki latar belakang terang (#f5f5f5)
Tambahkan padding sebesar 2rem pada kedua sisi
Di layar yang lebih besar dari 768px, sisi kiri harus menggunakan 40% lebar dan sisi kanan 60%

Tantangan

Mudah

Kamu diberi halaman HTML dengan dua bagian yang ditata dengan pendekatan mobile-first. Tugasmu adalah mengubahnya menjadi Tata Letak Layar Terpisah yang berfungsi dengan baik di desktop.

Pada layar yang lebih besar (min-width: 768px), tampilkan keduanya berdampingan.
Beri sisi kiri warna latar rgb(74, 144, 226) dan warna teks rgb(255, 255, 255).
Beri sisi kanan warna latar rgb(255, 255, 255) dan warna teks rgb(51, 51, 51).

Coba sendiri

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