Mise en page Écran scindé

Fait partie de la section Front-end pratique du Journey HTML de Coddy. Leçon 29 sur 35.

Les mises en page en écran partagé 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 deux thèmes 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 une disposition en pile verticale sur les appareils mobiles, conformément à notre approche mobile-first. Lorsque la largeur de l’écran atteint 768px ou plus, la mise en page se transforme en 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 partagé doit être vertical sur les appareils mobiles (moins 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 remplissage de 2rem aux deux côtés
Sur les écrans de plus de 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 conçues selon une approche mobile-first. Votre tâche consiste à la transformer en une mise en page en écran partagé 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 une couleur de texte rgb(255, 255, 255).
Donnez au côté droit une couleur d’arrière-plan rgb(255, 255, 255) et une couleur de texte rgb(51, 51, 51).

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>