Arreglo de asientos en un cine

Introducción

En este proyecto, aprenderás a crear un arreglo de asientos para un cine utilizando CSS. El objetivo es diseñar un diseño que incluya una pantalla y una área de asientos con requisitos de espaciado específicos.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo configurar el área de asientos con el número requerido de asientos y el espaciado entre ellos
• Cómo agregar la pantalla al diseño y separarla de la área de asientos
• Cómo aplicar estilos CSS para lograr el aspecto visual deseado del diseño del cine

🏆 Logros

Después de completar este proyecto, podrás:

• Utilizar CSS para crear un diseño flexible para el área de asientos
• Posicionar y dar estilo al elemento de pantalla
• Aplicar reglas de espaciado específicas para lograr el diseño deseado
• Demostrar tus habilidades en el diseño e implementación de estructuras de diseño complejas, que es una habilidad esencial para el desarrollo web

Configurar el proyecto

En este paso, configurarás los archivos y la estructura del proyecto. Sigue los pasos siguientes para completar este paso:

Abre la carpeta del proyecto, que contiene los siguientes archivos y directorios:

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

Aquí:

• index.html es la página principal.
• css/style.css es el archivo donde debes agregar los estilos necesarios.

Haz clic en el botón Go Live en la esquina inferior derecha de WebIDE, para ejecutar el proyecto.

Luego, abre "Web 8080" en la parte superior de la VM y actualízala manualmente y verás la página.

Agregar la pantalla

En este paso, aprenderás a agregar la pantalla al diseño del cine. Sigue los pasos siguientes para completar este paso:

1. Abre el archivo css/style.css en tu editor de código.

2. Dentro de la clase .screen, agrega las siguientes propiedades CSS:

   .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;
   }
   

   Esto dará estilo a la pantalla, definiendo su tamaño, color y agregando un efecto de rotación 3D y una sombra.

Configurar el área de asientos

En este paso, aprenderás a configurar el área de asientos para el cine. Sigue los pasos siguientes para completar este paso:

1. Abre el archivo css/style.css en tu editor de código.

2. Dentro de la clase .seat - area, agrega las siguientes propiedades CSS:

   .seat - area {
    display: flex;
    flex - wrap: wrap;
    margin - top: 40px;
   }
   

   Esto creará un diseño flexible para el área de asientos, con los asientos dispuestos en filas.

3. A continuación, selecciona la clase .seat y agrega las siguientes propiedades CSS:

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

   Esto dará estilo a los asientos individuales, definiendo su tamaño, color y agregando esquinas redondeadas.

4. Para crear el espaciado deseado entre los asientos, agrega las siguientes reglas CSS:

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

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

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

Esto agregará un espacio de 30px en el lado derecho de la 2ª y 6ª columnas (adyacentes a los pasillos), y un espacio de 10px entre los demás asientos.

Tu diseño de cine ya está completo! Actualiza la ventana del navegador que está mostrando la página web. El resultado final es el siguiente:

![Diseño completo de asientos de cine](https://file.labex.io/namespace/718bace8-27a3-4200-a588-dde4041ceeb9/css/project-movie-theater-seat-arrangement/lab-movie-theater-seat-arrangement/es/../assets/1.png)

Resumen

¡Felicidades! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.