#dailycssimages 25 - Captain America

dailycssimages-25-captain-america.markdown

#dailycssimages 25 - Captain America

A Pen by Carolyn Cochran on CodePen.

License.

index.html

<div class="container">
  <div class="cap">
    <div class="head"></div>
    
    <div class="helmet">
      <div class="left-patch"></div>
      <div class="right-patch"></div>
    </div>
    
    <div class="a">A</div>
    <div class="left-eye"></div>
    <div class="right-eye"></div>
    <div class="smile"></div>
    <div class="chin-strap">
      <div class="pad"></div>
    </div>
    <div class="left-ear"></div>
    <div class="right-ear"></div>
    <div class="left-wing"></div>
    <div class="right-wing"></div>
    <div class="body"></div>
    <svg height="40" width="38" class="shirt-star" data-rating="1">
      <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78" style="fill-rule:nonzero;"/>
    </svg>
    <div class="stripes">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <div class="belt"></div>
    <div class="buckle"></div>
    <div class="left-suspender"></div>
    <div class="right-suspender"></div>
    <div class="left-arm"></div>
    <div class="left-hand"></div>
    <div class="right-arm"></div>
    <div class="right-hand"></div>
    <div class="shield"></div>
    <div class="shield-two"></div>
    <div class="shield-three"></div>
    <div class="shield-four"></div>
    <svg height="40" width="38" class="shield-star" data-rating="1">
      <polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78" style="fill-rule:nonzero;"/>
    </svg>
    <div class="left-leg"></div>
    <div class="left-foot"></div>
    <div class="crotch"></div>
    <div class="right-leg"></div>
    <div class="right-foot"></div>
  </div>
</div>

script.js

// Source: https://d13yacurqjgara.cloudfront.net/users/228053/screenshots/2502273/captain-america-3_teaser.jpg

style.css

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

* {
  box-sizing: border-box;
}

body {
  background-color: gainsboro;
}

.container {
  width: 40em;
  height: 40em;
  margin: 5em auto;

}

.cap {
  
}

.head {
  width: 10em;
  height: 10em;
  border-radius: 50%;
  position: absolute;
  background-color: #FDE1D6;
  top: 8em;
  left: 25em;
  border: 0.3em solid black;
}

.blue-helmet {
  position: absolute;
  top: 3em;
  left: 14em;
}

.helmet {
  width: 9.8em;
  height: 5em;
  position: absolute;
  background-color: #66CDCC;
  border-top-left-radius: 100em;
  border-top-right-radius: 100em;
  border-bottom: 0;
  top: 8em;
  left: 25.1em;
  z-index: 6;
}

.left-patch {
  width: 4em;
  height: 6em;
  border-radius: 50%;
  position: absolute;
  background-color: #66CDCC;
  transform: rotate(50deg);
  top: 1.5em;
  left: 0.6em;
  z-index: 6;
/*   border: 1px solid black;
  border-top: transparent;
  border-left: transparent;
  border-bottom: transparent; */
}

.right-patch {
  width: 4em;
  height: 6em;
  border-radius: 50%;
  position: absolute;
  background-color: #66CDCC;
  transform: rotate(-50deg);
  top: 1.4em;
  left: 5.2em;
  z-index: 6;
/*   border: 1px solid black;
  border-top: transparent;
  border-right: transparent;
  border-bottom: transparent;
  border-left-bottom: transparent; */
}

.a {
  font-family: 'Chango', cursive;
  color: white;
  position: absolute;
  left: 8em;
  top: 2.4em;
  font-size: 3.5em;
  z-index: 7;
}

.left-eye {
  width: 1.5em;
  height: 1.5em;
  background-color: black;
  border-radius: 50%;
  position: absolute;
  left: 26.6em;
  top: 13em;
  z-index: 7;
}

.right-eye {
  width: 1.5em;
  height: 1.5em;
  background-color: black;
  border-radius: 50%;
  position: absolute;
  left: 32em;
  top: 13em;
  z-index: 7;
}

.smile {
  border: 2px solid #000;
  min-width: 2em;
  min-height: 2em;
  border-radius: 50%;
  border-right-color: transparent;
  border-left-color: transparent;
  border-top-color: transparent;
  position: absolute;
  margin-top: 8em;
  margin-left: 18em;
}

.chin-strap {
  position: absolute;
  width: 9.8em;
  height: 9.9em;
  z-index: 5;
  border-radius: 100%;
  border: 0.5em solid #9D7049;
  left: 25.1em;
  top: 8em;
}

