<div class="container">
  <h1>#DailyCssImage - Day 2</h1>
  <p>Elephant</p>
  
  <!-- Head -->
  <div class="head">
    
    <!--Eyebrow -->
    <div class="eyebrow left"></div>
    <div class="eyebrow right"></div>
    
    <!-- Eyelashes -->
    <div class="eyelashes left"></div>
    <div class="eyelashes right"></div>
    
    <!--Eye -->
    <div class="eye left"></div>
    <div class="eye right"></div>
  </div>
  
  <!--Ear -->
  <div class="ear left"></div>
  <div class="ear right"></div>
  
  <!-- Trunck   -->
  <div class="trunck"></div>
  <div class="trunck1"></div>
  <div class="trunck2"></div>
  <div class="trunck3"></div>
  <div class="trunck4"></div>
  
  <!-- Body   -->
  <div class="body"></div>
  
  <!--  Hand  -->
  <div class="hand left">
    <div class="nail1 na1"></div>
    <div class="nail1 na2"></div>
    <div class="nail1 na3"></div>
    <div class="nail1 na4"></div>
  </div>
  <div class="hand1"></div>
  <div class="hand2"></div>
  <div class="hand right">
    <div class="nail2 na5"></div>
    <div class="nail2 na6"></div>
    <div class="nail2 na7"></div>
    <div class="nail2 na8"></div>
  </div>
  
  <!--Leg  -->
  <div class="leg1"></div>
  <div class="leg2">
    <div class="nail3 na1"></div>
    <div class="nail3 na2"></div>
    <div class="nail3 na3"></div>
  </div>
  <div class="leg3">
    <div class="nail3 na4"></div>
    <div class="nail3 na5"></div>
  </div>
  
  <!-- Tail   -->
  <div class="tail1"></div>
  <div class="tail2"></div>
  <div class="block"></div>
  
  <!-- Flower   -->
  <div class="stem1"></div>
  <div class="stem2"></div>
  
  <div class="leaf1"></div>
  <div class="leaf2"></div>
  <div class="leaf3"></div>
  <div class="leaf4"></div>
  <div class="leaf5"></div>
  <div class="leaf6"></div>
  <div class="leaf7"></div>
  
  <div class="mid"></div>
</div>
@import url('https://fonts.googleapis.com/css?family=Sansita');

* {
  box-sizing: border-box;
}

body {
  display: flex;
  width: 100%;
  height: 100vh;
  justify-content: center;
  align-items: center;
  background: #FFECB3;
}

.container {
  position: relative;
  width: 600px;
  height: 600px;
  top: 5em;
}

h1, p{
  font-family: 'Sansita', sans-serif;
  font-size: 2.4em;
  position:absolute;
  top:-2em;
}

.container p {
  font-size: 1.5em;
  top:-1em;
}

/* Head */
.head {
  position: absolute;
  width: 42%;
  height: 38%;
  background: #ccc;
  border-radius: 60% 40%;
  border: 1px solid #757575;
  box-shadow: inset -10px 0 75px #F8BBD0;
  left: 20%;
  top: 10%;
  transform: rotate(272deg);
  z-index: 2;
}

/* Ear */
.ear {
  position: absolute;
  width: 25%;
  height: 36%;
  background: #ccc;
  border: 1px solid #757575;
}

.ear.right {
  border-radius: 2% 120% 70% 100%/52% 100% 70% 100%;
  top: 16%;
  left: 7%;
  transform: rotate(336deg);
  overflow: hidden;
  z-index: 1;
}

