Estilizando um site de notícia

Descrição:

Neste exercício, você irá criar uma página web que exibe uma galeria de imagens que deverá ser estilizado.

O objetivo deste exercício é praticar o uso de seletores CSS pseudo-classes.

Instruções:

  1. Crie uma página web com código HTML a seguir:
<h1>My Gallery</h1>

<section id="gallery">
  <figure>
    <img src="https://images.unsplash.com/photo-1678662542431-935d32c2aae7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="Foto do Lago del Mis, Sospirolo, BL, Italia">
    <figcaption>Lago del Mis, Sospirolo, BL, Italia</figcaption>
    <a href="https://images.unsplash.com/photo-1678662542431-935d32c2aae7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80">View full size</a>
  </figure>
  <figure>
    <img src="https://images.unsplash.com/photo-1678319167262-cdb624958576?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1032&q=80" alt="Foto das montanhas totalmente cobertas por gelo em Intyamon, Rossinière, Switzerland">
    <figcaption>Intyamon, Rossinière, Switzerland</figcaption>
    <a href="https://images.unsplash.com/photo-1678319167262-cdb624958576?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1032&q=80">View full size</a>
  </figure>
  <figure>
    <img src="https://images.unsplash.com/photo-1661107564401-57497d8fe86f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1032&q=80" alt="Foto um lago próximo uma estrada em Melchsee Frutt, Kerns, Switzerland">
    <figcaption>Melchsee Frutt, Kerns, Switzerland</figcaption>
    <a href="https://images.unsplash.com/photo-1661107564401-57497d8fe86f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1032&q=80">View full size</a>
  </figure>
</section>

<p> Fiquem a vontade para nos enviar a sua foto por meio do <a href="mailto:meu@emai.com">nosso endereço eletrônico</a>
</p>
  1. Posicione o título principal de foram centralizada horizontalmente
  2. Altere a fonte do título principal para negrito
  3. Altere a cor do plano de fundo da galeria para gray
  4. Adicione margens verticais e horizontais nos elementos figure
  5. Altere a fonte das legendas da imagem para que tenham o tamanho de 1.2em e para que elas fiquem em negrito
  6. Altere a cor dos links que vem logo após uma imagem de para #007bff e faça com que eles apareça sem o sublinhado
  7. Altere a cor e o estilo do link “View full size” quando o mouse passa por cima dele para rgb(25, 0, 255)
  8. As imagens da galeria deve possuir borda arrendondas de 15 pixels e devem ocupar 100% da largura da tela
  9. Adicione um efeito de sombreamento às imagens na galeria de 5 pixels em cada lado
  10. Quando o mouse passar sobre uma imagem e aumento o brilho da imagem em 20%
  11. Adicione o emoji 📷 antes da primeira letra da legenda das imagens sem alterar o código HTML.

Certifique-se de validar seu código HTML usando um validador como o W3C Markup Validation Service, para garantir que seu código esteja sem erros e bem formado.

Experimente validar o seu código CSS em sites como:

Gostou? Não esqueça de avaliar o exercício:

Abra o formulário de avaliação