Diseño de pantalla dividida

Parte de la sección Practical Frontend 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 mobile-first. 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 padding de 2rem a ambos lados
En pantallas de más de 768px, el lado izquierdo debe ocupar el 40% del ancho y el lado derecho el 60%

Desafío

Fácil

Se te proporciona una página HTML con dos secciones diseñadas siguiendo un enfoque "mobile-first". Tu tarea es convertirla en un Split Screen Layout (diseño de pantalla dividida) que funcione bien en escritorio.

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

Hoja de referencia

Los diseños de pantalla dividida dividen la ventana gráfica en dos secciones, normalmente una al lado de la otra. Son efectivos para comparar contenido o separar la navegación del contenido principal.

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>

CSS para un diseño de pantalla dividida responsivo:

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

/* Móvil: las secciones se apilan verticalmente */
.split-screen__left {
  background-color: #f0f0f0;
}

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

/* 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;
  }
}

El diseño comienza como una pila vertical en dispositivos móviles siguiendo un enfoque mobile-first, luego cambia a una división horizontal en pantallas de 768px o más.

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>