Difference between revisions of "Team:Oxford"

Line 1: Line 1:
−
{{Oxford}}
 
 
<html>
 
<html>
−
<head>
 
−
<style>
 
−
.center {
 
−
    margin: auto;
 
−
    width: 90%;
 
−
}
 
−
</style>
 
  
 
<script>
 
<script>
−
  $(document).ready(function(){
 
  
−
    var native_width = 2000;
 
−
    var native_height = 1250;
 
−
    var finished_loading = false;
 
−
    var start_time = -1;
 
−
    var end_time = -1;
 
−
    var detection = 0;
 
−
   
 
−
    //When image finished loading
 
−
    $("<img/>").attr("src", "https://static.igem.org/mediawiki/2017/f/f8/T-Oxford-CruziGameLarge.png").on("load", function() {
 
−
      $(this).remove();
 
−
      $(".cruzi-large").css("background", "url(https://static.igem.org/mediawiki/2017/f/f8/T-Oxford-CruziGameLarge.png) no-repeat");
 
−
     
 
−
      finished_loading = true;
 
−
      $(".cruzi-message").fadeOut(250);
 
−
     
 
−
      console.log("Loaded!");
 
  
−
      //Now the mousemove function
+
    // allow button on the black menu bar to show/hide the side menu
−
      $(".cruzi-magnify").mousemove(function(e){
+
    function hide_show_menu() {
−
        //When the user hovers on the image, the script will first calculate
+
 
−
        //the native dimensions if they don't exist. Only after the native dimensions
+
      // in case you preview mode is selected, the menu is hidden for better visibility
−
        //are available, the script will show the zoomed version.
+
      if (window.location.href.indexOf("submit") >= 0) {
−
       
+
         $(".igem_2017_menu_wrapper").hide();
−
        //console.log("mousemove");
+
      }
−
          
+
 
−
        //x/y coordinates of the mouse
+
      // if the black menu bar has been loaded
−
        //This is the position of .magnify with respect to the document.
+
         if (document.getElementById('bars_item')) {
−
        var magnify_offset = $(this).offset();
+
 
−
        //We will deduct the positions of .magnify from the mouse positions with
+
         // when the "bars_item" has been clicked
−
        //respect to the document to get the mouse positions with respect to the  
+
         $("#bars_item").click(function() {
−
         //container(.magnify)
+
          $("#sideMenu").hide();
−
        var mx = e.pageX - magnify_offset.left;
+
 
−
        var my = e.pageY - magnify_offset.top;
+
          // show/hide the menu wrapper
−
       
+
          $(".igem_2017_menu_wrapper").fadeToggle("100");
−
        if (mx < 35) {mx = 35;}
+
         }); 
−
         if (my < 35) {my = 35;}
+
         }
−
         if (mx > $(this).width() - 35) {mx = $(this).width() - 35;}
+
 
−
        if (my > $(this).height() - 35) {my = $(this).height() - 35;}
+
      // because the black menu bars loads at a different time than the rest of the page, this function is set on a time out so it can run again in case it has not been loaded yet
−
          
+
      else {
−
         if (start_time == -1) {
+
            setTimeout(hide_show_menu, 15);
−
          // Start the timer
+
      }
−
          start_time = new Date;
+
    }
−
        }
+
 
  
−
        //if(minside)
 
−
        //{
 
−
          //The background position of .cruzi-large will be changed according to the position
 
−
          //of the mouse over the .cruzi-small image. So we will get the ratio of the pixel
 
−
          //under the mouse pointer with respect to the image and use that to position the
 
−
          //large image inside the magnifying glass
 
−
          var rx = Math.round(mx/$(".cruzi-small").width()*native_width - $(".cruzi-large").width()/2)*-1;
 
−
          var ry = Math.round(my/$(".cruzi-small").height()*native_height - $(".cruzi-large").height()/2)*-1;
 
−
          var bgp = rx + "px " + ry + "px";
 
−
         
 
−
          //Time to move the magnifying glass with the mouse
 
−
          var px = mx - $(".cruzi-large").width()/2;
 
−
          var py = my - $(".cruzi-large").height()/2;
 
−
          //Now the glass moves with the mouse
 
−
          //The logic is to deduct half of the glass's width and height from the
 
−
          //mouse coordinates to place it with its center at the mouse coordinates
 
−
         
 
−
          //If you hover on the image now, you should see the magnifying glass in action
 
−
          $(".cruzi-large").css({left: px, top: py, backgroundPosition: bgp});
 
−
        //}
 
−
        if (mx > 523) {
 
−
          if (mx < 612) {
 
−
            if (my > 285) {
 
−
              if (my < 366) {
 
−
                detection = detection + 1;
 
−
              }
 
−
            }
 
−
          }
 
−
        }
 
−
        if (detection > 10) {
 
−
          if (end_time == -1) {
 
−
            end_time = new Date;
 
−
            $(".cruzi-message").text("Yay! You've found it in " + Math.round((end_time - start_time)/1000) + " Seconds. In practice, it takes much longer for a sample of blood under the microscope.");
 
−
            $(".cruzi-message").css("background", "rgba(0, 255, 0, 0.4)");
 
−
            $(".cruzi-message").fadeIn(1000);
 
−
          }
 
−
        }
 
−
      });
 
−
    });
 
−
  });
 
 
</script>
 
</script>
  
−
<style type="text/css">
+
<head>  
−
/*Some CSS*/
+
−
* {margin: 0; padding: 0;}
+
−
.cruzi-magnify {width: 800px; margin: 10px auto; position: relative; float: none}
+
  
−
/*Lets create the magnifying glass*/
+
  <!-- This tells the browser that your page is responsive -->
−
.cruzi-large {
+
   <meta name="viewport" content="width=device-width, initial-scale=1">
−
   width: 175px; height: 175px;
+
        <!-- This is from CSS templates -->
−
   position: absolute;
+
  <!--<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">-->
−
   border-radius: 100%;
+
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
 +
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 
    
 
    
−
   /*Multiple box shadows to achieve the glass effect*/
+
   <!-- Latest compiled and minified CSS -->
−
   box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85),
+
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
−
   0 0 7px 7px rgba(0, 0, 0, 0.25),
+
 
−
   inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
+
   <!-- Latest compiled JavaScript -->
 +
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
    
 
    
−
   /*Lets load up the large image first*/
+
   <!-- Google Analytics -->
−
   /*background: url('https://static.igem.org/mediawiki/2017/f/f8/T-Oxford-CruziGameLarge.png') no-repeat;*/
+
   <script>
 +
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
 +
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
 +
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
 +
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
 +
 
 +
  ga('create', 'UA-102136418-1', 'auto');
 +
  ga('send', 'pageview');
 +
 
 +
  </script>
 +
 
 +
</head>
 +
 
 +
<style>
 +
/***************************************************** DEFAULT WIKI SETTINGS  ****************************************************/
 +
 
 
    
 
    
−
   /*hide the glass by default*/
+
   body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
−
  display: block;
+
        body, html {
 +
        height: 100%;
 +
        line-height: 1.8;
 +
        }
 +
        Clear the default wiki settings
 
    
 
    
 +
  #home_logo, #sideMenu { display:none; }
 +
  #sideMenu, #top_title, .patrollink  {display:none;}
 +
  #content { width:100%; padding:0px;  margin-top:-7px; margin-left:0px;}
 +
  body {background-color:white; }
 +
  #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 +
 
 +
 
 +
 
 +
/**************************************************************** MENU ***************************************************************/
 +
 
 +
/* Add a dark background color with a little bit see-through */
 +
.navbar {
 +
    left: -20px !important;
 +
    right: -20px !important;
 +
    top: -20px !important;
 +
    padding-top: 25px;
 +
    padding-bottom: 5px;
 +
    padding-left: 25px;
 +
    padding-right: 25px;
 +
    background-color: rgba(0,33,71,0.9);
 +
    border-color: transparent;
 +
    border: 0;
 +
    font-size: 14px !important;
 +
    letter-spacing: 1px;
 +
    /*opacity:0.95;*/
 +
    margin-top: 17px;
 
}
 
}
  
−
.cruzi-message {
+
.navbar li {
−
  width: 100%;
+
    margin: 0 20px;
−
  padding: 30% 10% 0% 10%;
+
    border-radius: 5px;
−
   height: 175px;
+
}
−
   border-radius: 100%;
+
 
 +
/* Add a gray color to all navbar links */
 +
.navbar li a, .navbar .navbar-brand {  
 +
    color: #fff;
 +
    border-radius: 5px;
 +
}
 +
 
 +
/* the color of the single Link ('safety') on hover */
 +
.navbar-nav li a:hover {
 +
    color: #1abc9c;
 +
}
 +
 
 +
/* The active link this seems to be useless at the moment*/
 +
.navbar-nav li.active a {
 +
    color: #fff;
 +
    background-color:#29292c;
 +
}
 +
 
 +
/* Remove border color from the collapsible button */
 +
.navbar-default .navbar-toggle {
 +
    border-color: transparent;
 +
}
 +
 
 +
.navbar-default {
 +
    border-color:transparent;
 +
}
 +
 
 +
.navbar-collapse>ul:before {
 +
    content: "";
 +
    margin-top: 40px;
 +
}
 +
 
 +
@media (min-width: 768px){
 +
    .navbar-collapse>ul:before {
 +
        content: "";
 +
        margin-top: 0px;
 +
    }
 +
 
 +
    .navbar-right {
 +
        margin-right: 10% !important;
 +
    }
 +
 
 +
    .navbar-header {
 +
        margin-left: 10% !important;
 +
    }
 +
   
 +
    .navbar>li>a {
 +
        padding: 10px 15px;
 +
    }
 +
}
 +
 
 +
/* the color of the Dropdown on click */
 +
.open .dropdown-toggle {
 +
    color: #1abc9c;
 +
    background-color: #fff;
 +
}
 +
 
 +
/* the color of the Dropdown links */
 +
.dropdown-menu li a {
 +
    color: #000;
 +
    letter-spacing: 1px;
 +
}
 +
 
 +
/* the color of the dropdown links on hover */
 +
.dropdown-menu li a:hover {
 +
    background-color: #fff;
 +
}
 +
 
 +
.navbar-toggle .icon-bar {
 +
    background: white;
 +
}
 +
 
 +
.navbar-header img {
 +
    width: 100px;
 +
    height: 100px;
 +
    margin-top: 0px;
 +
    margin-bottom: -50px;
 +
    border-radius: 100%;
 +
}
 +
 
 +
#globalWrapper {
 +
    margin-bottom: 0px;
 +
    padding-bottom: 0px;
 +
}
 +
 
 +
#top_menu_14 {
 +
    height: 18px;
 +
}
 +
 
 +
#top_menu_14 #user_item {
 +
    margin-top: -3px;
 +
    padding-top: 0px;
 +
}
 +
 
 +
#top_menu_14 #bars_item img {
 +
    vertical-align: top;
 +
}
 +
 
 +
@media (max-width: 810px) {
 +
    #home-link {
 +
        display:none;
 +
    }
 +
}
 +
 
 +
/***************************************************** CONTENT OF THE PAGE ****************************************************/
 +
 
 +
  /* Wrapper for the content */
 +
  .igem_2017_content_wrapper {
 +
    margin: 2%;
 +
    display:block;
 +
    float:left;
 +
    background-color:white;
 +
    font-family:Tahoma, Geneva, sans-serif;
 +
  }
 +
 
 +
 
 +
/********************************* HTML STYLING  *********************************/
 +
 
 +
  /* styling for the titles h1 h2 */
 +
  .igem_2017_content_wrapper h1, .igem_2017_content_wrapper h2 {
 +
    padding:5px 15px;
 +
    border-bottom: 0px;
 +
    color: #3399ff;
 +
  }
 +
 
 +
 
 +
  /* styling for the titles  h3 h4 h5 h6*/
 +
  .igem_2017_content_wrapper h3, .igem_2017_content_wrapper h4, .igem_2017_content_wrapper h5, .igem_2017_content_wrapper h6 {
 +
    padding:5px 15px;
 +
    border-bottom:0px;
 +
    color: #000000; 
 +
  }
 +
 
 +
 
 +
  /* font and text */
 +
  .igem_2017_content_wrapper p {
 +
    padding: 0px 15px;
 +
    font-size: 13px;
 +
  }
 +
 
 +
  /* Links */
 +
  .igem_2017_content_wrapper a {
 +
    font-weight: bold;
 +
    text-decoration: underline;
 +
    text-decoration-color: #3399ff;
 +
    color:  #3399ff;
 +
    -webkit-transition: all 0.4s ease;
 +
    -moz-transition: all 0.4s ease;
 +
    -ms-transition: all 0.4s ease;
 +
    -o-transition: all 0.4s ease;
 +
    transition: all 0.4s ease;
 +
  }
 +
 
 +
  /* hover for the links */
 +
  .igem_2017_content_wrapper a:hover {
 +
    text-decoration:none;
 +
    color:#000000;
 +
  }
 +
 
 +
  /* non numbered lists */
 +
  .igem_2017_content_wrapper ul {
 +
    padding:0px 20px;
 +
    font-size: 13px;
 +
    font-family:Tahoma, Geneva, sans-serif;
 +
  }
 +
 
 +
  /* numbered lists */
 +
  .igem_2017_content_wrapper ol {
 +
    padding:0px;
 +
    font-size: 13px;
 +
    font-family:Tahoma, Geneva, sans-serif;
 +
  }
 +
 
 +
  /* Table */
 +
  .igem_2017_content_wrapper table {
 +
    width: 97%;
 +
    margin:15px 10px;
 +
    border: 1px solid #d3d3d3;
 +
    border-collapse: collapse;  
 +
   }
 +
 
 +
  /* table cells */
 +
  .igem_2017_content_wrapper  td {
 +
    padding: 10px;
 +
    vertical-align: text-top;
 +
    border: 1px solid #d3d3d3;
 +
    border-collapse: collapse;  
 +
   }
 +
 
 +
  /* table headers */
 +
  .igem_2017_content_wrapper th {
 +
    padding: 10px;
 +
    vertical-align: text-top;
 +
    border: 1px solid #d3d3d3;
 +
    border-collapse: collapse;
 +
    background-color:#f2f2f2;
 +
  }
 +
 
 +
 
 +
/**********************************LAYOUT CLASSES **********************************/
 +
/*currently not used*/
 +
 
 +
  /* general class for column divs */
 +
  .igem_2017_content_wrapper .column  {
 +
    padding: 10px 0px;
 +
    float:left;
 +
  }
 +
 
 +
  /* class for a full width column */
 +
  .column .full_size {
 +
    width:100%;  
 +
  }
 +
 
 +
  /* styling for images in a full width column*/
 +
  .column.full_size img {
 +
    width:97%;
 +
    padding: 10px 15px;
 +
  }
 +
 
 +
  /* class for a half width column */
 +
  .column.half_size {
 +
    width: 50%;
 +
  }
 +
  /* styling for images in a half width column*/
 +
  .column.half_size img {
 +
    width: 94.5%;
 +
    padding: 10px 15px;
 +
  }
 +
 
 +
 
 +
 
 +
 
 +
/********************************* SUPPORT CLASSES ********************************/
 +
 
 +
  /* class that clears content below*/
 +
  .igem_2017_content_wrapper .clear {
 +
    clear:both;
 +
  }
 
    
 
    
−
  font: bold 9pt Arial, sans-serif;
 
−
  text-align: center;
 
−
  display: block;
 
 
    
 
    
−
   /*background: rgba(0, 255, 0, 0.4);*/
+
   /* adds extra spacing when clearing content */
−
}
+
  .igem_2017_content_wrapper  .clear.extra_space {
 +
    height: 30px;
 +
  }
  
−
/*To solve overlap bug at the edges during magnification*/
 
