Thử thách ôn tập

Thuộc phần Thành thạo CSS trong hành trình HTML của Coddy. Bài học 16 trên 43.

Thử thách

Dễ

Tạo kiểu cho trang thư viện ảnh bằng các lớp giả cấu trúc. Thử thách của bạn là:

Tạo viền 3px solid rgb(0, 0, 255) cho ảnh đầu tiên trong thư viện.
Tạo chú thích đặc biệt với chữ màu đỏ cho ảnh cuối cùng trong thư viện.
Dùng :nth-child để tạo nền xám (rgba(153, 153, 153, 1)) cho mọi khung chứa ảnh ở vị trí số lẻ.

Tự làm thử

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