Difference between revisions of "Template:Hong Kong HKUST/head"

(Created page with "<html> <head> <title>HKUST iGEM Team 2018</title> <link rel="shortcut icon" href="https://static.igem.org/mediawiki/2018/f/ff/Hong_Kong_HKUST_favicon.png"> <meta charse...")
 
 
(200 intermediate revisions by 6 users not shown)
Line 1: Line 1:
 +
 +
{{:Team:Hong_Kong_HKUST/Style}}
 
<html>
 
<html>
−
 
+
 
 
<head>
 
<head>
−
    <title>HKUST iGEM Team 2018</title>
 
−
  <link rel="shortcut icon" href="https://static.igem.org/mediawiki/2018/f/ff/Hong_Kong_HKUST_favicon.png">
 
−
    <meta charset="utf-8" />
 
−
    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
−
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
 
−
    <style>
 
−
 
 
  
−
/* Ripple */
+
  <link rel="stylesheet" type="text/css"
 +
href="https://2018.igem.org/wiki/index.php?title=Team:Hong_Kong_HKUST/materialize.min.css&action=raw&ctype=text/css"/>
 +
  <link rel="stylesheet" type="text/css"
 +
href="https://2018.igem.org/wiki/index.php?title=Team:Hong_Kong_HKUST/fontawesome5.css&action=raw&ctype=text/css"/>
 +
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
 +
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 +
</head>
  
−
.ripple {
+
<style>
−
   width: 0;
+
   html {
−
  height: 0;
+
    padding: 0 !important;
−
   border-radius: 50%;
+
   }
−
  background: rgba(255, 255, 255, 0.95);
+
−
  transform: scale(0);
+
−
  position: absolute;
+
−
  opacity: 1;
+
−
}
+
−
.rippleEffect {
+
−
    animation: rippleDrop .2s linear;
+
−
}
+
  
−
@keyframes rippleDrop {
+
   #top-menu-under.noprint {
−
   100% {
+
     display: none !important;
−
     transform: scale(0.1);
+
−
    opacity: 0;
+
 
   }
 
   }
−
}
+
</style>
  
−
    #top_menu_14 {
+
  <a href ="https://igem.org/Main_Page">
−
        height: 30px;
+
<img class="homebtn" src="https://static.igem.org/mediawiki/2018/2/2d/T--Hong_Kong_HKUST--iGEM_logo_v3.png" width="60px" height="360px">
−
    }
+
  </a>
 +
<body  style="background-color:black">
 +
  <div class="toggle">
 +
    <i class="fas fa-bars menu_bar fa-2x" style="color: #fff"></i>
 +
  </div>
 +
  <div class="nav-wrapper">
 +
    <ul class="ntnu_navbar">
  
−
#header nav ul li a, #header nav ul li span {
 
−
    border: 0;
 
−
    color: inherit;
 
−
    display: inline-block;
 
−
    height: inherit;
 
−
    line-height: inherit;
 
−
    outline: 0;
 
−
    font-size:14px;
 
−
}
 
  
−
  #HQ_page p {
+
        <li class="ntnu_menu_option ntnu_dropdown no-icon">
−
font-family: 'Oswald', sans-serif;
+
          <!--<a class="ntnu_dropbtn" href="https://2018.igem.org/Team:Hong_Kong_HKUST " id="menu-home">-->
−
    font-size: calc(12px + 0.5vw);
+
         
−
     text-align: justify;
+
<a href="https://2018.igem.org/Team:Hong_Kong_HKUST">
−
  }
+
      
−
    #globalWrapper {
+
<a href="https://2018.igem.org/Team:Hong_Kong_HKUST"><img style="height: 60px; background:none; border-color: transparent;" src=" https://static.igem.org/mediawiki/2018/f/fd/T--Hong_Kong_HKUST--pekachulogo.PNG" class="btn btn-primary btn-lg"> </a>
−
      background-image: url(https://static.igem.org/mediawiki/2017/4/48/HKUST_bg.png);
+
          <!-- <i class="fas fa-home"></i>
−
      background-size: 100%;
+
          </a> -->
−
      border: none;
+
        </li>
−
      margin: 0;
+
<li class="ntnu_menu_option ntnu_dropdown no-icon">
−
      padding: 0;
+
        <a href="javascript:void(0)" class="ntnu_dropbtn" id="menu-project">Project</a>
−
      width: 100%;
+
<div class="ntnu_dropdown_content">
−
      height: 100%;
+
  <a href="https://2018.igem.org/Team:Hong_Kong_HKUST/Description">Overview</a>
−
     }