−
.cruzi-small { display: block; }
 
  
−
@media only screen and (max-width: 768px) {
+
  /* highlight class, makes content slightly smaller */
−
  #cruzi-game {
+
  .igem_2017_content_wrapper .highlight {
−
     display: none;
+
    margin: 0px 15px;
 +
    padding: 15px 0px;
 +
  }
 +
 
 +
 
 +
  /* highlight class, adds a gray background */
 +
  .igem_2017_content_wrapper .highlight.gray {
 +
    background-color: #f2f2f2;
 +
  }
 +
 
 +
  /* highlight with decoration blue line on top */
 +
  .igem_2017_content_wrapper .highlight.blue_top {
 +
      border-top: 4px solid #3399ff;
 +
  }
 +
 
 +
  /* highlight with a full blue border decoration */
 +
  .igem_2017_content_wrapper .highlight.blue_border {
 +
      border: 4px solid  #3399ff;
 +
  }
 +
 
 +
 
 +
  /* button class */
 +
  .igem_2017_content_wrapper .button{
 +
    max-width: 35%;
 +
    margin: 30px auto;
 +
    padding: 12px 10px;
 +
      background-color: #3399ff; 
 +
      text-align: center;
 +
      color: #ffffff;
 +
    -webkit-transition: all 0.4s ease;
 +
    -moz-transition: all 0.4s ease;
 +
    -ms-transition: all 0.4s ease;
 +
    -o-transition: all 0.4s ease; transition: all 0.4s ease; 
 +
  }
 +
 
 +
  /* styling for button on hover */
 +
  .igem_2017_content_wrapper .button:hover{
 +
    background-color: #3399ff; 
 +
      color: #000000;
 +
  }
 +
 
 +
 
 +
 
 +
 
 +
/***************************************************** RESPONSIVE STYLING ****************************************************/
 +
 
 +
  /* IF THE SCREEN IS LESS THAN 1200PX */
 +
  @media only screen and (max-width: 1200px) {
 +
 
 +
    #content {width:100%; }
 +
    .igem_2017_menu_wrapper {width:15%; right:0;}
 +
    .highlight {padding:10px 0px;}
 +
    .igem_2017_menu_wrapper #display_menu_control { display:none; }
 +
    #menu_content { display:block;}
 +
    .menu_button.direct_to_page {padding-left: 17px;}
 +
   
 +
  }
 +
 
 +
  /* IF THE SCREEN IS LESS THAN 800PX */
 +
  @media only screen and (max-width: 800px) {
 +
 
 +
     .igem_2017_menu_wrapper { width:100%; height: 15%; position:relative; left:0%;}
 +
    .igem_2017_content_wrapper {width:100%; margin-left:0px;}
 +
    .column.half_size  {width:100%; }
 +
    .column.full_size img, .column.half_size img {  width: 100%; padding: 10px 0px;}
 +
    .highlight {padding:15px 5px;}
 +
    .igem_2017_menu_wrapper #display_menu_control { display:block; }
 +
    #menu_content { display:none;}
 +
    .igem_2017_menu_wrapper .menu_button .expand_collapse_icon { width: 5%; }
 +
    .menu_bottom_padding {display:none;}
 +
    .menu_button.direct_to_page { padding-left: 36px; }
 
   }
 
   }
−
}
 
  
−
</style>
 
  
−
</head>
 
−
<body>
 
−
<div class="container-fluid" style="margin-top: 80px">
 
 
    
 
    
 
    
 
    
−
   <div class="jumbotron">
+
   /* special class that the system uses to make sure the team wants a page to be evaluated */
−
    <h1 class="text-center"><i>See. cruzi</i></h1>     
+
  .judges-will-not-evaluate {
−
    <p><b>Developing a cell-free detection system for Chagas disease in the acute phase by detecting biomarkers in the blood</b></p>
+
      width: 96.6%;
−
    <p>The aim of our iGEM project is to design a cell-free diagnosis kit to detect the presence of biomarkers specific to the <i>Trypansosoma cruzi</i>, the protozoan parasite responsible for Chagas disease, a neglected tropical disease impacting 6-7 million people primarily in Latin America.</p>
+
      margin: 5px 15px;
−
    <p>Currently, the acute (early) phase of Chagas disease is difficult to diagnose, due to it being asymptomatic and methods using DNA amplification or immunoassays being both expensive and inaccessible to the majority of those affected by Chagas disease. Current treatments using benznidazole and nifurtimox are almost 100% effective if given shortly after the onset of the acute phase. However, lack of diagnosis in the acute phase leads to the onset of the chronic phase, which causes irreversible pathological consequences to the heart, digestive system, and nervous system.</p>
+
      display: block;
−
    <p>The final diagnostic kit would allow Chagas disease to be diagnosed in the acute phase by preventing the clotting of a blood sample, by releasing hirudin (a peptide from leeches) upon cleavage by the protease cruzipain (a cysteine protease specific to <i>T. cruzi</i>). Our system would ultimately be completely cell-free, with the components freeze-dried and competent after rehydration, allowing it to be used in the field without the need for expensive equipment or highly trained professionals - all it will require is a blood sample. We imagine that this system would be adaptable for other parasites and pathogens which have similar difficulties in detection, both in the input for the system and the options for output.</p>
+
     border: 4px solid #3399ff;
−
    <p>We are developing two methods to detect the presence of cruzipain, both being modelled in <i>E. coli</i>. The first is DNA based, and involves the cleavage of a repressor protein to lead to expression of hirudin (modelled using fluorescent proteins and using  TEV instead of cruzipain). The second involves tagging hirudin (again modelled with a fluorophore) to outer membrane vesicles, where the peptide could be cleaved and released from OmpA by cruzipain (modelled with TEV). Our systems would ultimately be completely cell-free, with the components freeze-dried and competent after rehydration.</p>
+
      font-weight: bold;
−
    <p>Chagas disease claims over 12000 lives per year. We believe that the death toll could be significantly reduced by a synthetic biology solution, which is cost effective, accessible, and accurate in the swift diagnosis of Chagas disease; a solution that our project aims to provide.</p>
+
  }
