/E-commerce-page

Primary LanguageCSS

E-commerce Website

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/

Conteúdo do Projeto

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.

Instruções de Uso

  1. Baixe os arquivos do projeto para o seu computador.

  2. Abra o arquivo index.html em um navegador da web.

  3. Navegue pelo site, clique nos botões de adicionar ao carrinho, aumentar/diminuir a quantidade e visualizar imagens em um modal ampliado.

Estrutura do Código

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.

Tecnologias Utilizadas

  • HTML
  • CSS
  • JavaScript

Considerações e Sugestões

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!