Tekrar Meydan Okuması

Coddy'nin HTML Journey'sinin Styling with CSS bölümünün bir parçası — ders 43 / 76.

Görev

Kolay

Bu özet meydan okumasında, gazete makalelerini stillendirmek için box-sizing, border-radius, overflow ve box-shadow özelliklerini kullanacaksınız. Bu, boyutları kontrol etme, taşmaları yönetme ve görsel çekiciliği artırma yeteneğinizi test edecektir.

Size her biri bir gazete makalesini temsil eden iki <div> bölümü içeren bir HTML belgesi verilmiştir. Göreviniz, görünümlerini iyileştirmek için box-sizing, border-radius, overflow ve box-shadow kullanarak bu makaleleri stillendirmektir.

Aşağıdaki adımları izleyin:

Tüm <div> bölümlerini hedefleyen bir CSS kuralı yazın.

Genişliği 280px ve yüksekliği 150px olarak ayarlayın.
İç boşluk (padding) ve kenarlıkların (border) toplam boyuta dahil edilmesini sağlamak için box-sizing: border-box; kullanın.
İçeriğin etrafında boşluk oluşturmak için her makalenin içine 15px padding ekleyin.
3px genişliğinde ve koyu gri (#444) renkte bir solid border ayarlayın.
Köşeleri yuvarlamak için 10px border-radius uygulayın.
Hafif bir yükseltme efekti vermek için 4px 4px 8px rgba(0, 0, 0, 0.2) değerinde bir box-shadow ekleyin.
Kullanıcıların taşan içeriği kaydırabilmesi için overflow: scroll; özelliğini ayarlayın.

Kendin dene

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