Desafío: comparta tú proyecto con el mundo | HTML y CSS: ambientes de desarrollo, estructura de archivos y tags | Alura Latam

HTML

<!DOCTYPE html>
<html lang="es-mex">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portafolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
        <header>
                <nav>
                    <ul>
                            <li><a href="#inicio">Inicio</a></li>
                            <li><a href="#sobre-mi">Sobre mi</a></li>
                            <li><a href="#contacto">Contacto</a></li>
                    </ul>
                </nav>
        </header>

        <main>
            <section id="inicio">
                    <h1>
                            Explora el mundo con <strong>Guillermo Miguelena</strong>
                    </h1>
        
                    <p>
                        Hola! Soy Guillermo Miguelena, ¿Planeando tu próxima aventura? 
                        Echa un vistazo a mis mejores consejos para viajar de manera segura, económica y divertida.
                    </p>

                    <p>
                        Mi pasión por viajar comenzó hace años, cuando decidí emprender mi primer gran viaje a la cima de Machu Picchu. 
                        Desde entonces, he recorrido más de 20 países, explorando desde las playas paradisíacas del Caribe hasta los mercados bulliciosos de Asia. 
                        Cada destino ha sido una experiencia única, llena de aprendizajes y momentos inolvidables.
                    </p>

                    <p>
                        Si eres un aventurero de corazón, aquí tienes algunos consejos esenciales para mejorar tu experiencia de viaje:
                    </p>

                    <u1>
                            <li>Investiga bien el destino antes de viajar: aprende sobre la cultura, costumbres y tradiciones locales.</li>
                            <li>Empaca ligero: lleva solo lo necesario para evitar complicaciones en aeropuertos y durante tus traslados.</li>
                            <li>Siempre lleva una copia digital de tus documentos importantes, como pasaporte y visa.</li>
                            <li>Prueba la comida local: es una de las mejores maneras de conectarte con la cultura del lugar que visitas.</li>
                            <li>No temas salir de la ruta turística habitual: algunos de los mejores momentos ocurren fuera de los itinerarios</li>
                    </u1>
            </section>
    
            <section id="enlaces">
                        <div class="enlaces">    
                        <a href="https://www.instagram.com/">Instagram</a>
                        <a href="https://www.facebook.com/">Facebook</a>
                </div>
                        <img src="Humantay Trekking.jpg" alt="Imagen de Laguna Humantay">
            </section>
        </main>

        <footer>
                <p>&copy; 2024 Guillermo Miguelena. Todos los derechos reservados</p>
                <p> Contacto: <a href="mailto:ggmiguelena0620@outlook.com">ggmiguelena0620@outlook.com</a></p>
        </footer>
</body>
</html>

CSS

root {
    --main-bg-color: indigo;
    --main-text-color: white;
    --highlight-color: lightblue;
    --link-color: lightgreen;
    --link-hover-color: yellow;
    --footer-bg-color: darkblue;
    --footer-text-color: lightgray;
    --font-main: 'Arial', sans-serif;
    --font-alt: 'Georgia', serif;
}


body {
    background-color: var(--main-bg-color);
    color: var(--main-text-color);
    font-family: var(--font-main);
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

header {
    background-color: var(--footer-bg-color);
    padding: 10px;
}

nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
}

nav ul li {
    margin: 0 15px;
}

nav ul li a:hover {
    color: var(--link-hover-color);
}

h1{
    color: var(--highlight-color);
    font-family: 'Arial', sans-serif;
    text-align: center;
    font-size: 2.5em;
}

p {
    font-family: var(--font-alt);
    text-align: justify;
    margin: 20px;
    max-width: 600px;
}

.enlaces {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.enlaces a {
    margin: 0 15px;
    color: var(--link-color);
    text-decoration: none;
    font-weight: bold;
}

.enlaces a:hover {
    color: var(--link-hover-color);
}

img {
    display: block;
    margin: 20px auto;
    border-radius: 10px;
    max-width: 30%;
}

footer {
    background-color: var(--footer-bg-color);
    color: var(--footer-text-color);
    padding: 20px;
    text-align: center;
    font-size: 0.9em;
}

footer a {
    color: var(--footer-text-color);
    text-decoration: none;
}

footer a:hover {
    color: var(--link-hover-color);
}