Desafío de repaso

Parte de la sección Styling with CSS del Journey de HTML de Coddy — lección 43 de 76.

Desafío

Fácil

En este desafío de repaso, usarás box-sizing, border-radius, overflow y box-shadow para dar estilo a artículos de periódico. Esto pondrá a prueba tu capacidad para controlar dimensiones, manejar el desbordamiento y mejorar el atractivo visual.

Se te proporciona un documento HTML con dos divisiones <div>, cada una representando un artículo de periódico. Tu tarea es dar estilo a estos artículos usando box-sizing, border-radius, overflow y box-shadow para mejorar su apariencia.

Sigue los pasos a continuación:

Escribe una regla CSS que se aplique a todas las divisiones <div>.

Establece el ancho en 280px y el alto en 150px.
Usa box-sizing: border-box; para asegurar que el relleno (padding) y los bordes se incluyan en el tamaño total.
Añade un padding de 15px dentro de cada artículo para crear espacio alrededor del contenido.
Establece un borde sólido con un ancho de 3px y gris oscuro (#444).
Aplica un border-radius de 10px para redondear las esquinas.
Añade un box-shadow con 4px 4px 8px rgba(0, 0, 0, 0.2) para dar un efecto sutil de elevación.
Establece overflow: scroll; para que los usuarios puedan desplazarse por el contenido que se desborda.

Pruébalo tú mismo

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