(32 intermediate revisions by the same user not shown) | |||
Line 2: | Line 2: | ||
<head> | <head> | ||
− | + | <!-- | |
− | + | > CSS is inlined into the webpage for sake of speed | |
+ | --> | ||
+ | |||
+ | <!-- Banner CSS --> | ||
<style> | <style> | ||
+ | |||
+ | #content { | ||
+ | width: 100%; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | #bars_item img { | ||
+ | max-width: none; | ||
+ | } | ||
+ | |||
+ | #top_title { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | #content { | ||
+ | margin-top: -18px; | ||
+ | } | ||
+ | |||
+ | #sideMenu { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | .ucla-scroll-down { | ||
+ | display: block; | ||
+ | margin: 10px auto; | ||
+ | width: 50px; | ||
+ | } | ||
+ | .top-bar { | ||
+ | width: 100%; | ||
+ | } | ||
+ | #header-menu h2 { | ||
+ | color: white; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | body { | ||
+ | margin: 0; | ||
+ | margin-top: 16px; | ||
+ | } | ||
+ | |||
+ | #header-bar { | ||
+ | width: 100%; | ||
+ | height: 10em; | ||
+ | background-color: #00004d; | ||
+ | } | ||
+ | |||
+ | #footer-bar { | ||
+ | width: 100%; | ||
+ | height: 3em; | ||
+ | background-color: #00004d; | ||
+ | } | ||
+ | |||
+ | #sponsor-footer-bar { | ||
+ | width: 100%; | ||
+ | height: 3em; | ||
+ | background-color: darkgray; | ||
+ | } | ||
+ | |||
+ | #sponsor-footer-bar img { | ||
+ | display: inline-block; | ||
+ | height: 3em; | ||
+ | width: auto; | ||
+ | } | ||
+ | |||
+ | #footer-bar a { float: right; } | ||
+ | |||
+ | #social-bar { margin-right: 3em; } | ||
+ | |||
+ | .social-button { | ||
+ | padding: .25em 1.5em 0em 1.5em; | ||
+ | width: 2.5em; | ||
+ | height: auto; | ||
+ | } | ||
+ | |||
+ | #header-logo-ucla-container { float: left; } | ||
+ | |||
+ | #header-menu { | ||
+ | float: right; | ||
+ | font-family: sans-serif; | ||
+ | margin-right: 9em; | ||
+ | margin-top: 2.5em; | ||
+ | list-style-type: none; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | #header-logo-ucla { | ||
+ | width: 10em; | ||
+ | height: auto; | ||
+ | margin-left: 1.5em; | ||
+ | margin-top: .75em; | ||
+ | } | ||
+ | |||
+ | .header-logo-general { | ||
+ | width: 7em; | ||
+ | height: auto; | ||
+ | } | ||
+ | |||
+ | .header-logo-general-container { | ||
+ | position: absolute; | ||
+ | right: 1em; | ||
+ | top: 2.9em; | ||
+ | } | ||
+ | |||
+ | .dropdown { | ||
+ | display: inline-block; | ||
+ | width: 11em; | ||
+ | } | ||
+ | |||
+ | .dropdown:hover { | ||
+ | background-color: #001a66; | ||
+ | border-top-right-radius: 10px; | ||
+ | border-top-left-radius: 10px; | ||
+ | } | ||
+ | |||
+ | .dropdown:hover .dropdown-content { | ||
+ | background-color: #001a66; | ||
+ | border-bottom-right-radius: 10px; | ||
+ | border-bottom-left-radius: 10px; | ||
+ | } | ||
+ | |||
+ | .dropdown a { | ||
+ | display: inline-block; | ||
+ | width: 100%; | ||
+ | color: white; | ||
+ | text-align: center; | ||
+ | text-decoration: none; | ||
+ | font-size: 1.2em; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | .dropdown-content { | ||
+ | display: none; | ||
+ | position: absolute; | ||
+ | width: 11em; | ||
+ | background-color: #003366; | ||
+ | } | ||
+ | |||
+ | .dropdown:hover .dropdown-content { display: block; } | ||
+ | |||
+ | .dropdown-content a:last-child:hover { | ||
+ | border-bottom-left-radius: 10px; | ||
+ | border-bottom-right-radius: 10px; | ||
+ | } | ||
+ | |||
+ | .dropdown-content a { | ||
+ | color: white; | ||
+ | padding-top: .7em; | ||
+ | padding-bottom: .7em; | ||
+ | text-align: center; | ||
+ | text-decoration: none; | ||
+ | display: block; | ||
+ | border-top-style: solid; | ||
+ | border-top-color: white; | ||
+ | border-top-width: 2px; | ||
+ | } | ||
+ | |||
+ | .dropdown-content a:hover { background-color: #001a33; } | ||
+ | |||
+ | #project-header { | ||
+ | width: 100%; | ||
+ | height: 12em; | ||
+ | background-color: #1b1b32; | ||
+ | border-top: solid 1.5px white; | ||
+ | border-bottom: solid 1px white; | ||
+ | text-align: center; | ||
+ | } | ||
</style> | </style> | ||
+ | </head> | ||
<link rel="stylesheet" href="https://2016.igem.org/Team:UCLA/core/customcss?action=raw&ctype=text/css" /> | <link rel="stylesheet" href="https://2016.igem.org/Team:UCLA/core/customcss?action=raw&ctype=text/css" /> | ||
− | < | + | <div id="header-bar"> |
− | < | + | <div id="header-logo-ucla-container"> |
+ | <a href="https://2016.igem.org/Team:UCLA"><img id="header-logo-ucla" src="https://static.igem.org/mediawiki/2016/8/8f/UCLA_iGEM_Logo.png"></a> | ||
+ | </div> | ||
+ | <div class="header-logo-general-container"> | ||
+ | <a target="_blank" href="https://2016.igem.org"><img class="header-logo-general" src="https://static.igem.org/mediawiki/2016/b/b2/T--UCLA--logowhite.png"></a> | ||
+ | </div> | ||
+ | <div id="header-menu-container"> | ||
+ | <ul id="header-menu"> | ||
+ | <li class="dropdown"> | ||
+ | <a><h2>Projects</h2></a> | ||
+ | <div class="dropdown-content"> | ||
+ | <a href="https://2016.igem.org/Team:UCLA/Protein_Cages">Protein Cages</a> | ||
+ | <a href="https://2016.igem.org/Team:UCLA/Super_Soldier_Bacteria">Super Soldier Systems</a> | ||
+ | <a href="https://2016.igem.org/Team:UCLA/InterLab">Interlab Study</a> | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | <li class="dropdown"> | ||
+ | <a href="https://2016.igem.org/Team:UCLA/Parts"><h2>Parts</h2></a> | ||
+ | <div class="dropdown-content"> | ||
+ | <a href="https://2016.igem.org/Team:UCLA/Basic_Part">Basic Parts</a> | ||
+ | <a href="https://2016.igem.org/Team:UCLA/Composite_Part">Composite Parts</a> | ||
+ | <a href="https://2016.igem.org/Team:UCLA/Part_Collection">Part Collection</a> | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | <li class="dropdown"> | ||
+ | <a><h2>Outreach</h2></a> | ||
+ | <div class="dropdown-content"> | ||
+ | <a href="https://2016.igem.org/Team:UCLA/HP/Silver">Human Practices</a> | ||
+ | <a href="https://2016.igem.org/Team:UCLA/Collaborations">Collaborations</a> | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | <li class="dropdown"> | ||
+ | <a><h2>Judging</h2></a> | ||
+ | <div class="dropdown-content"> | ||
+ | <a href="https://2016.igem.org/Team:UCLA/Medal_Requirements">Medal Requirements</a> | ||
+ | <a href="https://2016.igem.org/Team:UCLA/Safety">Safety</a> | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | <li class="dropdown"> | ||
+ | <a><h2>Team</h2></a> | ||
+ | <div class="dropdown-content"> | ||
+ | <a href="https://2016.igem.org/Team:UCLA/Team">Meet the Team</a> | ||
+ | <a href="https://2016.igem.org/Team:UCLA/Attributions">Attributions</a> | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <script> | ||
// This is the jquery part of your template. Try not modify any of this code since it makes your menu work. | // This is the jquery part of your template. Try not modify any of this code since it makes your menu work. | ||
Latest revision as of 03:54, 20 October 2016