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

Line 1: Line 1:
 +
<html>
 +
<head>
 +
<meta name="viewport" content="width=device-width, initial-scale=1">
 +
<meta charset="utf-8">
 +
<meta http-equiv="X-UA-Compatible" content="IE=edge">
 +
</head>
 
<script>
 
<script>
−
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
  
−
$(document).ready(function() {
+
  // This is the jquery part of your template. 
 +
  // Try not modify any of this code too much since it makes your menu work.
  
−
$("#HQ_page").attr('id','');
+
  $(document).ready(function() {
−
+
  
−
//highlight current page on the menu
+
    $("#HQ_page").attr('id','');
−
highlight_current_page_menu();
+
−
+
−
//accessing submenus
+
−
$(".menu_item").click(function(){
+
−
$(".submenu_control_icon", this).toggleClass("open");
+
−
$(this).next(".submenu").fadeToggle(400);
+
−
});
+
−
+
−
//mobile menu access
+
−
$(".igem_2018_team_mobile_bar").click(function(){
+
−
$(this).next().toggleClass("displaying_menu");
+
−
});
+
−
+
−
});
+
  
 +
    // call the functions that control the menu
 +
    menu_functionality();
 +
    hide_show_menu();
  
−
function highlight_current_page_menu() {
 
−
 
−
var page_url="https://2018.igem.org/";
 
−
page_url = page_url + wgPageName;
 
−
$("a[href$='"+ page_url +"']").children().addClass("current_page");
 
−
 
−
//if the page is in a submenu, open the submenu and make the appropiate changes
 
−
if( $( ".current_page" ).hasClass( "submenu_item" )){
 
−
 
−
$(".current_page").parent().parent().fadeToggle(400);
 
−
$(".current_page").parent().parent().prev().addClass("current_page");
 
−
$(".menu_item.current_page > .submenu_control_icon").toggleClass("open");
 
−
 
−
}
 
−
}
 
  
  
−
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
    //this function controls the expand and collapse buttons of the menu and changes the +/- symbols
 +
    function menu_functionality() {
 +
 
 +
      //when clicking on a "menu_button", it will change the "+/-" accordingly and it will show/hide the corresponding submenu
 +
      $(".menu_button").click(function(){
 +
 
 +
        // add or remove the class "open" , this class holds the "-"
 +
        $(this).children().toggleClass("open");
 +
        // show or hide the submenu   
 +
        $(this).next('.submenu_wrapper').fadeToggle(400);
 +
      });
 +
 
 +
      // when the screen size is smaller than 800px, the display_menu_control button appears and will show/hide the whole menu
 +
      $("#display_menu_control").click(function(){
 +
        $('#menu_content').fadeToggle(400);
 +
      });
 +
 
 +
      // call the current page highlight function
 +
      highlight_current_page();
 +
    }
 +
 
 +
 
 +
    // call the highlight current page function to show it on the menu with a different background color
 +
    function highlight_current_page() {
 +
 
 +
      // select a page from the menu based on the id assigned to it and the current page name and add the class "current page" to make it change background color
 +
      $("#"+  wgPageName.substring(wgPageName.lastIndexOf("/")+1, wgPageName.length ) + "_page").addClass("current_page");
 +
 
 +
      // now that the current_page class has been added to a menu item, make the submenu fade in
 +
      $(".current_page").parents(".submenu_wrapper").fadeIn(400);
 +
      // change the +/- symbol of the corresponding menu button
 +
      $(".current_page").parents(".submenu_wrapper").prev().children().toggleClass("open");
 +
     
 +
    }
 +
 
 +
 
 +
 
 +
    // allow button on the black menu bar to show/hide the side menu
 +
    function hide_show_menu() {
 +
 
 +
      // in case you preview mode is selected, the menu is hidden for better visibility
 +
      if (window.location.href.indexOf("submit") >= 0) {
 +
        $(".igem_2017_menu_wrapper").hide();
 +
      }
 +
 
 +
      // if the black menu bar has been loaded
 +
        if (document.getElementById('bars_item')) {
 +
 
 +
        // when the "bars_item" has been clicked
 +
        $("#bars_item").click(function() {
 +
          $("#sideMenu").hide();
 +
 
 +
          // show/hide the menu wrapper
 +
          $(".igem_2017_menu_wrapper").fadeToggle("100");
 +
        }); 
 +
        }
 +
 
 +
      // 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 {
 +
            setTimeout(hide_show_menu, 15);
 +
      }
 +
    }
 +
 
 +
 
 +
  });
 +
 
 +
 
 
</script>
 
</script>
 +
 +
 +
