Bố cục màn hình chia đôi

Thuộc phần Thực hành frontend trong hành trình HTML của Coddy. Bài học 29 trên 35.

Bố cục chia đôi màn hình phân vùng khung nhìn thành hai khu vực riêng biệt, thường đặt cạnh nhau. Kiểu bố cục này phù hợp để so sánh nội dung, giới thiệu hai chủ đề hoặc tách phần điều hướng khỏi nội dung chính.

Trước tiên, hãy tạo cấu trúc 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>

Giờ hãy thêm CSS để tạo bố cục chia đôi màn hình:

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

/* Trên thiết bị di động, các phần xếp chồng theo chiều dọc */
.split-screen__left {
  background-color: #f0f0f0;
}

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

/* Trên màn hình lớn hơn, các phần hiển thị cạnh nhau */
@media (min-width: 768px) {
  .split-screen {
    flex-direction: row;
  }
  
  .split-screen__left,
  .split-screen__right {
    flex: 1;
  }
}

Bố cục này bắt đầu với các phần xếp chồng theo chiều dọc trên thiết bị di động, theo cách tiếp cận ưu tiên thiết bị di động. Khi chiều rộng màn hình đạt 768px trở lên, bố cục chuyển thành hai phần nằm cạnh nhau theo chiều ngang.

Nội dung thử thách:

Tạo bố cục màn hình chia đôi có khả năng thích ứng cho phần giới thiệu sản phẩm. Bên trái hiển thị thông tin sản phẩm, còn bên phải hiển thị hình ảnh sản phẩm.

Yêu cầu:

Màn hình chia đôi cần xếp theo chiều dọc trên thiết bị di động (dưới 768px) và theo chiều ngang trên màn hình lớn hơn
Phần bên trái cần có nền tối (#222) và chữ màu trắng
Phần bên phải cần có nền sáng (#f5f5f5)
Thêm khoảng đệm 2rem cho cả hai phần
Trên màn hình lớn hơn 768px, phần bên trái cần chiếm 40% chiều rộng và phần bên phải chiếm 60%

Thử thách

Dễ

Bạn được cung cấp một trang HTML có hai phần được định dạng theo hướng ưu tiên thiết bị di động. Nhiệm vụ của bạn là biến trang đó thành Bố cục màn hình chia đôi hoạt động tốt trên máy tính.

Trên màn hình lớn hơn (min-width: 768px), hiển thị hai phần cạnh nhau.
Đặt màu nền của phần bên trái là rgb(74, 144, 226) và màu chữ là rgb(255, 255, 255).
Đặt màu nền của phần bên phải là rgb(255, 255, 255) và màu chữ là rgb(51, 51, 51).

Tự làm thử

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