<div class="man">
  <div class="head">
    <div class="ears">
      <div></div>
      <div></div>
    </div>
    <div class="hair">
      <div class="reflect"></div>
    </div>
    <div class="face">
      <div class="mouth">
        <div class="top-teeth"></div>
        <div class="tongue"></div>
        <div class="bottom-teeth"></div>
      </div>
      <div class="mustache">
        <div></div>
        <div></div>
      </div>
      <div class="nose"></div>
      <div class="eyes">
        <div></div>
        <div></div>
      </div>
      <div class="eyebrows">
        <div></div>
        <div></div>
      </div>
      <div class="wrinkles">
        <div></div>
        <div></div>
      </div>
    </div>
  </div>
  <div class="neck">
    <div class="collar"></div>
    <div class="collar"></div>
  </div>
</div>

* {
  margin: 0;
}

:root {
  --bg: #087fb7;
  
  --neck: #ed927d;
  --neck-shadow: #e96968;
  --collar: #01243a;
  
  --face: #f6c09c;
  --face-shadow: #f4a992;
  --mouth: #a21c37;
  --tongue: #4e101f;
  --hair: #01243a; 
  --hair-reflect: #024b5a;
  --nose-shadow: #ea937f;
  --eyebrows-shadow: #ed927d;
  --wrinkles: #f2aa92;
  --ears:#e96968;
  --ears-border:#ee927d;
}

body {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background: var(--bg);
}

.man{
  margin-top:15vw;
  transform:scale(.75);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  flex-direction:column;
}

/* NECK */
.neck {
  width: 22vw;
  height: 18vw;
  background: var(--neck);
  box-shadow: inset 0 10vw var(--neck-shadow);
  position: relative;
  z-index:1;
}

.collar {
  width: 11.5vw;
  height: 7vw;
  background: var(--collar);
  position: absolute;
  bottom: -.1vw;
  left: -2vw;
  display:flex;
  align-items:center;
}

.collar::after {
  content: "";
  width: 2.5vw;
  height: 2.5vw;
  background: #fff;
  position: absolute;
  right: 2vw;
  border-radius:50%;
  
}

.collar:nth-child(2){
  left:auto;
  right:-2vw;
  transform:scale(-1);
}

/* HEAD */
.head{
  z-index:2;  
}

.face{
  width: 34vw;
  height: 35vw;
  background: var(--face);
  border-radius:5vw 5vw 50% 50%;
  margin-bottom:-8vw;
  box-shadow: inset 0 -5vw var(--face-shadow);
  position:relative;
  display:flex;
  justify-content:center;
  z-index:3;
}

.mouth{
  width: 17vw;
  height:7.5vw;
  background: var(--mouth);
  border-radius: 0 0 15vw 15vw;
  position:absolute;
  bottom:9vw;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  box-shadow:inset 0 .5vw var(--face);
}

.top-teeth{
  position:absolute;
  top:.3vw;
  background:#fff;
  width:12vw;
  height:2.5vw;
  border-radius: 0 0 2vw 2vw;
}

.bottom-teeth{
  position:absolute;
  bottom:0;
  background:#fff;
  width:13vw;
  height:2.5vw;
  border-radius: 0 0 2vw 2vw;
}

.tongue{
  width:8vw;
  height:2.5vw;
  background:var(--tongue);
  border-radius: 2.5vw;
  
 
}

.mustache div{
  background:var(--hair);
  width:14vw;
  height:7vw;
  position:absolute;
  border-radius: 7vw 0 3.5vw;
  bottom:14.5vw;
  left:3.5vw;
}

.mustache div:nth-child(2){
  right:3.5vw;
  left:auto;
  border-radius: 0 7vw 0 3.5vw;
}

.nose{
  width:8vw;
  height:8vw;
  background:var(--face);
  position:absolute;
  top:9vw;
  border-radius:50%;
  box-shadow: inset 0 -1.2vw var(--nose-shadow);
}

.hair{
  width:44vw;
  height:44vw;
  position:absolute;
  background:black;
  border-radius:50%;
  top:-20vw;
  left:-5vw;
  overflow:hidden;
  display:flex;
  justify-content:center;
}

.reflect{
  width:40vw;
  height:40vw;
  background:var(--hair);
  border-radius:50%;
  top:-10vw;
  position:absolute;
}

.reflect::after{
  width:10vw;
  height:10vw;
  content:'';
  position:absolute;
  right:7vw;
  top:11vw;
  border-radius: 0 15vw 0 0;
  border-right: 4vw solid var(--hair-reflect);
  border-top: 4vw solid var(--hair-reflect);
  transform:rotate(-25deg);
}

.eyes div{
   width:3vw;
  height:3vw;
  background:black;
  position:absolute;
  top:9vw;
  left:8.5vw;
  border-radius:50%;
  z-index:2;
}

.eyes div:nth-child(2){
  left:auto;
  right:8.5vw;
}

.eyebrows div{
   width:9vw;
  height:3.5vw;
  background:var(--hair);
  position:absolute;
  top:4.5vw;
  left:3.5vw;
  border-radius:3.5vw;
  box-shadow: 0 2.5vw var(--eyebrows-shadow) ;
   z-index:1;
}

.eyebrows div::before{
  content:'';
  position:absolute;
  background:var(--hair-reflect);
  width: 4.5vw;
  height:1vw;
  top:.8vw;
  border-radius: 1vw;
  left: 1.5vw;
}

.eyebrows div:nth-child(2){
  left:auto;
  right:3.5vw;
}

.eyebrows div:nth-child(2)::before{
  right:1.5vw;
  left:auto;
}

.wrinkles{
  margin-top:.5vw;
}

.wrinkles div{
  background: var(--wrinkles);
  width:25vw;
  height:.8vw;
  border-radius:1vw;
  margin:.8vw 0;
  
}

.ears div{
  background:var(--ears);
  width:8vw;
  height:3.5vw;
  border-radius:5vw;
  position:absolute;
  left:-5vw;
  top:12vw;
  border: 2vw solid var(--ears-border);
}

.ears div:nth-child(2){
  left:auto;
  right:-5vw;
}

// Original image : 
// https://dribbble.com/shots/6721061-Flat-Design-Character-Illustration-In-Adobe-Illustrator-CC

// Follow me, and don't forget to like this <3

// Instagram : @johan.batteau 
// OR : https://www.instagram.com/johan.batteau/

// Website : https://johan-batteau.com