#dailycssimages 42 - Cute Critter

dailycssimages-42-cute-critter.markdown

#dailycssimages 42 - Cute Critter

A Pen by Carolyn Cochran on CodePen.

License.

index.html

<div class="container">
  <div class="penguin">
    <div class="body">
      <div class="face">
        <div class="left-eye"></div>
        <div class="right-eye"></div>
        <div class="left-eyeball"></div>
        <div class="right-eyeball"></div>
        <div class="beak"></div>
        <div class="divider"></div>
      </div>
      <div class="belly">
        <div class="shadow"></div>
      </div>
    </div>
    <div class="left-wing"></div>
    <div class="right-wing"></div>
    <div class="left-foot"></div>
    <div class="right-foot"></div>
  </div>
</div>

script.js

// Source: data:image/jpeg;base64,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

style.css

* {
  box-sizing: border-box;
}

body {
  background-color: aliceblue;
}

.penguin {
  position: absolute;
  top: 2em; 
  left: 2em;
  width: 30em;
  height: 30em;

}

.body {
  width: 15em;
  height: 20em;
  background-color: black;
  position: absolute;
  border-top-left-radius: 7em;
  border-top-right-radius: 7em;
  border-bottom-left-radius: 6em;
  border-bottom-right-radius: 6em;
  top: 3em;
  left: 5em;
}

.face {
  position: absolute;
}

.left-eye {
  position: relative;
  width: 6em;
  height: 8em;
  background-color: snow;
  border-radius: 3em;
  left: 2em;
  top: 4em;
}

.left-eyeball {
  width: 2em;
  height: 2em;
  border: 0.2em solid black;
  border-radius: 50%;
  position: relative;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
  top: -10em;
  left: 4em;
  z-index: 2;
}

.right-eye {
  position: relative;
  width: 6em;
  height: 8em;
  background-color: snow;
  border-radius: 3em;
  left: 7em;
  top: -4em;
}

.right-eyeball {
  width: 2em;
  height: 2em;
  border: 0.2em solid black;
  border-radius: 50%;
  position: relative;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
  top: -12em;
  left: 9em;
  z-index: 2;
}

.beak {
  position: relative;
  width: 1.5em;
  height: 1.5em;
  transform: rotate(45deg);
  background-color: gold;
  top: -13em;
  left: 6.7em;
}

.divider {
  position: relative;
  width: 2em;
  height: 0.2em;
  background-color: black;
  top: -13.8em;
  left: 6.5em;
}

.belly {
  position: absolute;
  background-color: snow;
  width: 11em;
  height: 9.5em;
  top: 9em;
  left: 2em;
  border-bottom-left-radius: 5em;
  border-bottom-right-radius: 5em;
/*   box-shadow: inset 5px 40px -40px rgba(0,0,0,0.9);
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent; */
}

/* .shadow {
  position: relative;
  width: 10em;
  height: 5em;
  border-bottom-left-radius: 5em;
  border-bottom-right-radius: 3em;
  border-top-color: transparent;
  border-right-color: transparent;
  left: 0.5em;
  top: 4em;
  box-shadow: 0 15px 20px -20px rgba(0,0,0,0.9);
} */

.left-wing {
  width: 2em;
  height: 5em;
  position: relative;
  background-color: black;
  transform: rotate(45deg);
  border-bottom-left-radius: 2em;
  top: 14em;
  left: 3em;
}

.right-wing {
  width: 2em;
  height: 5em;
  position: relative;
  background-color: black;
  transform: rotate(-45deg);
  border-bottom-right-radius: 2em;
  top: 9em;
  left: 20em;
}

.left-foot {
  width: 4.5em;
  height: 2em;
  position: relative;
  background-color: black;
  border-top-left-radius: 2em;
  border-bottom-left-radius: 1em;
  top: 11em;
  left: 5.2em;
  transform: rotate(-5deg);
}

.right-foot {
  width: 4.5em;
  height: 2em;
  position: relative;
  background-color: black;
  border-top-right-radius: 2em;
  border-bottom-right-radius: 1em;
  top: 9em;
  left: 15.5em;
  transform: rotate(5deg);
}