Skysea10101 (Talk | contribs) |
|||
Line 1: | Line 1: | ||
− | |||
<html> | <html> | ||
+ | <Style> | ||
+ | #header { | ||
+ | height: 200px; | ||
+ | width: 1000px; | ||
+ | background-color: #bdbdbd; | ||
+ | font-family: serif; | ||
+ | text-align: center; | ||
+ | } | ||
+ | #topMenu { | ||
+ | height : 250px; | ||
+ | width: 1000px; | ||
+ | margin-left: 20px; | ||
+ | margin-top: 20px; | ||
+ | } | ||
+ | #topMenu ul { | ||
+ | list-style-type: none; | ||
+ | margin: 0px; | ||
+ | padding: 0px; | ||
+ | } | ||
+ | #topMenu ul li { | ||
+ | list-style: none; | ||
+ | background-color: rgba(0,0,0,0.0); | ||
+ | float: left; | ||
+ | line-height: 30px; | ||
+ | vertical-align: middle; | ||
+ | text-align: left; | ||
+ | position: relative; | ||
+ | } | ||
+ | .menuLink, .submenuLink { | ||
+ | text-decoration: none; | ||
+ | display: block; | ||
+ | width: 95px; | ||
+ | font-weight: bold; | ||
+ | padding-left: 10px; | ||
+ | } | ||
+ | .menuLink { | ||
+ | color: black; | ||
+ | font-family: serif; | ||
+ | font-size: 80%; | ||
+ | } | ||
+ | .menuHome { | ||
+ | text-decoration: none; | ||
+ | display: block; | ||
+ | width: 95px; | ||
+ | font-weight: bold; | ||
+ | padding-left: 10px; | ||
+ | color: red; | ||
+ | font-family: serif; | ||
+ | font-size: 90%; | ||
+ | } | ||
+ | .topMenuLi:hovor .menuLink { | ||
+ | color: #888888 !important; | ||
+ | } | ||
+ | .submenuLink { | ||
+ | color: black !important; | ||
+ | margin-top: -1px; | ||
+ | text-align: left; | ||
+ | } | ||
+ | .longLink { | ||
+ | width: 250px; | ||
+ | } | ||
+ | .submenu { | ||
+ | position: absolute; | ||
+ | height: 0px; | ||
+ | overflow: hidden; | ||
+ | transition: height .2s; | ||
+ | font-family: sans-serif; | ||
+ | font-size: small; | ||
+ | } | ||
+ | .topMenuLi:hover .submenu { | ||
+ | height: 250px; | ||
+ | } | ||
+ | .submenuLink:hover { | ||
+ | color: #888888 !important; | ||
+ | } | ||
+ | </style> | ||
+ | <style> | ||
+ | .leftBox { | ||
+ | width: 200px | ||
+ | height: 100%; | ||
+ | color: black; | ||
+ | float: left; | ||
+ | text-align: center; | ||
+ | font-family: serif; | ||
+ | font-size: 150%; | ||
+ | border-right: 1px gray solid; | ||
+ | padding: 10px | ||
+ | } | ||
+ | .rightBox { | ||
+ | width: 800px; | ||
+ | color: black; | ||
+ | float: left; | ||
+ | padding-left: 20px; | ||
+ | text-align: left; | ||
+ | font-family: sans-serif; | ||
+ | } | ||
+ | </style> | ||
+ | <body> | ||
+ | <header id="header"> | ||
+ | <p></p><br> | ||
+ | <h1>BIOMARVEL</h1> | ||
+ | <h3>IGEM 2018: HIGHSCHOOL</h3> | ||
+ | </header> | ||
− | < | + | <nav id="topMenu"> |
− | < | + | <ul> |
− | < | + | <li><a class="menuHome" href="https://2018.igem.org/Team:BioMarvel">HOME</a></li> |
− | < | + | <li class="topMenuLi"> |
− | < | + | <a class="menuLink">PROJECT</a> |
− | < | + | <ul class="submenu"> |
− | < | + | <li><a class="submenuLink longLink" href="#">Overview</a></li> |
− | < | + | <li><a class="submenuLink longLink" href="#">Background</a></li> |
− | < | + | <li><a class="submenuLink longLink" href="#">Design</a></li> |
− | + | <li><a class="submenuLink longLink" href="#">Experiments</a></li> | |
− | + | <li><a class="submenuLink longLink" href="#">Results</a></li> | |
− | < | + | <li><a class="submenuLink longLink" href="#">Demonstrate</a></li> |
− | + | <li><a class="submenuLink longLink" href="#">Improve</a></li> | |
− | </ | + | </ul> |
− | + | </li> | |
− | + | <li class="topMenuLi"> | |
− | < | + | <a class="menuLink">PEOPLE</a> |
− | + | <ul class="submenu"> | |
− | < | + | <li><a class="submenuLink longLink" href="#">Members</a></li> |
− | < | + | <li><a class="submenuLink longLink" href="#">Advisors</a></li> |
− | < | + | <li><a class="submenuLink longLink" href="#">Attributions</a></li> |
− | <li> | + | <li><a class="submenuLink longLink" href="#">Collaborations</a></li> |
− | <li> <a href=" | + | </ul> |
− | <li> <a href=" | + | </li> |
− | </ul> | + | <li class="topMenuLi"> |
− | </ | + | <a class="menuLink">PARTS</a> |
− | + | <ul class="submenu"> | |
− | + | <li><a class="submenuLink longLink" href="#">Parts overview</a></li> | |
− | < | + | <li><a class="submenuLink longLink" href="#">Basic Parts</a></li> |
− | < | + | <li><a class="submenuLink longLink" href="#">Composite Parts</a></li> |
− | < | + | <li><a class="submenuLink longLink" href="#">Parts collection</a></li> |
− | + | </ul> | |
− | + | </li> | |
− | + | <li class="topMenuLi"> | |
− | < | + | <a class="menuLink">HUMAN PRACTICES</a> |
− | < | + | <ul class="submenu"> |
− | < | + | <li><a class="submenuLink longLink" href="#">Human Practices</a></li> |
− | < | + | <li><a class="submenuLink longLink" href="#">Public Education & Engagement</a></li> |
− | + | </ul> | |
− | < | + | </li> |
− | + | <li class="topMenuLi"> | |
− | + | <a class="menuLink">SAFETY</a> | |
− | + | <ul class="submenu"> | |
− | + | <li><a class="submenuLink longLink" href="#">Lab Safety</a></li> | |
− | < | + | <li><a class="submenuLink longLink" href="#">Safe Project Design</a></li> |
− | + | <li><a class="submenuLink longLink" href="#">Safe product Use</a></li> | |
− | + | </ul> | |
− | + | </li> | |
− | < | + | <li class="topMenuLi"> |
− | + | <a class="menuLink">NOTEBOOK</a> | |
− | < | + | <ul class="submenu"> |
− | < | + | <li><a class="submenuLink longLink" href="#">Demonstration</a></li> |
− | + | </ul> | |
− | + | </li> | |
− | < | + | <li><a class="menuLink" href="#">AWARDS</a></li> |
− | + | <li><a class="menuLink" href="https://igem.org/2018_Judging_Form?team=BioMarvel">JUDGING FORM</a></li> | |
− | < | + | </ul> |
− | <a href=" | + | </nav> |
− | + | <aside class="leftBox"> | |
− | </a> | + | <h3>PROJECT</h3> |
− | </ | + | </aside> |
− | + | <section class="rightBox"> | |
− | < | + | <p>contents</p> |
− | + | <p>blahblah</p> | |
− | < | + | </section> |
− | + | </body> | |
− | + | ||
− | + | ||
− | < | + | |
− | + | ||
− | + | ||
− | + | ||
− | < | + | |
− | + | ||
− | + | ||
− | + | ||
− | < | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | </a> | + | |
− | </ | + | |
− | + | ||
− | + | ||
− | </ | + | |
− | </ | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | < | + | |
− | < | + | |
− | < | + | |
− | + | ||
− | + | ||
− | + | ||
− | < | + | |
− | < | + | |
− | < | + | |
− | <ul> | + | |
− | <li> | + | |
− | < | + | |
− | < | + | |
− | < | + | |
− | + | ||
− | <li> | + | |
− | <li> | + | |
− | </ul> | + | |
− | </ | + | |
− | + | ||
− | + | ||
− | < | + | |
− | < | + | |
− | + | ||
− | + | ||
− | <ul> | + | |
− | <li> <a href=" | + | |
− | < | + | |
− | <li> <a href=" | + | |
− | <li> <a href="https:// | + | |
− | < | + | |
− | < | + | |
− | </ | + | |
− | </ | + | |
− | </ | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</html> | </html> |
Revision as of 00:01, 5 September 2018
BIOMARVEL
IGEM 2018: HIGHSCHOOL
contents
blahblah