Difference between revisions of "Team:CPU CHINA"

 
(129 intermediate revisions by one other user not shown)
Line 1: Line 1:
 +
{{:Team:CPU_CHINA/Templates/NavFoot}}
 +
 
<html>
 
<html>
 
<head>
 
<head>
Line 5: Line 7:
 
<script src="https://2018.igem.org/Team:CPU_CHINA/jQuery_script_css?action=raw&ctype=text/javascript"></script>
 
<script src="https://2018.igem.org/Team:CPU_CHINA/jQuery_script_css?action=raw&ctype=text/javascript"></script>
 
<script src="https://2017.igem.org/Team:CPU_CHINA/js/bootstrap?action=raw&amp;ctype=text/javascript"></script>
 
<script src="https://2017.igem.org/Team:CPU_CHINA/js/bootstrap?action=raw&amp;ctype=text/javascript"></script>
−
<link rel="stylesheet" href="https://2018.igem.org/Team:CPU_CHINA/bootstrap_style_css?action=raw&ctype=text/css">
+
<link rel="stylesheet" href="https://2018.igem.org/Team:CPU_CHINA/bootstrap_style_css?action=raw&amp;ctype=text/css">
 
<link rel="stylesheet" href="https://2018.igem.org/Team:CPU_CHINA/navfoot_style_css?action=raw&amp;ctype=text/css">
 
<link rel="stylesheet" href="https://2018.igem.org/Team:CPU_CHINA/navfoot_style_css?action=raw&amp;ctype=text/css">
 
</head>
 
</head>
 
<style>
 
<style>
 +
.btn-group
 +
{
 +
top:2.8%;
 +
}
 +
.dropdown-menu{
 +
background-size:100%!important;
 +
}
 +
 +
div
 +
{
 +
font-family:"Century Gothic";
 +
}
 
#content
 
#content
 
{
 
{
 
position:relative;
 
position:relative;
−
top:-20px;
+
top:-60px;
 
}
 
}
 
button
 
button
Line 18: Line 32:
 
outline:none;
 
outline:none;
 
}
 
}
−
#top_title{
+
.footer{
−
    display:none !important;
+
position: absolute;
 +
top:unset;
 +
bottom: -98px;
 
}
 
}
−
#sideMenu{
+
.box{
−
    display:none !important;
+
      position: absolute;
−
}
+
      top: 100px;
−
.img-div p{
+
      margin: 0 50%;
−
    margin: 10px 0 40px 0;
+
      width: 1000px;
−
    font-size: 20px !important;
+
      height: 600px;
−
    text-align: center !important;
+
      left: -600px;
−
    font-family: "Century Gothic";
+
      opacity: 1;
−
}
+
      transition: opacity 1s;
