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

 
(9 intermediate revisions by 2 users not shown)
Line 152: Line 152:
  
 
.hovereffect {
 
.hovereffect {
−
  width: 100%;
+
    width: 100%;
−
  height: 100%;
+
    height: 100%;
−
  float: left;
+
    float: left;
−
  overflow: hidden;
+
    overflow: hidden;
−
  position: relative;
+
    position: relative;
−
  text-align: center;
+
    text-align: center;
−
  cursor: default;
+
    cursor: default;
 
}
 
}
−
 
 
.hovereffect .overlay {
 
.hovereffect .overlay {
−
  position: absolute;
+
    width: 100%;
−
  overflow: hidden;
+
    position: absolute;
−
  opacity: 0;
+
    overflow: hidden;
−
  filter: alpha(opacity=0);
+
    left: 0;
−
  width: 55%;
+
top: auto;
−
  height: 81%;
+
bottom: 0;
−
  left: 22%;
+
padding: 1em;
−
  top: 10%;
+
height: 4.75em;
−
  border-radius: 80%;
+
background: #79FAC4;
−
  border: 2px solid #FFF;
+
color: #3c4a50;
−
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
+
-webkit-transition: -webkit-transform 0.35s;
−
  transition: opacity 0.35s, transform 0.35s;
+
transition: transform 0.35s;
−
  -webkit-transform: translate3d(50%,50%,0);
+
-webkit-transform: translate3d(0,100%,0);
−
  transform: translate3d(50%,50%,0);
+
transform: translate3d(0,100%,0);
−
}
+
−
 
+
−
.hovereffect:hover .overlay {
+
−
  background-color: rgba(0,0,0,0.3);
+
 
}
 
}
  
 
.hovereffect img {
 
.hovereffect img {
−
  display: block;
+
    display: block;
−
  position: relative;
+
    position: relative;
−
  -webkit-transition: all 0.35s;
+
-webkit-transition: -webkit-transform 0.35s;
−
  transition: all 0.35s;
+
transition: transform 0.35s;
 
}
 
}
  
 
.hovereffect:hover img {
 
.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');
+
-webkit-transform: translate3d(0,-10%,0);
−
  filter: brightness(1.4);
+
transform: translate3d(0,-10%,0);
−
  -webkit-filter: brightness(1.4);
+
 
}
 
}
  
 
.hovereffect h2 {
 
.hovereffect h2 {
−
  text-transform: uppercase;
+
    text-transform: uppercase;
−
  text-align: center;
+
    color: #fff;
−
  position: relative;
+
    text-align: center;
−
  font-size: 17px;
+
    position: relative;
−
  padding: 10px;
+
    font-size: 17px;
−
  background-color: transparent;
+
    padding: 10px;
−
  color: #FFF;
+
    background: rgba(0, 0, 0, 0.6);
−
  padding: 1em 0;
+
float: left;
−
  opacity: 0;
+
margin: 0px;
−
  filter: alpha(opacity=0);
+
display: inline-block;
−
  -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 {
+
.hovereffect a.info {
−
  color: #FFF;
+
    display: inline-block;
−
  padding: 1em 0;
+
    text-decoration: none;
−
  opacity: 0;
+
    padding: 7px 14px;
−
  filter: alpha(opacity=0);
+
    text-transform: uppercase;
−
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
+
color: #fff;
−
  transition: opacity 0.35s, transform 0.35s;
+
border: 1px solid #fff;
−
  -webkit-transform: translate3d(-150%,-400%,0);
+
margin: 50px 0 0 0;
−
  transform: translate3d(-150%,-400%,0);
+
background-color: transparent;
 +
}
 +
.hovereffect a.info:hover {
 +
    box-shadow: 0 0 5px #fff;
 
}
 
}
  
−
.hovereffect:hover a, .hovereffect:hover p, .hovereffect:hover h2, .hovereffect:hover .overlay {
+
 
−
  opacity: 1;
+
.hovereffect p.icon-links a {
−
  filter: alpha(opacity=100);
+
float: right;
−
  -webkit-transform: translate3d(0,0,0);
+
color: #3c4a50;
−
  transform: translate3d(0,0,0);
+
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 331: Line 372:
 
</nav>
 
</nav>
 
</header>
 
</header>
−
<table border="0" align="center">
+
<head>
−
<tr>
+
<style type="text/css">
−
<td>
+
#apDiv1 {
−
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
+
position: absolute;
−
    <div class="hovereffect">
+
width: 200px;
−
        <img class="img-responsive" src="T--Pumas_Mexico--ccn.jpg" alt="">
+
height: 115px;
−
            <div class="overlay">
+
z-index: 1;
−
                <h2>Carolina Guadalupe Cruz Núñez</h2>
+
}
−
<p>
+
.hovereffect {
−
Biología
+
    width: 100%;
−
</p>
+
     height: 100%;
−
            </div>
+
    float: left;
−
     </div>
+
    overflow: hidden;
−
</div>
+
    position: relative;
−
</td>
+
    text-align: center;
−
<td>
+
     cursor: default;
−
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
+
}
−
     <div class="hovereffect">
+
.hovereffect .overlay {
−
        <img class="img-responsive" src="T--Pumas_Mexico--zda.jpg" alt="">
+
    width: 100%;
−
            <div class="overlay">
+
    position: absolute;
−
                <h2>Zabdiel Díaz Morales</h2>
+
    overflow: hidden;
−
<p>
+
     left: 0;
−
Biología
+
top: auto;
−
</p>
+
bottom: 0;
−
            </div>
+
padding: 1em;
−
     </div>
+
height: 4.75em;
−
</div>
+
background: #79FAC4;
−
</td>
+
color: #3c4a50;
−
<td>
+
-webkit-transition: -webkit-transform 0.35s;
−
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
+
transition: transform 0.35s;
−
    <div class="hovereffect">
+
-webkit-transform: translate3d(0,100%,0);
−
        <img class="img-responsive" src="T--Pumas_Mexico--iaa.jpg" alt="">
+
transform: translate3d(0,100%,0);
−
            <div class="overlay">
+
}
−
                <h2>Ilse  </h2>
+
 
−
                <h2>Alonso Anaya</h2>
+
.hovereffect img {
−
<p>
+
    display: block;
−
Biología
+
     position: relative;
−
</p>
+
-webkit-transition: -webkit-transform 0.35s;
−
            </div>
+
transition: transform 0.35s;
−
     </div>
+
}
−
</div>
+
 
−
</td>
+
.hovereffect:hover img {
−
<td>
+
-webkit-transform: translate3d(0,-10%,0);
−
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
+
transform: translate3d(0,-10%,0);
−
    <div class="hovereffect">
+
}
−
        <img class="img-responsive" src="loc.jpg" alt="">
+
 
−
            <div class="overlay">
+
.hovereffect h2 {
−
                <h2>Paola Benítez Trejo</h2>
+
    text-transform: uppercase;
−
<p>
+
    color: #fff;
−
Biología
+
    text-align: center;
−
</p>
+
    position: relative;
−
            </div>
+
    font-size: 17px;
−
    </div>
+
     padding: 10px;
−
</div>
+
    background: rgba(0, 0, 0, 0.6);
−
</td>
+
float: left;
−
</tr>
+
margin: 0px;
−
<tr>
+
display: inline-block;
−
<td>
+
}
−
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
+
 
−
     <div class="hovereffect">
+
.hovereffect a.info {
−
        <img class="img-responsive" src="T--Pumas_Mexico--gil.jpg" alt="">
+
     display: inline-block;
−
            <div class="overlay">
+
    text-decoration: none;
−
                <h2>Carlos Andrés </h2>
+
     padding: 7px 14px;
−
<h2>Gil Gómez </h2><p>
+
    text-transform: uppercase;
−
Biología
+
color: #fff;
−
</p>
+
border: 1px solid #fff;
−
            </div>
+
margin: 50px 0 0 0;
−
     </div>
+
background-color: transparent;
−
</div>
+
}
−
</td>
+
.hovereffect a.info:hover {
−
<td>
+
     box-shadow: 0 0 5px #fff;
−
<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">
+
.hovereffect p.icon-links a {
−
                <h2>Franklin Cruz Villegas</h2>
+
float: right;
−
<p>
+
color: #3c4a50;
−
Biología
+
font-size: 1.4em;
−
</p>
+
}
−
            </div>
+
 
−
     </div>
+
.hovereffect:hover p.icon-links a:hover,
−
</div>
+
.hovereffect:hover p.icon-links a:focus {
−
</td>
+
color: #252d31;
−
<td>
+
}
−
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
+
 
−
    <div class="hovereffect">
+
.hovereffect h2,
−
        <img class="img-responsive" src="loc.jpg" alt="">
+
.hovereffect p.icon-links a {
−
            <div class="overlay">
+
-webkit-transition: -webkit-transform 0.35s;
−
                <h2>José Carlos Barrioz Osorio</h2>
+
transition: transform 0.35s;
−
<p>
+
-webkit-transform: translate3d(0,200%,0);
−
Biología
+
transform: translate3d(0,200%,0);
−
</p>
+
}
−
            </div>
+
 
−
    </div>
+
.hovereffect p.icon-links a span:before {
−
</div>
+
display: inline-block;
−
</td>
+
padding: 8px 10px;
−
<td>
+
speak: none;
−
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
+
-webkit-font-smoothing: antialiased;
−
    <div class="hovereffect">
+
-moz-osx-font-smoothing: grayscale;
−
        <img class="img-responsive" src="loc.jpg"alt="">
+
}
−
            <div class="overlay">
+
 
−
                <h2>Joaquin  </h2>
+
 
−
                <h2>Espinoza Evelio</h2>
+
.hovereffect:hover .overlay,
−
<p>
+
.hovereffect:hover h2,
−
Ing Mecatronica
+
.hovereffect:hover p.icon-links a {
−
</p>
+
-webkit-transform: translate3d(0,0,0);
−
            </div>
+
transform: translate3d(0,0,0);
−
    </div>
+
}
−
</div>
+
 
−
</td>
+
.hovereffect:hover h2 {
−
</tr>
+
-webkit-transition-delay: 0.05s;
−
<tr>
+
transition-delay: 0.05s;
−
<td>
+
}
−
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
+
 
−
    <div class="hovereffect">
+
.hovereffect:hover p.icon-links a:nth-child(3) {
−
        <img class="img-responsive" src="T--Pumas_Mexico--ebv.jpg" alt="">
+
-webkit-transition-delay: 0.1s;
−
            <div class="overlay">
+
transition-delay: 0.1s;
−
                <h2>Enrique </h2>
+
}
−
                <h2> Zeferino Barrera Vargas</h2>
+
 
−
<p>
+
.hovereffect:hover p.icon-links a:nth-child(2) {
−
Biología
+
-webkit-transition-delay: 0.15s;
−
</p>
+
transition-delay: 0.15s;
−
            </div>
+
}
−
    </div>
+
 
−
</div>
+
.hovereffect:hover p.icon-links a:first-child {
−
</td>
+
-webkit-transition-delay: 0.2s;
−
<td>
+
transition-delay: 0.2s;
−
<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">
+
</style>
−
                <h2>Alejandro </h2>
+
</head>
−
                  <h2>Guzman Vendrell</h2>
+
 
−
<p>
+
<body>
−
Biología
+
<table>
−
</p>
+
<tr style="decoration:none" >
−
            </div>
+
<td style="decoration:none" >
−
    </div>
+
 
−
</div>
+
<img src"https://static.igem.org/mediawiki/2016/thumb/0/00/T--Pumas_Mexico--teamse.jpg/800px-T--Pumas_Mexico--teamse.jpg">
−
</td>
+
−
<td>
+
−
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
+
−
    <div class="hovereffect">
+
−
        <img class="img-responsive" src="https://static.igem.org/mediawiki/2016/8/86/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="https://static.igem.org/mediawiki/2016/f/f0/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>
 
</td>
 +
 
</tr>
 
</tr>
 
</table>
 
</table>
 +
</body>
 
</html>
 
</html>

Latest revision as of 03:54, 20 October 2016

Pumas_Mexico