Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Desafío Currículum

Vista final de la hoja de vida
Vista final de la hoja de vida

Captura del código html
Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

Código CSS

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

*{
    padding:0;
    margin:0;
}
body{
    height: 100vh;
    background-color:#E6E6FA;
    box-sizing: border-box;
    position: relative;
}
.header{
    background-color: #191970;
    display: flex;
    justify-content: center;
    padding: 20px 0 20px 0;
}
.header__menu{
    display: flex;
    justify-content: center;
    gap: 30px;
}
.header__menu__link{
    text-decoration: none;
    font-family: "Epunda Slab", serif;
    font-size: 20px;
    color:#FFFAF0;
}
.presentacion{
     display: flex;
     flex-direction: column;
     padding: 1% 2%;
     align-items: center;
}
.presentacion_contenido{
    width: 60%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.presentacion__contenido__titulo{
    display: flex;
    font-family: "Josefin Sans", sans-serif;
    font-weight: 400;
}
.presentacion__contenido__subtitulo{
    font-family: "Josefin Sans", sans-serif;
    font-weight: 300;
    color:#0000CD;
}
.presentacion__contenido_tercer_nivel{
    width: fit-content;
    border: 3px solid #333;
    border-radius: 15px;
    background-color:#87CEEB;
    font-family: "ABeeZee", sans-serif;
    padding: 0 30px 0 30px;
}
.presentacion__contenido__texto{
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    text-align: justify;
}
.presentacion__lista__contenido{
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
}
.presentacion__redes__sociales{
    display: flex;
    flex-direction: row;
    gap: 16px;
}
.presentacion__enlace__link{
      display: flex;
      justify-content: center;
      background-color: #87CEFA;
      gap: 16px;
      border: 2px solid #22D4FD;
      width: 378px;
      text-align: center;
      border-radius: 8px;
      font-size: 24px;
      font-weight: 600;
      padding: 10px 0;
      text-decoration: none;
      color: #000;
      font-family: 'Montserrat', sans-serif;
}
.footer{
    background-color:#191970;
    text-align: center;
    font-family:"Epunda Slab", serif ;
    padding: 20px;
    color: #FFFAF0;
}
.img{
     position: absolute;
    top: 80px;       /* distancia desde arriba */
    right: 20px;     /* distancia desde la derecha */
    width: 250px; 
    border: 3px dotted  #1E90FF;
    border-radius: 50%;
}
1 respuesta

Hola Estudiante, espero que estés bien

Veo que estás trabajando en el desafío de crear un currículum con HTML y CSS. Tu diseño se ve bien organizado y profesional. Aquí hay algunas sugerencias para mejorarlo:

  1. Revisar el uso de fuentes: Asegúrate de que todas las fuentes se carguen correctamente desde Google Fonts. Puede que algunas no se estén aplicando como esperas.

  2. Consistencia en los estilos: Asegúrate de que los estilos de los títulos y subtítulos sean consistentes. Puedes definir una clase específica para títulos y otra para subtítulos para mantener la uniformidad.

  3. Imagen de perfil: La imagen está posicionada de manera absoluta. Asegúrate de que su posición no interfiera con otros elementos al cambiar el tamaño de la ventana.

  4. Responsive Design: Considera usar unidades relativas como em o % para tamaños de fuente y flexbox o grid para el diseño, asegurando que el currículum se vea bien en diferentes tamaños de pantalla.

  5. Verificar enlaces: Asegúrate de que los enlaces a redes sociales sean funcionales y revisa que las imágenes de los iconos se carguen correctamente.

  6. Ajustar colores y contrastes: Verifica que los colores de fondo y texto tengan suficiente contraste para mejorar la legibilidad.

Espero que estas sugerencias te ayuden a mejorar tu currículum. ¡Bons estudios!