HTML
<!-- Linux logo flat -->
<div class="con">
<div class="linux-body">
<!-- hand -->
<div class="hand"></div>
<!-- eye -->
<div class="eye"></div>
<div class="eye eye-r"></div>
<!-- nose -->
<div class="nose"></div>
<div class="nose nose-r"></div>
<!-- mouth -->
<div class="mouth"></div>
<div class="lips"></div>
<!-- Belly -->
<div class="belly"></div>
<!-- Foot -->
<div class="foot"></div>
<div class="foot foot-r"></div>
</div>
</div>
CSS
/* Fonts */
@import url('https://fonts.googleapis.com/css?family=Comfortaa');
body{
background: #073B4C;
}
.con {
margin: auto;
margin-top: 5%;
width: 400px; height: 400px;
background: #06D6A0;
border: 5px solid #E76F51;
border-radius: 50%;
}
.linux-body {
position: relative;
width: 200px;
height: 300px;
background: #2C3D50;
border-radius: 60% 60% 50% 50% / 90% 90% 40% 40%;
margin: auto; top: 10%;
}
.linux-body > div {
position: absolute;
/* top:; left:; */
}
/* hand */
/* .hand {
width: 10%; height: 50%;
background: #203040;
border-radius: 30% / 5%;
top: 20%; left: 0%;
transform: ;
} */
.eye {
width: 15px; height: 25px;
background: #2C3D50;
top: 10%; left: 30%;
border-radius: 60%;
border: 10px solid #FFCC00;
}
.eye-r {
left: 50%;
}
.eye, .eye-r {
animation: mvr 1s linear 1s infinite alternate;
}
@keyframes mvr {
0% { opacity: 50%}
100% { transform: scale(1.5,1.5) }
}
/* nose */
.nose {
width: 1.3%; height: 1.3%;
background: #2C3D50;
top: 23%; left: 45%;
z-index: 7;
border-radius: 50%;
}
.nose-r {left: 50%;}
/* mouth */
.mouth {
width: 50px; height: 50px;
background: #FFCC00;
border: 2px solid #2C3D50;
top: 18%; left: 36%;
transform: rotate(45deg);
border-radius: 50% 20% 50% 20% / 50% 20% 50% 20%;
z-index: 3;
}
/* lips */
.lips {
width: 20%; height: .50%;
background: #2C3D50;
border-radius: 10%;
top: 29%; left: 40%;
z-index: 5;
}
/* belly */
.belly {
width: 70%; height: 60%;
background: #EAF2BB;
top: 30%; left: 15%;
border-radius: 80% 80% 40% 40% / 100% 100% 50% 50%;
z-index: 2;
}
/* foot */
.foot {
width: 32%; height: 22%;
background: #FFCC00;
top: 80%;
z-index: 4;
border: 3px solid #2C3D50;
border-radius: 80% 80% 40% 40% / 100% 100% 50% 50%;
}
.foot-r {left: 65%;}
/*
.foot:after,
.foot:before {
content: ' ';
position: absolute;
background: #FFCC00;
width: 60%; height: 40%;
border: 3px solid #2C3D50;
border-radius: 80% 80% 40% 40% / 100% 100% 50% 50%;
border-bottom: none;
/* border-left: none; */
/*
transform: rotate(-25deg);
top: -11px; left: -15%;
}
.foot:before {
left: 45%; top:;
transform: rotate(25deg);
} */
h1{
font-family: 'Comfortaa', cursive;
font-size: 220%;
letter-spacing: 20px;
color: #2C3D50;
/* text-shadow: 0px 0px 1px #2C3D50; */
}
