*{
padding: 0;
margin: 0;
}
html{
scroll-behavior:smooth;
}
/* ######################## HEADER ###############################
*/
.menu {
width: 100%;
display: flex;
position: sticky;
top:0;
z-index:3;
}
.menu{
display:flex;
align-items:center;
}
.logo img{
padding-left:30px;
height:50px;
}
.menu_items{
height:30px;
width:100%;
display:flex;
list-style:none;
margin-top:20px;
margin-bottom:20px;
margin-right:30px;
padding-left: 0;
}
.menu_items li{
margin:0 5px;
}
.menu_items .quien{
padding-right: 5px;
border-right: solid 2.2px grey;
}
.menu_items li a{
color: grey;
padding: 0px 5px;
text-decoration: none;
display:block;
font-family: 'Roboto', sans-serif;
font-weight:400;
}
.menu_items li a:hover{
background-color: #FFEA8E;
padding: 2px 15px;
border-radius:10px;
}
.btnmenu{
margin-right:30px;
font-size:25px;
color:#fff;
cursor:pointer;
display:none;
}
ul.show {
top:65px;
}
@media screen and (max-width:900px){
.menu_items li a{
font-size:16px;
}
}
@media screen and (max-width:858px){
.menu{
height:65px;
}
.btnmenu {
color:grey;
display:inline-flex;
}
.menu_items{
padding:0;
position:fixed;
width:100%;
height:100vh;
background: rgba(33,37,41,.9);
top:100vh;
text-align:center;
transition:all .4s;
flex-direction:column;
margin-top: 0px;
}
.logo img{
/*display:none;*/
padding-bottom: 8px;
}
.menu_items li {
margin: 30px 0 0 0;
line-height:30px;
}
.menu_items li a:hover{
color:white;
background:none;
border-radius:0px;
}
.menu_items li a {
font-size: 20px;
margin: 10px 0 10px 0;
}
}
@media screen and (max-width:850) and (orientation:landscape){
.menu_items li{
margin: 5px 0 0 0;
}
.menu_items {
overflow:scroll;
height:calc(100%-65px);
}
.btnmenu i {
margin-left:20px;
}
}
.menu .colum1{
padding:0;
}
/**################## AQUI TERMINA HEADER#################3**/
/* ######################## BANNER ###############################*/
body{
margin: 0;
padding: 0;
}
.menu2{
background-image: url(https://res.cloudinary.com/cepeda-task/image/upload/v1689784271/Portafolio/background_qboc62.webp);
background-position: center;
background-size: cover;
background-attachment: fixed;
width:100%;
height:70vh;
}
.menu2 img {
height:150px;
margin-left:40px;
}
.botonbehacne{
margin-bottom:20px;
}
.boton{
padding:5px 40px;
}
.boton i {
color:white;
}
h1{
margin-left:40px;
color:white;
font-size:100px;
font-family: 'Roboto', sans-serif;
}
h2{
margin-left:40px;
color: transparent;
-webkit-text-stroke: 0.5px #ffffff;
font-size:100px;
font-family: 'Roboto', sans-serif;
}
h5{
color:#fff;
font-size:12px;
font-family: 'Roboto', sans-serif;
font-weight:100;
}
@media screen and (max-width:640px) {
.menu2{
background-image: url(https://res.cloudinary.com/cepeda-task/image/upload/v1689793522/Portafolio/fm2_11zon_gjoqwv.webp);
height: auto;
min-height:80vh;
}
h1{
font-size:50px;
}
h2{
font-size:50px;
}
}
@media only screen
and (min-width: 320px)
and (max-width: 736px)
{
h1{
font-size:70px;
}
h2{
font-size:30px;
}
.menu2 img {
height:50px;
margin-left:40px;
}
}
@media screen and (max-width:768px) and (orientation:landscape) {
.menu2{
height: auto;
min-height:80vh;
}
}
/* ######################## AQUI TERMINA BANNER ###############################*/
/* ######################## QUIEN SOY ###############################*/
.quiensoy{
width:100%;
height:70vh;
margin-left: 0;
}
.quiensoy-imagen {
padding:0;
}
.quiensoy-imagen img {
height:300px;
}
.quitarpadding {
padding:0;
}
.boton1{
margin-top: 25px;
font-family: 'Roboto', sans-serif;
font-weight:100;
}
.descarga {
display: none;
}
.boton2{
display: none;
}
.perfil_info{
padding: 0px 80px;
}
.qsy {
font-size: 80px;
}
.perfil_info h3{
margin-bottom: 10px;
font-family: 'Roboto', sans-serif;
font-weight:100;
}
.perfil_info p{
padding: 0px 80px;
font-family: 'Roboto', sans-serif;
font-weight:400;
text-align:justify ;
}
@media screen and (max-width:640px) {
.quiensoy{
height: auto;
min-height:65vh;
}
.perfil_info{
padding: 0px 0px;
}
.perfil_info p{
padding: 0px 30px 0 30px;
font-size: 15px;
}
.boton2{
display: block;
font-size: 12px;
text-align: center;
}
.quiensoy-imagen img {
height:200px;
}
.qsy {
font-size: 50px;
}
}
@media screen and ( max-width:992px) {
.quiensoy{
height: auto;
min-height:65vh;
}
.qsy {
margin-top: 30px;
}
.boton1{
display: none;
}
.boton2{
display: block;
font-size: 12px;
text-align: center;
margin-bottom: 20px;
}
}
@media screen and ( min-width:992px) {
.perfil_info{
padding: 0px 0px;
}
}
@media screen and (max-width:768px) and (orientation:landscape) {
.quiensoy{
height:100vh;
}
.qsy {
font-size: 30px;
}
.perfil_info h3{
margin-bottom: 20px;
}
.perfil_info p{
padding: 0px 10px;
}
.quiensoy-imagen img {
display: none;
}
}
/* ######################## AQUI TERMINA QUIEN SOY ###############################*/
.conocimientos{
width:100%;
height:50vh;
margin-left: 0;
background-color:lightblue;
}
.perfil_conocimientos p{
padding: 0px 80px;
font-family: 'Roboto', sans-serif;
color:black;
font-weight:400;
text-align:justify ;
}
.ico-conocimientos{
width: 60%;
height: 30vh;
background: white;
margin: auto;
border-top-left-radius: 40px;
border-top-right-radius: 40px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.cono {
font-size: 80px;
}
.perfil_conocimientos h3{
margin-bottom: 10px;
font-family: 'Roboto', sans-serif;
font-weight:100;
}
@media screen and ( max-width:992px) {
.conocimientos{
flex-direction: column-reverse;
justify-content: center;
height: auto;
min-height: 65vh;
}
}
@media screen and (max-width:640px) {
.conocimientos{
flex-direction: column-reverse;
justify-content: center;
height: auto;
min-height: 65vh;
}
.cono {
font-size: 50px;
}
.perfil_conocimientos p{
padding: 0px 30px 0 30px;
}
}
@media screen and (max-width:768px) and (orientation:landscape) {
.cono{
font-size: 50px;
}
}
/*################ PORTAFOLIO ####################*/
/*.container{
min-width: 100%;
}*/
.portafolio_container {
height: auto;
}
h6{
margin-top:50px;
font-size: 80px;
font-family: 'Roboto', sans-serif;
color:black;
font-weight:100;
}
.categorias a {
}
.barra-busqueda{
width: 50%;
height: 40px;
line-height: 40px;
background: #fff ;
padding: 0 20px;
border-radius: 100px;
border: none;
text-align: center;
}
.categorias a{
text-decoration: none;
margin: 10px 20px;
flex-wrap: wrap;
color: black;
font-family: 'Roboto', sans-serif;
font-weight:100;
}
.categorias a.activo {
font-weight:400;
color: lightblue;
}
.categorias a:hover{
color: lightblue;
}
.grid {
position: relative;
width: 100;
opacity: 0;
transition: opacity 0.5s linear 1s;
}
.grid.imagenes-cargadas{
opacity: 1;
/*z-index: -1 !important;*/
/*mix-blend-mode: overlay;*/
z-index:1;
}
.grid .item img {
}
.grid .item{
position: absolute;
display: block;
padding: 0;
margin: 10px;
width: calc(33.333333% - 20px);
}
@media screen and (max-width:640px) {
.grid .item {
width: calc(100% - 20px);
}
h6{
font-size: 50px;
}
}
@media screen and (max-width:768px) and (orientation:landscape) {
h6{
font-size: 50px;
}
}
@media screen and (max-width:1024px) and (min-width: 640px) {
.grid .item {
width: calc(50% - 20px);
}
}
.grid .item img{
width: 100%;
cursor: pointer;
vertical-align: top;
border-radius: 15px;
/*filter: blur(1px);*/
}
.grid.item-contenido{
position: relative;
}
.grid .item img:hover{
/*box-shadow: 1px 2px 2px 1px white;*/
}
.btn-dark {
color: #fff;
background-color: #343a40;
border-color: #343a40;
font-size: 13px;
border-radius: 15px;
position: relative;
margin-left: 5px;
margin-left: 5px;
top: -45px;
}
/*################ FIN PORTAFOLIO ####################*/
.to-top {
background: #FDBD71;
position: fixed;
bottom: 16px;
right: 16px;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
color:#ffffff;
text-decoration: none;
opacity: 0;
pointer-events: none;
transition: all .4s;
z-index:2;
}
.to-top .fas:hover{
color: #AA8993;
}
.to-top.active {
bottom:15px;
pointer-events:auto;
opacity:1;
}
/*################ foooter ####################*/