Este é um projeto prático desenvolvido para revisar e aplicar os conceitos aprendidos ao longo do módulo de CSS3, utilizando HTML e CSS. O objetivo do projeto é construir um site realista, interativo e responsivo, incorporando diversos aspectos do CSS, como Box Model, Display, Seletores, Heranças, Variáveis, entre outros.
- Objetivo do Projeto
- Tecnologias Utilizadas
- Estrutura do Projeto
- Como Rodar o Projeto
- Screenshots
- Licença
O site "Seal World" é uma página informativa dedicada a explorar o fascinante mundo das focas. Através de uma navegação simples e visualmente envolvente, o site apresenta várias seções sobre curiosidades, habitats e comportamentos das focas, além de uma galeria de imagens interativa. Durante o desenvolvimento, foram utilizados diversos conceitos de CSS para criar um layout moderno e atraente.
- Box Model: Utilização correta de margens, bordas, preenchimento e dimensões de elementos.
- Display e Layout: Utilização de diferentes propriedades de display como
flexegridpara construir um layout responsivo e fluido. - Seletores e Heranças: Aplicação de seletores CSS e hierarquia de herança para otimizar o código.
- Variáveis CSS: Utilização de variáveis para cores e fontes para facilitar a manutenção e personalização do projeto.
- HTML5: Estrutura semântica e acessível do conteúdo.
- CSS3: Estilização do layout, com uso avançado de propriedades e técnicas como flexbox, media queries e animações.
- Fontes: Utilização da fonte "Oxygen" do Google Fonts.
- Vídeo de Fundo: Utilização de um vídeo de fundo para criar um efeito visual dinâmico.
-
Clone o repositório para o seu computador:
Abra o terminal ou prompt de comando e execute o seguinte comando para clonar o repositório:
git clone [email protected]:DarllysonS/seal-world.git
-
Acesse o diretório do projeto:
Navegue até o diretório do projeto clonado:
cd seal-world -
Abra o arquivo index.html:
Após ter clonado o repositório e acessado o diretório, basta abrir o arquivo index.html no navegador de sua escolha.