تحدي المراجعة

جزء من قسم CSS Mastery في رحلة HTML على Coddy. الدرس 16 من 43.

التحدي

سهل

قم بتنسيق صفحة معرض الصور باستخدام الفئات الزائفة الهيكلية (structural pseudo-classes). التحدي الخاص بك هو:

تنسيق الصورة الأولى في المعرض بإطار 3px solid rgb(0, 0, 255).
منح الصورة الأخيرة في المعرض وصفاً خاصاً بنص أحمر.
استخدام :nth-child لمنح كل حاوية صورة تحمل رقماً فردياً خلفية رمادية (rgba(153, 153, 153, 1)).

جرّب بنفسك

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