Özet Meydan Okuması

Coddy'nin HTML Journey'sinin CSS Mastery bölümünün bir parçası — ders 16 / 43.

Görev

Kolay

Yapısal yalancı sınıfları (structural pseudo-classes) kullanarak bir galeri sayfasını stillendirin. Göreviniz şunları yapmaktır:

Galerideki ilk resmi 3px solid rgb(0, 0, 255) kenarlık ile stillendirin.
Galerideki son resme kırmızı metinli özel bir resim yazısı (caption) verin.
Her tek numaralı resim konteynerine gri bir arka plan (rgba(153, 153, 153, 1)) vermek için :nth-child kullanın.

Kendin dene

<!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>