image

Acesse bootcamps ilimitados e +650 cursos pra sempre

60
%OFF
Article image
Islânia Silva
Islânia Silva24/08/2025 17:02
Share

Criando minha primeira Landing Page com HTML e CSS by Michele Ambrosio

  • #CSS

Queria compartilhar que estou muito feliz por ter conseguido realizar esse desafio proposto pela excelentíssima Michele Ambrosio, cujo tem uma didática excelente e de fácil entendimento. Ansiosa pelo próximo desafio!!!

Alterações Realizadas no Projeto

1. HTML

  • Adicionado favicon para personalizar o ícone do navegador.
  • Inclusão da fonte Raleway via Google Fonts para estilização do texto.

image

2. CSS

  • Configurada a fonte Raleway como padrão em todos os elementos.
  • Ajustes no footer:
  • Gradiente vertical.
  • Espaçamento (margens e padding) otimizado.
  • Links em azul, negrito e sem sublinhado.
  • Melhorias no layout e sombreamento das seções de módulos.
  • Gradientes aplicados para maior profundidade visual.

image

3. Layout Geral

  • Body: fundo preto, sem margens.
  • Banner:
  • Gradiente vertical (preto → azul → preto) com opacidade.
  • Imagem de fundo cobrindo todo o elemento (background-size: cover), altura de 550px.
  • Borda inferior azul.
  • Banner Content: centralizado horizontal e verticalmente.
  • Logo: círculo semi-transparente, centralizado dentro do banner.

4. Seções do Projeto

Banner

  • Título h1 com gradiente azul e letras maiúsculas.
  • Parágrafo (p-banner) com fonte branca e alinhamento à esquerda.
  • Botão estilizado:
  • Fundo transparente
  • Borda azul
  • Letras maiúsculas com espaçamento entre caracteres
  • Propriedades transition e transforme
  • Link no botão

image

Course Content

  • Título h2 centralizado, com espaçamento entre letras.
  • Lista de módulos (modules-list) com:
  • Flexbox em coluna
  • Bordas arredondadas
  • Sombreamento interno
  • Parágrafos com white-space: pre para preservar quebras de linha.

Transform World

  • Imagem de fundo fixa (background-attachment: fixed).
  • Texto estilizado com:
  • text-shadow
  • Letras maiúsculas
  • Posição relativa para destaque visual

image

Professional Challenges

  • Título centralizado com largura definida.
  • Imagem e parágrafo centralizados com margens ajustadas.
  • Bordas inferiores para separar visualmente as seções.

5. Footer

  • Gradiente de fundo aplicado verticalmente.
  • Links em azul, negrito e sem sublinhado.
  • Margens e padding ajustados para melhor proporção visual.

6. Observações

  • Gradientes e sombras aplicados para maior profundidade visual.
  • Layout consistente com a identidade visual da Trilha CSS DIO.
  • Estilo moderno e limpo, com foco em tipografia e hierarquia visual.

image

Considerações finais:

Estou extremamente feliz por ter conseguido realizar esse projeto e ansiosa pelos demais, abaixo tem o link do repositório e o link do git pages. #DIOPRO

Repositório: https://github.com/Islania-Silva/trilha-css-desafio-resolvido

Git Pages: https://islania-silva.github.io/trilha-css-desafio-resolvido/

Share
Recommended for you
Ri Happy - Front-end do Zero #2
Avanade - Back-end com .NET e IA
Akad - Fullstack Developer
Comments (0)