#dailycssimages 13 - Taco

dailycssimages-13-taco.markdown

#dailycssimages 13 - Taco

A Pen by Carolyn Cochran on CodePen.

License.

index.html

<div class="container">
  <h1>TACOS</h1>
  <div class="pow"></div>
  <div class="shell"></div>
  <div class="back-shell"></div>
  <div class="shell-depth"></div>
  <div class="left-arm"></div>
  <div class="right-arm"></div>
  <div class="left-eye"></div>
  <div class="right-eye"></div>
  <div class="left-eye-shine-large"></div>
  <div class="left-eye-shine-small"></div>
  <div class="right-eye-shine-large"></div>
  <div class="right-eye-shine-small"></div>
  <div class="mouth"></div>
  <div id="meat">
    <span class="meat"></span>
    <span class="meat"></span>
    <span class="meat"></span>
    <span class="meat"></span>
    <span class="meat"></span>
    <span class="meat"></span>
  </div>
  <div id="cheese">
    <span class="cheese"></span>
    <span class="cheese"></span>
    <span class="cheese"></span>
  </div>

<h1>AWW YISS</h1>
  
</div>

style.css

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

* {
  box-sizing: border-box;
  font-family: 'Walter Turncoat', cursive;
  text-align: center;
}

body {
  background-color: gainsboro;
}

.container {
  width: 50em;
  height: 30em;
  margin-top: 5em;
  margin-left: 5em;
}

.pow {
  background: mediumspringgreen;
  width: 20em;
  height: 20em;
  position: relative;
  text-align: center;
  z-index: -1;
  top: 4em;
  left: 15em;
  margin-bottom: 8em;
  -webkit-animation: spin 10s infinite; /* Safari 4+ */
  -moz-animation:    spin 10s infinite; /* Fx 5+ */
  -o-animation:      spin 10s infinite; /* Opera 12+ */
  animation:         spin 10s infinite; /* IE 10+, Fx 29+ */
}

.pow:before, .pow:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 20em;
  width: 20em;
  z-index: -1;
  
  -webkit-animation: grow 1s infinite; /* Safari 4+ */
  -moz-animation:    grow 1s infinite; /* Fx 5+ */
  -o-animation:      grow 1s infinite; /* Opera 12+ */
  animation:         grow 1s infinite; /* IE 10+, Fx 29+ */
}

.pow:before {
  background: lightgreen;
  -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -o-transform: rotate(30deg);
  
  -webkit-animation: grow 1s infinite; /* Safari 4+ */
  -moz-animation:    grow 1s infinite; /* Fx 5+ */
  -o-animation:      grow 1s infinite; /* Opera 12+ */
  animation:         grow 1s infinite; /* IE 10+, Fx 29+ */
}

.pow:after {
  background: springgreen;
  -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -o-transform: rotate(60deg);
}

@-webkit-keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@-moz-keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@-o-keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes grow {
  from {
    width: 20em;
    height: 20em;
  }
  to {
    width: 22em;
    height: 22em;
  }
}

@-moz-keyframes grow {
  from {
    width: 20em;
    height: 20em;
  }
  to {
    width: 22em;
    height: 22em;
  }
}

@-o-keyframes grow {
  from {
    width: 20em;
    height: 20em;
  }
  to {
    width: 22em;
    height: 22em;
  }
}

@keyframes grow {
  from {
    width: 20em;
    height: 20em;
  }
  to {
    width: 22em;
    height: 22em;
  }
}

.shell {
  position: absolute;
  z-index: 1;
  margin-top: -20em;
  margin-left: 15em;
  width: 20em;
  height: 10em;
  background-color: lemonchiffon;
  border-top-left-radius: 100em;
  border-top-right-radius: 100em;
  border-bottom: 0;
}

.back-shell {
  position: absolute;
  z-index: -1;
  margin-top: -21em;
  margin-left: 16em;
  width: 20em;
  height: 10em;
  background-color: palegoldenrod;
  border-top-left-radius: 100em;
  border-top-right-radius: 100em;
  border-bottom: 0;
}

