Desafío de repaso
Parte de la sección CSS Mastery del Journey de HTML de Coddy. Lección 16 de 43.
Desafío
FácilEstiliza una página de galería utilizando pseudoclases estructurales. Tu desafío es:
- Estilizar la primera imagen de la galería con un borde de
3px solid rgb(0, 0, 255). - Darle a la última imagen de la galería un subtítulo especial con texto rojo.
- Usar
:nth-childpara darle a cada contenedor de imagen de número impar un fondo gris (rgba(153, 153, 153, 1)).
Pruébalo tú mismo
<!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 las lecciones de CSS Mastery
1Dominio de selectores – Combinación
IntroducciónSelector de descendienteSelector de hijoSelector de hermano adyacenteSelector de hermano generalDesafío de repaso2Pseudoclases interactivas
PseudoclasesEfectos de hoverEfectos de focusEstilos de estado activoDesafío de repaso3Pseudoclases estructurales
Pseudoclases estructuralesSeleccionando el primer hijoSeleccionando el último hijoEl poder de los patrones: Usando nth-childDesafío de repasoPractica por tu cuenta: Playground de Web