Créez des layouts d'agencement de sièges pour cinéma captivants avec CSS

Introduction

Dans ce projet, vous allez apprendre à créer un arrangement des sièges pour un cinéma à l'aide de CSS. L'objectif est de concevoir une mise en page qui inclut un écran et une zone de sièges avec des exigences de spacing spécifiques.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

Comment configurer la zone de sièges avec le nombre requis de sièges et l'espacement entre eux
Comment ajouter l'écran à la mise en page et le séparer de la zone de sièges
Comment appliquer des styles CSS pour obtenir l'apparence visuelle souhaitée de la mise en page du cinéma

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

Utiliser CSS pour créer une mise en page flexible pour la zone de sièges
Positionner et styliser l'élément d'écran
Appliquer des règles d'espacement spécifiques pour obtenir la mise en page souhaitée
Montrer vos compétences dans la conception et la mise en œuvre de structures de mise en page complexes, qui est une compétence essentielle pour le développement web

Configurer le projet

Dans cette étape, vous allez configurer les fichiers et la structure du projet. Suivez les étapes ci-dessous pour terminer cette étape :

Ouvrez le dossier du projet, qui contient les fichiers et les dossiers suivants :

├── css
│   └── style.css
└── index.html

Ici :

index.html est la page principale.
css/style.css est le fichier dans lequel vous devez ajouter les styles requis.

Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.

Ensuite, ouvrez "Web 8080" en haut de la VM et rafraîchissez-le manuellement et vous verrez la page.

Ajouter l'écran

Dans cette étape, vous allez apprendre à ajouter l'écran à la mise en page du cinéma. Suivez les étapes ci-dessous pour terminer cette étape :

Ouvrez le fichier css/style.css dans votre éditeur de code.

Dans la classe .screen, ajoutez les propriétés CSS suivantes :

.screen {
  background-color: #fff;
  height: 70px;
  width: 100%;
  transform: rotateX(-45deg);
  box-shadow: 0 3px 10px rgba(255, 255, 255, 0.7);
  color: #242333;
  text-align: center;
  line-height: 70px;
  font-size: 30px;
}

Cela stylera l'écran, en définissant sa taille, sa couleur et en ajoutant un effet de rotation 3D et une ombre portée.

Configurer la zone de sièges

Dans cette étape, vous allez apprendre à configurer la zone de sièges pour le cinéma. Suivez les étapes ci-dessous pour terminer cette étape :

Ouvrez le fichier css/style.css dans votre éditeur de code.
Dans la classe .seat - area, ajoutez les propriétés CSS suivantes :
```
.seat - area {
 display: flex;
 flex - wrap: wrap;
 margin - top: 40px;
}
```
Cela créera une mise en page flexible pour la zone de sièges, avec les sièges disposés en rangées.

Ensuite, ciblez la classe .seat et ajoutez les propriétés CSS suivantes :

.seat {
 background - color: #444451;
 height: 40px;
 width: 45px;
 border - top - left - radius: 10px;
 border - top - right - radius: 10px;
 margin - right: 10px;
 margin - top: 10px;
}

Cela stylera les sièges individuels, en définissant leur taille, leur couleur et en ajoutant des coins arrondis.

Pour créer l'espacement souhaité entre les sièges, ajoutez les règles CSS suivantes :
```
.seat:nth - child(8n + 2) {
 margin - right: 30px;
}
```

.seat:nth - child(8n + 6) {
margin - right: 30px;
}

.seat:nth - child(8n + 0) {
margin - right: 0;
}

Cela ajoutera un espace de 30px sur le côté droit des 2e et 6e colonnes (adjacentes aux allées), et un espace de 10px entre les autres sièges.

Votre mise en page du cinéma est maintenant complète! Rafraîchissez la fenêtre du navigateur qui affiche la page web. Le résultat final est le suivant :

![Mise en page complète des sièges du cinéma](https://file.labex.io/namespace/718bace8-27a3-4200-a588-dde4041ceeb9/css/project-movie-theater-seat-arrangement/lab-movie-theater-seat-arrangement/fr/../assets/1.png)

✨ Vérifier la solution et pratiquer