Desafío: crea una página curriculum | HTML y CSS: header, footer y variables CSS | Alura Latam

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

<!DOCTYPE html>
<html lang="es-co">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Curriculum Luis C</title>
    <link rel="stylesheet" href="./styles/style.css">
</head>
<body>
    <header class="header">
        <nav class="header__menu">
            <a class="header__menu__link" href="index.html">Home</a>
            <a class="header__menu__link" href="about.html">Sobre mi</a>
            <a class="header__menu__link" href="curriculum.html">Curriculum</a>
        </nav>
    </header>
    <main class="presentacion">
        <section class="presentacion__contenido">
            <h1 class="presentacion__contenido__titulo"><strong class="titulo-destacado">Curriculum</strong> Luis Carlos Leguizamon Rojas</h1>
            <p class="presentacion__contenido__texto">As a telecommunications engineer and bilingual, I have reached an ideal professional development, with scientific and technological knowledge, with an investigative spirit and formed in autonomous learning environments, which allow me to analyze, design, appropriate technologies, implement, maintain and to support processes in which telecommunication equipment and systems are involved, and at the same time develop my creative spirit and cultivate my scientific and critical attitude that allows me to adequately practice my professional activities in the context of technological reality from Telecommunications Engineering, and the impact of it as a tool to strengthen competitiveness in the global context, and to create scenarios of social equality. </p>
            <h2 class="titulo-destacado"> Experience </h2>
                <ul class="presentacion__contenido__texto">
                    <li>Test Automation Engineer Ssr</li>
                    <li>QA analist</li>
                    <li>Junior Developer</li>
                    <li>Business Advisor</li>
                    <li>Account executive</li>
                    <li>Customer experience analyst</li>
                    <li>NZTAT translator - Librarian</li>
                </ul>
        </section>
        <img src="./assets/IMG_0660-EDIT.jpg" alt="Luis Carlos en motocicleta">
    </main>
    <footer class="footer">
        <p>Desarrollado por Luis Carlos Leguizamon</p>
    </footer>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Krona+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

* {
    padding: 0;
    margin: 0;
}

body {
    background-color: #000000;
    color: #F6F6F6;
    box-sizing: border-box;
}

.header {
    padding: 2% 0% 0% 15%;
}

.header__menu {
    display: flex;
    gap: 80px;
}

.header__menu__link {
    font-family: "Montserrat", sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #22D4FD;
    text-decoration: none;
}

.presentacion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6% 15%;

}

.presentacion__contenido {
    width: 615px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.presentacion__contenido__titulo {
    font-size: 36px;
      font-family: "Krona One", sans-serif;

}

.titulo-destacado {
    color: #22D4FD;
}

.presentacion__contenido__texto {
    font-size: 24px;
      font-family: "Montserrat", sans-serif;

}

.presentacion__enlaces {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.presentacion__enlaces_link {
    width: 378px;
    text-align: center;
    padding: 21.5px 0;
    border-radius: 8px;

    font-family: "Montserrat", sans-serif;
    font-size: 24px;
    font-weight: 600;
    text-decoration: none;
    color: #F6F6F6;
    border: 2px solid #22D4FD;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.presentacion__enlaces__subtitulo {
    font-size: 24px;
    font-family: "Krona One", sans-serif;
    font-weight: 400;
}

.presentacion__enlaces_link:hover {
    background-color: #272727;
}

.footer {

    background-color: #22D4FD;
    padding: 24px;
    color: #000000;
    text-align: center;
    font-family: "Montserrat", sans-serif;
    font-size: 24px;
    font-weight: 400;
}

¡Hola Estudiante, espero que estés bien!

Tu código HTML y CSS para el currículum se ve bastante bien. Aquí tienes algunas sugerencias para mejorarlo y asegurarte de que cumpla con todos los requisitos del desafío:

Agregar Datos Personales:
- Considera añadir una sección al principio con tus datos personales, como dirección de correo electrónico, teléfono, o un enlace a tu perfil de LinkedIn.
Proyectos:
- Si tienes proyectos, podrías añadir una sección adicional para destacarlos. Esto podría hacerse con una lista similar a la de experiencias laborales.
Accesibilidad:
- Asegúrate de que las imágenes tengan descripciones alternativas adecuadas para mejorar la accesibilidad.

Variables CSS:

Aunque no has usado variables CSS, podrías implementarlas para colores y fuentes para facilitar cambios futuros. Por ejemplo:

:root {
    --primary-color: #22D4FD;
    --background-color: #000000;
    --text-color: #F6F6F6;
    --font-primary: "Montserrat", sans-serif;
    --font-secondary: "Krona One", sans-serif;
}

Luego, utiliza estas variables en tu CSS:

body {
    background-color: var(--background-color);
    color: var(--text-color);
}

.header__menu__link {
    color: var(--primary-color);
    font-family: var(--font-primary);
}

Estilo de la Imagen:
- Podrías ajustar el tamaño o el estilo de la imagen para que se integre mejor con el diseño general. Por ejemplo, añadiendo un borde o un efecto de sombra.
Revisar Texto:
- Asegúrate de que el texto esté bien revisado y sin errores tipográficos para dar una impresión profesional.

Espero que estas sugerencias te sean útiles y te ayuden a completar el desafío de manera exitosa. ¡Bons estudios!