HTML
<div class="container">
<div class="ventana">
<div class="luna"></div>
<div class="estrellas"></div>
</div>
<div class="estantes">
<div class="foto"></div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="taza"></div>
<div class="flor"></div>
<div class="luz"></div>
<div class="lamp"></div>
<div class="compu"></div>
<div class="table"></div>
<div class="cara">
<div class="auri"></div>
<div class="cejas"></div>
<div class="ojos"></div>
<div class="ojos7"></div>
<div class="swe"></div>
<div class="boca"></div>
<div class="buble5">
<div class="code"><div class="code3"></div></div>
</div>
</div>
<div class="cat"><div class="leg"></div><div class="cabeza"><div class="eyes"></div><div class="orejas"></div> <div class="buble">
<div class="raton"><div class="ojitos"></div></div>
</div></div></div>
<div class="cola">
<div class="dog"</div><div class="leg3"></div><div class="cabeza3"><div class="eyes3"></div><div class="orejas3"></div> <div class="buble3">
<div class="cookie"><div class="cookie3"></div></div></div></div>
</div>
CSS
body{
background:black;
}
.container{
position:relative;
width:800px;
height:600px;
background:#001e2f;
padding-top:30px;
margin:231px auto;
}
.luz{
position:absolute;
width: 0;
height: 0;
border-left: 63px solid transparent;
border-right: 63px solid transparent;
border-bottom: 300px solid rgba(255, 255, 255, .12);
margin:30px 343px;
}
.table{
position:relative;
width:60%;
height:172px;
background: #d37b50;
border-top:12px solid #b76333;
border-bottom:12px solid #b76333;
margin:400px auto;
}
.ventana{
position:absolute;
width:201px;
height:251px;
background:#0e1012;
margin:50px 550px;
border:12px solid #555;
}
.ventana::before{
content:"";
display:block;
width:201px;
height:9px;
background: #555;
margin:7px 0px;
}
.ventana::after{
content:"";
display:block;
width:201px;
height:9px;
background: #555;
margin:0px 0px;
}
.luna{
position:absolute;
width:50px;
height:50px;
border-radius:100%;
background:white;
margin:45px 45px;
}
.luna::before{
content:"";
display:block;
width:50px;
height:9px;
border-radius:21px;
background:#1b253b;
margin:55px 0px
}
.luna::after{
content:"";
display:block;
width:50px;
height:9px;
border-radius:21px;
background:#1b253b;
margin:-60px 12px;
}
.estrellas{
position:absolute;
width:7px;
height:7px;
border-radius:100%;
background:white;
margin:30px 30px;
}
.estrellas::before{
content:"";
display:block;
width:7px;
height:7px;
border-radius:100%;
background:white;
margin:121px 90px;
}
.estrellas::after{
content:"";
display:block;
width:7px;
height:7px;
border-radius:100%;
background:white;
margin:-221px 132px;
}
.compu{
position:absolute;
width:172px;
height:102px;
background:#121212;
border-r7adius:12px;
margin:291px 321px;
z-index:3;
}
.compu::before{
content:"";
display:block;
width:172px;
height:7px;
background:#212121;
border-radius:12px;
margin:102px 0px
}
.compu::after{
content:"";
display:block;
width:12px;
height:12px;
border-radius:100%;
border:3px solid #e90757;
margin:-172px 77px;
}
.cara::before{
content:"";
display:block;
width:90px;
height:45px;
border-radius: 90px 90px 0 0;
background:#ff9900;
margin:-45px 3px;
}
.cara{
position:absolute;
width:95px;
height:121px;
background:#ff9900;
border-radius: 0 0 90px 90px;
margin:-780px 359px;
animation: sube12 3s alternate infinite;
-moz-animation: sube12 3s alternate infinite;
-webkit-animation: sube12 3s alternate infinite;
}
.cara::after{
content:"";
display:block;
width:90px;
height:50px;
border-radius:0 0 90px 90px;
background:#ffe0bd;
margin:50px 2px;
}
.cejas{
position:absolute;
width:19px;
height:7px;
border-radius:12px 12px 0 0;
border-top:2px solid black;
margin:60px 14px
}
.cejas::before{
content:"";
display:block;
width:19px;
height:7px;
border-radius:12px 12px 0 0;
border-top:2px solid black;
margin:-3px 45px
}
.ojos{
position:absolute;
width:12px;
height:9px;
border-radius:100%;
background:#b95835;
margin:65px 17px;
animation: sube5 3s alternate infinite;
-moz-animation: sube5 3s alternate infinite;
-webkit-animation: sube5 3s alternate infinite;
}
.ojos7{
position:absolute;
width:12px;
height:9px;
border-radius:100%;
background:#b95835;
margin:65px 63px;
animation: sube5 3s alternate infinite;
-moz-animation: sube5 3s alternate infinite;
-webkit-animation: sube5 3s alternate infinite;
}
.boca{
position:absolute;
width:12px;
height:6px;
border-radius:0 0 12px 12px;
background:#ff3333;
margin:90px 40px
}
.boca::before{
content:"";
display:block;
border-bottom: 12px solid #ffe0bd;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
height: 0;
width: 12px;
margin:9px -3px
}
.boca::after{
content:"";
display:block;
width: 0;
height: 0;
border-left: 9px solid transparent;
border-right:9px solid transparent;
border-top: 16px solid #ffe0bd;
margin:-9px -3px
}
.swe{
position:absolute;
width:90px;
height:45px;
border-radius:90px 90px 0 0;
background:#00b7c8;
margin:102px 2px;
}
.auri{
position:absolute;
width:90px;
height:45px;
border-radius:90px 90px 0 0;
border-top:9px solid #00b7c8;
margin:3px 3px;
}
.auri::before{
content:"";
display:block;
width:9px;
height:30px;
border-radius:12px;
background:#00b7c8;
margin: 21px -9px;
}
.auri::after{
content:"";
display:block;
width:9px;
height:30px;
border-radius:12px;
background:#00b7c8;
margin: -50px 90px;
}
.lamp{
position:absolute;
width:12px;
height:50px;
background:#555;
margin: -30px 50%;
}
.lamp::before{
content:"";
display:block;
width:112px;
height:60px;
border-radius:112px 112px 0 0;
background:#ff5555;
margin:30px -50px;
}
.lamp::after{
content:"";
display:block;
width:30px;
height:16px;
border-radius: 0 0 30px 30px;
background:rgba(255,255,255,.9);
margin:-30px -9px
}
.estantes{
position:absolute;
width:132px;
height:9px;
background:#d37b50;
margin: 212px 50px;
border-bottom:3px solid #b76333;
}
.estantes::before{
content:"";
display:block;
width:132px;
height:9px;
background:#d37b50;
margin:50px 0px;
border-bottom:3px solid #b76333;
}
.foto{
position:absolute;
width:45px;
height:35px;
border-radius:3px;
background:lightblue;
border:3px solid #555;
margin:-155px 40px;
}
.foto::before{
content:"";
display:block;
width:12px;
height:12px;
border-radius:100%;
background:orange;
margin:9px 5px
}
.foto::after{
content:"";
display:block;
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 30px solid green;
margin:-27px 16px
}
ul{
position:absolute;
width:90px;
height:35px;
list-style:none;
margin:-93px -9px;
}
ul li{
display:inline-block;
width:21px;
height:30px;
margin:-3px 0px
}
ul li:nth-child(1){
background:lightblue;
border-bottom:2px solid pink;
}
ul li:nth-child(2){
background:pink;
border-bottom:2px solid lightblue;
}
ul li:nth-child(3){
background:gray;
border-bottom:2px solid white;
}
.taza{
position:absolute;
width:35px;
height:40px;
border-radius: 0 0 9px 9px;
background: #8c489f;
margin:360px 545px
}
.taza::before{
content:"";
display:block;
width: 12px;
height:12px;
border:3px solid #8c489f;
border-radius:9px;
margin:9px 30px
}
.flor{
position:absolute;
border-top: 30px solid #aaf300;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
height: 0;
width: 25px;
margin:370px 212px;
}
.flor::before{
content:"";
display:block;
width:9px;
height:35px;
background:brown;
margin:-65px 9px;
}
.flor::after{
content:"";
display:block;
width:50px;
height:50px;
border-radius:100%;
background:#ff8000;
margin: 0 -12px;
}
.cat{
position:absolute;
width:70px;
border-radius: 55px 55px 0 0;
height:35px;
background:#333;
margin: -721px 630px;
}
.cabeza{
position:absolute;
width:45px;
height: 35px;
border-radius:100%;
background:#333;
border:1px solid gray;
margin: -3px -12px;
animation: sube 3s alternate infinite;
-moz-animation: sube 3s alternate infinite;
-webkit-animation: sube 3s alternate infinite;
}
.cat::after{
content:"";
display:block;
width:12px;
height:50px;
border-radius: 30px;
background:#333;
margin: 21px 57px;
}
.eyes{
position:absolute;
width: 14px;
height:12px;
border-radius:100%;
border-bottom: 3px solid black;
margin: 7px 5px;
}
.eyes::before{
content:"";
display:block;
width: 14px;
height:12px;
border-radius:100%;
border-bottom: 3px solid black;
margin: 0px 19px;
}
.eyes::after{
content:"";
display:block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right:5px solid transparent;
border-top: 5px solid black;
margin: 5px 12px;
}
.orejas{
position:absolute;
width: 0;
height: 0;
border-top: 16px solid #212121;
border-right: 16px solid transparent;
margin: 0px -3px;
}
.orejas::before{
content:"";
display:block;
width: 0;
width: 0;
height: 0;
border-top: 16px solid #212121;
border-left: 16px solid transparent;
margin: -16px 33px;
}
.leg{
position:absolute;
width:21px;
height:7px;
border-radius: 9px;
background:#333;
margin: 28px -7px;
}
.dog{
position:absolute;
width:90px;
border-radius: 55px 55px 0 0;
height:45px;
background:brown;
margin: -30px -30px;
z-index:3;
}
.cabeza3{
position:absolute;
width:60px;
height: 50px;
border-radius:100%;
background:brown;
border-right:1px solid #b95835;
border-bottom:1px solid #b95835;
border-left:1px solid #b95835;
margin:0px -12px;
animation: sube3 3s alternate infinite;
-moz-animation: sube3 3s alternate infinite;
-webkit-animation: sube3 3s alternate infinite;
}
.leg3{
position:absolute;
width:45px;
height:12px;
border-radius: 45px 0 0px 45px;
background:brown;
border-top:1px solid #b95835;
margin: 30px -40px;
}
.orejas3{
position:absolute;
width: 13px;
height: 55px;
background:black;
border-radius:100%;
margin: 3px 0px;
}
.orejas3::before{
content:"";
display:block;
width: 13px;
height: 55px;
background:black;
border-radius:100%;
margin: 0px 47px;
}
.cola{
position:absolute;
width:112px;
height:12px;
border-radius: 30px;
background:black;
margin:-430px 400px;
}
.eyes3{
position:absolute;
width: 16px;
height:12px;
border-radius:100%;
border-bottom: 3px solid black;
margin: 16px 12px;
}
.eyes3::before{
content:"";
display:block;
width: 16px;
height:12px;
border-radius:100%;
border-bottom: 3px solid black;
margin: 0px 19px;
}
.eyes3::after{
content:"";
display:block;
width:12px;
height:7px;
background:black;
border-radius:100%;
margin: 9px 12px;
}
.buble{
position:absolute;
width:70px;
height:65px;
border-radius:100%;
background:lightblue;
margin:-102px 50px;
}
.buble::before{
content:"";
display:block;
width:17px;
height:16px;
border-radius:100%;
background:lightblue;
margin:55px -12px
}
.buble::after{
content:"";
display:block;
width:9px;
height:9px;
border-radius:100%;
background:lightblue;
margin:-53px -21px;
}
.raton{
position:absolute;
width:35px;
height:21px;
border-radius:40px 40px 0 0;
background:#555;
margin:-102px 16px
}
.raton::before{
content:"";
display:block;
top: 0;
left: 0;
width: 21px;
height: 21px;
background:gray;
-moz-border-radius: 50px 50px 0 50px;
border-radius: 50px 50px 0 50px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
margin:-5px 9px;
}
.raton::after{
content:"S";
display:block;
font-family:verdana;
font-weight:700;
color:gray;
margin:3px 37px;
-webkit-transform: rotate(-95deg);
-moz-transform: rotate(-95deg);
transform: rotate(-95deg);
}
.ojitos{
position:absolute;
width:12px;
height:12px;
border-radius:100%;
background:white;
margin: -5px 0px;
}
.ojitos::before{
content:"";
display:block;
width:9px;
height:9px;
border-radius:100%;
background:black;
margin: 0px 0px;
}
.buble3{
position:absolute;
width:70px;
height:65px;
border-radius:100%;
background:pink;
margin:-102px -75px;
}
.buble3::before{
content:"";
display:block;
width:17px;
height:16px;
border-radius:100%;
background:pink;
margin:55px 70px
}
.buble3::after{
content:"";
display:block;
width:9px;
height:9px;
border-radius:100%;
background:pink;
margin:-53px 90px;
}
.cookie{
position:absolute;
width:14px;
height:35px;
border-radius:12px;
background:#b76333;
margin:-112px 27px;
}
.cookie::before{
content:"";
display:block;
width:17px;
height:17px;
border-radius:100%;
background:#b76333;
margin:-3px -7px
}
.cookie::after{
content:"";
display:block;
width:17px;
height:17px;
border-radius:100%;
background:#b76333;
margin:-17px 5px
}
.cookie3{
position:absolute;
width:17px;
height:17px;
border-radius:100%;
background:#b76333;
margin:12px -7px
}
.cookie3::before{
content:"";
display:block;
width:17px;
height:17px;
border-radius:100%;
background:#b76333;
margin:0px 12px
}
.buble5{
position:absolute;
width:102px;
height:102px;
border-radius:100%;
background:white;
margin:-162px 121px;
}
.buble5::before{
content:"";
display:block;
width:21px;
height:19px;
border-radius:100%;
background:white;
margin:95px -12px
}
.buble5::after{
content:"";
display:block;
width:12px;
height:12px;
border-radius:100%;
background:white;
margin:-93px -33px;
}
.code{
position:absolute;
width:70px;
height:7px;
background:lightblue;
border-radius:9px;
margin:-182px 12px;
}
.code::before{
content:"";
display:block;
width:50px;
height:7px;
background:pink;
border-radius:9px;
margin:9px 0px;
}
.code::after{
content:"ZZZ";
display:block;
width:30px;
height:9px;
color:gray;
font-family:verdana;
font-size:14px;
font-weight:700;
border-radius:9px;
margin:-9px 21px;
}
.code3{
position:absolute;
width:70px;
height:7px;
background:pink;
border-radius:9px;
margin:16px 12px;
}
.code3::before{
content:"";
display:block;
width:50px;
height:7px;
background:lightblue;
border-radius:9px;
margin:12px 12px;
}
@-webkit-keyframes sube {
0% {margin-top: -3px; }
100% {margin-top: -5px; } }
@-moz-keyframes sube {
0% {margin-top: -3px; }
100% {margin-top: -5px; } }
@keyframes sube {
0% {margin-top: -3px; }
100% {margin-top: -5px; } }
@-webkit-keyframes sube3{
0% { margin-top: 0px; }
100% { margin-top: -3px; } }
@-moz-keyframes sube3{
0% { margin-top: 0px; }
100% { margin-top: -3px; } }
@keyframes sube3{
0% { margin-top: 0px; }
100% { margin-top: -3px; } }
@-webkit-keyframes sube5{
0% {height: 9px;margin-top:65px;}
25%{height: 9px; margin-top:65px;}
35%{height: 6px;margin-top:67px;}
50%{height: 6px;margin-top:67px;}
60%{height: 6px;margin-top:67px;}
70%{height: 3px;margin-top:73px;}
75%{height: 3px;margin-top:73px;}
95%{height: 3px;margin-top:73px;}
100% {margin-top: 3px; margin-top:73px;}}
@-moz-keyframes sube5{
0% {height: 9px;margin-top:65px;}
25%{height: 9px; margin-top:65px;}
35%{height: 6px;margin-top:67px;}
50%{height: 6px;margin-top:67px;}
60%{height: 6px;margin-top:67px;}
70%{height: 3px;margin-top:73px;}
75%{height: 3px;margin-top:73px;}
95%{height: 3px;margin-top:73px;}
100% {margin-top: 3px; margin-top:73px;}}
@keyframes sube5{
0% {height: 9px;margin-top:65px;}
25%{height: 9px; margin-top:65px;}
35%{height: 6px;margin-top:67px;}
50%{height: 6px;margin-top:67px;}
60%{height: 6px;margin-top:67px;}
70%{height: 3px;margin-top:73px;}
75%{height: 3px;margin-top:73px;}
95%{height: 3px;margin-top:73px;}
100% {margin-top: 3px; margin-top:73px;}}
@-webkit-keyframes sube7{
0% {height: 9px;}
25%{height: 9px;}
35%{height: 6px;}
50%{height: 6px;}
60%{height: 6px;}
70%{height: 3px;}
75%{height: 3px;}
95%{height: 3px;}
100% {height: 3px;}}
@-moz-keyframes sube7{
0% {height: 9px;}
25%{height: 9px;}
35%{height: 6px;}
50%{height: 6px;}
60%{height: 6px;}
70%{height: 3px;}
75%{height: 3px;}
95%{height: 3px;}
100% {height: 3px;}}
@keyframes sube7{
0% {height: 9px;}
25%{height: 9px;}
35%{height: 6px;}
50%{height: 6px;}
60%{height: 6px;}
70%{height: 3px;}
75%{height: 3px;}
95%{height: 3px;}
100% {height: 3px;}}
@-webkit-keyframes sube12{
0% {margin-top:-780px;}
25%{margin-top:-780px;}
35%{margin-top:-776px;}
50%{margin-top:-776px;}
60%{margin-top:-776px;}
70%{margin-top:-773px;}
75%{margin-top:-773px;}
95%{margin-top:-773px;}
100% {margin-top:-773px;}}
@-moz-keyframes sube12{
0% {margin-top:-780px;}
25%{margin-top:-780px;}
35%{margin-top:-776px;}
50%{margin-top:-776px;}
60%{margin-top:-776px;}
70%{margin-top:-773px;}
75%{margin-top:-773px;}
95%{margin-top:-773px;}
100% {margin-top:-773px;}}
@keyframes sube12{
0% {margin-top:-780px;}
25%{margin-top:-780px;}
35%{margin-top:-776px;}
50%{margin-top:-776px;}
60%{margin-top:-776px;}
70%{margin-top:-773px;}
75%{margin-top:-773px;}
95%{margin-top:-773px;}
100% {margin-top:-773px;}}
