Weronika77 (Talk | contribs) |
|||
Line 1: | Line 1: | ||
<html> | <html> | ||
− | <meta name="viewport" content="width=device-width, initial-scale=1"> | + | <head> |
− | + | <meta name="viewport" content="width=device-width, initial-scale=1"> | |
− | + | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | <script> | |
− | + | $(document).ready(function() { | |
− | + | $("#HQ_page").removeAttr('id'); | |
+ | $("#globalWrapper").removeAttr('id'); | ||
+ | $("#content").removeAttr('id'); | ||
+ | $("#bodyContent").removeAttr('id'); | ||
+ | $("#mw-content-text").removeAttr('id'); | ||
+ | }); | ||
+ | </script> | ||
+ | <style> | ||
+ | /* om MediaWiki style weg te halen*/ | ||
+ | p{ | ||
+ | margin-bottom: 0 !important; | ||
+ | margin: 0; | ||
+ | } | ||
− | + | h1 { | |
− | + | border-bottom: 0px !important; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | #home_logo, #sideMenu { | |
− | + | display:none; | |
− | + | } | |
− | + | #sideMenu, #top_title, .patrollink { | |
− | + | display:none; | |
− | + | } | |
− | + | ||
− | + | /Bootstrap.min altered the way the top menu looks, by changing box-sizing: from border-box to initial, the damage is undone/ | |
− | + | #top_menu_14 { | |
− | + | box-sizing: initial; | |
+ | } | ||
+ | td a{ | ||
+ | padding-right: 0px !important; | ||
+ | } | ||
+ | .subttt{color: white !important;} | ||
+ | a.subtt { color: white !important; } | ||
+ | a.subtt:hover { color: #4a90e2 !important; } | ||
− | |||
− | |||
− | |||
− | |||
− | + | /* font voor alles*/ | |
− | + | * { | |
− | + | font-family: "Trebuchet MS", Helvetica, sans-serif; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | /* menu bar */ | |
− | + | .navbar { | |
− | + | background-color: #def4fa; | |
− | + | top:18px; | |
− | + | width:100%; | |
− | + | overflow:hidden; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | } | |
− | + | .navbar a { | |
− | + | float: left; | |
− | + | display:block; | |
+ | font-size: 16px; | ||
+ | color: black; | ||
+ | text-align: center; | ||
+ | padding: 14px 16px; | ||
+ | text-decoration: none; | ||
− | + | } | |
− | + | .navbar .test { | |
− | + | font-size: 16px; | |
− | + | color: black; | |
− | + | text-align: center; | |
− | + | padding: 25px 16px; | |
− | + | text-decoration: none; | |
− | + | } | |
− | + | .navbar .social{ | |
− | + | float:right; | |
+ | overflow: hidden; | ||
+ | } | ||
− | + | .dropdown { | |
− | + | float: left; | |
− | + | overflow: hidden; | |
+ | } | ||
− | + | .dropdown .dropbtn { | |
− | + | font-size: 16px; | |
− | + | border: none; | |
− | + | outline: none; | |
− | + | color: black; | |
− | + | padding: 25px 16px; | |
− | + | background-color: inherit; | |
+ | font-family: inherit; | ||
+ | margin:0px; | ||
+ | } | ||
− | + | .navbar a:hover, .dropdown:hover .dropbtn { | |
+ | background-color: #bedde5; | ||
+ | } | ||
− | + | .dropdown-content { | |
− | + | display: none; | |
− | + | position: absolute; | |
− | + | background-color: #f9f9f9; | |
− | + | min-width: 160px; | |
− | + | box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); | |
− | + | z-index: 1; | |
− | + | ||
− | + | } | |
− | + | ||
− | + | ||
− | + | .dropdown-content a { | |
− | + | float: none; | |
− | + | color: black; | |
+ | padding: 12px 16px; | ||
+ | text-decoration: none; | ||
+ | display: block; | ||
+ | text-align: left; | ||
+ | } | ||
− | + | .dropdown-content a:hover { | |
− | + | background-color: #ddd; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | } | + | |
− | + | .dropdown:hover .dropdown-content { | |
− | + | display: block; | |
− | } | + | } |
+ | .navbar .icon { | ||
+ | display: none; | ||
+ | } | ||
+ | /* <!-- ---- top button--- -->*/ | ||
+ | #myBtn { | ||
+ | display: none; /* Hidden by default */ | ||
+ | position: fixed; /* Fixed/sticky position */ | ||
+ | bottom: 20px; /* Place the button at the bottom of the page */ | ||
+ | right: 30px; /* Place the button 30px from the right */ | ||
+ | z-index: 99; /* Make sure it does not overlap */ | ||
+ | border: none; /* Remove borders */ | ||
+ | outline: none; /* Remove outline */ | ||
+ | background-color: ; /* Set a background color */ | ||
+ | color: white; /* Text color */ | ||
+ | cursor: pointer; /* Add a mouse pointer on hover */ | ||
+ | padding: 15px; /* Some padding */ | ||
+ | border-radius: 10px; /* Rounded corners */ | ||
+ | font-size: 18px; /* Increase font size */ | ||
+ | } | ||
− | + | #myBtn:hover { | |
− | + | background-color: #555; /* Add a dark-grey background on hover */ | |
+ | } | ||
− | |||
− | |||
− | |||
− | + | #logo { | |
− | + | height:40px;} | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | } | + | |
− | + | #social { | |
− | + | height:25px; | |
− | + | padding:7.5px -0px;} | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | } | + | |
− | + | .main { | |
− | + | padding:16px; | |
− | + | margin-top: 60px; | |
− | + | height:1500px; | |
+ | } | ||
+ | body { | ||
+ | background-image: url("https://static.igem.org/mediawiki/2019/a/a9/T--TUDELFT--backgroundpattern.png"); | ||
+ | background-position: 0% 15%; | ||
+ | background-repeat: repeat; | ||
+ | background-size: 50%; | ||
+ | } | ||
+ | |||
+ | #myBtn { | ||
+ | display: none; /* Hidden by default */ | ||
+ | position: fixed; /* Fixed/sticky position */ | ||
+ | bottom: 20px; /* Place the button at the bottom of the page */ | ||
+ | right: 30px; /* Place the button 30px from the right */ | ||
+ | z-index: 99; /* Make sure it does not overlap */ | ||
+ | border: none; /* Remove borders */ | ||
+ | outline: none; /* Remove outline */ | ||
+ | background-color: #00a6d6; /* Set a background color */ | ||
+ | color: black; /* Text color */ | ||
+ | cursor: pointer; /* Add a mouse pointer on hover */ | ||
+ | padding: 15px; /* Some padding */ | ||
+ | border-radius: 10px; /* Rounded corners */ | ||
+ | font-size: 18px; /* Increase font size */ | ||
+ | } | ||
+ | |||
+ | #myBtn:hover { | ||
+ | background-color: #555; /* Add a dark-grey background on hover */ | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | @media screen and (max-width: 1400px) { | ||
+ | .navbar a:not(:first-child), .dropdown .dropbtn { | ||
+ | display: none; | ||
+ | } | ||
+ | .navbar a.icon { | ||
+ | float: right; | ||
+ | display: block; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media screen and (max-width: 1400px) { | ||
+ | .navbar.responsive {position: relative;} | ||
+ | .navbar.responsive .icon { | ||
+ | position: absolute; | ||
+ | right: 0; | ||
+ | top: 0; | ||
+ | } | ||
+ | .navbar.responsive a { | ||
+ | float: none; | ||
+ | display: block; | ||
+ | text-align: left; | ||
+ | } | ||
+ | |||
+ | .topnav.responsive .dropdown {float: none;} | ||
+ | .topnav.responsive .dropdown-content {position: relative;} | ||
+ | .topnav.responsive .dropdown .dropbtn { | ||
+ | display: block; | ||
+ | width: 100%; | ||
+ | text-align: left; | ||
+ | } | ||
+ | } | ||
+ | </style> | ||
+ | </head> | ||
<body> | <body> | ||
− | <button onclick="topFunction()" id="myBtn" title="Go to top">Top</button> | + | <button onclick="topFunction()" id="myBtn" title="Go to top">Top</button> |
<!--de lijst | <!--de lijst | ||
–––––––––––––––––––––––––––––––––––––––––––––––––– --> | –––––––––––––––––––––––––––––––––––––––––––––––––– --> | ||
− | <div class="navbar"> | + | <div class="navbar" id="myTopnav"> |
<a href="https://2019.igem.org/Team:TUDelft"> | <a href="https://2019.igem.org/Team:TUDelft"> | ||
<img id="logo" src="https://static.igem.org/mediawiki/2019/c/c2/T--TUDELFT--logonavbar-3.png" alt=""></a> | <img id="logo" src="https://static.igem.org/mediawiki/2019/c/c2/T--TUDELFT--logonavbar-3.png" alt=""></a> | ||
Line 275: | Line 319: | ||
</div> | </div> | ||
− | + | ||
− | + | <a class="social" href="mailto:igem@tudelft.nl"><img id="social" src="https://static.igem.org/mediawiki/2019/b/b4/T--TUDELFT--mailicon.png" alt="Email" /></a> | |
<a class="social" href="https://www.instagram.com/igemtudelft/?hl=en" target="_blank" rel="noopener"><img id="social" src="https://static.igem.org/mediawiki/2019/5/58/T--TUDELFT--instaicon.png" alt="Instagram" /></a> | <a class="social" href="https://www.instagram.com/igemtudelft/?hl=en" target="_blank" rel="noopener"><img id="social" src="https://static.igem.org/mediawiki/2019/5/58/T--TUDELFT--instaicon.png" alt="Instagram" /></a> | ||
− | + | ||
− | + | ||
<a class="social" href="https://twitter.com/TUDelft_iGEM?lang=en" target="_blank" rel="noopener"><img id="social" src="https://static.igem.org/mediawiki/2019/8/83/T--TUDELFT--twittericon.png" alt="Twitter" /></a> | <a class="social" href="https://twitter.com/TUDelft_iGEM?lang=en" target="_blank" rel="noopener"><img id="social" src="https://static.igem.org/mediawiki/2019/8/83/T--TUDELFT--twittericon.png" alt="Twitter" /></a> | ||
<a class="social" href="https://www.linkedin.com/company/igem-tu-delft/" target="_blank" rel="noopener"><img id="social" src="https://static.igem.org/mediawiki/2019/d/d7/T--TUDELFT--linkedin.png" alt="LinkedIn" /></a> | <a class="social" href="https://www.linkedin.com/company/igem-tu-delft/" target="_blank" rel="noopener"><img id="social" src="https://static.igem.org/mediawiki/2019/d/d7/T--TUDELFT--linkedin.png" alt="LinkedIn" /></a> | ||
− | <a class="social" href="https://www.facebook.com/TUDelft.iGEM2019/" target="_blank" rel="noopener"><img id="social" src="https://static.igem.org/mediawiki/2019/a/ad/T--TUDELFT--fbicon.png" alt="Facebook" /></a> | + | <a class="social" href="https://www.facebook.com/TUDelft.iGEM2019/" target="_blank" rel="noopener"><img id="social" src="https://static.igem.org/mediawiki/2019/a/ad/T--TUDELFT--fbicon.png" alt="Facebook" /></a> |
+ | |||
+ | <a href="javascript:void(0);" class="icon" onclick="myFunction()"> | ||
+ | <i class="fa fa-bars"></i> | ||
+ | </a> | ||
</div> | </div> | ||
− | + | ||
− | + | ||
<br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> | <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> <br><br><br><br><br><br> | ||
− | + | <script>// When the user scrolls down 20px from the top of the document, show the button | |
− | window.onscroll = function() {scrollFunction()}; | + | window.onscroll = function() {scrollFunction()}; |
+ | |||
+ | function scrollFunction() { | ||
+ | if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { | ||
+ | document.getElementById("myBtn").style.display = "block"; | ||
+ | } else { | ||
+ | document.getElementById("myBtn").style.display = "none"; | ||
+ | } | ||
+ | } | ||
− | function | + | // When the user clicks on the button, scroll to the top of the document |
− | + | function topFunction() { | |
− | + | document.body.scrollTop = 0; // For Safari | |
− | + | document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera | |
− | + | } | |
− | + | // <!-- hamburger --> | |
− | } | + | function myFunction() { |
+ | var x = document.getElementById("myTopnav"); | ||
+ | if (x.className === "navbar") { | ||
+ | x.className += "responsive"; | ||
+ | } else { | ||
+ | x.className = "navbar"; | ||
+ | } | ||
+ | } | ||
− | + | </script> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</body> | </body> | ||
</html> | </html> |
Revision as of 15:34, 21 June 2019