.shell-depth {
  width: 1.5em;
  height: 1.5em;
  background-color: palegoldenrod;
  position: absolute;
  z-index: -1;
  margin-top: -11.8em;
  margin-left: 34.2em;
  transform: rotate(40deg);
}

.meat {
  position: absolute; 
  z-index: 0;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
}

.meat:nth-child(1) {
  background-color: sienna;
  margin-top: -17.4em;
  margin-left: 7.5em;
}

.meat:nth-child(2) {
  background-color: saddlebrown;
  margin-top: -16.4em;
  margin-left: 8.2em;
}

.meat:nth-child(3) {
  background-color: sienna;
  margin-top: -15.4em;
  margin-left: 8.7em;
}

.meat:nth-child(4) {
  background-color: saddlebrown;
  margin-top: -14.4em;
  margin-left: 9.1em;
}

.meat:nth-child(5) {
  background-color: sienna;
  margin-top: -13.4em;
  margin-left: 9.3em;
}

.meat:nth-child(6) {
  background-color: saddlebrown;
  margin-top: -12.4em;
  margin-left: 9.5em;
}

.cheese {
  position: absolute; 
  z-index: 0;
  width: 2em;
  height: .5em;
  border-radius: 2px;
}

.cheese:nth-child(1) {
  background-color: gold;
  margin-top: -17.4em;
  margin-left: 6.8em;
  transform: rotate(10deg);
}

.cheese:nth-child(2) {
  background-color: gold;
  margin-top: -18em;
  margin-left: 6.5em;
  transform: rotate(-5deg);
}

.cheese:nth-child(3) {
  background-color: gold;
  margin-top: -18.6em;
  margin-left: 5.7em;
  transform: rotate(5deg);
}

.left-arm {
  width: 7em;
  height: 7em;
  position: absolute;
  border-left: 5px solid black;
  border-bottom: 5px solid black;
  margin-top: -21em;
  margin-left: 12em;
  transform: rotate(40deg);
}

.right-arm {
  width: 7em;
  height: 7em;
  position: absolute;
  border-left: 5px solid black;
  border-bottom: 5px solid black;
  margin-top: -21em;
  margin-left: 30em;
  transform: rotate(-140deg);
}

.left-eye {
  width: 2em;
  height: 2em;
  background-color: black;
  border-radius: 50%;
  position: absolute;
  z-index: 2;
  margin-top: -16em;
  margin-left: 20em;
}

.left-eye-shine-large {
  width: 1em;
  height: 1em;
  background-color: white;
  border-radius: 50%;
  position: absolute;
  z-index: 2;
  margin-top: -15.7em;
  margin-left: 20.2em;
}

.left-eye-shine-small {
  width: 0.5em;
  height: 0.5em;
  background-color: white;
  border-radius: 50%;
  position: absolute;
  z-index: 2;
  margin-top: -15em;
  margin-left: 21.2em;
}

.right-eye {
  width: 2em;
  height: 2em;
  background-color: black;
  border-radius: 50%;
  position: absolute;
  z-index: 2;
  margin-top: -16em;
  margin-left: 27em;
}

.right-eye-shine-large {
  width: 1em;
  height: 1em;
  background-color: white;
  border-radius: 50%;
  position: absolute;
  z-index: 2;
  margin-top: -15.7em;
  margin-left: 27.2em;
}

.right-eye-shine-small {
  width: 0.5em;
  height: 0.5em;
  background-color: white;
  border-radius: 50%;
  position: absolute;
  z-index: 2;
  margin-top: -15em;
  margin-left: 28.2em;
}



.mouth {
  position: absolute;
  z-index: 1;
  margin-top: -13em;
  margin-left: 22em;
  width: 5em;
  height: 2.5em;
  background-color: pink;
  border-bottom-left-radius: 100em;
  border-bottom-right-radius: 100em;
  border-bottom: 0;
}