Difference between revisions of "Team:Hong Kong HKU/Design"

(New UI)
 
(4 intermediate revisions by the same user not shown)
Line 3: Line 3:
 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
<style>
 
<style>
−
        #sideMenu
+
#sideMenu
−
        {
+
{display:none; /* Disable the display of the annoying side main menu*/}
−
        display:none; /* Disable the display of the annoying side main menu*/
+
#top_title
−
        }
+
{display:none; /* Disable the annoying title*/}
−
       
+
#content
−
        #top_title
+
{padding:0px; width:90%; margin-left:5%; margin-right:5%;background-color: rgba(255,255,255,0);}
−
        {
+
body
−
        display:none; /* Disable the annoying title*/
+
{margin: 0;
−
        }
+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
−
 
+
font-size: 24px;
−
#content { padding:0px; width:90%; margin-left:5%; margin-right:5%;}
+
color: #333333;
 +
background-color: #fafafa;
 +
background-image:url(https://static.igem.org/mediawiki/2016/a/ae/T--Hong_Kong_HKU--Background_image.png);
 +
background-position:center center;
 +
background-repeat:no-repeat;
 +
-moz-background-size: cover;
 +
background-size: cover;
 +
background-attachment:fixed;}
 +
.container
 +
{background-color: rgba(255,255,255,0.6);
 +
padding-top:80px;}
 +
p {font-size: 16px;}
 +
h1,h2,h3,h4,h5,h6 {color: #282828;}
 +
h1 {font-size:72px;} h2 {font-size:48px;} h3 {font-size:36px;}
 +
h4 {font-size:32px;} h5 {font-size:28px;} h6 {font-size:24px;}
 +
.nav-pills>li.active>a{background-color:#93d66b !important;}
 +
.nav-pills>li>a:hover{background-color:#b2dd75 !important; color:#FFFFFF!important;}
 +
.nav-pills>li.active>a:hover{background-color:#93d66b !important;}
 
</style>
 
</style>
−
 
+
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
 +
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
 +
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 +
<!--[if lt IE 9]>
 +
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
 +
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 +
<![endif]-->
 
<head>
 
<head>
 
<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">
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<meta name="viewport" content="width=device-width, initial-scale=1">
−
<!-- Bootstrap -->
 
 
<link href="https://2016.igem.org/Team:Hong_Kong_HKU/css/default?action=raw&ctype=text/css" type="text/css" rel="stylesheet">
 
<link href="https://2016.igem.org/Team:Hong_Kong_HKU/css/default?action=raw&ctype=text/css" type="text/css" rel="stylesheet">
−
<!-- custom style -->
 
 
<link href="https://2016.igem.org/Team:Hong_Kong_HKU/css/custom?action=raw&ctype=text/css" type="text/css" rel="stylesheet">
 
<link href="https://2016.igem.org/Team:Hong_Kong_HKU/css/custom?action=raw&ctype=text/css" type="text/css" rel="stylesheet">
 
</head>
 
</head>
−
 
+
</html>
 +
{{Hong_Kong_HKU/Header}}
 +
<html>
 
<body>
 
<body>
−
<nav class="navbar navbar-default">
+
<div class="container" align="center">
−
  <div class="container-fluid">  
+
    <h2>Project</h2>
−
    <!-- Brand and toggle get grouped for better mobile display -->
+
    <ul class="nav nav-pills">
−
     <div class="navbar-header">
+
      <li class="dropdown">
−
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
+
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Description<span class="caret"></span></a>
−
      <a class="navbar-brand" href="#">HKU iGEM Team</a>
+
            <ul class="dropdown-menu">
 +
              <li><a href="https://2016.igem.org/Team:Hong_Kong_HKU/Description#tab_Inspiration">Inspiration</a></li>
 +
              <li><a href="https://2016.igem.org/Team:Hong_Kong_HKU/Description#tab_Objectives">Objectives</a></li>
 +
              <li><a href="https://2016.igem.org/Team:Hong_Kong_HKU/Description#tab_Progress">Progress</a></li>
 +
              <li><a href="https://2016.igem.org/Team:Hong_Kong_HKU/Description#tab_Sigificances">Sigificances</a></li>
 +
            </ul>
 +
      </li>
 +
      <li class="active"><a data-toggle="pill" href="#">Design</a></li>
 +
    </ul>
 +
     <div class="tab-content">
 +
       <div id="Design" class="tab-pane fade in active">
 +
        <h3>Design</h3>
 +
        <img class="img-responsive center-block" width="600px" height="auto" src="https://static.igem.org/mediawiki/2016/a/af/T--Hong_Kong_HKU--StrandDisplacement.jpg" alt="">
 +
    <p class="text-justify" align="left"><font size="3">
 +
        Our design is a tetrahedral nanostructure for diagnostic purposes.
 +
        It consists of five oligonucleotides (oligos, O1 to O5) with lengths ranging from 30 to 97 nucleotides.
 +
        The oligos are assembled by heating at 95ºC for 5 minutes and then cooled to 25ºC.
 +
        The details of the DNA nanostructure assembly can be found in <a href="https://2016.igem.org/Team:Hong_Kong_HKU/Experiments">here</a>.
 +
        The oligo sequences are shown below:<br>
 +
        </font></p>
 +
        <img class="img-responsive center-block" width="600px" height="auto" src="https://static.igem.org/mediawiki/2016/9/91/T--Hong_Kong_HKU--TetraDesign1.png" alt=""><br>
 +
        <table class="table">
 +
        <thead>
 +
            <tr>
 +
                <th style="text-align:center">Tetra forming Oligo</th>
 +
                    <th>Sequence</th>
 +
                    <th style="text-align:center">Size (nucleotide)</th>
 +
                </tr>
 +
            </thead>
 +
            <tbody>
 +
            <tr>
 +
                <td style="text-align:center">Oligo 1</td>
 +
                    <td>CTACTAGCTGCACGACGTAGTGGGTTGGGTCTAACTCCACTGGGTAGGGTCGT<br>CGAGCTCACGTGCGTCACGCGCGATAGTCGAGTGCTGCTGAGTA</td>
 +
                    <td style="text-align:center">97</td>
 +
                </tr>
 +
            <tr>
 +
                <td style="text-align:center">Oligo 2</td>
 +
                    <td>CTACGAGTGATGACGAGACATGTGACAGTGCACACTATGTGCGCTCATCGCAC<br>GATAGCAGACGACG</td>
 +
                    <td style="text-align:center">67</td>
 +
                </tr>
 +
            <tr>
 +
                <td style="text-align:center">Oligo 3</td>
 +
                    <td>TGACGCACGTGAGCACTGCTATCGTGCGATGAGCGCACATAGACTGACACACG<br>CATGACGCTATCGCAGCACGACTATCGCGCG</td>
 +
                    <td style="text-align:center">84</td>
 +
                </tr>
 +
            <tr>
 +
                <td style="text-align:center">Oligo 4</td>
 +
                    <td>GTCTCGTCATCACACGTGCAGCTAGTAGTACTCAGCAGCACAGCTGCGATAGC<br>GTCATGCGTGTGTCAGAGTGCACTGTCACAT</td>
 +
                    <td style="text-align:center">84</td>
 +
                </tr>
 +
            <tr>
 +
                <td style="text-align:center">Oligo 5</td>
 +
                    <td>ATGGCACCCAGTGGAGTTAGACCCTGATTG</td>
 +
                    <td style="text-align:center">30</td>
 +
                </tr>
 +
            </tbody>
 +
        </table>
 +
        <br>
 +
        <img class="img-responsive center-block" width="600px" height="auto" src="https://static.igem.org/mediawiki/2016/8/83/T--Hong_Kong_HKU--TetraDesign2.png" alt="">
 +
        <br>
 +
        <p class="text-justify" align="left"><font size="3">
 +
        To test our design, we used a miRNA sequence found in patients who have high risks of acquiring Huntington disease.
 +
        The miRNA is expected to displace O5 from the tetrahedral structure.
 +
        With Oligo 5 displaced, steric hindrance within the tetrahedron would hence be reduced.
 +
        Oligo 1 would then be able to fold into a G-quadruplex structure,
 +
        which serves as a DNAzyme to catalyze the reaction between hemin, ABTS and hydrogen peroxide, which gives a green color.
 +
        The sequence of the miRNA for Huntington disease used for testing is shown below:
 +
        </font></p>
 +
        <table class="table">
 +
        <thead>
 +
            <tr>
 +
                <th style="text-align:center">Input Oligo</th>
 +
                    <th>Sequence</th>
 +
                    <th style="text-align:center">Size (nucleotide)</th>
 +
                </tr>
 +
            </thead>
 +
            <tbody>
 +
            <tr>
 +
                <td style="text-align:center">Input</td>
 +
                    <td>CAATCAGGGTCTAACTCCACTGGGTGCCAT</td>
 +
                    <td style="text-align:center">30</td>
 +
                </tr>
 +
            <tr>
 +
                <td style="text-align:center">RNA Input</td>
 +
                    <td>CAAUCAGGGUCUAACUCCACUGGGUGCCAU</td>
 +
                    <td style="text-align:center">30</td>
 +
                </tr>
 +
            </tbody>
 +
        </table>
 +
          <p class="text-justify"><font size="3">
 +
          For future development as a diagnostic tool with broader applications, part of the DNA sequence can be altered for the detection of other miRNAs for various diseases.
 +
        </font></p>
 +
      </div>
 
     </div>
 
     </div>
−
     
+
</div>
−
   
+
−
    <!-- Collect the nav links, forms, and other content for toggling -->
+
−
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+
−
      <ul class="nav navbar-nav">
+
−
        <li class="active"><a href="https://2016.igem.org/Team:Hong_Kong_HKU">Homepage</a> </li>
+
−
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true">Project<span class="caret"></span></a>
+
−
          <ul class="dropdown-menu">
+
−
            <li><a href="https://2016.igem.org/Team:Hong_Kong_HKU/Description">Description</a> </li>
+
−
            <li><a href="https://2016.igem.org/Team:Hong_Kong_HKU/Design">Design</a> </li>
+
−
            <li role="separator" class="divider"></li>
+
−
            <li><a href="https://2016.igem.org/Team:Hong_Kong_HKU/Proof">Proof of concept</a> </li>
+
−
            <li><a href="https://2016.igem.org/Team:Hong_Kong_HKU/Demostrate">Demostrate</a> </li>
+
−
          </ul>
+
−
        </li>
+
−
        <li class="dropdown"> <a href="https://2016.igem.org/Team:Hong_Kong_HKU/Notebook" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true">Notebook<span class="caret"></span></a>
+
−
          <ul class="dropdown-menu">
+
−
            <li><a href="https://2016.igem.org/Team:Hong_Kong_HKU/Protocol">Protocol</a> </li>
+
−
            <li role="separator" class="divider"></li>
+
−
            <li><a href="https://2016.igem.org/Team:Hong_Kong_HKU/Result">Result</a> </li>
+
−
          </ul>
+
−
        </li>
+
−
        <li><a href="https://2016.igem.org/Team:Hong_Kong_HKU/Parts">Parts</a></li>
+
−
        <li><a href="https://2016.igem.org/Team:Hong_Kong_HKU/Human_Practices">Human Practices</a></li>
+
−
        <li><a href="https://2016.igem.org/Team:Hong_Kong_HKU/Attributions">Attributions</a></li>
+
−
      </ul>
+
−
      <form class="navbar-form navbar-right" role="search">
+
−
        <div class="form-group">
+
−
        <a href="https://www.facebook.com/igemhku2016" target="_blank"><img style="float:right"  src="https://static.igem.org/mediawiki/2016/e/ea/T--Hong_Kong_HKU--FB.jpg" width="24px" height="24px" alt="Placeholder image"></a>
+
−
        </div>
+
−
      </form>
+
−
      <ul class="nav navbar-nav navbar-right">
+
−
      </ul>
+
−
    </div>
+
−
    <span class="dropdown"></span>    <!-- /.navbar-collapse -->
+
−
  </div>
+
−
  <!-- /.container-fluid -->
+
−
</nav>
+
−
 
+
−
 
+
−
<img class="img-responsive center-block" src="https://static.igem.org/mediawiki/2016/a/a8/T--Hong_Kong_HKU--Logo_HKU_2460x1860.jpg" style="width:240px; height:180px;" alt="Placeholder image">
+
−
<div class="container" align="center">
+
−
<h3>Design</h3>
+
  
 
<!-- footer -->
 
<!-- footer -->
−
<hr>
+
<footer class="text-center"></footer>
−
<footer class="text-center">
+
<script src="https://2016.igem.org/Team:Hong_Kong_HKU/JS/jQuery?action=raw&ctype=text/javascript" type="text/javascript"></script>
−
  <div class="container">
+
−
  <table cellspacing="0" cellpadding="0" max-width="90%" height="78" border="0" align="center">
+
−
  <tbody>
+
−
    <tr align="center">
+
−
      <td width="70%"><h4>Sponsors</h4></td>
+
−
      <td width="20%"><h4>Contact</h4></td>
+
−
    </tr>
+
−
    <tr>
+
−
      <td><img class="img-responsive center-block" src="https://static.igem.org/mediawiki/2016/c/cd/T--Hong_Kong_HKU--IDT-Logo.png" width="185px" height="51px" alt="Placeholder image">
+
−
      <img class="img-responsive center-block" src="https://static.igem.org/mediawiki/2016/7/76/T--Hong_Kong_HKU--SnapGeneLogo72.jpg" width="180px" height="51px" alt="Placeholder image"></td>
+
−
      <td>Email: <a href="mailto:igemhku@hku.hk" target="_blank">igemhku@hku.hk</a></td>
+
−
    </tr>
+
−
  </tbody>
+
−
</table>
+
−
    <div class="row">
+
−
      <div class="col-xs-12">
+
−
        <p style="text-align: center;">Copyright © 2016 HKU iGEM. All rights reserved.</p>
+
−
      </div>
+
−
    </div>
+
−
  </div>
+
−
</footer>
+
 
<script src="https://2016.igem.org/Template:Hong_Kong_HKU/js/script?action=raw&ctype=text/javascript" type="text/javascript"></script>
 
<script src="https://2016.igem.org/Template:Hong_Kong_HKU/js/script?action=raw&ctype=text/javascript" type="text/javascript"></script>
−
 
 
</body>
 
</body>
−
 
 
</html>
 
</html>
 +
{{Hong_Kong_HKU/Footer}}

Latest revision as of 19:51, 19 October 2016

Project

Design

Our design is a tetrahedral nanostructure for diagnostic purposes. It consists of five oligonucleotides (oligos, O1 to O5) with lengths ranging from 30 to 97 nucleotides. The oligos are assembled by heating at 95ºC for 5 minutes and then cooled to 25ºC. The details of the DNA nanostructure assembly can be found in here. The oligo sequences are shown below:


Tetra forming Oligo Sequence Size (nucleotide)
Oligo 1 CTACTAGCTGCACGACGTAGTGGGTTGGGTCTAACTCCACTGGGTAGGGTCGT
CGAGCTCACGTGCGTCACGCGCGATAGTCGAGTGCTGCTGAGTA		 97
Oligo 2 CTACGAGTGATGACGAGACATGTGACAGTGCACACTATGTGCGCTCATCGCAC
GATAGCAGACGACG		 67
Oligo 3 TGACGCACGTGAGCACTGCTATCGTGCGATGAGCGCACATAGACTGACACACG
CATGACGCTATCGCAGCACGACTATCGCGCG		 84
Oligo 4 GTCTCGTCATCACACGTGCAGCTAGTAGTACTCAGCAGCACAGCTGCGATAGC
GTCATGCGTGTGTCAGAGTGCACTGTCACAT		 84
Oligo 5 ATGGCACCCAGTGGAGTTAGACCCTGATTG 30


To test our design, we used a miRNA sequence found in patients who have high risks of acquiring Huntington disease. The miRNA is expected to displace O5 from the tetrahedral structure. With Oligo 5 displaced, steric hindrance within the tetrahedron would hence be reduced. Oligo 1 would then be able to fold into a G-quadruplex structure, which serves as a DNAzyme to catalyze the reaction between hemin, ABTS and hydrogen peroxide, which gives a green color. The sequence of the miRNA for Huntington disease used for testing is shown below:

Input Oligo Sequence Size (nucleotide)
Input CAATCAGGGTCTAACTCCACTGGGTGCCAT 30
RNA Input CAAUCAGGGUCUAACUCCACUGGGUGCCAU 30

For future development as a diagnostic tool with broader applications, part of the DNA sequence can be altered for the detection of other miRNAs for various diseases.


Copyright © 2016 HKU iGEM. All rights reserved.