Seções de produtos e animação de aumento de link com css para projeto de e-commerce

Olá, seja muito bem vindo(a), no artigo de hoje, em continuação da elaboração do projeto de e-commerce de jogos, vou produzir a seção de produtos, sendo que tem três na página inicial, fazendo a primeira, basta copiar mais duas e modificar os produtos que aparecem.

Inicialmente precisei de 6 imagens de produtos, peguei todos relacionados ao Super Mario para criar uma seção destaque só com eles, todas as imagens estão no unsplash, no repositório você vai encontrar os links de cada uma delas no HTML da seção.

Primeiro, dentro da seção eu adicionei uma div para o título e o link de ver mais produtos, depois criei uma lista para adicionar os seis produtos que irão ficar visíveis na página inicial. Peguei um código de seta no site https://www.w3schools.com/charsets/ref_html_entities_4.asp, para utilizar no link.

No link de ver mais produtos, adicionei uma animação simples para quando o usuário passar o mouse por cima, o link muda de cor e cresce um pouco. Essa mesma animação ficou no link dos cards de produto. Gostei do resultado final da seção, além de ter usado o wrap na lista para que os cards ficassem lado-a-lado em quantidade de acordo com o tamanho da tela, onde todos os seis ficaram na mesma fila em telas maiores e um abaixo do outro em telas menores, sem usar media querie por agora.

Como mencionado anteriormente, peguei a seção pronta e copiei, na segunda seção adicionei imagens de consoles pegos no unsplash e na terceira seção uma série de imagens diversificadas de produtos gamers.

A próxima etapa será construir o rodapé do projeto com links de páginas, logo do site, área para mandar e-mail e créditos de criação do site. Isso encerra a página de home do site para seguirmos para as demais páginas, uma ideia para futuramente, é criar um menu responsivo no header para o usuário navegar entre algumas páginas, como uma página falando sobre a empresa ou com uma lista de oportunidades de emprego, são dicas interessantes para produzir mais para frente. Um abraço e até a próxima.

link do repositório do projeto para consulta do código atual: https://github.com/fransilva0/e-commerce-player-one

Artigo original: https://francileudo-frontend.blogspot.com/2022/10/secoes-de-produtos-e-animacao-de.html