BloonCorps (Talk | contribs) |
|||
Line 1: | Line 1: | ||
<html> | <html> | ||
− | + | <head> | |
− | + | <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Nunito" /> | |
− | + | <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lato" /> | |
− | + | <meta charset="utf-8"> | |
− | + | <meta name="HandheldFriendly" content="True"> | |
− | + | <meta name="MobileOptimized" content="320"> | |
− | + | <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1"> | |
− | + | <script src="../../js/ios-orientationchange-fix.min.js"></script> | |
− | + | ||
− | + | ||
− | + | ||
<style> | <style> | ||
− | + | *{ | |
− | + | font-family: Tahoma, Nunito, Lato, !important; | |
− | } | + | } |
+ | |||
+ | #content { | ||
+ | padding: 0% 0 0 0; | ||
+ | style = 'background-color: #808080'; | ||
+ | } | ||
− | + | p { | |
− | + | font-family: Tahoma, Nunito, serif !important; | |
− | + | text-align: justified !important; | |
− | } | + | font-size: 18px; |
+ | } | ||
+ | |||
+ | b { | ||
+ | font-family: Tahoma, Nunito, serif !important; | ||
+ | font-weight: 700; | ||
+ | text-align: justified !important; | ||
+ | font-size: 18px; | ||
+ | } | ||
+ | |||
+ | .narration_bold {font-weight: 700; | ||
+ | font-size: 3;} | ||
+ | |||
+ | .narration_bold { | ||
+ | font-family: Tahoma, Nunito, serif | ||
+ | !important; | ||
+ | font-weight: 700; | ||
+ | text-align: justified !important; | ||
+ | font-size: 18px;} | ||
− | + | .bold_text { | |
− | + | font-weight: 700; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | h1, h2, h3, h4 { | |
− | + | font-family: Tahoma, Lato, serif !important; | |
− | + | font-size: 16px; | |
− | + | text-align: justify; | |
− | + | line-height: 1.5; | |
− | + | font-weight: bold; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ul, ol { | |
− | + | font-family: Tahoma, Nunito, serif !important; | |
− | + | vertical-align: middle !important; | |
− | + | font-size: 16px; | |
− | + | text-align: justify; | |
− | + | line-height: 1.5; | |
− | + | } | |
− | + | body { | |
− | + | font-size: 16px; | |
− | + | padding: 0 0%; | |
− | + | box-sizing: border-box; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | img { | |
− | + | max-width: 100%; | |
− | } | + | height: auto; |
+ | } | ||
− | + | { | |
− | + | box-sizing: border-box; | |
− | + | } | |
− | + | .bulleted_list { | |
− | + | list-style-type: square; | |
− | + | } | |
− | + | ||
− | + | #home_logo, #sideMenu { display:none; } | |
+ | #sideMenu, #top_title, .patrollink {display:none;} | ||
+ | #content { margin:0px; padding:0px; width:100%;} | ||
+ | body {background-color: #fff;} | ||
− | + | *{ | |
− | + | font-family: Nunito, Lato, !important; | |
− | + | } | |
− | + | ||
− | + | #content { | |
− | + | padding: 4% 0 0 0; | |
− | + | } | |
− | + | ||
− | + | p { | |
− | + | font-family: Nunito, serif !important; | |
− | + | font-size: 16px !important; | |
− | + | text-align: justify; | |
− | + | line-height: 1.5; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | center { | |
− | + | font-family: Nunito, serif !important; | |
− | + | line-height: 1.5; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | h1, h2, h3, h4 { | |
− | + | font-family: Lato, serif !important; | |
− | + | text-align: justify; | |
− | + | line-height: 1.5; | |
− | + | font-weight: bold; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ul, ol { | |
− | + | font-family: Nunito, serif !important; | |
− | + | font-size: 16px !important; | |
− | + | text-align: justify; | |
− | + | line-height: 1.5; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | body { | |
− | + | font-size: 16px !important; | |
− | + | padding: 0 10%; | |
− | + | box-sizing: border-box; | |
+ | } | ||
− | + | img { | |
− | + | max-width: 100%; | |
− | + | height: auto; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | { | |
− | + | box-sizing: border-box; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | .bulleted_list { | |
− | + | list-style-type: square; | |
− | + | } | |
− | + | ul { | |
− | + | list-style: none; | |
− | + | } | |
− | + | nav { | |
− | + | text-align: center; | |
− | + | display: flex; | |
− | + | align-items: center; | |
− | + | min-height: 6vH; | |
− | + | background-color: #993233; | |
− | + | font-family: Lato, serif; | |
+ | position: fixed; | ||
+ | width: 100%; | ||
+ | top: 2px; | ||
+ | left: 0; | ||
+ | z-index: 999; | ||
+ | } | ||
− | + | .logolink { | |
− | + | display: inline-block; | |
− | + | width: 8%; | |
− | + | margin-left: 50px !important; | |
− | + | margin-top: 300px !important; | |
− | + | margin-bottom: 10px !important; | |
− | + | } | |
− | + | ||
− | + | .Navlogo { | |
− | + | display: inherit; | |
− | + | width: 100%; | |
− | + | } | |
− | + | ||
− | + | .nav-links { | |
− | + | display: inline-flex; | |
− | + | justify-content: space-around; | |
− | + | width: 100%; | |
− | + | } | |
− | + | .nav-links a{ | |
− | + | color: #fff; | |
− | + | text-decoration: none; | |
− | + | letter-spacing: 2px; | |
− | + | font-weight: bold; | |
+ | font-size: 20px; | ||
+ | display: block; | ||
+ | } | ||
− | + | /*Drop Down Menus for links at Computer Screen*/ | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | .dropdown a{ | |
− | + | padding: 5px; | |
− | + | } | |
− | + | ||
− | + | .dropdowncontent { | |
− | + | cursor: pointer; | |
− | + | display: none; | |
+ | position: absolute; | ||
+ | background-color: #424242; | ||
+ | min-width: 150px; | ||
+ | z-index: 1; | ||
+ | box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); | ||
+ | } | ||
− | + | .dropdowncontent a{ | |
− | + | color: #fff; | |
− | } | + | font-size: 16px; |
+ | text-align: left; | ||
+ | padding: 10px; | ||
+ | transition: all 0.5s ease; | ||
+ | } | ||
+ | .dropdown:hover .dropdowncontent{ | ||
+ | display: block; | ||
− | + | } | |
− | + | ||
− | + | ||
− | + | .dropdowncontent a:hover{ | |
− | + | background-color: #8a8b8c !important; | |
− | + | ||
− | + | ||
− | + | ||
− | + | } | |
− | + | ||
− | + | /*Burger Buns*/ | |
+ | |||
+ | .burger { | ||
+ | display: none; | ||
+ | cursor: pointer; | ||
+ | right: 5px; | ||
+ | position: fixed; | ||
+ | } | ||
+ | |||
+ | .burger div{ | ||
+ | width: 25px; | ||
+ | height: 5px; | ||
+ | background-color: white; | ||
+ | margin: 5px; | ||
+ | transition: background-color 400ms linear; | ||
+ | transition: all 0.3s ease; | ||
+ | } | ||
+ | |||
+ | @media screen { | ||
+ | body { | ||
+ | margin: auto; | ||
} | } | ||
+ | } | ||
− | + | /*Mobile Navigation Bar*/ | |
− | + | ||
− | + | @media screen and (max-width: 1080px) { | |
+ | body { | ||
+ | overflow-x: hidden; | ||
} | } | ||
− | + | .logolink { | |
− | + | position: relative; | |
− | + | display: block; | |
− | + | width: 20%; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | . | + | .nav-links { |
− | background-color: # | + | position: fixed; |
− | transform: | + | display: block; |
+ | height: 100%; | ||
+ | right: 0px; | ||
+ | top: 12vh; | ||
+ | background-color: #993233; | ||
+ | width: 30%; | ||
+ | transform: translateX(150%); | ||
+ | transition: transform 0.5s ease-in; | ||
+ | margin: inherit; | ||
+ | padding-top: 10vh; | ||
+ | z-index: -1; | ||
} | } | ||
+ | |||
+ | .nav-links li{ | ||
+ | opacity: 0; | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | .nav-links a{ | ||
+ | font-size:15px; | ||
+ | } | ||
− | . | + | .burger { |
− | + | display: block; | |
− | + | ||
} | } | ||
− | . | + | .dropdown { |
− | + | padding-top: 20px; | |
− | + | ||
} | } | ||
− | + | .dropdowncontent { | |
− | + | display: none; | |
− | + | position: relative; | |
− | + | } | |
− | + | .dropdowncontent a{ | |
− | + | font-size: 10px; | |
− | + | padding: 10px; | |
+ | } | ||
+ | } | ||
− | + | .nav-active { | |
− | + | transform: translateX(0%); | |
− | + | padding-left: 0px; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | @keyframes navLinkFade { | |
− | + | from { | |
− | + | opacity: 0; | |
− | + | transform: translateX(25px); | |
− | + | } | |
− | + | to { | |
− | + | opacity: 1; | |
− | + | transform: translateX(0px); | |
− | + | } | |
− | + | } | |
+ | |||
+ | .toggle .line1{ | ||
+ | background-color: #E2D264; | ||
+ | transform: rotate(180deg); | ||
+ | } | ||
+ | |||
+ | .toggle .line2{ | ||
+ | background-color: #E73C7E; | ||
+ | transform: rotate(180deg); | ||
+ | } | ||
+ | |||
+ | .toggle .line3{ | ||
+ | background-color: #3E4A9E; | ||
+ | transform: rotate(180deg); | ||
+ | } | ||
+ | |||
+ | </style> | ||
+ | </head> | ||
+ | |||
+ | <body> | ||
+ | <nav> | ||
+ | <ul class="nav-links"> | ||
+ | <li class="dropdown"> | ||
+ | <a style="color: white; text-decoration: None;" class="link" href="https://2021.igem.org/Team:MIT">Home </a> | ||
+ | </li> | ||
+ | |||
+ | <li class="dropdown"> | ||
+ | <a> Team </a> | ||
<div class="dropdowncontent"> | <div class="dropdowncontent"> | ||
− | + | <a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Team">Team </a> | |
− | + | <a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Attributions"> Attributions </a> | |
</div> | </div> | ||
− | + | </li> | |
− | + | <li class="dropdown"> | |
− | <a> | + | <a> Project </a> |
<div class="dropdowncontent"> | <div class="dropdowncontent"> | ||
− | <a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/ | + | <a style="color: white; text-decoration: None;" class="link" href="https://2021.igem.org/Team:MIT/Description"> Description </a> |
− | <a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/ | + | <a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Design"> Design </a> |
+ | <a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Experiments"> Experiments </a> | ||
+ | <a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Model"> Model </a> | ||
+ | <a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Results"> Results </a> | ||
+ | <a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Engineering"> Engineering Success </a> | ||
+ | <a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Contribution"> Contribution </a> | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | <li class="dropdown"> | ||
+ | <a> Parts </a> | ||
+ | <div class="dropdowncontent"> | ||
+ | <a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Parts"> Parts Overview </a> | ||
+ | <a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Basic_Part"> Basic Parts </a> | ||
+ | <a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Composite_Part"> Composite Parts </a> | ||
</div> | </div> | ||
</li> | </li> | ||
+ | <li class="dropdown"> | ||
+ | <a> Safety </a> | ||
+ | <div class="dropdowncontent"> | ||
+ | <a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Safety"> Safety </a> | ||
+ | <a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Implementation"> Implementation </a> | ||
+ | </div> | ||
+ | </li> | ||
− | + | <li class="dropdown"> | |
− | + | <a> Human Practices </a> | |
− | < | + | <div class="dropdowncontent"> |
− | < | + | <a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Human_Practices">Human Practices</a> |
+ | <a style="color: white; text-decoration: None;" href="https://2021.igem.org/Team:MIT/Education"> Outreach & Engagement </a> | ||
</div> | </div> | ||
+ | </li> | ||
+ | |||
+ | <div class="burger"> | ||
+ | <div class="line1"></div> | ||
+ | <div class="line2"></div> | ||
+ | <div class="line3"></div> | ||
+ | </div> | ||
+ | |||
+ | </u1> | ||
+ | </nav> | ||
+ | </body> | ||
− | |||
− | |||
− | |||
<script> | <script> | ||
− | + | /*Toggle Nav*/ | |
− | + | ||
const navSlide = () => { | const navSlide = () => { | ||
const burger = document.querySelector ('.burger'); | const burger = document.querySelector ('.burger'); | ||
Line 353: | Line 406: | ||
burger.addEventListener('click', () => { | burger.addEventListener('click', () => { | ||
nav.classList.toggle('nav-active'); | nav.classList.toggle('nav-active'); | ||
− | + | /*Animate Menu links*/ | |
− | + | navLinks.forEach((link,index) => { | |
− | + | if(link.style.animation) { | |
− | + | link.style.animation = ''; | |
− | + | } | |
− | + | else { | |
− | + | link.style.animation = `navLinkFade 0.5s ease forwards ${index / 5 + 0.05}s`; | |
− | } | + | } |
+ | }); | ||
+ | /*Burger Animation*/ | ||
+ | burger.classList.toggle('toggle'); | ||
+ | |||
+ | |||
}); | }); | ||
− | + | ||
− | + | ||
− | + | } | |
− | + | ||
− | + | navSlide(); | |
− | + | ||
+ | </script> | ||
+ | |||
</html> | </html> |
Revision as of 01:15, 14 October 2021