Projeto final da disciplina Front-End Essencial da formação em Residência TIC no Serratec. O programa foi desenvolvido em HTML5, CSS e JavaScript através do VSCode.
O projeto é a versão incial de um MVP (Minimum Viable Product) de e-commerce com landing page inicial, catálogo de produtos, visualização da página do produto com descrição, carrinho de compras, página sobre os vendedores, contato com a loja e login para compra.
O código desenvolvido busca atender aos requisitos abaixo:
- Página Inicial: Landing Page com título da loja, imagem de representação do segmento e botão. Exigências: texto alinhado ao centro, título com efeito sombreado e texto em letras minúsculas no HTML e modificação do estilo para capitalizado via CSS. Botão com efeito hover e link direto para a vitrine.
- Vitrine: Página de exibição dos produtos da loja. Exigências: menu fixo ocupando toda a largura da página com logo alinhada a esquerda, link para páginas internas ao centro (quem somos e contato). Opção de login na página no canto superior direito com ícone de pessoa arredondado via CSS. Caminho percorrido pelo usuário até chegar a vitrine. Produtos dispostos em três colunas e duas linhas contendo título, imagem ocupando todo o espaço do card, quantidade a ser adicionada ao carrinho e botão de compra.
- Detalhes do Produto: Página do produto contendo informações detalhadas sobre o mesmo. Exigências: produtos identificados na barra de endereço (via título, id, sequencial ou afim), container com imagem do produto, descrição, botão para adicionar ou limpar o carrinho.
- Carrinho: Função bônus contendo ícone de carrinho e simulação de uma compra sinalizado via badge com quantidade de produtos na sacola. Essa opção apresenta um pop-up com a simulação de uma compra.
-Quem Somos: Página com detalhes dos integrantes do grupo. Para fins de design, foi escolhido gerar um avatar personalizado para cada integrante, via PicCrew. Além disso, também contém o cargo fictício de cada integrante e descrição que relacione com a temática da loja.
1. Sombra
2. Flexbox
3. Transição
4. Animação
5. Responsividade
1. Clone o repositório em sua máquina.
2. Após descompactar a pasta, importe o diretório no VSCode e visualize a versão através do servidor (recomendamos a extensão Live Server, de Ritwick Dey, para melhor visualização do layout desenvolvido.
Este projeto é um exercício acadêmico que tem objetivo de aprimorar as habilidades de programação dos alunos em Front-End Essencial nas linguagens HTML, CSS e JavaScript. Sugestões de melhorias são bem-vindas.
Este projeto foi desenvolvido pelo Grupo 4da Turma 22 (Nova Friburgo/Teresópolis) do Serratec 2024.2 com os seguintes integrantes:
- Eduarda Pinho
- Fernanda Canto
- Isabella Pinheiro
- Renata Rodrigues
- Tiago Ventura
- Vinicius Ramos