<style>
 +
 +
 +
 +
/***************************************************** DEFAULT WIKI SETTINGS  ****************************************************/
 +
  /* 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 ***************************************************************/
 +
 +
 +
/********** Class for spliting different section = Clear content below while adds extra spacing when clearing content **********/
 +
.clear {
 +
    clear:both;
 +
    height: 50px;
 +
}
 +
 +
.clear-largespace{
 +
    clear:both;
 +
    height: 100px;
 +
}
 +
 +
/**********  Basic Content Class CSS Style  **********/
 +
p {
 +
  font-family:"Montserrat", serif;
 +
  font-size: 18px;
 +
  line-height:150%;
 +
  text-align:justify;
 +
  color:#000000;
 +
}
 +
 +
h1 {
 +
  color: #b48608;
 +
  font-family: 'Bookman', serif;
 +
  font-size: 40px;
 +
  font-weight: 400;
 +
  line-height: 44px;
 +
  margin: 0 0 12px; 
 +
  text-align: center;
 +
  font-weight: 1500;
 +
  border-style: none;
 +
}
 +
 +
h2 {
 +
  color: #2E86C1;
 +
  font-family:"Calibri", serif;
 +
  font-size: 30px;
 +
  font-weight: 200;
 +
  line-height: 44px;
 +
  margin: 0 0 12px; 
 +
  text-align: center;
 +
  font-weight: bold;
 +
  width:80%;
 +
  padding-left:10%;
 +
  padding-right:10%;
 +
}
 +
 +
#teamh2 {
 +
  width:100%;
 +
  padding-left:0;
 +
  padding-right:0;
 +
}
 +
 +
h3 {
 +
  color:#FAA403;
 +
  font-family:"Calibri", serif;
 +
  font-size: 25px;
 +
  font-weight: 200;
 +
  line-height: 44px;
 +
  margin: 0 0 12px;
 +
  text-align: left;
 +
  font-weight:bold;
 +
  width:80%;
 +
  padding-left:10%;
 +
  padding-right:10%;
 +
  }
 +
 +
h4 {
 +
  color:#b48608;
 +
  font-family:"Calibri", serif;
 +
  font-size: 20px;
 +
  font-weight: 180;
 +
  line-height: 44px;
 +
  margin: 0 0 12px;
 +
  text-align: center;
 +
  font-weight:bold;
 +
  width:80%;
 +
  padding-left:10%;
 +
  padding-right:10%;
 +
  }
 +
 +
.nus ul {
 +
  font-family:"Montserrat", serif;
 +
  font-size: 18px;
 +
  line-height:150%;
 +
  color:#000000;
 +
 
 +
}
 +
 +
.nus ol {
 +
  font-family:"Montserrat", serif;
 +
    font-size: 18px;
 +
    line-height:150%;
 +
        color:#000000;
 +
}
 +
.nus {
 +
  font-family:"Montserrat", serif;
 +
    font-size: 18px;
 +
    line-height:150%;
 +
        color:#000000;
 +
}
 +
 +
ul.nus {
 +
  font-family:"Montserrat", serif;
 +
  font-size: 18px;
 +
  line-height:150%;
 +
  color:#000000;
 +
 
 +
}
 +
 +
ol.nus  {
 +
  font-family:"Montserrat", serif;
 +
    font-size: 18px;
 +
    line-height:150%;
 +
        color:#000000;
 +
}
 +
 +
 +
/******************  image description subline  ****************/
 +
#imgdescription {
 +
        font-size:15px;
 +
        width:60%;
 +
        padding-left:20%;
 +
        padding-right:20%;
 +
        font-style:oblique;
 +
        text-align:center;
 +
}
 +
 +
/******************  Reference  ****************/
 +
#Ref {
 +
        font-size:15px;
 +
}
 +
 +
/************************************************** Back to top button style **************************************************/
 +
#BacktoTopBtn {
 +
  display: none;
 +
  position: fixed;
 +
  bottom: 20px;
 +
  right: 30px;
 +
  z-index: 99;
 +
  border: none;
 +
  outline: none;
 +
  background-color: #F5B041;
 +
  color: white;
 +
  cursor: pointer;
 +
  padding: 15px;
 +
  border-radius: 20px;
 +
}
 +
 +
#BacktoTopBtn:hover {
 +
  background-color: #2980B9;
 +
}
 +
 +
/************************************************** Top menu and Dropdown list **************************************************/
 +
 +
.team-logo {
 +
    width:%;
 +
    height:140px;
 +
    margin-left:20px;
 +
    padding-top:5px;
 +
    position:absolute;
 +
}
 +
 +
