|
|
(163 intermediate revisions by 3 users not shown) |
Line 1: |
Line 1: |
| + | {{UPMC-Paris/CSS}} |
| <html> | | <html> |
− | <!-- CSS-->
| |
− | <style type='text/css'>
| |
− | #top_title, #sideMenu{
| |
− | display: block;
| |
− | }
| |
− | #content{
| |
− | width:95%;
| |
− | position: absolute;
| |
− | right: 0;
| |
− | bottom: 0;
| |
− | left: 0;
| |
− | padding: 1rem;
| |
− | background-color: #efefef;
| |
− | text-align: center;
| |
− | }
| |
− | }
| |
− | p {
| |
− | color:#666666;
| |
− | }
| |
− | h3 {
| |
− | color: #222222;
| |
− | }
| |
− |
| |
− | #colorNav > ul{
| |
− |
| |
− | margin-left: auto;
| |
− | margin-right: auto;
| |
− | position:fixed;
| |
− | bottom:50px;
| |
− | }
| |
− | #colorNav > ul > li{ /* will style only the top level li */
| |
− | list-style: none;
| |
− | box-shadow: 0 0 10px rgba(100, 100, 100, 0.2) inset,1px 1px 1px #CCC;
| |
− | display: inline-block;
| |
− | line-height:2;
| |
− | margin: 0px;
| |
− | border-radius: 30px;
| |
− | position:relative;
| |
− | }
| |
− | #colorNav > ul > li > a{
| |
− | color:inherit;
| |
− | text-decoration:none !important;
| |
− | font-size:24px;
| |
− | padding: 30px;
| |
− | }
| |
− | #colorNav li ul{
| |
− | position:absolute;
| |
− | list-style:none;
| |
− | text-align:center;
| |
− | width:180px;
| |
− | left:50%;
| |
− | margin-left:-90px;
| |
− | top:-30px;
| |
− | font:bold 12px 'Open Sans Condensed', sans-serif;
| |
| | | |
− | /* This is important for the show/hide CSS animation */
| + | <!-- HTML--> |
− | max-height:0px;
| + | <div class="footer2"> |
− | overflow:hidden;
| + | |
− | border-radius: 30px;
| + | |
− | -webkit-transition:max-height 0.4s linear;
| + | |
− | -moz-transition:max-height 0.4 linear;
| + | |
− | transition:max-height 0.4 linear;
| + | |
− | }
| + | |
− | #colorNav li:hover ul{
| + | |
− | max-height:500px;
| + | |
− | }
| + | |
− | #colorNav li ul li{
| + | |
− | background-color:#369799;
| + | |
− | }
| + | |
| | | |
− | #colorNav li ul li a{
| + | <a href="#" display="flex" width="100%" height="100%"><nav class="image" id="LogoImg"></nav></a> |
− | padding:12px;
| + | |
− | color:#fff !important;
| + | |
− | text-decoration:none !important;
| + | |
− | display:block;
| + | |
− |
| + | |
| | | |
− | }
| + | </div> |
| | | |
− | #colorNav li ul li:nth-child(odd){ /* zebra stripes */
| + | <div class="footer"> |
− | background-color:#369799;
| + | |
− | }
| + | |
− | | + | |
− | #colorNav li ul li:hover{
| + | |
− | background-color:#369741;
| + | |
− | }
| + | |
− | | + | |
− | #colorNav li ul li:first-child{
| + | |
− | border-radius:3px 3px 0 0;
| + | |
− | margin-bottom:25px;
| + | |
− | position:relative;
| + | |
− | }
| + | |
− | | + | |
− | #colorNav li ul li:first-child:before{ /* the pointer tip */
| + | |
− | content:'';
| + | |
− | position:absolute;
| + | |
− | width:1px;
| + | |
− | height:1px;
| + | |
− | border:5px solid transparent;
| + | |
− | border-bottom-color:#313131;
| + | |
− | left:50%;
| + | |
− | bottom:10px;
| + | |
− | margin-left:-5px;
| + | |
− | }
| + | |
− | | + | |
− | #colorNav li ul li:last-child{
| + | |
− | border-bottom-left-radius:3px;
| + | |
− | border-bottom-right-radius:3px;
| + | |
− | }
| + | |
− | #colorNav li.green{
| + | |
− | /* This is the color of the menu item */
| + | |
− | background-color:#00c08b;
| + | |
− | | + | |
− | /* This is the color of the icon */
| + | |
− | color:#000000;
| + | |
− | }
| + | |
− | | + | |
− | #colorNav li.pink{background-color:#ea5080;color:#000000;}
| + | |
− | #colorNav li.blue{background-color:#53bfe2;color:#000000;}
| + | |
− | #colorNav li.brown{background-color:#f8c54d;color:#000000;}
| + | |
− | #colorNav li.purple{background-color:#df6dc2;color:#000000;}
| + | |
− | #colorNav li.orange{background-color:#df6dc2;color:#000000;}
| + | |
− | #colorNav li.green{background-color:#00FF00;color:#000000;}
| + | |
− | #colorNav li.yellow{background-color:#e2ff00;color:#000000;}
| + | |
− | #colorNav li.red{background-color:#f00000;color:#000000;}
| + | |
− | #colorNav li.grey{background-color:#d3d3d3;color:#000000;}
| + | |
− | </style> | + | |
− | | + | |
− | <!-- HTML-->
| + | |
− | <nav id="colorNav">
| + | |
− | <ul>
| + | |
− | <li class="green">
| + | |
− | <a href="https://2016.igem.org/Team:UPMC-Paris"> HOME </a>
| + | |
− | </li>
| + | |
− | <li class="red">
| + | |
− | <a href="#"> TEAM </a>
| + | |
− | <ul>
| + | |
− | <li><a href=" https://2016.igem.org/Team:UPMC-Paris/Team">Team</a></li>
| + | |
− | <li><a href="#">Collaborations</a></li>
| + | |
− | <!-- More dropdown options -->
| + | |
− | </ul>
| + | |
− | </li>
| + | |
− | <li class="blue">
| + | |
− | <a href="#"> PROJECT </a>
| + | |
− | <ul>
| + | |
− | <li><a href="https://2016.igem.org/Team:UPMC-Paris/Description">Description</a></li>
| + | |
− | <li><a href="https://2016.igem.org/Team:UPMC-Paris/Design">Design</a></li>
| + | |
− | <li><a href="https://2016.igem.org/Team:UPMC-Paris/Experiments">Experiments</a></li>
| + | |
− | <li><a href="https://2016.igem.org/Team:UPMC-Paris/Proof">Proof of Concept</a></li>
| + | |
− | <li><a href="https://2016.igem.org/Team:UPMC-Paris/Demonstrate">Demonstrate</a></li>
| + | |
− | <li><a href="https://2016.igem.org/Team:UPMC-Paris/Results">Results</a></li>
| + | |
− | <li><a href="https://2016.igem.org/Team:UPMC-Paris/Notebook">Notebook</a></li>
| + | |
− | <!-- More dropdown options -->
| + | |
− | </ul>
| + | |
− | </li>
| + | |
− | <li class="yellow">
| + | |
− | <a href="#"> PARTS </a>
| + | |
− | <ul>
| + | |
− | <li><a href="https://2016.igem.org/Team:UPMC-Paris/Parts">Parts</a></li>
| + | |
− | <li><a href="https://2016.igem.org/Team:UPMC-Paris/Basic_Part">Basic Parts</a></li>
| + | |
− | <li> <a href="https://2016.igem.org/Team:UPMC-Paris/Composite_Part">Composite Parts </a></li>
| + | |
− | <li> <a href="https://2016.igem.org/Team:UPMC-Paris/Part_Collection">Part Collection </a></li>
| + | |
− | <!-- More dropdown options -->
| + | |
− | </ul>
| + | |
− | </li>
| + | |
− | <li class="pink">
| + | |
− | <a href="https://2016.igem.org/Team:UPMC-Paris/Safety"> SAFETY </a>
| + | |
− | </li>
| + | |
− | <li class="orange">
| + | |
− | <a href="https://2016.igem.org/Team:UPMC-Paris/Attributions"> ATTRIBUTIONS </a>
| + | |
− | </li>
| + | |
− | <li class="brown"> <a href="#">HUMAN PRACTICES </a>
| + | |
− | <ul>
| + | |
− | <li> <a href="https://2016.igem.org/Team:UPMC-Paris/Human_Practices"> Human Practices </a></li>
| + | |
− | <li> <a href="https://2016.igem.org/Team:UPMC-Paris/HP/Silver">Silver </a></li>
| + | |
− | <li> <a href="https://2016.igem.org/Team:UPMC-Paris/HP/Gold">Gold </a></li>
| + | |
− | <li> <a href="https://2016.igem.org/Team:UPMC-Paris/Integrated_Practices">Integrated Practices </a></li>
| + | |
− | <li> <a href="https://2016.igem.org/Team:UPMC-Paris/Engagement">Engagement </a></li>
| + | |
− | </ul>
| + | |
− | </li>
| + | |
− | <li class="grey">
| + | |
− | <a href="#"> AWARDS </a>
| + | |
− | <ul>
| + | |
− | <li><a href="https://2016.igem.org/Team:UPMC-Paris/Entrepreneurship">Entrepreneurship </a></li>
| + | |
− | <li> <a href="https://2016.igem.org/Team:UPMC-Paris/Hardware">Hardware </a></li>
| + | |
− | <li> <a href="https://2016.igem.org/Team:UPMC-Paris/Software">Software </a></li>
| + | |
− | <li> <a href="https://2016.igem.org/Team:UPMC-Paris/Measurement"> Measurement </a></li>
| + | |
− | <li> <a href="https://2016.igem.org/Team:UPMC-Paris/Model">Model </a></li>
| + | |
| | | |
− | <!-- More dropdown options -->
| + | <a href="http://www.upmc.fr/fr/vie_des_campus/bourses/aides_financieres_ponctuelles/fonds_de_solidarite_et_de_developpement_des_initiatives_etudiantes.html" display="flex" width="100%" height="100%"><nav class="image" id="Sponsor1b"></nav></a> |
− | </ul>
| + | <a href="http://www.master.bmc.upmc.fr/fr/index.php" display="flex" width="100%" height="100%"><nav class="image" id="Sponsor2b"></nav></a> |
− | </li>
| + | <a href="http://www.biologie.upmc.fr/fr/index.html" display="flex" width="100%" height="100%"><nav class="image" id="Sponsor3b"></nav></a> |
| + | <a href="http://www.pmclab.fr" display="flex" width="100%" height="100%"><nav class="image" id="Sponsor4b"></nav></a> |
| + | <a href="http://www.u-pec.fr/etudiant/vie-etudiante/financer-un-projet/fonds-de-soutien-aux-initiatives-etudiantes-fsie--472899.kjsp" display="flex" width="100%" height="100%"><nav class="image" id="Sponsor5b"></nav></a> |
| + | <a href="http://lapaillasse.org" display="flex" width="100%" height="100%"><nav class="image" id="Sponsor6b"></nav></a> |
| + | <br><a href="http://www.servier.fr" display="flex" width="100%" height="100%"><nav class="image" id="Sponsor7b"></nav></a> |
| + | <a href="http://www.donath.com/info/p_highlights.html" display="flex" width="100%" height="100%"><nav class="image" id="Sponsor8b"></nav></a> |
| + | <a href="https://www.helloasso.com/associations/impact/collectes/creation-equipe-igem-impact" display="flex" width="100%" height="100%"><nav class="image" id="Sponsor9b"></nav></a> |
| + | <a href="http://eu.idtdna.com/site" display="flex" width="100%" height="100%"><nav class="image" id="Sponsor10b"></nav></a> |
| + | <a href="mailto:impact.igem@gmail.com" display="flex" width="100%" height="100%"><nav class="image" id="MailImg"></nav> |
| + | </a> |
| | | |
− | <!-- More menu items -->
| + | </div> |
| | | |
− | </ul>
| |
− | </nav>
| |
| </html> | | </html> |