image

Acesse bootcamps ilimitados e +650 cursos pra sempre

60
%OFF
Francileudo Oliveira
Francileudo Oliveira24/10/2022 08:23
Compartilhe

construindo um rodapé com links e formulário de contato para o projeto de e-commerce

  • #HTML
  • #CSS

Olá, seja muito bem vindo(a), no artigo de hoje daremos continuidade ao projeto do e-commerce criando a seção de rodapé na página de home. De início já tinha adicionado a tag footer no HTML quando fiz a divisão no primeiro artigo, agora para separar o rodapé em dois eu adicionei uma section dentro do footer sendo o rodapé superior e adicionei uma div em baixo dele como sendo o rodapé inferior.

A estilização do rodapé eu adicionei dentro do css global juntamente com o header. Antes de ir para lá, voltando pro HTML eu peguei o código da logo no cabeçalho e repeti aqui no rodapé, a div c-header__logo foi pro rodapé e ficou c-footer__logo, sendo que eu adicionei a mesma estilização lá do header. 

Na parte de links, fiz um ul com os links para as páginas: quem somos nós, política de privacidade, programa fidelidade, nossas lojas, quero ser franqueado e anuncie aqui. Isso abaixo da div com o logo da loja. Por último, no rodapé superior, adicionei apenas as áreas do formulário de contato, dentro de uma div.

Para a cor do rodapé superior eu coloquei a seguinte no css global: #EBF1FA. depois dei um display flex na section para deixar tudo lado-a-lado e fiz o mesmo no form para deixar tudo em coluna.

Antes de estilizar o formulário, adicionei o conteúdo do rodapé inferior e estilizei ele, já que seria mais simples. Por fim, estilizar o forms, decretando a página inicial no mínimo produto viável. Por agora irei para as páginas dos produtos, irei criar apenas a página de um produto e linkar em todos como exemplo. O link do repositório atualizado: https://github.com/fransilva0/e-commerce-player-one. Um abraço, e até a próxima.

Artigo original: https://francileudo-frontend.blogspot.com/2022/10/construindo-um-rodape-com-links-e.html

Compartilhe
Comentários (0)