Haga lo que hicimos en el aula. Ejercicios | HTML y CSS: Clases, Posicionamiento y Flexbox | Alura Latam

ARCHIVO HTML


<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Noticias</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header>

    </header>
    <main>
        <h1 class="titulo-blog">
            FAKE NEWS!
        </h1>
        <h2 class="subtitulos">Metro Bilbao alerta sobre una estafa con tarjetas Barik falsas</h2>
        <p class="texto-destacado">
            Metro Bilbao ha publicado una nota en la que informa de que la cuenta de Facebook
            <strong>'Tarjeta de transporte Barik'</strong> no es oficial, y que los descuentos que se ofrecen
            en ella para el transporte público son falsos.
        </p>
        <h2 class="subtitulos">Bruselas da una semana a Meta y Tik Tok para que aclaren sus medidas contra la desinformación sobre la guerra</h2>
        <p class="urgente">
            Como ya hiciera con X la semana pasada, la Comisión Europea ha pedido a ambas empresas
            tecnológicas que concreten sus políticas para evitar la divulgación de noticias falsas
            en el contexto de la ley de servicios digitales.
        </p>

        <img src="fakenew2.png" alt="Imagen de las Fake News">

    </main>
    <footer>

    </footer>
</body>

</html>

CSS

*{
    padding: 0;
    margin: 0;
}

body{
    background-color: #000000;
    color: #f6f6f6;
    
}

.titulo-blog {
    color:#22a5fd;
    
}

.subtitulos{
    padding: 0.5%;
    margin: 0.5%;
    color: rgb(15, 122, 172);
}

.texto-destacado{
    color:rgb(0, 140, 255);
}

.urgente{
    color: firebrick;
}

img{
    padding: 1%;
    margin: 1%;
}