Задание на повторение

Часть раздела Styling with CSS путешествия по HTML на Coddy — урок 43 из 76.

Задание

Легко

В этом итоговом задании вы будете использовать box-sizing, border-radius, overflow и box-shadow для стилизации газетных статей. Это проверит ваше умение контролировать размеры, обрабатывать переполнение и улучшать визуальную привлекательность.

Вам дан HTML-документ с двумя блоками <div>, каждый из которых представляет собой газетную статью. Ваша задача — стилизовать эти статьи, используя box-sizing, border-radius, overflow и box-shadow, чтобы улучшить их внешний вид.

Выполните следующие шаги:

Напишите правило CSS, которое применяется ко всем блокам <div>.

Установите ширину (width) на 280px и высоту (height) на 150px.
Используйте box-sizing: border-box;, чтобы внутренние отступы и границы были включены в общий размер.
Добавьте внутренний отступ (padding) 15px внутри каждой статьи, чтобы создать пространство вокруг контента.
Установите сплошную границу (solid border) шириной 3px и темно-серого цвета (#444).
Примените border-radius: 10px, чтобы скруглить углы.
Добавьте box-shadow со значениями 4px 4px 8px rgba(0, 0, 0, 0.2), чтобы создать легкий эффект объема.
Установите overflow: scroll;, чтобы пользователи могли прокручивать переполненный контент.

Попробуйте сами

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