Wyzwanie podsumowujące

Część sekcji Stylizacja za pomocą CSS ścieżki HTML w Coddy. Lekcja 43 z 76.

Wyzwanie

Łatwy

W tym wyzwaniu podsumowującym użyjesz właściwości box-sizing, border-radius, overflow i box-shadow, aby stylizować artykuły prasowe. Sprawdzisz w ten sposób swoją umiejętność kontrolowania wymiarów, obsługi przepełnienia i poprawiania wyglądu.

Otrzymujesz dokument HTML z dwoma elementami <div>, z których każdy reprezentuje artykuł prasowy. Twoim zadaniem jest stylizacja tych artykułów za pomocą właściwości box-sizing, border-radius, overflow i box-shadow, aby poprawić ich wygląd.

Wykonaj poniższe kroki:

Napisz regułę CSS, która wybiera wszystkie elementy <div>.

Ustaw szerokość na 280px, a wysokość na 150px.
Użyj box-sizing: border-box;, aby uwzględnić dopełnienie i obramowania w całkowitym rozmiarze.
Dodaj dopełnienie o wielkości 15px wewnątrz każdego artykułu, aby utworzyć odstęp wokół treści.
Ustaw ciągłe obramowanie o szerokości 3px i w kolorze ciemnoszarym (#444).
Ustaw border-radius o wartości 10px, aby zaokrąglić narożniki.
Dodaj box-shadow o wartości 4px 4px 8px rgba(0, 0, 0, 0.2) , aby uzyskać subtelny efekt uniesienia.
Ustaw overflow: scroll;, aby użytkownicy mogli przewijać przepełnioną treść.

Spróbuj swoich sił

<html>
<head>
    <title>Newspaper Layout Challenge</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="headline">
        <h3>Biggest Tech Breakthrough of 2025!</h3>
        <p>Scientists have unveiled a revolutionary AI model that can predict climate changes with 99% accuracy.  
        This groundbreaking innovation is expected to transform how governments and organizations respond to global  
        warming, extreme weather events, and natural disasters. Experts believe that integrating AI-driven forecasting  
        with existing climate policies will significantly reduce environmental damage over the next decade.</p>
    </div>
    <div class="article">
        <h3>Opinion: The Future of Web Design</h3>
        <p>As CSS evolves, developers are experimenting with more dynamic layouts and interactive user experiences...</p>
    </div>
</body>
</html>