#dailycssimages 43 - Mascot Animal

dailycssimages-43-mascot-animal.markdown

#dailycssimages 43 - Mascot Animal

A Pen by Carolyn Cochran on CodePen.

License.

index.html

<div class="container">
  <h1>HI, BROOKLYN!</h1>
  <div class="pigeon">
    <div class="head">
      <div class="left-eye"></div> 
      <div class="right-eye"></div>
      <div class="bridge"></div>
      <div class="beak"></div>
    </div>
    <div class="neck"></div>
    <div class="body"></div>
    <div class="left-wing">
      <div class="stripe"></div>
    </div>
    <div class="right-wing flap">
      <div class="stripe"></div>
    </div>
    <div class="computer"></div>
    <div class="left-foot">
      <ul class="foot">
        <li class="toe"></li>
        <li class="toe"></li>
        <li class="toe"></li>
      </ul>
    </div>
    <div class="right-foot">
      <ul class="foot">
        <li class="toe"></li>
        <li class="toe"></li>
        <li class="toe"></li>
      </ul>
    </div>
  </div>
</div>

script.js

// Source: https://fast.customer.io/s/cio-mascot-hello-wave.gif

style.css

@import url('https://fonts.googleapis.com/css?family=Amatic+SC');

* {  
  box-sizing: border-box;
}

body {
  background-color: gainsboro;
}

.container {
  width: 40em;
  height: 40em;
  position: absolute;
  left: 2em;
  top: 2em;
}

h1 {
  font-family: 'Amatic SC', cursive;
  text-align: center;
  color: #8F8F8F;
}

.pigeon {
  width: 25em;
  height: 30em;
  margin: 0 auto;
}

.head {
  width: 10em;
  height: 12em;
  background-color: #7B858E;
  margin: 0 auto;
  border-top-left-radius: 4.5em;
  border-top-right-radius: 4.5em;
}

.left-eye {
  position: relative;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background-color: black;
  left: 3em;
  top: 4em;
}

.right-eye {
  position: relative;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background-color: black;
  left: 6em;
  top: 3em;
}

.bridge {
  position: relative;
  width: 0;
  height: 0;
  border-left: 1.3em solid transparent;
  border-right: 1.3em solid transparent;
  border-top: 1.3em solid #CECECE;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  left: 3.7em;
  top: 3em;
}

.beak {
  position: relative;
  width: 0;
  height: 0;
  border-left: 1em solid transparent;
  border-right: 1em solid transparent;
  border-top: 1.3em solid black;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  left: 4em;
  top: 2em;
}

.neck {
  width: 10.3em;
  height: 1em;
  background-color: #0E6666;
  margin: -0.2em auto;
  border-top-left-radius: 0.3em;
  border-top-right-radius: 0.3em;
  border-bottom-left-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
  z-index: 1;
  position: relative;
}

.body {
  width: 10.4em;
  height: 7em;
  background-color: #A9AEB5;
  margin: -0.5em auto;
  border-top-left-radius: 0.5em;
  border-top-right-radius: 0.5em;
  border-bottom-left-radius: 4.5em;
  border-bottom-right-radius: 4.5em;
}

.left-wing {
  width: 3em;
  height: 3em;
  border-radius: 50%;
  background-color: #CECECE;
  position: relative;
  left: 7.5em;
  top: -7em;
  z-index: 2;
}

.left-wing .stripe {
  width: 3em;
  height: 1em;
  background-color: black;
  position: relative;
  border-top-right-radius: 0.8em;
  border-top-left-radius: 0.8em;
  transform: rotate(-45deg);
  left: -0.3em;
  top: 0.7em;
}

.right-wing {
  width: 5em;
  height: 3em;
  border-bottom-right-radius: 4em;
  background-color: #CECECE;
  position: relative;
  left: 17em;
  top: -11em;
  z-index: -1;
}

.right-wing .stripe {
  width: 2.7em;
  height: 1em;
  background-color: black;
  position: relative;
  border-top-right-radius: 0.8em;
  border-top-left-radius: 0.2em;
  transform: rotate(90deg);
  left: 2em;
  top: 0.9em;
}

@-webkit-keyframes flap {
	0% {-webkit-transform:rotateZ(10deg);}
	50% {-webkit-transform:rotateZ(-10deg);}
	100% {-webkit-transform:rotateZ(10deg);}
}
 
@-moz-keyframes flap {
	0% {-moz-transform:rotateZ(10deg);}
	50% {-moz-transform:rotateZ(-10deg);}
	100% {-moz-transform:rotateZ(10deg);}
}
 
@keyframes flap {
	0% {transform:rotateZ(10deg);}
	50% {transform:rotateZ(-10deg);}
	100% {transform:rotateZ(10deg);}
}
 
.flap {
	-webkit-animation: flap 0.5s infinite;
	-moz-animation: flap 0.5s infinite;
	animation: flap 0.5s infinite;
}

.computer {
  width: 7em;
  height: 4em;
  background-color: #B5B5B5;
  position: relative;
  top: -14em;
  left: 9em;
  z-index: 3;
  box-shadow: -5px 5px 8px 0px rgba(0, 0, 0, 0.2);
}

.left-foot {
  position: relative;
  width: 5em;
  height: 2em;
  top: -12.5em;
  left: 9.7em;
}

.right-foot {
  position: relative;
  width: 5em;
  height: 2em;
  top: -14.5em;
  left: 13.5em;
}

.foot {
  position: relative;
  width: 3em;
  height: 1.5em;
  display: inline;
  padding: 0;
  margin: 0;
}

.toe {
  position: relative;
  width: 0.5em;
  height: 1em;
  background-color: #C43D55;
  border-radius: 5em;
  display: inline-block;
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.toe:nth-child(2) {
  left: -0.3em;
}

.toe:nth-child(3) {
  left: -0.6em;
}