|
|
| (6 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| − | <html>
| |
| − | <div id="navbar">
| |
| − | <img height="55px" width="55px" src="assets/Final-Logo.png">
| |
| − | <div id="menu">
| |
| − | <input type="checkbox" class="navToggle" id="navToggle">
| |
| − | <div class="main-menu first-menu">
| |
| − | <button id="people" class="dropbutton">People</button>
| |
| − | <div id="people-sub" class="sub-menu">
| |
| − | <a href="#">Team</a>
| |
| − | <a href="#">Collaborations</a>
| |
| − | <a href="#">Attributions</a>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="main-menu">
| |
| − | <button id="project" class="dropbutton">Project</button>
| |
| − | <div id="project-sub" class="sub-menu">
| |
| − | <a href="#">Description</a>
| |
| − | <a href="#">Design</a>
| |
| − | <a href="#">Results</a>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="main-menu">
| |
| − | <button id="modelling" class="dropbutton">Modelling</button>
| |
| − | <div id="modelling-sub" class="sub-menu">
| |
| − | <!-- Meet with Alex to discuss -->
| |
| − | <a href="#">Overview</a>
| |
| − | <a href="#">Enzyme Kinetics and Diffusion</a>
| |
| − | <a href="#">Molecular Dynamics</a>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="main-menu">
| |
| − | <button id="hp" class="dropbutton">Human Practices</button>
| |
| − | <div id="hp-sub" class="sub-menu">
| |
| − | <a href="#">Overview</a>
| |
| − | <a href="#">Outreach</a>
| |
| − | <a href="#">Education</a>
| |
| − | <a href="#">Legal</a>
| |
| − | <a href="#">Industry</a>
| |
| − | <a href="#">Scale Up</a>
| |
| − | <a href="#">Ethics and Diversity</a>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="main-menu">
| |
| − | <button id="parts" class="dropbutton">Parts</button>
| |
| − | <div id="parts-sub" class="sub-menu">
| |
| − | <a href="#">Overview</a>
| |
| − | <a href="#">New Parts</a>
| |
| − | <a href="#">Improved Part</a>
| |
| − | <a href="#">Software</a>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="main-menu">
| |
| − | <button id="doc" class="dropbutton">Documentation</button>
| |
| − | <div id="doc-sub" class="sub-menu">
| |
| − | <a href="#">Notebook</a>
| |
| − | <a href="#">Protocols</a>
| |
| − | <a href="#">Journal</a>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="main-menu">
| |
| − | <button id="judging" class="dropbutton">Judging</button>
| |
| − | <div id="judging-sub" class="sub-menu">
| |
| − | <a href="#">Integration</a>
| |
| − | <a href="#">Medals</a>
| |
| − | <a href="#">Judging Form</a>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| | | | |
| − |
| |
| − | <style>
| |
| − | /* NAVBAR */
| |
| − |
| |
| − | body {
| |
| − | margin: 0;
| |
| − | }
| |
| − |
| |
| − | .navToggle {
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | .navToggleLabel {
| |
| − | position: absolute;
| |
| − | top: 0;
| |
| − | left: 0;
| |
| − | margin-left: 1em;
| |
| − | height: 100%;
| |
| − | display: flex;
| |
| − | align-items: center;
| |
| − | }
| |
| − |
| |
| − | .navToggleLabel span,
| |
| − | .navToggleLabel span:before,
| |
| − | .navToggleLabel span:after {
| |
| − | display: block;
| |
| − | background: black;
| |
| − | height: 2px;
| |
| − | width: 2em;
| |
| − | border-radius: 2px;
| |
| − | position: relative;
| |
| − | }
| |
| − |
| |
| − | .navToggleLabel span:before,
| |
| − | .navToggleLabel span:after {
| |
| − | content: '';
| |
| − | position: absolute;
| |
| − | }
| |
| − |
| |
| − | .navToggleLabel span:before {
| |
| − | bottom: 7px;
| |
| − | }
| |
| − |
| |
| − | .navToggleLabel span:after {
| |
| − | top: 7px;
| |
| − | }
| |
| − |
| |
| − | .navToggle:checked ~ #menu {
| |
| − | transform: scale(1, 1);
| |
| − | }
| |
| − |
| |
| − | .navToggle:checked ~ #menu {
| |
| − | opacity: 1;
| |
| − | transition: opacity 250ms ease-in-out 250ms;
| |
| − | }
| |
| − |
| |
| − | #navbar {
| |
| − | background-color: #1E1E1E;
| |
| − | height: 60px;
| |
| − | color: white;
| |
| − | position: fixed;
| |
| − | width: 100%;
| |
| − | box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
| |
| − | }
| |
| − |
| |
| − | .sub-menu {
| |
| − | position: absolute;
| |
| − | background-color: #f9f9f9;
| |
| − | min-width: 160px;
| |
| − | box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
| |
| − | z-index: 1;
| |
| − | font-size: 0.9rem;
| |
| − | }
| |
| − |
| |
| − | .sub-menu a {
| |
| − | float: none;
| |
| − | color: black;
| |
| − | padding: 8px 10px;
| |
| − | text-decoration: none;
| |
| − | display: block;
| |
| − | text-align: left;
| |
| − | }
| |
| − |
| |
| − | .sub-menu a:hover {
| |
| − | background-color: #DBDBDB;
| |
| − | }
| |
| − |
| |
| − | @media screen and (min-width: 1020px) {
| |
| − | .navToggleLabel {
| |
| − | display: hide;
| |
| − | }
| |
| − |
| |
| − | #navbar {
| |
| − | height: 43px;
| |
| − | }
| |
| − |
| |
| − | .sub-menu {
| |
| − | top: 43px;
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | .sub-menu:hover {
| |
| − | display: block;
| |
| − | }
| |
| − |
| |
| − | .main-menu:hover {
| |
| − | color: #9C3132;
| |
| − | }
| |
| − |
| |
| − | #people:hover ~ #people-sub,
| |
| − | #project:hover ~ #project-sub,
| |
| − | #parts:hover ~ #parts-sub,
| |
| − | #modelling:hover ~ #modelling-sub,
| |
| − | #hp:hover ~ #hp-sub,
| |
| − | #doc:hover ~ #doc-sub,
| |
| − | #judging:hover ~ #judging-sub {
| |
| − | display: block;
| |
| − | }
| |
| − |
| |
| − | #navbar img {
| |
| − | padding: 10px 10px 10px 10px;
| |
| − | margin-left: 70px;
| |
| − | top: -5px;
| |
| − | border-radius: 100px;
| |
| − | position: absolute;
| |
| − | background-color: #1E1E1E;
| |
| − | box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
| |
| − | }
| |
| − |
| |
| − | #menu {
| |
| − | float: right;
| |
| − | overflow: hidden;
| |
| − | font-family: 'Lato';
| |
| − | margin-right: 50px;
| |
| − | }
| |
| − |
| |
| − | .main-menu {
| |
| − | float: left;
| |
| − | overflow: hidden;
| |
| − | text-transform: uppercase;
| |
| − | font-size: 1rem;
| |
| − | border: none;
| |
| − | outline: none;
| |
| − | color: white;
| |
| − | padding: 2px 5px 12px 0px;
| |
| − | background-color: inherit;
| |
| − | font-family: inherit;
| |
| − | margin: 0;
| |
| − | }
| |
| − |
| |
| − | .dropbutton {
| |
| − | background: none;
| |
| − | border: none;
| |
| − | color: inherit;
| |
| − | font: inherit;
| |
| − | font-size: inherit;
| |
| − | text-transform: uppercase;
| |
| − | padding: 11px 5px;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /* END NAVBAR */
| |
| − | </style>
| |
| − | </html>
| |
