<div class="man">
  <div class="head">
      <div class="ears"></div>
      <div class="ears"></div>
    <div class="face">
      <div class="mouth"></div>
      <div class="nose"></div>
      <div class="eye"></div>
      <div class="eye"></div>
      <div class="eyebrows"></div>
      <div class="eyeglasses">
        <div class="circle">
          <div class="glass">
            <div class="reflect"></div>
          </div>
        </div>
        <div class="circle">
          <div class="glass">
            <div class="reflect"></div>
          </div>

        </div>
      </div>
    </div>
    <div class="cap">
    </div>
      <div class="bottom"></div>
  </div>
  <div class="body">
    <div class="jacket">
      <div class="tee"></div>
      <div class="buttons"></div>
      <div class="buttons"></div>
      <div class="buttons"></div>

    </div>

  </div>
</div>

* {
  margin: 0;
}

:root {
  --bg: #f2f1d5;
  
  --neck: #fcad8e;
  
  --buttons:#0c0c0c;
  --jacket: #1a1a1a;
  --cap-reflect:#121212;
  --cap-shadow:#be9581;
  --cap-bottom:#212121;
  --eyebrows:#936639;
  --face: #fec6ad;
  --face-shadow: #febfa4;
  --teeth:#f2f2f2;
  --mouth: #6b0908;
  --tongue: #ffa0be;
  --tongue-shadow:#eb8caa;
  --nose-shadow: #fcad8e;
  --eye: #0abde3;
}

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

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

/* BODY */

.jacket{
  width:40vw;
  height: 17vw;
  border-radius:8vw 8vw 0 0;
  background:var(--jacket);
  position:relative;
  display:flex;
  justify-content:center;
}

.tee{
  background:#fff;
  width:18vw;
  height:16vw;
  position:absolute;
  bottom:0;
}

.tee::after{
  content:'';
  background:var(--neck);
  width:100%;
  height:15.5vw;
  position:absolute;
  top:calc(-15vw / 2);
  border-radius: 0 0 50% 50%;
}

.buttons{
  position:absolute;
  top:5vw;
  background:var(--buttons);
  width:1.25vw;
  height:1.25vw;
  border-radius:50%;
  left:9vw;
}

.buttons::after{
  content:'';
  width:1.25vw;
  background:var(--buttons);
  height:.25vw;
  position:absolute;
  left:21vw;
  top:.75vw;
}

.buttons:nth-child(2){
  top:10vw;
}

.buttons:nth-child(3){
  top:15vw;
}

/* HEAD */

.head{
  z-index:2;
  display:flex;
  justify-content:center;
}

.face{
  width:27vw;
  height:30vw;
  background:var(--face);
  margin-bottom:-1vw;
  border-radius: 0 0 15vw 15vw;
  box-shadow:inset -.5vw -1.5vw var(--face-shadow);
  position:relative;
  display:flex;
  justify-content:center;
  z-index:1;
}

.face::before{
  content:'';
  width:100%;
  height:3.30vw;
  background: var(--cap-shadow);
  position:absolute;
  top:0;
}

.mouth{
  width:13.5vw;
  height:4.5vw;
  background:var(--mouth);
  border-radius: 5vw;
  position:absolute;
  bottom:4.75vw;
  overflow:hidden; 
  display:flex;
  justify-content:center;
}

.mouth::before{
  content:'';
  background:var(--teeth);
  width:100%;
  height:2vw;
  position:absolute;
}

.mouth::after{
  content:'';
  background:var(--tongue);
  width:5vw;
  height:2.25vw;
  bottom:-1vw;
  border-radius:100%;
  box-shadow:inset -1vw -.75vw var(--tongue-shadow);
  position:absolute;
}

.nose{
  width:4.5vw;
  height:4.5vw;
  border-radius:50%;
  position:absolute;
  top:13.5vw;
  box-shadow: inset 0 -.75vw var(--nose-shadow);
}

.eye{
  width:7vw; height:7vw;
  background:#fff;
  border-radius:50%;
  margin:6.25vw 3vw 0;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

.eye::before{
  content:'';
  background: var(--eye);
  width:3vw;
  height:3vw;
  border-radius:50%;
}

.eye::after{
  content:'';
  position:absolute;
  top:-1vw;
  width:105%;
  height:4.25vw;
  background:var(--neck);
  box-shadow:0 .25vw rgba(0,0,0,.3);
}

.eyebrows{
  position:absolute;
   width:8vw; height:2vw;
  background:var(--eyebrows);
  border-radius:2.5vw;
  left:3vw;
  top:4.25vw;
  opacity:.5;
}

.eyebrows::after{
  content:'';
   width:8vw; height:2vw;
  background:var(--eyebrows);
  border-radius:2.5vw;
  position:absolute;
  left:13vw;
}

.circle{
  width:10vw;
  height:10vw;
  border-radius:50%;
  position:absolute;
  left:1vw;
  top:3vw;
  border:1vw solid var(--jacket);
  display:flex;
  align-items:center;
  justify-content:center;
}

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

.circle::before,.circle::after{
  content:'';
  border-radius:2.5vw;
  width:2vw;
  height:1vw;
  background:var(--jacket);
  position:absolute;
}

.circle::before{
  left:-2.5vw;
}

.circle::after{
  right:-2.5vw;
}

.glass{
  width:10.1vw;;
  height:10.1vw;
  background:rgba(155,205,205,.3);
  border-radius:50%;
  overflow:hidden;
  display:flex;
  justify-content:center;
}

.reflect{
  width:2vw;
  height:15vw;
  background:#fff;
  margin:-3vw 0 0 6vw;
  transform:rotate(-45deg);
  left:5.5vw;
  top:-5vw;
  opacity:.3;
}

.reflect::before{
  content:'';
  width:2vw;
  height:15vw;
  background:#fff;
  position:absolute;
  margin-left:-2.5vw;
}

.cap{
  width:30vw;
  background:var(--jacket);
  height:28vw;
  border-radius:50%;
  top:-13vw;
  clip-path:polygon(0 0, 30vw 0, 30vw 12vw, 0 12vw);
  position:absolute;
  z-index:1;
}

.cap::after{
  content:'';
  width:8vw;
  height:8vw;
  position:absolute;
  border:2vw solid var(--cap-reflect);
  border-right:0;
  border-bottom:0;
  border-radius: 18vw 0 0 0;
  left:4vw;
  top:1vw;
  clip-path:polygon(0 0, 5vw 0, 7vw 8vw, 0 10vw );
  transform:rotate(15deg);
}

.bottom{
  width:32vw;
  background:var(--cap-bottom);
  height:6vw;
  position:absolute;
  top:-3.25vw;
  border-radius:6vw;
  display:flex;
  justify-content:center;
  z-index:2;
}

.ears{
  background:var(--neck);
  width:2vw;
  height:4vw;
  position:absolute;
  left:4vw;
  top:8.5vw;
  border:1vw solid var(--face);
  border-radius:4vw 0 0 4vw;
  z-index:1;
}

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

.ears:nth-child(2)::after{
  content:'';
  width:.75vw;
  height:.75vw;
  background: var(--jacket);
  bottom:4vw;
  left:.75vw;
  border-radius:50%;
  position:absolute;
}

// Original image : 
// https://i.redd.it/9u3bdemnv0j51.png

// 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