Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
3
respuestas

[Proyecto] desafio: pagina curriculum

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Currículum de Estudiante de Programación</title>
    <link rel="stylesheet" href="styles.css"> 
</head>
<body>
    <header>
        <h1>Valeria Hernández</h1>
        <p>Estudiante de Programación</p>
        <p>Email: valeriah@ejemplo.com</p>
        <p>Teléfono: 123-456-7890</p>
    </header>

    <section>
        <h2>Educación</h2>
        <ul>
            <li>
                <h3>Curso de Desarrollo Web</h3>
                <p>Alura - En curso</p>
            </li>
            <li>
                <h3>Tecnológico Nacional de México</h3>
                <p>Escuela Superior - 2020</p>
            </li>
        </ul>
    </section>

    <section>
        <h2>Habilidades</h2>
        <ul>
            <li>HTML y CSS</li>
            <li>JavaScript (básico)</li>
            <li>Git y GitHub</li>
            <li>Resolución de problemas</li>
        </ul>
    </section>

    <section>
        <h2>Proyectos Personales</h2>
        <ul>
            <li>
                <h3>Portafolio Personal</h3>
                <p>sitio web de mis proyectos y habilidades.</p>
            </li>
            <li>
                <h3>Calculadora Simple</h3>
                <p>Una calculadora básica hecha con HTML, CSS y JavaScript.</p>
            </li>
        </ul>
    </section>

    <footer>
        <p>© 2025 Valeria Hernández. Todos los derechos reservados.</p>
    </footer>
</body>
</html>
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

header {
    background-color: #3498db;
    color: white;
    padding: 20px;
    text-align: center;
}

h1 {
    margin: 0;
}

section {
    margin: 20px;
    padding: 20px;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

h2 {
    color: #3498db;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    margin-bottom: 10px;
}

footer {
    text-align: center;
    padding: 10px;
    background-color: #3498db;
    color: white;
    position: relative;
    bottom: 0;
    width: 100%;
}
3 respuestas

Hola Maggy, espero que estés muy bien.

Gracias por tu aporte en el foro, te felicito por tu aprendizaje. Estamos priorizando el foro para postear dudas, así optimizamos el tiempo de respuesta para ustedes.

Te recomiendo que puedas interactuar con el resto de nuestros compañeros por nuestro Discord.

En virtud de que en Discord el alcance es mayor, la interacción es inmediata y llega a más compañeros y el foro solo quedaría para esclarecer cualquier duda que puedas tener sobre el contenido de los cursos.

De esa manera si tienes algún comentario, opinión, recomendación o algún consejo sea por el Discord, con certeza por ahí llegará a más personas.

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

¡Espléndido!

Te comparto mi código para analizar y mejorar. Saludos.

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

<!DOCTYPE html>
<html lang="es-mx">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Curriculum Vitae</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="cvu.html">Curriculum Vitae</a>
        </nav>
    </header>
    <main class="presentacion">
        <section class="presentacion__contenido">
            <h1 class="presetacion__contenido__titulo__cvu">Florentino López</h1>
            <p class="presentacion__contenido__cvu"><strong class="titulo-destaque">Desarrollador de bases de datos
                    Oracle</strong></p>
            <div class="datos__contacto__cvu">
                <ul class="presentacion__lista__cvu">
                    <li><a class="presentacion__enlace_cvu" href="mailto:">tinus.lopez@ejemplo.com</a></li>
                    <li><a class="presentacion__enlace_cvu" href="callto:">+12 (986) 987 7867</a></li>
                </ul>
            </div>
            <p class="presentacion__contenido__texto">Desarrollador experimentado de bases de datos Oracle con más de 2
                años de expriencia en la gestión, desarrollo y optimización de soluciones de bases de datos. Dominio
                PL/SQL y Oracle Database 19c y 23ai.</p>
            <p class="presentacion__contenido__texto">Lideré el diseño e implementación de bases de datos Oracle para
                una empresa de servicios financieros.
                Desarrollé y optimicé procedimientos almacenados y desencadenadores para mejorar el rendimiento de la
                base de datos.
                Participé en la migración de bases de datos Oracle a la nube, garantizando la integridad de los datos.
            </p>
            <div class="presentacion__enlaces__cvu">
                <a class="presentacion__enlaces__link__cvu">
                    DATABASE</a>
                <a class="presentacion__enlaces__link__cvu">
                    SQL</a>
                <a class="presentacion__enlaces__link__cvu">
                    PL/SQL</a>
                <a class="presentacion__enlaces__link__cvu">
                    OCI</a>
                <a class="presentacion__enlaces__link__cvu">
                    NoSQL</a>
            </div>
        </section>
        <img src="./assets/tinus.jpg" class="imagen__perfil">

    </main>
    <footer class="footer__cvu">
        <p>Copyright © 2025 - Todos lo derechos reservados.</p>
    </footer>
</body>

</html>
@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto: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", serif;
    font-size: 24px;
    font-weight: 600;
    color: #22D4FD;
    text-decoration: none;
}

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

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

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

.presetacion__contenido__titulo__cvu {
    font-size: 36px;
    font-family: "Krona One", serif;
    height: 10px;
}

.presentacion__contenido__cvu {
    font-size: 28px;
    font-family: "Montserrat", serif;
    color: #22D4FD;
}

.datos__contacto__cvu {
    font-family: "Krona One", serif;
    font-size: 18px;
    color: #22D4FD;
}

.presentacion__lista__cvu {
    list-style: inside;
}

.presentacion__enlace_cvu {
    text-decoration: none;
    font-family: "Roboto", serif;
    color: #f6f6f6;
}

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

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

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

.presentacion__enlaces__subtitulo {
    font-family: "Krona One", 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", serif;
    font-size: 24px;
    font-weight: 600px;
    text-decoration: none;
    color: #f6f6f6;
    border: 2px solid #22D4FD;
    display: flex;
    justify-content: center;
    gap: 10px;
}

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

/*==============================================*/

.imagen__perfil {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 10px solid #fff;
    margin-bottom: 300px;
}


.presentacion__enlaces__cvu {
    display: flex;
    justify-content: space-between;
    flex-direction:row;
    align-items: center;
    gap: 10px;
}

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

.presentacion__enlaces__link__cvu {
    width: 200px;
    text-align: center;
    padding: 21.5px 0;
    border-radius: 8px;
    font-family: "Montserrat", serif;
    font-size: 12px;
    font-weight: 600px;
    text-decoration: none;
    color: #f6f6f6;
    border: 2px solid #22D4FD;
    display: flex;
    justify-content: center;
    gap: 10px;
}

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


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

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