Wiederholungsherausforderung

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

Aufgabe

Einfach

In dieser Wiederholungsaufgabe verwendest du box-sizing, border-radius, overflow und box-shadow, um Zeitungsartikel zu gestalten. Dabei wird deine Fähigkeit getestet, Abmessungen zu steuern, Überlauf zu handhaben und die visuelle Gestaltung zu verbessern.

Du erhältst ein HTML-Dokument mit zwei <div>-Elementen, die jeweils einen Zeitungsartikel darstellen. Deine Aufgabe besteht darin, diese Artikel mithilfe von box-sizing, border-radius, overflow und box-shadow ansprechender zu gestalten.

Führe die folgenden Schritte aus:

Schreibe eine CSS-Regel, die auf alle <div>-Elemente abzielt.

Setze die Breite auf 280px und die Höhe auf 150px.
Verwende box-sizing: border-box;, um sicherzustellen, dass Innenabstände und Rahmen in der Gesamtgröße enthalten sind.
Füge innerhalb jedes Artikels ein Padding von 15px hinzu, um Platz um den Inhalt herum zu schaffen.
Lege einen durchgehenden Rahmen mit einer Breite von 3px und der Farbe Dunkelgrau (#444) fest.
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 schwebenden Effekt zu erzeugen.
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>