Difference between revisions of "Template:NUS Singapore-A"

Line 1: Line 1:
 
<html>
 
<html>
 
<head>
 
<head>
−
  <meta name="viewport" content="width=device-width, initial-scale=1">
+
<meta name="viewport" content="width=device-width, initial-scale=1">
−
  <meta charset="utf-8">
+
<meta charset="utf-8">
−
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
<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://fonts.googleapis.com/css?family=Roboto:400,400i">
 +
<link rel="icon" href="https://static.igem.org/mediawiki/2018/2/2a/T--NUS_Singapore-A--TeamLogo.png">
  
−
  <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://www.w3schools.com/w3css/4/w3.css">
−
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,400i">
+
−
  <link rel="icon" href="https://static.igem.org/mediawiki/2018/2/2a/T--NUS_Singapore-A--TeamLogo.png">
+
−
 
+
−
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+
 
</head>
 
</head>
 +
 
<style>
 
<style>
 
/***************************************************** DEFAULT WIKI SETTINGS  ***************************************/
 
/***************************************************** DEFAULT WIKI SETTINGS  ***************************************/
Line 56: Line 56:
 
}
 
}
  
 +
/***************End of Back to top button ***********/
 +
 +
/************************************************** Back to top button style **************************************************/
 +
 +
#BacktoTopBtn {
 +
  display: none;
 +
  position: fixed;
 +
  bottom: 3px;
 +
  right: 10px;
 +
  z-index: 99;
 +
  border: none;
 +
  outline: none;
 +
  background-color: #F5B041;
 +
  color: white;
 +
  cursor: pointer;
 +
  padding: 5px;
 +
  border-radius: 20px;
 +
}
 +
 +
#BacktoTopBtn:hover {
 +
  background-color: #2980B9;
 +
}
 +
 +
/*******************/
 +
 +
 +
body, html {
 +
    height: 100%;
 +
    line-height: 1.8;
 +
}
 +
 +
/***********  Change of Background Color *************/
 +
 +
body  {
 +
    background-image: url("https://static.igem.org/mediawiki/2018/0/04/T--NUS_Singapore-A--Wiki_theme5.jpg");
 +
    background-repeat: no-repeat;
 +
    background-attachment: fixed;
 +
    height: 100%;
 +
    background-size: 100% 100%;
 +
}
 +
 +
 +
.w3-bar .w3-button {
 +
    padding: 16px;
 +
}
 +
 +
.w3-button {
 +
  display: inline-block;
 +
  font-family: "Montserrat";
 +
  font-weight: 400;
 +
  font-size: 1.2em;
 +
  letter-spacing: 0.1em;
 +
  height: 100%;
 +
}
 +
 +
.nav .w3-hide-small a {
 +
  display: inline-block;
 +
  font-family: "Montserrat";
 +
  font-weight: 400;
 +
  font-size: 1.2em;
 +
  letter-spacing: 0.1em;
 +
  height: 100%;
 +
  border: none;
 +
  outline: none;
 +
  background-color: transparent;
 +
}
 +
 +
.w3-dropdown-hover  { 
 +
  display: inline-block;
 +
  font-family: "Montserrat";
 +
  font-weight: 400;
 +
  font-size: 1.2em;
 +
  letter-spacing: 0.1em;
 +
  height: 100%;
 +
  border: none;
 +
  outline: none;
 +
  background-color: transparent;
 +
}
 +
 +
.w3-dropdown-content {
 +
  display: none;
 +
  position: absolute;
 +
/*Change this to change the color of the background that houses the dropdown menu content. The last number affects the opacity of the color*/
 +
  background-color: rgba(255, 255, 255, 0.95);
 +
  text-align: left;
 +
  max-width: 250px;
 +
  z-index: 3;
 +
}
 +
 +
.nav {
 +
  width: 100%;
 +
  min-height: 45px;
 +
  /*padding-top: 1em;*/
 +
/* This color means white and slightly transparent */
 +
  background-color: rgba(255, 255, 255, 0.82);
 +
  font-family: "Montserrat";
 +
  font-weight: 400;
 +
  letter-spacing: .1em;
 +
  text-align: center;
 +
  position: relative;
 +
  z-index: 3;
 +
}
  
  
Line 65: Line 167:
 
   height: auto;
 
   height: auto;
 
   margin: 0px;
 
   margin: 0px;
−
   padding-top: 20px;
+
   padding: 35px;
−
  padding-left: 35px;
+
−
  padding-right: 35px;
+
 
}
 
}
  
Line 83: Line 183:
 
   transform-origin: left 0;
 
   transform-origin: left 0;
 
   position: fixed;
 
   position: fixed;
−
   top: 380px;
+
   top: 400px;
−
   left: 10px;
+
   left: 12px;  
−
}
+
−
 
+
−
.welcome-message{
+
−
  font-family: "Roboto", sans-serif ;
+
−
  font-size: 20px;
+
−
  letter-spacing: .1em;
+
−
  font-weight: 300;
+
−
  width: auto;
+
−
  position: absolute;
+
−
  top: 20px;
+
−
  left: 50px;  
+
 
}
 
}
  
Line 101: Line 190:
 
.instalogo{
 
.instalogo{
 
   position: fixed;
 
   position: fixed;
−
   top: 65px;
+
   top: 75px;
−
   left: 8px;
+
   left: 10px;
 
   font-size: 2.0em !important;
 
   font-size: 2.0em !important;
 
   color: #1e1e1e;
 
   color: #1e1e1e;
Line 111: Line 200:
 
.fblogo{
 
.fblogo{
 
   position: fixed;
 
   position: fixed;
−
   top: 108px;
+
   top: 115px;
−
   left: 12px;
+
   left: 15px;
 
   font-size: 1.5em !important;
 
   font-size: 1.5em !important;
 
   color: #1e1e1e;
 
   color: #1e1e1e;
Line 121: Line 210:
 
.maillogo{
 
.maillogo{
 
   position: fixed;
 
   position: fixed;
−
   top: 145px;
+
   top: 150px;
−
   left: 8px;
+
   left: 10px;
 
   font-size: 1.5em !important;
 
   font-size: 1.5em !important;
 
   color: #1e1e1e;
 
   color: #1e1e1e;
Line 128: Line 217:
 
.maillogo:hover{
 
.maillogo:hover{
 
   color: #3d4d6d;
 
   color: #3d4d6d;
−
}
 
−
 
−
 
−
/***********  Change of Background Color *************/
 
−
.bg-primary {
 
−
  background-image: url("https://static.igem.org/mediawiki/2018/0/04/T--NUS_Singapore-A--Wiki_theme5.jpg");
 
−
  background-size: 100% 100%;
 
−
  color: black;
 
 
}
 
}
  
Line 146: Line 227:
 
   max-width: 100%;
 
   max-width: 100%;
 
   height: auto;
 
   height: auto;
−
   margin: 0px 5px -10px 5px;
+
   margin: 5px 5px -10px 5px;
 
   text-align: center;
 
   text-align: center;
 
   /*background-color: white;*/
 
   /*background-color: white;*/
Line 163: Line 244:
 
   width: 150px;
 
   width: 150px;
 
}
 
}
−
 
  
  
Line 170: Line 250:
 
/* The wrapper for the nav menu*/
 
/* The wrapper for the nav menu*/
 
.nav {
 
.nav {
 +
  height: 60px;
 
   width: 100%;
 
   width: 100%;
−
  min-height: 45px;
 
 
   /*padding-top: 1em;*/
 
   /*padding-top: 1em;*/
 
/* This color means white and slightly transparent */
 
/* This color means white and slightly transparent */
−
   background-color: rgba(255, 255, 255, 0.95);
+
   background-color: rgba(255, 255, 255, 0.82);
 +
  font-family: "Montserrat";
 +
  font-weight: 400;
 +
  letter-spacing: .1em;
 
   text-align: center;
 
   text-align: center;
 
   position: relative;
 
   position: relative;
Line 182: Line 265:
 
/* Add an active class to highlight the current page */
 
/* Add an active class to highlight the current page */
 
.active {
 
.active {
−
     background-color:rgba(255, 255, 255, 0.95);
+
     background-color:rgba(255, 255, 255, 0.82);
 
}
 
}
  
−
/* Hide the link that should open and close the topnav on small screens */
+
/* Hide the link that shoul
 +
    display: none;d open and close the topnav on small screens */
 
.nav .icon {
 
.nav .icon {
−
    display: none;
 
 
}
 
}
  
 
/* the dropdwn class is given to any button which require a dropdown menu...which is all*/
 
/* the dropdwn class is given to any button which require a dropdown menu...which is all*/
−
.nav .dropdown{
+
.dropdown{
 
   display: inline-block;
 
   display: inline-block;
 
   overflow: hidden;
 
   overflow: hidden;
 
   height: 100%;
 
   height: 100%;
−
  margin-top: 8px;
 
 
}
 
}
  
 
/* This configures the main button (Project, Hardware, Team, blah blah) */
 
/* This configures the main button (Project, Hardware, Team, blah blah) */
−
.nav .dropdown .dropbtn{
+
.dropdown .dropbtn{
 
   font-family: "Montserrat";
 
   font-family: "Montserrat";
 
   font-weight: 400;
 
   font-weight: 400;
−
   font-size: 1.2em;
+
   font-size: 1.1em;
−
   letter-spacing: 0.1em;
+
   letter-spacing: 0.2em;
−
   margin: auto 6px;
+
   margin: auto 10px;
 
   padding: 10px 5px;
 
   padding: 10px 5px;
 
   height: 100%;
 
   height: 100%;
Line 214: Line 296:
  
 
/* The dropdwn-content class contains the hidden content (sub-menu) */
 
/* The dropdwn-content class contains the hidden content (sub-menu) */
−
.nav .dropdown .dropdown-content{
+
.dropdown-content{
 
   display: none;
 
   display: none;
 
   position: absolute;
 
   position: absolute;
 
/*Change this to change the color of the background that houses the dropdown menu content. The last number affects the opacity of the color*/
 
/*Change this to change the color of the background that houses the dropdown menu content. The last number affects the opacity of the color*/
−
   background-color: rgba(255, 255, 255, 0.95);
+
   background-color: rgba(255, 255, 255, 0.9);
 
   text-align: left;
 
   text-align: left;
 
   max-width: 250px;
 
   max-width: 250px;
Line 225: Line 307:
  
 
/* This styles the links within the dropdwn-content */
 
/* This styles the links within the dropdwn-content */
−
.nav .dropdown .dropdown-content a{
+
.dropdown-content a{
 
   float: none;
 
   float: none;
−
   padding-top: 5px;
+
   padding: 5px; auto;
−
  padding-bottom: 5px;
+
−
  padding-left: 4px;
+
 
   margin: auto auto;
 
   margin: auto auto;
 
   text-decoration: none;
 
   text-decoration: none;
Line 235: Line 315:
 
   display: block;
 
   display: block;
 
   min-width: inherit;
 
   min-width: inherit;
−
   font-size: 1.2em;
+
   font-size: 1.1em;
−
   font-family: "Montserrat" !important;
+
   font-family: "Montserrat";
 
   font-weight: 400;
 
   font-weight: 400;
−
   letter-spacing: 0.1em;
+
   letter-spacing: 0.2em;
 
}
 
}
  
 
/* Add the hover colors and the reveal of the menu */
 
/* Add the hover colors and the reveal of the menu */
−
.nav .dropdown:hover {
+
.dropdown:hover {
 
   background-color: #dddddd;
 
   background-color: #dddddd;
 
}
 
}
  
−
.nav .dropdown:hover .dropdown-content {
+
.dropdown:hover .dropdown-content {
 
   display: block;
 
   display: block;
 
}
 
}
  
−
.nav .dropdown-content a:hover{
+
.dropdown-content a:hover{
 
   background-color: #dddddd;
 
   background-color: #dddddd;
 
}
 
}
Line 257: Line 337:
 
.sticky{
 
.sticky{
 
   position: fixed;
 
   position: fixed;
−
   top: 1%;
+
   top: 0;
 
   left: 0;
 
   left: 0;
−
  padding-left: 42px;
 
−
  padding-right: 42px;
 
 
}
 
}
  
  
 
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
 
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
−
@media screen and (max-width: 700px) {
+
@media screen and (max-width: 600px) {
−
   .nav .dropdown, .nusgem_mail, .welcome-message, .instalogo, .fblogo, .maillogo, .nus-logo {
+
   .dropdown .dropbtn, .nusgem_mail, .instalogo, .fblogo, .maillogo, .nus-logo {
 
     display: none;
 
     display: none;
 
   }
 
   }
Line 272: Line 350:
 
     float: right;
 
     float: right;
 
     display: block;
 
     display: block;
−
    position: relative;
 
−
    font-size: 30px;
 
 
   }
 
   }
−
  .nav .dropdown .dropdown-content {
 
−
    text-align: center;
 
−
  }
 
−
 
 
   .outer-border {
 
   .outer-border {
 
     padding: 0px;
 
     padding: 0px;
Line 293: Line 365:
  
 
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
 
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
−
@media screen and (max-width: 700px) {
+
@media screen and (max-width: 600px) {
 
   .nav.responsive {position: relative;}
 
   .nav.responsive {position: relative;}
 
   .nav.responsive a.icon {
 
   .nav.responsive a.icon {
 
     position: absolute;
 
     position: absolute;
 
     right: 0;
 
     right: 0;
−
     top: 2.5%;
+
     top: 0;
 
   }
 
   }
−
   .nav.responsive .dropdown {float: none; display: block; background-color: #dddddd;}
+
   .nav.responsive .dropdown {float: none;}
−
   .nav.responsive .dropdown-content {position: relative; display: block; background-color: #dddddd;}
+
   .nav.responsive .dropdown-content {position: relative;}
 
   .nav.responsive .dropdown .dropbtn {
 
   .nav.responsive .dropdown .dropbtn {
 
     display: block;
 
     display: block;
 
     width: 100%;
 
     width: 100%;
−
     text-align: center;
+
     text-align: left;
 
   }
 
   }
 
}
 
}
  
−
 
−
/************************************************** Back to top button style **************************************************/
 
−
 
−
#BacktoTopBtn {
 
−
  display: none;
 
−
  position: fixed;
 
−
  bottom: 3px;
 
−
  right: 10px;
 
−
  z-index: 99;
 
−
  border: none;
 
−
  outline: none;
 
−
  background-color: #F5B041;
 
−
  color: white;
 
−
  cursor: pointer;
 
−
  padding: 5px;
 
−
  border-radius: 20px;
 
−
}
 
−
 
−
#BacktoTopBtn:hover {
 
−
  background-color: #2980B9;
 
−
}
 
−
 
−
}
 
 
</style>
 
</style>
−
 
−
 
  
  
Line 377: Line 424:
 
       }
 
       }
 
     }
 
     }
−
 
  
 
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
</script>
 
</script>
−
</head>
 
  
  
  
 +
<body>
  
 +
<div class="nusgem_mail">CONNECT WITH US</div>
  
−
<!--********************************  Here is where the main content starts ************************************-->
+
<div class="outer-border">
 +
    <a href="https://www.instagram.com/nusgem2018/"><i class="fa fa-instagram instalogo"></i></a>
 +
    <a href="https://www.facebook.com/NUSGEM2018/"><i class="fa fa-facebook fblogo"></i></a>
 +
    <a href="mailto:nusigem@gmail.com"><i class="fa fa-envelope maillogo"></i></a>
 +
 
 +
 
 +
<div class="inner-border" style="background-image: none;">
  
−
<body>
 
 
<!-------------------------------------START OF NAV BAR HTML------------------------------------------------------>
 
<!-------------------------------------START OF NAV BAR HTML------------------------------------------------------>
  
−
<div class="welcome-message">Welcome to NUSGEM2018!</div>
+
    <div style="text-align:center;  display:block;"><a href="https://2018.igem.org/Team:NUS_Singapore-A"><img class='nus-logo' src='https://static.igem.org/mediawiki/2018/2/2a/T--NUS_Singapore-A--TeamLogo.png' alt='nus logo'></a>
−
<div class="nusgem_mail">CONNECT WITH US</div>
+
    </div>
  
−
<div class="outer-border bg-primary">
+
<!-- Navbar in desktop (sit on top) -->
−
  <div class="w3-hide-small">
+
<div class="nav" style="display: inline-block;">
−
  <a href="https://www.instagram.com/nusgem2018/"><i class="fa fa-instagram instalogo"></i></a>
+
−
  <a href="https://www.facebook.com/NUSGEM2018/"><i class="fa fa-facebook fblogo"></i></a>
+
−
  <a href="mailto:nusigem@gmail.com"><i class="fa fa-envelope maillogo"></i></a>
+
−
  </div>
+
  
−
  <div class="inner-border" style="background-image: none;">
+
     <!-- Right-sided navbar links -->
−
     <div style="text-align:center;"><a href="https://2018.igem.org/Team:NUS_Singapore-A"><img class='nus-logo' src='https://static.igem.org/mediawiki/2018/2/2a/T--NUS_Singapore-A--TeamLogo.png' alt='nus logo'></a>
+
     <div class="w3-hide-small">
−
    </div>
+
 
−
   
+
       <button class="w3-button">
−
     <div class="nav" id="myNav">
+
      <a href="https://2018.igem.org/Team:NUS_Singapore-A" class="w3-bar-item w3-button">HOME</a>
−
   
+
      </button>
−
       <div class="dropdown">
+
−
        <button class="dropbtn">
+
−
          <a href="https://2018.igem.org/Team:NUS_Singapore-A" style="text-decoration: none; color: black;">HOME</a>
+
−
        </button>
+
−
      </div>
+
  
−
       <div class="dropdown">
+
       <div class="w3-dropdown-hover w3-mobile">
−
         <button class="dropbtn">PROJECT</button>
+
         <button class="w3-button">PROJECT</i></button>
−
         <div class="dropdown-content">
+
         <div class="w3-dropdown-content w3-bar-block">
−
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Description">Description</a>
+
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Description" class="w3-bar-item w3-button w3-mobile">Description</a>
−
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Design">Design</a>
+
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Design" class="w3-bar-item w3-button w3-mobile">Design</a>
−
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Results">Results</a>
+
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Results" class="w3-bar-item w3-button w3-mobile">Results</a>
−
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Demonstrate">Demonstrate</a>
+
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Demonstrate" class="w3-bar-item w3-button w3-mobile">Demonstrate</a>
 
         </div>
 
         </div>
 
       </div>
 
       </div>
−
       <div class="dropdown">
+
 
−
         <button class="dropbtn">LAB</button>
+
       <div class="w3-dropdown-hover w3-mobile">
−
         <div class="dropdown-content">
+
         <button class="w3-button">LAB<i class="fa fa-caret-down"></i></button>
−
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Notebook">Notebook</a>
+
         <div class="w3-dropdown-content w3-bar-block">
−
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Safety">Safety</a>
+
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Notebook" class="w3-bar-item w3-button w3-mobile">Notebook</a>
−
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/InterLab">InterLab Study</a>
+
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Safety" class="w3-bar-item w3-button w3-mobile">Safety</a>
−
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Measurement">Measurement</a>
+
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/InterLab" class="w3-bar-item w3-button w3-mobile">InterLab Study</a>
 +
           <a href="hhttps://2018.igem.org/Team:NUS_Singapore-A/Measurement" class="w3-bar-item w3-button w3-mobile">Measurement</a>
 
         </div>
 
         </div>
 
       </div>
 
       </div>
  
−
       <div class="dropdown">
+
       <div class="w3-dropdown-hover w3-mobile">
−
         <button class="dropbtn">PARTS</button>
+
         <button class="w3-button">PARTS<i class="fa fa-caret-down"></i></button>
−
         <div class="dropdown-content">
+
         <div class="w3-dropdown-content w3-bar-block">
−
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Part_Collection">Parts Overview</a>
+
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Part_Collection" class="w3-bar-item w3-button w3-mobile">Parts Overview</a>
−
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Composite_Part">Composite Parts</a>
+
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Composite_Part" class="w3-bar-item w3-button w3-mobile">Composite Parts</a>
−
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Improve">Improved Parts</a>
+
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Improve" class="w3-bar-item w3-button w3-mobile">Improved Parts</a>
 
         </div>
 
         </div>
 
       </div>
 
       </div>
  
−
       <div class="dropdown">
+
       <a href="https://2018.igem.org/Team:NUS_Singapore-A/Model" class="w3-bar-item w3-button">MODEL</a>
−
        <button class="dropbtn">
+
 
−
          <a href="https://2018.igem.org/Team:NUS_Singapore-A/Model" style="text-decoration: none; color: black;">MODEL</a>
+
       <div class="w3-dropdown-hover w3-mobile">
−
        </button>
+
         <button class="w3-button">HARDWARE<i class="fa fa-caret-down"></i></button>
−
      </div>
+
         <div class="w3-dropdown-content w3-bar-block">
−
     
+
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Hardware" class="w3-bar-item w3-button w3-mobile">Overview</a>
−
       <div class="dropdown">
+
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Hardware/PDF-LA!" class="w3-bar-item w3-button w3-mobile">PDF-LA!</a>
−
         <button class="dropbtn">HARDWARE</button>
+
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Hardware/Sensor" class="w3-bar-item w3-button w3-mobile">2-in-1 Sensor</a>
−
         <div class="dropdown-content">
+
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Hardware/Pump" class="w3-bar-item w3-button w3-mobile">Peristaltic Pump</a>
−
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Hardware">Overview</a>
+
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Hardware/CoJar" class="w3-bar-item w3-button w3-mobile">Fermentation Chamber</a>
−
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Hardware/PDF-LA!">PDF-LA!</a>      
+
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Hardware/Futuristic_Bioreactor" class="w3-bar-item w3-button w3-mobile">Futuristic Bioreactor</a>
−
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Hardware/Sensor">Light Wait - 2-in-1 Sensor</a>
+
−
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Hardware/Pump">Light Wait - Peristaltic Pump</a>
+
−
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Hardware/CoJar">Light Wait - Fermentation Chamber</a>
+
−
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Hardware/Futuristic_Bioreactor">Futuristic Bioreactor</a>
+
 
         </div>
 
         </div>
 
       </div>
 
       </div>
−
     
+
 
−
       <div class="dropdown">
+
       <div class="w3-dropdown-hover w3-mobile">
−
         <button class="dropbtn">HUMAN PRACTICES</button>
+
         <button class="w3-button">HUMAN PRACTICES<i class="fa fa-caret-down"></i></button>
−
         <div class="dropdown-content">
+
         <div class="w3-dropdown-content w3-bar-block">
−
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Human_Practices">Integrated Human Practices</a>
+
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Human_Practices" class="w3-bar-item w3-button w3-mobile">Integrated Human Practices</a>
−
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Public_Engagement">Education & Public Engagement</a>
+
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Public_Engagement" class="w3-bar-item w3-button w3-mobile">Education & Public Engagement</a>
−
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Collaborative_Report">Collaborative Report</a>
+
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Collaborative_Report" class="w3-bar-item w3-button w3-mobile">Collaborative Report</a>
 
         </div>
 
         </div>
 
       </div>
 
       </div>
−
     
+
 
−
       <div class="dropdown">
+
       <div class="w3-dropdown-hover w3-mobile">
−
         <button class="dropbtn">TEAM</button>
+
         <button class="w3-button">TEAM<i class="fa fa-caret-down"></i></button>
−
         <div class="dropdown-content">
+
         <div class="w3-dropdown-content w3-bar-block">
−
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Team">Members</a>
+
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Team" class="w3-bar-item w3-button w3-mobile">Members</a>
−
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Supervisors">Supervisors</a>
+
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Supervisors" class="w3-bar-item w3-button w3-mobile">Supervisors</a>
−
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Sponsors">Sponsors</a>
+
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Sponsors" class="w3-bar-item w3-button w3-mobile">Sponsors</a>
−
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Attributions">Attributions</a>
+
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Attributions" class="w3-bar-item w3-button w3-mobile">Attributions</a>
−
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Collaborations">Collaborations</a>
+
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Collaborations" class="w3-bar-item w3-button w3-mobile">Collaborations</a>
−
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Gallery">Gallery</a>
+
           <a href="https://2018.igem.org/Team:NUS_Singapore-A/Gallery" class="w3-bar-item w3-button w3-mobile">Gallery</a>
 
         </div>
 
         </div>
 
       </div>
 
       </div>
  
−
       <div class="dropdown">
+
       <a href="https://2018.igem.org/Team:NUS_Singapore-A/Medals" class="w3-bar-item w3-button">MEDALS</a>
−
        <button class="dropbtn">
+
−
          <a href="https://2018.igem.org/Team:NUS_Singapore-A/Medals" style="text-decoration: none; color: black;">MEDAL</a>
+
−
        </button>
+
−
      </div>
+
 
        
 
        
−
     <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
+
    </div>
−
  </div>  
+
    <!-- Hide right-floated links on small screens and replace them with a menu icon -->
 +
 
 +
     <a href="javascript:void(0)" class="w3-bar-item w3-button w3-right w3-hide-large w3-hide-medium w3-hover-white" onclick="w3_open()"><i class="fa fa-bars"></i></a>
 +
 
 
</div>
 
</div>
  
 +
 +
<!-- NavBar on small screens when clicking the menu icon -->
 +
<nav class="w3-sidebar w3-bar-block w3-black w3-card w3-animate-left w3-hide-medium w3-hide-large" style="display:none" id="mySidebar">
 +
  <a href="javascript:void(0)" onclick="w3_close()" class="w3-bar-item w3-button w3-large w3-padding-16">Close</a>
 +
 +
  <a href="https://2018.igem.org/Team:NUS_Singapore-A" onclick="w3_close()" class="w3-bar-item w3-button" onclick="w3_close()">HOME</a>
 +
     
 +
  <div class="w3-dropdown-hover w3-mobile">
 +
    <button class="w3-button">PROJECT<i class="fa fa-caret-down"></i></button>
 +
    <div class="w3-dropdown-content w3-bar-block">
 +
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/Description" class="w3-bar-item w3-button w3-mobile" onclick="w3_close()">Description</a>
 +
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/Design" class="w3-bar-item w3-button w3-mobile" onclick="w3_close()">Design</a>
 +
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/Results" class="w3-bar-item w3-button w3-mobile" onclick="w3_close()">Results</a>
 +
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/Demonstrate" class="w3-bar-item w3-button w3-mobile" onclick="w3_close()">Demonstrate</a>
 +
      </div>
 +
  </div>
 +
 +
  <div class="w3-dropdown-hover w3-mobile">
 +
    <button class="w3-button">LAB<i class="fa fa-caret-down"></i></button>
 +
    <div class="w3-dropdown-content w3-bar-block">
 +
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/Notebook" class="w3-bar-item w3-button w3-mobile" onclick="w3_close()">Notebook</a>
 +
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/Safety" class="w3-bar-item w3-button w3-mobile" onclick="w3_close()">Safety</a>
 +
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/InterLab" class="w3-bar-item w3-button w3-mobile" onclick="w3_close()">Inter Lab</a>
 +
        <a href="hhttps://2018.igem.org/Team:NUS_Singapore-A/Measurement" class="w3-bar-item w3-button w3-mobile" onclick="w3_close()">Measurement</a>
 +
    </div>
 +
  </div>
 +
 +
  <div class="w3-dropdown-hover w3-mobile">
 +
    <button class="w3-button">PARTS<i class="fa fa-caret-down"></i></button>
 +
    <div class="w3-dropdown-content w3-bar-block">
 +
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/Part_Collection" class="w3-bar-item w3-button w3-mobile" onclick="w3_close()">Overview</a>
 +
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/Composite_Part" class="w3-bar-item w3-button w3-mobile" onclick="w3_close()">Composite Parts</a>
 +
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/Improve" class="w3-bar-item w3-button w3-mobile" onclick="w3_close()">Improved Parts</a>
 +
    </div>
 +
  </div>
 +
 +
  <a href="https://2018.igem.org/Team:NUS_Singapore-A/Model" class="w3-bar-item w3-button">MODELLING</a>
 +
 +
  <div class="w3-dropdown-hover w3-mobile">
 +
    <button class="w3-button">HARDWARE<i class="fa fa-caret-down"></i></button>
 +
    <div class="w3-dropdown-content w3-bar-block">
 +
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/Hardware" class="w3-bar-item w3-button w3-mobile" onclick="w3_close()">Overview</a>
 +
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/Hardware/PDF-LA!" class="w3-bar-item w3-button w3-mobile" onclick="w3_close()">PDF-LA!</a>
 +
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/Hardware/Sensor" class="w3-bar-item w3-button w3-mobile" onclick="w3_close()">2-in-1 Sensor</a>
 +
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/Hardware/Pump" class="w3-bar-item w3-button w3-mobile" onclick="w3_close()">Peristaltic Pump</a>
 +
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/Hardware/CoJar" class="w3-bar-item w3-button w3-mobile" onclick="w3_close()">Fermentation Chamber</a>
 +
    </div>
 +
  </div>
 +
 +
  <div class="w3-dropdown-hover w3-mobile">
 +
    <button class="w3-button">HUMAN PRACTICES<i class="fa fa-caret-down"></i></button>
 +
    <div class="w3-dropdown-content w3-bar-block">
 +
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/Team" class="w3-bar-item w3-button w3-mobile" onclick="w3_close()">Members</a>
 +
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/Supervisors" class="w3-bar-item w3-button w3-mobile" onclick="w3_close()">Supervisors</a>
 +
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/Sponsors" class="w3-bar-item w3-button w3-mobile" onclick="w3_close()">Sponsors</a>
 +
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/Attributions" class="w3-bar-item w3-button w3-mobile" onclick="w3_close()">Attributions</a>
 +
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/Collaborations" class="w3-bar-item w3-button w3-mobile" onclick="w3_close()">Collaborations</a>
 +
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/Gallery" class="w3-bar-item w3-button w3-mobile" onclick="w3_close()">Gallery</a>
 +
    </div>
 +
  </div>
 +
 +
  <a href="https://2018.igem.org/Team:NUS_Singapore-A/Medals" class="w3-bar-item w3-button" onclick="w3_close()">AWARDS</a>
 +
 
 +
</nav>
 +
 +
 +
  </div>
 +
</div>
  
 
<!----------------------------------------SCRIPT FOR STICKY NAV BAR------------------------------------------------->
 
<!----------------------------------------SCRIPT FOR STICKY NAV BAR------------------------------------------------->
Line 497: Line 604:
 
var yourNavigation = $(".nav");
 
var yourNavigation = $(".nav");
 
     stickyDiv = "sticky";
 
     stickyDiv = "sticky";
−
     yourHeader = $('.logo').height()+225;
+
     yourHeader = $('.logo').height()+120;
  
 
$(window).scroll(function() {
 
$(window).scroll(function() {
Line 517: Line 624:
 
     }
 
     }
 
}
 
}
 +
 +
  
 
</script>
 
</script>
Line 549: Line 658:
 
}
 
}
 
</script>
 
</script>
 +
 +
  
 
</body>
 
</body>
  
 +
<script>
 +
// Modal Image Gallery
 +
function onClick(element) {
 +
  document.getElementById("img01").src = element.src;
 +
  document.getElementById("modal01").style.display = "block";
 +
  var captionText = document.getElementById("caption");
 +
  captionText.innerHTML = element.alt;
 +
}
 +
 +
 +
// Toggle between showing and hiding the sidebar when clicking the menu icon
 +
var mySidebar = document.getElementById("mySidebar");
 +
 +
function w3_open() {
 +
    if (mySidebar.style.display === 'block') {
 +
        mySidebar.style.display = 'none';
 +
    } else {
 +
        mySidebar.style.display = 'block';
 +
    }
 +
}
 +
 +
// Close the sidebar with the close button
 +
function w3_close() {
 +
    mySidebar.style.display = "none";
 +
}
 +
</script>
  
 
</html>
 
</html>

Revision as of 01:37, 18 October 2018

CONNECT WITH US
Description Design Results Demonstrate
Notebook Safety InterLab Study Measurement
Parts Overview Composite Parts Improved Parts
MODEL
Overview PDF-LA! 2-in-1 Sensor Peristaltic Pump Fermentation Chamber Futuristic Bioreactor
Integrated Human Practices Education & Public Engagement Collaborative Report
Members Supervisors Sponsors Attributions Collaborations Gallery
MEDALS