Jan Vuckovic (Talk | contribs) |
|||
(16 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
{{Groningen}} | {{Groningen}} | ||
<html lang="en"> | <html lang="en"> | ||
− | |||
− | |||
− | |||
− | |||
− | + | <head> | |
+ | <!-- Required meta tags --> | ||
+ | <meta charset="utf-8"> | ||
+ | <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
− | + | <script src="https://2021.igem.org/Template:Groningen/FontAwesome?action=raw&ctype=text/javascript" | |
− | + | crossorigin="anonymous"></script> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | <!---- Wiki Reset-(Adapted from Team-Wageningen 2019)----> | |
− | + | <script> | |
− | + | !function () { | |
− | } | + | document.getElementById("HQ_page").removeAttribute("id"); |
+ | document.getElementById("globalWrapper").removeAttribute("id"); | ||
+ | document.getElementById("content").removeAttribute("id"); | ||
+ | document.getElementById("bodyContent").removeAttribute("id"); | ||
+ | document.getElementById("mw-content-text").removeAttribute("id"); | ||
+ | document.getElementsByClassName("mw-body")[0].removeAttribute("class"); | ||
+ | document.getElementsByClassName("mw-content-ltr")[0].className = "my-content"; | ||
+ | }() | ||
+ | </script> | ||
− | + | <style> | |
− | + | div.my-content>p:first-of-type { | |
− | + | display: none; | |
+ | } | ||
− | + | div.my-content header:nth-of-type(1) { | |
+ | margin-top: 85px; | ||
+ | } | ||
− | + | /*Nav bar styles*/ | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | * { | |
− | + | box-sizing: border-box; | |
− | + | padding: 0; | |
− | + | margin: 0; | |
− | + | } | |
− | + | ||
− | + | body { | |
− | + | background: #ffffff; | |
− | + | font-family: Montserrat; | |
− | + | margin: 0; | |
− | + | padding: 0; | |
+ | } | ||
− | + | content { | |
− | + | width: 100%; | |
− | + | margin: 0; | |
− | + | padding: 0; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | .dropdwn { | |
− | + | display: block; | |
− | + | width: 190px; | |
− | + | padding: 0 60px 0 60px; | |
− | + | color: #000000; | |
− | + | text-decoration: none; | |
− | + | line-height: 85px; | |
− | + | font-size: 18px; | |
+ | } | ||
− | + | .dropdwnSub { | |
− | + | display: block; | |
− | + | padding: 12px 14px 12px 14px; | |
− | + | color: #000000; | |
− | + | text-decoration: none; | |
− | + | line-height: 30px; | |
− | + | font-size: 16px; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | nav { | |
− | + | height: 85px; | |
− | + | background: #fdf8f0; | |
− | + | width: 100%; | |
− | + | font-family: 'Montserrat' !important; | |
− | } | + | text-decoration: none !important; |
+ | color: #000000 !important; | ||
+ | display: flex; | ||
+ | flex-wrap: wrap; | ||
+ | justify-content: space-between; | ||
+ | position: fixed; | ||
+ | top: 15px; | ||
+ | z-index: 100; | ||
+ | } | ||
− | + | nav ul.mainMenu { | |
− | + | padding: 0; | |
− | + | margin: 0; | |
− | + | float: right; | |
− | } | + | list-style: none; |
+ | } | ||
− | + | nav li a { | |
− | + | display: inline-block; | |
− | + | text-decoration: none !important; | |
− | + | color: #000000 !important; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | nav .mainMenu li { | |
− | + | background: #fdf8f0; | |
− | } | + | position: relative; |
+ | list-style: none; | ||
+ | display: inline-block; | ||
+ | margin: 0 !important; | ||
+ | } | ||
− | + | nav .mainMenu li a:hover { | |
− | + | background: #f7eee2; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | nav ul ul { | |
− | + | position: absolute; | |
− | + | top: 80px; | |
− | + | display: none; | |
− | + | width: 100%; | |
− | + | } | |
− | + | ||
− | + | nav ul li:hover>ul { | |
− | + | display: block; | |
− | + | visibility: visible; | |
− | + | opacity: 1; | |
− | + | transition: ease-in-out .35s; | |
− | + | pointer-events: all !important; | |
− | + | } | |
− | + | nav ul ul li { | |
− | + | width: 100%; | |
− | + | float: right; | |
− | } | + | display: list-item; |
+ | position: relative; | ||
+ | right: 15px; | ||
+ | } | ||
− | .titleNav, | + | nav ul li ul li { |
− | + | padding: 0 !important; | |
− | + | margin: 0 !important; | |
− | } | + | } |
+ | |||
+ | .titleNav, | ||
+ | .logoNav { | ||
+ | display: inline-block; | ||
+ | } | ||
+ | |||
+ | #top_title { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | .columnNav { | ||
+ | display: flex; | ||
+ | width: fit-content; | ||
+ | float: left; | ||
+ | padding: 0; | ||
+ | } | ||
− | + | .logoNav { | |
+ | margin: 5px 5px 5px 30px; | ||
+ | } | ||
+ | |||
+ | .titleNav { | ||
+ | font-family: Montserrat !important; | ||
+ | font-size: 24px; | ||
+ | margin: auto 0 auto 0 !important; | ||
+ | padding-right: 30px; | ||
+ | } | ||
+ | |||
+ | button.mainMenuMobile { | ||
+ | display: none; | ||
+ | margin: auto 50px auto 50px; | ||
+ | height: fit-content; | ||
+ | border: 0; | ||
+ | background: none; | ||
+ | } | ||
+ | |||
+ | |||
+ | button.mainMenuMobile i { | ||
+ | font-size: 24px; | ||
+ | } | ||
+ | |||
+ | /*The following code hides p.titleNav when the screen width is less than 1100px.*/ | ||
+ | |||
+ | @media(max-width: 1100px) { | ||
+ | p.titleNav { | ||
display: none; | display: none; | ||
} | } | ||
+ | } | ||
− | + | /*The following code put a.dropdwn closer together when the screen is less than 880px*/ | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | . | + | @media(max-width: 880px) { |
− | + | a.dropdwn { | |
+ | width: 150px; | ||
+ | padding: 0 30px 0 30px; | ||
} | } | ||
+ | } | ||
− | + | /*The follwing code puts the navigation menu into a mobile version when the screen is less than 750px*/ | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | @media(max-width: 750px) { | ||
button.mainMenuMobile { | button.mainMenuMobile { | ||
− | display: | + | display: block; |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | nav ul.mainMenu { | |
− | + | width: 100%; | |
+ | display: none; | ||
+ | flex-wrap: wrap; | ||
+ | flex-direction: column; | ||
} | } | ||
− | + | nav ul.mainMenu li { | |
− | + | width: 100%;; | |
− | + | text-align: center; | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | nav ul.mainMenu>li>a { | |
− | + | width: 100%; | |
− | + | padding:0; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
+ | nav ul ul { | ||
+ | position: static; | ||
+ | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | } | |
− | + | </style> | |
− | + | </head> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | <body> | ||
+ | <div> | ||
+ | <nav> | ||
+ | <div class="columnNav"> | ||
+ | <a href="https://2021.igem.org/Team:Groningen"><img class="logoNav" | ||
+ | src="https://static.igem.org/mediawiki/2021/1/17/T--Groningen--LogoByeMonia.png" alt="" width="76" | ||
+ | height="auto"></a> | ||
+ | <p class="titleNav">Groningen 2021</p> | ||
+ | </div> | ||
+ | <button class="mainMenuMobile" type="button"> | ||
+ | <i class="fas fa-bars"></i> | ||
+ | </button> | ||
+ | <ul class="mainMenu" style="top: -100%"> | ||
+ | <li><a class="dropdwn" href="#">Project</a> | ||
+ | <ul> | ||
+ | <li><a class="dropdwnSub" | ||
+ | href="https://2021.igem.org/Team:Groningen/Description">Description</a></li> | ||
+ | <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Model">Model</a></li> | ||
+ | <li><a class="dropdwnSub" | ||
+ | href="https://2021.igem.org/Team:Groningen/Contribution">Contribution</a></li> | ||
+ | <li><a class="dropdwnSub" | ||
+ | href="https://2021.igem.org/Team:Groningen/Implementation">Implementation</a></li> | ||
+ | <li><a class="dropdwnSub" | ||
+ | href="https://2021.igem.org/Team:Groningen/Medals_and_Awards">Awards</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li><a class="dropdwn" href="#">Wet lab</a> | ||
+ | <ul> | ||
+ | <li><a class="dropdwnSub" | ||
+ | href="https://2021.igem.org/Team:Groningen/Engineering">Engineering</a></li> | ||
+ | <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Notebook">Notebook</a></li> | ||
+ | <li><a class="dropdwnSub" | ||
+ | href="https://2021.igem.org/Team:Groningen/Experiments">Experiments</a></li> | ||
+ | <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Results">Results</a></li> | ||
+ | <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Parts">Parts</a></li> | ||
+ | <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Safety">Safety</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li><a class="dropdwn" href="#">People</a> | ||
+ | <ul> | ||
+ | <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Team">Team</a></li> | ||
+ | <li><a class="dropdwnSub" | ||
+ | href="https://2021.igem.org/Team:Groningen/Attributions">Attributions</a></li> | ||
+ | <li><a class="dropdwnSub" | ||
+ | href="https://2021.igem.org/Team:Groningen/Collaborations">Collaborations</a></li> | ||
+ | <li><a class="dropdwnSub" | ||
+ | href="https://2021.igem.org/Team:Groningen/Partnership">Partnership</a></li> | ||
+ | <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Sponsors">Sponsors</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li><a class="dropdwn" href="#">Outreach</a> | ||
+ | <ul> | ||
+ | <li><a class="dropdwnSub" href="https://2021.igem.org/Team:Groningen/Human_Practices">Human | ||
+ | Practices</a></li> | ||
+ | <li><a class="dropdwnSub" | ||
+ | href="https://2021.igem.org/Team:Groningen/Gold_Human_Practices">Integrated Human | ||
+ | Practices</a></li> | ||
+ | <li><a class="dropdwnSub" | ||
+ | href="https://2021.igem.org/Team:Groningen/Communication">Education</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | </ul> | ||
+ | <div class="closeMenu" style="display:none"><i class="fas fa-times"></i></div> | ||
+ | </nav> | ||
+ | </div> | ||
+ | </body> | ||
+ | <script> | ||
+ | var coll = document.getElementsByClassName("mainMenuMobile"); | ||
+ | var i; | ||
+ | for (i = 0; i < coll.length; i++) { | ||
+ | coll[i].addEventListener("click", function () { | ||
+ | this.classList.toggle("active"); | ||
+ | var umainMenu = this.nextElementSibling; | ||
+ | if (umainMenu.style.display === "block") { | ||
+ | umainMenu.style.display = "none"; | ||
+ | } else { | ||
+ | umainMenu.style.display = "block"; | ||
} | } | ||
+ | }); | ||
+ | } | ||
+ | </script> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</html> | </html> |
Latest revision as of 17:07, 14 December 2021