+
  <a href="https://2018.igem.org/Team:Hong_Kong_HKUST/Description_Laccase">PE Degradation</a>
 +
  <a href="https://2018.igem.org/Team:Hong_Kong_HKUST/Description_Alkl">Alkane Metabolism</a>
 +
  <a href="https://2018.igem.org/Team:Hong_Kong_HKUST/Results">Alkane Results</a>
 +
  <a href="https://2018.igem.org/Team:Hong_Kong_HKUST/Design">MFC Design</a>
 +
  <a href="https://2018.igem.org/Team:Hong_Kong_HKUST/MFC_Result">MFC Result</a>
 +
  <a href="https://2018.igem.org/Team:Hong_Kong_HKUST/Experiments">Experimental protocol</a>
 +
  <a href="https://2018.igem.org/Team:Hong_Kong_HKUST/Notebook">Notebook</a>
 +
  <a href="https://2018.igem.org/Team:Hong_Kong_HKUST/Parts">Parts</a>
 +
</div>
 +
</li>
 +
<li class="ntnu_menu_option ntnu_dropdown no-icon">
 +
        <a href="javascript:void(0)" class="ntnu_dropbtn" onclick="void(0)" id="menu-team">Modelling</a>
 +
<div class="ntnu_dropdown_content">
 +
  <a href="https://2018.igem.org/Team:Hong_Kong_HKUST/Model">Laccase</a>
 +
  <a href="https://2018.igem.org/Team:Hong_Kong_HKUST/Model_Alkane_mfc">Alkane Metabolism</a>
 +
     <a href="https://2018.igem.org/Team:Hong_Kong_HKUST/Model_FBA">Alkane and MFC (FBA)</a>
 +
</div>
  
−
    #content {
+
      </li>
−
      background-color: transparent;
+
<li class="ntnu_menu_option ntnu_dropdown no-icon">
−
      border: none;
+
        <a href="#" class="ntnu_dropbtn" id="menu-hp">Human Practices</a>
−
      padding: 0;
+
        <div class="ntnu_dropdown_content">
−
      margin: 0;
+
         
−
      width: 100%;
+
          <a href="https://2018.igem.org/Team:Hong_Kong_HKUST/Public_Engagement">Education and Engagement</a>
−
      overflow: visible;
+
          <a href="https://2018.igem.org/Team:Hong_Kong_HKUST/Collaborations">Collaborations</a>
−
      height: 100%;
+
<a href="https://2018.igem.org/Team:Hong_Kong_HKUST/Human_Practices">Integrated Human Practices</a>
−
      color: #fff;
+
        </div>
−
       font-size: 20px;
+
       </li>
−
    }
+
  
−
    #bodyContent {
+
   
−
      border: none;
+
<li class="ntnu_menu_option ntnu_dropdown no-icon">
−
      padding: 0;
+
          <a class="ntnu_dropbtn" href="https://2018.igem.org/Team:Hong_Kong_HKUST/InterLab" id="menu-interlabs">InterLab</a>
−
      margin: 0;
+
        </li>
−
      width: 100%;
+
<li class="ntnu_menu_option ntnu_dropdown no-icon">
−
      height: 100%;
+
        <a href="https://2018.igem.org/Team:Hong_Kong_HKUST/Medal_Requirements" class="ntnu_dropbtn" onclick="void(0)" id="menu-team">Medal Requirements</a>
−
      font-size: calc(12px + 0.5vw);
+
      </li>       
−
    }
+
  
−
    #top-section {
+
   
−
      height: 15px;
+
<li class="ntnu_menu_option ntnu_dropdown no-icon">
−
      margin: 0px;
+
        <a href="https://2018.igem.org/Team:Hong_Kong_HKUST/Safety" class="ntnu_dropbtn" onclick="void(0)" id="menu-team">Safety</a>
−
      margin-left: auto;
+
       </li>
−
      margin-right: auto;
+
     
−
      margin-bottom: 0 !important;
+
     
−
       padding: 0;
+
−
      border: none;
+
−
      font-size: calc(10px + 0.5vw);
+
−
    }
+
  
−
    #p-logo {
+
      <li class="ntnu_menu_option ntnu_dropdown no-icon">
−
      height: 1px;
+
        <a href="https://2018.igem.org/Team:Hong_Kong_HKUST/Team" class="ntnu_dropbtn" onclick="void(0)" id="menu-team">Team</a>
−
      overflow: hidden;
+
        <div class="ntnu_dropdown_content">
−
      display: none;
+
          <a href="https://2018.igem.org/Team:Hong_Kong_HKUST/Team">Team Members</a>
−
    }
