@import url('https://fonts.googleapis.com/css?family=Shadows+Into+Light+Two');
@import url('https://fonts.googleapis.com/css?family=Roboto|Shadows+Into+Light+Two');
$textoIntro: #30313D;
$ojos: white;
$fondo: #73C8A9;
$seccion: #C0D23E;
$contenedor-datos: #C0D23E;
$enlaces: #74C7A9;
$enlaces-borde: #255456;
@mixin altoAncho ($alto, $ancho){
height: $alto;
width: $ancho;
}
@mixin centradoXY{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
@mixin fuenteTitle{
font-family: 'Roboto', sans-serif;
}
@mixin fuenteNombre{
font-family: 'Shadows Into Light Two', cursive;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
-webkit-box-sizing: border-box; /* Android ≤ 2.3, iOS ≤ 4 */
-moz-box-sizing: border-box; /* Firefox ≤ 28 */
box-sizing: border-box; /* Chrome, Firefox 29+, IE 8+, Opera, Safari 5.1 */
}
body {
line-height: 1;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='20px' height='785px' viewBox='0 0 20 785' enable-background='new 0 0 20 785' xml:space='preserve'%3E %3Crect x='7' fill='%23EDEDED' stroke='%23FFFFFF' stroke-miterlimit='10' width='8' height='792'/%3E %3C/svg%3E");
}
p{
text-align: center;
color: $textoIntro;
@include fuenteTitle;
}
h2{
text-align: center;
color: $textoIntro;
position: relative;
@include fuenteTitle;
font-size: 1.4rem;
}
#intro{
height: 100vh;
@include centradoXY;
z-index: 10000;
margin-left: 20%;
margin-right: 20%;
#content{
height: 100vh;
@include centradoXY;
#nombre{
@include fuenteNombre;
font-size: 3em;
}
#logo{
display: flex;
justify-content: center;
align-items:center;
margin:3rem 0 3rem 0;
.yo{
width: 150px;
position: absolute;
z-index: 1;
}
.alaizq{
width: 150px;
padding-right: 1.8em;
}
.alader{
width: 150px;
padding-left: 1.8em;
}
#contenedorDatosGeneral{
height: 100%;
position: absolute;
@include centradoXY;
z-index: -200;
#contenedorDatos{
border-radius: 50%;
background-color: $enlaces;
}
}
}
#social{
padding: 1rem 0 1rem 0;
i{
color:$textoIntro;
padding-right: 5px;
}
}
#ilus, #anim, #prog{
margin-top: 0px;
margin-bottom: 0px;
opacity: 0;
font-size: 2em;
}
}
}
#flechaScroll {
margin-top: 1em;
opacity: 1;
-webkit-animation: mover_flecha 0.8s ease infinite;
-moz-animation: mover_flecha 0.8s ease infinite;
animation: mover_flecha 0.8s ease infinite;
}
@-webkit-keyframes mover_flecha{
0%{transform: translateY(-3px);}
50%{transform: translateY(3px);}
100%{transform: translateY(-3px);}
}
@-moz-keyframes mover_flecha{
0%{transform: translateY(-3px);}
50%{transform: translateY(3px);}
100%{transform: translateY(-3px);}
}
@keyframes mover_flecha{
0%{transform: translateY(-3px);}
50%{transform: translateY(3px);}
100%{transform: translateY(-3px);}
}
.main{
width: 100%;
display: flex;
position: absolute;
z-index: 100;
}
@media only screen and ( min-width: 300px ) {
#logo{
margin:0;
}
.main{
.contenedor-central{
display: flex;
justify-content:center;
width: 100%;
.fondo{
visibility: initial;
display: block;
margin: 0 auto;
position: absolute;
img{
display: block;
margin: 0 auto;
@include altoAncho (100%, 300px);
}
}
.ojos-cont{
display: block;
margin: 0 auto;
position: absolute;
.ojos{
visibility: initial;
position: absolute;
display: flex;
justify-content:space-between;
top: 730px;
left: -48px;
z-index: 0;
.ojo1, .ojo2{
@include altoAncho (12px, 7px);
background-color: $ojos;
border-radius: 50%;
}
.ojo2{
@include altoAncho (14px, 9px);
}
}
}
// MARIKITA
.marikita-cont{
display: block;
margin: 0 auto;
position: absolute;
#marikita {
visibility: initial;
position: absolute;
top: 550px;
left: -25px;
z-index: 30;
img{
width: 50px;
}
}
}
.bocadillos{
visibility: initial;
display: block;
margin: 0 auto;
position: absolute;
.boc-ilus{
position: absolute;
top: 200px;
left: -170px;
width: 110px;
}
.boc-anim{
position: absolute;
top: 170px;
left: -60px;
width: 110px;
}
.boc-prog{
position: absolute;
top: 195px;
left: 50px;
width: 115px;
}
}
.enlaces-ilustracion, .enlaces-animacion{
margin: 0 auto;
position: absolute;
z-index: 1000;
.i-uno, .i-dos, .i-tres, .a-uno, .a-dos, .a-tres{
@include altoAncho (45px, 45px);
position: absolute;
border-radius: 50%;
border: 3px solid $enlaces;
@include centradoXY;
overflow: hidden;
img{
width: 130%;
}
}
//ENLACES ILUSTRACION
.i-uno{
top: 395px;
left: 27px;
}
.i-dos{
top: 400px;
left: 85px;
}
.i-tres{
top: 445px;
left: 115px;
}
//ENLACES ANIMACION
.a-uno{
top: 801px;
left: 7px;
}
.a-dos{
top: 784px;
left: 60px;
}
.a-tres{
top: 745px;
left: 106px;
}
}
}
.secciones{
display: block;
position: absolute;
height: 100vh;
width: 100%;
z-index: -100;
}
}
}
@media only screen and ( min-width: 400px ) {
.main{
.contenedor-central{
.fondo{
img{
@include altoAncho (100%, 400px);
}
}
.ojos-cont{
.ojos{
top: 970px;
left: -62px;
.ojo1, .ojo2{
@include altoAncho (13px, 8px);
}
.ojo2{
@include altoAncho (15px, 10px);
}
}
}
// MARIKITA
.marikita-cont{
#marikita {
top: 700px;
left: -30px;
img{
width: 60px;
}
}
}
.bocadillos{
.boc-ilus{
top: 270px;
left: -210px;
width: 130px;
}
.boc-anim{
top: 230px;
left: -60px;
width: 130px;
}
.boc-prog{
top: 275px;
left: 70px;
width: 140px;
}
}
.enlaces-ilustracion, .enlaces-animacion{
.i-uno, .i-dos, .i-tres, .a-uno, .a-dos, .a-tres{
@include altoAncho (60px, 60px);
}
//ENLACES ILUSTRACION
.i-uno{
top: 525px;
left: 40px;
}
.i-dos{
top: 538px;
left: 115px;
}
.i-tres{
top: 605px;
left: 155px;
}
//ENLACES ANIMACION
.a-uno{
top: 1067px;
left: 5px;
}
.a-dos{
top: 1044px;
left: 75px;
}
.a-tres{
top: 990px;
left: 136px;
}
}
}
}
}
@media only screen and ( min-width: 500px ) {
.main{
.contenedor-central{
.fondo{
img{
@include altoAncho (100%, 485px);
}
}
.ojos-cont{
.ojos{
top: 1185px;
left: -77px;
.ojo1, .ojo2{
@include altoAncho (15px, 10px);
}
.ojo2{
@include altoAncho (17px, 12px);
}
}
}
// MARIKITA
.marikita-cont{
#marikita {
top: 1080px;
left: -45px;
img{
width: 60px;
}
}
}
.bocadillos{
.boc-ilus{
top: 350px;
left: -210px;
width: 130px;
}
.boc-anim{
top: 310px;
left: -60px;
width: 130px;
}
.boc-prog{
top: 355px;
left: 70px;
width: 140px;
}
}
.enlaces-ilustracion, .enlaces-animacion{
.i-uno, .i-dos, .i-tres, .a-uno, .a-dos, .a-tres{
@include altoAncho (60px, 60px);
}
//ENLACES ILUSTRACION
.i-uno{
top: 655px;
left: 50px;
}
.i-dos{
top: 665px;
left: 140px;
}
.i-tres{
top: 735px;
left: 185px;
}
//ENLACES ANIMACION
.a-uno{
top: 1291px;
left: 15px;
}
.a-dos{
top: 1264px;
left: 95px;
}
.a-tres{
top: 1200px;
left: 136px;
}
}
}
.secciones{
height: 200vh;
width: 100%;
.seccion{
height: 25%;
width: 100%;
}
}
}
}
@media only screen and ( min-width: 600px ) {
.main{
.contenedor-central{
.fondo{
img{
@include altoAncho (100%, 580px);
}
}
.ojos-cont{
.ojos{
top: 1420px;
left: -90px;
.ojo1, .ojo2{
@include altoAncho (16px, 11px);
}
.ojo2{
@include altoAncho (18px, 13px);
}
}
}
// MARIKITA
.marikita-cont{
#marikita {
top: 1220px;
left: -55px;
img{
width: 80px;
}
}
}
.bocadillos{
.boc-ilus{
top: 400px;
left: -250px;
width: 170px;
}
.boc-anim{
top: 360px;
left: -80px;
width: 160px;
}
.boc-prog{
top: 405px;
left: 80px;
width: 175px;
}
}
.enlaces-ilustracion, .enlaces-animacion{
.i-uno, .i-dos, .i-tres, .a-uno, .a-dos, .a-tres{
@include altoAncho (70px, 70px);
}
//ENLACES ILUSTRACION
.i-uno{
top: 775px;
left: 70px;
}
.i-dos{
top: 795px;
left: 170px;
}
.i-tres{
top: 885px;
left: 222px;
}
//ENLACES ANIMACION
.a-uno{
top: 1541px;
left: 12px;
}
.a-dos{
top: 1510px;
left: 112px;
}
.a-tres{
top: 1448px;
left: 189px;
}
}
}
}
}
@media only screen and ( min-width: 800px ) {
.main{
.contenedor-central{
.fondo{
img{
width: 630px;
}
}
.ojos-cont{
.ojos{
top: 1535px;
left: -97px;
.ojo1{
margin-right: 3px;
}
.ojo2{
@include altoAncho (20px, 13px);
}
}
}
.marikita-cont{
#marikita {
top: 1290px;
left: -50px;
img{
width: 90px;
}
}
}
.bocadillos{
.boc-ilus{
top: 435px;
left: -250px;
width: 155px;
}
.boc-anim{
top: 398px;
left: -80px;
width: 160px;
}
.boc-prog{
top: 440px;
left: 85px;
width: 175px;
}
}
.enlaces-ilustracion, .enlaces-animacion{
.i-uno, .i-dos, .i-tres, .a-uno, .a-dos, .a-tres{
@include altoAncho (75px, 75px);
}
.i-uno{
top: 843px;
left: 75px;
}
.i-dos{
top: 855px;
left: 180px;
}
.i-tres{
top: 946px;
left: 240px;
}
//ENLACES ANIMACION
.a-uno{
top: 1678px;
left: 20px;
}
.a-dos{
top: 1630px;
left: 112px;
}
.a-tres{
top: 1570px;
left: 186px;
}
}
}
.secciones{
height: 240vh;
width: 100%;
}
}
}
@media only screen and ( min-width: 1024px ) {
.main{
.espacio-izq{
width: 35%;
}
.contenedor-central{
width: 635px;
.fondo{
img{
width: 635px;
}
}
.ojos-cont{
.ojos{
top: 1545px;
left: -95px;
.ojo1, .ojo2{
@include altoAncho (16px, 11px);
}
.ojo2{
@include altoAncho (20px, 13px);
}
}
}
.marikita-cont{
#marikita {
top: 1290px;
left: -50px;
width: 80px;
img{
width: 100%;
}
}
}
.bocadillos{
.boc-ilus{
left:-235px;
}
.boc-anim{
left:-85px;
}
.boc-prog{
left:70px;
}
}
.enlaces-ilustracion, .enlaces-animacion{
.i-uno, .i-dos, .i-tres, .a-uno, .a-dos, .a-tres{
@include altoAncho (77px, 77px);
}
.i-uno{
top: 851px;
left: 81px;
}
.i-dos{
top: 873px;
left: 188px;
}
.i-tres{
top: 958px;
left: 247px;
}
.a-uno{
top: 1685px;
left: 12px;
}
.a-dos{
top: 1645px;
left: 118px;
}
.a-tres{
top: 1586px;
left: 205px;
}
}
}
}
}
!
