Lo que hicimos en clase. | HTML y CSS: trabajando con responsividad y publicación de proyectos | Alura Latam

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portafolio de Margarita</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1 class="titulo-principal">Mi Portafolio</h1>
    </header>
    
    <section class="presentacion">
        <div class="presentacion__contenido">
            <h2 class="presentacion__contenido__titulo">Hola, soy Margarita</h2>
            <p class="presentacion__contenido__texto">Soy una desarrolladora web enfocada en crear experiencias digitales atractivas y funcionales.</p>
        </div>
        <img src="mi-foto.jpg" alt="Foto de Margarita" class="presentacion__imagen">
    </section>

    <footer class="pie-de-pagina">
        <p>© 2024 Margarita Rangel. Todos los derechos reservados.</p>
    </footer>
</body>
</html>

:root { --color-primario: #FF5733; --color-secundario: #E6A34D; --color-terciario: #A4CE95; --color-hover: #272727;

--fuente-montserrat: 'Montserrat', sans-serif;
--fuente-krona: 'Krona One', sans-serif;

/* Escala base para rem */
--font-size-base: 16px;

}

body { font-family: var(--fuente-krona); font-size: 1rem; /* 16px */ margin: 0; padding: 0; line-height: 1.5; background-color: #f0f0f0; color: #333; }