PROYECTO: 09 Haga lo que hicimos | HTML y CSS: Clases, Posicionamiento y Flexbox | Alura Latam

index.html

<!DOCTYPE html>
<html lang="es-mx">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>THE NEWS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <img src="TheNews.png" alt="imagen de logotipo de The News" width="300" height="300">
        <h1>Tu mundo, <strong class="Texto.destacado">tu perspectiva.</strong></h1>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="noticias.html">Noticias</a></li>
                <li><a href="categorias.html">Categorías</a></li>
                <li><a href="contacto.html">Contacto</a></li>
                <li><a href="México">México</a></li>
                <li><a href="Internacional">Internacional</a></li>
            </ul>
        <h2><strong>"Sobreviví por que tenía a Dios a mi lado"</strong>, dice Donald Trump al aceptar la candidatura presidencial de EUA.</h2>
        <p>El candidato y expresidente se dirigió a los militantes y votantes cinco días después de sufrir un atentado durante un mitin en Pensilvania y aseguró que cerrará la frontera con México desde el primer día.</p>
        <img src="donald trump.webp" alt="imagen de Trump" width="600" height="400" class="center-img">
    </header>
    </main>
    <hr>
    <footer>
        <div>Copyright© 2024 - Página creada por Gabriela Bo - Todos los derechos reservados</div>
    </footer>
</body>
</html>

CSS

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: Arial, sans-serif;
}

header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background-color: #f4f4f4;
}

.center-img {
    margin-bottom: 20px;
}

/* Línea del menú */
nav ul {
    list-style-type: none;
    padding: 0;
    text-align: center;
    background-color: #333;
}

nav ul li {
    display: inline;
    margin: 0 15px;
}

/* Letras blancas del menú */
nav ul li a {
    color: white;
    text-decoration: none;
}

main {
    padding: 20px;
}

footer {
    text-align: center;
    padding: 20px;
    background-color: #f4f4f4;
}

h1{
    color: #0d1b2a;
    font-family: 'Courier New', Courier, monospace; 
    font-size: 40px;
}

h1 strong{
    color: #9b2226;
}

h2{
    color: #1b263b;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    text-align: center;
    padding: 20px;
    font-weight: bold;
    font-size: 25px;

}

h2 strong{
    color:#284b63;
}

p{
    color: black;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    padding: 10px;
}

.center-img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Proyecto alura Gabriela Bo "The News