Difference between revisions of "Team:Pumas Mexico/Team"

Line 372: Line 372:
 
</nav>
 
</nav>
 
</header>
 
</header>
−
<table border="0" align="center">
+
<head>
−
<tr>
+
<style type="text/css">
−
<td>
+
#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" >
 +
 
 
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
 
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
 
     <div class="hovereffect">
 
     <div class="hovereffect">
 
         <img class="https://static.igem.org/mediawiki/2016/thumb/1/16/T--Pumas_Mexico--xry.jpg/300px-T--Pumas_Mexico--xry.jpg" alt="">
 
         <img class="https://static.igem.org/mediawiki/2016/thumb/1/16/T--Pumas_Mexico--xry.jpg/300px-T--Pumas_Mexico--xry.jpg" alt="">
 
             <div class="overlay">
 
             <div class="overlay">
−
                 <h2>QFB</h2>
+
                 <h2>Chemical-Farmaceutical Biologi</h2>
 
                 <p class="icon-links">
 
                 <p class="icon-links">
−
                     Hernandez Mejía Ilia Xrysw
+
                      
 
                 </p>
 
                 </p>
 
             </div>
 
             </div>
 
     </div>
 
     </div>
 
</div>
 
</div>
 +
 
</td>
 
</td>
 +
<td style="decoration:none" >
 +
 +
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
 +
    <div class="hovereffect">
 +
        <img class="https://static.igem.org/mediawiki/2016/2/28/T--Pumas_Mexico--alon.jpg" alt="">
 +
            <div class="overlay">
 +
                <h2> Biologi</h2>
 +
                <p class="icon-links">
 +
                   
 +
                </p>
 +
            </div>
 +
    </div>
 +
</div>
 +
 +
</td>
 +
<td style="decoration:none" >
 +
 +
<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--car.jpg" alt="">
 +
            <div class="overlay">
 +
                <h2>Biologi</h2>
 +
                <p class="icon-links">
 +
                   
 +
                </p>
 +
            </div>
 +
    </div>
 +
</div>
 +
 +
</td>
 +
<td style="decoration:none" >
 +
 +
<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--itz.jpg" alt="">
 +
            <div class="overlay">
 +
                <h2>Biologi</h2>
 +
                <p class="icon-links">
 +
                   
 +
                </p>
 +
            </div>
 +
    </div>
 +
</div>
 +
 +
</td>
 +
 +
</tr>
 +
<tr style="decoration:none" >
 +
<td style="decoration:none" >
 +
 +
<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>Biologi</h2>
 +
                <p class="icon-links">
 +
                   
 +
                </p>
 +
            </div>
 +
    </div>
 +
</div>
 +
 +
</td>
 +
<td style="decoration:none" >
 +
 +
<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> Biologi</h2>
 +
                <p class="icon-links">
 +
                   
 +
                </p>
 +
            </div>
 +
    </div>
 +
</div>
 +
 +
</td>
 +
<td style="decoration:none" >
 +
 +
<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--jos.jpg" alt="">
 +
            <div class="overlay">
 +
                <h2>Biologi</h2>
 +
                <p class="icon-links">
 +
                   
 +
                </p>
 +
            </div>
 +
    </div>
 +
</div>
 +
 +
</td>
 +
<td style="decoration:none" >
 +
 +
<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--zab.jpg" alt="">
 +
            <div class="overlay">
 +
                <h2>Biologi</h2>
 +
                <p class="icon-links">
 +
                   
 +
                </p>
 +
            </div>
 +
    </div>
 +
</div>
 +
 +
</td>
 +
 +
</tr>
 +
<tr style="decoration:none" >
 +
<td style="decoration:none" >
 +
 +
<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--ev.jpg" alt="">
 +
            <div class="overlay">
 +
                <h2>Mecatronic</h2>
 +
                <p class="icon-links">
 +
                   
 +
                </p>
 +
            </div>
 +
    </div>
 +
</div>
 +
 +
</td>
 +
<td style="decoration:none" >
 +
 +
<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--sef.jpg" alt="">
 +
            <div class="overlay">
 +
                <h2> Mathematic </h2>
 +
                <p class="icon-links">
 +
                   
 +
                </p>
 +
            </div>
 +
    </div>
 +
</div>
 +
 +
</td>
 +
<td style="decoration:none" >
 +
 +
<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--verl.jpg" alt="">
 +
            <div class="overlay">
 +
                <h2>Biologi</h2>
 +
                <p class="icon-links">
 +
                   
 +
                </p>
 +
            </div>
 +
    </div>
 +
</div>
 +
 +
</td>
 +
<td style="decoration:none" >
 +
 +
<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--evl.jpg" alt="">
 +
            <div class="overlay">
 +
                <h2>Biologi</h2>
 +
                <p class="icon-links">
 +
                   
 +
                </p>
 +
            </div>
 +
    </div>
 +
</div>
 +
 +
</td>
 +
 +
</tr>
 +
<tr style="decoration:none" >
 +
<td style="decoration:none" >
 +
 +
<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--lau.jpg" alt="">
 +
            <div class="overlay">
 +
                <h2>Medicine</h2>
 +
                <p class="icon-links">
 +
                   
 +
                </p>
 +
            </div>
 +
    </div>
 +
</div>
 +
 +
</td>
 +
<td style="decoration:none" >
 +
 +
<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--mun.jpg" alt="">
 +
            <div class="overlay">
 +
                <h2>  </h2>
 +
                <p class="icon-links">
 +
                   
 +
                </p>
 +
            </div>
 +
    </div>
 +
</div>
 +
 +
</td>
 +
<td style="decoration:none" >
 +
 +
<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--rod.jpg" alt="">
 +
            <div class="overlay">
 +
                <h2></h2>
 +
                <p class="icon-links">
 +
                   
 +
                </p>
 +
            </div>
 +
    </div>
 +
</div>
 +
 +
</td>
 +
<td style="decoration:none" >
 +
 +
<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--joa.jpg" alt="">
 +
            <div class="overlay">
 +
                <h2>Graphic Designer</h2>
 +
                <p class="icon-links">
 +
                   
 +
                </p>
 +
            </div>
 +
    </div>
 +
</div>
 +
 +
</td>
 +
 
</tr>
 
</tr>
 
</table>
 
</table>
 +
</body>
 
</html>
 
</html>

Revision as of 02:29, 20 October 2016

Pumas_Mexico

Chemical-Farmaceutical Biologi

Biologi

Biologi

Biologi

Biologi

Biologi

Biologi

Biologi

Mecatronic

Mathematic

Biologi

Biologi

Medicine

Graphic Designer