.pad {
  position: absolute;
  width: 2em;
  height: 1em;
  z-index: 5;
/*   border: 0.1em solid black;
  border-bottom: transparent; */
  background-color: #9D7049;
  left: 3.5em;
  top: 8em;
}

.left-ear {
  width: 2em;
  height: 2em;
  border-radius: 50%;
  position: absolute;
  background-color: #FDE1D6;
  top: 12em;
  left: 24em;
  border: 0.1em solid black;
}

.right-ear {
  width: 2em;
  height: 2em;
  border-radius: 50%;
  position: absolute;
  background-color: #FDE1D6;
  top: 12em;
  left: 34em;
  border: 0.1em solid black;
}

.left-wing {
  display:block;
  width: 1.5em;
  height: 2.5em;
  background-color: white;
  border-radius:         50%  50%  50%  50%  / 60%   60%   40%  40%;
   -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
  transform: rotate(-30deg);
  position: absolute;
  left: 24em;
  top: 9.5em;
}

.right-wing {
  display:block;
  width: 1.5em;
  height: 2.5em;
  background-color: white;
  border-radius:         50%  50%  50%  50%  / 60%   60%   40%  40%;
   -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
  transform: rotate(30deg);
  position: absolute;
  left: 34.4em;
  top: 9.6em;
}

.body {
  position: absolute;
  width: 6em;
  height: 5em;
  background-color: #66CDCC;
  top: 17.1em;
  left: 27em;
  z-index: -1;
}

/*  .star {
  top: 20em;
  left: 30em;
  position: relative;
  display: block;
  width: 0px;
  height: 0px;
  border-right:  0.7em solid transparent;
   border-bottom: 0.5em  solid yellow;
   border-left:   0.7em solid transparent;
   -moz-transform:    rotate(35deg);
   -webkit-transform: rotate(35deg);
   -ms-transform:     rotate(35deg);
   -o-transform:      rotate(35deg);
}

.star:before {
   border-bottom: 0.8em solid red;
   border-left: 0.5em solid transparent;
   border-right: 0.5em solid transparent;
   position: absolute;
   height: 0;
   width: 0;
   top: -3.1em;
   left: -16.9em;
   display: block;
   content: '';
   -webkit-transform: rotate(-35deg);
   -moz-transform:    rotate(-35deg);
   -ms-transform:     rotate(-35deg);
   -o-transform:      rotate(-35deg);

}
.star:after {
   position: absolute;
   display: block;
   color: red;
   top: -3.2em;
   left: -16.4em;
   width: 0px;
   height: 0px;
   border-right: 0.7em solid transparent;
   border-bottom: 0.5em solid blue;
   border-left: 0.7em solid transparent;
   -webkit-transform: rotate(-70deg);
   -moz-transform:    rotate(-70deg);
   -ms-transform:     rotate(-70deg);
   -o-transform:      rotate(-70deg);
   content: '';
} 
 */
.stripes {
  position: relative;
  top: 15em;
  left: 15em;
}

ul {
  list-style-type: none;
  margin: 0;
  position: absolute;
}

li {
  position: absolute;
  width: 1em;
  height: 1.5em;
  display: inline;
  border: 0.1em solid black;
}

li:nth-child(1) {
  background-color: #FF5E59;
  left: 1em;
  position: absolute;
  border-right: transparent;
}

li:nth-child(2) {
  background-color: white;
  position: absolute;
  left: 2em;
  border-right: transparent;
}

li:nth-child(3) {
  background-color: #FF5E59;
  left: 3em;
  position: absolute;
  border-right: transparent;
}

li:nth-child(4) {
  background-color: white;
  position: absolute;
  left: 4em;
  border-right: transparent;
}

li:nth-child(5) {
  background-color: #FF5E59;
  left: 5em;
  position: absolute;
  border-right: transparent;
}

li:nth-child(6) {
  background-color: white;
  position: absolute;
  left: 6em;
}

.belt {
  width: 6em;
  height: 1em;
  border: 0.1em solid black;
  background-color: #9D7049;
  position: absolute;
  top: 21.6em;
  left: 27em;
}

.buckle {
  width: 1.5em;
  height: 1.5em;
  border: 0.1em solid black;
  background-color: #9D7049;
  position: absolute;
  top: 21.3em;
  left: 29.4em;
  z-index: 10;
}

