html{
font-family: 'Roboto', sans-serif;}
/* Generales */
main{
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
}
main span{
font-weight:bolder;
}
.logo{
width: 130px;
}
a{
text-decoration: none;
font-weight: 700;
color: black;
}
.navegacion{
position: relative;
text-decoration: none;
color: black;
}
.navegacion:after {
content: "";
width: 0;
height: 4px;
background-color: #3f1dcb;
position: absolute;
bottom: 0;
right: 50%;
transition: all .5s;
will-change: width;
}
.navegacion:hover:after{
width: 100%;
right: 0;
}
/* FLECHA */
/* */
.flecha1{
padding-top: 3em;
padding-left: 2em;
}
.flechares{
padding: 3em;
}
.flecha{
list-style: none;
}
.material-symbols-outlined {
border-radius: 40px;
box-shadow: 0px 3px 10px rgb(0 0 0 / 50%);
font-size: 28px;
}
/* CALL TO ACTION */
.cta a{
display: flex;
justify-content: center;
align-items: center;
background-color:#3f1dcb;
width: 260px;
padding: 10px;
border-radius: 15px;
color: white;
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.50);
}
li{
padding: 0px;
}
/* SECCIOS DA */
.datosAcademicos{
display: flex;
flex-direction: column;
}
.datosAcademicos ul{
display: flex;
justify-content: center;
align-content: flex-start;
flex-direction: column;
padding: 0px;
margin: 0px;
}
.datosAcademicos li{
height: 25px;
list-style: none;;
}
.datosAcademicos h4{
margin: 0px;
}
.datosAcademicos img{
height: 100px;
}
.programas img{
width: 150px;
}
/* */
/* OJO QUE ACA CAMBIA CONTENDEORES EN DESKTOP */
.contenedor {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 20em;
padding-top: 2em;
padding-bottom: 2em;
}
.contenedor figure {
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
border-radius: 20px;
box-shadow: 0px 15px 25px rgb(0 0 0 / 50%);
cursor: pointer;
margin: 0.25em;
}
.contenedor figure img{
width: 100%;
height: 100%;
transition: all 500ms ease-out;
}
.contenedor figure .capa{
position: absolute;
top: 0;
width: 100%;
height: 100%;
background: rgba(136, 133, 255, 0.70);
transition: all 500ms ease-out;
opacity:0;
visibility: hidden;
text-align: center;
}
.contenedor figure:hover > .capa{
opacity: 1;
visibility: visible;
}
.contenedor figure:hover > .capa h3{
margin-top: 250px;
margin-bottom: 15px;
}
.contenedor figure .capa h3{
font-size: 50px;
font-weight: 900;
}
.contenedor figure .capa p{
font-size: 25px;
font-weight: 400;
}
/* Aca termina ultimos proyectoss */
/* Parte HEADER */
header {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: flex-start;
flex-wrap: wrap;
}
header nav ul {
display: flex;
justify-content: space-around;
align-items: flex-start;
flex-wrap: wrap;
gap: 2em;
padding: 0px;
}
header li {
list-style: none;
font-size: large;
}
/* Parte HOLA */
.datosAlumno {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
}
.foto {
margin: 20px;
max-width: 100%;
display: flex;
align-content: center;
justify-content: center;
}
.foto img {
height: 300px;
filter: drop-shadow(8px 8px 4px #d1c4e9);
}
.bienvenida {
color: #7c4dff;
font-size: 70px;
font-weight: 800;
margin: 0;
text-align: center;
}
.acercademi {
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
margin: 0.8em;
}
.acercademi p {
font-size: 20px;
font-weight: 100;
width: 100%;
}
/* FIN HOLA */
/* */
/* PARTE PROYECTOS */
.proyectos{
padding-top: 3em;
}
.titulo {
display: flex;
justify-content: flex-start;
align-items: center;
font-size: larger;
font-weight: 600;
color: #7c4dff;
border-block-end: solid 5px #7c4dff;
height: 70%;
width: -webkit-fill-available;
margin-block-start: 0.25em;
padding-left: 0.75em;
}
/* */
/* HABILIDADES */
.habilidades {
display: flex;
flex-direction: column;
text-align: center;
justify-content: center;
align-content: center;
padding-top: 3em;
padding-bottom: 3em;
flex-wrap: wrap;
width: 100%;
}
.habilidades h2 {
display: flex;
align-items: center;
justify-content: center;
font-size: 50px;
width: 100%;
}
.habilidades section {
width: 100%;
display: flex;
flex-direction: column;
}
/* */
/* SECCION PORTFOLIO MP */
.titulo2{
font-size: 3em;
color: #7c4dff;
text-align: center;
font-weight: 900;
}
/* MATERIAS APROBADAS */
/* */
.mp {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 1em;
}
.mataprob{
align-content: center;
justify-content: space-around;
display: flex;
flex-direction: row;
}
.mataprob li{
list-style: none;
}
.mataprob ul{
padding: 0px;
}
.mataprob h2{
font-size: larger;
}
table{
table-layout: fixed;
border-collapse: collapse;
text-align: center;
width: 100%;
font-size: xx-small;
}
thead{
background: #b47cff;
}
th{
padding: 10px 60px;
text-transform: uppercase;
}
td{
padding: 15px;
border-bottom: solid 1px #b47cff ;
}
/* */
/* DATOS ACADEMICOS */
.datos2 {
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: flex-start;
flex-direction: column;
padding-top: 2em;
padding-bottom: 2em;
}
/* CALL TO ACTION */
.cta {
display: flex;
justify-content: flex-end;
align-content: flex-start;
flex-wrap: wrap;
padding-top: 1em;
padding-bottom: 1em;
}
/* */
/* FOOTER */
footer {
background-color: #b47cff;
padding: 20px;
font-weight: 600;
font-size: small;
}
@media (min-width: 600px){
header{
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: flex-start;
padding-right: 1em;
flex-wrap: wrap;
}
header nav ul {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 0 5em;
}
header li{
list-style: none;
padding: inherit;
font-size: x-large;
}
/* PARTE HOLA */
.datosAlumno {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-content: center;
margin: 0.5em;
padding-top: 3em;
}
.foto {
margin: 20px;
max-width: 100%;
/* height: 0px; */
width: 400px;
}
.foto img {
height: 400px;
filter: drop-shadow(8px 8px 4px #d1c4e9);
}
.acercademi {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
margin: 1rem;
}
.bienvenida {
color: #7c4dff;
font-size: 90px;
font-weight: 800;
margin: 0;
text-align: left;
}
.acercademi p {
font-size: 22px;
font-weight: 100;
width: 100%;
}
/* PROYECTOS */
.titulo {
display: flex;
justify-content: flex-start;
align-items: center;
font-size: 1.5em;
font-weight: 600;
color: #7c4dff;
border-block-end: solid 5px #7c4dff;
height: 70%;
width: -webkit-fill-available;
margin-block-start: 0.25em;
padding-left: 1em;
}
.proyectos{
padding-top: 3em;
}
/* CONTENDORES */
.contenedor{
height: 30em;
}
.contenedor figure{
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
border-radius: 20px;
box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.50)
}
/* HABILIDADES */
.habilidades {
display: flex;
flex-direction: column;
text-align: center;
justify-content: center;
padding-top: 100px;
padding-bottom: 100px;
flex-wrap: wrap;
width: 100%;
}
.habilidades section {
width: 100%;
display: flex;
flex-direction: row;
}
.habilidades h2{
display: flex;
align-items: center;
justify-content: center;
font-size: 50px;
}
.habilidades figcaption{
font-size: larger;
}
/* SECCION PORT MP */
.titulo2{
font-size: 3em;
color: #7c4dff;
text-align: center;
font-weight: 900;
}
/* MATERIAS APROBADAS */
.mp{
display: flex;
justify-content: flex-start;
align-items: center;
}
.mataprob{
align-content: center;
justify-content: space-around;
display: flex;
flex-direction: row;
}
.mataprob li{
list-style: none;
}
.mataprob ul{
padding: 0px;
}
.mataprob h2{
font-size: larger;
}
table{
table-layout: fixed;
border-collapse: collapse;
text-align: center;
font-size: larger;
}
thead{
background: #b47cff;
}
th{
padding: 10px 60px;
text-transform: uppercase;
}
td{
padding: 15px;
border-bottom: solid 1px #b47cff ;
}
/* DATOS ACEDEMICOS */
.datosAcademicos{
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
}
.datosAcademicos ul{
display: flex;
justify-content: center;
align-content: flex-start;
flex-direction: column;
padding: 0px;
margin: 0px;
}
.datosAcademicos li{
height: 25px;
list-style: none;;
}
.datosAcademicos h4{
margin: 0px;
}
.datosAcademicos img{
height: 100px;
}
.datosAcademicos{
display: flex;
flex-direction: column;
}
.datos2{
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
flex-direction: row-reverse;
padding-top: 20px;
}
/* FOOTER */
footer {
background-color: #b47cff;
padding: 20px;
font-weight: 600;
font-size: larger;
}
}
@media screen and (min-width: 992px) {
.contenedor {
height: 30em;
width: 65%;
padding: 2em;
}
.bienvenida {
text-align: left;
}
}