Difference between revisions of "Team:British Columbia/Practices/Booth"

(Created page with "{{:Team:British Columbia/Template/Fixednavbar}} {{:Team:British Columbia/Lightbox_CSS}} {{:Team:British_Columbia/PracticesStylesheet}} <html> <body id="UBC"> <div class="bod"> ...")
 
Line 21: Line 21:
 
<div style="clear:both;"></div>
 
<div style="clear:both;"></div>
  
 +
<div class="card effect__EFFECT">
 +
  <div class="card__front">
 +
    <span class="card__text">front</span>
 +
  </div>
 +
  <div class="card__back">
 +
    <span class="card__text">back</span>
 +
  </div>
 +
</div><!-- /card -->
 
</div>
 
</div>
 
</div>
 
</div>
 +
<style>
 +
.card {
 +
  position: relative;
 +
  float: left;
 +
  padding-bottom: 25%;
 +
  width: 25%;
 +
  text-align: center;
 +
}
 +
 +
.card__front,
 +
.card__back {
 +
  position: absolute;
 +
  top: 0;
 +
  left: 0;
 +
  width: 100%;
 +
  height: 100%;
 +
}
 +
 +
.card__front,
 +
.card__back {
 +
  -webkit-backface-visibility: hidden;
 +
          backface-visibility: hidden;
 +
  -webkit-transition: -webkit-transform 0.3s;
 +
          transition: transform 0.3s;
 +
}
 +
 +
.card__front {
 +
  background-color: #ff5078;
 +
}
 +
 +
.card__back {
 +
  background-color: #1e1e1e;
 +
  -webkit-transform: rotateY(-180deg);
 +
          transform: rotateY(-180deg);
 +
}
 +
 +
.card.effect__click.flipped .card__front {
 +
  -webkit-transform: rotateY(-180deg);
 +
          transform: rotateY(-180deg);
 +
}
 +
 +
.card.effect__click.flipped .card__back {
 +
  -webkit-transform: rotateY(0);
 +
          transform: rotateY(0);
 +
}
 +
 +
</style>
 +
<script>
 +
(function() {
 +
  var cards = document.querySelectorAll(".card.effect__click");
 +
  for ( var i  = 0, len = cards.length; i < len; i++ ) {
 +
    var card = cards[i];
 +
    clickListener( card );
 +
  }
 +
 +
  function clickListener(card) {
 +
    card.addEventListener( "click", function() {
 +
      var c = this.classList;
 +
      c.contains("flipped") === true ? c.remove("flipped") : c.add("flipped");
 +
    });
 +
  }
 +
})();
 +
</script>
 
</html>
 
</html>
  
 
{{:Team:British Columbia/Template/Fixedfooter}}
 
{{:Team:British Columbia/Template/Fixedfooter}}

Revision as of 19:45, 4 September 2015

UBC iGEM 2015

 

Activity

 

Click here to return to the Policy and Practices Timeline

front
back