CSS
*{
margin:0;
padding:0;
}
body{
background:black;
}
.compu{
position:relative;
width:600px;
height:400px;
background:white;
border-radius:12px;
border:30px solid #212121;
margin:231px auto;
}
.base{
position:relative;
width:40px;
height:50px;
background:#121212;
margin:-231px auto;
}
.base::before{
content:"";
position:absolute;
width:152px;
height:21px;
border-radius:100%;
background:#121212;
margin:40px -55px
}
ul{
position:absolute;
width:560px;
height:400px;
list-style:none;
margin:21px 23px;
}
ul li{
display:inline-block;
width:172px;
height:172px;
border:3px solid #212121;
margin-right:5px
}
ul li:nth-child(1){
background:#FD7B87;
}
ul li:nth-child(2){
background:#FDA65F;
}
ul li:nth-child(3){
background:#5FB3F9;
}
ul li:nth-child(4){
background:#313246;
}
ul li:nth-child(5){
background:#3ABECA;
}
ul li:nth-child(6){
background:#E65D5D;
}
ul li:nth-child(1) ~ input[type="checkbox"] {
display: none;
}
ul li:nth-child(2) ~ input[type="checkbox"] {
display: none;
}
ul li:nth-child(3) ~ input[type="checkbox"] {
display: none;
}
ul li:nth-child(4) ~ input[type="checkbox"] {
display: none;
}
ul li:nth-child(5) ~ input[type="checkbox"] {
display: none;
}
ul li:nth-child(5) ~ input[type="checkbox"] {
display: none;
}
#click1,#click2,#click3{
position:absolute;
top:30px;}
#click4, #click5,#click6{
position:absolute;
top:321px;}
:checked ~ .bloque1 {display:block;}
:checked ~ .bloque2 {display:block;}
:checked ~ .bloque3 {display:block;}
:checked ~ .bloque4 {display:block;}
:checked ~ .bloque5 {display:block;}
:checked ~ .bloque6 {display:block;}
.bloque1, .bloque2, .bloque3, .bloque4,.bloque5, .bloque6{
position:fixed;
width:300px;
height:212px;
border:3px solid #121212;
display:none;
z-index:333;
animation:grow9 3s linear;
-moz-animation:grow9 3s linear;
-webkit-animation:grow9 3s linear ;
}
.bloque1{
margin:67px 132px;
background:#FD7B87;
}
.bloque2{
margin:67px -54px;
background:#FDA65F;
}
.bloque3{
margin:67px -240px;
background:#5FB3F9;
}
.bloque4{
margin:-121px 132px;
background:#313246;
}
.bloque5{
margin:-121px -54px;
background:#3ABECA;
}
.bloque6{
margin:-121px -240px;
background:#E65D5D;
}
.boton1, .boton2, .boton3{
position:absolute;
width:172px;
height:70px;
margin: 0 0px;
cursor:pointer;
text-align:center;
}
.boton4,.boton5,.boton6{
position:absolute;
width:172px;
height:70px;
margin: 102px 0px;
cursor:pointer;
}
.boton1::before, .boton2::before, .boton3::before, .boton4::before,.boton5::before,.boton6::before{
display:block;
color:white;
font-family:verdana;
font-size:1.2em;
margin: 17px 0px;
text-transform:uppercase;
text-align:center;
}
.boton1:hover::before, .boton2:hover::before, .boton3:hover::before,.boton4:hover::before, .boton5:hover::before, .boton6:hover::before{
color:#ccc;
}
.boton1::before{
content:"Web";
}
.boton2::before{
content:"Photo";
}
.boton3::before{
content:"Video";
}
.boton4::before{
content:"Audio";
}
.boton5::before{
content:"Graphics";
}
.boton6::before{
content:"App";
}
.boton1{
background:#FC6773;
}
.boton2{
background:#FC984B;
}
.boton3{
background:#339FF7;
}
.boton4{
background:#1D2042;
}
.boton5{
background:#21BBC6;
}
.boton6{
background:#E24141;
}
.device{
position:absolute;
width:175px;
height:132px;
border-radius:9px;
background:#333;
border:3px solid #212121;
margin:30px 60px;
animation:grow 3s linear ;
-moz-animation:grow 3s linear;
-webkit-animation:grow 3s linear ;
}
.device::before{
content:"";
display:block;
width:132px;
height:102px;
background:white;
margin:12px 19px;
border:3px solid #212121;
}
.device::after{
content:"";
display:block;
width:190px;
height:9px;
border-radius:12px;
background:#333;
border:3px solid #212121;
margin:0 -9px;
}
.head{
position:absolute;
width:132px;
height:21px;
background:#1D2042;
margin:-117px 22px;
border-bottom:2px solid #212121;
animation:grow3 3s linear;
-moz-animation:grow3 3s linear;
-webkit-animation:grow3 3s linear;
}
.body{
position:absolute;
width:30px;
height:30px;
border-radius:100%;
background:#E65D5D;
margin:-83px 29px;
border:1px solid #212121;
animation:grow5 3s linear;
-moz-animation:grow5 3s linear;
-webkit-animation:grow5 3s linear;
}
.body::before{
content:"";
position:absolute;
width:30px;
height:30px;
border-radius:100%;
background:#E65D5D;
margin:-1px 42px;
border:1px solid #212121;
}
.body::after{
content:"";
position:absolute;
border-radius:100%;
width:30px;
height:30px;
background:#E65D5D;
margin:-1px 85px;
border:1px solid #212121;
}
.brillo{
position:absolute;
width:21px;
height:12px;
border-radius:21px 21px 0 0;
border-right:3px solid white;
margin:3px 3px;
z-index:333;
}
.brillo::before{
content:"";
position:absolute;
width:21px;
height:12px;
border-radius:21px 21px 0 0;
border-right:3px solid white;
margin:0px 43px;
}
.brillo::after{
content:"";
position:absolute;
width:21px;
height:12px;
border-radius:21px 21px 0 0;
border-right:3px solid white;
margin:0px 86px;
}
.footer{
position:absolute;
width:132px;
height:21px;
background:#1D2042;
margin:-38px 22px;
border-top:2px solid #212121;
animation:grow3 3s linear;
-moz-animation:grow3 3s linear;
-webkit-animation:grow3 3s linear ;
}
.foto{
position:absolute;
width:152px;
height:152px;
background:#eee;
border:3px solid #212121;
margin:27px 73px;
animation:grow 3s linear;
-moz-animation:grow 3s linear;
-webkit-animation:grow 3s linear;
}
.relleno{
position:absolute;
width:132px;
height:132px;
background:#5FB3F9;
margin:9px 9px;
border:1px solid #212121;
overflow:hidden;
}
.mont{
position:absolute;
width: 0;
height: 0;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 90px solid #FC984B;
margin:45px 0px;
animation:grow6 3s linear;
-moz-animation:grow6 3s linear;
-webkit-animation:grow6 3s linear;
}
.mont::before{
content:"";
position:absolute;
width: 0;
height: 0;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 73px solid #E65D5D;
margin:17px 12px
}
.sol{
position:absolute;
width:30px;
height:30px;
border-radius:100%;
background:#FDA65F;
border:1px solid #212121;
margin:12px 55px;
animation:grow5 3s linear;
-moz-animation:grow5 3s linear;
-webkit-animation:grow5 3s linear;
}
.sol::before{
content:"";
display:block;
width:21px;
height:12px;
border-radius:21px 21px 0 0;
border-right:3px solid white;
margin:3px 3px;
}
.video{
position:absolute;
width:192px;
height:152px;
background:#313246;
margin:27px 50px;
border:3px solid #212121;
animation:grow 3s linear ;
-moz-animation:grow 3s linear;
-webkit-animation:grow 3s linear ;
}
.globo{
position:absolute;
top: 0;
left: 0;
width: 35px;
height: 35px;
border: 3px solid #212121;
-moz-border-radius: 50px 50px 0 50px;
border-radius: 50px 50px 0 50px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
background:#FD7B87;
margin:60px 3px;
animation:va 7s alternate ;
-moz-animation:va 7s alternate;
-webkit-animation:va 7s alternate ;
}
.globo::before{
content:"";
display:block;
border-top: 12px solid #1D2042;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
height: 0;
width: 12px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
margin:40px 33px;
}
.globo::after{
content:"";
display:block;
width:30px;
height:16px;
border-radius:30px 30px 0 0;
border-right:3px solid white;
margin:-85px -5px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.luna{
position:absolute;
width:45px;
height:45px;
border-radius:100%;
background:white;
border:2px solid #212121;
margin:3px 70px;
}
.linea{
position:absolute;
width:192px;
height:6px;
background:white;
border-top:2px solid #212121;
border-bottom:2px solid #212121;
margin:142px 0;
}
.circ{
position:absolute;
width:12px;
height:12px;
border-radius:100%;
background:#E24141;
margin:-4px 172px;
border:1px solid #212121;
animation:va3 7s alternate ;
-moz-animation:va3 7s alternate;
-webkit-animation:va3 7s alternate;
}
.audio3{
position:absolute;
width:60px;
height:60px;
border-radius:100%;
background:#FD7B87;
margin:-78px 21px;
-moz-animation:sube3 .3s alternate infinite ;
-webkit-animation:sube3 .3s alternate infinite;
animation:sube3 .3s alternate infinite;
}
.audio3::before{
content:"";
position:absolute;
width:30px;
height:16px;
border-radius:30px 30px 0 0;
border-right:3px solid white;
margin:9px 21px;
z-index:333;
}
.audio5{
position:absolute;
width:25px;
height:25px;
border-radius:100%;
background:#FD7B87;
margin:0px 37px;
-moz-animation:sube3 .3s alternate infinite ;
-webkit-animation:sube3 .3s alternate infinite;
-o-animation: sube3 .3s alternate infinite;
animation:sube3 .3s alternate infinite;
}
.audio5::before{
content:"";
position:absolute;
width:21px;
height:9px;
border-radius:21px 21px 0 0;
border-right:3px solid white;
margin:3px -2px;
z-index:333;
}
.audio{
position:absolute;
width:102px;
height:132px;
border-radius:12px;
background:#21BBC6;
border:3px solid #212121;
margin:40px 99px;
animation:grow 3s linear ;
-moz-animation:grow 3s linear;
-webkit-animation:grow 3s linear ;
}
.audio::before{
content:"";
display:block;
width:60px;
height:60px;
border-radius:100%;
border:9px solid #333;
background:#3ABECA;
margin:9px 12px;
}
.audio::after{
content:"";
display:block;
width:21px;
height:21px;
border-radius:100%;
border:9px solid #333;
background::#FD7B87;;
margin:-7px 30px;
}
.hoja{
position:absolute;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 160px;
height: 159px;
border: none;
font: normal 100%/normal Arial, Helvetica, sans-serif;
color: rgba(255,255,255,1);
-o-text-overflow: clip;
text-overflow: clip;
background: -webkit-linear-gradient(90deg, #212121 0, #FFFFFF 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 100%), -webkit-linear-gradient(0deg, #212121 0, #FFFFFF 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 100%), -webkit-linear-gradient(90deg, #212121 0, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 100%), -webkit-linear-gradient(0deg, #212121 0, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 100%), rgba(252,100,123,1);
background: -moz-linear-gradient(0deg, #212121 0, #FFFFFF 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 100%), -moz-linear-gradient(90deg, #212121 0, #FFFFFF 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 100%), -moz-linear-gradient(0deg, #212121 0, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 100%), -moz-linear-gradient(90deg, #212121 0, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 100%), rgba(252,100,123,1);
background: linear-gradient(0deg, #212121 0, #FFFFFF 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 100%), linear-gradient(90deg, #212121 0, #FFFFFF 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 100%), linear-gradient(0deg, #212121 0, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 100%), linear-gradient(90deg, #212121 0, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 100%), rgba(252,100,123,1);
background-position: -2px -19px, -22px 5px, -1px -1px, -1px -1px;
-webkit-background-origin: padding-box;
background-origin: padding-box;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
margin:23px 67px;
border:3px solid #212121;
animation:grow 3s linear;
-moz-animation:grow 3s linear;
-webkit-animation:grow 3s linear;
}
.escri{
position:absolute;
width:25px;
height:90px;
background:#21BBC6;
border-radius:12px 12px 0 0 ;
border:2px solid #212121;
margin:25px 102px;
-webkit-transform: rotate(35deg);
-moz-transform: rotate(35deg);
transform: rotate(35deg);
-moz-animation:esc 3s linear;
-webkit-animation: esc 3s linear ;
animation:esc 3s linear ;
}
.escri::before{
content:"";
display:block;
width: 0;
height: 0;
border-left: 13px solid transparent;
border-right:13px solid transparent;
border-top: 13px solid #21BBC6;
margin: 92px -1px;
}
.escri3::before{
content:"";
position:absolute;
width:3px;
height:50px;
background:white;
margin:-90px 5px
}
.escri3{
position:absolute;
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right:12px solid transparent;
border-top: 12px solid #212121;
margin: -102px 0px;
}
.celu{
position:absolute;
width:112px;
height:172px;
background:#333;
border-radius:9px;
margin:17px 93px;
border:3px solid #212121;
animation:grow 3s linear;
-moz-animation:grow 3s linear;
-webkit-animation:grow 3s linear;
}
.celu::before{
content:"";
display:block;
width:88px;
height:129px;
background:#3ABECA;
margin:21px 12px;
}
.celu::after{
content:"Raining";
font-family:verdana;
text-align:center;
color:white;
display:block;
width:88px;
height:30px;
background:#21BBC6;
margin:-40px 12px;
border-top:2px solid #212121;
}
.sol3{
position:absolute;
width:21px;
height:21px;
border-radius:100%;
background:#FDA65F;
border:1px solid #212121;
margin:-142px 21px;
}
.sol3::before{
content:"";
position:absolute;
width:21px;
height:21px;
border-radius:100%;
background:#FDA65F;
border:1px solid #212121;
margin:-1px 43px;
}
.sol3::after{
content:"";
display:block;
width:21px;
height:9px;
border-radius:21px 21px 0 0;
border-right:3px solid white;
margin:3px -5px;
}
.nubes{
position:absolute;
width:17px;
height:17px;
border-radius:100%;
background:white;
margin:-132px 60px;
border:1px solid #212121;
}
.nubes::before{
content:"";
position:absolute;
width:16px;
height:16px;
border-radius:100%;
background:white;
margin:-3px 7px;
border-top:1px solid #212121;
}
.nubes::after{
content:"";
position:absolute;
width:17px;
height:17px;
border-radius:100%;
background:white;
margin:-1px 16px;
border-top:1px solid #212121;
border-right:1px solid #212121;
border-bottom:1px solid #212121;
}
.nubes3{
position:absolute;
width:21px;
height:21px;
border-radius:100%;
background:#ccc;
margin:-102px 37px;
border:1px solid #212121;
}
.nubes3::before{
content:"";
position:absolute;
width:19px;
height:19px;
border-radius:100%;
background:#ccc;
margin:-3px 7px;
border-top:1px solid #212121;
}
.nubes3::after{
content:"";
position:absolute;
width:21px;
height:21px;
border-radius:100%;
background:#ccc;
margin:-1px 16px;
border-top:1px solid #212121;
border-right:1px solid #212121;
border-bottom:1px solid #212121;
}
.gotas, .gotas3, .gotas7{
position:absolute;
width: 7px;
height: 7px;
-moz-border-radius: 50px 50px 0 50px;
border-radius: 50px 50px 0 50px;
-webkit-transform: rotate(221deg);
-moz-transform: rotate(221deg);
transform: rotate(221deg);
}
.gotas{
background:#ccc;
margin:30px 3px;
animation:caen 1s linear infinite;
-moz-animation:caen 1s linear infinite;
-webkit-animation:caen 1s linear infinite;
}
.gotas3{
background:#ccc;
margin:25px 14px;
animation:caen3 2s linear infinite;
-moz-animation:caen3 2s linear infinite;
-webkit-animation:caen3 2s linear infinite;
}
.gotas7{
background:#ccc;
margin:30px 25px;
animation:caen7 3s linear infinite;
-moz-animation:caen7 3s linear infinite;
-webkit-animation:caen7 3s linear infinite;
}
@keyframes grow{
0%,25%{transform:scale(0);
-moz-transform:scale(0);
-webkit-transform:scale(0);}
35%,45%,55%,65%,75%,85%,95%,100%{
transform:scale(1);
-moz-transform:scale(1);
-webkit-transform:scale(1);}
}
@-moz-keyframes grow{
0%,25%{transform:scale(0);
-moz-transform:scale(0);
-webkit-transform:scale(0);}
35%,45%,55%,65%,75%,85%,95%,100%{
transform:scale(1);
-moz-transform:scale(1);
-webkit-transform:scale(1);}
}
@-webkit-keyframes grow{
0%,25%{transform:scale(0);
-moz-transform:scale(0);
-webkit-transform:scale(0);}
35%,45%,55%,65%,75%,85%,95%,100%{
transform:scale(1);
-moz-transform:scale(1);
-webkit-transform:scale(1);}
}
@keyframes grow3{
0%,25%,35%{width:0px; height:21px;}
45%,55%,65%,75%,85%,95%,100%{width:132px; height:21px;}
}
@-moz-keyframes grow3{
0%,25%,35%{width:0px; height:21px;}
45%,55%,65%,75%,85%,95%,100%{width:132px; height:21px;}
}
@-webkit-keyframes grow3{
0%,25%,35%{width:0px; height:21px;}
45%,55%,65%,75%,85%,95%,100%{width:132px; height:21px;}
}
@keyframes grow5{
0%,25%,35%,45%{opacity:0;}
55%,65%,75%,85%,95%,100%{opacity:1;}
}
@-moz-keyframes grow5{
0%,25%,35%,45%{opacity:0;}
55%,65%,75%,85%,95%,100%{opacity:1;}
}
@-webkit-keyframes grow5{
0%,25%,35%,45%{opacity:0;}
55%,65%,75%,85%,95%,100%{opacity:1;}
}
@keyframes grow6 {
0%,25%,35%{margin:132px 0px;}
45%,55%,65%,75%,85%,95%,100%{margin:45px 0px;}
}
@-moz-keyframes grow6 {
0%,25%,35%{margin:132px 0px;}
45%,55%,65%,75%,85%,95%,100%{margin:45px 0px;}
}
@-webkit-keyframes grow6 {
0%,25%,35%{margin:132px 0px;}
45%,55%,65%,75%,85%,95%,100%{margin:45px 0px;}
}
@keyframes va {
0%,25%{margin:60px 142px;}
100%{margin:60px 3px;}
}
@-moz-keyframes va {
0%,25%{margin:60px 142px;}
100%{margin:60px 3px;}
}
@-webkit-keyframes va {
0%,25%{margin:60px 142px;}
100%{margin:60px 3px;}
}
@keyframes va3 {
0%,25%{margin:-4px 0px;}
100%{margin:-4px 172px;}
}
@-moz-keyframes va3 {
0%,25%{margin:-4px 0px;}
100%{margin:-4px 172px;}
}
@-webkit-keyframes va3 {
0%,25%{margin:-4px 0px;}
100%{margin:-4px 172px;}
}
@keyframes grow9{
0%{opacity:0;}
12%{opacity:1;}
}
@-moz-keyframes grow9{
0%{opacity:0;}
12%{opacity:1;}
}
@-webkit-keyframes grow9{
0%{opacity:0;}
12%{opacity:1;}
}
@-webkit-keyframes sube3 {
0% {
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
transform: scale(0.7); }
50% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1); }
100% {
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
transform: scale(0.7); } }
@-moz-keyframes sube3 {
0% {
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
transform: scale(0.7); }
50% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1); }
100% {
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
transform: scale(0.7); } }
@keyframes sube3 {
0% {
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
transform: scale(0.7); }
50% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1); }
100% {
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
transform: scale(0.7); } }
@keyframes esc{
0%,25%,35%{margin:25px 30px;}
45%,55%,65%,75%,85%,95%,100%{margin:25px 102px;}
}
@-moz-keyframes esc{
0%,25%,35%{margin:25px 30px;}
45%,55%,65%,75%,85%,95%,100%{margin:25px 102px;}
}
@-webkit-keyframes esc{
0%,25%,35%{margin:25px 30px;}
45%,55%,65%,75%,85%,95%,100%{margin:25px 102px;}
}
@keyframes caen {
0%,25%,35%{margin:12px 3px; opacity:1}
45%,55%,65%,75%,85%,95%,100%{margin:80px 3px; opacity:0;}
}
@-moz-keyframes caen {
0%,25%,35%{margin:12px 3px; opacity:1}
45%,55%,65%,75%,85%,95%,100%{margin:80px 3px; opacity:0;}
}
@-webkit-keyframes caen {
0%,25%,35%{margin:12px 3px; opacity:1}
45%,55%,65%,75%,85%,95%,100%{margin:80px 3px; opacity:0;}
}
@keyframes caen3 {
0%,25%,35%,45%{margin:12px 14px; opacity:1}
55%,65%,75%,85%,95%,100%{margin:70px 14px; opacity:0;}
}
@-moz-keyframes caen3 {
0%,25%,35%,45%{margin:12px 14px; opacity:1}
55%,65%,75%,85%,95%,100%{margin:70px 14px; opacity:0;}
}
@-webkit-keyframes caen3 {
0%,25%,35%,45%{margin:12px 14px; opacity:1}
55%,65%,75%,85%,95%,100%{margin:70px 14px; opacity:0;}
}
@keyframes caen7 {
0%,25%,35%,45%,55%{margin:12px 25px; opacity:1}
65%,75%,85%,95%,100%{margin:70px 25px; opacity:0;}
}
@-moz-keyframes caen7 {
0%,25%,35%,45%,55%{margin:12px 25px; opacity:1}
65%,75%,85%,95%,100%{margin:70px 25px; opacity:0;}
}
@-webkit-keyframes caen7 {
0%,25%,35%,45%,55%{margin:12px 25px; opacity:1}
65%,75%,85%,95%,100%{margin:70px 25px; opacity:0;}
}
