purple_ghost

COVID-19 Ready Boy Design

<!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="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>

<p>stay safe!</p>
  <h1>COVID-19 Ready Boy</h1>
</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; font-family: "Roboto"; }
/* Design Human Base */
.person * { display: block; overflow: hidden; }

.head { margin-top: 50px!important; background-color: #b0642e; border-radius: 50%; width: 150px; height: 150px; 
        margin: auto; }
.arms { position: absolute; top: 222px; background-color: #b0642e; width: 25px; height: 240px; }
.hands { position: absolute; top: 422px; background-color: #b0642e; width: 59px; height: 40px; 
         border-radius: 50%; }
.legs { position: absolute; background-color: #b0642e; width: 25px; height: 240px; }
.feet { position: absolute; background-color: black; 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: #19A337; width: 10px; height: 10px; border-radius: 50%; }
.neck { background-color: #b0642e; width: 20px; height: 20px; margin: auto; }
.body { background-color: #b0642e; 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: 13px; width: 5px; background-color: #469915; border-left: 1px solid #bfbfbf; 
              border-right: 1px solid #bfbfbf; position: absolute; z-index: 1000; }
.mst { top: 96px; height: 72px; }
.msb { top: 184px; }
.mtsl { transform: rotate(-44deg); left: 323px; }
.mtsr { transform: rotate(44deg); right: 323px; }
.mbsl { transform: rotate(44deg); left: 330px; }
.mbsr { transform: rotate(-44deg); right: 330px; }
.mask { border-radius: 5px; background-color: #469915; border: 1px solid #bfbfbf; width: 70px; height: 50px;
        position: absolute; left: 50%; transform: translateX(-50%); z-index: 1000; top: 140px; }

.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: maroon; height: 40px; }
.short-left { position: absolute; width: 25px; background-color: maroon; height: 200px; left: 311px; }
.short-right { position: absolute; width: 25px; background-color: maroon; height: 200px; right: 311px; }

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

.hair-base { background: black; width: 151px; height: 60px; position: absolute; top: 40px; left: 295px;
             border-top-left-radius: 50%; border-top-right-radius: 50%; }

h1 { position: absolute; bottom: 5%; left: 50%; transform: translateX(-50%); color: #6c9c25; font-weight: bold; }
p { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); color: white; 
    text-transform: uppercase; z-index: 1000; font-weight: bolder; }