HTML
<div class="contenedor">
<div class="table"><span class="table3"></span></div>
<div class="aur"><span class="circ"></span></div>
<div class="aur3"><span class="circ"></span></div>
<div class="compu"></div>
<div class="libro"><span class="cinta"></span></div>
<div class="lampara"></div>
<div class="lamp"></div>
<div class="estante"><div class="book"></div><span class="flores"><span class="flor"></span></span></div>
<div class="estante3"><span class="book3"></span><span class="book7"></span><span class="book9"></span></div>
<div class="reloj"></div>
<div class="colores"></div>
<div class="colores3"></div>
<div class="cubo"></div>
</div>
CSS
body{
background:black;
}
.contenedor{
position:relative;
width:800px;
height:600px;
background:#0B0112;
margin:221px auto;
border:9px solid #120B23;
}
.table{
position:absolute;
width:700px;
height:30px;
background:#06000C;
margin:400px 50px
}
.table::before{
content:"";
display:block;
width:30px;
height:199px;
background:#06000C;
margin:0px 50px
}
.table::after{
content:"";
display:block;
width:30px;
height:199px;
background:#06000C;
margin:-199px 630px
}
.table3{
position:absolute;
width:132px;
height:169px;
background:#08000C;
margin:-169px 80px;}
.table3::before{
content:"";
position:absolute;
width:132px;
height:169px;
background:#08000C;
margin:0px 418px;}
.aur, .aur3{
position:absolute;
width:50px;
height:96px;
border-radius:30px;
background:#525051;
}
.aur{
margin:279px 95px;
}
.aur::before, .aur3::before{
content:"";
display:block;
width:50px;
height:12px;
background:#525051;
border-radius:9px;
margin:109px 0px
}
.aur::after, .aur3::after{
content:"";
display:block;
width:12px;
height:30px;
background:#525051;
border-radius:9px;
margin:-142px 18px
}
.circ{
position:absolute;
width:30px;
height:30px;
border-radius:100%;
background:#979699;
border:3px solid #6E6D6D;
margin:-223px 7px
}
.circ::before{
content:"";
position:absolute;
width:30px;
height:30px;
border-radius:100%;
background:#979699;
border:3px solid #6E6D6D;
margin:37px -3px
}
.circ::after{
content:"";
position:absolute;
width:8px;
height:8px;
border-radius:100%;
background:#251E21;
margin:75px 10px
}
.aur3{
margin:279px 660px;}
.compu{
position:absolute;
width:221px;
height:152px;
background:#090012;
border:7px solid #463E45;
border-radius:6px;
margin: 212px 300px
}
.compu::before{
content:"";
display:block;
width:261px;
height:12px;
background:#171126;
margin:159px -21px
}
.compu::after{
content:"";
display:block;
border-top: 12px solid #120B23;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
height: 0;
width: 210px;
margin:-160px -25px
}
.libro{
position:absolute;
width:95px;
height:21px;
border-top:3px solid #7AC48B;
border-left:3px solid #7AC48B;
border-bottom:3px solid #7AC48B;
border-radius:9px;
background:#ccc;
margin:373px 162px
}
.cinta{
position:absolute;
width:21px;
height:21px;
background:#F7BB3B;
margin:9px 55px;
}
.cinta::before{
content:"";
display:block;
width: 0;
height: 0;
border-top: 12px solid #F7BB3B;
border-right: 12px solid transparent;
margin:21px 0
}
.cinta::after{
content:"";
display:block;
width: 0;
height: 0;
border-top: 12px solid #F7BB3B;
border-left: 12px solid transparent;
margin:-33px 9px
}
.lampara{
position:absolute;
width:60px;
height:30px;
border-radius:70px 70px 0 0;
background:#E35768;
margin:343px 182px
}
.lampara::before{
content:"";
display:block;
width:9px;
height:70px;
background:#E35768;
margin:-60px 9px;
transform:rotate(-35deg);
-moz-transform:rotate(-35deg);
-webkit-transform:rotate(-35deg);
}
.lampara::after{
content:"";
display:block;
width:9px;
height:70px;
background:#E35768;
margin:-117px 13px;
transform:rotate(55deg);
-moz-transform:rotate(55deg);
-webkit-transform:rotate(55deg);
}
.lamp{
position:absolute;
width:40px;
height:30px;
border-radius:40px 40px 0 0;
background:#E35768;
margin:231px 221px;
transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
animation:va 3s alternate infinite;
-moz-animation:va 3s alternate infinite;
-webkit-animation:va 3s alternate infinite;
}
.lamp::before{
content:"";
display:block;
width:21px;
height:12px;
border-radius:0 0 12px 12px;
background:white;
margin:30px 9px
}
.estante{
position:absolute;
width:241px;
height:12px;
background:#21133D;
margin:132px 30px;
}
.book{
position:absolute;
width:83px;
height:17px;
background:#ccc;
border-radius:3px;
border-top:3px solid #7FBE8E;
border-left:3px solid #7FBE8E;
border-bottom:3px solid #7FBE8E;
margin:-23px 112px
}
.book::before{
content:"";
position:absolute;
width:83px;
height:17px;
background:#ccc;
border-radius:3px;
border-top:3px solid #D4634D;
border-left:3px solid #D4634D;
border-bottom:3px solid #D4634D;
margin:-25px -12px
}
.book::after{
content:"";
position:absolute;
width:83px;
height:17px;
background:#ccc;
border-radius:3px;
border-top:3px solid #F7B33D;
border-right:3px solid #F7B33D;
border-bottom:3px solid #F7B33D;
margin:-47px 0px
}
.reloj{
position:absolute;
width:70px;
height:70px;
border-radius:100%;
background:#3EA3DE;
border:9px solid #21133D;
margin:30px 373px
}
.reloj::before{
content:"";
display:block;
width:3px;
height:25px;
background:#FCFBFF;
margin: 9px 33px
}
.reloj::after{
content:"";
display:block;
width:3px;
height:33px;
background:#FCFBFF;
margin: -12px 42px;
transform:rotate(-35deg);
-moz-transform:rotate(-35deg);
-webkit-transform:rotate(-35deg);
}
.estante3{
position:absolute;
width:231px;
height:12px;
background:#21133D;
margin:162px 540px;
}
.book3{
position:absolute;
width:43px;
height:75px;
background:#3EA3DE;
margin:-75px 50px
}
.book3::before{
content:"";
display:block;
width:30px;
height:30px;
background:#ccc;
margin:12px 6px;
}
.book3::after{
content:"";
display:block;
width:12px;
height:12px;
border-radius:100%;
background:#ccc;
margin:12px 14px;
}
.book7{
position:absolute;
width:43px;
height:75px;
background:#EE4D87;
margin:-75px 95px
}
.book7::before{
content:"";
display:block;
width:30px;
height:30px;
background:#ccc;
margin:12px 6px;
}
.book7::after{
content:"";
display:block;
width:12px;
height:12px;
border-radius:100%;
background:#ccc;
margin:12px 14px;
}
.book9{
position:absolute;
width:43px;
height:75px;
background:#F7B33D;;
margin:-75px 140px
}
.book9::before{
content:"";
display:block;
width:30px;
height:30px;
background:#ccc;
margin:12px 6px;
}
.book9::after{
content:"";
display:block;
width:12px;
height:12px;
border-radius:100%;
background:#ccc;
margin:12px 14px;
}
.colores{
position:absolute;
width:12px;
height:50px;
border-radius:0 0 12px 12px;
background:#EE4D87;
border-top:2px solid #525051;
margin:347px 590px;
transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-webkit-transform:rotate(-3deg);
}
.colores::before{
content:"";
display:block;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 12px solid #EE4D87;
margin:-14px 0px;
}
.colores3{
position:absolute;
width:12px;
height:50px;
border-radius:0 0 12px 12px;
background:#3EA3DE;
border-top:2px solid #525051;
margin:347px 600px;
transform:rotate(3deg);
-moz-transform:rotate(3deg);
-webkit-transform:rotate(3deg);
}
.colores3::before{
content:"";
display:block;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 12px solid#3EA3DE;
margin:-14px 0px;
}
.cubo{
position:absolute;
width:50px;
height:21px;
border-top:9px solid gray;
border-bottom:9px solid gray;
margin:360px 575px
}
.cubo::before{
content:"";
display:block;
width:5px;
height:21px;
background:gray;
margin:0 6px;}
.cubo::after{
content:"";
display:block;
width:5px;
height:21px;
background:gray;
margin:-21px 40px;}
.flores{
position:absolute;
border-top: 30px solid #EB805A;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
height: 0;
width: 21px;
margin:-30px 30px
}
.flor{
position:absolute;
width:21px;
height:21px;
border-radius:100%;
background:#3EA3DE;
margin:-50px -12px
}
.flor::before{
content:"";
position:absolute;
width:21px;
height:21px;
border-radius:100%;
background:#EE4D87;
margin:0px 21px
}
.flor::after{
content:"";
position:absolute;
width:21px;
height:21px;
border-radius:100%;
background:#F7B33D;
margin:3px 12px
}
.lamp::after{
content:"";
display:block;
width: 0;
height: 0;
border-top: 30px solid transparent;
border-right: 192px solid rgba(255,255,255,.2);
border-bottom: 30px solid transparent;
transform:rotate(90deg);
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
margin:50px -75px
}
@keyframes va{
0%{ transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);}
100%{ transform:rotate(-112deg);
-moz-transform:rotate(-112deg);
-webkit-transform:rotate(-112deg);}
}
@-moz-keyframes va{
0%{ transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);}
100%{ transform:rotate(-112deg);
-moz-transform:rotate(-112deg);
-webkit-transform:rotate(-112deg);}
}
@-webkit-keyframes va{
0%{ transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);}
100%{ transform:rotate(-112deg);
-moz-transform:rotate(-112deg);
-webkit-transform:rotate(-112deg);}
}
