Difference between revisions of "Team:Hong Kong-CUHK/Results"

Line 1: Line 1:
 
{{Hong_Kong-CUHK}}
 
{{Hong_Kong-CUHK}}
 
<html>
 
<html>
  <head>
+
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
+
  <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" >
+
  <meta name="viewport" content="width=device-width, initial-scale=1">
+
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="alternate stylesheet" type="text/css" href="scroll_style.css">
+
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jquery.js"></script>
+
  <style>
<script type="text/javascript" src="scroll_script.js"></script>
+
 
+
 
+
  <style>
+
 
+
 
.container {
 
.container {
 
     overflow: hidden;
 
     overflow: hidden;
Line 21: Line 16:
 
}
 
}
  
.container a {
 
transition: 0.3s ease;
 
    float: left;
 
    font-size: 16px;
 
    color: black;
 
    text-align: center;
 
    padding: 14px 16px;
 
    text-decoration: none;
 
 
}
 
 
.container a:hover {
 
border-top: 4px solid #000;
 
  border-bottom: 4px solid #000;
 
  padding: 6px 0;
 
}
 
  
  
Line 43: Line 22:
 
       position: relative;  
 
       position: relative;  
 
   }
 
   }
   #section1 {padding-top:120px;height:500px;color: #fff; background-color: #1E88E5;}
+
   #section1 {padding-top:120px;height:500px;color: #000; background-color: #FAFAFA;}
   #section2 {padding-top:120px;height:500px;color: #fff; background-color: #673ab7;}
+
   #section2 {padding-top:120px;height:500px;color: #000; background-color: #FFFFFF;}
   #section3 {padding-top:120px;height:500px;color: #000000; background-color: #FFD2E9;}
+
   #section3 {padding-top:120px;height:500px;color: #000; background-color: #FAFAFA;}
   #section4 {padding-top:120px;height:500px;color: #fff; background-color: #00bcd4;}
+
   #section4 {padding-top:120px;height:500px;color: #000; background-color: #FFFFFF;}
 
    
 
    
 
.scrollToTop{
 
position:fixed;
 
bottom:50px;
 
border:3px solid #585858;
 
background-color:white;
 
color:#585858;
 
border-radius:100%;
 
height:45px;
 
width:45px;
 
font-size:200px;
 
display:none;
 
box-shadow: 0 0 0 0 rgba(255,255,255,.1);
 
  -webkit-animation: sdb03 5s infinite;
 
  animation: sdb03 5s infinite;
 
  opacity: 0;
 
box-sizing: border-box;
 
}
 
@-webkit-keyframes sdb03 {
 
  0% {
 
    opacity: 0;
 
  }
 
  30% {
 
    opacity: 1;
 
  }
 
  60% {
 
    box-shadow: 0 0 0 60px rgba(255,255,255,.1);
 
    opacity: 0;
 
  }
 
  100% {
 
    opacity: 0;
 
  }
 
}
 
@keyframes sdb03 {
 
  0% {
 
    opacity: 0;
 
  }
 
  30% {
 
    opacity: 1;
 
  }
 
  60% {
 
    box-shadow: 0 0 0 60px rgba(255,255,255,.1);
 
    opacity: 0;
 
  }
 
  100% {
 
    opacity: 0;
 
  }
 
}
 
 
 
 
 
.scrollToTop:hover{
 
text-decoration:none;
 
 
}   
 
}   
 

 </style>  
 

 </style>  
Line 117: Line 42:
  
 
<div class="whole-div">
 
<div class="whole-div">
    <div class="container">
+
  <div class="container-fluid">
<body data-spy="scroll" data-target=".navbar" data-offset="50">
+
    <div class="navbar-header">
 
+
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
 
+
          <span class="icon-bar"></span>
<div>
+
          <span class="icon-bar"></span>
 +
          <span class="icon-bar"></span>                       
 +
      </button>
 +
      <a class="navbar-brand" href="#">Results</a>
 +
    </div>
 +
    <div>
 
       <div class="collapse navbar-collapse" id="myNavbar">
 
       <div class="collapse navbar-collapse" id="myNavbar">
 
         <ul class="nav navbar-nav">
 
         <ul class="nav navbar-nav">
           <a href="#section1">Toehold Switch</a>