.ear.right::before {
  content: " ";
  position: absolute;
  width: 100%;
  height: 99%;
  background: -webkit-linear-gradient(left, rgb(248,187,208), rgba(255,255,255,.5));
  background: linear-gradient(right, rgba(248,187,208,.4), #fff);
  border-radius: 2% 70% 20% 20%;
  border-top: 1px solid #757575;
  top: 0%;
  right: 10%;
}

.ear.left {
  border-radius: 60% 5% 50% 25%;
  border-color: #757575 #757575 #757575 transparent;
  top: 2%;
  right: 29%;
  transform: rotate(336deg);
  z-index: 3;
  overflow: hidden;
}

.ear.left::after {
  content: " ";
  position: absolute;
  width: 86%;
  height: 98%;
  background: -webkit-linear-gradient(left, rgb(248,187,208), rgba(255,255,255,.5));
  background: linear-gradient(right,  rgba(248,187,208,.4), #fff);
  border-radius: 80% 3% 20% 20%;
  border-top: 1px solid #757575;
  top: 1%;
  left: 13%;
}

/* Eyebrow */
.eyebrow {
  position: absolute;
  width: 10%;
  height: 10%;
  border-radius: 55%;
  background: transparent;
  border: 3px solid #757575;
  border-color: transparent #757575 transparent transparent;
  transform: rotate(328deg);
}

.eyebrow.left {
  top: 14%;
  left: 39%;
}

.eyebrow.right {
  bottom: 40%;
  left: 59%;
}
/* Eye */
.eye {
  position: absolute;
  width: 10%;
  height: 18%;
  border-radius: 150% 100% 95% 95%;
  border: 1px solid #757575;
  background: #fff;
  transform: rotate(55deg);
  z-index: 3;
  overflow: hidden;
}

.eye.left {
  top: 18%;
  left: 28%;
}

.eye.right {
  top: 53%;
  left: 47%;
}

.eye.left::before,
.eye.right::before {
  content: " ";
  position: absolute;
  width: 100%;
  height: 80%;
  background: #000;
  border-radius: 120% 100%;
  left: 5.5%;
  top: -18%;
}

.eye.left::after,
.eye.right::after {
  content: " ";
  position: absolute;
  background: #fff;
  width: 18%;
  height: 10%;
  border-radius: 50%;
  box-shadow: 0 0px 100px #fff;
  top: 10%;
  left: 55%;
} 

/* Trunck */
.trunck {
  position: absolute;
  height: 4.3em;
  width: calc(4.1em * 2);
  background: transparent;
  border-bottom-left-radius: calc(4.5em * 2);
  border-bottom-right-radius: calc(4.5em * 2);
  border: 1px solid #757575;
  border-color: transparent #757575 #757575 #757575;
  top: 35%;
  left: 14%;
  transform: rotate(15deg);
  z-index: 7;
}

.trunck1 {
  position: absolute;
  width: calc(6em * 2);
  height: 6em;
  background: transparent;
  border-bottom-left-radius: calc(6em * 2);
  border-bottom-right-radius: calc(6em * 2);
  border-right: 42px solid #ccc;
  border-bottom: 38px solid #ccc;
  border-left: 18px solid #ccc;
  border-color: transparent #ccc #ccc #ccc;
  transform: rotate(20deg);
  top: 37%;
  left: 9.5%;
  z-index: 4;
}

.trunck1::before {
  content: " ";
  position: absolute;
  width: 138%;
  height: 150%;
  background: #000;
  background: transparent;
  border-bottom-left-radius: calc(6em * 2);
  border-bottom-right-radius: calc(6em * 2);
  top: 10%;
  left:-10%;
  border: 1px solid #757575;
  border-color: transparent #757575;
}

.trunck2 {
  position: absolute;
  width: 5%;
  height: 4%;
  background: #ccc;
  border-radius: 60% 60% 70% 60%;
  border: 1px solid #757575;
  border-color: #757575 #757575 transparent #757575;
  transform: rotate(20deg);
  top: 31%;
  left: 13%;
  z-index: 7;
}

.trunck3 {
  position: absolute;
  width: 15%;
  height: 9%;
  background: #ccc;
  border-radius: 50%;
  transform: rotate(30deg);
  border: 1px solid #757575;
  border-color: transparent #757575 transparent #757575;
  top: 34%;
  left: 36%;
  z-index: 6;
}

.trunck4 {
  position: absolute;
  width: 25%;
  height: 8%;
  background: #ccc;
  border-bottom-left-radius: 100%;
  border-bottom-right-radius: 80%;
  border: 1px solid #757575;
  border-color: transparent transparent #757575 transparent;
  transform: rotate(333deg);
  top: 43%;
  left: 25%;
  z-index: 6;
}

/*Body  */
.body {
  position: absolute;
  width: 34%;
  height: 42%;
  top: 40%;
  left: 32%;
  background: -webkit-linear-gradient(right,rgba(248,187,208,.7), #ccc 58%);
  background: linear-gradient(right,rgba(248,187,208,.7), #ccc 58%);
  border-radius: 50% 100% 100% 60%;
  border: 1px solid #757575;
  border-color: transparent #757575 #757575 #757575;
  transform: rotate(14deg);
  z-index: 4;
}

/* Hand */
.hand1 {
  position: absolute;
  width: 19%;
  height: 15%;
  background: #ccc;
  border-radius: 50%;
  border: 1px solid #757575;
  border-color: #757575 transparent #757575 transparent;
  transform: rotate(350deg);
  top: 43%;
  left: 39%;
  z-index: 5;
}

.hand2 {
  position: absolute;
  width: 5%;
  height: 10%;
  background: #ccc;
  border-radius: 40%;
  border: 1px solid #757575;
  top: 63%;
  right: 35.5%;
  transform: rotate(40deg);
  z-index: 4;
}

.hand.left {
  position: absolute;
  width: 16%;
  height: 13%;
  background: #ccc;
  border-radius: 80% 100%;
  border: 1px solid #757575;
  border-color: #757575 #757575 transparent #757575;
  top: 40%;
  left: 48%;
  transform: rotate(50deg);
  z-index: 7;
  overflow: hidden;
}

.nail1 {
  position: absolute;
  width: 25%;
  height: 18%;
  background: #eee;
  border-bottom-left-radius: 2em;
  border-bottom-right-radius: 2em;
  border: 1px solid #757575;
  border-color: transparent #757575 #757575 #757575;
}

.nail1.na1 {
  transform: rotate(326deg);
  top: 7%;
  left: 10%;
}

.nail1.na2 {
  left: 35%;
  top: 0;
}

.nail1.na3 {
  left: 60%;
  transform: rotate(22deg);
  top: 5%;
}

.nail1.na4 {
  left: 80%;
  top: 28%;
  transform: rotate(56deg);
}

.hand.right {
  position: absolute;
  width: 11%;
  height: 14%;
  background: #ccc;
  border-radius: 80% 80% 55% 60%;
  border: 1px solid #757575;
  transform: rotate(14deg);
  top: 50%;
  right: 30%;
  z-index: 6;
  overflow: hidden;
}

.nail2 {
  position: absolute;
  width: 35%;
  height: 17%;
  background: #eee;
  border-bottom-left-radius: 3em;
  border-bottom-right-radius: 3em;
  border: 1px solid #757575;
  border-color: transparent #757575 #757575 #757575;
}

.nail2.na5 {
  top: 60%;
  left: -7%;
  transform: rotate(265deg);
}

.nail2.na6 {
  top: 25%;
  left:-7%;
  transform: rotate(275deg);
}

.nail2.na7 {
  top: 0%;
  left: 15%;
}

.nail2.na8 {
  top: -3%;
  left: 52%;
  transform: rotate(35deg);
}

/* Leg */
.leg1 {
  position: absolute;
  width: 18%;
  height: 15%;
  background: #ccc;
  top: 62%;
  left: 35%;
  border-radius: 50%;
  border: 1px solid #757575;
  border-color: #757575 transparent transparent;
  transform: rotate(38deg);
  z-index: 5;
}

.leg2, 
.leg3 {
  position: absolute;
  width: 15%;
  height: 18%;
  background: #ccc;
  border-radius: 50%;
  border: 1px solid #757575;
  top: 65%;
  left: 45%;
  transform: rotate3d(1,1,0, 30deg);
  overflow: hidden;
  z-index: 7;
}

.leg2::after,
.leg3::after {
  content: ' ';
  position: absolute;
  width: 100%;
  height: 97%;
  background: -webkit-linear-gradient(bottom,rgba(248,187,208,.7), rgba(248,187,208,.5),rgba(248,187,208,.2));
  border-radius: 50%;
  border: 1px solid #757575;
  top: 10%;
  left: 5%;
}

.leg3 {
  top: 63%;
  left: 58%;
  transform: rotate3d(-1,1.5,0,40deg);
} 

.nail3 {
  position: absolute;
  width: 28%;
  height: 12%;
  border-top-left-radius: 2em;
  border-top-right-radius: 2em;
  border: 1px solid #757575;
  border-color: #757575 #757575 transparent #757575;
  background: #eee;
}

.nail3.na1 {
  left: -5%;
  top: 20%;
  transform: rotate(305deg);
  border-color: transparent #757575;
}

.nail3.na2 {
  left: 24%;
  top: 1.5%;
  transform: rotate(340deg);
}

.nail3.na3 {
  left: 60%;
  top: 1.5%;
  transform: rotate(20deg);
}

.nail3.na4 {
  left: 22%;
  transform: rotate(340deg);
  border-color: #757575 transparent #757575 #757575;
  top: 1%;
}

.nail3.na5 {
  left: 55%;
  transform: rotate(10deg);
  border-color: #757575 transparent #757575 #757575;
}

/* Tail */
.tail1 {
  position: absolute;
  height: 2.8em;
  width: calc(3.1em * 2);
  background: transparent;
  border-bottom-left-radius: calc(2.5em * 2);
  border-bottom-right-radius: calc(2.5em * 2);
  border: 1px solid #757575;
  border-color: transparent #757575 transparent transparent;
  top: 65%;
  left: 16%;
  transform: rotate(65deg);
  z-index: 7;
}

.tail2 {
  position: absolute;
  height: 4.2em;
  width: calc(4.2em * 2);
  background: transparent;
  border-bottom-left-radius: calc(2.5em * 2);
  border-bottom-right-radius: calc(2.5em * 2);
  border-bottom: 10px solid #ccc;
  border-right: 12px solid #ccc;
  border-color: transparent #ccc #ccc transparent;
  top: 63%;
  left: 13%;
  transform: rotate(62deg);
  z-index: 7;
}

.tail2::before {
  content: ' ';
  position: absolute;
  width: 120%;
  height: 120%;
  border-bottom-left-radius: calc(2.5em * 2);
  border-bottom-right-radius: calc(2.5em * 2);
  border: 1px solid #757575;
  border-color: transparent #757575 transparent transparent;
  top: -10%;
  left: -20%;
  transform: rotate(16deg);
}

.tail2::after {
  content: '';
  position: absolute;
  width: 20%;
  height: 100%;
  border-radius: 100% 5%;
  background: #ccc;
  transform: rotate(275deg);
  border: 1px solid #757575;
  border-color: #757575 #757575 transparent;
  top: 35%;
  left: 5%;
}

.block {
  position: absolute;
  width: 5%;
  height: 5%;
  background: #FFECB3;
  left: 19.5%;
  top: 56%;
  z-index: 7;
}

/*  Flower */
.stem1,.stem2 {
  position: absolute;
  width: 0.6%;
  background: #4CAF50;
  z-index: 6;
}

.stem1 {
  height: 20%;
  top: 63%;
  right: 40%;
  transform: rotate(7deg);
}

.stem2 {
  top: 35.5%;
  height: 15%;
  right: 33.5%;
  transform: rotate(17deg);
}


.leaf1,
.leaf2,
.leaf3,
.leaf4,
.leaf5,
.leaf6,
.leaf7 {
  position: absolute;
  width: 6%;
  height: 14%;
  background: #FFFF00;
  border-radius: 50%;
  box-shadow: inset 0 8px 12px #FFC400;
  border: 1px solid #FF8A65;
  z-index: 6;
}

.leaf1 {
  top: 20%;
  right: 35%;
  transform: rotate(333deg);
}

.leaf2 {
  top: 19%;
  right: 28%;
  transform: rotate(18deg);
}

.leaf3 {
  top: 23.5%;
  right: 23%;
  transform: rotate(70deg);
}

.leaf4 {
  top: 30%;
  right: 23%;
  transform: rotate(115deg);
}

.leaf5 {
  top: 34%;
  right: 28%;
  transform: rotate(165deg);
}

.leaf6 {
  top: 35%;
  right: 34%;
  transform: rotate(195deg);
}

.leaf7 {
  top: 33%;
  right: 41%;
  transform: rotate(230deg);
}

.mid {
  position: absolute;
  width: 8%;
  height: 8%;
  border-radius: 50%;
  background: #FF5252;
  border: 1px solid #B71C1C;
  box-shadow: inset 0 0 24px #FBE9E7;
  top: 30%;
  right: 30%;
  z-index: 6;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.