Mise en page Écran scindé

Fait partie de la section Practical Frontend du Journey HTML de Coddy — leçon 29 sur 35.

Les mises en page en écran scindé divisent la fenêtre d'affichage en deux sections distinctes, généralement côte à côte. Ce modèle est efficace pour comparer du contenu, présenter des thèmes doubles ou séparer la navigation du contenu principal.

Tout d'abord, créons la structure 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>

Maintenant, ajoutons le CSS pour créer notre mise en page en écran partagé :

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

/* Sur mobile, les sections s'empilent verticalement */
.split-screen__left {
  background-color: #f0f0f0;
}

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

/* Sur les écrans plus grands, elles s'affichent côte à côte */
@media (min-width: 768px) {
  .split-screen {
    flex-direction: row;
  }
  
  .split-screen__left,
  .split-screen__right {
    flex: 1;
  }
}

Cette mise en page commence par un empilement vertical sur les appareils mobiles, suivant notre approche mobile-first. Lorsque la largeur de l'écran atteint 768px ou plus, la mise en page passe à une division horizontale.

Corps du défi :

Créez une mise en page réactive en écran scindé pour une présentation de produit. Le côté gauche doit afficher les informations sur le produit et le côté droit doit afficher l'image du produit.

Exigences :

L'écran divisé doit être vertical sur mobile (en dessous de 768px) et horizontal sur les écrans plus grands
Le côté gauche doit avoir un arrière-plan sombre (#222) et du texte blanc
Le côté droit doit avoir un arrière-plan clair (#f5f5f5)
Ajoutez un padding de 2rem des deux côtés
Sur les écrans supérieurs à 768px, le côté gauche doit occuper 40 % de la largeur et le côté droit 60 %

Défi

Facile

On vous donne une page HTML avec deux sections stylisées en approche mobile-first. Votre tâche consiste à la transformer en une Split Screen Layout qui fonctionne bien sur ordinateur.

Sur les écrans plus larges (min-width: 768px), affichez-les côte à côte.
Donnez au côté gauche une couleur d'arrière-plan rgb(74, 144, 226) et la couleur de texte rgb(255, 255, 255).
Donnez au côté droit une couleur d'arrière-plan rgb(255, 255, 255) et la couleur de texte rgb(51, 51, 51).

Aide-mémoire

Les mises en page en écran scindé (split screen) divisent la fenêtre d'affichage en deux sections, généralement côte à côte. Elles sont efficaces pour comparer du contenu ou séparer la navigation du contenu principal.

Structure 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 pour une mise en page en écran scindé réactive :

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

/* Mobile: sections stack vertically */
.split-screen__left {
  background-color: #f0f0f0;
}

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

/* Larger screens: display side by side */
@media (min-width: 768px) {
  .split-screen {
    flex-direction: row;
  }
  
  .split-screen__left,
  .split-screen__right {
    flex: 1;
  }
}

La mise en page commence par un empilement vertical sur les appareils mobiles en suivant une approche "mobile-first", puis passe à une division horizontale sur les écrans de 768px ou plus.

Essayez vous-même

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