+
           <li><a href="#section1">Toehold Switch</a></li>
           <a href="#section2">Interlab</a>
+
           <li><a href="#section2">Interlab</a></li>
           <a href="#section3">Charaterization</a>
+
           <li><a href="#section3">Charaterization</a></li>
<a href="#section4">Program</a>
+
          <li><a href="#section4">Program</a></li>
                  </ul>
+
            </ul>
 +
          </li>
 +
        </ul>
 +
      </div>
 +
    </div>
 +
  </div>
 +
</nav>  
 
</div>
 
</div>
 
     </div>
 
     </div>
Line 137: Line 73:
  
  
<div>
+
<div id="section1" class="container-fluid">
<div id="section1" class="container">
+
 
   <h1>Toehold Switch</h1>
 
   <h1>Toehold Switch</h1>
 
   <p>This is overview about Toehold Switch.</p>
 
   <p>This is overview about Toehold Switch.</p>
 
 
</div>
 
</div>
  
<div id="section2" class="container">
+
<div id="section2" class="container-fluid">
 
   <h1>Interlab</h1>
 
   <h1>Interlab</h1>
 
   <p>This is overview about Interlab.</p>
 
   <p>This is overview about Interlab.</p>
 
<ul="pull right">
 
<a href="#" class="scrollToTop">&#8679;</a> 
 
</ul>
 
 
</div>
 
</div>
  
  
<div id="section3" class="container">
+
<div id="section3" class="container-fluid">
 
   <h1>Characterization</h1>
 
   <h1>Characterization</h1>
   <p style="line-height: 1.2; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size: 14pt;"><strong><span style="color: #000000; font-family: Calibri; font-variant: normal; text-decoration: underline; vertical-align: baseline; background-color: transparent;">Overview</span></strong></span></p>
+
   <p>Overview
<p style="line-height: 1.2; margin-top: 0pt; margin-bottom: 0pt;"><span style="color: #000000; font-family: Calibri; font-size: 14pt; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; background-color: transparent;">Fluorescent protein is an important marker for qualitative analysis in validation test of Toehold switch which detects the presence of trigger (viral) RNA.The presence of trigger RNA is reported by fold change of fluorescent protein expression compared with switch only by fluorescent assays and rely on the ability of fluorescent protein expression. More often, body fluid of different pH from vary organs extracted as sample may disturb the fluorescent level due to pH-dependent folding and conformation of proteins. </span></p>
+
<br>Fluorescent protein is an important marker for qualitative analysis in validation test of Toehold switch which detects the presence of trigger (viral) RNA.The presence of trigger RNA is reported by fold change of fluorescent protein expression compared with switch only by fluorescent assays and rely on the ability of fluorescent protein expression. More often, body fluid of different pH from vary organs extracted as sample may disturb the fluorescent level due to pH-dependent folding and conformation of proteins.
<p style="line-height: 1.2; margin-top: 0pt; margin-bottom: 0pt;"><span style="color: #000000; font-family: Calibri; font-size: 14pt; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; background-color: transparent;">To determine the effective range and optimize the protein expression level for clinical diagnosis, we have demonstrated their pH stability under different pH condition.</span></p>
+
<br>To determine the effective range and optimize the protein expression level for clinical diagnosis, we have demonstrated their pH stability under different pH condition.
<p style="line-height: 1.2; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size: 14pt;"><strong><span style="color: #000000; font-family: Calibri; font-variant: normal; text-decoration: underline; vertical-align: baseline; background-color: transparent;"><br>Key Achievements</span></strong></span></p>
+
<ul style="margin-top: 0pt; margin-bottom: 0pt;">
+
<li style="list-style-type: disc; font-size: 12pt; font-family: Calibri; color: #000000; background-color: transparent; font-weight: 400; font-variant: normal; text-decoration: none; vertical-align: baseline;"><span style="color: #000000; font-family: Calibri; font-size: 14pt; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; background-color: transparent;">Characterised two fluorescent proteins for the registry to functionalize Toehold switch for clinical diagnosis. </span></li>
+
<li style="list-style-type: disc; font-size: 12pt; font-family: Calibri; color: #000000; background-color: transparent; font-weight: 400; font-variant: normal; text-decoration: none; vertical-align: baseline;"><span style="color: #000000; font-family: Calibri; font-size: 14pt; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; background-color: transparent;">Proved the pH dependent stability of fluorescent proteins.</span></li>
+
</ul> 
+
  
