Crie Layouts de Assentos de Cinema Atraentes com CSS

Introdução

Neste projeto, você aprenderá como criar um arranjo de assentos para um cinema usando CSS. O objetivo é projetar um layout que inclua uma tela e uma área de assentos com requisitos específicos de espaçamento.

👀 Visualização

Visualização do layout de assentos do cinema

🎯 Tarefas

Neste projeto, você aprenderá:

Como configurar a área de assentos com o número necessário de assentos e o espaçamento entre eles
Como adicionar a tela ao layout e separá-la da área de assentos
Como aplicar estilos CSS para obter a aparência visual desejada do layout do cinema

🏆 Conquistas

Após concluir este projeto, você será capaz de:

Usar CSS para criar um layout flexível para a área de assentos
Posicionar e estilizar o elemento da tela
Aplicar regras de espaçamento específicas para obter o layout desejado
Demonstrar suas habilidades em projetar e implementar estruturas de layout complexas, o que é uma habilidade essencial para o desenvolvimento web

Configurar o Projeto

Nesta etapa, você configurará os arquivos e a estrutura do projeto. Siga as etapas abaixo para concluir esta etapa:

Abra a pasta do projeto, que contém os seguintes arquivos e diretórios:

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

Aqui:

index.html é a página principal.
css/style.css é o arquivo onde você precisa adicionar os estilos necessários.

Clique no botão Go Live no canto inferior direito do WebIDE para executar o projeto.

Em seguida, abra "Web 8080" no topo da VM e atualize-o manualmente para ver a página.

Adicionar a Tela

Nesta etapa, você aprenderá como adicionar a tela ao layout do cinema. Siga as etapas abaixo para concluir esta etapa:

Abra o arquivo css/style.css no seu editor de código.

Dentro da classe .screen, adicione as seguintes propriedades 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;
}

Isso estilizará a tela, definindo seu tamanho, cor e adicionando um efeito de rotação 3D e uma sombra projetada.

Configurar a Área de Assentos

Nesta etapa, você aprenderá como configurar a área de assentos para o cinema. Siga as etapas abaixo para concluir esta etapa:

Abra o arquivo css/style.css no seu editor de código.
Dentro da classe .seat-area, adicione as seguintes propriedades CSS:
```
.seat-area {
  display: flex;
  flex-wrap: wrap;
  margin-top: 40px;
}
```
Isso criará um layout flexível para a área de assentos, com os assentos dispostos em fileiras.
Em seguida, direcione a classe .seat e adicione as seguintes propriedades 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;
}
```
Isso estilizará os assentos individuais, definindo seu tamanho, cor e adicionando cantos arredondados.
Para criar o espaçamento desejado entre os assentos, adicione as seguintes regras 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;
}
```
Isso adicionará um espaço de 30px no lado direito da 2ª e 6ª colunas (adjacente aos corredores) e um espaço de 10px entre os outros assentos.

Seu layout do cinema está agora completo! Atualize a janela do navegador que está exibindo a página da web. O resultado final é o seguinte:

Layout de assentos do cinema concluído

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.

Disposição de Assentos de Cinema