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

(Prototype team page)
 
 
(39 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
{{Pumas_Mexico}}
 
 
<html>
 
<html>
 +
<head>
 +
<meta charset="utf-8">
 +
<title>Pumas_Mexico</title>
 +
<style type="text/css">
  
 +
#apDiv1 {
 +
position: absolute;
 +
width: 200px;
 +
height: 115px;
 +
z-index: 1;
 +
align: center;
 +
}
 +
{
 +
margin:0;
 +
padding:0;
 +
}
  
  
−
<div class="column full_size" >
 
  
−
<p>In this page you can introduce your team members, instructors, and advisors. </p>
+
header {
 +
margin-top:10px;
 +
    width: 100%;
 +
    overflow: hidden;
 +
    height: 150px;
 +
    position: relative;
 +
}
  
 +
nav {
 +
    top:-20px;
 +
    position: absolute;
 +
    left:0;
 +
    right:0;
 +
margin:20px auto;
 +
max-width:1000px;
 +
width:90%;
 +
}
  
−
</div>
+
nav ul {
 +
list-style:none;
 +
}
  
−
<div class="column half_size" >
+
nav > ul {
−
<h5>Inspiration</h5>
+
display:table;
−
<p>You can look at what other teams did to get some inspiration! <br />
+
−
Here are a few examples:</p>
+
width:100%;
−
<ul>
+
background:#3CC;
−
<li><a href="https://2014.igem.org/Team:METU_Turkey_team">METU Turkey </a></li>
+
position:relative;
−
<li><a href="https://2014.igem.org/Team:Colombia/Members">Colombia</a></li>
+
}
−
<li><a href="https://2014.igem.org/Team:Stony_Brook/Team">Stony Brook</a></li>
+
 
−
<li><a href="https://2014.igem.org/Team:OUC-China/Team">OUC-China</a></li>
+
nav > ul li {
−
</ul>
+
display:table-cell;
 +
}
 +
 
 +
 
 +
nav > ul > li:hover > ul {
 +
display:block;
 +
height:100%;
 +
}
 +
 
 +
nav > ul > li > ul {
 +
display:block;
 +
position:absolute;
 +
background:#5a68a3;
 +
left:0;
 +
right:0;
 +
overflow:hidden;
 +
height:0%;
 +
-webkit-transition: all .3s ease;
 +
-moz-transition: all .3s ease;
 +
-ms-transition: all .3s ease;
 +
-o-transition: all .3s ease;
 +
transition: all .3s ease;
 +
}
 +
 
 +
nav > ul li a {
 +
color:#fff;
 +
display:block;
 +
line-height:20px;
 +
padding:20px;
 +
position: relative;
 +
text-align:center;
 +
text-decoration:none;
 +
-webkit-transition: all .3s ease;
 +
-moz-transition: all .3s ease;
 +
-ms-transition: all .3s ease;
 +
-o-transition: all .3s ease;
 +
transition: all .3s ease;
 +
}
 +
 
 +
nav > ul > li > ul > li a:hover {
 +
background:#d1ae18;
 +
}
 +
 
 +
nav > ul > li > a span {
 +
background:#283684;
 +
display:block;
 +
height:100%;
 +
width:100%;
 +
left:0;
 +
position:absolute;
 +
top:-55px;
 +
-webkit-transition: all .3s ease;
 +
-moz-transition: all .3s ease;
 +
-ms-transition: all .3s ease;
 +
-o-transition: all .3s ease;
 +
transition: all .3s ease;
 +
}
 +
 
 +
nav > ul > li > a span .icon {
 +
display:block;
 +
line-height:60px;
 +
}
 +
 
 +
nav > ul > li > a:hover > span {
 +
top:0;
 +
}
 +
 
 +
 
 +
nav ul li a .primero {
 +
background:#0e5061;
 +
}
 +
 
 +
nav ul li a .segundo {
 +
background:#5da5a2;
 +
}
 +
 
 +
nav ul li a .tercero {
 +
background:#f25724;
 +
}
 +
 
 +
nav ul li a .cuarto {
 +
background:#174459;
 +
}
 +
 
 +
nav ul li a .quinto {
 +
background:#37a4d9;
 +
}
 +
 
 +
#apDiv2 {
 +
position: absolute;
 +
width: 200px;
 +
