Recap-Challenge

Teil des Abschnitts Styling with CSS der HTML-Journey von Coddy — Lektion 43 von 76.

Aufgabe

Einfach

In dieser Wiederholungs-Challenge wirst du box-sizing, border-radius, overflow und box-shadow verwenden, um Zeitungsartikel zu gestalten. Dies wird deine Fähigkeit testen, Dimensionen zu kontrollieren, mit Überläufen umzugehen und die visuelle Attraktivität zu steigern.

Du erhältst ein HTML-Dokument mit zwei <div>-Bereichen, die jeweils einen Zeitungsartikel darstellen. Deine Aufgabe ist es, diese Artikel mit box-sizing, border-radius, overflow und box-shadow zu gestalten, um ihr Erscheinungsbild zu verbessern.

Folge den unten stehenden Schritten:

Schreibe eine CSS-Regel, die alle <div>-Bereiche anspricht.

Setze die Breite auf 280px und die Höhe auf 150px.
Verwende box-sizing: border-box;, um sicherzustellen, dass Padding und Rahmen in der Gesamtgröße enthalten sind.
Füge ein Padding von 15px innerhalb jedes Artikels hinzu, um Platz um den Inhalt herum zu schaffen.
Setze einen durchgehenden Rahmen (solid border) mit einer Breite von 3px und Dunkelgrau (#444).
Wende einen border-radius von 10px an, um die Ecken abzurunden.
Füge einen box-shadow mit 4px 4px 8px rgba(0, 0, 0, 0.2) hinzu, um einen dezenten abgehobenen Effekt zu erzielen.
Setze overflow: scroll;, damit Benutzer durch überlaufenden Inhalt scrollen können.

Probier es selbst

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