Difference between revisions of "Team:TUDelft/Header"

Line 1: Line 1:
 
<html>
 
<html>
−
     <meta name="viewport" content="width=device-width, initial-scale=1">
+
     <head>
−
    <script>
+
        <meta name="viewport" content="width=device-width, initial-scale=1">
−
        $(document).ready(function() {
+
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
−
            $("#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 {
+
         <script>
−
             border-bottom: 0px !important;
+
            $(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;
 +
            }
  
−
        #home_logo, #sideMenu {
+
            h1 {
−
            display:none;
+
                border-bottom: 0px !important;
−
        }
+
             }
−
        #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*/
+
            #home_logo, #sideMenu {
−
        #top_menu_14 {
+
                display:none;
−
            box-sizing: initial;
+
            }
−
        }
+
            #sideMenu, #top_title, .patrollink  {
−
        td a{
+
                display:none;
−
            padding-right: 0px !important;
+
            }
−
        }
+
  
−
        .subttt{color: white !important;}
+
            /Bootstrap.min altered the way the top menu looks, by changing box-sizing: from border-box to initial, the damage is undone/
−
        a.subtt { color: white !important; }
+
            #top_menu_14 {
−
        a.subtt:hover { color: #4a90e2 !important; }
+
                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 */
+
            /*   font voor alles*/
−
        .navbar {
+
             * {
−
             background-color: #def4fa;
+
                font-family: "Trebuchet MS", Helvetica, sans-serif;
−
            position:fixed;
+
             }   
−
            top:18px;
+
−
            width:100%;
+
−
        }
+
−
        .navbar a {
+
−
            float: left;
+
−
            font-size: 16px;
+
−
            color: black;
+
−
            text-align: center;
+
−
             padding: 14px 16px;
+
−
            text-decoration: none;
+
  
−
        }
+
            /*    menu bar */
−
        .navbar .test {
+
            .navbar {
−
            font-size: 16px;
+
                background-color: #def4fa;
−
            color: black;
+
                top:18px;
−
            text-align: center;
+
                width:100%;
−
            padding: 25px 16px;
+
                overflow:hidden;
−
            text-decoration: none;
+
−
        }
+
−
        .navbar .social{
+
−
            float:right;
+
−
        }
+
  
−
        .dropdown {
+
            }
−
            float: left;
+
            .navbar a {
−
            overflow: hidden;
+
                float: left;
−
        }
+
                display:block;
 +
                font-size: 16px;
 +
                color: black;
 +
                text-align: center;
 +
                padding: 14px 16px;
 +
                text-decoration: none;
  
−
        .dropdown .dropbtn {
+
            }
−
            font-size: 16px;
+
            .navbar .test {
−
            border: none;
+
                font-size: 16px;
−
            outline: none;
+
                color: black;
−
            color: black;
+
                text-align: center;
−
            padding: 25px 16px;
+
                padding: 25px 16px;
−
            background-color: inherit;
+
                text-decoration: none;
−
             font-family: inherit;
+
             }
−
            margin:0px;
+
            .navbar .social{
−
        }
+
                float:right;
 +
                overflow: hidden;
 +
            }
  
−
        .navbar a:hover, .dropdown:hover .dropbtn {
+
            .dropdown {
−
            background-color: #bedde5;
+
                float: left;
−
        }
+
                overflow: hidden;
 +
            }
  
−
        .dropdown-content {
+
            .dropdown .dropbtn {
−
            display: none;
+
                font-size: 16px; 
−
            position: absolute;
+
                border: none;
−
            background-color: #f9f9f9;
+
                outline: none;
−
            min-width: 160px;
+
                color: black;
−
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+
                padding: 25px 16px;
−
             z-index: 1;
+
                background-color: inherit;
 +
                font-family: inherit;
 +
                margin:0px;
 +
             }
  
−
        }
+
            .navbar a:hover, .dropdown:hover .dropbtn {
 +
                background-color: #bedde5;
 +
            }
  
−
        .dropdown-content a {
+
            .dropdown-content {
−
            float: none;
+
                display: none;
−
            color: black;
+
                position: absolute;
−
            padding: 12px 16px;
+
                background-color: #f9f9f9;
−
            text-decoration: none;
+
                min-width: 160px;
−
            display: block;
+
                box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
−
            text-align: left;
+
                z-index: 1;
−
        }
+
  
−
        .dropdown-content a:hover {
+
             }
−
             background-color: #ddd;
+
−
        }
+
  
−
        .dropdown:hover .dropdown-content {
+
            .dropdown-content a {
−
            display: block;
+
                float: none;
−
        }
+
                color: black;
 +
                padding: 12px 16px;
 +
                text-decoration: none;
 +
                display: block;
 +
                text-align: left;
 +
            }
  
−
<!--- top button--->
+
            .dropdown-content a:hover {
−
#myBtn {
+
                background-color: #ddd;
−
  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 {
+
            .dropdown:hover .dropdown-content {
−
  background-color: #555; /* Add a dark-grey background on hover */
+
                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 */
 +
            }
  
−
        #logo {
+
            #myBtn:hover {
−
            height:40px;}
+
                background-color: #555; /* Add a dark-grey background on hover */
 +
            }
  
−
        #social {
 
−
            height:25px;
 
−
        padding:7.5px -0px;}
 
  
−
        .main {
+
            #logo {
−
            padding:16px;
+
                height:40px;}
−
            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 {
+
            #social {
−
  display: none; /* Hidden by default */
+
                height:25px;
−
  position: fixed; /* Fixed/sticky position */
+
                padding:7.5px -0px;}
−
  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 {
+
            .main {
−
  background-color: #555; /* Add a dark-grey background on hover */
+
                padding:16px;
−
}
+
                margin-top: 60px;
−
    </style>
+
                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="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
+
        <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 scrollFunction() {
+
            // When the user clicks on the button, scroll to the top of the document
−
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+
            function topFunction() {
−
    document.getElementById("myBtn").style.display = "block";
+
                document.body.scrollTop = 0; // For Safari
−
  } else {
+
                document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
−
    document.getElementById("myBtn").style.display = "none";
+
            }
−
  }
+
            //            <!-- hamburger -->
−
}
+
            function myFunction() {
 +
                var x = document.getElementById("myTopnav");
 +
                if (x.className === "navbar") {
 +
                    x.className += "responsive";
 +
                } else {
 +
                    x.className = "navbar";
 +
                }
 +
            }
  
−
// When the user clicks on the button, scroll to the top of the document
+
        </script>
−
function topFunction() {
+
−
  document.body.scrollTop = 0; // For Safari
+
−
  document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
+
−
}</script>
+
  
 
     </body>
 
     </body>
  
 
</html>
 
</html>

Revision as of 15:34, 21 June 2019