purple_ghost

CSS COVID-19 Ready Girl

<!DOCTYPE HTML>
<html>
<head>
  <title>Page Title</title>
  <meta charset='utf-8'>
  <meta name='author' content='purple_ghost'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
</head>
<body>
  <div class="person">
   <div class="bow-left"></div>
   <div class="bow"></div>
   <div class="bow-right"></div>
   <div class="hair-base"></div>
   <div class="hair-left"></div>
   <div class="hair-right"></div>
   <div class="hair-back"></div>
   <div class="head"></div>
   <div class="mask-strap mst mtsl"></div>
   <div class="mask-strap mst mtsr"></div>
   <div class="mask"></div>
   <div class="mask-strap msb mbsl"></div>
   <div class="mask-strap msb mbsr"></div>
   <div class="eye left-eye">
    <div class="pupil left-pupil"></div>
   </div>
   <div class="eye right-eye">
    <div class="pupil right-pupil"></div>
   </div>
   <div class="neck"></div>
   <div class="body"></div>
   <div class="arms left"></div>
   <div class="arms right"></div>
   <div class="hands left-hand"></div>
   <div class="hands right-hand"></div>
   <div class="legs left-leg"></div>
   <div class="legs right-leg"></div>
   <div class="short-strap"></div>
   <div class="short-left"></div>
   <div class="short-right"></div>
   <div class="feet left-foot"></div>
   <div class="feet right-foot"></div>
   <div class="tee"></div>
   <div class="tee-left"></div>
   <div class="tee-right"></div>
  </div>
</body>
</html>

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
/* Basic Setup */
*, *::before, *::after, *:focus { box-sizing: border-box; outline: none; overflow-x: hidden; }
body { justify-content: center; align-items: center; background-color: #949494; font-family: "Roboto"; }
/* Design Human Base */
.person * { display: block; overflow: hidden; }

.head { margin-top: 50px!important; background-color: #fff399; border-radius: 50%; width: 150px; height: 150px; 
        margin: auto; }
.arms { position: absolute; top: 222px; background-color: #fff399; width: 25px; height: 240px; }
.hands { position: absolute; top: 422px; background-color: #fff399; width: 59px; height: 40px; 
         border-radius: 50%; }
.legs { position: absolute; background-color: #fff399; width: 25px; height: 240px; }
.feet { position: absolute; background-color: #b24dff; width: 59px; height: 40px; bottom: 105px; }
.eye { position: absolute; top: 100px; background-color: white; width: 30px; height: 20px; border-radius: 50%; }
.pupil { position: absolute; top: 5px; background-color: #1f8fff; width: 10px; height: 10px; border-radius: 50%; }
.neck { background-color: #fff399; width: 20px; height: 20px; margin: auto; }
.body { background-color: #fff399; width: 120px; height: 180px; border-top-left-radius: 10px;
        border-top-right-radius: 10px; margin: auto; }

.arms.left { transform: rotate(20deg); left: 260px; border-top-left-radius: 9px; }
.arms.right { transform: rotate(-20deg); right: 260px; border-top-right-radius: 9px; }

.eye.left-eye { left: 320px; }
.eye.right-eye { right: 320px; }

.pupil.left-pupil { left: 10px; }
.pupil.right-pupil { right: 10px; }

.mask-strap { height: 26px; width: 5px; background-color: #c67aff; border-left: 1px solid #bfbfbf; 
              border-right: 1px solid #bfbfbf; position: absolute; z-index: 1000; }
.mst { top: 132px; }
.msb { top: 172px; }
.mtsl { transform: rotate(-44deg); left: 327px; }
.mtsr { transform: rotate(44deg); right: 327px; }
.mbsl { transform: rotate(44deg); left: 327px; }
.mbsr { transform: rotate(-44deg); right: 327px; }
.mask { border-radius: 5px; background-color: #c67aff; border: 1px solid #bfbfbf; width: 70px; height: 30px;
        position: absolute; left: 50%; transform: translateX(-50%); z-index: 1000; top: 150px; }

.legs.right-leg { right: 311px; }
.legs.left-leg { left: 311px; }

.hands.left-hand { transform: rotate(110deg); left: 206px; }
.hands.right-hand { transform: rotate(-110deg); right: 206px; }

.feet.left-foot { left: 278px; transform: rotate(180deg); border-bottom-right-radius: 50%; }
.feet.right-foot { right: 278px; transform: rotate(180deg); border-bottom-left-radius: 50%; }

.short-strap { position: absolute; left: 311px; width: 120px; background-color: #66a3ed; height: 40px; }
.short-left { position: absolute; width: 45px; background-color: #66a3ed; height: 70px; left: 311px; }
.short-right { position: absolute; width: 45px; background-color: #66a3ed; height: 70px; right: 311px; }

.tee { position: absolute; background-color: #ed6695; z-index: 1000; width: 120px; height: 150px; top: 228px;
       left: 311px; }
.tee-left { position: absolute; background-color: #ed6695; z-index: 1000; width: 26px; height: 50px; top: 222px;
            left: 294px; transform: rotate(20deg); border-top-left-radius: 9px; }
.tee-right { position: absolute; background-color: #ed6695; z-index: 1000; width: 26px; height: 50px; top: 222px;
            right: 294px; transform: rotate(-20deg); border-top-right-radius: 9px; }

.hair-base { background: linear-gradient(to top, #f7e034, #c751db); width: 151px; height: 60px; 
             position: absolute; border-top-left-radius: 50%; border-top-right-radius: 50%; left: 295px; 
             top: 40px; }
.hair-left { position: absolute; background: linear-gradient(to bottom, #f7e034, #c751db); top: 90px;
             width: 24px; left: 295px; height: 250px; border-bottom-left-radius: 25px;
             border-bottom-right-radius: 25px; }
.hair-right { position: absolute; background: linear-gradient(to bottom, #f7e034, #c751db); top: 90px;
             width: 24px; right: 296px; height: 250px; border-bottom-left-radius: 25px; 
             border-bottom-right-radius: 25px; }
.hair-back { position: absolute; background: linear-gradient(0deg, #f7e034, #c751db); width: 149px;
             top: 90px; height: 250px; left: 295px; z-index: -1; border-bottom-left-radius: 25px; 
             border-bottom-right-radius: 25px; }

.bow-left { position: absolute; border-top: 25px solid transparent; border-left: 30px solid #9e4fff; 
            border-bottom: 25px solid transparent; top: 35px; z-index: 1000; left: 285px; }
.bow { border-radius: 50%; background-color: #9e4fff; width: 20px; height: 20px; position: absolute; 
       left: 295px; top: 50px; z-index: 1000; }
.bow-right { position: absolute; border-top: 25px solid transparent; border-right: 30px solid #9e4fff; 
            border-bottom: 25px solid transparent; top: 35px; z-index: 1000; left: 295px; }