Vista final de la hoja de vida
Captura del código html
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%;
}