Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Solucionado (ver solución)
Solucionado
(ver solución)
1
respuesta

Desafío: Crear una página curriculum

Archivo: curriculum.html

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>curriculum</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 mí</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">Curriculum</h1>
            <p class="presentacion_contenido_texto">Presentación y informaciones principales</p>

            <h2 class="presentacion_contenido_titulo">Habilidades</h2>
            <ul>
                <li class="presentacion_contenido_texto">Liderazgo</li>
                <li class="presentacion_contenido_texto">Comunicación asertiva</li>
                <li class="presentacion_contenido_texto">Responsabilidad</li>
                <li class="presentacion_contenido_texto">Resolución de problemas</li>
                <li class="presentacion_contenido_texto">Trabajo en equipo</li>
            </ul>

            <h2 class="presentacion_contenido_titulo">Estudios</h2>
            <ul>
                <li class="presentacion_contenido_texto">Universidad Peruana de Ciencias Aplicadas (UPC)</li>
                <li class="presentacion_contenido_texto">Asociación Culturarl Peruano Britanica (Britanico)</li>
                <li class="presentacion_contenido_texto">Oracle Next Education (ONE)</li>
            </ul>

            <h2 class="presentacion_contenido_titulo">Conocimientos</h2>
            <ul>
                <li class="presentacion_contenido_texto">HTML</li>
                <li class="presentacion_contenido_texto">CSS</li>
                <li class="presentacion_contenido_texto">JavaScript</li>
                <li class="presentacion_contenido_texto">Python</li>
                <li class="presentacion_contenido_texto">C++</li>
            </ul>
        </section>

        <img src="img/perfil.jpg" alt="Imagen de perfil" height="550px">
    </main>

    <footer>
        <p>Desarrollado por Carlos Gonzalez Custodio</p>
    </footer>
</body>
</html>

Archivo CSS:

@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: #ffffff;
    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 {
    padding: 6% 15%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

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

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

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

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

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

.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_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;
}

Resultado:

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

1 respuesta
solución!

Hola, Carlos,

Gracias por compartir tu experiencia con nosotros. Recuerda que estamos aquí para ayudarte. Si necesitas más ayuda, no dudes en buscarnos en el foro.

¡Gracias nuevamente!

Saludos,

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios!