Difference between revisions of "Team:TUDelft/Header"

 
(462 intermediate revisions by 5 users not shown)
Line 2: Line 2:
 
     <head>
 
     <head>
 
         <meta name="viewport" content="width=device-width, initial-scale=1">
 
         <meta name="viewport" content="width=device-width, initial-scale=1">
 +
        <meta http-equiv="x-ua-compatible" content="IE=edge" />
 
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
−
 
+
<script>
−
        <script>
+
$('.js-anchor-link').click(function(e){
−
            $(document).ready(function() {
+
  e.preventDefault();
−
                $("#HQ_page").removeAttr('id');
+
  var target = $($(this).attr('href'));
−
                $("#globalWrapper").removeAttr('id');
+
  if(target.length){
−
                $("#content").removeAttr('id');
+
    var scrollTo = target.offset().top;
−
                $("#bodyContent").removeAttr('id');
+
    $('body, html').animate({scrollTop: scrollTo+'px'}, 800);
−
                $("#mw-content-text").removeAttr('id');
+
  }
−
            });
+
});
−
        </script>
+
</script>
 
         <style>
 
         <style>
 
             /*  om MediaWiki style weg te halen*/
 
             /*  om MediaWiki style weg te halen*/
 +
 
             p{
 
             p{
 
                 margin-bottom: 0 !important;
 
                 margin-bottom: 0 !important;
Line 21: Line 23:
  
 
             h1 {
 
             h1 {
−
                 border-bottom: 0px !important;
+
                color: #0072B2;
−
            }
+
                 border-bottom-color: #00a6d6 ;
 +
                border-bottom-width:medium;
  
−
            #home_logo, #sideMenu {
 
−
                display:none;
 
 
             }
 
             }
−
             #sideMenu, #top_title, .patrollink  {
+
             h2 {  
−
                 display:none;
+
                 color: #00A6D6
−
            }
+
−
 
+
−
            /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;
+
−
                }
+
−
            {
+
−
                .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;
+
−
                }
+
−
               
+
−
               
+
 
             }
 
             }
−
               
 
−
        @media screen and (max-width: 800px) {
 
−
                .navbar a:not(:first-child), .dropdown .dropbtn {
 
−
                    display: none;
 
−
                }
 
−
                .navbar a.icon {
 
−
                    float: right;
 
−
                    display: block;
 
−
                }
 
−
            {
 
−
                .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>
 
         </style>
 
     </head>
 
     </head>
 
     <body>
 
     <body>
 +
        <div class="se-pre-con home_logo sideMenu top_title top_menu_14">
 +
        </div>
  
  
  
−
         <button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
+
         <button onclick="topFunction()" id="myBtn" title="Go to top"><img src="https://static.igem.org/mediawiki/2019/6/6d/T--TUDelft--Top.png" alt="Top" height="40px"></button>
  
 
         <!--de lijst  
 
         <!--de lijst  
 
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
 
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
  
−
         <div class="navbar" id="myTopnav">
+
         <div class="navbartu" 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/e/e7/T--TUDELFT--logonavbar-white.png" alt=""></a>
  
 
             <a class="test" href="https://2019.igem.org/Team:TUDelft"><b>Home</b></a>
 
             <a class="test" href="https://2019.igem.org/Team:TUDelft"><b>Home</b></a>
  
−
             <div class="dropdown">
+
             <div class="dropdowntu">
 
                 <button class="dropbtn"><b>Project</b>
 
                 <button class="dropbtn"><b>Project</b>
 
                     <i class="fa fa-caret-down"></i>
 
                     <i class="fa fa-caret-down"></i>
Line 283: Line 59:
 
                     <a href="https://2019.igem.org/Team:TUDelft/Description">Description</a>
 
                     <a href="https://2019.igem.org/Team:TUDelft/Description">Description</a>
 
                     <a href="https://2019.igem.org/Team:TUDelft/Design">Design</a>
 
                     <a href="https://2019.igem.org/Team:TUDelft/Design">Design</a>
 +
<a href="https://2019.igem.org/Team:TUDelft/Results">Results</a>
 
                     <a href="https://2019.igem.org/Team:TUDelft/Demonstrate">Demonstrate</a>
 
                     <a href="https://2019.igem.org/Team:TUDelft/Demonstrate">Demonstrate</a>
 +
  
 
                 </div>
 
                 </div>
 
             </div>  
 
             </div>  
−
             <div class="dropdown">
+
             <div class="dropdowntu">
 
                 <button class="dropbtn"><b>Wetlab</b>  
 
                 <button class="dropbtn"><b>Wetlab</b>  
 
                     <i class="fa fa-caret-down"></i>
 
                     <i class="fa fa-caret-down"></i>
 
                 </button>
 
                 </button>
 
                 <div class="dropdown-content">
 
                 <div class="dropdown-content">
−
                     <a href="https://2019.igem.org/Team:TUDelft/Experiments">Experiments</a>
+
                     <a href="https://2019.igem.org/Team:TUDelft/Experiments">Experiment Protocols</a>
 
                     <a href="https://2019.igem.org/Team:TUDelft/Safety">Safety</a>
 
                     <a href="https://2019.igem.org/Team:TUDelft/Safety">Safety</a>
 
                     <a href="https://2019.igem.org/Team:TUDelft/Notebook">Notebook</a>
 
                     <a href="https://2019.igem.org/Team:TUDelft/Notebook">Notebook</a>
−
                    <a href="https://2019.igem.org/Team:TUDelft/Results">Results</a>
+
                 
 +
 
 
                 </div>
 
                 </div>
 
             </div>  
 
             </div>  
−
             <div class="dropdown">
+
             <div class="dropdowntu">
 
                 <button class="dropbtn"><b>Modeling</b>  
 
                 <button class="dropbtn"><b>Modeling</b>  
 
                     <i class="fa fa-caret-down"></i>
 
                     <i class="fa fa-caret-down"></i>
 
                 </button>
 
                 </button>
 
                 <div class="dropdown-content">
 
                 <div class="dropdown-content">
−
                     <a href="#">Codon Optimization</a>
+
                     <a href="https://2019.igem.org/Team:TUDelft/Model">Model</a>
−
                    <a href="#">Reaction Kinetics</a>
+
      <div class="subnav-content-subnav">
−
 
+
      <button class="subnavbtn2x"><a style="padding-right: 48px;" href="https://2019.igem.org/Team:TUDelft/Model#Kinetics">Reaction Kinetics</a></button>
 +
        <div class="subnav-content2x">
 +
          <a href="https://2019.igem.org/Team:TUDelft/Model#Kinetics">Copy Number independence</a>
 +
          <a href="https://2019.igem.org/Team:TUDelft/Model#TranscriptionalVariations">Transcription Variation</a>
 +
          <a href="https://2019.igem.org/Team:TUDelft/Model#TranslationalVariations">Translation Variation</a>
 +
        </div>
 +
      </div>                   
 +
                    <a href="https://2019.igem.org/Team:TUDelft/Model#CodonUsage">Codon Harmonization</a>
 
                 </div>
 
                 </div>
 
             </div>  
 
             </div>  
−
            <div class="dropdown">
+
  <div class="dropdowntu">
 
                 <button class="dropbtn"><b>Parts</b>  
 
                 <button class="dropbtn"><b>Parts</b>  
 
                     <i class="fa fa-caret-down"></i>
 
                     <i class="fa fa-caret-down"></i>
Line 314: Line 100:
 
                 <div class="dropdown-content">
 
                 <div class="dropdown-content">
 
                     <a href="https://2019.igem.org/Team:TUDelft/Parts">Parts Overview</a>
 
                     <a href="https://2019.igem.org/Team:TUDelft/Parts">Parts Overview</a>
−
                    <a href="https://2019.igem.org/Team:TUDelft/Basic_Part">Basic Parts</a>
+
       
−
                    <a href="https://2019.igem.org/Team:TUDelft/Composite_Part">Parts Composite</a>
+
−
                    <a href="https://2019.igem.org/Team:TUDelft/Part_Collection">Parts Collection</a>
+
−
                    <a href="https://2019.igem.org/Team:TUDelft/Contribution">Contribution</a>
+
−
                    <a href="https://2019.igem.org/Team:TUDelft/Improve">Improve</a>
+
−
 
+
 
                 </div>
 
                 </div>
 
             </div>  
 
             </div>  
−
             <div class="dropdown">
+
 
 +
             
 +
       
 +
             <div class="dropdowntu">
 
                 <button class="dropbtn"><b>Human Practices</b>
 
                 <button class="dropbtn"><b>Human Practices</b>
 
                     <i class="fa fa-caret-down"></i>
 
                     <i class="fa fa-caret-down"></i>
Line 332: Line 116:
 
                 </div>
 
                 </div>
 
             </div>  
 
             </div>  
−
             <div class="dropdown">
+
             <div class="dropdowntu">
 
                 <button class="dropbtn"><b>Team</b>  
 
                 <button class="dropbtn"><b>Team</b>  
 
                     <i class="fa fa-caret-down"></i>
 
                     <i class="fa fa-caret-down"></i>
Line 338: Line 122:
 
                 <div class="dropdown-content">
 
                 <div class="dropdown-content">
 
                     <a href="https://2019.igem.org/Team:TUDelft/Team">Team Members</a>
 
                     <a href="https://2019.igem.org/Team:TUDelft/Team">Team Members</a>
−
                    <a href="#">Supervisors</a>
 
 
                     <a href="https://2019.igem.org/Team:TUDelft/Collaborations">Collaborations</a>
 
                     <a href="https://2019.igem.org/Team:TUDelft/Collaborations">Collaborations</a>
 
                 </div>
 
                 </div>
 
             </div>  
 
             </div>  
−
             <div class="dropdown">
+
             <div class="dropdowntu">
 
                 <button class="dropbtn"><b>Acknowledgements</b>
 
                 <button class="dropbtn"><b>Acknowledgements</b>
 
                     <i class="fa fa-caret-down"></i>
 
                     <i class="fa fa-caret-down"></i>
Line 348: Line 131:
 
                 <div class="dropdown-content">
 
                 <div class="dropdown-content">
 
                     <a href="https://2019.igem.org/Team:TUDelft/Attributions">Attributions</a>
 
                     <a href="https://2019.igem.org/Team:TUDelft/Attributions">Attributions</a>
−
                     <a href="#">Sponsors</a>
+
                     <a href="https://2019.igem.org/Team:TUDelft/Sponsors">Sponsors</a>
 
                 </div>
 
                 </div>
 
             </div>  
 
             </div>  
 +
            <div class="dropdowntu">
 +
                <button class="dropbtn"><b><i class="fa fa-trophy"></i></b>
 +
                    <i class="fa fa-caret-down"></i>
 +
                </button>
 +
                <div class="dropdown-content">
 +
                    <a href="https://igem.org/2019_Judging_Form?id=2918">Judging Form</a>
 +
                    <a href="https://2019.igem.org/Team:TUDelft/Medals">Medal Requirements</a>
 +
                </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>
Line 366: Line 160:
  
 
         </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>
 
−
 
−
        <script>// When the user scrolls down 20px from the top of the document, show the button
 
−
            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";
 
−
                }
 
−
            }
 
−
 
−
            // 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>

Latest revision as of 04:00, 24 November 2019