Line 1: | Line 1: | ||
− | |||
− | |||
<style type="text/css"> | <style type="text/css"> | ||
+ | #apDiv1 { | ||
+ | position: absolute; | ||
+ | width: 200px; | ||
+ | height: 115px; | ||
+ | z-index: 1; | ||
+ | } | ||
+ | { | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | header { | |
− | width:100%; | + | 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%; | ||
+ | } | ||
− | + | nav ul { | |
− | + | list-style:none; | |
− | + | } | |
− | + | ||
− | + | nav > ul { | |
+ | display:table; | ||
+ | |||
width:100%; | width:100%; | ||
− | + | background:#000; | |
− | + | position:relative; | |
+ | } | ||
− | + | nav > ul li { | |
− | + | display:table-cell; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | nav > ul > li:hover > ul { | ||
+ | display:block; | ||
+ | height:100%; | ||
+ | } | ||
+ | nav > ul > li > ul { | ||
+ | display:block; | ||
+ | position:absolute; | ||
+ | background:#000; | ||
+ | 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:#5da5a2; | ||
+ | } | ||
− | + | nav > ul > li > a span { | |
− | + | background:#174459; | |
− | + | 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; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | < | + | </style> |
− | + | </head> | |
− | </ | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | < | + | <body> |
− | < | + | <header> |
− | + | <div id="apDiv1"> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | <div | + | |
− | + | ||
− | + | ||
− | < | + | <nav> |
− | </ | + | <ul> |
− | < | + | <li><a href="https://2016.igem.org/Team:Pumas_Mexico"><span class=""><i class="icon icon-home3"></i></span>HOME</a></li> |
− | < | + | <li><a href=""><span class=""><i class="icon icon-users"></i></span>TEAM</a><ul> |
− | < | + | <li><a href="https://2016.igem.org/Team:Pumas_Mexico/Team">Team</a></li> |
− | </ | + | <li><a href="https://2016.igem.org/Team:Pumas_Mexico/Collaborations">Collaborations</a></li> |
− | < | + | </ul> |
− | < | + | <li><a href=""><span class=""><i class="icon icon-paste"></i></span>PROJECT</a> |
− | < | + | <ul> |
− | < | + | <li><a href="https://2016.igem.org/Team:Pumas_Mexico/Description">Description</a></li> |
− | < | + | <li><a href="https://2016.igem.org/Team:Pumas_Mexico/Design">Design</a></li> |
− | < | + | <li><a href="https://2016.igem.org/Team:Pumas_Mexico/Experiments">Experiments</a></li> |
− | < | + | <li><a href="https://2016.igem.org/Team:Pumas_Mexico/Proof">Proof of consept</a></li> |
− | </ | + | <li><a href="https://2016.igem.org/Team:Pumas_Mexico/Demonstrate">Demostrate</a></li> |
+ | <li><a href="https://2016.igem.org/Team:Pumas_Mexico/Results">Results</a></li> | ||
+ | <li><a href="https://2016.igem.org/Team:Pumas_Mexico/Notebook">Notebook</a></li> | ||
+ | </ul></li><li><a href=""><span class=""><i class="icon icon-accessibility"></i></span>HUMANPRACTICES</a><ul> | ||
+ | <li><a href="https://2016.igem.org/Team:Pumas_Mexico/Human_Practices">Human Practices</a></li> | ||
+ | <li><a href="https://2016.igem.org/Team:Pumas_Mexico/HP/Silver">Silver</a></li> | ||
+ | <li><a href="https://2016.igem.org/Team:Pumas_Mexico/HP/Gold">Gold</a></li> | ||
+ | <li><a href="https://2016.igem.org/Team:Pumas_Mexico/Integrated_Practices">Integrated Practices</a></ui></li> | ||
+ | <li><a href="https://2016.igem.org/Team:Pumas_Mexico/Engagement">Engagment</a></li> | ||
+ | </ul></li> | ||
+ | <li><a href=""><span class=""><i class="icon icon-cogs"></i></span>PARTS</a> | ||
+ | <ul> | ||
+ | <li><a href="https://2016.igem.org/Team:Pumas_Mexico/Parts">Parts</a></li> | ||
+ | <li><a href="https://2016.igem.org/Team:Pumas_Mexico/Basic_Part">Basic Parts</a></li> | ||
+ | <li><a href="https://2016.igem.org/Team:Pumas_Mexico/Composite_Part">Composite parts</a></li> | ||
+ | <li><a href="https://2016.igem.org/Team:Pumas_Mexico/Part_Collection">Part colleccion</a></li> | ||
+ | </ul></li> | ||
+ | <li><a href="https://2016.igem.org/Team:Pumas_Mexico/Safety"><span class=""><i class="icon icon-lock"></i></span>SAFETY</a></li> | ||
+ | <li><a href="https://2016.igem.org/Team:Pumas_Mexico/Attributions"><span class=""><i class="icon icon-cogs"></i></span>ATRIBUTIONS</a> | ||
+ | <li><a href=""><span class=""><i class="icon icon-trophy"></i></span>AWARD</a><ul> | ||
+ | <li><a href="https://2016.igem.org/Team:Pumas_Mexico/Entrepreneurship">Entrepreneurship</a></li> | ||
+ | <li><a href="https://2016.igem.org/Team:Pumas_Mexico/Hardware">Hadware</a></li> | ||
+ | <li><a href="https://2016.igem.org/Team:Pumas_Mexico/Software">Software</a></li> | ||
+ | <li><a href="https://2016.igem.org/Team:Pumas_Mexico/Measurement">Masurement</a></li> | ||
+ | <li><a href="https://2016.igem.org/Team:Pumas_Mexico/Model">Model</a></li> | ||
+ | </ul></li> | ||
+ | </div> | ||
</div> | </div> |
Revision as of 15:48, 16 October 2016
<style type="text/css">
- apDiv1 {
position: absolute; width: 200px; height: 115px; z-index: 1; } { margin:0; padding:0; }
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%; }
nav ul { list-style:none; }
nav > ul { display:table;
width:100%; background:#000; position:relative; }
nav > ul li { display:table-cell; }
nav > ul > li:hover > ul {
display:block;
height:100%;
}
nav > ul > li > ul { display:block; position:absolute; background:#000; 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:#5da5a2; }
nav > ul > li > a span { background:#174459; 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; }
</style> </head>
<body> <header>
<nav>
- <a href="https://2016.igem.org/Team:Pumas_Mexico">HOME</a>
- <a href="">TEAM</a>
- <a href="https://2016.igem.org/Team:Pumas_Mexico/Team">Team</a>
- <a href="https://2016.igem.org/Team:Pumas_Mexico/Collaborations">Collaborations</a>
- <a href="">PROJECT</a>
- <a href="https://2016.igem.org/Team:Pumas_Mexico/Description">Description</a>
- <a href="https://2016.igem.org/Team:Pumas_Mexico/Design">Design</a>
- <a href="https://2016.igem.org/Team:Pumas_Mexico/Experiments">Experiments</a>
- <a href="https://2016.igem.org/Team:Pumas_Mexico/Proof">Proof of consept</a>
- <a href="https://2016.igem.org/Team:Pumas_Mexico/Demonstrate">Demostrate</a>
- <a href="https://2016.igem.org/Team:Pumas_Mexico/Results">Results</a>
- <a href="https://2016.igem.org/Team:Pumas_Mexico/Notebook">Notebook</a>
- <a href="">HUMANPRACTICES</a>
- <a href="https://2016.igem.org/Team:Pumas_Mexico/Human_Practices">Human Practices</a>
- <a href="https://2016.igem.org/Team:Pumas_Mexico/HP/Silver">Silver</a>
- <a href="https://2016.igem.org/Team:Pumas_Mexico/HP/Gold">Gold</a>
- <a href="https://2016.igem.org/Team:Pumas_Mexico/Integrated_Practices">Integrated Practices</a></ui>
- <a href="https://2016.igem.org/Team:Pumas_Mexico/Engagement">Engagment</a>
- <a href="">PARTS</a>
- <a href="https://2016.igem.org/Team:Pumas_Mexico/Parts">Parts</a>
- <a href="https://2016.igem.org/Team:Pumas_Mexico/Basic_Part">Basic Parts</a>
- <a href="https://2016.igem.org/Team:Pumas_Mexico/Composite_Part">Composite parts</a>
- <a href="https://2016.igem.org/Team:Pumas_Mexico/Part_Collection">Part colleccion</a>
- <a href="https://2016.igem.org/Team:Pumas_Mexico/Safety">SAFETY</a>
- <a href="https://2016.igem.org/Team:Pumas_Mexico/Attributions">ATRIBUTIONS</a>
- <a href="">AWARD</a>
- <a href="https://2016.igem.org/Team:Pumas_Mexico/Entrepreneurship">Entrepreneurship</a>
- <a href="https://2016.igem.org/Team:Pumas_Mexico/Hardware">Hadware</a>
- <a href="https://2016.igem.org/Team:Pumas_Mexico/Software">Software</a>
- <a href="https://2016.igem.org/Team:Pumas_Mexico/Measurement">Masurement</a>
- <a href="https://2016.igem.org/Team:Pumas_Mexico/Model">Model</a>
</div>
Inspiration
You can look at what other teams did to get some inspiration!
Here are a few examples:
- <a href="https://2014.igem.org/Team:METU_Turkey_team">METU Turkey </a>
- <a href="https://2014.igem.org/Team:Colombia/Members">Colombia</a>
- <a href="https://2014.igem.org/Team:Stony_Brook/Team">Stony Brook</a>
- <a href="https://2014.igem.org/Team:OUC-China/Team">OUC-China</a>
What should this page contain?
- Include pictures of your teammates, don’t forget instructors and advisors!
- 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.
- Take team pictures! Show us your school, your lab and little bit of your city.
- Remember that image galleries can help you showcase many pictures while saving space.
</html>