purple_ghost

COVID-19 Ready Girl Design

@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: #ffee70; border-radius: 50%; width: 150px; height: 150px; 
        margin: auto; }
.arms { position: absolute; top: 222px; background-color: #ffee70; width: 25px; height: 240px; }
.hands { position: absolute; top: 422px; background-color: #ffee70; width: 59px; height: 40px; 
         border-radius: 50%; }
.legs { position: absolute; background-color: #ffee70; 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: #ffee70; width: 20px; height: 20px; margin: auto; }
.body { background-color: #ffee70; 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: #f58d42; 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: #f58d42; top: 90px;
             width: 24px; left: 295px; height: 250px; border-bottom-left-radius: 25px;
             border-bottom-right-radius: 25px; }
.hair-right { position: absolute; background: #f58d42; top: 90px;
             width: 24px; right: 296px; height: 250px; border-bottom-left-radius: 25px; 
             border-bottom-right-radius: 25px; }
.hair-back { position: absolute; background: #f58d42; 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; }

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; }