.topmenu-container {
 +
    overflow: hidden;
 +
    background-color: #F8F9F9;
 +
    padding-top:100px;
 +
    margin:0;
 +
    }
 +
 +
.topmenu-container a {
 +
    float: right;
 +
    font-family:"Comic Sans MS", sans-serif;
 +
    font-size: 18px;
 +
    color: #566573;
 +
    text-align: center;
 +
    padding: 19px 16px;
 +
    text-decoration: none;
 +
    border: none;
 +
   
 +
}
 +
 +
.dropdown {
 +
    float: right;
 +
    overflow: hidden;
 +
}
 +
 +
.dropdown  .dropbtn {
 +
    font-family:"Comic Sans MS", sans-serif;
 +
    font-size: 18px;
 +
    border: none;
 +
    text-align: center;
 +
    outline: none;
 +
    color:  #566573;
 +
    padding: 14px 16px;
 +
    background-color: inherit;
 +
}
 +
 +
.dropdown-content {
 +
    display: none;
 +
    position: absolute;
 +
    background-color:#FFFFFF;
 +
    min-width: 160px;
 +
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 +
    z-index: 1;
 +
}
 +
 +
.dropdown-content a {
 +
    float: none;
 +
    color: #566573;
 +
    padding: 12px 16px;
 +
    text-decoration: none;
 +
    display: block;
 +
    text-align: center;
 +
}
 +
 +
 +
/***************************************************    Hover effect of Top menu  ***************************************/
 +
.topmenucontainer a:hover, .dropdown:hover .dropbtn {
 +
    background-color: #AED6F1;
 +
}
 +
 +
.dropdown-content a:hover {
 +
    background-color: #ddd;
 +
}
 +
 +
.dropdown:hover .dropdown-content {
 +
    display: inline-block;
 +
}
 +
 +
 +
/***************************  Social contact link *************************/
 +
.fa {
 +
  padding: 20px;
 +
  font-size: 30px;
 +
  width: 30px;
 +
  text-align: center;
 +
  text-decoration: none;
 +
  border-radius: 50%;
 +
}
 +
 +
.fa:hover {
 +
    opacity: 0.7;
 +
}
 +
 +
.fa-facebook {
 +
  background: #3B5998;
 +
  color: #FFFFFF;
 +
}
 +
 +
.fa-instagram {
 +
  background: #125688;
 +
  color: #FFFFFF;
 +
}
 +
 +
.fa-google {
 +
  background: #dd4b39;
 +
  color: #FFFFFF;
 +
}
 +
 +
/************************  Quick Link Footer  **************************/
 +
.quicklink p {
 +
  background-color:#F0F3F4;
 +
  width:100%;
 +
  text-align: center;
 +
  height:60px;
 +
  padding:10px;
 +
  margin:0px;
 +
  font-weight: bold;
 +
  font-size: 20px;
 +
}
 +
 +
.quicklink-container {
 +
      background-color:#F0F3F4;
 +
      width:100%;
 +
      height:200px;
 +
      position:absolute;
 +
}
 +
.quicklink-1 {
 +
  background-color:#F0F3F4;
 +
  width:25%;
 +
  height:300px;
 +
  padding-left:7%;
 +
  padding-right:7%;
 +
  position:relative;
 +
  float:left;
 +
  text-align: center;
 +
  text-decoration: none;
 +
 +
}
 +
.quicklink-2 {
 +
  background-color:#F0F3F4;
 +
  width:25%;
 +
  height:300px;
 +
  padding-left:7%;
 +
  padding-right:7%;
 +
  position:relative;
 +
  float:left;
 +
  text-align: center;
 +
  text-decoration: none;
 +
}
 +
.quicklink-3 {
 +
  background-color:#F0F3F4;
 +
  width:25%;
 +
  height:300px;
 +
  padding-left:7%;
 +
  padding-right:7%;
 +
  position:relative;
 +
  float:left;
 +
  text-align: center;
 +
  text-decoration: none;
 +
}
 +
.quicklink-4 {
 +
  background-color:#F0F3F4;
 +
  width:25%;
 +
  height:300px;
 +
  padding-left:7%;
 +
  padding-right:7%;
 +
  position:relative;
 +
  float:left;
 +
  text-align: center;
 +
  text-decoration: none;
 +
}
 +
 +
.quicklink-4 a {
 +
        color:#808B96;
 +
          font-size:15px;
 +
}
 +
.quicklink-3 a {
 +
        color:#808B96;
 +
font-size:15px;
 +
}
 +
.quicklink-2 a {
 +
        color:#808B96;
 +
font-size:15px;
 +
}
 +
