Team:Tsinghua-A

From 2014.igem.org

(Difference between revisions)
 
(67 intermediate revisions not shown)
Line 1: Line 1:
-
{{Team:Tsinghua-A/style}}
+
{{Team:Tsinghua-A/Style}}
-
{{Team:Tsinghua-A/menu}}
+
{{Team:Tsinghua-A/Killbanner}}
-
{{Team:Tsinghua-A/footer}}
+
{{Team:Tsinghua-A/Menubar}}
 +
 
<html>
<html>
-
<head>
+
<body>
-
{{Team:Tsinghua-A/style}}
+
 
-
<style type='text/css'>
+
  <!-- Carousel -->
-
@charset utf-8;
+
  <div id="header" class="carousel slide animated fadeIn">
-
+
    <div class="carousel-inner">
-
/* common */
+
     
-
body{background: #ddd;overflow-x: hidden;}
+
      <!--Item One-->
-
#bd{width: 1050px;margin:0px auto;max-width: 1050px;}
+
      <div class="item one active">
-
+
        <div class="container animated fadeInUp">
-
/* module: sliders */
+
          <div class="carousel-caption">
-
  #sliders{
+
            <h1>Welcome to Tsinghua-A Team Wiki</h1>
-
    border-radius: 5px;
+
            <h2> To TALE a new world.  <a href="https://2014.igem.org/Team:Tsinghua-A/Project"><i class="icon-chevron-right"></i> See Project</a></h2>
-
    box-shadow: 1px 1px 4px #666;
+
          </div>
-
    padding: 1%;
+
        </div>
-
    background: #fff;
+
      </div>
-
}
+
     
-
#overflow{
+
      <!--Item Two-->
-
    width: 100%;
+
      <div class="item two">
-
    overflow: hidden;
+
        <div class="container">
-
}
+
     
-
#sliders .inner{
+
          <div class="carousel-caption">
-
    width: 500%;
+
            <h1>Welcome to Tsinghua-A Team Wiki</h1>
-
    transiton: all 1s linear;
+
            <h2> Coding to reveal the code.   <a href="https://2014.igem.org/Team:Tsinghua-A/Modeling"><i class="icon-chevron-right"></i> See Modeling</a> </h2>
-
    -webkit-transition: all 1s linear;
+
          </div>
-
}
+
        </div>
-
#sliders article{
+
      </div>
-
    float: left;
+
     
-
    width: 20%;
+
      <!--Item Three-->
-
}
+
      <div class="item three">
-
#sliders article .info{
+
        <div class="container">
-
    position: absolute;
+
       
-
    opacity: 0;
+
          <div class="carousel-caption">
-
    padding: 30px;
+
            <h1>Welcome to Tsinghua-A Team Wiki</h1>
-
    color: #666;
+
            <h2> Practice humanity with technology. <a href="https://2014.igem.org/Team:Tsinghua-A/HumanPractice"><i class="icon-chevron-right"></i> See Human Practice</a> </h2>
-
    font-family: Arial;
+
          </div>
-
    transition: opacity 0.1s ease-out;
+
        </div>
-
    -webkit-transform: translateZ(0);
+
      </div>
-
    -webkit-transition: opacity 0.1s ease-out;
+
     
-
}
+
    </div>
-
#sliders article .info h1{
+
    <a class="left carousel-control hidden-phone" href="#header" data-slide="prev"></a>
-
    font-size: 40px;   
+
    <a class="right carousel-control hidden-phone" href="#header" data-slide="next"></a>
-
    font-weight: bold;
+
  </div><!-- /.carousel -->
-
    margin: 500 0 5px;
+
 
-
}
+
 
-
#sliders article .info a{
+
 
-
    color: #666;
+
 
-
    text-decoration: none;
+
  <section id="message">
-
}
+
    <div class="container">
-
+
      <div class="row-fluid">
-
/* module: controls */
+
        <div class="span12 text-center">
-
#controls{
+
        <h2> Introduction </h2>
-
    height: 50px;
+
          <h3>Transactivator-Like Effectors (TALEs) are a technology that once revolutionized the way researchers manipulate DNA with exceptional site specificity.Though it works well in eukaryotic organisms, it is not available in prokaryotic organisms. We come up with the idea that the long repeating sequence of the TALEs coding sequence leads to it. In our project, we attempt to construct a marvelous TALEs system which can efficiently work in prokaryotic organisms. By optimizing the TALEs coding sequence with modeling methods and testing it by Golden Gate Assembly and Report System, we hope we can have a handle tool for gene editing in prokaryotic organisms.
-
    width: 100%;
+
 
-
    margin-top: -25%;
+
<h3>
-
}
+
 
-
#controls label{
+
        </div>
-
    display: none;
+
 
-
    width: 50px;
+
 
-
    height: 50px;
+
      </div>
-
    opacity: 0.3;
+
    </div>
-
    cursor: pointer;   
+
  </section>
-
}
+
 
-
#controls label:hover{
+
 
-
    opacity: 1;
+
<section>
-
}
+
<div class="span12 text-centre">
-
+
 
