Desafio de Revisão

Parte da seção Styling with CSS do Journey de HTML da Coddy — lição 43 de 76.

Desafio

Fácil

Neste desafio de recapitulação, você usará box-sizing, border-radius, overflow e box-shadow para estilizar artigos de jornal. Isso testará sua habilidade de controlar dimensões, lidar com transbordamento (overflow) e melhorar o apelo visual.

Você recebeu um documento HTML com duas divisões <div>, cada uma representando um artigo de jornal. Sua tarefa é estilizar esses artigos usando box-sizing, border-radius, overflow e box-shadow para melhorar sua aparência.

Siga os passos abaixo:

Escreva uma regra CSS que selecione todas as divisões <div>.

Defina a largura para 280px e a altura para 150px.
Use box-sizing: border-box; para garantir que o preenchimento (padding) e as bordas sejam incluídos no tamanho total.
Adicione um padding de 15px dentro de cada artigo para criar espaço ao redor do conteúdo.
Defina uma borda sólida com 3px de largura e cor cinza escuro (#444).
Aplique um border-radius de 10px para arredondar os cantos.
Adicione um box-shadow com 4px 4px 8px rgba(0, 0, 0, 0.2) para dar um efeito sutil de elevação.
Defina overflow: scroll; para que os usuários possam rolar pelo conteúdo que transbordar.

Experimente você mesmo

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