Haga lo que hicimos en aula | HTML y CSS: ambientes de desarrollo, estructura de archivos y tags | Alura Latam

<!DOCTYPE html>
<html lang="es-mx">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portafolio de Catriel y Paco Amoroso</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
   <header class="header">
    <div class="logo-header">
        <img src="Logo.png" alt="Logo Catriel y Paco Amoroso">
    </div>
   </header>
   <main>
    <h1>Ca7triel & Paco Amoroso <strong>pioneros musicales.</strong></h1>
    <h2>Música Urbana</h2>
    <p>Ca7riel & Paco Amoroso es un dúo de trap experimental, funk, hip hop, electrónica y pop originario de Buenos Aires, 
       Argentina, formado por Catriel Guerreiro y Ulises Guerriero </p>
    <img src="Cato y Paco.avif" alt="Foto Catriel y Paco Amoroso" width="600" height="350">
    <ul>
        <li>Premios Gardel 2025 - Album del Año</li>
        <li>Premios Gardel 2025 - Mejor Artista Urbano Pop</li>
        <li>Premios Gardel 2025 - Mejor Colaboración</li>
    </ul>
    </main>
    <footer>
        <a href="https://www.instagram.com/ca7rielypacoamoroso/">https://www.instagram.com/ca7rielypacoamoroso/</a>
    </footer>
</body>
</html>

body {
    background-color: #FBF3C1;
}

h1 {
    color: #64E2B7;
}

h2 {
    color: #DC8BE0;
}

p {
    color: #D50B8B;
}

ul {
    color: #cd5c5c;
}
footer {
    color: indigo;
}

Pagina

Código en HTML de la página web:
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portafolio de Fútbol</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
   <header class="header">
    <div class="logo-header">
        <img src="descarga.png" alt="Logo pagina web de futbol" with="200" height="150">
    </div>
   </header>
   <main>
    <h1>Vive el futbol <strong>es el alma de todo hombre.</strong></h1>
    <h2>Deporte famoso en todo el mundo</h2>
    <p>Esta página web motiva a tu hijo a jugar futbol por eso te redirecciona a la Liga de Bogota la mayor competicion de Colombia. 
       Obtén un  inicio de carrera para poder aspirar a ser profesional que es todo sueño de un niño, 
       motivalo a tener disciplina para formase como profesional y como persona inscribelo en un club para que aspire a estar en esta competición. </p>
    <img src="Estadiodefutbol.png" alt="Foto Catriel y Paco Amoroso" width="600" height="350">
    <ul>
        <li>Liga de Bogota 2025 - La mayor competición de Bogota</li>
        <li>Inscripciones abiertas para este 2025 - Conviertete en el mejor futbolista de Bogota</li>
    </ul>
    </main>
    <footer>
        <a href="https://www.instagram.com/bogotalfb?igsh=MTg2c2RzZjF0NzZ1ag==">https://www.instagram.com/bogotalfb?igsh=MTg2c2RzZjF0NzZ1ag==</a>
    </footer>
</body>
</html>

Código de CSS para el estilo de la página:
/* Fondo general */
body { 
    background-color: #1a3bcc; /* Azul oscuro */
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    color: #f6f6f6; /* Color claro por defecto */
}

/* Encabezado */
header {
    background-color: #0d1b4c; /* Azul más fuerte */
    padding: 15px;
    text-align: center;
}

.logo-header img {
    width: 200px;
    height: 150px;
    
}

/* Títulos */
h1 {
    color: #54c1cf; /* Azul claro */
    text-align: center;
}

h2 {
    color: #f5f3f3; /* Rojo fuerte */
    text-align: center;
}

/* Párrafos */
p {
    color: #fffefd; /* Naranja quemado */
    line-height: 1.6;
    text-align: justify;
    margin: 20px;
}

/* Imagen principal */
main img {
    display: block;
    margin: 20px auto;
    border-radius: 10px;
    box-shadow: 0 0 15px #000;
}

/* Lista */
ul {
    color: #d6caca; /* Rojo vino */
    font-weight: bold;
    list-style-type: square;
    margin: 20px;
}

/* Pie de página */
footer {
    background-color: #0d1b4c;
    color: indigo;
    text-align: center;
    padding: 15px;
}

footer a {
    color: #54c1cf;
    text-decoration: none;
    font-weight: bold;
}

footer a:hover {
    text-decoration: underline;
}

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad