Desenvolvimento da página Início e da página de Picos do site da HZC. O projeto foi elaborado ao longo do cursos de CSS: dispondo elementos com Flexbox e Grid, realizado na plataforma Alura e orientado pelo instrutor Matheus Alberto. O objetivo do projeto foi aprofundar os conhecimentos em HTML e CSS, por meio do uso de tags semânticas, estruturas de HTML mais complexas e novas propriedades como grid.
- Uso da tag
<article>para criar cartões - Uso do método toggle para criar um menu lateral oculto
- Incorporar ícones como fontes à página, fazendo uso de pseudo-elementos para mostrar tais ícones (
::before::after) - Propriedades do display
grid:grid-template-column,grid-template-row,grid-template-area,grid-area,grid-column,grid-row,row-gap,column-gap,span,repeat(valor1, valor2) - Uso de propriedades do display
flex:justify-content,gap,align-itens, entre outras. - Como fazer os itens aparecerem em um tamanho de display e sumirem em outro por meio do
display:noneedisplay:block - Uso da técnica de mobile-first
A aplicação apresenta, até o momento, duas páginas, sendo ambas responsivas em versões mobile e desktop.
Elas apresentam um menu lateral oculto na versão mobile que fica fixo na versão desktop, uma série de cartões que apresentam informações de vídeos, produtos, artes e localizações distribuidas na tela por meio da orientação de um grid.
Versão Mobile
Versão Desktop
- Inicialmente você precisa ter instalado em seu computador um editor de código-fonte, no meu caso eu utilizo o Visual Studio Code.
- Depois, você pode fazer o download do projeto clicando na opção Code e em seguida selecionando Download Zip.
Ou
- Clonar o repositório
git clone https://github.com/RodrigoHarder/HZC.git
- Localizar e abrir a pasta HZC
cd HZC
Neste projeto foram usadas as seguintes linguagens:
Para a construção dos códigos que compõem a página foi utilizado o editor de código-fonte abaixo:
