Tantangan Mengulas

Termasuk bagian Menata dengan CSS dalam perjalanan HTML di Coddy. Pelajaran 43 dari 76.

Tantangan

Mudah

Dalam tantangan rangkuman ini, kamu akan menggunakan box-sizing, border-radius, overflow, and box-shadow untuk menata artikel surat kabar. Tantangan ini akan menguji kemampuanmu mengatur dimensi, menangani konten yang meluap, dan meningkatkan tampilan visual.

Kamu diberi dokumen HTML dengan dua elemen <div>, yang masing-masing mewakili artikel surat kabar. Tugasmu adalah menata artikel-artikel ini menggunakan box-sizing, border-radius, overflow, and box-shadow agar tampilannya lebih baik.

Ikuti langkah-langkah berikut:

Tulis aturan CSS yang menargetkan semua elemen <div>.

Atur lebar menjadi 280px dan tinggi menjadi 150px.
Gunakan box-sizing: border-box; untuk memastikan padding dan border termasuk dalam ukuran total.
Tambahkan padding sebesar 15px di dalam setiap artikel untuk memberi ruang di sekitar konten.
Atur border solid dengan lebar 3px dan warna abu-abu tua (#444).
Terapkan border-radius sebesar 10px untuk membulatkan sudut.
Tambahkan box-shadow dengan 4px 4px 8px rgba(0, 0, 0, 0.2) untuk memberi efek terangkat yang halus.
Atur overflow: scroll; agar pengguna dapat menggulir konten yang meluap.

Coba sendiri

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