Be connected... (Only CSS)
HTML
<div class="circu">
<div class="celu"><span class="cel3"></span></div>
<div class="foto"></div>
<div class="user"></div>
<div class="user3"></div>
<div class="user4"></div>
<div class="taza"></div>
<div class="raton"></div>
<div class="compu"><span class="compu3"></span></div>
<div class="browser"><span class="browser3"></span></div>
<div class="auri"></div>
<div class="video"><span class="video3"></span></div>
<div class="correo"></div>
<div class="cd"></div>
<div class="cloud"></div>
<div class="hoja"><span class="hoja3"></span></div>
<div class="search"></div>
<div class="location"></div>
<div class="arrow"></div>
<div class="lapiz"></div>
<div class="tablet"><span class="tablet3"></span></div>
<div class="lineas">
<span class="l1"></span>
<span class="l2"></span>
<span class="l3"></span>
<span class="l4"></span>
<span class="l9"></span>
<span class="l10"></span>
<span class="l11"></span>
<span class="l12"></span>
</div>
</div>
CSS
body{
background:black;
}
.circu{
position:relative;
width:500px;
height:500px;
border-radius:100%;
border:9px solid #121212;
margin:121px auto;
background:black;
}
.celu{
position:absolute;
width:40px;
height:70px;
border-radius:3px;
margin:30px 231px;
border:2px solid #03758f;
}
.celu::before{
content:"";
display:block;
width:40px;
height:12px;
background:#0c3a4a;
border-bottom:2px solid #03758f;
margin:0px 0;
}
.celu::after{
content:"";
display:block;
width:40px;
height:12px;
background:#0c3a4a;
border-top:2px solid #03758f;
margin:42px 0;
}
.cel3{
position:absolute;
width:19px;
height:3px;
background:#9a044a;
margin:-9px 11px
}
.cel3::before{
content:"";
display:block;
width:5px;
height:5px;
border-radius:100%;
border:2px solid #9a044a;
margin:55px 4px;
}
.foto{
position:absolute;
width:65px;
height:50px;
background:#690633;
border:2px solid #9a044a;
border-radius:7px;
margin:80px 345px;
}
.foto::before{
content:"";
display:block;
width:21px;
height:21px;
border-radius:100%;
background:black;
border:2px solid #03758f;
margin:13px 9px;
}
.foto::after{
content:"";
display:block;
width:14px;
height:9px;
background:#690633;
margin:-63px 43px;
border-radius:3px;
border-top:2px solid #9a044a;
border-left:2px solid #9a044a;;
border-right:2px solid #9a044a;
}
.user{
position:absolute;
width:30px;
height:16px;
background:#0c3a4a;
border:2px solid #03758f;
border-radius:50px 50px 0 0;
margin:231px 192px;
}
.user::before{
content:"";
display:block;
width:21px;
height:21px;
border-radius:100%;
background:#0c3a4a;
border:2px solid #03758f;
margin:-25px 3px
}
.user3{
position:absolute;
width:30px;
height:16px;
background:#690633;
border:2px solid #9a044a;
border-radius:50px 50px 0 0;
margin:221px 237px;
}
.user3::before{
content:"";
display:block;
width:21px;
height:21px;
border-radius:100%;
background:#690633;
border:2px solid #9a044a;
margin:-25px 3px
}
.user4{
position:absolute;
width:30px;
height:16px;
background:#0c3a4a;
border:2px solid #03758f;
border-radius:50px 50px 0 0;
margin:231px 281px;
}
.user4::before{
content:"";
display:block;
width:21px;
height:21px;
border-radius:100%;
background:#0c3a4a;
border:2px solid #03758f;
margin:-25px 3px
}
.taza{
position:absolute;
width:50px;
height:45px;
border-radius:0 0 12px 12px;
background:#0c3a4a;
border:2px solid #03758f;
margin:197px 405px;
}
.taza::before{
content:"";
display:block;
width:17px;
height:21px;
border-radius:100%;
border:2px solid #9a044a;
margin: 9px 52px
}
.raton{
position:absolute;
width:40px;
height:65px;
border-radius:100%;
background:#0c3a4a;
border:2px solid #03758f;
margin:306px 75px;
}
.raton::before{
content:"";
display:block;
width:2px;
height:65px;
background: #03758f;
border-radius:3px;
margin: 0px 18px;
}
.raton::after{
content:"S";
display:block;
font-family:verdana;
color:#9a044a;
font-size:33px;
margin:-97px 14px
}
.compu{
position:absolute;
width:132px;
height:95px;
border:2px solid #03758f;
border-radius:9px;
margin: 175px 185px;
}
.compu::before{
content:"";
display:block;
width:132px;
height:12px;
background:#0c3a4a;
border-bottom:2px solid #9a044a;
border-radius:9px 9px 0 0;
}
.compu::after{
content:"";
display:block;
width:132px;
height:14px;
background:#0c3a4a;
border-top:2px solid #9a044a;
border-radius: 0 0 9px 9px;
margin:65px 0
}
.compu3{
position:absolute;
width:16px;
height:12px;
background:#0c3a4a;
border:2px solid #03758f;
margin:83px 55px
}
.compu3::before{
content:"";
display:block;
width:30px;
height:3px;
background:#0c3a4a;
border:2px solid #03758f;
margin:12px -9px;
}
.compu3::after{
content:"";
display:block;
width:7px;
height:7px;
border-radius:100%;
border:2px solid #9a044a;
margin:-130px 3px;
}
.browser{
position:absolute;
width:80px;
height:65px;
border-radius:6px;
border:2px solid #9a044a;
margin:182px 30px
}
.browser::before{
content:"";
display:block;
width:80px;
height:12px;
background:#690633;
border-bottom:2px solid #9a044a;
}
.browser3{
position:absolute;
width:6px;
height:6px;
border-radius:100%;
background:black;
border:2px solid #03758f;
margin:-12px 5px
}
.browser3::before{
content:"";
display:block;
position:absolute;
width:6px;
height:6px;
border-radius:100%;
background:black;
border:2px solid #03758f;
margin:-2px 12px
}
.browser3::after{
content:"";
display:block;
position:absolute;
width:6px;
height:6px;
border-radius:100%;
background:black;
border:2px solid #03758f;
margin:-2px 26px
}
.auri{
position:absolute;
width:65px;
height:35px;
border-radius:60px 60px 0 0;
border-top:2px solid #03758f;
border-left:2px solid #03758f;
border-right:2px solid #03758f;
margin: 73px 85px
}
.auri::before{
content:"";
display:block;
width:9px;
height:17px;
border-radius:3px;
background:#690633;
border:2px solid #9a044a;
margin:30px -6px
}
.auri::after{
content:"";
display:block;
width:9px;
height:17px;
border-radius:3px;
background:#690633;
border:2px solid #9a044a;
margin:-51px 59px
}
.video{
position:absolute;
width:80px;
height:65px;
border-radius:6px;
border:2px solid #03758f;
margin:303px 360px
}
.video::before{
content:"";
display:block;
width:80px;
height:12px;
background:#0c3a4a;
border-bottom:2px solid #03758f;
}
.video3{
position:absolute;
width:60px;
height:3px;
border-radius:3px;
border:2px solid #9a044a;
margin:35px 8px
}
.video3::before{
content:"";
display:block;
width:6px;
height:6px;
border-radius:100%;
background:#0c3a4a;
border:2px solid #03758f;
margin:-2px 3px;
}
.correo{
position:absolute;
width:30px;
height:21px;
border:2px solid #03758f;
margin:35px 312px;
animation: aca 3s alternate infinite;
}
.correo::before{
content:"";
display:block;
width:2px;
height:17px;
background:#9a044a;
transform: rotate(-45deg);
margin:-2px 9px;
}
.correo::after{
content:"";
display:block;
width:2px;
height:17px;
background:#9a044a;
transform: rotate(45deg);
margin:-17px 19px;
}
.cd{
position:absolute;
width:35px;
height:35px;
border-radius:100%;
border:2px solid #9a044a;
margin:132px 430px;
animation:aca 3s alternate infinite;
}
.cd::before{
content:"";
display:block;
width:23px;
height:23px;
border-radius:100%;
border:1px solid #03758f;
margin:5px 5px
}
.cd::after{
content:"";
display:block;
width:7px;
height:7px;
border-radius:100%;
border:2px solid #9a044a;
margin:-23px 12px
}
.cloud{
position:absolute;
width:19px;
height:9px;
border-radius:30px 30px 0 0;
border-top:2px solid #03758f;
border-right:2px solid #03758f;
border-left:2px solid #03758f;
margin:271px 431px;
animation:aca 3s alternate infinite;
}
.cloud::before{
content:"";
display:block;
position:absolute;
width:21px;
height:12px;
border-radius:12px 12px 0 0;
border-top:2px solid #9a044a;
border-right:2px solid #9a044a;
margin:-9px 12px
}
.cloud::after{
content:"";
display:block;
position:absolute;
width:17px;
height:9px;
border-radius:12px 12px 0 0;
border-top:2px solid #03758f;
border-right:2px solid #03758f;
border-left:2px solid #03758f;
margin:0px 27px
}
.hoja{
position:absolute;
width:30px;
height:40px;
border:2px solid #9a044a;
margin:400px 350px;
animation:aca 3s alternate infinite;
}
.hoja::before{
content:"";
display:block;
width:21px;
height:1px;
background:#03758f;
margin:9px 4px;
}
.hoja::after{
content:"";
display:block;
width:21px;
height:1px;
background:#03758f;
margin:9px 4px;
}
.hoja3::before{
content:"";
display:block;
width:21px;
height:1px;
background:#03758f;
margin:7px 4px;
}
.search{
position:absolute;
width:30px;
height:30px;
border-radius:100%;
border:2px solid #03758f;
margin:395px 102px;
animation:aca 3s alternate infinite;
}
.search::before{
content:"";
display:block;
width:16px;
height:16px;
border-radius:100%;
border:2px solid #9a044a;
margin:6px 6px;
}
.search::after{
content:"";
display:block;
width:5px;
height:21px;
border-radius: 0 0 3px 3px;
border:2px solid #03758f;
margin:-6px 30px;
transform: rotate(-45deg);
}
.location{
position:absolute;
width: 30px;
height: 30px;
border: 2px solid #03758f;
border-radius: 50px 50px 0 50px;
transform: rotate(45deg);
margin:265px 16px;
animation:aca 3s alternate infinite;
}
.location::before{
content:"";
display:block;
width: 19px;
height: 19px;
border:2px solid #9a044a;
border-radius: 50px 50px 0 50px;
margin:4px 4px;
}
.arrow{
position:absolute;
width: 0;
height: 0;
border-left: 17px solid transparent;
border-right: 17px solid transparent;
border-bottom: 25px solid #03758f;
margin:129px 35px;
animation:aca 3s alternate infinite;
}
.arrow::before{
content:"";
display:block;
width: 0;
height: 0;
border-left: 14px solid transparent;
border-right: 14px solid transparent;
border-bottom: 21px solid black;
margin:5px -14px
}
.arrow::after{
content:"";
display:block;
width:3px;
height:18px;
background: #9a044a;
margin:-12px -1px
}
.lapiz{
position:absolute;
width:12px;
height:25px;
border:2px solid #9a044a;
border-radius:12px 12px 0 0;
margin:30px 172px;
animation:aca 3s alternate infinite;
}
.lapiz::before{
content:"";
display:block;
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 12px solid #03758f;
margin:30px -1px;
}
.lapiz::after{
content:"";
display:block;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 7px solid black;
margin:-40px 2px;
}
.tablet{
position:absolute;
width:70px;
height:93px;
border-radius:3px;
margin:371px 216px;
border:2px solid #9a044a;
}
.tablet::before{
content:"";
display:block;
width:70px;
height:12px;
background:#690633;
border-bottom:2px solid #9a044a;
margin:0px 0;
}
.tablet::after{
content:"";
display:block;
width:70px;
height:12px;
background:#690633;
border-top:2px solid #9a044a;
margin:65px 0;
}
.tablet3{
position:absolute;
width:21px;
height:3px;
background:#03758f;
margin:-9px 23px
}
.tablet3::before{
content:"";
display:block;
width:7px;
height:7px;
border-radius:100%;
border:2px solid #03758f;
margin:77px 6px;
}
.l1{
position:absolute;
width:1px;
height:65px;
background:#03758f;
margin:107px 251px;
transition: all .5s easy-in-out;
animation: lin1 3s alternate infinite;
}
.l2{
position:absolute;
width:1px;
height:65px;
background:#03758f;
margin:299px 251px;
animation: lin1 3s alternate infinite;
}
.l3{
position:absolute;
width:79px;
height:1px;
background:#03758f;
margin:231px 323px;
animation: lin2 3s alternate infinite;
}
.l4{
position:absolute;
width:65px;
height:1px;
background:#9a044a;
margin:231px 117px;
animation: lin3 3s alternate infinite;
}
.l9{
position:absolute;
width:1px;
height:93px;
background:#03758f;
margin:251px 152px;
transition: all .5s easy-in-out;
transform: rotate(45deg);
animation: lin6 3s alternate infinite;
}
.l10{
position:absolute;
width:1px;
height:60px;
background:#9a044a;
margin:251px 343px;
transform: rotate(-45deg);
animation: lin7 3s alternate infinite;
}
.l11{
position:absolute;
width:1px;
height:60px;
background:#9a044a;
margin:129px 343px;
transform: rotate(45deg);
animation: lin7 3s alternate infinite;
}
.l12{
position:absolute;
width:1px;
height:60px;
background:#03758f;
margin:121px 172px;
transform: rotate(-45deg);
animation: lin7 3s alternate infinite;
}
@keyframes lin1{
0% { height:0px; }
25% { height:0px; }
35% { height:0px;}
45% {height:0px;}
50% { height:65px; }
55% { height:65px; }
65% { height:65px;}
75% {height:65px;}
80% {height:65px; }
85% { height:65px; }
90% {height:65px; }
95% {height:65px;}
100% { height:65px;}
}
@keyframes lin2{
0% { width:0px; }
25% { width:0px; }
35% { width:0px; }
45% {width:0px; }
50% { width:79px; }
55% { width:79px; }
65% { width:79px; }
75% {width:79px; }
80% {width:79px; }
85% { width:79px; }
90% {width:79px; }
95% {width:79px; }
100% { width:79px; }
}
@keyframes lin3 {
0% { width:0px; }
25% { width:0px; }
35% { width:0px; }
45% {width:0px; }
50% { width:67px; }
55% { width:67px; }
65% { width:67px; }
75% {width:67px; }
80% {width:67px; }
85% { width:67px; }
90% {width:67px; }
95% {width:67px; }
100% { width:67px; }
}
@keyframes lin4 {
0% { width:0px; }
25% { width:0px; }
35% { width:0px; }
45% {width:0px; }
50% { width:65px; }
55% { width:65px; }
65% { width:65px; }
75% {width:65px; }
80% {width:65px; }
85% { width:65px; }
90% {width:65px; }
95% {width:65px; }
100% { width:65px; }
}
@keyframes lin6{
0% { height:0px; }
25% { height:0px; }
35% {height:0px; }
45% {height:0px; }
50% { height:93px; }
55% { height:93px; }
65% { height:93px; }
75% {height:93px; }
80% {height:93px; }
85% { height:93px; }
90% {height:93px; }
95% {height:93px; }
100% {height:93px; }
}
@keyframes lin7{
0% { height:0px; }
25% { height:0px; }
35% {height:0px; }
45% {height:0px; }
50% { height:60px; }
55% { height:60px; }
65% { height:60px; }
75% {height:60px; }
80% {height:60px; }
85% { height:60px; }
90% {height:60px; }
95% {height:60px; }
100% {height:60px; }
}
@keyframes lin9 {
0% { width:0px; }
25% { width:0px; }
35% { width:0px; }
45% {width:0px; }
50% { width:99px; }
55% { width:99px; }
65% { width:99px; }
75% {width:99px; }
80% {width:99px; }
85% { width:99px; }
90% {width:99px; }
95% {width:99px; }
100% { width:99px; }
}
@keyframes aca {
0% {
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0); }
25% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1); }
35% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1); }
45% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1); }
50% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1); }
55% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1); }
65% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1); }
70% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1); }
75% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1); }
80% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1); }
85% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1); }
90% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1); }
95% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1); }
100% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1); } }
