(18 intermediate revisions by 3 users not shown) | |||
Line 152: | Line 152: | ||
.hovereffect { | .hovereffect { | ||
− | + | width: 100%; | |
− | + | height: 100%; | |
− | + | float: left; | |
− | + | overflow: hidden; | |
− | + | position: relative; | |
− | + | text-align: center; | |
− | + | cursor: default; | |
} | } | ||
− | |||
.hovereffect .overlay { | .hovereffect .overlay { | ||
− | + | width: 100%; | |
− | + | position: absolute; | |
− | + | overflow: hidden; | |
− | + | left: 0; | |
− | + | top: auto; | |
− | + | bottom: 0; | |
− | + | padding: 1em; | |
− | + | height: 4.75em; | |
− | + | background: #79FAC4; | |
− | + | color: #3c4a50; | |
− | + | -webkit-transition: -webkit-transform 0.35s; | |
− | + | transition: transform 0.35s; | |
− | + | -webkit-transform: translate3d(0,100%,0); | |
− | + | transform: translate3d(0,100%,0); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
.hovereffect img { | .hovereffect img { | ||
− | + | display: block; | |
− | + | position: relative; | |
− | + | -webkit-transition: -webkit-transform 0.35s; | |
− | + | transition: transform 0.35s; | |
} | } | ||
.hovereffect:hover img { | .hovereffect:hover img { | ||
− | + | -webkit-transform: translate3d(0,-10%,0); | |
− | + | transform: translate3d(0,-10%,0); | |
− | + | ||
} | } | ||
.hovereffect h2 { | .hovereffect h2 { | ||
− | + | text-transform: uppercase; | |
− | + | color: #fff; | |
− | + | text-align: center; | |
− | + | position: relative; | |
− | + | font-size: 17px; | |
− | + | padding: 10px; | |
− | + | background: rgba(0, 0, 0, 0.6); | |
− | + | float: left; | |
− | + | margin: 0px; | |
− | + | display: inline-block; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | .hovereffect a | + | .hovereffect a.info { |
− | + | display: inline-block; | |
− | + | text-decoration: none; | |
− | + | padding: 7px 14px; | |
− | + | text-transform: uppercase; | |
− | + | color: #fff; | |
− | + | border: 1px solid #fff; | |
− | + | margin: 50px 0 0 0; | |
− | + | background-color: transparent; | |
} | } | ||
+ | .hovereffect a.info:hover { | ||
+ | box-shadow: 0 0 5px #fff; | ||
+ | } | ||
+ | |||
− | .hovereffect | + | .hovereffect p.icon-links a { |
− | + | float: right; | |
− | + | color: #3c4a50; | |
− | + | font-size: 1.4em; | |
− | + | ||
} | } | ||
+ | .hovereffect:hover p.icon-links a:hover, | ||
+ | .hovereffect:hover p.icon-links a:focus { | ||
+ | color: #252d31; | ||
+ | } | ||
+ | |||
+ | .hovereffect h2, | ||
+ | .hovereffect p.icon-links a { | ||
+ | -webkit-transition: -webkit-transform 0.35s; | ||
+ | transition: transform 0.35s; | ||
+ | -webkit-transform: translate3d(0,200%,0); | ||
+ | transform: translate3d(0,200%,0); | ||
+ | } | ||
+ | |||
+ | .hovereffect p.icon-links a span:before { | ||
+ | display: inline-block; | ||
+ | padding: 8px 10px; | ||
+ | speak: none; | ||
+ | -webkit-font-smoothing: antialiased; | ||
+ | -moz-osx-font-smoothing: grayscale; | ||
+ | } | ||
+ | |||
+ | |||
+ | .hovereffect:hover .overlay, | ||
+ | .hovereffect:hover h2, | ||
+ | .hovereffect:hover p.icon-links a { | ||
+ | -webkit-transform: translate3d(0,0,0); | ||
+ | transform: translate3d(0,0,0); | ||
+ | } | ||
+ | |||
+ | .hovereffect:hover h2 { | ||
+ | -webkit-transition-delay: 0.05s; | ||
+ | transition-delay: 0.05s; | ||
+ | } | ||
+ | |||
+ | .hovereffect:hover p.icon-links a:nth-child(3) { | ||
+ | -webkit-transition-delay: 0.1s; | ||
+ | transition-delay: 0.1s; | ||
+ | } | ||
+ | |||
+ | .hovereffect:hover p.icon-links a:nth-child(2) { | ||
+ | -webkit-transition-delay: 0.15s; | ||
+ | transition-delay: 0.15s; | ||
+ | } | ||
+ | |||
+ | .hovereffect:hover p.icon-links a:first-child { | ||
+ | -webkit-transition-delay: 0.2s; | ||
+ | transition-delay: 0.2s; | ||
+ | } | ||
} | } | ||
Line 238: | Line 279: | ||
<center> | <center> | ||
<div class="column full_size"> | <div class="column full_size"> | ||
− | + | <img src="https://static.igem.org/mediawiki/2016/thumb/1/19/T--Pumas_Mexico--Poru.jpg/800px-T--Pumas_Mexico--Poru.jpg" width="864" style="width:100%" > | |
− | + | ||
</div> | </div> | ||
Line 245: | Line 285: | ||
</DIV> | </DIV> | ||
</p> | </p> | ||
− | |||
<header> | <header> | ||
Line 253: | Line 292: | ||
<nav align="center"> | <nav align="center"> | ||
<ul> | <ul> | ||
+ | </p> | ||
+ | <li><a href="https://2016.igem.org/Team:Pumas_Mexico" style="text-decoration:none"><span class=""><i><br><img src="https://static.igem.org/mediawiki/2016/6/68/T--Pumas_Mexico--unicos.png"> </i></span><font color="#FFFFFF" face="Lucida Sans Unicode, Lucida Grande, sans-serif">HOME</font></a></li> | ||
− | <li><a href=" | + | <li><a href=""><span class=""><i><br><img src="https://static.igem.org/mediawiki/2016/6/68/T--Pumas_Mexico--unicos.png"> </i></span><font color="#FFFFFF" face="Lucida Sans Unicode, Lucida Grande, sans-serif">TEAM</font></a><ul> |
− | + | ||
− | + | ||
<li><a href="https://2016.igem.org/Team:Pumas_Mexico/Team" style="text-decoration:none"><font color="#FFFFFF" face="Lucida Sans Unicode, Lucida Grande, sans-serif">Team</font></a></li> | <li><a href="https://2016.igem.org/Team:Pumas_Mexico/Team" style="text-decoration:none"><font color="#FFFFFF" face="Lucida Sans Unicode, Lucida Grande, sans-serif">Team</font></a></li> | ||
Line 263: | Line 302: | ||
</ul> | </ul> | ||
− | <li><a href=" | + | <li><a href=""><span class=""><i><br><img src="https://static.igem.org/mediawiki/2016/6/68/T--Pumas_Mexico--unicos.png"> </i></span><font color="#FFFFFF" face="Lucida Sans Unicode, Lucida Grande, sans-serif">PROJECT</font></a> |
<ul> | <ul> | ||
Line 272: | Line 311: | ||
<li><a href="https://2016.igem.org/Team:Pumas_Mexico/Experiments" style="text-decoration:none"><font color="#FFFFFF" face="Lucida Sans Unicode, Lucida Grande, sans-serif">Experiments</font></a></li> | <li><a href="https://2016.igem.org/Team:Pumas_Mexico/Experiments" style="text-decoration:none"><font color="#FFFFFF" face="Lucida Sans Unicode, Lucida Grande, sans-serif">Experiments</font></a></li> | ||
− | <li><a href="https://2016.igem.org/Team:Pumas_Mexico/Proof" style="text-decoration:none"><font color="#FFFFFF" face="Lucida Sans Unicode, Lucida Grande, sans-serif">Proof of | + | <li><a href="https://2016.igem.org/Team:Pumas_Mexico/Proof" style="text-decoration:none"><font color="#FFFFFF" face="Lucida Sans Unicode, Lucida Grande, sans-serif">Proof of concept</font></a></li> |
<li><a href="https://2016.igem.org/Team:Pumas_Mexico/Demonstrate" style="text-decoration:none"><font color="#FFFFFF" face="Lucida Sans Unicode, Lucida Grande, sans-serif">Demostrate</font></a></li> | <li><a href="https://2016.igem.org/Team:Pumas_Mexico/Demonstrate" style="text-decoration:none"><font color="#FFFFFF" face="Lucida Sans Unicode, Lucida Grande, sans-serif">Demostrate</font></a></li> | ||
Line 282: | Line 321: | ||
</ul> | </ul> | ||
− | </li><li><a href=""><span class=""><i><br><img src="https://static.igem.org/mediawiki/2016/ | + | </li><li><a href=""><span class=""><i><br><img src="https://static.igem.org/mediawiki/2016/6/68/T--Pumas_Mexico--unicos.png"> </i></span><font color="#FFFFFF" face="Lucida Sans Unicode, Lucida Grande, sans-serif">HP</font></a><ul> |
<li><a href="https://2016.igem.org/Team:Pumas_Mexico/Human_Practices" style="text-decoration:none"><font color="#FFFFFF" face="Lucida Sans Unicode, Lucida Grande, sans-serif">Human Practices</font></a></li> | <li><a href="https://2016.igem.org/Team:Pumas_Mexico/Human_Practices" style="text-decoration:none"><font color="#FFFFFF" face="Lucida Sans Unicode, Lucida Grande, sans-serif">Human Practices</font></a></li> | ||
Line 295: | Line 334: | ||
</ul></li> | </ul></li> | ||
− | <li><a href=""><span class=""><i><br><img src="https://static.igem.org/mediawiki/2016/ | + | <li><a href=""><span class=""><i><br><img src="https://static.igem.org/mediawiki/2016/6/68/T--Pumas_Mexico--unicos.png"> </i></span><font color="#FFFFFF" face="Lucida Sans Unicode, Lucida Grande, sans-serif">PARTS</font></a> |
<ul> | <ul> | ||
Line 307: | Line 346: | ||
</ul></li> | </ul></li> | ||
− | <li><a href="https://2016.igem.org/Team:Pumas_Mexico/Safety" style="text-decoration:none"><span class=""><i><br><img src="https://static.igem.org/mediawiki/2016/ | + | <li><a href="https://2016.igem.org/Team:Pumas_Mexico/Safety" style="text-decoration:none"><span class=""><i><br><img src="https://static.igem.org/mediawiki/2016/6/68/T--Pumas_Mexico--unicos.png"> </i></span><font color="#FFFFFF" face="Lucida Sans Unicode, Lucida Grande, sans-serif">SAFETY</font></a></li> |
− | <li><a href="https://2016.igem.org/Team:Pumas_Mexico/Attributions" style="text-decoration:none"><span class=""><i><br><img src="https://static.igem.org/mediawiki/2016/ | + | <li><a href="https://2016.igem.org/Team:Pumas_Mexico/Attributions" style="text-decoration:none"><span class=""><i><br><img src="https://static.igem.org/mediawiki/2016/6/68/T--Pumas_Mexico--unicos.png"> </i></span><font color="#FFFFFF" face="Lucida Sans Unicode, Lucida Grande, sans-serif">ATRIBUTIONS</font></a></li> |
− | <li><a href=""><span class=""><i><br><img src="https://static.igem.org/mediawiki/2016/ | + | <li><a href=""><span class=""><i><br><img src="https://static.igem.org/mediawiki/2016/6/68/T--Pumas_Mexico--unicos.png"> </i></span><font color="#FFFFFF" face="Lucida Sans Unicode, Lucida Grande, sans-serif">AWARD</font></a><ul> |
<li><a href="https://2016.igem.org/Team:Pumas_Mexico/Entrepreneurship"><font color="#FFFFFF" face="Lucida Sans Unicode, Lucida Grande, sans-serif">Entrepreneurship</font></a></li> | <li><a href="https://2016.igem.org/Team:Pumas_Mexico/Entrepreneurship"><font color="#FFFFFF" face="Lucida Sans Unicode, Lucida Grande, sans-serif">Entrepreneurship</font></a></li> | ||
Line 322: | Line 361: | ||
<li><a href="https://2016.igem.org/Team:Pumas_Mexico/Model" style="text-decoration:none"><font color="#FFFFFF" face="Lucida Sans Unicode, Lucida Grande, sans-serif">Model</font></a></li> | <li><a href="https://2016.igem.org/Team:Pumas_Mexico/Model" style="text-decoration:none"><font color="#FFFFFF" face="Lucida Sans Unicode, Lucida Grande, sans-serif">Model</font></a></li> | ||
− | + | <center> | |
+ | <table style="border:none;"> | ||
+ | <tr style="border:none;"> | ||
+ | <td align="center" style="border:none;"> | ||
+ | <Img src="https://static.igem.org/mediawiki/2016/thumb/7/77/T--Pumas_Mexico--igu.png/800px-T--Pumas_Mexico--igu.png" /> | ||
+ | </td> | ||
+ | </tr> | ||
+ | </table> | ||
</ul></li> | </ul></li> | ||
</nav> | </nav> | ||
</header> | </header> | ||
− | < | + | <head> |
− | < | + | <style type="text/css"> |
− | + | #apDiv1 { | |
− | + | position: absolute; | |
− | + | width: 200px; | |
− | + | height: 115px; | |
− | + | z-index: 1; | |
− | + | } | |
− | + | .hovereffect { | |
− | + | width: 100%; | |
− | + | height: 100%; | |
− | + | float: left; | |
− | + | overflow: hidden; | |
− | + | position: relative; | |
− | + | text-align: center; | |
− | + | cursor: default; | |
− | + | } | |
− | + | .hovereffect .overlay { | |
− | + | width: 100%; | |
− | + | position: absolute; | |
− | + | overflow: hidden; | |
− | + | left: 0; | |
− | + | top: auto; | |
− | + | bottom: 0; | |
− | + | padding: 1em; | |
− | + | height: 4.75em; | |
− | + | background: #79FAC4; | |
− | + | color: #3c4a50; | |
− | + | -webkit-transition: -webkit-transform 0.35s; | |
− | + | transition: transform 0.35s; | |
− | + | -webkit-transform: translate3d(0,100%,0); | |
− | + | transform: translate3d(0,100%,0); | |
− | + | } | |
− | + | ||
− | + | .hovereffect img { | |
− | + | display: block; | |
− | + | position: relative; | |
− | + | -webkit-transition: -webkit-transform 0.35s; | |
− | + | transition: transform 0.35s; | |
− | + | } | |
− | + | ||
− | + | .hovereffect:hover img { | |
− | + | -webkit-transform: translate3d(0,-10%,0); | |
− | + | transform: translate3d(0,-10%,0); | |
− | + | } | |
− | + | ||
− | + | .hovereffect h2 { | |
− | + | text-transform: uppercase; | |
− | + | color: #fff; | |
− | + | text-align: center; | |
− | + | position: relative; | |
− | + | font-size: 17px; | |
− | + | padding: 10px; | |
− | + | background: rgba(0, 0, 0, 0.6); | |
− | + | float: left; | |
− | + | margin: 0px; | |
− | + | display: inline-block; | |
− | + | } | |
− | + | ||
− | + | .hovereffect a.info { | |
− | + | display: inline-block; | |
− | + | text-decoration: none; | |
− | + | padding: 7px 14px; | |
− | + | text-transform: uppercase; | |
− | + | color: #fff; | |
− | + | border: 1px solid #fff; | |
− | + | margin: 50px 0 0 0; | |
− | + | background-color: transparent; | |
− | + | } | |
− | + | .hovereffect a.info:hover { | |
− | + | box-shadow: 0 0 5px #fff; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | .hovereffect p.icon-links a { | |
− | + | float: right; | |
− | + | color: #3c4a50; | |
− | + | font-size: 1.4em; | |
− | + | } | |
− | + | ||
− | + | .hovereffect:hover p.icon-links a:hover, | |
− | + | .hovereffect:hover p.icon-links a:focus { | |
− | + | color: #252d31; | |
− | + | } | |
− | + | ||
− | + | .hovereffect h2, | |
− | + | .hovereffect p.icon-links a { | |
− | + | -webkit-transition: -webkit-transform 0.35s; | |
− | + | transition: transform 0.35s; | |
− | + | -webkit-transform: translate3d(0,200%,0); | |
− | + | transform: translate3d(0,200%,0); | |
− | + | } | |
− | + | ||
− | + | .hovereffect p.icon-links a span:before { | |
− | + | display: inline-block; | |
− | + | padding: 8px 10px; | |
− | + | speak: none; | |
− | + | -webkit-font-smoothing: antialiased; | |
− | + | -moz-osx-font-smoothing: grayscale; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | .hovereffect:hover .overlay, | |
− | + | .hovereffect:hover h2, | |
− | + | .hovereffect:hover p.icon-links a { | |
− | + | -webkit-transform: translate3d(0,0,0); | |
− | + | transform: translate3d(0,0,0); | |
− | + | } | |
− | + | ||
− | + | .hovereffect:hover h2 { | |
− | + | -webkit-transition-delay: 0.05s; | |
− | + | transition-delay: 0.05s; | |
− | + | } | |
− | + | ||
− | + | .hovereffect:hover p.icon-links a:nth-child(3) { | |
− | + | -webkit-transition-delay: 0.1s; | |
− | + | transition-delay: 0.1s; | |
− | + | } | |
− | + | ||
− | + | .hovereffect:hover p.icon-links a:nth-child(2) { | |
− | + | -webkit-transition-delay: 0.15s; | |
− | + | transition-delay: 0.15s; | |
− | + | } | |
− | + | ||
− | + | .hovereffect:hover p.icon-links a:first-child { | |
− | + | -webkit-transition-delay: 0.2s; | |
− | + | transition-delay: 0.2s; | |
− | + | } | |
− | + | } | |
− | + | ||
− | + | </style> | |
− | + | </head> | |
− | + | ||
− | + | <body> | |
− | + | <table> | |
− | + | <tr style="decoration:none" > | |
− | + | <td style="decoration:none" > | |
− | + | ||
− | + | <img src"https://static.igem.org/mediawiki/2016/thumb/0/00/T--Pumas_Mexico--teamse.jpg/800px-T--Pumas_Mexico--teamse.jpg"> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | < | + | |
− | < | + | |
− | < | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</td> | </td> | ||
+ | |||
</tr> | </tr> | ||
</table> | </table> | ||
+ | </body> | ||
</html> | </html> |
Latest revision as of 03:54, 20 October 2016