−
.homej:link{
+
−
color:rgb(189,190,176);text-decoration:none;
+
−
}
+
−
.homej:hover{
+
−
color:rgb(0,0,0);
+
−
}
+
−
.homej:visited{
+
−
color:rgb(189,190,176);text-decoration:none;
+
−
}
+
−
button:hover{background-color:#400080;}
+
−
a:visited{color:purple;}
+
−
.mw-content-ltr {
+
−
    background: url(https://static.igem.org/mediawiki/2018/b/bc/T--CPU_CHINA--wiki-background.png) center 29px;position:relative;
+
  
 
}
 
}
−
 
+
  /*@keyframes mymovewheel {
−
  @keyframes mymove {
+
 
       from {}
 
       from {}
 
       to {
 
       to {
Line 53: Line 55:
 
     }
 
     }
  
−
     @-moz-keyframes mymove {
+
     @-moz-keyframes mymovewheel {
 
       from {}
 
       from {}
 
       to {
 
       to {
Line 60: Line 62:
 
     }
 
     }
  
−
     @-webkit-keyframes mymove {
+
     @-webkit-keyframes mymovewheel {
 
       from {}
 
       from {}
 
       to {
 
       to {
Line 67: Line 69:
 
     }
 
     }
  
−
     @-o-keyframes mymove {
+
     @-o-keyframes mymovewheel {
 
       from {}
 
       from {}
 
       to {
 
       to {
Line 73: Line 75:
 
       }
 
       }
 
     }
 
     }
−
 
+
*/
 
.wheel
 
.wheel
 
{
 
{
 
       position: absolute;
 
       position: absolute;
−
       top: 220px;
+
       top: 1150px;
−
       width: 200px;
+
       width: 10%;
−
       height: 200px;
+
       height: 300px;
−
       animation: rotate 10s infinite;
+
       left:11%;
−
      -webkit-animation: mymove 10s infinite;
+
−
      animation-timing-function: linear;
+
 
       background: url(https://static.igem.org/mediawiki/2018/0/0a/T--CPU_CHINA--background-wheel.png);
 
       background: url(https://static.igem.org/mediawiki/2018/0/0a/T--CPU_CHINA--background-wheel.png);
−
      background-size: 150px 150px;
 
 
       background-repeat: no-repeat;
 
       background-repeat: no-repeat;
−
       background-size: cover;
+
       background-size: contain;
−
       z-index: -1;
+
}
 +
.carriage
 +
{
 +
       position: absolute;
 +
      top: 145px;
 +
      width:60%;
 +
  height:1000px;
 +
      background: url(https://static.igem.org/mediawiki/2018/4/41/T--CPU_CHINA--background-carriage.png);
 +
      background-repeat: no-repeat;
 +
      background-size: 100%;
 +
}
 +
.whole-carriage{
 +
display:block;
 +
position:relative;
 +
animation:mymove 5s;
 +
-webkit-animation:mymove 5s; /*Safari and Chrome*/
 
}
 
}
−
</style>
 
  
−
<body>
 
  
−
<!--*******************************************头部代码***************************************-->
+
@keyframes mymove
−
<div class="btn-group"style="border:none;background-color:transparent;width: 80px;height:45px;position:relative;top: 60px;left: 15%;">
+
{
−
                <button id="home"type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="border:none;background-color:transparent;width: 100%;height:45px;" onclick="returnHome()"></button>
+
from {left:0px;}
−
</div>
+
to {left:80%;}
−
<script>
+
−
function returnHome(){
+
−
  window.location.href="https://2018.igem.org/Team:CPU_CHINA"
+
 
}
 
}
−
</script>
 
  
−
<div class="btn-group"  style="border:none;background-color:transparent;width: 100px;height:45px;position:relative;float:right;top: 60px;left: -70%;">
+
@-webkit-keyframes mymove /*Safari and Chrome*/
−
                <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="border:none;background-color:transparent;width: 100%;height:45px;">
+
{
−
                </button>
+
from {left:0px;}
−
                <ul class="dropdown-menu" style="background:url(https://static.igem.org/mediawiki/2018/d/d3/T--CPU_CHINA--dropdown1.png)">
+
to {left:80%;}
−
                    <li style="margin-top:23px">  </li>
+
}
−
                    <li>
+
−
                        <a href="https://2018.igem.org/Team:CPU_CHINA/Background">Background</a>
+
−
                    </li>
+
−
                    <li>
+
−
                        <a href="https://2018.igem.org/Team:CPU_CHINA/Experiments">Experiments</a>
+
−
                    </li>
+
−
                    <li>
+
−
                        <a href="https://2018.igem.org/Team:CPU_CHINA/Results">Results</a>
+
−
                    </li>
+
−
                    <li>
+
−
                        <a href="https://2018.igem.org/Team:CPU_CHINA/Part">Part</a>
+
−
                    </li>
+
−
                    <li>
+
−
                        <a href="https://2018.igem.org/Team:CPU_CHINA/Interlab">Interlab</a>
+
−
                    </li>
+
−
                </ul>
+
−
</div>
+
  
 +
.anniu {
 +
      position: relative;
 +
      top: 42% !important;
 +
      transition: top 0.2s;
 +
      margin: 0 0 0 -50px;
 +
    }
  
−
            <div class="btn-group"  style="border:none;background-color:transparent;width: 190px;height:45px;position:relative;float:right;top: 60px;left: -48%;">
+
    .anniu>img {
−
                <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"style="border:none;background-color:transparent;width:100%;height:45px;">
+
      height: 50px;
−
                </button>
+
    }
−
                <ul class="dropdown-menu" style="background:url(https://static.igem.org/mediawiki/2018/4/4a/T--CPU_CHINA--dropdown2.png)">
+
−
                    <li style="margin-top:23px">  </li>
+
−
                    <li>
+
−
                        <a href="https://2018.igem.org/Team:CPU_CHINA/HP/Silver">Silver HP</a>
+
−
                    </li>
+
−
                    <li>
+
−
                        <a href="https://2018.igem.org/Team:CPU_CHINA/HP/Gold_Integrated">Intergrated and Gold HP</a>
+
−
                    </li>
+
−
                    <li>
+
−
                        <a href="https://2018.igem.org/Team:CPU_CHINA/Engagement">Education and Public Engagement</a>
+
−
                    </li>
+
−
                </ul>
+
−
            </div>
+
  
 +
    .anniu:hover {
 +
      top: 90px;
 +
    }
  
−
            <div class="btn-group"  style="border:none;background-color:transparent;width: 105px;height:45px;position:relative;float:right;top: 60px;left: -16%;">
+
</style>
−
              <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"style="border:none;background-color:transparent;width:100%;height:45px;"></button>
+
−
             
+
−
            </div>
+
  
−
            <div class="btn-group" style="border:none;background-color:transparent;width: 105px;height:45px;position:relative;float:right;top: 60px;left: 3%;">
 
−
                <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="border:none;background-color:transparent;width:100%;height:45px;"></button>
 
−
                <ul class="dropdown-menu" style="background:url(https://static.igem.org/mediawiki/2018/a/a5/T--CPU_CHINA--dropdown3.png)">
 
−
                    <li style="margin-top:23px">  </li>
 
−
                    <li>
 
−
                        <a href="https://2018.igem.org/Team:CPU_CHINA/Notebook/Log">Log</a>
 
−
                    </li>
 
−
                    <li>
 
−
                        <a href="https://2018.igem.org/Team:CPU_CHINA/Safety">Safety</a>
 
−
                    </li>
 
−
            </div>
 
−
 
−
            <div class="btn-group" style="border:none;background-color:transparent;width: 95px;height:45px;position:relative;float:right;top: 60px;left: 20%;">
 
−
                <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="border:none;background-color:transparent;width:100%;height:45px;"></button>
 
−
                <ul class="dropdown-menu" style="background:url(https://static.igem.org/mediawiki/2018/c/c5/T--CPU_CHINA--dropdown4.png)">
 
−
                    <li style="margin-top:23px">  </li>
 
−
                    <li>
 
−
                        <a href="https://2018.igem.org/Team:CPU_CHINA/Team">Team</a>
 
−
                    </li>
 
−
                    <li>
 
−
                        <a href="https://2018.igem.org/Team:CPU_CHINA/Team/Attributions">Attributions</a>
 
−
                    </li>
 
−
                    <li>
 
−
                        <a href="https://2018.igem.org/Team:CPU_CHINA/Team/Collaboration">Collaborations</a>
 
−
                    </li>
 
−
            </div>
 
  
 +
<body background="img/bgd7.png">
  
 
<!-- *******************************************临时文字********************************************-->         
 
<!-- *******************************************临时文字********************************************-->         
−
<div id="title" style="font-size:23px;color:black;text-align:center;position:relative;top:190px;">
+
<!-- <div id="title" style="font-size:23px;color:black;text-align:center;position:relative;top:190px;">
 
A gene therapy strategy to traget hepatocellular carcinoma based on conditional RNA interference
 
A gene therapy strategy to traget hepatocellular carcinoma based on conditional RNA interference
−
</div>
+
</div> -->
  
−
<div style="inline-height:50px;position:relative;color:black;overflow:hidden;font-size;20px;top:230px;" id="introduction">
+
<!-- *****************************************马车动画*********************************************-->
−
     Hepatocellular carcinoma (HCC), also called malignant hepatoma, is one of the deadliest cancers. Through the introduction of a double-stranded RNA to the targeted messenger RNA (mRNA), RNA interference (RNAi) leads to the specific cleavage of the mRNA and efficient silencing of gene expression. Since RNAi could be used to silence genes involved in the development and progression of carcinomas, it has promising therapeutic potential for their treatment. The gene therapy strategy we propose here:
+
<video id="home-video" style="position:absolute;width:70%;margin-left:15%;top:11%;z-index:100;display:none;" controls="controls" loop="false" preload="preload">
−
(1) utilize two cancer-specific promoters (one HCC-specific) to open an AND-gated system to target HCC, the selectivity supposed to be extremely high;
+
     <source src="https://static.igem.org/mediawiki/2018/5/58/T--CPU_CHINA--home-video.mp3" type="video/mp3"/>
−
(2) is dependent on and hence controllable by a low molecular weight compound;
+
    <source src="https://static.igem.org/mediawiki/2018/b/be/T--CPU_CHINA--team-video2.mp4" type="video/mp4"/>
−
(3) has the flexibility to be adapted to target any mRNA and, if there are disease-specific promoters, other diseases.
+
    <source src="https://static.igem.org/mediawiki/2018/f/ff/T--CPU_CHINA--team-video3.webm" type="video/webm"/>
−
</div>
+
    Your browser does not support the video tag.
 +
</video>
 +
<div id="whole-carriage" class="whole-carriage">
 +
<div class="carriage" id="carriage">
 +
</div>
  
−
<div style="position:relative;top:280px;font-size:16px;color:black;" id="href">
+
<div class="wheel" id="wheel1">
−
More relevant background information can be seen in <a href="/Team:CPU_CHINA/Background">Background</a>
+
</div>
−
<div>
+
  
−
<!-- *****************************************马车动画*********************************************-->
+
<div class="wheel" id="wheel2" style="margin-left:26%">
−
<div class="box" id="box">
+
</div>
−
  <div class="carriage">
+
</div>
−
  </div>
+
  
−
  <div class="wheel">
+
<div id="anniu1" class="anniu" style="top:150px;">
−
  </div>
+
      <center>
 +
            <a href="#words">
 +
              <img style="width:20%" src="https://static.igem.org/mediawiki/2018/6/65/T--CPU_CHINA--gold.jpg">
 +
            </a>
 +
      </center>
 
</div>
 
</div>
  
  
 +
<div id="words" style="position:relative;display:none;width:80%;top:43%;margin-left:10%;font-size:2.2rem;line-height:2.5;">
 +
<h1 style="position:relative;width:90%;margin-left:5%;top:28%;text-align:center;">A gene therapy strategy to target hepatocellular carcinoma based on conditional RNA interference</h1>
 +
  <h4 style="font-size:2rem;line-height:2">A microRNA is a short non-coding RNA that has the ability to target mRNA, to mediate its degradation and to regulate gene expression at post-transcriptional level. This post-transcriptional gene silencing (also known as RNA interference) proved widely applicable in gene therapy, albeit with undesirable effects due to low specificity. Mature miRNA is processed form the primary transcript pri-miRNA, therefore an “AND” gate system could be built based on specific structural properties that define pri-miRNAs, in order to improve such specificity. We then also managed to engineer disease-specific promoters and RNA-dependent RNA polymerase to process the logic information. CPU_CHINA focused on hepatocellular carcinoma (HCC) as the disease-therapeutic setting to be applied on with this strategy. But the concept definitely possesses the flexibility that can be discussed over other disease settings and the corresponding necessary gene therapy, which supports a New Application of Genetically Engineered Machine.</h4>   
 +
</div>
 +
 +
<img class="footer" src="https://static.igem.org/mediawiki/2018/c/c9/T--CPU_CHINA--footer2.png" style="width:100%"/>
 
</body>
 
</body>
  
 
<script type="text/javascript">
 
<script type="text/javascript">
 
$(document).ready(function(){
 
$(document).ready(function(){
−
     $("#title").css("width",$(window).width()*0.8+"px");
+
     $("#carriage").css("height",$(document).height()*1.5+"px");
−
    $("#title").css("margin-left",$(window).width()*0.1+"px");
+
−
    $("#introduction").css("width",$(window).width()*0.6+"px");
+
−
    $("#introduction").css("margin-left",$(window).width()*0.2+"px");
+
−
    $("#href").css("margin-left",$(window).width()*0.2+"px");
+
−
 
+
 
     $(".mw-content-ltr").css("width",$(window).width()+"px");
 
     $(".mw-content-ltr").css("width",$(window).width()+"px");
−
     $(".mw-content-ltr").css("height",document.body.scrollHeight+"px");
+
     $(".mw-content-ltr").css("height",document.body.scrollHeight+500+"px");
−
 
+
−
    setAttributions();
+
 
})
 
})
  
Line 227: Line 191:
 
   parent.appendChild(child);
 
   parent.appendChild(child);
 
}
 
}
 +
 +
$(document).ready(function(){
 +
//$(".whole-carriage").css("animation","mymove 7s");
 +
//$(".whole-carriage").css("-webkit-animation","mymove 7s");
 +
  $(".mw-content-ltr").css("height",document.body.scrollHeight+200+"px");
 +
 +
//var e = document.getElementById("whole-carriage");
 +
        //e.addEventListener("animationend", function() {
 +
          $("#whole-carriage").hide();
 +
          $("#home-video").show();
 +
          $("#words").show();
 +
        //});
 +
})
 +
 
</script>
 
</script>
 
</html>
 
</html>

Latest revision as of 04:04, 8 December 2018