Difference between revisions of "Team:Uppsala"
(5 intermediate revisions by the same user not shown) | |||
Line 35: | Line 35: | ||
/*Button effects*/ | /*Button effects*/ | ||
− | .buttons img:hover, #nic img { | + | .buttons img:hover, #nic img, #med img { |
opacity: 1; | opacity: 1; | ||
} | } | ||
− | .buttons img:hover, #nic img:hover { | + | .buttons img:hover, #nic img:hover, #med img:hover { |
opacity: 0.2; | opacity: 0.2; | ||
} | } | ||
Line 66: | Line 66: | ||
font-size: 170%; | font-size: 170%; | ||
} | } | ||
− | #nic .description { | + | #nic .description, #med .description { |
width:75%; | width:75%; | ||
margin: auto; | margin: auto; | ||
} | } | ||
− | .buttons:hover .description, #nic:hover .description { | + | .buttons:hover .description, #nic:hover .description, #med:hover .description { |
visibility: visible; | visibility: visible; | ||
opacity: 1; | opacity: 1; | ||
Line 77: | Line 77: | ||
-webkit-transform: translateY(140px); | -webkit-transform: translateY(140px); | ||
transform: translateY(140px); | transform: translateY(140px); | ||
+ | } | ||
+ | |||
+ | #med:hover .description { | ||
+ | visibility: visible; | ||
+ | opacity: 1; | ||
+ | -moz-transform: translateY(40px); | ||
+ | -webkit-transform: translateY(40px); | ||
+ | transform: translateY(40px); | ||
} | } | ||
Line 96: | Line 104: | ||
#results_button { | #results_button { | ||
box-shadow: 3px 3px 10px #888888; | box-shadow: 3px 3px 10px #888888; | ||
+ | margin-left: 10px; | ||
} | } | ||
Line 122: | Line 131: | ||
#medal { | #medal { | ||
/*padding: 25px 0px;*/ | /*padding: 25px 0px;*/ | ||
+ | /*box-shadow: 10px 10px 20px #888888;*/ | ||
+ | /*margin-top: 14px; | ||
+ | margin-bottom: 3px;*/ | ||
+ | } | ||
+ | |||
+ | #med { | ||
+ | width: 1100px; | ||
+ | height: 103px; | ||
+ | box-shadow: 10px 10px 20px #888888; | ||
+ | overflow: hidden; | ||
+ | margin-top: 10px; | ||
+ | background-color: #E84243; | ||
+ | } | ||
+ | |||
+ | |||
+ | *flipping images*/ | ||
+ | |||
+ | /* entire container, keeps perspective */ | ||
+ | .flip-container{ | ||
+ | /*perspective*/ | ||
+ | -webkit-perspective:1000; | ||
+ | -moz-perspective:1000; | ||
+ | -ms-perspective:1000; | ||
+ | -o-perspective:1000; | ||
+ | perspective:1000; | ||
+ | } | ||
+ | /* flip the pane when hovered */ | ||
+ | .flipped { | ||
+ | /*transform*/ | ||
+ | -webkit-transform:rotateY(180deg); | ||
+ | -moz-transform:rotateY(180deg); | ||
+ | -ms-transform:rotateY(180deg); | ||
+ | -o-transform:rotateY(180deg); | ||
+ | transform:rotateY(180deg); | ||
+ | } | ||
+ | |||
+ | .flip-container, .front, .back{ | ||
+ | width: 100%; | ||
+ | height: 461px; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* flip speed goes here */ | ||
+ | .flipper { | ||
+ | /*transition*/ | ||
+ | -webkit-transition:1s; | ||
+ | -moz-transition:1s; | ||
+ | -o-transition:1s; | ||
+ | transition:1s; | ||
+ | /*transform-style*/ | ||
+ | -webkit-transform-style:preserve-3d; | ||
+ | -moz-transform-style:preserve-3d; | ||
+ | -ms-transform-style:preserve-3d; | ||
+ | -o-transform-style:preserve-3d; | ||
+ | transform-style:preserve-3d; | ||
+ | position:relative; | ||
+ | } | ||
+ | |||
+ | /* hide back of pane during swap */ | ||
+ | .front, .back{ | ||
+ | /*backface-visibility*/ | ||
+ | -webkit-backface-visibility:hidden; | ||
+ | -moz-backface-visibility:hidden; | ||
+ | -ms-backface-visibility:hidden; | ||
+ | -o-backface-visibility:hidden; | ||
+ | backface-visibility:hidden; | ||
+ | position:absolute; | ||
+ | top:0; | ||
+ | left:0; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | /* front pane, placed above back */ | ||
+ | .front{ | ||
+ | z-index:2; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* back, initially hidden pane */ | ||
+ | .back{ | ||
+ | /*transform*/ | ||
+ | -webkit-transform:rotateY(180deg); | ||
+ | -moz-transform:rotateY(180deg); | ||
+ | -ms-transform:rotateY(180deg); | ||
+ | -o-transform:rotateY(180deg); | ||
+ | transform:rotateY(180deg); | ||
} | } | ||
Line 128: | Line 224: | ||
<body> | <body> | ||
− | <img id="home_image" src="https://static.igem.org/mediawiki/2015/4/4d/Uppsala_NewFront.png" alt="iGEM Uppsala" style="width:100%;height:100%;"> | + | <!--<img id="home_image" src="https://static.igem.org/mediawiki/2015/4/4d/Uppsala_NewFront.png" alt="iGEM Uppsala" style="width:100%;height:100%;">--> |
+ | |||
+ | <div class="flip-container"> | ||
+ | <div class="flipper" onclick="this.classList.toggle('flipped')"> | ||
+ | <div class="front"> | ||
+ | <img id="home_image" src="https://static.igem.org/mediawiki/2015/4/4d/Uppsala_NewFront.png" alt="iGEM Uppsala" style="width:100%;"> | ||
+ | </div> | ||
+ | <div class="back"> | ||
+ | <img id="home_image" src="https://static.igem.org/mediawiki/2015/7/72/Uppsala_MansFront.png" alt="iGEM Uppsala" style="width:100%;"> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
<div id="main"> | <div id="main"> | ||
Line 152: | Line 260: | ||
</table> | </table> | ||
<hr> | <hr> | ||
− | + | ||
<table class="button_grid"> | <table class="button_grid"> | ||
+ | <tr> | ||
+ | |||
+ | <td colspan="3" > | ||
+ | <div id="med" > | ||
+ | <a href="https://2015.igem.org/Team:Uppsala/Journey"> | ||
+ | <p class="description">Click here to read about our journey to gold!</p> | ||
+ | <img id="medal" src="https://static.igem.org/mediawiki/2015/f/f7/Uppsala_goldmedal.png"> | ||
+ | <!--<h2><span id="textbox">Nordic iGEM Conference</span></h2>--> | ||
+ | </a> | ||
+ | </div> | ||
+ | </td> | ||
+ | </tr> | ||
<tr> | <tr> | ||
<td > | <td > |
Latest revision as of 22:45, 20 November 2015
Abstract