.left-suspender {
  width: 0.5em;
  height: 3.1em;
  border: 0.1em solid black;
  background-color: #9D7049;
  position: absolute;
  top: 17em;
  left: 27em;
}

.right-suspender {
  width: 0.5em;
  height: 3.1em;
  border: 0.1em solid black;
  background-color: #9D7049;
  position: absolute;
  top: 17em;
  left: 32.5em;
}

.left-arm {
  width: 1.3em;
  height: 3.1em;
  border: 0.1em solid black;
  border-radius: 50%;
  background-color: #66CDCC;
  position: absolute;
  top: 17em;
  left: 26em;
  transform: rotate(20deg);
  z-index: -1;
}

.left-hand {
  width: 1em;
  height: 1em;
  position: absolute;
  background-color: #FF5E59;
  border-top-left-radius: 100em;
  border-top-right-radius: 100em;
  border-bottom: 0;
  border-bottom-color: 0.1em solid black;
  top: 19em;
  left: 25.8em;
  transform: rotate(195deg);
  z-index: 6;
}

.right-arm {
  width: 1.3em;
  height: 3.1em;
  border: 0.1em solid black;
  border-radius: 50%;
  background-color: #66CDCC;
  position: absolute;
  top: 17em;
  left: 32.7em;
  transform: rotate(-20deg);
  z-index: -2;
}

.right-hand {
  width: 1em;
  height: 1em;
  position: absolute;
  background-color: #FF5E59;
  border-top-left-radius: 100em;
  border-top-right-radius: 100em;
  border-bottom: 0;
  border-bottom-color: 0.1em solid black;
  top: 19em;
  left: 33.1em;
  transform: rotate(-195deg);
  z-index: 6;
}

.shield {
  width: 6em;
  height: 6em; 
  position: absolute;
  border-radius: 50%;
  background-color: #FF5E59;
  top: 18em;
  left: 30.5em;
  z-index: 20;
  border: 0.1em solid black;
}

.shield-two {
  width: 5em;
  height: 5em; 
  position: absolute;
  border-radius: 50%;
  background-color: white;
  top: 18.5em;
  left: 31em;
  z-index: 21;
  border: 0.1em solid black;
}

.shield-three {
  width: 4em;
  height: 4em; 
  position: absolute;
  border-radius: 50%;
  background-color: #FF5E59;
  top: 19em;
  left: 31.5em;
  z-index: 22;
  border: 0.1em solid black;
}

.shield-four {
  width: 3em;
  height: 3em; 
  position: absolute;
  border-radius: 50%;
  background-color: #66CDCC;
  top: 19.5em;
  left: 32em;
  z-index: 23;
  border: 0.1em solid black;
}

.shield-star {
/*   width: 20em;
  height: 15em; */
  position: absolute;
  fill: white;
  left: 32.9em;
  z-index: 24;
  top: 20.3em;
}

.shirt-star {
  position: absolute;
  fill: white;
  left: 29.5em;
  z-index: 24;
  top: 18.1em;
}

.left-leg {
  width: 2em;
  height: 4em;
  border: 0.1em solid black;
  border-top: transparent;
  border-radius: 50%;
  background-color: #66CDCC;
  position: absolute;
  top: 22em;
  left: 26.5em;
  transform: rotate(10deg);
  z-index: -1;
}

.right-leg {
  width: 2em;
  height: 4em;
  border: 0.1em solid black;
  border-top: transparent;
  border-radius: 50%;
  background-color: #66CDCC;
  position: absolute;
  top: 22em;
  left: 31.7em;
  transform: rotate(-10deg);
  z-index: -2;
}

.crotch {
  width: 3.5em;
  height: 2em;
  border: 0.1em solid black;
  border-left: transparent;
  border-right: transparent;
/*   border-radius: 50%; */
  background-color: #66CDCC;
  position: absolute;
  top: 22em;
  left: 28.3em;
  z-index: -1;
}

.left-foot {
  width: 1.8em;
  height: 2em;
  position: absolute;
  background-color: #FF5E59;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  border-bottom: 0;
  border-top: 0.1em solid black;
  top: 24em;
  left: 26.4em;
  transform: rotate(190deg);
  z-index: 6;
}

.right-foot {
  width: 1.8em;
  height: 2em;
  position: absolute;
  background-color: #FF5E59;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  border-bottom: 0;
  border-top: 0.1em solid black;
  top: 24em;
  left: 32em;
  transform: rotate(-190deg);
  z-index: 6;
}