Exercício | HTML e CSS: Classes, posicionamento e Flexbox

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exercícios Práticos de CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Exercício 1: Estilizando elementos com classes CSS -->
    <p class="texto-destaque">Este é um parágrafo com texto destacado.</p>

    <!-- Exercício 2: Destacando títulos com CSS -->
    <h1 class="titulo-blog">Título do Blog</h1>

    <!-- Exercício 3: Estilos situacionais com classes CSS -->
    <p class="urgente">Esta é uma notícia urgente!</p>

    <!-- Exercício 4: Reset CSS -->
    <div class="resetado">
        <h2>Título resetado</h2>
        <p>Este parágrafo foi resetado.</p>
    </div>

    <!-- Exercício 5: Inspecionando elementos e entendimento do modelo de caixa -->
    <div class="caixa">
        Este é um exemplo de modelo de caixa.
    </div>

    <!-- Exercício 6: Aplicando o modelo de caixa na prática -->
    <p class="caixa-paragrafo">Este é um parágrafo com modelo de caixa ajustado.</p>
</body>
</html>

/* Reset CSS (Exercício 4) */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Exercício 1: Estilizando elementos com classes CSS */
.texto-destaque {
    color: #FF5733; /* Cor laranja */
    font-weight: bold;
    font-size: 1.2em;
    margin-bottom: 20px;
}

/* Exercício 2: Destacando títulos com CSS */
.titulo-blog {
    color: #2E86C1; /* Cor azul */
    text-align: center;
    font-family: 'Arial', sans-serif;
    text-transform: uppercase;
    margin-bottom: 20px;
}

/* Exercício 3: Estilos situacionais com classes CSS */
.urgente {
    color: #E74C3C; /* Cor vermelha */
    font-weight: bold;
    background-color: #F9EBEA;
    padding: 10px;
    border-left: 5px solid #E74C3C;
    margin-bottom: 20px;
}

/* Exercício 5: Inspecionando elementos e entendimento do modelo de caixa */
.caixa {
    width: 300px;
    height: 150px;
    margin: 20px;
    padding: 15px;
    border: 5px solid #2ECC71; /* Cor verde */
    background-color: #D5F5E3;
    margin-bottom: 20px;
}

/* Exercício 6: Aplicando o modelo de caixa na prática */
.caixa-paragrafo {
    margin: 20px;
    padding: 15px;
    border: 3px solid #8E44AD; /* Cor roxa */
    background-color: #E8DAEF;
    width: 50%;
}