<ul="pull right">
+
<br><br>Key Achievements
<a href="#" class="scrollToTop">&#8679;</a>
+
<br>Characterised two fluorescent proteins for the registry to functionalize Toehold switch for clinical diagnosis.
</ul>
+
Proved the pH dependent stability of fluorescent proteins.</p>
 
</div>
 
</div>
  
 
+
<div id="section4" class="container-fluid">
<div id="section4" class="container">
+
 
   <h1>Program</h1>
 
   <h1>Program</h1>
   <p>This is overview about Program.</p>
+
   <p>Program</p>
 
+
<ul="pull right">
+
<a href="#" class="scrollToTop">&#8679;</a> 
+
</ul>
+
 
</div>
 
</div>
  
<script>
 
$(document).ready(function() {
 
  $('.navbar-nav a').mouseenter(function() {
 
    var sectionTo = $(this).attr('href');
 
    $('html, body').animate({
 
      scrollTop: $(sectionTo).offset().top
 
    }, 3000);
 
  });
 
});
 
  
  
  
</script>
+
<script>
 +
$(document).ready(function(){
 +
  // Add scrollspy to <body>
 +
  $('body').scrollspy({target: ".navbar", offset: 50}); 
  
 +
  // Add smooth scrolling on all links inside the navbar
 +
  $("#myNavbar a").on('click', function(event) {
 +
    // Make sure this.hash has a value before overriding default behavior
 +
    if (this.hash !== "") {
 +
      // Prevent default anchor click behavior
 +
      event.preventDefault();
  
 +
      // Store hash
 +
      var hash = this.hash;
  
 
+
      // Using jQuery's animate() method to add smooth page scroll
<script>
+
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$(document).ready(function(){
+
      $('html, body').animate({
+
        scrollTop: $(hash).offset().top
//Check to see if the window is top if not then display button
+
      }, 800, function(){
$(window).scroll(function(){
+
 
if ($(this).scrollTop() > 100) {
+
        // Add hash (#) to URL when done scrolling (default click behavior)
$('.scrollToTop').fadeIn();
+
        window.location.hash = hash;
} else {
+
      });
$('.scrollToTop').fadeOut();
+
    }  // End if
}
+
  });
});
+
+
//Click event to scroll to top
+
$('.scrollToTop').click(function(){
+
$('html, body').animate({scrollTop : 0},800);
+
return false;
+
});
+
+
 
});
 
});
 
</script>
 
</script>
  
</div>
 
 
</body>
 
</body>
  
 
</html>
 
</html>
 
{{Template:Hong_Kong-CUHK_footer}}
 
{{Template:Hong_Kong-CUHK_footer}}

Revision as of 10:56, 22 August 2017





Results

Toehold Switch

This is overview about Toehold Switch.

Interlab

This is overview about Interlab.

Characterization

Overview
Fluorescent protein is an important marker for qualitative analysis in validation test of Toehold switch which detects the presence of trigger (viral) RNA.The presence of trigger RNA is reported by fold change of fluorescent protein expression compared with switch only by fluorescent assays and rely on the ability of fluorescent protein expression. More often, body fluid of different pH from vary organs extracted as sample may disturb the fluorescent level due to pH-dependent folding and conformation of proteins.
To determine the effective range and optimize the protein expression level for clinical diagnosis, we have demonstrated their pH stability under different pH condition.

Key Achievements
Characterised two fluorescent proteins for the registry to functionalize Toehold switch for clinical diagnosis. Proved the pH dependent stability of fluorescent proteins.

Program

Program