−
    <p>If you want to collaborate with us, please send us an email:<u>oxfordigem@bioch.ox.ac.uk</u></p>
+
−
     <p> Please also support us by liking our facebook page &rarr; <a href="https://www.facebook.com/oxfordigem/"><img src="https://static.igem.org/mediawiki/2017/e/e4/T--oxford--fbicon.png" alt="Facebook Page" width="20" height=“20"> </a> </p>
+
−
    <div class="center" > <img class="img-responsive" src="https://static.igem.org/mediawiki/2017/1/10/Oxford_banner.png"> </div>
+
−
    </div>
+
 
    
 
    
−
  <div class="container-fluid" id="cruzi-game">
+
</style>
−
    <h1 class="text-center">Do you know how long it takes to screen a blood smear for Chagas Disease?</h1>
+
 
−
    <p style="text-align: center"><b>Try to find the <i>Trypansosoma cruzi</i> parasite in the blood sample below.</b></p>
+
 
−
     <div class="cruzi-magnify">
+
<!-- THIS IS WHERE THE HTML BEGINS -->
−
   
+
 
−
       <!-- This is the magnifying glass which will contain the original/large version -->
+
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="50">
−
       <div class="cruzi-large">
+
 
−
         <div class="cruzi-message">Loading...</div>
+
<nav class= "navbar-fixed-top navbar">
−
      </div>
+
  <div class="container-fluid">
−
        
+
     <div class="navbar-header">
−
       <!-- This is the small image -->
+
       <!-- This allows the navigation bar to be replaced by a button in the top right corner when screen is to small -->
−
      <img class="cruzi-small" src="https://static.igem.org/mediawiki/2017/f/f6/T-Oxford-CruziGameSmall.png" width="800"/>
+
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
−
   
+
         <span class="icon-bar"></span>
 +
        <span class="icon-bar"></span>
 +
        <span class="icon-bar"></span>  
 +
       </button>
 +
 
 +
       <!-- This is the logo -->
 +
    <a href="https://2017.igem.org/Team:Oxford" class="navbar-left"><img src="https://static.igem.org/mediawiki/2017/0/09/T--oxford--oxigemicon.png"></a>
 +
 
 
     </div>
 
     </div>
 +
    <div class="collapse navbar-collapse" id="myNavbar">
 +
      <ul class="nav navbar-nav navbar-right">
 +
       
 +
        <li id="home-link"><a href="https://2017.igem.org/Team:Oxford">HOME</a></li>
 +
       
 +
        <!-- This is the team dropdown -->
 +
        <li>
 +
          <a href="https://2017.igem.org/Team:Oxford/Team">TEAM</a>
 +
          <!--
 +
          <ul class="dropdown-menu">
 +
            <li><a href="https://2017.igem.org/Team:Oxford/Team">Meet the Team</a></li>
 +
           
 +
          </ul>
 +
          -->
 +
        </li>
 +
       
 +
        <!-- This is the project dropdown -->
 +
        <li class="dropdown">
 +
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">PROJECT
 +
            <span class="caret"></span>
 +
          </a>
 +
          <ul class="dropdown-menu">
 +
            <li><a href="https://2017.igem.org/Team:Oxford/Description">Description</a></li>
 +
            <li><a href="https://2017.igem.org/Team:Oxford/Design">Design</a></li>
 +
            <li><a href="https://2017.igem.org/Team:Oxford/Experiments">Experiments</a></li>
 +
            <li><a href="https://2017.igem.org/Team:Oxford/Notebook">Notebook</a></li>
 +
            <li><a href="https://2017.igem.org/Team:Oxford/InterLab">Interlab</a></li>
 +
            <li><a href="https://2017.igem.org/Team:Oxford/Contribution">Contribution</a></li>
 +
            <li><a href="https://2017.igem.org/Team:Oxford/Model">Model</a></li>
 +
            <li><a href="https://2017.igem.org/Team:Oxford/Results">Results</a></li>
 +
            <li><a href="https://2017.igem.org/Team:Oxford/Demonstrate">Demonstrate</a></li>
 +
            <li><a href="https://2017.igem.org/Team:Oxford/Improve">Improve</a></li>
 +
            <li><a href="https://2017.igem.org/Team:Oxford/Attributions">Attributions</a></li>
 +
          </ul>
 +
        </li>
  
