Difference between revisions of "Team:Hong Kong HKUST/Team"

Line 3: Line 3:
 
<html>
 
<html>
 
  <body>
 
  <body>
−
<div class="row">
+
<div class="row cards">
−
   <div class="col-sm-4"><img src="https://static.igem.org/mediawiki/2017/5/56/HKUST_Alvin.png" class="img-responsive" width="500"></div>
+
   <div class="col-sm-4 cards__axis">
 +
    <figure class="cards__front">
 +
      <img src="https://static.igem.org/mediawiki/2017/5/56/HKUST_Alvin.png" alt=""/>
 +
      <figcaption class="cards__description--front">
 +
        <p>I'm priceless.</p>
 +
      </figcaption>
 +
    </figure>
 +
    <figure class="cards__back">
 +
      <img src="https://static.igem.org/mediawiki/2017/5/56/HKUST_Alvin.png" alt=""/>
 +
      <figcaption class="cards__description--back">
 +
        <p>Hello</p>
 +
      </figcaption>
 +
    </figure>
 +
  </div>
 
   <div class="col-sm-4"><img src="https://static.igem.org/mediawiki/2017/3/39/HKUST_Devi.png" class="img-responsive"></div>
 
   <div class="col-sm-4"><img src="https://static.igem.org/mediawiki/2017/3/39/HKUST_Devi.png" class="img-responsive"></div>
 
   <div class="col-sm-4"><img src="https://static.igem.org/mediawiki/2017/5/56/HKUST_Alvin.png" class="img-responsive"></div>
 
   <div class="col-sm-4"><img src="https://static.igem.org/mediawiki/2017/5/56/HKUST_Alvin.png" class="img-responsive"></div>
Line 15: Line 28:
  
 
</body>
 
</body>
 +
<style>
 +
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
 +
body { background: #333; font-family: 'Georgia', sans-serif; }
 +
h1 {  position: absolute; top: 150px; left: -115px; font-size: 1.25em; color: #fff; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg);}
 +
 +
 +
/* REUSABLE CSS3 "PLUGIN" CODE IF YOU WILL */
 +
.cards * {
 +
  width: 100%;
 +
}
 +
.cards__axis {
 +
position: relative;
 +
}
 +
.cards__axis:before {
 +
content: "";
 +
display: block;
 +
padding-top: 100%;
 +
}
 +
.cards__front,
 +
.cards__back {
 +
position: absolute;
 +
top: 0;
 +
  margin: 0;
 +
-webkit-transition: 0.5s ease-in-out;
 +
-moz-transition: 0.5s ease-in-out;
 +
-ms-transition: 0.5s ease-in-out;
 +
-o-transition: 0.5s ease-in-out;
 +
transition: 0.5s ease-in-out;
 +
}
 +
.cards__front {
 +
-webkit-backface-visibility: hidden;
 +
-moz-backface-visibility: hidden;
 +
-ms-backface-visibility: hidden;
 +
-o-backface-visibility: hidden;
 +
backface-visibility: hidden;
 +
 
 +
-webkit-transform: perspective(1000px) rotateY(0deg);
 +
-moz-transform: perspective(1000px) rotateY(0deg);
 +
-ms-transform: perspective(1000px) rotateY(0deg);
 +
-o-transform: perspective(1000px) rotateY(0deg);
 +
transform: perspective(1000px) rotateY(0deg);
 +
}
 +
.cards__axis:hover .cards__front {
 +
-webkit-transform: perspective(1000px) rotateY(-180deg);
 +
-moz-transform: perspective(1000px) rotateY(-180deg);
 +
-ms-transform: perspective(1000px) rotateY(-180deg);
 +
  -o-transform: perspective(1000px) rotateY(-180deg);
 +
transform: perspective(1000px) rotateY(-180deg);
 +
}
 +
.cards__back {
 +
-webkit-backface-visibility: hidden;
 +
-moz-backface-visibility: hidden;
 +
-ms-backface-visibility: hidden;
 +
-o-backface-visibility: hidden;
 +
backface-visibility: hidden;
 +
 
 +
-webkit-transform: perspective(1000px) rotateY(180deg);
 +
-moz-transform: perspective(1000px) rotateY(180deg);
 +
-ms-transform: perspective(1000px) rotateY(180deg);
 +
-o-transform: perspective(1000px) rotateY(180deg);
 +
transform: perspective(1000px) rotateY(180deg);
 +
}
 +
.cards__axis:hover .cards__back {
 +
-webkit-transform: perspective(1000px) rotateY(0);
 +
-moz-transform: perspective(1000px) rotateY(0);
 +
-ms-transform: perspective(1000px) rotateY(0);
 +
-o-transform: perspective(1000px) rotateY(0);
 +
transform: perspective(1000px) rotateY(0);
 +
}
 +
 +
/* CUSTOM STYLES FOR THIS UNORDERED LIST */
 +
.cards {
 +
  width: 80%;
 +
  margin: 0 10%;
 +
}
 +
.cards {
 +
  list-style-type: none;
 +
  padding-left: none;
 +
}
 +
.cards:after {
 +
content: "";
 +
display: table;
 +
clear: both;
 +
}
 +
.cards__axis {
 +
  float: left;
 +
  margin-left: 2.5%;
 +
width: 20%;
 +
}
 +
.cards__axis img {
 +
  border: 15px solid #fff;
 +
  border-bottom-width: 45px;
 +
}
 +
 +
/* CONTENT STYLES */
 +
.cards__description--front {
 +
  position: absolute;
 +
  bottom: -10px;
 +
  width: 100%;
 +
  text-align: center;
 +
}
 +
.cards__description--front {
 +
  font-size: 1.5em;
 +
}
 +
.cards__description--back {
 +
  position: absolute;
 +
  top: 0;
 +
  left: 0;
 +
  width: 100%;
 +
  height: 90%;
 +
  background: rgb(255,255,255);
 +
  background: rgba(255,255,255,0.9);
 +
}
 +
.cards__description--back p {
 +
  position: absolute;
 +
  width: 100%;
 +
  top: 50%;
 +
  margin-top: -1em;
 +
  text-align: center;
 +
  font-size: 2em;
 +
  font-family: 'Impact', sans-serif;
 +
  color: #880000;
 +
  -webkit-transform: rotate(-30deg);
 +
  -moz-transform: rotate(-30deg);
 +
  -ms-transform: rotate(-30deg);
 +
  -o-transform: rotate(-30deg);
 +
  transform: rotate(-30deg);
 +
}
 +
</style>
 
</html>
 
</html>
  
 
{{Hong_Kong_HKUST/Footer}}
 
{{Hong_Kong_HKUST/Footer}}

Revision as of 09:27, 27 September 2017

HKUST iGEM Team 2017

I'm priceless.

Hello


Footer