+
          <a href="https://2018.igem.org/Team:Hong_Kong_HKUST/Attributions">Attributions</a>
 +
        </div>
 +
      </li>
  
−
    #top-section {
 
−
      border: none;
 
−
      height: 0px;
 
−
    }
 
−
    #sideMenu, #top_title
 
−
    {
 
−
      display:none;
 
−
    }
 
  
−
h1, h2, h3, h4, h5, h6, h7 {
+
     </ul>
−
font-family: 'Oswald', sans-serif;
+
−
     font-size: 1.2em;
+
−
}
+
  
−
.dropotron > li a, .dropotron > li span {
+
  </div>
−
    border: 0;
+
−
    color: rgba(255, 255, 255, 0.75);
+
−
    display: block;
+
−
    padding: 0.1em 1em;
+
−
    text-decoration: none;
+
−
    font-size:14px;
+
−
}
+
  
  
−
#navPanel .link {
+
<script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Team:Hong_Kong_HKUST/jquery3.2.1&action=raw&ctype=text/javascript"></script>
−
    border: 0;
+
<script type="text/javascript">
−
    border-top: solid 1px rgba(255, 255, 255, 0.95);
+
  $(document).ready(function () {
−
    color: rgba(255, 255, 255, 0.95);
+
      $('.menu_bar').click(function () {
−
    display: block;
+
          $('ul.ntnu_navbar').toggleClass('active');
−
    height: 3em;
+
          $('.toggle').toggleClass('active');
−
    line-height: 3em;
+
      })
−
    text-decoration: none;
+
  })
−
    font-size: 14px;
+
</script>
−
font-family: 'Oswald', sans-serif;
+
−
}
+
−
 
+
−
    #nav > ul > li > a {
+
−
font-family: 'Oswald', sans-serif;
+
−
    font-size: calc(8px + 0.5vw);
+
−
    font-weight: 100;
+
−
    text-decoration: none;
+
−
      font-size:14px;
+
−
    }
+
−
 
+
−
  #top_menu_inside a {
+
−
    margin-left: 20px;
+
−
    font-size:11px;
+
−
}
+
−
 
+
−
#top_menu_inside li {
+
−
    float: left;
+
−
    padding: 0px 25px 0px 20px;
+
−
    cursor: pointer;
+
−
    margin: 0;
+
−
    font-size: 19px;
+
−
}
+
−
 
+
−
    </style>
+
−
    <link rel="stylesheet" href="https://2017.igem.org/Template:Hong_Kong_HKUST/timeline.css/CSS?action=raw&ctype=text/css"/>
+
−
    <link rel="stylesheet" href="https://2017.igem.org/Template:Hong_Kong_HKUST/main.css/CSS?action=raw&ctype=text/css" />
+
−
</head>
+
−
 
+
−
<body class="landing">
+
−
<div id="page-wrapper">
+
−
 
+
−
<!-- Header -->
+
−
<header id="header" style="margin-top:30px; color: rgba(255, 255, 255, 0.9);">
+
−
<h1 id="logo" style="font-family: 'Oswald', sans-serif; font-weight: 100; font-size: 15pt;"><a href="https://2017.igem.org/Team:Hong_Kong_HKUST" style="color:white; text-decoration: none; font-size:16px; ">Team Hong Kong - HKUST</a></h1>
+
−
<nav id="nav">
+
−
<ul>
+
−
<li>
+
−
<a>Project</a>
+
−
<ul>
+
−
<li><a href="https://2017.igem.org/Team:Hong_Kong_HKUST/Overview">Project Overview</a></li>
+
−
<li><a href="https://2017.igem.org/Team:Hong_Kong_HKUST/Sensing">Sensing Module</a></li>
+
−
<li><a href="https://2017.igem.org/Team:Hong_Kong_HKUST/TimeControl">Time Control Module</a></li>
+
−
<li><a href="https://2017.igem.org/Team:Hong_Kong_HKUST/Recombination">Recombination Module</a></li>
+
−
<li><a href="https://2017.igem.org/Team:Hong_Kong_HKUST/FutureApplication">Possible Future Application</a></li>
+
−
</ul>
+
−
</li>
+
−
<li>
+
−
                                <a href="https://2017.igem.org/Team:Hong_Kong_HKUST/Model">Modelling</a>
+
−
<ul>
+
−
<li><a>Single-cell</a>
+
−
<ul>
+
−
<li><a href="https://2017.igem.org/Team:Hong_Kong_HKUST/Model/Sensing">Model-Sensing</a></li>
+
−
<li><a href="https://2017.igem.org/Team:Hong_Kong_HKUST/Model/TimeControl">Model-Time Control</a></li>
+
−
<li><a href="https://2017.igem.org/Team:Hong_Kong_HKUST/Model/Recombination">Model-Recombination</a></li>
+
−
</ul>
+
−
                                        </li>
