Difference between revisions of "Team:Tongji Shanghai/Experiments"

(Prototype team page)
 
Line 1: Line 1:
{{Tongji_Shanghai}}
+
{{Team:Tongji_Shanghai/head}}
<html>
+
<!doctype html>
 +
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
 +
<!--[if (gte IE 9)|!(IE)]><html lang="en" class="no-js"> <![endif]-->
 +
<html lang="en">
  
<div class="column full_size">
+
<head>
  
 +
  <!-- Basic -->
 +
  <title>Margo | Blog</title>
  
<p>Describe the experiments, research and protocols you used in your iGEM project.</p>
+
  <!-- Define Charset -->
 +
  <meta charset="utf-8">
  
</div>
+
  <!-- Responsive Metatag -->
 +
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  
<div class="column half_size">
+
  <!-- Page Description and Author -->
<h5>What should this page contain?</h5>
+
  <meta name="description" content="Margo - Responsive HTML5 Template">
<ul>
+
  <meta name="author" content="Margo">
<li> Protocols </li>
+
<li> Experiments </li>
+
<li>Documentation of the development of your project </li>
+
</ul>
+
  
</div>
 
  
<div class="column half_size">
+
  <!-- Bootstrap CSS  -->
<h5>Inspiration</h5>
+
  <link rel="stylesheet" href="asset/css/bootstrap.min.css" type="text/css" media="screen">
<ul>
+
<li><a href="https://2014.igem.org/Team:Colombia/Protocols">2014 Colombia </a></li>
+
<li><a href="https://2014.igem.org/Team:Imperial/Protocols">2014 Imperial </a></li>
+
<li><a href="https://2014.igem.org/Team:Caltech/Project/Experiments">2014 Caltech </a></li>
+
</ul>
+
</div>
+
  
 +
  <!-- Font Awesome CSS -->
 +
  <link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" media="screen">
  
<div class="clear"></div>
+
  <!-- Slicknav -->
 +
  <link rel="stylesheet" type="text/css" href="css/slicknav.css" media="screen">
  
 +
  <!-- Margo CSS Styles  -->
 +
  <link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
  
