Este é um projeto de exemplo de um website de comércio eletrônico. O objetivo deste projeto é demonstrar a estrutura básica de uma página HTML para um site de e-commerce, juntamente com a interação dos elementos da página usando JavaScript. O protótipo utilizado como base vc pode encontra-lo nesse link: https://www.frontendmentor.io/challenges/ecommerce-product-page-UPsZ9MJp6
Veja o projeto final clicando aqui: https://pepson-ecommerce-page.netlify.app/
O projeto consiste em vários arquivos que descrevem a estrutura do site e a lógica de interação:
index.html
: Este arquivo contém a estrutura HTML da página, incluindo cabeçalho, conteúdo principal e elementos do carrinho de compras.style.css
: Este arquivo contém os estilos CSS para a página.mobile.css
: Este arquivo contém os estilos CSS específicos para dispositivos móveis.index.js
: Este arquivo contém o código JavaScript que interage com os elementos da página, como botões e imagens.
-
Baixe os arquivos do projeto para o seu computador.
-
Abra o arquivo
index.html
em um navegador da web. -
Navegue pelo site, clique nos botões de adicionar ao carrinho, aumentar/diminuir a quantidade e visualizar imagens em um modal ampliado.
A estrutura do código pode ser dividida em várias partes:
-
Cabeçalho: O cabeçalho do site contém o logotipo da empresa, menu de navegação e contador de carrinho de compras.
-
Carrinho de Compras: Existem duas seções do carrinho de compras: uma para quando o carrinho está vazio e outra para quando há itens no carrinho.
-
Conteúdo Principal: O conteúdo principal da página exibe informações sobre um produto específico, incluindo imagem, nome, descrição e preço. Há também opções para adicionar o produto ao carrinho.
-
Modal de Imagem: O site possui um recurso de visualização de imagens em um modal ampliado. Quando uma imagem é clicada, um modal é aberto exibindo a imagem em tamanho maior.
-
Interatividade com JavaScript: O código JavaScript presente no arquivo
index.js
é responsável por adicionar a interatividade aos elementos da página. Ele controla a exibição do carrinho de compras, manipula a quantidade de itens, atualiza os preços e controla o modal de imagem.
- HTML
- CSS
- JavaScript
Este projeto de exemplo demonstra a estrutura básica de um site de comércio eletrônico, juntamente com a interatividade fornecida pelo JavaScript. Você pode usar esse projeto como ponto de partida para criar seu próprio site de e-commerce, adaptando-o de acordo com suas necessidades específicas. Sinta-se à vontade para adicionar mais funcionalidades, estilos e recursos ao projeto. Divirta-se explorando e aprimorando seu site de e-commerce!