tela simples de produtos para projeto de e-commerce

Olá, seja muito bem vindo(a), no artigo de hoje vou começar a construir uma página de produto para o e-commerce. Primeiro vou criar uma pasta chamada pages, para adicionar todas as páginas que não sejam a inicial, também foi iniciar um arquivo css para a estilização própria da página.

Após isso, copiei e colei os códigos HTML da página inicial, referentes ao cabeçalho e ao rodapé. Agora precisamos trabalhar apenas no main da página de produtos. Inicialmente iremos construir uma section para colocar a imagem do produto e ao lado dele adicionar uma div com o nome, preço e um texto genérico que seria sobre o produto.

Depois de posicionar a seção e organizar o tamanho da imagem, já tenho uma página de produto razoável. Abaixo do texto do produto coloquei uma div com dois botões e uma tag p com o 0 no meio, esse seria o contador de quantidade de produto, mas por agora irei deixar ele sem funcionar, verei isso depois no javascript.

Por fim, coloquei uma div com dois botões para compra e adição no carrinho, sendo que eles tem a estilização do botão do banner, porém são mais longos de largura. O resultado final apresentou uma tela de produto simples, falta algumas coisas como uma seção de produtos similares, por exemplo, mas por agora ele está ótimo.

Antes de subir as modificações para o repositório do projeto, adicionei nos links de produto o caminho para a página e no cabeçalho, o logo ao ser clicado leva para a página de home novamente. Próxima parada, tela de login e de inscrição no e-commerce. Um abraço e até a próxima.

link do repositório do projeto: https://github.com/fransilva0/e-commerce-player-one

Artigo Original: https://francileudo-frontend.blogspot.com/2022/10/tela-simples-de-produtos-para-projeto.html