Projeto desenvolvido ao longo da formação "A partir do zero: HTML e CSS para projetos web" da Alura utilizando o método "Mobile First". O projeto tem o objetivo de simular uma loja online de livros relacionados a área de T.I. Também tem o foco de mostrar conhecimento em tecnologias relacionadas ao CSS e HTML e, por isso, não possui uma linguagem de programação.
- HTML
- CSS
- Flexbox
- Biblioteca SwiperJS
- Media Queries
- @import
- Variáveis CSS
- Google Fonts
- Figma
- Dentre outras
O projeto possui responsividade para 3 variações de tela:
-
A partir 360px - Celulares (tela padrão)
-
A partir 1024px -Tablets
-
A partir 1728px - Desktops
O site foi desenvolvido com base no modelo do Figma.
O header possui:
- Um menu hamburguer, que ao ser clicado, revela alguns links de navegação pela página. (apenas para mobile)
- A logo e o título da Alura Books. (título apenas para tablets e desktops)
- 3 links de navegação, "Categorias", "Favoritos", "Minha estante", sendo que "Categorias" tem a mesma propriedade do menu hambúrguer dos celulares. (Apenas para tablets e desktops)
- ícones de coração, sacola e usuário.(ícone de coração apenas para celulares)
- "Minha sacola" e "Meu perfil" só aparecem em dispositivos desktops.
O banner possui:
- Possui um título e um subtítulo.
- Um input de pesquisa.
Possui:
- Um carrossel de imagens de capas de livros que permite o usuário deslizar sobre o conteúdo.
- Botões para mostrar o próximo item ou o anterior.
- Há um efeito de autoplay a cada 5 segundos que desliza automaticamente para o próximo item do carrossel.
- Há um título fazendo referência ao conteúdo do carrossel.
Possui:
- Mostra um conteúdo adicional.
- Tem um titulo, subtítulo, parágrafos.
- Uma imagem relacionada ao conteúdo do card.
- Botão de saiba mais.
Possui:
- Título.
- Lista varios links tecnologias visitadas.
Possui:
- Título e parágrafo.
- Um input de e-mail.
Possui:
- Um subtítulo.
- Lista varios links de sites relacionados com imagens. (apenas para tablets e desktops)