.quicklink-1 a {
 +
        color:#808B96;
 +
font-size:15px;
 +
}
 +
 +
/**************************************** Sponsor and Social Connact Link Cover  ****************************************/
 +
.footer-container{
 +
  width:100%;
 +
  height:300px;
 +
  background-color:#F0F3F4 ;
 +
  position:absolute;
 +
}
 +
 +
.footer-sponsor-container{
 +
  width:70%; /*split the sponsor container from the full footer-container */
 +
  background-color:inherit;
 +
padding:20px;
 +
  padding-top:30px;
 +
  float:left;
 +
}
 +
 +
.footer-contact-container{
 +
  width:30%; /*split the sponsor container from the full footer-container */
 +
  padding-top:20px;
 +
  background-color:inherit;
 +
  float:right;
 +
}
 +
 +
img.social-icon {
 +
    margin:2%;
 +
    position:relative;
 +
    float:left;
 +
 +
}
 +
 +
 +
/*Responsive Deisgn*/
 +
 +
 +
/*********************  Responsive Design  *********************/
 +
 +
/*
 +
  ##Device = Tablets, Ipads (landscape)
 +
  ##Screen = B/w 768px to 1024px
 +
*/
 +
 +
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
 +
 
 +
}
 +
 +
/*
 +
  ##Device = Most of the Smartphones Mobiles (Portrait)
 +
  ##Screen = B/w 320px to 479px
 +
  ##Device = Tablets, Ipads (portrait)
 +
  ##Screen = B/w 768px to 1024px
 +
*/
 +
 +
@media (min-width: 0px) and (max-width: 1024px) {
 +
 +
/*Basics*/
 +
  p {
 +
      font-size: 13px;
 +
      }
 +
 +
.nus ul{
 +
  font-size: 10px;
 +
}
 +
 +
.nus ol {
 +
  font-size: 10px;
 +
}
 +
 +
ol.nus {
 +
  font-size: 10px;
 +
}
 +
 +
ul.nus {
 +
  font-size: 10px;
 +
}
 +
 +
.nus {
 +
  font-size: 10px;
 +
}
 +
 +
h1 {
 +
  font-size: 28px;
 +
}
 +
 +
h2 {
 +
  font-size: 20px;
 +
}
 +
 +
h3 {
 +
  font-size: 15px;
 +
}
 +
 +
#imgdescription {
 +
        font-size:8px;
 +
}
 +
 +
/*drop down menu*/
 +
.team-logo {
 +
      margin:0px;
 +
      width:100%;
 +
      height:200px;
 +
      position:relative;
 +
  }
 +
 +
  .topmenu-container {
 +
      padding:10px;
 +
      }
 +
 +
  .topmenu-container a{
 +
      font-size: 18px;
 +
      padding: 8px 5px;
 +
      font-weight:1000;
 +
  }
 +
 +
  .dropdown .dropbtn {
 +
      font-size: 18px;
 +
      padding: 7px 4px;
 +
      font-weight:1000;
 +
    display: inline-block; 
 +
  }
 +
 +
  .dropdown-content {
 +
    min-width: 10px;
 +
    box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.2);
 +
    }
 +
 +
  .dropdown-content a{
 +
    padding: 8px;
 +
  }
 +
 +
.social-icon img {
 +
    width:25%;
 +
    display:block;
 +
    padding:5px;
 +
    position:relative;
 +
    float:left;
 +
  }
 +
 +
  #Ref {
 +
font-size:8px;
 +
  }
 +
 +
/******************  image description subline  ****************/
 +
#imgdescription {
 +
        font-size:8px;
 +
        width:80%;
 +
        padding-left:10%;
 +
        padding-right:10%;
 +
        font-style:oblique;
 +
        text-align:center;
 +
}
 +
 +
/************************************************** Back to top button style **************************************************/
 +
#BacktoTopBtn {
 +
  display: none;
 +
  position: fixed;
 +
  bottom: 3px;
 +
  right: 5px;
 +
  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>
 +
 +
 +
 +
<!--******************************************  Here is where the main content starts ******************************************-->
 +
<body>
 +
 +
<!--  IGEM NUS LOGO  -->
 +
<div><a href="https://2018.igem.org/Team:NUS_Singapore-A" ><img class="team-logo" src="https://static.igem.org/mediawiki/2018/2/21/T--NUS_Singapore-A--TeamLogo.jpg" height="140" width="140"></a></div>
 +
 +
<!-- Top Menu -->
 +
<div class="topmenu-container">
 +
 +