−
    <!-- Lets load up prefixfree to handle CSS3 vendor prefixes -->
+
        <!-- This is the parts dropdown -->
−
    <!--<script src="http://thecodeplayer.com/uploads/js/prefixfree.js" type="text/javascript"></script>-->
+
        <li class="dropdown">
−
  </div>
+
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">PARTS
−
 
+
            <span class="caret"></span>
−
</div>
+
          </a>
 +
          <ul class="dropdown-menu">
 +
            <li><a href="https://2017.igem.org/Team:Oxford/Parts">Parts</a></li>
 +
            <li><a href="https://2017.igem.org/Team:Oxford/Basic_Part">Basic Parts</a></li>
 +
            <li><a href="https://2017.igem.org/Team:Oxford/Composite_Part">Composite Parts</a></li>
 +
            <li><a href="https://2017.igem.org/Team:Oxford/Part_Collection">Part Collection</a></li>
 +
          </ul>
 +
        </li>
  
 +
        <!-- This is the safety button -->
 +
        <li><a href="https://2017.igem.org/Team:Oxford/Safety">SAFETY</a></li>
  
 +
        <!-- This is the human practices dropdown -->
 +
        <li class="dropdown">
 +
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">HUMAN PRACTICES
 +
            <span class="caret"></span>
 +
          </a>
 +
          <ul class="dropdown-menu">
 +
            <li><a href="https://2017.igem.org/Team:Oxford/HP/Silver">Silver HP</a></li>
 +
            <li><a href="https://2017.igem.org/Team:Oxford/HP/Gold_Integrated">Integrated and Gold</a></li>
 +
            <li><a href="https://2017.igem.org/Team:Oxford/Engagement">Public Engagement</a></li>
 +
            <li><a href="https://2017.igem.org/Team:Oxford/Collaborations">Collaborations</a></li>
 +
          </ul>
 +
        </li>
  
−
<div class="clear"></div>
+
        <!-- This is the awards dropdown -->
 +
        <li class="dropdown">
 +
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">AWARDS
 +
            <span class="caret"></span>
 +
          </a>
 +
          <ul class="dropdown-menu">
 +
            <li><a href="https://2017.igem.org/Team:Oxford/Applied_Design">Applied Design</a></li>
 +
            <li><a href="https://2017.igem.org/Team:Oxford/Entrepreneurship">Entrepreneurship</a></li>
 +
            <li><a href="https://2017.igem.org/Team:Oxford/Hardware">Hardware</a></li>
 +
            <li><a href="https://2017.igem.org/Team:Oxford/Measurement">Measurement</a></li>
 +
            <li><a href="https://2017.igem.org/Team:Oxford/Model">Model</a></li>
 +
            <li><a href="https://2017.igem.org/Team:Oxford/Plant">Plant</a></li>
 +
            <li><a href="https://2017.igem.org/Team:Oxford/Software">Software</a></li>
 +
          </ul>
 +
        </li>
  
 +
        <!-- This is the judging form button -->
 +
        <li><a href="https://igem.org/2017_Judging_Form?team=Oxford">JUDGING FORM</a></li>
  
−
</body>
+
        <!-- This is the search button -->
−
</html>
+
      </ul>
 +
    </div>
 +
  </div>
 +
</nav>

Revision as of 10:01, 11 September 2017