Difference between revisions of "Team:CPU CHINA"

 
(65 intermediate revisions by one other user not shown)
Line 13: Line 13:
 
.btn-group
 
.btn-group
 
{
 
{
−
top:4%;
+
top:2.8%;
 
}
 
}
 +
.dropdown-menu{
 +
background-size:100%!important;
 +
}
 +
 
div
 
div
 
{
 
{
Line 28: Line 32:
 
outline:none;
 
outline:none;
 
}
 
}
−
 
+
.footer{
 +
position: absolute;
 +
top:unset;
 +
bottom: -98px;
 +
}
 
.box{
 
.box{
 
       position: absolute;
 
       position: absolute;
Line 40: Line 48:
  
 
}
 
}
−
  @keyframes mymove {
+
  /*@keyframes mymovewheel {
 
       from {}
 
       from {}
 
       to {
 
       to {
Line 47: Line 55:
 
     }
 
     }
  
−
     @-moz-keyframes mymove {
+
     @-moz-keyframes mymovewheel {
 
       from {}
 
       from {}
 
       to {
 
       to {
Line 54: Line 62:
 
     }
 
     }
  
−
     @-webkit-keyframes mymove {
+
     @-webkit-keyframes mymovewheel {
 
       from {}
 
       from {}
 
       to {
 
       to {
Line 61: Line 69:
 
     }
 
     }
  
−
     @-o-keyframes mymove {
+
     @-o-keyframes mymovewheel {
 
       from {}
 
       from {}
 
       to {
 
       to {
Line 67: Line 75:
 
       }
 
       }
 
     }
 
     }
−
 
+
*/
 
.wheel
 
.wheel
 
{
 
{
 
       position: absolute;
 
       position: absolute;
−
       top: 76%;
+
       top: 1150px;
 
       width: 10%;
 
       width: 10%;
−
       height: 10%;
+
       height: 300px;
−
       left:30%;
+
       left:11%;
−
      animation: rotate 10s infinite;
+
−
      -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-repeat: no-repeat;
 
       background-repeat: no-repeat;
Line 86: Line 91:
 
       position: absolute;
 
       position: absolute;
 
       top: 145px;
 
       top: 145px;
−
       width:80%;
+
       width:60%;
−
      margin-left:10%;
+
  height:1000px;
 
       background: url(https://static.igem.org/mediawiki/2018/4/41/T--CPU_CHINA--background-carriage.png);
 
       background: url(https://static.igem.org/mediawiki/2018/4/41/T--CPU_CHINA--background-carriage.png);
 
       background-repeat: no-repeat;
 
       background-repeat: no-repeat;
−
       background-size: contain;  
+
       background-size: 100%;  
−
      z-index:1
+
}
 +
.whole-carriage{
 +
display:block;
 +
position:relative;
 +
animation:mymove 5s;
 +
-webkit-animation:mymove 5s; /*Safari and Chrome*/
 
}
 
}
−
</style>
 
  
−
<body>
 
  
 +
@keyframes mymove
 +
{
 +
from {left:0px;}
 +
to {left:80%;}
 +
}
  
 +
@-webkit-keyframes mymove /*Safari and Chrome*/
 +
{
 +
from {left:0px;}
 +
to {left:80%;}
 +
}
 +
 +
.anniu {
 +
      position: relative;
 +
      top: 42% !important;
 +
      transition: top 0.2s;
 +
      margin: 0 0 0 -50px;
 +
    }
 +
 +
    .anniu>img {
 +
      height: 50px;
 +
    }
 +
 +
    .anniu:hover {
 +
      top: 90px;
 +
    }
 +
 +
</style>
 +
 +
 +
<body background="img/bgd7.png">
  
 
<!-- *******************************************临时文字********************************************-->         
 
<!-- *******************************************临时文字********************************************-->         
Line 105: Line 143:
  
 
<!-- *****************************************马车动画*********************************************-->
 
<!-- *****************************************马车动画*********************************************-->
−
<div class="carriage" id="carriage">
+
<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">
 +
    <source src="https://static.igem.org/mediawiki/2018/5/58/T--CPU_CHINA--home-video.mp3" type="video/mp3"/>
 +
    <source src="https://static.igem.org/mediawiki/2018/b/be/T--CPU_CHINA--team-video2.mp4" type="video/mp4"/>
 +
    <source src="https://static.igem.org/mediawiki/2018/f/ff/T--CPU_CHINA--team-video3.webm" type="video/webm"/>
 +
    Your browser does not support the video tag.
 +
</video>
 +
<div id="whole-carriage" class="whole-carriage">
 +
<div class="carriage" id="carriage">
 +
</div>
 +
 
 +
<div class="wheel" id="wheel1">
 +
</div>
 +
 
 +
<div class="wheel" id="wheel2" style="margin-left:26%">
 +
</div>
 
</div>
 
</div>
  
−
<div class="wheel" id="wheel1">
+
<div id="anniu1" class="anniu" style="top:150px;">
 +
      <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 class="wheel" id="wheel2" style="margin-left:26%">
+
 
 +
<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>
 
</div>
  
−
<video id="home-video" style="width:44%;margin-left:26%;margin-top:42%;z-index:100;" controls="controls" loop="false" preload="preload">
+
<img class="footer" src="https://static.igem.org/mediawiki/2018/c/c9/T--CPU_CHINA--footer2.png" style="width:100%"/>
−
    <source src="https://static.igem.org/mediawiki/2018/5/58/T--CPU_CHINA--home-video.mp3" type="video/mp3"/>
+
−
    <source src="https://static.igem.org/mediawiki/2018/b/be/T--CPU_CHINA--team-video2.mp4" type="video/mp4"/>
+
−
    <source src="https://static.igem.org/mediawiki/2018/f/ff/T--CPU_CHINA--team-video3.webm" type="video/webm"/>
+
−
    Your browser does not support the video tag.
+
−
</video>
+
 
</body>
 
</body>
  
Line 126: Line 181:
 
     $("#carriage").css("height",$(document).height()*1.5+"px");
 
     $("#carriage").css("height",$(document).height()*1.5+"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");
−
    $("#home-video").play();
+
 
})
 
})
  
Line 137: 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