``` // index.html <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=

Haga lo que hicimos: Css, html y flexbox | HTML y CSS: Clases, Posicionamiento y Flexbox | Alura Latam

// index.html
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Noticias canal 2</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>    
    <aside class="noticia">
        <img src="img/Ultima-Hora-1.png" alt="Esta Pasando" width="100px">
        <p class="urgente">Noticias urgente</p>
        <a href="https://www.24horas.cl/actualidad/nacional/voraz-incendio-se-registra-en-el-club-de-golf-la-dehesa">Voraz incendio se registra en el Club de Golf La Dehesa</a>
        <br>
        <a href="https://www.24horas.cl/regiones/zona-sur/araucania/aseguran-que-existiria-video-clave-en-caso-de-joven-extraviada-en-lago">Aseguran que existiría video clave en caso de joven extraviada en lago Villarrica: fue grabado por el francés</a>
    </aside>
    <main>
        <header>
        <h1 class="titulo-blog">Terremoto chile 2010</h1>
        </header>
        <h2 class="titulo-2">Más de 500 muertos.</h2>
        <p class="texto-destacado">
            El terremoto de Chile de 2010 ocurrió el 27 de febrero a las 03:34 AM, con una magnitud de 8,8 y epicentro frente a Concepción. 
        <br>Duró 3 minutos y generó un tsunami, causando más de 500 muertos y graves daños en infraestructura. La respuesta inicial fue deficiente,
        <br>lo que llevó a mejorar los protocolos de emergencia y alerta temprana.
    </p>
    <img src="img/Hombre_bandera.jpg" alt="Un hombre sujetando la bandera chilena">
        <ol>
            <li>Magnitud 8,8</li>
            <li>Duro 3 minutos</li>
            <li>Dejo graves daños</li>
            <li>Su epicentro fue en Concepción</li>
        </ol>
        <hr>
    </main>    
   <footer class="pie-final">
        <strong>&copy</strong> Recordando noticias, todos los derechos reservados 2025
        <br>
        <strong>E-mail:</strong> recordandonoticias@gmail.com <strong>Telefono:</strong> +569 - 99995555
        <hr> 
    
   </footer>
</body>
</html>

//style.css
body {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #c3dcfe;
}

.noticia {
    text-align: center;
    text-decoration-line: underline;
    width: 100%;
    background-color: #c3dcfe;
    padding: 10px;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    order: 1;

}

.urgente{
    text-align: center;
    padding: 10px;
    color: red;

}



.titulo-blog{
    font-size: 100px;
    text-align: center;
    margin: 5px;
    padding: 5px;
    text-shadow: 0cqmax;
    color: #000;
}

.pie-final{
    width: none;
    display: block;
    order: 0;
}

.texto-destacado{
    color: #2f4e58;
}

.titulo-2{
    color: #000;
    font-size: 50px;
    text-decoration: underline;
}

//reset.css
* {
    margin: 0;
    padding: 0;
}