#dailycssimages 45 - Space Mascot

dailycssimages-45-space-mascot.markdown

#dailycssimages 45 - Space Mascot

A Pen by Carolyn Cochran on CodePen.

License.

index.html

<div class="container">
  <div class="sloth">
    <div class="head">
      <div class="face">
        <div class="left-eye eyepatch">
          <div class="eye">
            <div class="iris"></div>
          </div>
        </div>
        <div class="right-eye eyepatch">
          <div class="eye">
            <div class="iris"></div>
          </div>
        </div>
        <div class="nose"></div>
        <div class="mouth"></div>
      </div>
    </div>
    <div class="helmet"></div>
    <div class="collar"></div>
    <div class="suit">
      <div class="body"></div>
      <div class="left-arm arm">
        <div class="left-hand hand">
<!--           <div class="left-claws">
            <div class="claw"></div>
            <div class="claw"></div>
            <div class="claw"></div>
          </div> -->
        </div>
      </div>
      <div class="right-arm arm">
        <div class="right-hand hand">
<!--           <div class="right-claws">
            <div class="claw"></div>
            <div class="claw"></div>
            <div class="claw"></div>
          </div> -->
        </div>
      </div>
      <div class="crotch"></div>
      <div class="crotch-spacer"></div>
      <div class="left-leg leg">
<!--         <div class="left-toes">
          <div class="claw"></div>
          <div class="claw"></div>
          <div class="claw"></div>
        </div> -->
        <div class="left-knee knee"></div>
      </div>
      <div class="right-leg leg">
<!--         <div class="right-toes">
          <div class="claw"></div>
          <div class="claw"></div>
          <div class="claw"></div>
        </div> -->
<!--         <div class="right-knee knee"></div> -->
      </div>
      <div class="airpack"></div>
    </div>
  </div>
</div>

script.js

// Source: https://ih0.redbubble.net/image.215244424.3200/mug,standard,420x460,center-pad,420x460,f8f8f8.jpg

// Source: http://ih0.redbubble.net/image.208490763.9756/sticker,375x360-bg,ffffff.jpg

style.css

* {
  box-sizing: border-box;
}

body {
  background-color: #C2C7DC;
}

.sloth {
  width: 40em;
  height: 40em;
  margin: 0 auto;
  position: relative;
}

.head {
  position: relative;
  width: 10em;
  height: 7em;
  background-color: #CAA585;
  border-radius: 45%;
  margin: 5em auto;
}

.face {
  position: relative;
  width: 7em;
  height: 4em;
  background-color: #ECD8C4;
  border-radius: 45%;
  top: 1.5em;
  left: 1.5em;
}

.eyepatch {
  position: relative;
  width: 2em;
  height: 2.5em;
  background-color: #6C523A;
  border-radius: 45%;
}

.left-eye {
  position: relative;
  top: 0.9em;
  left: 1em;
  -webkit-transform: rotate(20deg);
      -ms-transform: rotate(20deg);
          transform: rotate(20deg);
}

.right-eye {
  position: relative;
  top: -1.6em;
  left: 4em;
  -webkit-transform: rotate(-20deg);
      -ms-transform: rotate(-20deg);
          transform: rotate(-20deg);
}

.eye {
  width: 0.7em;
  height: 0.7em;
  position: relative;
  background-color: black;
  border-radius: 50%;
}

.left-eye .eye {
  top: 0.6em;
  left: 0.6em;
}

.right-eye .eye {
  top: 0.6em;
  left: 0.6em;
}

.nose {
  position: relative;
  width: 1em;
  height: 0.5em;
  background-color: black;
  border-radius: 45%;
  top: -2.5em;
  left: 3em;
}

.mouth {
  width: 2em;
  height: 2em;
  border: 0.2em solid black;
  border-radius: 50%;
  position: relative;
  border-top-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
  top: -4em;
  left: 2.5em;
}

.helmet {
  position: relative;
  width: 15em;
  height: 10em;
  border: 0.2em solid black;;
  border-radius: 45%;
  margin: 5em auto;
  top: -15em;
}

.collar {
  position: relative;
  width: 5em;
  height: 0.5em;
  background-color: red;
  border-radius: 5em;
  margin: 0 auto;
  top: -20em;
}

.suit {
  position: relative;
  top: -20em;
  left: 16.5em;
}

.body {
  position: relative;
  width: 7em;
  height: 8em;
  background-color: snow;
  border-bottom: 0.5em solid red;
}

.arm {
  position: relative;
  background-color: snow;
  width: 3em;
  height: 3.5em;
  border-top: 0.5em solid red;
  border-bottom: 0.5em solid red;
}

.left-arm {
  -webkit-transform: rotate(80deg);
      -ms-transform: rotate(80deg);
          transform: rotate(80deg);
  position: relative;
  top: -8em;
  left: -3em;
}

.right-arm {
  -webkit-transform: rotate(-80deg);
      -ms-transform: rotate(-80deg);
          transform: rotate(-80deg);
  position: relative;
  top: -11.5em;
  left: 7em;
}

.hand {
  position: relative;
  height: 2em;
  width: 3em;
  overflow: hidden;
}

.hand:before {
  content: '';
  position: absolute;
  height: 3em;
  width: 3em;
  border-radius: 50%;
  bottom: 0;
  background: snow;
}

.left-hand {
  top: 3em;
  position: relative;
}

.left-claws {
  position: relative;
  top: 1em;
  left: 0.5em;
}

.right-hand {
  top: 3em;
  position: relative;
}

.crotch {
  position: relative;
  width: 7em;
  height: 4em;
  background-color: snow;
  top: -7em;
  border-bottom: 0.5em solid red;
}

.crotch-spacer {
  position: relative;
  width: 3em;
  height: 5em;
  border-radius: 50%;
  background-color: #C2C7DC;
  top: -9.5em;
  left: 2em;
}

.leg {
  position: relative;
  height: 4em;
  width: 2em;
  overflow: hidden;
}

.leg:before {
  content: '';
  position: absolute;
  height: 6em;
  width: 2em;
  border-radius: 50%;
  bottom: 0;
  background: snow;
}

.left-leg {
  position: relative;
  top: -12em;
}

.right-leg {
  postion: relative;
  top: -16em;
  left: 5em;
}

/* .claw {
  position: relative;
  width: 0;
	height: 0;
	border-left: 5em solid transparent;
	border-right: 5em solid transparent;
	border-top: 5em solid snow;
}

.left-toes {
  position: relative;
  top: 5em;
  left: -10em;
  width: 3em;
  height: 4em;
} */

/* .left-toes > .claw:nth-child(1) {
  top: 30em;
  left: -5em;
}

.left-toes > .claw:nth-child(2) {
  top: 3em;
  left: -5em;
  position: relative;
}

.left-toes > .claw:nth-child(3) {
  top: 3em;
  left: -5em;
  position: relative;
} */

.airpack {
  width: 3em;
  height: 8em;
  background-color: #f2f2f2;
  position: relative;
  top: -34em;
  left: 5em;
  z-index: -1;
/*   box-shadow: 2px 2px 5px rgba(0,0,0,0.2); */
}