Diseño de pantalla dividida

Parte de la sección Frontend Práctico del Journey de HTML de Coddy. Lección 29 de 35.

Los diseños de pantalla dividida dividen el viewport en dos secciones distintas, normalmente una al lado de la otra. Este patrón es eficaz para comparar contenido, mostrar temas duales o separar la navegación del contenido principal.

Primero, vamos a crear la estructura 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>

Ahora, agreguemos el CSS para crear nuestro diseño de pantalla dividida:

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

/* En móviles, las secciones se apilan verticalmente */
.split-screen__left {
  background-color: #f0f0f0;
}

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

/* En pantallas más grandes, se muestran una al lado de la otra */
@media (min-width: 768px) {
  .split-screen {
    flex-direction: row;
  }
  
  .split-screen__left,
  .split-screen__right {
    flex: 1;
  }
}

Este diseño comienza como una pila vertical en dispositivos móviles, siguiendo nuestro enfoque centrado en dispositivos móviles. Cuando el ancho de la pantalla alcanza los 768px o más, el diseño cambia a una división horizontal.

Cuerpo del desafío:

Crea un diseño de pantalla dividida adaptable para una exhibición de productos. El lado izquierdo debe mostrar la información del producto y el lado derecho debe mostrar la imagen del producto.

Requisitos:

La pantalla dividida debe ser vertical en dispositivos móviles (por debajo de 768px) y horizontal en pantallas más grandes
El lado izquierdo debe tener un fondo oscuro (#222) y texto blanco
El lado derecho debe tener un fondo claro (#f5f5f5)
Añade un relleno de 2rem a ambos lados
En pantallas de más de 768px, el lado izquierdo debe ocupar el 40% del ancho y el derecho, el 60%

Desafío

Fácil

Se te proporciona una página HTML con dos secciones diseñadas con un enfoque móvil primero. Tu tarea es convertirla en un diseño de pantalla dividida que funcione bien en ordenadores de escritorio.

En pantallas más grandes (min-width: 768px), muéstralas una al lado de la otra.
Asigna al lado izquierdo un color de fondo rgb(74, 144, 226) y el color de texto rgb(255, 255, 255).
Asigna al lado derecho un color de fondo rgb(255, 255, 255) y el color de texto rgb(51, 51, 51).

Pruébalo tú mismo

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