Desafio de recapitulação
Parte da seção CSS Mastery do Journey de HTML da Coddy. Lição 16 de 43.
Desafio
FácilEstilize uma página de galeria usando pseudo-classes estruturais. Seu desafio é:
- Estilizar a primeira imagem na galeria com uma borda
3px solid rgb(0, 0, 255). - Dar à última imagem na galeria uma legenda especial com texto red.
- Usar
:nth-childpara dar a cada contêiner de imagem de número ímpar um fundo gray (rgba(153, 153, 153, 1)).
Experimente você mesmo
<!DOCTYPE html>
<html>
<head>
<title>Photo Gallery</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.gallery {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: center;
}
.image-container {
width: 200px;
padding: 10px;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
text-align: center;
}
img {
max-width: 100%;
height: auto;
}
.caption {
margin-top: 8px;
font-size: 14px;
}
/* Write your CSS rules here */
</style>
</head>
<body>
<h1>My Photo Gallery</h1>
<div class="gallery">
<div class="image-container">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/45/Sunrise_at_Newell_Beach%2C_2004.jpg" alt="Image 1">
<p class="caption">Sunrise at the beach</p>
</div>
<div class="image-container">
<img src="https://upload.wikimedia.org/wikipedia/commons/d/db/Mt_Herschel%2C_Antarctica%2C_Jan_2006.jpg" alt="Image 2">
<p class="caption">Mountain landscape</p>
</div>
<div class="image-container">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/80/NYC_wideangle_south_from_Top_of_the_Rock.jpg" alt="Image 3">
<p class="caption">City skyline</p>
</div>
<div class="image-container">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3d/D%C3%BClmen%2C_Rorup%2C_NSG_Roruper_Holz_--_2021_--_8187-91.jpg" alt="Image 4">
<p class="caption">Forest trail</p>
</div>
<div class="image-container">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/87/Mesquite_Sand_Dunes_in_Death_Valley.jpg" alt="Image 5">
<p class="caption">Desert sunset</p>
</div>
<div class="image-container">
<img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Pressure_ridge_at_Cape_Columbia.jpg" alt="Image 6">
<p class="caption">Arctic wilderness</p>
</div>
</div>
</body>
</html>Todas as lições de CSS Mastery
1Domínio de Seletores – Combinação
IntroduçãoSeletor de DescendenteSeletor de FilhoSeletor de Irmão AdjacenteSeletor de Irmão GeralDesafio de Recapitulação7Construa com CSS Grid
Fundamentos do GridPosicionamento de Itens com Grid-rowÁreas NomeadasDesafio de Revisão2Pseudo-classes Interativas
Pseudo-classesEfeitos de HoverEfeitos de FocoEstilos AtivosDesafio de Recapitulação3Pseudo-classes estruturais
Pseudo-classes estruturaisSelecionando o primeiro filhoSelecionando o último filhoO poder dos padrões: Usando nth-childDesafio de recapitulaçãoPratique por conta própria: Playground de Web