zombie flexbox exercise 1.1

index.html

<div class="crossbow">
  <div class="zombie boy"></div>
  <div class="zombie girl"></div>
  <div class="zombie boy"></div>
</div>





















<!-- NO PEEKING below this line! -->

<div class="crossbow-icon"></div>

<div class="projections">
  <div class="projection"></div>
  <div class="projection girl"></div>
  <div class="projection"></div>  
</div>

<div class="instructions">The zombies are coming. Your crossbow is projecting their weakness. Take 'em out by setting your crossbow's <b>justify laser</b> to the correct setting. </div>

<div class="next">After you match them up, advance to the <a href="">next wave.<a/></div>
     
<div class="reference">Part of the <a href="http://gedd.ski/master/flexbox/">Zombie Flexbox Story Course</a> by geddski. copyright © 2016-2042</div>

style.css

.crossbow {
  /* power on the crossbow */
  display: flex;
  
  /* point it to the right */
  flex-direction: flex-row;
  
  
  /* set justify laser to the zombies' weakness */
  justify-content: ?;
}























/* NO PEEKING below this line! */

body *{
  box-sizing: border-box;
}

.zombie {
  box-sizing: border-box;
  height: 200px;
  width: 145px;
  background-repeat: no-repeat;
  z-index: 2;
}

.zombie.boy{
  background-image: url(http://gedd.ski/flexbox/zombie-boy.svg);
  background-size:137px;
  background-position: 0px 2px;
}

.zombie.girl {
  background-image: url(http://gedd.ski/flexbox/zombie-girl.svg);
  background-size: 141px;
  background-position: 2px 5px;
}


.projections{
  flex-direction: flex-row;
  justify-content: space-around;
  z-index: 1;
}

.projections, .crossbow{
  display: flex;
  width: 800px;
  height: 200px;
  position: absolute;
  top: 155px;
  left: 120px;
}

.crossbow{
  background-image: url(http://gedd.ski/flexbox/justify-laser.svg);
  background-repeat: no-repeat;
  background-position: center;
  width: 800px;
  height: 200px;
  background-color: #E4E1EE;
}


.projection {
  box-sizing: border-box;
  height: 200px;
  width: 145px;
  background-image: url(http://gedd.ski/flexbox/boy-outline.svg);
  background-size:149px;
  background-repeat: no-repeat;
  background-position: -12px -10px;
  background-color: rgba(179, 177, 188, .3);
  border: 3px solid #B3B1BC;
}

.projection.girl{
  background-image: url(http://gedd.ski/flexbox/girl-outline.svg);
  background-size:152px;
  background-position: -4px -4px;
}

.crossbow-icon{
  background-image: url(http://gedd.ski/flexbox/crossbow.svg);
  background-size: contain;
  background-repeat: no-repeat;
  width: 100px;
  height: 110px;
  position: absolute;
  top: 200px;
  left: 20px;
}

.reference{
  position: absolute;
  bottom: 10px;
  right: 10px;
  color: #ccc;
}

.instructions{
  font-size: 24px;
  margin-left: 15px;
  margin-top: 15px;
}

.next{
  margin-left: 15px;
  margin-top: 5px;
}

.next a{
  color: #ff0066;
  font-weight: bold;
}

zombie-flexbox-exercise-1-1.markdown

zombie flexbox exercise 1.1

A Pen by Dave Geddes on CodePen.

License.