#dailycssimages 48 - Craft Beer

dailycssimages-48-craft-beer.markdown

#dailycssimages 48 - Craft Beer

A Pen by Carolyn Cochran on CodePen.

License.

index.html

<div class="container">
  <div class="sticker">
    <div class="glass">
      <div class="foam">
        <div class="drip-1"></div>
        <div class="drip-2"></div>
        <div class="drip-3"></div>
        <div class="drip-4"></div>
      </div>
      <div class="streaks"></div>
      <div class="handle">
        <div class="inner-handle"></div>
      </div>
    </div>
    <div class="hops">
      <div class="left-hop">
        <div class="bottom-left"></div>
        <div class="bottom-right"></div>
        <div class="middle-left"></div>
        <div class="middle-right"></div>
        <div class="top"></div>
      </div>
      <div class="right-hop">
        <div class="bottom-left"></div>
        <div class="bottom-right"></div>
        <div class="middle-left"></div>
        <div class="middle-right"></div>
        <div class="top"></div>
      </div>
    </div>
  </div>
</div>

script.js

// Sources:

// https://d13yacurqjgara.cloudfront.net/users/785647/screenshots/2132371/beer-icon-kevin-engle.png

// http://www.iconninja.com/files/859/274/503/jar-of-beer-icon.svg

// https://d13yacurqjgara.cloudfront.net/users/146798/screenshots/2109789/free_icons.png

// https://d13yacurqjgara.cloudfront.net/users/602602/screenshots/1634824/honey-beer_1x.jpg

// https://www.google.com/imgres?imgurl=https%3A%2F%2Fimage.flaticon.com%2Fsprites%2Fnew_packs%2F126601-beer-set.png&imgrefurl=http%3A%2F%2Fwww.flaticon.com%2Ffree-icons%2Fbeer_1296&docid=BZSv2Vd6WV2laM&tbnid=j_OraLym_EVleM%3A&vet=10ahUKEwikpZiNx_zSAhWQ0YMKHWpmD28QMwh_KB0wHQ..i&w=600&h=564&bih=776&biw=1265&q=beer%20icon&ved=0ahUKEwikpZiNx_zSAhWQ0YMKHWpmD28QMwh_KB0wHQ&iact=mrc&uact=8#h=564&imgrc=j_OraLym_EVleM:&vet=10ahUKEwikpZiNx_zSAhWQ0YMKHWpmD28QMwh_KB0wHQ..i&w=600

// https://d30y9cdsu7xlg0.cloudfront.net/png/27515-200.png

// http://bonbright.com/img/ingredients_iconRow.png

style.css

* { 
  -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
      box-sizing: border-box; 
}

body {
  background-color: #556270;
}

.sticker {
  width: 400px;
  height: 400px;
  background-color: #FFF9E8;
  border-radius: 10%;
  transform: rotate(45deg);
    -ms-transform: rotate(45deg);
      -webkit-transform: rotate(45deg); 
  top: 20%;
  left: 30%;
  position: absolute;
  border: 4px solid #7AB317;
}

.glass {
  position: absolute;
  width: 130px;
  height: 200px;
  background-color: #FDBC7B;
  transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
      -webkit-transform: rotate(-45deg); 
  top: 21%;
  left: 30%;
  border-radius: 10%;
  border: 5px solid black;
}

.foam {
  position: relative;
  width: 120px;
  height: 30px;
  background-color: snow;
  border-radius: 15%;
}

.drip-1 {
  position: relative;
  background-color: snow;
  width: 30px;
  height: 40px;
  top: 60%;
  border-radius: 4em;
  border-bottom: 5px solid black;
}

.drip-2 {
  position: relative;
  background-color: snow;
  width: 30px;
  height: 90px;
  left: 25%;
  top: -80%;
  border-radius: 4em;
  border-bottom: 5px solid black;
}

.drip-3 {
  position: relative;
  background-color: snow;
  width: 30px;
  height: 40px;
  left: 50%;
  top: -380%;
  border-radius: 4em;
  border-bottom: 5px solid black;
}

.drip-4 {
  position: relative;
  background-color: snow;
  width: 30px;
  height: 50px;
  left: 75%;
  top: -500%;
  border-radius: 4em;
  border-bottom: 5px solid black;
}

.streaks {
  position: relative;
  width: 50px;
  height: 80px;
  border-left: 5px solid black;
  border-right: 5px solid black;
  top: 44%;
  left: 30%;
}

.handle {
  position: relative;
  width: 50px;
  height: 120px;
  border: 5px solid black;
  border-radius: 10%;
  left: 100%;
  top: -40%;
  background-color: snow;
}

.inner-handle {
  position: relative;
  width: 33px;
  height: 87px;
  border: 5px solid black;
  border-radius: 10%;
  left: -5%;
  top: 11%;
  background-color: #FFF9E8;
}

.hops {
  position: absolute;
  width: 200px;
  height: 100px;
  transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
      -webkit-transform: rotate(-45deg);
  top: 60%;
  left: 50%;
}

.left-hop {
  position: relative;
  width: 80px;
  height: 80px;
  transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
      -webkit-transform: rotate(-45deg);
}

.bottom-left, .bottom-right {
  width: 35px;
  height: 35px;
  background-color: #7AB317;
  border-radius:  75% 15%;
  transform: rotate(90deg);
    -ms-transform: rotate(90deg);
      -webkit-transform: rotate(90deg);
  position: absolute;
  z-index: 3;
  border: 4px solid black;
}

.bottom-left {
  top: 50%;
  left: 10%;
}

.bottom-right {
  top: 51%;
  left: 50%;
  transform: rotate(180deg);
    -ms-transform: rotate(180deg);
      -webkit-transform: rotate(180deg);
/*   -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH"; */
}

.middle-left, .middle-right {
  width: 30px;
  height: 30px;
  background-color: #7AB317;
  border-radius:  75% 15%;
  transform: rotate(90deg);
    -ms-transform: rotate(90deg);
      -webkit-transform: rotate(90deg);
  position: absolute;
  z-index: 2;
  border: 4px solid black;
}

.middle-left {
  top: 35%;
  left: 10%;
}

.middle-right {
  top: 35%;
  left: 55%;
  transform: rotate(180deg);
    -ms-transform: rotate(180deg);
      -webkit-transform: rotate(180deg);
}

.top {
  width: 35px;
  height: 35px;
  background-color: #7AB317;
  border-radius:  75% 15%;
  transform: rotate(135deg);
    -ms-transform: rotate(135deg);
      -webkit-transform: rotate(135deg);
  position: absolute;
  z-index: 2;
  left: 30%;
  top: 25%;
  border: 4px solid black;
/*   z-index: 1; */
}

.right-hop {
  position: relative;
  width: 80px;
  height: 80px;
  transform: rotate(45deg);
    -ms-transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
  left: 50%;
  top: -80%;
}