+
−
<li><a  href="https://2017.igem.org/Team:Hong_Kong_HKUST/Model/Population">Population</a></li>
+
−
                  <li><a  href="https://2017.igem.org/Team:Hong_Kong_HKUST/Model/References">References</a></li>
+
−
</ul>
+
−
                            </li>
+
−
<li><a href="https://2017.igem.org/Team:Hong_Kong_HKUST/HP">Human Practices</a>
+
−
                                <ul>
+
−
                                      <li><a href="https://2017.igem.org/Team:Hong_Kong_HKUST/HP/Silver">Human Practices (Silver)</a></li>
+
−
                                    <li><a href="https://2017.igem.org/Team:Hong_Kong_HKUST/HP/Gold_Integrated">Integrated Human Practices</a></li>
+
−
                                    <li><a href="https://2017.igem.org/Team:Hong_Kong_HKUST/Engagement">Education & Public Engagement</a></li>
+
−
                                </ul>
+
−
                            </li>
+
−
<li><a href="https://2017.igem.org/Team:Hong_Kong_HKUST/Medal_Requirements">Medal Requirements</a></li>
+
−
<li><a href="https://2017.igem.org/Team:Hong_Kong_HKUST/Collaborations">Collaborations</a></li>
+
−
<li><a href="https://2017.igem.org/Team:Hong_Kong_HKUST/InterLab">Interlab</a></li>
+
−
<li><a>About Us</a>
+
−
                            <ul>
+
−
                                <li><a href="https://2017.igem.org/Team:Hong_Kong_HKUST/Attributions">Attributions</a></li>
+
−
                                <li><a href="https://2017.igem.org/Team:Hong_Kong_HKUST/Team">Our Team</a></li>
+
−
                                <li><a href="https://2017.igem.org/Team:Hong_Kong_HKUST/Logbook_and_Protocol">Logbook & Protocols</a></li>
+
−
                                <li><a href="https://2017.igem.org/Team:Hong_Kong_HKUST/Safety">Safety</a></li>
+
−
<li><a href="https://2017.igem.org/Team:Hong_Kong_HKUST/Giant_Jamboree_Photo_Gallery">Giant Jamboree Photo Gallery</a></li>
+
−
                                </ul>
+
−
                            </li>
+
−
</ul>
+
−
</nav>
+
−
</header>
+
  
 
<script>
 
<script>
−
(function() {
+
     $(document).ready(function () {
−
     var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
+
      $(':hover').click(function () {
−
    link.type = 'image/x-icon';
+
          $(":hover").unbind('mouseenter mouseleave');
−
    link.rel = 'shortcut icon';
+
      })
−
    link.href = 'https://static.igem.org/mediawiki/2018/f/ff/Hong_Kong_HKUST_favicon.png';
+
   })
−
    document.getElementsByTagName('head')[0].appendChild(link);
+
</script>
−
})();
+
−
 
+
−
$("div").click(function (e) {
+
−
 
+
−
  // Remove any old one
+
−
  $(".ripple").remove();
+
−
 
+
−
  // Setup
+
−
  var posX = $(this).offset().left,
+
−
      posY = $(this).offset().top,
+
−
      buttonWidth = $(this).width(),
+
−
      buttonHeight =  $(this).height();
+
−
 
+
−
  // Add the element
+
−
  $(this).prepend("<span class='ripple'></span>");
+
−
 
+
−
 
+
−
// Make it round!
+
−
  if(buttonWidth >= buttonHeight) {
+
−
    buttonHeight = buttonWidth;
+
−
  } else {
+
−
    buttonWidth = buttonHeight;
+
−
  }
+
−
 
+
−
  // Get the center of the element
+
−
  var x = e.pageX - posX - buttonWidth / 2;
+
−
  var y = e.pageY - posY - buttonHeight / 2;
+
−
 
+
−
+
−
  // Add the ripples CSS and start the animation
+
−
  $(".ripple").css({
+
−
    width: buttonWidth,
+
−
    height: buttonHeight,
+
−
    top: y + 'px',
+
−
    left: x + 'px'
+
−
   }).addClass("rippleEffect");
+
−
});
+
  
 +
<script type="text/javascript">
 +
$('#clickme').click(function() {
 +
  $('html, body').animate({ scrollTop: $('#welcome').offset().top }, 'slow');
 +
  });
 
</script>
 
</script>
−
</body>
 
  
 
</html>
 
</html>

Latest revision as of 02:48, 18 October 2018