-
/* module: active */
+
<img src="https://static.igem.org/mediawiki/2014/0/08/Tsinghua-A_Wishtobethefinal.jpg">
-
#active{
+
-
    width: 100%;
+
-
    margin-top: 23%;
+
-
    text-align: center;
+
-
}
+
-
#active label{
+
-
    display: inline-block;
+
-
    width: 10px;
+
-
    height: 10px;
+
-
    border-radius: 5px;
+
-
    background: #bbb;
+
-
    border-color: #777;
+
-
}
+
-
#active label:hover{
+
-
    background: #ccc;
+
-
}
+
-
+
-
/* input checked change style */
+
-
#slider1:checked ~ #active label:nth-child(1),
+
-
#slider2:checked ~ #active label:nth-child(2),
+
-
#slider3:checked ~ #active label:nth-child(3),
+
-
#slider4:checked ~ #active label:nth-child(4),
+
-
#slider5:checked ~ #active label:nth-child(5){
+
-
    background: #333;
+
-
}
+
-
#slider1:checked ~ #controls label:nth-child(5),
+
-
#slider2:checked ~ #controls label:nth-child(1),
+
-
#slider3:checked ~ #controls label:nth-child(2),
+
-
#slider4:checked ~ #controls label:nth-child(3),
+
-
#slider5:checked ~ #controls label:nth-child(4){
+
-
    display: block;
+
-
    float: left;
+
-
    background: url(../img/prev.png) no-repeat;
+
-
    margin-left: -70px;
+
-
}
+
-
#slider1:checked ~ #controls label:nth-child(2),
+
-
#slider2:checked ~ #controls label:nth-child(3),
+
-
#slider3:checked ~ #controls label:nth-child(4),
+
-
  #slider4:checked ~ #controls label:nth-child(5),
+
-
#slider5:checked ~ #controls label:nth-child(1){
+
-
    display: block;
+
-
    float: right;
+
-
    background: url(../img/next.png) no-repeat;
+
-
    margin-right: -70px;
+
-
}
+
-
#slider1:checked ~ #sliders article:nth-child(1) .info,
+
-
#slider2:checked ~ #sliders article:nth-child(2) .info,
+
-
#slider3:checked ~ #sliders article:nth-child(3) .info,
+
-
#slider4:checked ~ #sliders article:nth-child(4) .info,
+
-
#slider5:checked ~ #sliders article:nth-child(5) .info{
+
-
    opacity: 1;
+
-
    transition: all 0.6s ease-out 1s;
+
-
    -webkit-transition: all 0.6s ease-out 1s;
+
-
}
+
-
#slider1:checked ~ #sliders .inner{
+
-
    margin-left: 0;
+
-
}
+
-
#slider2:checked ~ #sliders .inner{
+
-
    margin-left: -100%;
+
-
}
+
-
#slider3:checked ~ #sliders .inner{
+
-
    margin-left: -200%;
+
-
}
+
-
#slider4:checked ~ #sliders .inner{
+
-
    margin-left: -300%;
+
-
}
+
-
#slider5:checked ~ #sliders .inner{
+
-
    margin-left: -400%;
+
-
}
+
-
</style>
+
-
<div>
+
-
            <table>
+
-
                <tr>
+
-
                    <td>
+
-
<br>
+
</img>
-
                        <img src='https://static.igem.org/mediawiki/2014/8/80/White.png'>
+
-
<br><br>
+
-
</td>
+
-
</tr>
+
-
</table>
+
</div>
</div>
-
<style>
 
-
      table{ height:100%; width:100%; text-align:center;}
 
-
</style>
 
-
<body>
+
</section>
-
        <div>
+
-
            <table>
+
-
                <tr>
+
-
                    <td>
+
-
                        <div id="bd">
+
  <!--Services Section-->
-
    <input checked type="radio" name="slider" id="slider1">
+
  <section id="services">
-
    <input type="radio" name="slider" id="slider2">
+
    <div class="container">
-
    <input type="radio" name="slider" id="slider3">
+
      <div class="row-fluid">
-
    <input type="radio" name="slider" id="slider4">
+
       
-
    <input type="radio" name="slider" id="slider5">
+
        <!--Service Section One-->
-
           
+
        <div class="span3 text-center service-box">
-
    <div id="sliders">
+
          <a href="https://2014.igem.org/Team:Tsinghua-A/Project">
-
        <div id="overflow">
+
            <img class="team-thumb img-circle" src="https://static.igem.org/mediawiki/2014/5/57/Tsinghua-A-project.jpg" alt="">
-
              <div class="inner">
+
            <h2>Project</h2>
-
                  <article>
+
            <p>Background, hypothesis and workflow of designer TALE. </p>
-
                      <div class="info">
+
          </a>
-
                            <h1>Marvelous TALE</h1>
+
        </div>
-
                            <a href="#">Description1</a>
+
       
-
                      </div>
+
        <!--Service Section Two-->
-
                      <img src="https://static.igem.org/mediawiki/2014/6/6f/Tsinghua-A-home1.png"/>