<div class="dropdown">
 +
    <button class="dropbtn">NOTEBOOK </button>
 +
    <div class="dropdown-content">
 +
      <a href="https://2018.igem.org/Team:NUS_Singapore-A/LabBook">LAB BOOK</a>
 +
      <a href="https://2018.igem.org/Team:NUS_Singapore-A/Medal">MEDAL CRITERIA</a>
 +
    </div>
 +
  </div>
 +
 +
  <div class="dropdown">
 +
      <button class="dropbtn">TEAM </button>
 +
      <div class="dropdown-content">
 +
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/Team">MEMBERS</a>
 +
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/Attributions">ATTRIBUTIONS</a>
 +
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/Sponsors">SPONSORS</a>
 +
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/Collaborations">COLLABORATION</a>
 +
      </div>
 +
  </div>
 +
 +
 +
  <div class="dropdown">
 +
      <button class="dropbtn">HUMAN PRACTICE </button>
 +
      <div class="dropdown-content">
 +
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/HP/Overview">OVERVIEW</a>
 +
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/HP/IntegratedHP">INTEGRATED HUMAN PRACTICE</a>
 +
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/HP/Interviews">INTERVIEWS</a>
 +
        <a href="https://2018.igem.org/Team:NUS_Singapore-A/HP/PublicEngagement">PUBLIC ENGAGEMENT</a>
 +
    </div>
 +
  </div>
 +
 +
 +
<div class="dropdown">
 +
    <button class="dropbtn">HARDWARE </button>
 +
    <div class="dropdown-content">
 +
      <a href="https://2018.igem.org/Team:NUS_Singapore-A/Hardware">OVERVIEW</a>
 +
    </div>
 +
  </div>
 +
 +
  <div class="dropdown">
 +
    <button class="dropbtn">MODELLING</button>
 +
    <div class="dropdown-content">
 +
      <a href="https://2018.igem.org/Team:NUS_Singapore-A/Modelling">OVERVIEW</a>
 +
      <a href="https://2018.igem.org/Team:NUS_Singapore-A/Modelling/Methodology">METHODOLOGY</a>
 +
      <a href="https://2018.igem.org/Team:NUS_Singapore-A/Modelling/Model1">Model 1</a>
 +
      <a href="https://2018.igem.org/Team:NUS_Singapore-A/Modelling/Model2">Model 2</a>
 +
    </div>
 +
  </div>
 +
 +
  <div class="dropdown">
 +
    <button class="dropbtn">PROJECT </button>
 +
    <div class="dropdown-content">
 +
      <a href="https://2018.igem.org/Team:NUS_Singapore-A/Description">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/Experiments">EXPERIMENT</a>
 +
      <a href="https://2018.igem.org/Team:NUS_Singapore-A/Parts">PARTS</a>
 +
      <a href="https://2018.igem.org/Team:NUS_Singapore-A/Demonstration">RESULT</a>
 +
      <a href="https://2018.igem.org/Team:NUS_Singapore-A/InterLab">INTERLAB STUDY</a>
 +
   
 +
    </div>
 +
  </div>
 +
 +
  <div class="dropdown">
 +
      <a href="https://2018.igem.org/Team:NUS_Singapore-A">HOME </a>
 +
  </div>
 +
</div>
 +
 +
<!--***********************************************  Back to top button ***********************************************-->
 +
<button onclick="topFunction()" id="BacktoTopBtn" title="Go to top">Back to Top</button>
 +
 +
 +
<script>
 +
//**************************************** Back to top button Javascript ****************************************//
 +
// When the user scrolls down 50px from the top of the document, show the button
 +
window.onscroll = function() {scrollFunction()};
 +
 +
function scrollFunction() {
 +
    if (document.body.scrollTop > 500 || document.documentElement.scrollTop > 500) {
 +
        document.getElementById("BacktoTopBtn").style.display = "block";
 +
    } else {
 +
        document.getElementById("BacktoTopBtn").style.display = "none";
 +
    }
 +
}
 +
 +
// When the user clicks on the button, scroll to the top of the document
 +
function topFunction() {
 +
    document.body.scrollTop = 0;
 +
    document.documentElement.scrollTop = 0;
 +
}
 +
</script>
 +
 +
</body>
 +
</html>

Revision as of 19:00, 17 June 2018

LAB BOOK MEDAL CRITERIA
MEMBERS ATTRIBUTIONS SPONSORS COLLABORATION
OVERVIEW INTEGRATED HUMAN PRACTICE INTERVIEWS PUBLIC ENGAGEMENT
OVERVIEW
OVERVIEW METHODOLOGY Model 1 Model 2
DESCRIPTION DESIGN EXPERIMENT PARTS RESULT INTERLAB STUDY
HOME