<div class="column half_size">
+
  <!-- Responsive CSS Styles  -->
 +
  <link rel="stylesheet" type="text/css" href="css/responsive.css" media="screen">
  
 +
  <!-- Color CSS Styles  -->
 +
  <link rel="stylesheet" type="text/css" href="css/colors/red.css" title="red" media="screen" />
 +
  <link rel="stylesheet" type="text/css" href="css/colors/jade.css" title="jade" media="screen" />
 +
  <link rel="stylesheet" type="text/css" href="css/colors/blue.css" title="blue" media="screen" />
 +
  <link rel="stylesheet" type="text/css" href="css/colors/beige.css" title="beige" media="screen" />
 +
  <link rel="stylesheet" type="text/css" href="css/colors/cyan.css" title="cyan" media="screen" />
 +
  <link rel="stylesheet" type="text/css" href="css/colors/green.css" title="green" media="screen" />
 +
  <link rel="stylesheet" type="text/css" href="css/colors/orange.css" title="orange" media="screen" />
 +
  <link rel="stylesheet" type="text/css" href="css/colors/peach.css" title="peach" media="screen" />
 +
  <link rel="stylesheet" type="text/css" href="css/colors/pink.css" title="pink" media="screen" />
 +
  <link rel="stylesheet" type="text/css" href="css/colors/purple.css" title="purple" media="screen" />
 +
  <link rel="stylesheet" type="text/css" href="css/colors/sky-blue.css" title="sky-blue" media="screen" />
 +
  <link rel="stylesheet" type="text/css" href="css/colors/yellow.css" title="yellow" media="screen" />
 +
 +
 +
  <!-- Margo JS  -->
 +
  <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
 +
  <script type="text/javascript" src="js/jquery.migrate.js"></script>
 +
  <script type="text/javascript" src="js/modernizrr.js"></script>
 +
  <script type="text/javascript" src="asset/js/bootstrap.min.js"></script>
 +
  <script type="text/javascript" src="js/jquery.fitvids.js"></script>
 +
  <script type="text/javascript" src="js/owl.carousel.min.js"></script>
 +
  <script type="text/javascript" src="js/nivo-lightbox.min.js"></script>
 +
  <script type="text/javascript" src="js/jquery.isotope.min.js"></script>
 +
  <script type="text/javascript" src="js/jquery.appear.js"></script>
 +
  <script type="text/javascript" src="js/count-to.js"></script>
 +
  <script type="text/javascript" src="js/jquery.textillate.js"></script>
 +
  <script type="text/javascript" src="js/jquery.lettering.js"></script>
 +
  <script type="text/javascript" src="js/jquery.easypiechart.min.js"></script>
 +
  <script type="text/javascript" src="js/jquery.nicescroll.min.js"></script>
 +
  <script type="text/javascript" src="js/jquery.parallax.js"></script>
 +
  <script type="text/javascript" src="js/jquery.slicknav.js"></script>
 +
 +
  <!--[if IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
 +
  <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
 +
 +
</head>
 +
 +
<body>
 +
 +
  <!-- Container -->
 +
  <div id="container">
 +
 +
    <!-- Start Header -->
 +
 +
    <!-- End Header -->
 +
 +
 +
    <!-- Start Page Banner -->
 +
    <div class="page-banner">
 +
      <div class="container">
 +
        <div class="row">
 +
          <div class="col-md-6">
 +
            <h2>Project</h2>
 +
            <p>Our project is our story.</p>
 +
          </div>
 +
          <div class="col-md-6">
 +
            <ul class="breadcrumbs">
 +
              <li><a href="#">Home</a></li>
 +
              <li>Project</li>
 +
            </ul>
 +
          </div>
 +
        </div>
 +
      </div>
 +
    </div>
 +
    <!-- End Page Banner -->
 +
 +
 +
    <!-- Start Content -->
 +
    <div id="content">
 +
      <div class="container">
 +
        <div class="row blog-page">
 +
 +
          <!--Sidebar-->
 +
          <div class="col-md-3 sidebar left-sidebar">
 +
 +
            <!-- Categories Widget -->
 +
            <div class="widget widget-categories" style="display: block;position: fixed;">
 +
              <h4>Experiments<span class="head-line"></span></h4>
 +
              <ul>
 +
                <li>
 +
                  <a href="#">Topic 1</a>
 +
                </li>
 +
                <li>
 +
                  <a href="#">Topic 2</a>
 +
                </li>
 +
                <li>
 +
                  <a href="#">Topic 3</a>
 +
                </li>
 +
              </ul>
 +
            </div>
 +
 +
          </div>
 +
          <!--End sidebar-->
 +
 +
 +
      <!-- Classic Heading -->
 +
            <div class="col-md-9 page-content" style="text-align:justify;">
 +
            <div id="project">
 +
            <!-- Classic Heading -->
 +
           
 +
              <h3 class="classic-title" style="margin-top:0px"><span><a  href="https://2015.igem.org/Team:Peking/Design/PC_Reporter">Paired dCas9 reporter</a></span></h3>
 +
              <div style="margin-top:0px; margin-bottom:0">
 +
                <div class="row">
 +
                  <div class="col-md-6">
 +
                    <img style="max-with:400px;" src="https://static.igem.org/mediawiki/2015/4/4e/Peking-Project-Overview1.png">
 +
                  </div>
 +
                  <div class="col-md-6">
 +
                <p> It is well known that CRISPR/dCas9 has a unique ability to be programmed to bind any sequence with the assistance of sgRNA; it was conventionally used for DNA editing or genome study. In our project, however, we integrate split reporters into CRISPR/Cas9 by translationally fusing two fragments of a split reporter to dCas9, respectively, to convert the sequence-specific information of pathogenic bacteria's genome (in our case, <i>M. tuberculosis</i>) into easily readable signal including bioluminescence or pigment. We demonstrated that the PC reporter is highly compatible with NAD-based diagnosis using isolated genomic DNA of MTB.</p>
 +
                </div>
 +
              </div>
 +
            </div>
 +
 +
              <h3 class="classic-title" style="margin-top:0px"><span><a  href="https://2015.igem.org/Team:Peking/Design/PC_Reporter">Paired dCas9 reporter</a></span></h3>
 +
              <div style="margin-top:0px; margin-bottom:0">
 +
                <div class="row">
 +
                  <div class="col-md-6">
 +
                    <img style="max-with:400px;" src="https://static.igem.org/mediawiki/2015/4/4e/Peking-Project-Overview1.png">
 +
                  </div>
 +
                  <div class="col-md-6">
 +
                <p> It is well known that CRISPR/dCas9 has a unique ability to be programmed to bind any sequence with the assistance of sgRNA; it was conventionally used for DNA editing or genome study. In our project, however, we integrate split reporters into CRISPR/Cas9 by translationally fusing two fragments of a split reporter to dCas9, respectively, to convert the sequence-specific information of pathogenic bacteria's genome (in our case, <i>M. tuberculosis</i>) into easily readable signal including bioluminescence or pigment. We demonstrated that the PC reporter is highly compatible with NAD-based diagnosis using isolated genomic DNA of MTB.</p>
 +
                </div>
 +
              </div>
 +
            </div>           
 +
 +
 +
 +
 +
 
 +
 +
          </div>
 +
        </div>
  
  
 
</div>
 
</div>
 +
</div>             
 +
 +
          </div>
 +
           
 +
 +
        </div>
 +
    <!-- End Content -->
 +
 +
 +
    <!-- Start Footer -->
 +
 +
    <!-- End Footer -->
 +
 +
 +
  <!-- End Container -->
 +
 +
  <!-- Go To Top Link -->
 +
  <a href="#" class="back-to-top"><i class="fa fa-angle-up"></i></a>
 +
 +
  <!-- Style Switcher -->
 +
  <div class="switcher-box">
 +
   
 +
    <h4>Style Switcher</h4>
 +
    <span>12 Predefined Color Skins</span>
 +
    <ul class="colors-list">
 +
      <li>
 +
        <a onClick="setActiveStyleSheet('blue'); return false;" title="Blue" class="blue"></a>
 +
      </li>
 +
      <li>
 +
        <a onClick="setActiveStyleSheet('sky-blue'); return false;" title="Sky Blue" class="sky-blue"></a>
 +
      </li>
 +
      <li>
 +
        <a onClick="setActiveStyleSheet('cyan'); return false;" title="Cyan" class="cyan"></a>
 +
      </li>
 +
      <li>
 +
        <a onClick="setActiveStyleSheet('jade'); return false;" title="Jade" class="jade"></a>
 +
      </li>
 +
      <li>
 +
        <a onClick="setActiveStyleSheet('green'); return false;" title="Green" class="green"></a>
 +
      </li>
 +
      <li>
 +
        <a onClick="setActiveStyleSheet('purple'); return false;" title="Purple" class="purple"></a>
 +
      </li>
 +
      <li>
 +
        <a onClick="setActiveStyleSheet('pink'); return false;" title="Pink" class="pink"></a>
 +
      </li>
 +
      <li>
 +
        <a onClick="setActiveStyleSheet('red'); return false;" title="Red" class="red"></a>
 +
      </li>
 +
      <li>
 +
        <a onClick="setActiveStyleSheet('orange'); return false;" title="Orange" class="orange"></a>
 +
      </li>
 +
      <li>
 +
        <a onClick="setActiveStyleSheet('yellow'); return false;" title="Yellow" class="yellow"></a>
 +
      </li>
 +
      <li>
 +
        <a onClick="setActiveStyleSheet('peach'); return false;" title="Peach" class="peach"></a>
 +
      </li>
 +
      <li>
 +
        <a onClick="setActiveStyleSheet('beige'); return false;" title="Biege" class="beige"></a>
 +
      </li>
 +
    </ul>
 +
    <span>Top Bar Color</span>
 +
    <select id="topbar-style" class="topbar-style">
 +
      <option value="1">Light (Default)</option>
 +
      <option value="2">Dark</option>
 +
      <option value="3">Color</option>
 +
    </select>
 +
    <span>Layout Style</span>
 +
    <select id="layout-style" class="layout-style">
 +
      <option value="1">Wide</option>
 +
      <option value="2">Boxed</option>
 +
    </select>
 +
    <span>Patterns for Boxed Version</span>
 +
    <ul class="bg-list">
 +
      <li>
 +
        <a href="#" class="bg1"></a>
 +
      </li>
 +
      <li>
 +
        <a href="#" class="bg2"></a>
 +
      </li>
 +
      <li>
 +
        <a href="#" class="bg3"></a>
 +
      </li>
 +
      <li>
 +
        <a href="#" class="bg4"></a>
 +
      </li>
 +
      <li>
 +
        <a href="#" class="bg5"></a>
 +
      </li>
 +
      <li>
 +
        <a href="#" class="bg6"></a>
 +
      </li>
 +
      <li>
 +
        <a href="#" class="bg7"></a>
 +
      </li>
 +
      <li>
 +
        <a href="#" class="bg8"></a>
 +
      </li>
 +
      <li>
 +
        <a href="#" class="bg9"></a>
 +
      </li>
 +
      <li>
 +
        <a href="#" class="bg10"></a>
 +
      </li>
 +
      <li>
 +
        <a href="#" class="bg11"></a>
 +
      </li>
 +
      <li>
 +
        <a href="#" class="bg12"></a>
 +
      </li>
 +
      <li>
 +
        <a href="#" class="bg13"></a>
 +
      </li>
 +
      <li>
 +
        <a href="#" class="bg14"></a>
 +
      </li>
 +
    </ul>
 +
  </div>
 +
 +
 
 +
 +
</body>
  
 
</html>
 
</html>
 +
{{Team:Tongji_Shanghai/footer}}

Revision as of 02:29, 16 October 2016

Tongji_Shanghai-2016.igem.org Tongji Shanghai

<!doctype html> Margo | Blog

Project

Our project is our story.

Paired dCas9 reporter

It is well known that CRISPR/dCas9 has a unique ability to be programmed to bind any sequence with the assistance of sgRNA; it was conventionally used for DNA editing or genome study. In our project, however, we integrate split reporters into CRISPR/Cas9 by translationally fusing two fragments of a split reporter to dCas9, respectively, to convert the sequence-specific information of pathogenic bacteria's genome (in our case, M. tuberculosis) into easily readable signal including bioluminescence or pigment. We demonstrated that the PC reporter is highly compatible with NAD-based diagnosis using isolated genomic DNA of MTB.

Paired dCas9 reporter

It is well known that CRISPR/dCas9 has a unique ability to be programmed to bind any sequence with the assistance of sgRNA; it was conventionally used for DNA editing or genome study. In our project, however, we integrate split reporters into CRISPR/Cas9 by translationally fusing two fragments of a split reporter to dCas9, respectively, to convert the sequence-specific information of pathogenic bacteria's genome (in our case, M. tuberculosis) into easily readable signal including bioluminescence or pigment. We demonstrated that the PC reporter is highly compatible with NAD-based diagnosis using isolated genomic DNA of MTB.

Style Switcher

12 Predefined Color Skins
Top Bar Color Layout Style Patterns for Boxed Version