Codigo de style.css :
@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); /* Fuente Krona y Monserrat Importada desde google fonts*/
- { /* este es el reset de la magen y el relleno por defecto dle navegador*/
margin: 0;
padding: 0;
}
body{
box-sizing: border-box;
background-color: #F3F3E0;
color: black;
box-sizing: border-box;
}
.Encabezado{
background-color: #133E87;
display: flex;
padding: 1% 0;
justify-content: center;
align-items: center;
}
.Encabezado__menu{
display: flex;
align-items: center;
justify-content: left;
gap: 80px;
width: 62vw;
font-size: 24px;
font-family: "Montserrat", sans-serif;
font-weight: 600;
}
.Encabezado__menu__link{
width: 150px;
background-color: #133E87;
text-align: center;
padding: 10px 0;
border: 2.5px solid #133E87;
border-radius: 8px;
text-decoration: none;
}
.Encabezado__menu__link:link{
color: black;
}
.Encabezado__menu__link:visited{
color: black;
}
.Encabezado__menu__link:hover{
color: white;
}
.Encabezado__menu__link:active{
color: white;
}
.Presentacion{
display: flex;
align-items: center;
margin: 2.5% 19%; /* Margen vertical de 10% y horizontal de 19% */
gap: 70px;
}
.Presentacion__contenido{
width: 50%;
display: flex;
flex-direction: column;
gap: 40px;
}
.Presentacion__contenido__titulo{
font-size: 36px;
font-family: "Krona One", sans-serif;
}
.Presentacion__contenido__texto{
font-size: 24px;
font-family: "Montserrat", sans-serif;
font-weight: 400;
}
.Presentacion__adicional{
width: 50%;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 40px;
}
.Presentacion__adicional__imagen__perfil{
padding: 2% 0;
width: 100%;
}
.Presentacion__adicional__enlaces{
display: flex;
flex-direction: column;
gap: 32px;
align-items: center;
font-size: 24px;
font-family: "Montserrat", sans-serif;
font-weight: 600;
margin: 3px;
}
.Presentacion__adicional__enlaces_subtitulo{
font-size: 24px;
font-family: "Krona One", sans-serif;
font-weight: 400;
}
.Presentacion__adicional__enlaces_Link{
width: 378px;
background-color: #F3F3E0;
/* background: linear-gradient(to bottom right, #22D4FD, #11849e); Gradiente hacia la esquina derecha entre 2 colores */
text-align: center;
padding: 19px 0;
border: 2.5px solid #133E87;
border-radius: 8px;
text-decoration: none;
}
a:link{ /* Link sin visitar /
color: #133E87;
}
a:visited{ / Link visitado /
color: #133E87;
}
a:hover{ / Pasando el mouse sobre el link /
color: #133E87;
}
a:active{ / Link presionado */
color: blue;
}
.PiePagina{
background-color: #133E87;
color: black;
text-align: center;
font-size: 24px;
font-family: "Montserrat", sans-serif;
font-weight: 400;
padding: 10px;
}
