Construindo Banner e escolhendo cores para o projeto de E-commerce

Olá, seja muito bem vindo(a), no artigo anterior falei sobre o projeto que estou construindo, completei as configurações iniciais e produzi o header. Hoje eu escolhi umas das cores, que já adicionei como variável root no css global para usar no header e completar ele.

A missão agora seria produzir um banner de destaque abaixo do cabeçalho, para isso fui no unsplash escolher uma imagem para uso gratuito no projeto, sendo que a imagem escolhida foi essa: https://unsplash.com/photos/zjQZgslA0M0.

Além disso, coloquei um “filtro” por cima da imagem para deixar ela mais escura usando o CSS, tem um tutorial sobre isso no blog: https://francileudo-frontend.blogspot.com/2022/10/como-escurecer-imagem-usando-css.html

Por fim, eu adicionei os textos e o botão na seção e fiz a estilização simples deles para ficarem por cima do banner. Escolhi uma segunda cor azul mais escura para o hover do botão. Outro ponto do projeto seria a escolha da fonte principal, optei por uma nesse momento, mas posso ver outras mais para frente.

Escolhi a Montserrat, disponível no Google Fonts, no qual adicionei o import no css global e coloquei a fonte no body para pegar no arquivo geral, dentro do global.css. Gostei do resultado, lembrando que o código pode ser encontrado no repositório: https://github.com/fransilva0/e-commerce-player-one. Vou colocar no github pages para poder ver o demo do projeto, já que tentarei criar uma série de funcionalidades nele e seria legal mostrar funcionando no portfólio.

Para os próximos artigos vou construir a seção de produtos e ver a estilização com css na página principal, futuramente estou pensando em construir uma tela de produto, depois de concluir a tela principal. Por agora é isso, um abraço e até a próxima.

artigo original: https://francileudo-frontend.blogspot.com/2022/10/construindo-banner-e-escolhendo-cores.html