Bölünmüş Ekran Düzeni

Coddy'nin HTML Journey'sinin Practical Frontend bölümünün bir parçası — ders 29 / 35.

Bölünmüş ekran düzenleri, görüntü alanını genellikle yan yana olacak şekilde iki ayrı bölüme ayırır. Bu desen; içeriği karşılaştırmak, ikili temaları sergilemek veya navigasyonu ana içerikten ayırmak için etkilidir.

İlk olarak, HTML yapısını oluşturalım:

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

Şimdi, bölünmüş ekran düzenimizi oluşturmak için CSS'i ekleyelim:

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

/* Mobilde, bölümler dikey olarak üst üste biner */
.split-screen__left {
  background-color: #f0f0f0;
}

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

/* Daha büyük ekranlarda, yan yana görüntülenirler */
@media (min-width: 768px) {
  .split-screen {
    flex-direction: row;
  }
  
  .split-screen__left,
  .split-screen__right {
    flex: 1;
  }
}

Bu düzen, mobil öncelikli yaklaşımımızı takip ederek mobil cihazlarda dikey bir yığın olarak başlar. Ekran genişliği 768 piksele veya daha fazlasına ulaştığında, düzen yatay bir bölünmeye dönüşür.

Görev Gövdesi:

Bir ürün tanıtımı için duyarlı bir bölünmüş ekran düzeni oluşturun. Sol taraf ürün bilgilerini, sağ taraf ise ürün görselini göstermelidir.

Gereksinimler:

Bölünmüş ekran mobilde (768px altı) dikey, daha büyük ekranlarda ise yatay olmalıdır
Sol taraf koyu bir arka plana (#222) ve beyaz metne sahip olmalıdır
Sağ taraf açık bir arka plana (#f5f5f5) sahip olmalıdır
Her iki tarafa 2rem dolgu ekleyin
768px'den büyük ekranlarda, sol taraf genişliğin %40'ını, sağ taraf ise %60'ını kaplamalıdır

Görev

Kolay

Size, mobil öncelikli olarak stillendirilmiş iki bölümlü bir HTML sayfası verilmiştir. Göreviniz, bunu masaüstünde iyi çalışan bir Split Screen Layout (Bölünmüş Ekran Düzeni) haline getirmektir.

Büyük ekranlarda (min-width: 768px), bunları yan yana gösterin.
Sol tarafa rgb(74, 144, 226) arka plan rengini ve rgb(255, 255, 255) metin rengini verin.
Sağ tarafa rgb(255, 255, 255) arka plan rengini ve rgb(51, 51, 51) metin rengini verin.

Kopya kağıdı

Bölünmüş ekran düzenleri, görünüm alanını genellikle yan yana olmak üzere iki bölüme ayırır. İçeriği karşılaştırmak veya navigasyonu ana içerikten ayırmak için etkilidirler.

HTML yapısı:

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

Duyarlı bölünmüş ekran düzeni için CSS:

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

/* Mobil: bölümler dikey olarak istiflenir */
.split-screen__left {
  background-color: #f0f0f0;
}

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

/* Daha büyük ekranlar: yan yana görüntüle */
@media (min-width: 768px) {
  .split-screen {
    flex-direction: row;
  }
  
  .split-screen__left,
  .split-screen__right {
    flex: 1;
  }
}

Düzen, mobil öncelikli yaklaşımı izleyerek mobil cihazlarda dikey bir yığın olarak başlar, ardından 768 piksel veya daha büyük ekranlarda yatay bölünmeye geçer.

Kendin dene

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