Line 2: | Line 2: | ||
<html> | <html> | ||
<head> | <head> | ||
+ | <meta charset="utf-8" > | ||
+ | <meta http-equiv="X-UA-Compatible" content="IE=Edge"> | ||
<style> | <style> | ||
Line 83: | Line 85: | ||
text-align:center | text-align:center | ||
} | } | ||
+ | |||
+ | |||
+ | |||
+ | .flip-container { | ||
+ | -webkit-perspective: 1000; | ||
+ | -moz-perspective: 1000; | ||
+ | -ms-perspective: 1000; | ||
+ | perspective: 1000; | ||
+ | -ms-transform: perspective(1000px); | ||
+ | -moz-transform: perspective(1000px); | ||
+ | -moz-transform-style: preserve-3d; | ||
+ | -ms-transform-style: preserve-3d; | ||
+ | border: 1px solid #ccc; | ||
+ | } | ||
+ | |||
+ | /* START: Accommodating for IE */ | ||
+ | .flip-container:hover .back, .flip-container.hover .back { | ||
+ | -webkit-transform: rotateY(0deg); | ||
+ | -moz-transform: rotateY(0deg); | ||
+ | -o-transform: rotateY(0deg); | ||
+ | -ms-transform: rotateY(0deg); | ||
+ | transform: rotateY(0deg); | ||
+ | } | ||
+ | .flip-container:hover .front, .flip-container.hover .front { | ||
+ | -webkit-transform: rotateY(180deg); | ||
+ | -moz-transform: rotateY(180deg); | ||
+ | -o-transform: rotateY(180deg); | ||
+ | transform: rotateY(180deg); | ||
+ | } | ||
+ | /* END: Accommodating for IE */ | ||
+ | |||
+ | .flip-container, .front, .back { | ||
+ | width: 400px; | ||
+ | height: 450px; | ||
+ | } | ||
+ | .flipper { | ||
+ | -webkit-transition: 0.6s; | ||
+ | -webkit-transform-style: preserve-3d; | ||
+ | -ms-transition: 0.6s; | ||
+ | -moz-transition: 0.6s; | ||
+ | -moz-transform: perspective(1000px); | ||
+ | -moz-transform-style: preserve-3d; | ||
+ | -ms-transform-style: preserve-3d; | ||
+ | transition: 0.6s; | ||
+ | transform-style: preserve-3d; | ||
+ | position: relative; | ||
+ | } | ||
+ | .front, .back { | ||
+ | -webkit-backface-visibility: hidden; | ||
+ | -moz-backface-visibility: hidden; | ||
+ | -ms-backface-visibility: hidden; | ||
+ | backface-visibility: hidden; | ||
+ | -webkit-transition: 0.6s; | ||
+ | -webkit-transform-style: preserve-3d; | ||
+ | -webkit-transform: rotateY(0deg); | ||
+ | -moz-transition: 0.6s; | ||
+ | -moz-transform-style: preserve-3d; | ||
+ | -moz-transform: rotateY(0deg); | ||
+ | -o-transition: 0.6s; | ||
+ | -o-transform-style: preserve-3d; | ||
+ | -o-transform: rotateY(0deg); | ||
+ | -ms-transition: 0.6s; | ||
+ | -ms-transform-style: preserve-3d; | ||
+ | -ms-transform: rotateY(0deg); | ||
+ | transition: 0.6s; | ||
+ | transform-style: preserve-3d; | ||
+ | transform: rotateY(0deg); | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | } | ||
+ | .front { | ||
+ | -webkit-transform: rotateY(0deg); | ||
+ | -ms-transform: rotateY(0deg); | ||
+ | background: lightgreen; | ||
+ | z-index: 2; | ||
+ | } | ||
+ | .back { | ||
+ | background: lightblue; | ||
+ | -webkit-transform: rotateY(-180deg); | ||
+ | -moz-transform: rotateY(-180deg); | ||
+ | -o-transform: rotateY(-180deg); | ||
+ | -ms-transform: rotateY(-180deg); | ||
+ | transform: rotateY(-180deg); | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
</style> | </style> | ||
Line 154: | Line 245: | ||
− | |||
− | |||
− | |||
Line 168: | Line 256: | ||
− | + | <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> | |
− | <p align="justify"> | + | <div class="flipper"> |
+ | <div class="front"><img src="https://static.igem.org/mediawiki/2017/2/26/Andrew.PNG" width="450" height="450" class=" igem-logo"></a></div> | ||
+ | <div class="back"><p align="justify"> | ||
<br> | <br> | ||
<font color="#8A0808" size="5" ><b>Name: Ching Yuet To</b></font> | <font color="#8A0808" size="5" ><b>Name: Ching Yuet To</b></font> | ||
Line 193: | Line 283: | ||
I am looking most forward to meet all the interesting people in Jamboree! I believe that I can learn a lot and make many international friends in Boston!</font> | I am looking most forward to meet all the interesting people in Jamboree! I believe that I can learn a lot and make many international friends in Boston!</font> | ||
</p> | </p> | ||
− | < | + | </div> |
− | < | + | </div> |
+ | </div> | ||
+ | |||
+ | |||
+ | |||
<br> | <br> | ||
<br> | <br> |
Revision as of 17:04, 20 July 2017