Line 1: | Line 1: | ||
− | |||
<html> | <html> | ||
<head> | <head> | ||
Line 145: | Line 144: | ||
z-index: 1; | z-index: 1; | ||
} | } | ||
+ | #img { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | border: 0; | ||
+ | position: relative; | ||
+ | } | ||
+ | .hovereffect { | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | float: left; | ||
+ | overflow: hidden; | ||
+ | position: relative; | ||
+ | text-align: center; | ||
+ | cursor: default; | ||
+ | } | ||
+ | .hovereffect .overlay { | ||
+ | position: absolute; | ||
+ | overflow: hidden; | ||
+ | opacity: 0; | ||
+ | filter: alpha(opacity=0); | ||
+ | width: 55%; | ||
+ | height: 81%; | ||
+ | left: 22%; | ||
+ | top: 10%; | ||
+ | border-radius: 80%; | ||
+ | border: 2px solid #FFF; | ||
+ | -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; | ||
+ | transition: opacity 0.35s, transform 0.35s; | ||
+ | -webkit-transform: translate3d(50%,50%,0); | ||
+ | transform: translate3d(50%,50%,0); | ||
+ | } | ||
+ | .hovereffect:hover .overlay { | ||
+ | background-color: rgba(0,0,0,0.3); | ||
+ | } | ||
+ | |||
+ | .hovereffect img { | ||
+ | display: block; | ||
+ | position: relative; | ||
+ | -webkit-transition: all 0.35s; | ||
+ | transition: all 0.35s; | ||
+ | } | ||
+ | |||
+ | .hovereffect:hover img { | ||
+ | filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="1.4" /><feFuncG type="linear" slope="1.4" /><feFuncB type="linear" slope="1.4" /></feComponentTransfer></filter></svg>#filter'); | ||
+ | filter: brightness(1.4); | ||
+ | -webkit-filter: brightness(1.4); | ||
+ | } | ||
+ | |||
+ | .hovereffect h2 { | ||
+ | text-transform: uppercase; | ||
+ | text-align: center; | ||
+ | position: relative; | ||
+ | font-size: 17px; | ||
+ | padding: 10px; | ||
+ | background-color: transparent; | ||
+ | color: #FFF; | ||
+ | padding: 1em 0; | ||
+ | opacity: 0; | ||
+ | filter: alpha(opacity=0); | ||
+ | -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; | ||
+ | transition: opacity 0.35s, transform 0.35s; | ||
+ | -webkit-transform: translate3d(-150%,-400%,0); | ||
+ | transform: translate3d(-150%,-400%,0); | ||
+ | } | ||
+ | |||
+ | .hovereffect a, .hovereffect p { | ||
+ | color: #FFF; | ||
+ | padding: 1em 0; | ||
+ | opacity: 0; | ||
+ | filter: alpha(opacity=0); | ||
+ | -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; | ||
+ | transition: opacity 0.35s, transform 0.35s; | ||
+ | -webkit-transform: translate3d(-150%,-400%,0); | ||
+ | transform: translate3d(-150%,-400%,0); | ||
+ | } | ||
+ | |||
+ | .hovereffect:hover a, .hovereffect:hover p, .hovereffect:hover h2, .hovereffect:hover .overlay { | ||
+ | opacity: 1; | ||
+ | filter: alpha(opacity=100); | ||
+ | -webkit-transform: translate3d(0,0,0); | ||
+ | transform: translate3d(0,0,0); | ||
+ | } | ||
Line 156: | Line 237: | ||
<body> | <body> | ||
<center> | <center> | ||
− | <img src="https://static.igem.org/mediawiki/2016/3/3c/T--Pumas_Mexico--Portada.jpg" | + | <div class="column full_size"> |
+ | <<img src="https://static.igem.org/mediawiki/2016/3/3c/T--Pumas_Mexico--Portada.jpg" style="width:100%"> | ||
+ | |||
+ | </div> | ||
+ | </center> | ||
</DIV> | </DIV> | ||
</p> | </p> | ||
− | + | ||
− | + | ||
<header> | <header> | ||
− | + | ||
<font face="Arial, Helvetica, sans-serif"> | <font face="Arial, Helvetica, sans-serif"> | ||
<center> | <center> | ||
− | <nav> | + | <nav align="center"> |
<ul> | <ul> | ||
− | |||
− | |||
− | <li><a href=""><span class=""><i><br><img src="https://static.igem.org/mediawiki/2016/4/4a/T--Pumas_Mexico--Icon2.png"> </i></span><font color="#FFFFFF" face="Lucida Sans Unicode, Lucida Grande, sans-serif">TEAM</font></a><ul> | + | <li><a href="" style="text-decoration:none"><span class=""><i><br><img src="https://static.igem.org/mediawiki/2016/2/29/T--Pumas_Mexico--Icon1.png"> </i></span><font color="#FFFFFF" face="Lucida Sans Unicode, Lucida Grande, sans-serif">HOME</font></a></li> |
+ | |||
+ | <li><a href="" style="text-decoration:none"><span class=""><i><br><img src="https://static.igem.org/mediawiki/2016/4/4a/T--Pumas_Mexico--Icon2.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 178: | Line 263: | ||
</ul> | </ul> | ||
− | <li><a href=""><span class=""><i><br><img src="https://static.igem.org/mediawiki/2016/6/6f/T--Pumas_Mexico--Icon3.png"> </i></span><font color="#FFFFFF" face="Lucida Sans Unicode, Lucida Grande, sans-serif">PROJECT</font></a> | + | <li><a href="" style="text-decoration:none"><span class=""><i><br><img src="https://static.igem.org/mediawiki/2016/6/6f/T--Pumas_Mexico--Icon3.png"> </i></span><font color="#FFFFFF" face="Lucida Sans Unicode, Lucida Grande, sans-serif">PROJECT</font></a> |
<ul> | <ul> | ||
Line 239: | Line 324: | ||
</ul></li> | </ul></li> | ||
+ | </nav> | ||
+ | </header> | ||
+ | <table border="0" align="center"> | ||
+ | <tr> | ||
+ | <td> | ||
+ | <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> | ||
+ | <div class="hovereffect"> | ||
+ | <img class="img-responsive" src="T--Pumas_Mexico--ccn.jpg" alt=""> | ||
+ | <div class="overlay"> | ||
+ | <h2>Carolina Guadalupe Cruz Núñez</h2> | ||
+ | <p> | ||
+ | Biología | ||
+ | </p> | ||
+ | </div> | ||
+ | </div> | ||
</div> | </div> | ||
− | <div class=" | + | </td> |
+ | <td> | ||
+ | <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> | ||
+ | <div class="hovereffect"> | ||
+ | <img class="img-responsive" src="T--Pumas_Mexico--zda.jpg" alt=""> | ||
+ | <div class="overlay"> | ||
+ | <h2>Zabdiel Díaz Morales</h2> | ||
+ | <p> | ||
+ | Biología | ||
+ | </p> | ||
+ | </div> | ||
+ | </div> | ||
</div> | </div> | ||
+ | </td> | ||
+ | <td> | ||
+ | <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> | ||
+ | <div class="hovereffect"> | ||
+ | <img class="img-responsive" src="T--Pumas_Mexico--iaa.jpg" alt=""> | ||
+ | <div class="overlay"> | ||
+ | <h2>Ilse </h2> | ||
+ | <h2>Alonso Anaya</h2> | ||
+ | <p> | ||
+ | Biología | ||
+ | </p> | ||
+ | </div> | ||
+ | </div> | ||
</div> | </div> | ||
− | + | </td> | |
− | + | <td> | |
− | + | <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> | |
− | < | + | <div class="hovereffect"> |
− | + | <img class="img-responsive" src="loc.jpg" alt=""> | |
− | < | + | <div class="overlay"> |
− | + | <h2>Paola Benítez Trejo</h2> | |
− | < | + | <p> |
− | < | + | Biología |
− | < | + | </p> |
− | </ | + | </div> |
− | + | </div> | |
</div> | </div> | ||
− | + | </td> | |
− | <div class=" | + | </tr> |
− | < | + | <tr> |
− | < | + | <td> |
− | < | + | <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> |
− | < | + | <div class="hovereffect"> |
− | < | + | <img class="img-responsive" src="T--Pumas_Mexico--gil.jpg" alt=""> |
− | + | <div class="overlay"> | |
− | </ | + | <h2>Carlos Andrés </h2> |
+ | <h2>Gil Gómez </h2><p> | ||
+ | Biología | ||
+ | </p> | ||
+ | </div> | ||
+ | </div> | ||
</div> | </div> | ||
+ | </td> | ||
+ | <td> | ||
+ | <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> | ||
+ | <div class="hovereffect"> | ||
+ | <img class="img-responsive" src="T--Pumas_Mexico--fra.jpg" alt=""> | ||
+ | <div class="overlay"> | ||
+ | <h2>Franklin Cruz Villegas</h2> | ||
+ | <p> | ||
+ | Biología | ||
+ | </p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </td> | ||
+ | <td> | ||
+ | <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> | ||
+ | <div class="hovereffect"> | ||
+ | <img class="img-responsive" src="loc.jpg" alt=""> | ||
+ | <div class="overlay"> | ||
+ | <h2>José Carlos Barrioz Osorio</h2> | ||
+ | <p> | ||
+ | Biología | ||
+ | </p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </td> | ||
+ | <td> | ||
+ | <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> | ||
+ | <div class="hovereffect"> | ||
+ | <img class="img-responsive" src="loc.jpg"alt=""> | ||
+ | <div class="overlay"> | ||
+ | <h2>Joaquin </h2> | ||
+ | <h2>Espinoza Evelio</h2> | ||
+ | <p> | ||
+ | Ing Mecatronica | ||
+ | </p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td> | ||
+ | <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> | ||
+ | <div class="hovereffect"> | ||
+ | <img class="img-responsive" src="T--Pumas_Mexico--ebv.jpg" alt=""> | ||
+ | <div class="overlay"> | ||
+ | <h2>Enrique </h2> | ||
+ | <h2> Zeferino Barrera Vargas</h2> | ||
+ | <p> | ||
+ | Biología | ||
+ | </p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </td> | ||
+ | <td> | ||
+ | <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> | ||
+ | <div class="hovereffect"> | ||
+ | <img class="img-responsive" src="T--Pumas_Mexico--agb.jpg" alt=""> | ||
+ | <div class="overlay"> | ||
+ | <h2>Alejandro </h2> | ||
+ | <h2>Guzman Vendrell</h2> | ||
+ | <p> | ||
+ | Biología | ||
+ | </p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </td> | ||
+ | <td> | ||
+ | <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> | ||
+ | <div class="hovereffect"> | ||
+ | <img class="img-responsive" src="T--Pumas_Mexico--hmix.jpg" alt=""> | ||
+ | <div class="overlay"> | ||
+ | <h2> Ilia Xrysw</h2> | ||
+ | <h2>Hernandez Mejia </h2> | ||
+ | <p> | ||
+ | QFB | ||
+ | </p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </td> | ||
+ | <td> | ||
+ | <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> | ||
+ | <div class="hovereffect"> | ||
+ | <img class="img-responsive" src="T--Pumas_Mexico--le.jpg" alt=""> | ||
+ | <div class="overlay"> | ||
+ | <h2>Laura Elena figueroa Bravo</h2> | ||
+ | <p> | ||
+ | Medicina | ||
+ | </p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td> | ||
+ | <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> | ||
+ | <div class="hovereffect"> | ||
+ | <img class="img-responsive" src="loc.jpg" alt=""> | ||
+ | <div class="overlay"> | ||
+ | <h2>Evelyn </h2> <h2> Polaco Mendoza</h2> | ||
+ | <p> | ||
+ | Biología | ||
+ | </p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </td> | ||
+ | <td> | ||
+ | <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> | ||
+ | <div class="hovereffect"> | ||
+ | <img class="img-responsive" src="loc.jpg" alt=""> | ||
+ | <div class="overlay"> | ||
+ | <h2>Alán Fernando Muñoz González | ||
− | + | </h2> | |
− | + | <p> | |
− | + | ||
+ | </p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </td> | ||
+ | <td> | ||
+ | <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> | ||
+ | <div class="hovereffect"> | ||
+ | <img class="img-responsive" src="loc.jpg" alt=""> | ||
+ | <div class="overlay"> | ||
+ | <h2>Anastacia Hernández Koutoucheva</h2> | ||
+ | <p> | ||
+ | LINK HERE | ||
+ | </p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </td> | ||
+ | </tr> | ||
+ | </table> | ||
</html> | </html> |
Revision as of 02:45, 18 October 2016
<
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|