Crear una página currículum | HTML y CSS: header, footer y variables CSS | Alura Latam

3
respuestas

por Silene Gonzalez Quiroz

| 42.7k xp | 85 posts

independiente

Index.html

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portafolio Silene Gonzalez</title>
    <link rel="stylesheet" href="./style/stile.css">
</head>
<body>
    <header class="header">
       <nav class="header_menu">
        <a class="header_menu_link" href="index1.html">Home</a>
        <a class="header_menu_link" href="about.html">Sobre Mí</a>
        <a class="header_menu_link" href="curriculum.html">Mi Currículum</a>
       </nav>
    </header>
    <main class="presentacion">
        <section class="presentacion_contenido">
            <h1 class="presentacion_contenido_titulo">Eleve tu negocio digital a otro nivel <strong class="titulo-destaque">con un Front-end de calidad! </strong></h1>
            <p class="presentacion_contenido_texto">¡Hola! Soy Silene González, desarrolladora Front-end con especialización en React, HTML y CSS. Ayudo a pequeños negocios y diseñadores a llevar a cabo buenas ideas. ¿Hablamos?</p>
            <div class="presentacion_enlaces">
                <h2 class="presentacion_enlaces_subtitulos">Accede a mis redes:</h2>
                <a class="presentacion_enlaces_link" href="https://www.instagram.com/"> <img src="./images/instagram.png" alt="">Instagram</a>
                <a class="presentacion_enlaces_link" href="https://www.github.com/"><img src="./images/github.png" alt="">Git Hub</a>    
                <a class="presentacion_enlaces_link" href="https://www.linkedin.com/"><img src="./images/linkedin.png" alt="">LinkedIn</a>     
            </div>
        </section>
        <img src="./images/silene.jpg" alt="Imagen de Silene González trabajando">
    </main>
    <footer class="footer">
        <p>Desarrollado por Silene González Quiroz</p>
    </footer>
    </body>
</html>

About.html

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sobre Mí</title>
    <link rel="stylesheet" href="./style/stile.css">
</head>
<body>
    <header class="header">
        <nav class="header_menu">
         <a class="header_menu_link" href="index1.html">Home</a>
         <a class="header_menu_link" href="about.html">Sobre Mí</a>
         <a class="header_menu_link" href="curriculum.html">Mi Currículum</a>
        </nav>
    </header>
    <main class="presentacion">
        <section class="presentacion_contenido">
           <h1 class="presentacion_contenido_titulo">Sobre Mí</h1>
            <p class="presentacion_contenido_texto">
                Docente y Formadora con conocimientos en pedagogía, habilidades digitales, diversidad e inclusión, manejo de grupos y el diseño de estrategias didáctica para el 
                aprendizaje. Habilidad para investigar y en constante búsqueda de los cambios tecnológicos. Tecnóloga en producción de multimedia. Actualmente estoy enfocada en 
                aprender un poco más sobre el desarrollo de software y estoy realizando pequeños proyectos en páginas web como Front End. Adicionalmente, soy una persona proactiva, 
                buen carisma, responsable, comprometida, con adaptabilidad al cambio y orientación al servicio, trabajo en equipo y perseverante, curiosa y me gusta resolver problemas.
            </p>
            <p class="presentacion_contenido_texto">
                Aprender hacen parte de mi día a día y los desafíos me llevan a encontrar las mejores soluciones.
                Busco oportunidades labores para hacer prácticas en el ámbito de la educación y desarrollo de software que me ayuden a desarrollar mis conocimientos técnicos y 
                crecer de la mano de alguna empresa.
            </p>
        </section>
        <img src="./images/silene.jpg" alt="Imagen de Silene González trabajando">
    </main>
    <footer class="footer">
        <p>Desarrollado por Silene González Quiroz</p>
    </footer>
</body>
</html>

3 respuestas

por Silene Gonzalez Quiroz

| 42.7k xp | 85 posts

independiente

hace 3 meses

Currículum.htmil

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sobre Mí</title>
    <link rel="stylesheet" href="./style/stile.css">
