Spectre Ghost (CSS Image)

by Konstantin Rouda

HTML

<section class="c-canvas">
      <!--GHOST-->
      <div class="c-ghost">
        <div class="c-ghost__body">
          <div class="c-ghost__face">

            <div class="c-ghost__eye c-ghost__eye--left"></div>
            <div class="c-ghost__eye c-ghost__eye--right"></div>

            <div class="c-ghost__mouth"></div>
          </div>

          <!--Feet-->
          <div class="c-ghost__feet">
            <div class="c-ghost__foot c-ghost__foot--left"></div>
            <div class="c-ghost__foot c-ghost__foot--right"></div>        
          </div>

        </div> 

        <div class="c-ghost__arm c-ghost__arm--left">
          <span class="c-ghost__finger"></span>
          <span class="c-ghost__finger"></span>
          <span class="c-ghost__finger"></span>
        </div>
        <div class="c-ghost__arm c-ghost__arm--right">
          <span class="c-ghost__finger"></span>
          <span class="c-ghost__finger"></span>
          <span class="c-ghost__finger"></span>
        </div>

      </div>

      <!--Twig-->
      <div class="twig">
        <div class="twig__branch twig__branch--top"></div>
        <div class="twig__branch twig__branch--middle"></div>
        <div class="twig__branch twig__branch--bottom"></div> 
      </div>

    </section>




    <!-- <img src="https://www.howtogeek.com/wp-content/uploads/2018/03/img_5ab043d1f29b2.jpg.pagespeed.ce.7r6PuBTc6A.jpg" alt="" style="zoom: 1"> -->

CSS

HTML {
  /*using system font-stack*/
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 115%; /*~18px*/
  font-size: calc(16px + (30 - 16) * (100vw - 300px) / (1300 - 300) );
  line-height: 1.5;
  box-sizing: border-box;
}

BODY {
  margin: 0;
  color: #3a3d40;
  background-color: rgb(254, 255, 255);
  background-image: linear-gradient(to right, rgb(13, 54, 110), rgb(20, 82, 155), rgb(26, 102, 176), rgb(30, 123, 190), rgb(33, 131, 194), rgb(41, 137, 197), rgb(57, 146, 202), rgb(63, 146, 202));
}

*, *::before, *::after {
  box-sizing: inherit;
  color: inherit;
}

/*Actual Style*/


/*=================
C-Canvas
===================*/
.c-canvas {
  position: relative;
  width: 23.75000rem; /*~380px*/
  height: 21.25000rem; /*~340px*/
  margin: 3rem auto;
  /*   border: 1px solid; */
  /*   background-image: linear-gradient(to right, #186ab3, #1e7bbe, #2183c2, #2989c5, #3992ca, #3f92ca); */
}


/*===================
GHOST
=====================*/

.c-ghost {
  position: absolute;
  width: 90%;
  height: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: 0 auto;
  /*   border: 1px solid red; */
  z-index: 1;
}

/*===================
BODY
=====================*/

.c-ghost__body {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  margin: 0 auto;
  width: 55%; height: 70%;  
  border: 0.43750rem solid rgb(17, 103, 141); /*~7px*/
  border-bottom: none;
  border-radius: 85% / 70% 70% 0% 0%;
  background: #fff;
}

/*===================
FACE
=====================*/

.c-ghost__face {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  margin: 1.5rem auto;
  width: 80%; height: 60%;
  /*   border: 1px solid green; */
}

/*===================
EYES
=====================*/

.c-ghost__eye {
  position: absolute;
  top: 10%;
  width: 30%; height: 30%;
  border-radius: 50%;
  background: rgb(17, 103, 141);
  background-image: linear-gradient(200deg, #fff...

JavaScript

/*
Original image has been taken from:
https://www.howtogeek.com/346465/windows-spectre-patches-are-here-but-you-might-want-to-wait/
*/