BloonCorps (Talk | contribs) |
BloonCorps (Talk | contribs) |
||
Line 2: | Line 2: | ||
<html> | <html> | ||
− | <head> | + | <head> |
− | <style> | + | <style> |
− | + | #home_logo, #sideMenu { display:none; } | |
− | + | #sideMenu, #top_title, .patrollink {display:none;} | |
− | + | #content { margin:5px; padding:0px; width:100%;} | |
− | + | body {background-color: #fff;} | |
− | + | /* Menu Styling */ | |
− | + | ul { | |
− | + | list-style: none; | |
− | + | font-size: 12px; | |
− | + | } | |
− | + | nav { | |
− | + | text-align: center !important; | |
− | + | display: flex; | |
− | + | padding-top: 8px; | |
− | + | align-items: center; | |
− | + | vertical-align: middle !important; | |
− | + | min-height: 6vH; | |
− | + | background-color: #c2a593; | |
− | + | font-family: Tahoma, 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 am{ | |
− | + | color: #fff; | |
− | + | text-decoration: none; | |
− | + | letter-spacing: 2px; | |
− | + | font-weight: bold; | |
− | + | font-size: 16px; | |
− | + | display: block; | |
− | + | } | |
− | + | /*Drop Down Menus for links at Computer Screen*/ | |
− | + | .dropdown am{ | |
− | + | padding: 2vh; | |
− | + | } | |
− | + | .dropdowncontent { | |
− | + | cursor: pointer; | |
− | + | display: none; | |
− | + | position: absolute; | |
− | + | background-color: #5e5656; | |
− | + | min-width: 150px; | |
− | + | z-index: 1; | |
− | + | box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); | |
− | + | } | |
− | + | .dropdowncontent am{ | |
− | + | color: #fff; | |
− | + | font-size: 12px; | |
− | + | text-align: left; | |
− | + | padding: 10px; | |
− | + | transition: all 0.5s ease; | |
− | + | } | |
− | + | .dropdown:hover .dropdowncontent{ | |
− | + | display: block; | |
− | + | } | |
− | + | .dropdowncontent am: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 { | |
− | + | position: fixed; | |
− | + | display: block; | |
− | + | height: 100%; | |
− | + | right: 0px; | |
− | + | top: 10vh; | |
− | + | background-color: #c2a593; | |
− | + | 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 am{ | |
− | + | font-size:15px; | |
− | + | } | |
− | + | .burger { | |
− | + | display: block; | |
− | + | } | |
− | + | .dropdown { | |
− | + | padding-top: 20px; | |
− | + | } | |
− | + | .dropdowncontent { | |
− | + | display: none; | |
− | + | position: relative; | |
− | + | } | |
− | + | .dropdowncontent am{ | |
− | + | 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); | |
− | .nav-active { | + | } |
− | + | </style> | |
− | + | </head> | |
− | } | + | |
− | + | ||
− | + | ||
− | @keyframes navLinkFade { | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | } | + | |
− | + | ||
− | .toggle .line1{ | + | |
− | + | ||
− | + | ||
− | } | + | |
− | + | ||
− | .toggle .line2{ | + | |
− | + | ||
− | + | ||
− | } | + | |
− | + | ||
− | .toggle .line3{ | + | |
− | + | ||
− | + | ||
− | } | + | |
− | </style> | + | |
− | </head> | + | |
<body> | <body> | ||
<nav> | <nav> | ||
− | + | <ul class="nav-links"> | |
+ | |||
<li class="dropdown"> | <li class="dropdown"> | ||
− | <am href="https://2021.igem.org/Team:MIT">Home </am> | + | <am><a style="color: white; text-decoration: none;" href="https://2021.igem.org/Team:MIT">Home </a></am> |
</li> | </li> | ||
<li class="dropdown"> | <li class="dropdown"> | ||
<am> Team </am> | <am> Team </am> | ||
− | + | <div class="dropdowncontent"> | |
− | + | <am href="https://2021.igem.org/Team:MIT/Team">Team </am> | |
− | + | <am href="https://2021.igem.org/Team:MIT/Attributions"> Attributions </am> | |
− | + | </div> | |
</li> | </li> | ||
Line 238: | Line 209: | ||
<am href="https://2021.igem.org/Team:MIT/Composite_Part"> Composite Parts </am> | <am href="https://2021.igem.org/Team:MIT/Composite_Part"> Composite Parts </am> | ||
</div> | </div> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</li> | </li> | ||
+ | |||
<li class="dropdown"> | <li class="dropdown"> | ||
− | + | <am> Safety </am> | |
− | + | <div class="dropdowncontent"> | |
− | + | <am href="https://2021.igem.org/Team:MIT/Safety"> Safety </am> | |
− | + | <am href="https://2021.igem.org/Team:MIT/Implementation"> Implementation </am> | |
+ | </div> | ||
+ | </li> | ||
− | + | <li class="dropdown"> | |
− | </div> | + | <am> Human Practices </am> |
+ | <div class="dropdowncontent"> | ||
+ | <am href="https://2021.igem.org/Team:MIT/Human_Practices">Human Practices</am> | ||
+ | <am href="https://2021.igem.org/Team:MIT/Education"> Outreach & Engagement </am> | ||
+ | </div> | ||
</li> | </li> | ||
− | + | </ul> | |
− | + | </nav> | |
− | + | </body> | |
<script> | <script> | ||
Line 282: | Line 252: | ||
}); | }); | ||
} | } | ||
− | + | navSlide(); | |
</script> | </script> | ||
− | |||
− | |||
</html> | </html> |
Revision as of 13:03, 12 October 2021