</head>
<body>
    <header class="header">
        <nav class="header_menu">
         <a class="header_menu_link" href="index1.html">Home</a>
         <a class="header_menu_link" href="about.html">Sobre Mí</a>
         <a class="header_menu_link" href="curriculum.html">Mi Currículum</a>
        </nav>
    </header>
    <main class="presentacion">
        <section class="presentacion_contenido">
           <h1 class="presentacion_contenido_titulo">Silene Gonzalez Quiroz</h1>
           <h2 class="presentacion_contenido_subtitulo">Formación Académica</h2>
           <ul class="presentacion_contenido_listas">
                <li class="presentacion_contenido_listas_items">Universidad Católica de Manizales <p class="presentacion_contenido_texto">Licenciatura de Tecnología e Informática | febrero 2020 - diciembre de 2023</p>
                </li>
                <li class="presentacion_contenido_listas_items">Servicio Nacional de Aprendizale "SENA" <p class="presentacion_contenido_texto">Tecnología en Producción de Multimedia | abril 2018 - junio 2021</p>
                </li>
                <li class="presentacion_contenido_listas_items">Universidad de Santander  <p class="presentacion_contenido_texto">Ingeniería de Sistemas | junio 1997 - Julio 2003 - IX Semestre</p>
                </li>
           </ul>   
           <h2 class="presentacion_contenido_subtitulo">Otros Estudios</h2>
           <ul class="presentacion_contenido_listas">
                <li class="presentacion_contenido_listas_items">Universidad de Caldas - Ministerio de Tecnología de la Información y Telecomunicaciones <p class="presentacion_contenido_texto">Diplomado en Programación con Énfasis en Aplicaciones Móviles - | diciembre de 2022 – 800 horas</p>
                </li>
                <li class="presentacion_contenido_listas_items">Ministerio de Tecnología de la Información y Telecomunicaciones - Universidad Distrital Francisco José de Caldas<p class="presentacion_contenido_texto">Curso en Lenguaje Programación JavaScript | mayo de 2024 – 50 horas</p>
                </li>
                <li class="presentacion_contenido_listas_items">Ministerio de Tecnología de la Información y Telecomunicaciones - Universidad Distrital Francisco José de Caldas<p class="presentacion_contenido_texto">Curso en Lenguaje Programación JavaScript | mayo de 2024 – 50 horas</p>
                </li>
           </ul>
        </section>
        <section class="presentacion_datos">
           <h2 class="presentacion_datos_subtititulo">Licencia En Tecnología e Informática</h2>
           <h2 class="presentacion_datos_subtititulo">Tecnóloga en Producción de Multimedia</h2>
           <h3 class="presentacion_datos_subtititulo_sub">Calle 5 No. 20-40</h3>
           <h3 class="presentacion_datos_subtititulo_sub">320 550 44 44</h3>
           <h3 class="presentacion_datos_subtititulo_sub">silenegonzalezquiroz@gmail.com</h3>
           <img class="presentacion_datos_foto" src="./images/silene.jpg" alt="Imagen de Silene González trabajando">
        </section>
        
    </main>
    <footer class="footer">
        <p>Desarrollado por Silene González Quiroz</p>
    </footer>
</body>
</html>

por Silene Gonzalez Quiroz

| 42.7k xp | 85 posts

independiente

hace 3 meses

Style.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{
    /*height: 100vh */
    background-color: #000000;
    color: white;
    box-sizing: border-box;
}

.header{
    padding: 2% 0% 0% 20%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    
}

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

.header_menu_link:hover{
    color: bisque;
}

.presentacion{
    display: flex;
    align-items: center;
    padding: 6% 20%;
    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;
    text-align: center;
}

.presentacion_contenido_titulo:hover{
    color: bisque;
}

.presentacion_contenido_subtitulo{
    font-size: 24px;
    font-family: "Krona One", sans-serif;
}
.presentacion_contenido_listas{
    font-size: 20px;
    font-family: "Krona One", sans-serif;
}

.presentacion_contenido_listas_items{
    font-size: 20px;
    font-family: "Krona One", sans-serif;
    margin-top: 20px;
}

.titulo-destaque{
    color: #22D4FD;
    font-size: 36px;
}

.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_subtitulos{
    font-family: "Krona One", sans-serif;
    font-size: 24px;
    font-weight: 400;
}

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

.presentacion_datos_subtititulo{
    font-size: 24px;
    font-family: "Krona One", sans-serif;
    text-align: center;
    
}
.presentacion_datos_subtititulo_sub{
    font-size: 18px;
    font-family: "Krona One", sans-serif;
    text-align: center;
    color: #22D4FD;
    
}

.presentacion_datos_foto{
  padding: 10% 25%;
}

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

por Ingrid Silva

| 1703.4k xp | 5503 posts

Instructor

hace 3 meses

Hola, Silene ,

Gracias por compartir tu código con nosotros. Recuerda que estamos aquí para ayudarte. Si necesitas 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!