+
        <div class="span3 text-center service-box">
-
                  </article>
+
          <a href="https://2014.igem.org/Team:Tsinghua-A/Modeling">
-
                  <article>
+
          <img class="team-thumb img-circle" src="https://static.igem.org/mediawiki/2014/2/24/Tsinghua-A-modeling3.jpg" alt="">
-
                        <div class="info">
+
            <h2>Modeling</h2>
-
                            <h1>Title2</h1>
+
            <p>Optimization of TALE sequence and simulation of the gene circuit. </p>
-
                            <a href="#">Description2</a>
+
          </a>
-
                        </div>
+
        </div>
-
                        <img src="https://static.igem.org/mediawiki/2014/8/80/Tsinghua-A-home2.png"/>
+
       
-
                  </article>
+
        <!--Service Section Three-->
-
                  <article>
+
        <div class="span3 text-center service-box">
-
                        <div class="info">
+
          <a href="https://2014.igem.org/Team:Tsinghua-A/HumanPractice">
-
                            <h1>Title3</h1>
+
            <img class="team-thumb img-circle" src="https://static.igem.org/mediawiki/2014/c/c9/Tsinghua-A_HP.jpg" alt="">
-
                            <a href="#">Description3</a>
+
            <h2>Human Practice</h2>
-
                        </div>
+
            <p>Lectures, seminar, questionnaires and raising ethic problems.  </p>
-
                        <img src="img/pic3.png"/>
+
          </a>
-
                    </article>
+
        </div>
-
                  <article>
+
       
-
                      <div class="info">
+
        <!--Service Section Three-->
-
                            <h1>Title4</h1>
+
        <div class="span3 text-center service-box">
-
                            <a href="#">Description4</a>
+
          <a href="https://2014.igem.org/Team:Tsinghua-A/Team">
-
                        </div>
+
            <img class="team-thumb img-circle" src="https://static.igem.org/mediawiki/2014/8/8e/Tsinghua-A_team.jpg" alt="">
-
                    <img src="img/pic4.png"/>
+
            <h2>Team</h2>
-
                </article>
+
            <p>Department of Automatics, Life Science and Medical School. </p>
-
                <article>
+
          </a>
-
                    <div class="info">
+
        </div>
-
                        <h1>Title5</h1>
+
 
-
                        <a href="#">Description5</a>
+
      </div>
-
                    </div>
+
    </div>
-
                    <img src="img/pic5.png"/>
+
  </section>
-
                </article>
+
 
-
            </div>
+
<section id="team">
-
        </div>
+
  <div class="image-break"> </div>
-
    </div>
+
 
 +
  <div class="container">
 +
     
 +
      <div class="row-fluid">
 +
        <div class="span12">
 +
  <h2> Team </h2>
 +
      <img src="https://static.igem.org/mediawiki/2014/7/70/Tsinghua-A_team.png" alt="Title">
 +
 
 +
                   
 +
        </div>
 +
      </div>
 +
         
   
   
-
    <div id="controls">
+
    </div>
-
          <label for="slider1"></label>
+
  </section>
-
          <label for="slider2"></label>
+
 
-
          <label for="slider3"></label>
+
 
-
          <label for="slider4"></label>
+
 
-
          <label for="slider5"></label>
+
<!--Clients Section-->
-
    </div>
+
  <section id="Acknoledgements">
-
+
  <div class="image-break"> </div>
-
    <div id="active">
+
 
-
        <label for="slider1"></label>
+
  <div class="container">
-
        <label for="slider2"></label>
+
     
-
        <label for="slider3"></label>
+
      <div class="row-fluid">
-
        <label for="slider4"></label>
+
        <div class="span12">
-
        <label for="slider5"></label>
+
          <h2> Acknowledgements </h2>
-
    </div>
+
                    <img src="https://static.igem.org/mediawiki/2014/4/45/Tsinghua-A_acc.png"  alt="Title">
-
</div>
+
-
<br>
+
-
                    </td>
+
-
                </tr>
+
-
            </table>
+
         </div>
         </div>
-
     </body>
+
      </div>
-
</head>
+
         
 +
 +
     </div>
 +
  </section>
 +
 
 +
 
 +
 
 +
 
 +
 +
 
 +
 
 +
 
 +
</body>
</html>
</html>
 +
 +
{{Team:Tsinghua-A/Footer}}
 +
{{Team:Tsinghua-A/Script}}

Latest revision as of 03:01, 18 October 2014

Introduction

Transactivator-Like Effectors (TALEs) are a technology that once revolutionized the way researchers manipulate DNA with exceptional site specificity.Though it works well in eukaryotic organisms, it is not available in prokaryotic organisms. We come up with the idea that the long repeating sequence of the TALEs coding sequence leads to it. In our project, we attempt to construct a marvelous TALEs system which can efficiently work in prokaryotic organisms. By optimizing the TALEs coding sequence with modeling methods and testing it by Golden Gate Assembly and Report System, we hope we can have a handle tool for gene editing in prokaryotic organisms.

Team

Title

Acknowledgements

Title