height: 115px;
 +
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 {
 +
    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>
 +
<center>
 +
<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>
 +
</center>
 +
</DIV>
 +
</p>
  
−
<div class="column half_size" >
+
<header>
−
<h5>What should this page contain?</h5>
+
 
 +
  <font face="Arial, Helvetica, sans-serif">
 +
  <center>
 +
  <nav align="center">
 +
  <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=""><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/Collaborations"  style="text-decoration:none"><font color="#FFFFFF" face="Lucida Sans Unicode, Lucida Grande, sans-serif">Collaborations</font></a></li>
 +
</ul>
 +
 
 +
<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>
−
<li> Include pictures of your teammates, don’t forget instructors and advisors! </li>
+
 
−
<li>You can add a small biography or a few words from each team member, to tell us what you like, and what motivated you to participate in iGEM.</li>
+
<li><a href="https://2016.igem.org/Team:Pumas_Mexico/Description" style="text-decoration:none"><font color="#FFFFFF" face="Lucida Sans Unicode, Lucida Grande, sans-serif">Description</font></a></li>
−
<li>Take team pictures! Show us your school, your lab and little bit of your city.</li>
+
 
−
<li>Remember that image galleries can help you showcase many pictures while saving space.</li>
+
<li><a href="https://2016.igem.org/Team:Pumas_Mexico/Design"  style="text-decoration:none"><font color="#FFFFFF" face="Lucida Sans Unicode, Lucida Grande, sans-serif">Design</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 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/Results"  style="text-decoration:none"><font color="#FFFFFF" face="Lucida Sans Unicode, Lucida Grande, sans-serif">Results</font></a></li>
 +
 
 +
<li><a href="https://2016.igem.org/Team:Pumas_Mexico/Notebook"  style="text-decoration:none"><font color="#FFFFFF" face="Lucida Sans Unicode, Lucida Grande, sans-serif">Notebook</font></a></li>
 +
 
 
</ul>
 
</ul>
−
</div>
 
  
 +
</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/HP/Silver"  style="text-decoration:none"><font color="#FFFFFF" face="Lucida Sans Unicode, Lucida Grande, sans-serif">Silver</font></a></li>
 +
 +
<li><a href="https://2016.igem.org/Team:Pumas_Mexico/HP/Gold"  style="text-decoration:none"><font color="#FFFFFF" face="Lucida Sans Unicode, Lucida Grande, sans-serif">Gold</font></a></li>
 +
 +
<li><a href="https://2016.igem.org/Team:Pumas_Mexico/Integrated_Practices"  style="text-decoration:none"><font color="#FFFFFF" face="Lucida Sans Unicode, Lucida Grande, sans-serif">Integrated Practices</font></a></ui></li>
 +
 +
<li><a href="https://2016.igem.org/Team:Pumas_Mexico/Engagement"  style="text-decoration:none"><font color="#FFFFFF" face="Lucida Sans Unicode, Lucida Grande, sans-serif">Engagment</font></a></li>
 +
</ul></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">PARTS</font></a> 
 +
  <ul>
 +
 
 +
<li><a href="https://2016.igem.org/Team:Pumas_Mexico/Parts"  style="text-decoration:none"><font color="#FFFFFF" face="Lucida Sans Unicode, Lucida Grande, sans-serif">Parts</font></a></li>
 +
 +
<li><a href="https://2016.igem.org/Team:Pumas_Mexico/Basic_Part"  style="text-decoration:none"><font color="#FFFFFF" face="Lucida Sans Unicode, Lucida Grande, sans-serif">Basic Parts</font></a></li>
 +
 +
<li><a href="https://2016.igem.org/Team:Pumas_Mexico/Composite_Part"  style="text-decoration:none"><font color="#FFFFFF" face="Lucida Sans Unicode, Lucida Grande, sans-serif">Composite parts</font></a></li>
 +
 +
<li><a href="https://2016.igem.org/Team:Pumas_Mexico/Part_Collection"  style="text-decoration:none"><font color="#FFFFFF" face="Lucida Sans Unicode, Lucida Grande, sans-serif">Part colleccion</font></a></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/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/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/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/Hardware"  style="text-decoration:none"><font color="#FFFFFF" face="Lucida Sans Unicode, Lucida Grande, sans-serif">Hadware</font></a></li>
 +
 +
<li><a href="https://2016.igem.org/Team:Pumas_Mexico/Software"  style="text-decoration:none"><font color="#FFFFFF" face="Lucida Sans Unicode, Lucida Grande, sans-serif">Software</font></a></li>
 +
 +
<li><a href="https://2016.igem.org/Team:Pumas_Mexico/Measurement"  style="text-decoration:none"><font color="#FFFFFF" face="Lucida Sans Unicode, Lucida Grande, sans-serif">Masurement</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>
 +
</nav>
 +
</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>
  
 +
</tr>
 +
</table>
 +
</body>
 
</html>
 
</html>

Latest revision as of 03:54, 20 October 2016

Pumas_Mexico