Difference between revisions of "Team:NUDT CHINA"

 
(135 intermediate revisions by the same user not shown)
Line 11: Line 11:
 
var oList = $('Qidilist');
 
var oList = $('Qidilist');
 
var aLiList = getByClass( oList , 'liList' );
 
var aLiList = getByClass( oList , 'liList' );
var aDivList = getByClass( oList , 'divList' );
 
var oHomeContent = $('homeContent');
 
var oHomeContent1 = getByClass(oHomeContent , 'homeContent1')[0];
 
var oHomeContent2 = getByClass(oHomeContent , 'homeContent2')[0];
 
 
var oMenu = $('lay-menu');
 
var oMenu = $('lay-menu');
 
   var oNextBtn=$('next-button');
 
   var oNextBtn=$('next-button');
 
var aLiMenu = oMenu.getElementsByTagName('li');
 
var aLiMenu = oMenu.getElementsByTagName('li');
var Btn1=$('button-after-1');
 
var Btn2=$('button-after-2');
 
var Btn3=$('button-after-3');
 
var Btn4=$('button-after-4');
 
var Btn0=$('button-after-0');
 
 
var iNow = 0;
 
var iNow = 0;
 
var prevIndex = 0;
 
var prevIndex = 0;
 
var iContentHeight = 0;
 
var iContentHeight = 0;
 +
var btn1 = $('btn1');
 +
var btn2 = $('btn2');
 +
var btn3 = $('btn3');
 +
var btn4 = $('btn4');
 
contentAuto();
 
contentAuto();
listContentAuto();
 
bindNav();
 
 
mouseWheel();
 
mouseWheel();
homeContent();
+
bindNav();
 
add1();
 
add1();
 
add2();
 
add2();
Line 40: Line 33:
 
}
 
}
 
function add2() {
 
function add2() {
Btn1.onclick=function () {
+
btn1.onclick=function () {
 
toMove(1);
 
toMove(1);
};
+
iNow=1;
Btn2.onclick=function () {
+
}
 +
btn2.onclick=function () {
 
toMove(2);
 
toMove(2);
};
+
iNow=2;
Btn3.onclick=function () {
+
}
 +
btn3.onclick=function () {
 
toMove(3);
 
toMove(3);
};
+
iNow=3;
Btn4.onclick=function () {
+
}
toMove(4);
+
btn4.onclick=function () {
};
+
Btn0.onclick=function () {
+
 
toMove(0);
 
toMove(0);
};
+
iNow=0;
}
+
function showLoading(){
+
var oSpan = oLoading.getElementsByTagName('span')[0];
+
var aDiv = oLoading.getElementsByTagName('div');
+
oSpan.style.width = '100%';
+
oSpan.addEventListener('webkitTransitionend',spanChange,false);
+
oSpan.addEventListener('transitionend',spanChange,false);
+
function spanChange(){
+
if(oSpan.style.width == '100%'){
+
oSpan.style.display = 'none';
+
aDiv[0].style.height = 0;
+
aDiv[1].style.height = 0;
+
}
+
}
+
aDiv[0].addEventListener('webkitTransitionend',divChange,false);
+
aDiv[0].addEventListener('transitionend',divChange,false);
+
+
function divChange(){
+
oLoading.parentNode.removeChild(oLoading);
+
 
}
 
}
 
 
}
 
}
 
function bindNav(){
 
for(var i=0;i<aLiMenu.length;i++){
 
aLiMenu[i].index = i;
 
aLiMenu[i].onclick = function(){
 
prevIndex = iNow;
 
iNow = this.index;
 
toMove( this.index );
 
};
 
}
 
}
 
function toMove(index){
 
oList.style.top = - index * iContentHeight + 'px';
 
for(var i=0;i<aLiMenu.length;i++){
 
aLiMenu[i].className = '';
 
}
 
aLiMenu[index].className = 'active';
 
 
 
 
}
 
 
function contentAuto(){
 
iContentHeight = viewHeight() ;
 
oContent.style.height = iContentHeight + 'px';
 
for(var i=0;i<aLiList.length;i++){
 
aLiList[i].style.height = iContentHeight + 'px';
 
}
 
oList.style.top = - iNow * iContentHeight + 'px';
 
}
 
 
function listContentAuto(){
 
var mt = (iContentHeight - 520)/2;
 
for(var i=0;i<aDivList.length;i++){
 
aDivList[i].style.marginTop =  mt+'px';
 
}
 
}
 
 
function fnResize(){
 
contentAuto();
 
listContentAuto();
 
}
 
 
 
function mouseWheel(){
 
function mouseWheel(){
 
var bBtn = true;
 
var bBtn = true;
Line 174: Line 104:
 
 
 
}
 
}
+
function showLoading(){
function homeContent(){
+
var oSpan = oLoading.getElementsByTagName('span')[0];
var aLi1 = oHomeContent1.getElementsByTagName('li');
+
var aDiv = oLoading.getElementsByTagName('div');
var aLi2 = oHomeContent2.getElementsByTagName('li');
+
oSpan.style.width = '100%';
var oldIndex = 0;
+
oSpan.addEventListener('webkitTransitionend',spanChange,false);
var iNowHome = 0;
+
oSpan.addEventListener('transitionend',spanChange,false);
+
function spanChange(){
var data = [
+
if(oSpan.style.width == '100%'){
{ text : 'one layer'},
+
oSpan.style.display = 'none';
{ text : 'two layer'},
+
aDiv[0].style.height = 0;
{ text : 'three layer'},
+
aDiv[1].style.height = 0;
{ text : 'four layer'}
+
];
+
create();
+
function create(){
+
for(var i=0;i<data.length;i++){
+
var oLi1 = document.createElement('li');
+
oLi1.innerHTML = '<h1 class="commonTitle">'+(data[i].text)+'</h1>';
+
var oLi2 = document.createElement('li');
+
if(i == 0){
+
oLi1.className = 'active';
+
oLi2.className = 'active';
+
}
+
oHomeContent1.appendChild(oLi1);
+
oHomeContent2.appendChild(oLi2);
+
 
}
 
}
+
}
 +
aDiv[0].addEventListener('webkitTransitionend',divChange,false);
 +
aDiv[0].addEventListener('transitionend',divChange,false);
 +
 +
function divChange(){
 +
oLoading.parentNode.removeChild(oLoading);
 
}
 
}
 
 
for(var i=0;i<aLi2.length;i++){
+
}
aLi2[i].index = i;
+
 
aLi2[i].onclick = function(){
+
function bindNav(){
for(var i=0;i<aLi2.length;i++){
+
for(var i=0;i<aLiMenu.length;i++){
aLi2[i].className = '';
+
aLiMenu[i].index = i;
}
+
aLiMenu[i].onclick = function(){
this.className = 'active';
+
prevIndex = iNow;
+
iNow = this.index;
if( oldIndex < this.index ){  //从左向右
+
toMove( this.index );
aLi1[oldIndex].className = 'leftHide';
+
aLi1[this.index].className = 'rightShow';
+
}
+
else if( oldIndex > this.index ){  //从右向走
+
aLi1[oldIndex].className = 'rightHide';
+
aLi1[this.index].className = 'leftShow';
+
}
+
oldIndex = this.index;
+
iNowHome = this.index;
+
 
};
 
};
 
}
 
}
+
}
var timer = setInterval(change,3000);
+
function toMove(index){
+
oList.style.top = - index * iContentHeight + 'px';
oHomeContent.onmouseover = function(){
+
for(var i=0;i<aLiMenu.length;i++){
clearInterval(timer);
+
aLiMenu[i].className = '';
};
+
+
function change(){
+
iNowHome++;
+
+
if(iNowHome == aLi2.length){
+
iNowHome = 0;
+
}
+
+
for(var i=0;i<aLi2.length;i++){
+
aLi2[i].className = '';
+
}
+
aLi2[iNowHome].className = 'active';
+
aLi1[oldIndex].className = 'leftHide';
+
aLi1[iNowHome].className = 'rightShow';
+
+
oldIndex = iNowHome;
+
+
 
}
 
}
 +
aLiMenu[index].className = 'active';
 
}
 
}
 +
 +
function contentAuto(){
 +
iContentHeight = viewHeight() ;
 +
oContent.style.height = iContentHeight + 'px';
 +
for(var i=0;i<aLiList.length;i++){
 +
aLiList[i].style.height = iContentHeight + 'px';
 +
}
 +
oList.style.top = - iNow * iContentHeight + 'px';
 +
}
 +
 +
function fnResize(){
 +
contentAuto();
 +
}
 +
 
function $(id){
 
function $(id){
 
return document.getElementById(id);
 
return document.getElementById(id);
Line 273: Line 182:
 
</script>
 
</script>
 
<style type="text/css">
 
<style type="text/css">
 +
.button-next{    font-weight: bold;
 +
    font-family: "Lucida Console","Lucida Sans Typewriter",monaco,"Bitstream Vera Sans Mono",monospace;
 +
    position: absolute;
 +
    min-width: 180px;
 +
    min-height: 40px;
 +
  height: 7%;
 +
  width: 13%;
 +
  bottom: 1%;
 +
  background: #fff;
 +
  border: 1px solid #fff;
 +
  border-radius: 2px;
 +
  color: #222;
 +
  text-align: center;
 +
  cursor: pointer;
 +
  transition: .2s ease-in-out;
 +
  transform: translate(-50%, -50%);font-size: large;
 +
}
 +
.button-next:hover {
 +
  background: transparent;
 +
  color: #fff;
 +
}
 +
.myheader{height: 100%; text-align: center; background-color: rgba(255,255,255,0);margin:0 auto;position: relative;}
 
.content{width:100%;}
 
.content{width:100%;}
 
li{ list-style:none;}
 
li{ list-style:none;}
Line 279: Line 210:
 
#lay-menu li{ width:10px; height:10px; border-radius:50%; margin:10px; border:1px black solid; cursor:pointer;}
 
#lay-menu li{ width:10px; height:10px; border-radius:50%; margin:10px; border:1px black solid; cursor:pointer;}
 
#lay-menu li.active{ background:black; cursor:default;}
 
#lay-menu li.active{ background:black; cursor:default;}
#home{ background:url(https://static.igem.org/mediawiki/2017/3/38/Team-NUDT_CHINAimage1.jpg); overflow-x: hidden; top: 0px;height: 100%;width: 100%;}
 
#abstract{ background:url(https://static.igem.org/mediawiki/2017/3/38/Team-NUDT_CHINAimage1.jpg); overflow-x: hidden; top: 0px;height: 100%;width: 100%;}
 
#homeContent .homeContent1{ width:100%; height:100%; position:relative; perspective:800px; transform-style:preserve-3d; -webkit-perspective:800px; -webkit-transform-style:preserve-3d; transition:1s;}
 
#homeContent .homeContent1 li{  width:100%; height:100%; position:absolute; left:0; top:0; background:black; visibility:hidden;}
 
#homeContent .homeContent1 li:nth-of-type(1){background:#dc6c5f;}
 
#homeContent .homeContent1 li:nth-of-type(2){background:#95dc84;}
 
#homeContent .homeContent1 li:nth-of-type(3){background:#64b9d2;}
 
#homeContent .homeContent1 li h1{ color:white; text-align:center; padding-top:200px;}
 
#homeContent .homeContent1 li.active{ z-index:1; visibility:visible;}
 
#homeContent h1{border-bottom: none;}
 
#homeContent .homeContent2{ position:absolute; bottom:0; z-index:2; text-align:center; width:100%; transition:1s;}
 
#homeContent .homeContent2 li{ width:20px; height:20px; border-radius:50%; background:rgba(255,255,255,0.5); display:inline-block; margin:2px; box-shadow:0 0 4px rgba(25,25,25,0.8); cursor:pointer;}
 
#homeContent .homeContent2 li.active{ background:white; cursor:default;}
 
  
#homeContent .homeContent1 .leftShow{ animation:1s homeLeftShow; visibility:visible; z-index:3;-webkit-animation:1s homeLeftShow;}
+
.myheader img{width:100%; margin: 0;position: absolute; top: 50%;transform: translate(0, -50%); left: 0;max-height: 80%;}
#homeContent .homeContent1 .rightHide{ animation:1s homeRightHide; visibility:hidden; -webkit-animation:1s homeRightHide;}
+
.myheader h1{width:100%; margin: 0;position: absolute; top: 40%;transform: translate(0, -50%); left: 0;max-height: 80%;font-size:78px; font-family:"Comic Sans MS",cursive;border-bottom: none;padding-bottom:40px;line-height:normal;}
 
+
.myheader h3{width:100%; margin: 0;position: absolute; top: 60%;transform: translate(0, -50%); left: 0;max-height: 80%;font-size:30px;border-bottom: none;font-weight:initial;font-family: "Big Caslon","Book Antiqua","Palatino Linotype",Georgia,serif;line-height:normal;}
 
+
#homeContent .homeContent1 .leftHide{ animation:1s homeLeftHide; visibility:hidden; -webkit-animation:1s homeLeftHide;}
+
#homeContent .homeContent1 .rightShow{ animation:1s homeRightShow; visibility:visible; z-index:3; -webkit-animation:1s homeRightShow;}
+
</style>
+
<style type="text/css">
+
@keyframes homeLeftHide{
+
0%{ transform:translateZ(0px); visibility:visible;}
+
40%{ transform:translate(-40%,0) scale(0.8) rotateY(20deg);}
+
100%{ transform:translateZ(-200px);}
+
}
+
@keyframes homeRightShow{
+
0%{ transform:translateZ(-200px);}
+
40%{ transform:translate(40%,0) scale(0.8) rotateY(-20deg);}
+
100%{ transform:translateZ(0px);}
+
}
+
 
+
@-webkit-keyframes homeLeftHide{
+
0%{ -webkit-transform:translateZ(0px); visibility:visible;}
+
40%{ -webkit-transform:translate(-40%,0) scale(0.8) rotateY(20deg);}
+
100%{ -webkit-transform:translateZ(-200px);}
+
}
+
@-webkit-keyframes homeRightShow{
+
0%{ -webkit-transform:translateZ(-200px);}
+
40%{ -webkit-transform:translate(40%,0) scale(0.8) rotateY(-20deg);}
+
100%{ -webkit-transform:translateZ(0px);}
+
}
+
 
+
@keyframes homeLeftShow{
+
0%{ transform:translateZ(-200px);}
+
40%{ transform:translate(-40%,0) scale(0.8) rotateY(20deg);}
+
100%{ transform:translateZ(0px);}
+
}
+
@keyframes homeRightHide{
+
0%{ transform:translateZ(0px); visibility:visible;}
+
40%{ transform:translate(40%,0) scale(0.8) rotateY(-20deg);}
+
100%{ transform:translateZ(-200px);}
+
}
+
@-webkit-keyframes homeLeftShow{
+
0%{ -webkit-transform:translateZ(-200px);}
+
40%{ -webkit-transform:translate(-40%,0) scale(0.8) rotateY(20deg);}
+
100%{ -webkit-transform:translateZ(0px);}
+
}
+
@-webkit-keyframes homeRightHide{
+
0%{ -webkit-transform:translateZ(0px); visibility:visible;}
+
40%{ -webkit-transform:translate(40%,0) scale(0.8) rotateY(-20deg);}
+
100%{ -webkit-transform:translateZ(-200px);}
+
}
+
/* home end */
+
</style>
+
 
+
<style type="text/css">
+
 
+
.Myheader{border-bottom: none;}
+
 
#loading div{ width:100%; height:50%; position:absolute; left:0; background:#009ee0; z-index:50; transition:1s;text-align: center;}
 
#loading div{ width:100%; height:50%; position:absolute; left:0; background:#009ee0; z-index:50; transition:1s;text-align: center;}
 
#loading div:nth-of-type(1){ top:0;}
 
#loading div:nth-of-type(1){ top:0;}
 
#loading div:nth-of-type(2){ bottom:0;}
 
#loading div:nth-of-type(2){ bottom:0;}
 
#loading span{ width:0%; height:4px; background:white; position:absolute; left:0; top:50%; margin-top:-2px; z-index:60; transition:.10s;}
 
#loading span{ width:0%; height:4px; background:white; position:absolute; left:0; top:50%; margin-top:-2px; z-index:60; transition:.10s;}
 
 
body {
 
body {
 
     color: #777;
 
     color: #777;
 
}
 
}
 
+
#Qidilist .liList{ width:100%; position:relative;  overflow:hidden;text-align: center;left:-30px;}
 +
.big-bg{position:absolute; top:0;left:0;height:100%;width:100%; z-index:9;}
 
@media (min-width: 92em) {
 
@media (min-width: 92em) {
#Qidilist .liList{ width:100%; position:relative;  overflow:hidden;text-align: center;left:-30px;}
+
   .myheader {
   #Qidilist .divList{ width:1200px; height:510px; margin:0px auto; position:relative;}
+
        width: 85%;}
  .myheader{width: 1050px;}
+
  .Myheader{margin-top:4em;}
+
 
}
 
}
 
 
@media (max-width: 92em) {
 
@media (max-width: 92em) {
    #Qidilist .liList{ width:100%; position:relative;  overflow:hidden;text-align: center;left:-30px;}
+
  .myheader {
    #Qidilist .divList{ width:1000px; height:425px; margin:0px auto; position:relative;}
+
        width: 85%;}
   .myheader{width:800px;}
+
}
  .Myheader{margin-top:1em;}
+
@media (max-width: 45em) {
 +
   .myheader {
 +
        width: 100%;}
 
}
 
}
  
    </style>
+
.next-button {z-index:10;position:absolute;font-weight: bold;
   
+
    font-family: "Lucida Console","Lucida Sans Typewriter",monaco,"Bitstream Vera Sans Mono",monospace;
  <style type="text/css">
+
  top: 40%;
#Qidilist .strory-telling1{margin:0,auto;background:url(https://static.igem.org/mediawiki/2017/a/ad/T-NUDT_CHINA-story1.png) no-repeat;width:80%;height:80%;}
+
  left: 50%;font-size:29px;font-weight:10px;
#Qidilist .strory-telling2{margin:0,auto;background:url(https://static.igem.org/mediawiki/2017/3/35/T-NUDT_CHINA-story2.png) no-repeat;width:80%;height:80%;}
+
   z-index: 10;
#Qidilist .strory-telling3{margin:0,auto;background:url(https://static.igem.org/mediawiki/2017/1/1e/T-NUDT_CHINA-story3.png) no-repeat;width:80%;height:80%;}
+
   padding: 1em 2.5em;
.myheader {
+
   background: #fff;
    margin:0 auto;
+
   border: 1px solid #fff;
    background-color:rgba(255,255,255,0.85);
+
   
+
   
+
}
+
    .myheader h5 {
+
    font-family: 'Monad';
+
line-height:1.3;
+
        margin-bottom:1em;
+
        font-size: 4.2em;
+
        font-weight: 300;
+
    border-bottom:none;
+
    }
+
    .myheader h6 {
+
      line-height: 1.2;
+
      text-align: left;
+
    font-size: 2.3em;
+
    color: grey;
+
      font-weight: 300;
+
      margin-top: 2px;
+
    }
+
.button-after {
+
   display: inline-block;
+
  margin:o auto;
+
   padding: .65em 4em;
+
   background: -webkit-linear-gradient(#fe5f95 , #ff3f7f);
+
  background: linear-gradient(#fe5f95 , #ff3f7f);
+
   border: 1px solid #fe3276;
+
 
   border-radius: 4px;
 
   border-radius: 4px;
   color: #fff;
+
   color: #222;
   text-decoration: none;
+
   font-size: large;
 
   text-align: center;
 
   text-align: center;
   -webkit-transition: .3s ease-in-out;
+
   cursor: pointer;
   transition: .3s ease-in-out;
+
   transition: .2s ease-in-out;
  margin-bottom: 0px;
+
   transform: translate(-50%, -50%);}
}
+
.button-after:hover {
+
  -webkit-animation: bounce 2s ease-in-out;
+
   animation: bounce 2s ease-in-out;
+
}
+
@-webkit-keyframes bounce {
+
  5%  { -webkit-transform: scale(1.1, .8); }
+
  10% { -webkit-transform: scale(.8, 1.1) translateY(-5px); }
+
  15% { -webkit-transform: scale(1, 1); }
+
}
+
@keyframes bounce {
+
  5%  { transform: scale(1.1, .8); }
+
  10% { transform: scale(.8, 1.1) translateY(-5px); }
+
  15% { transform: scale(1, 1); }
+
}</style> 
+
 
+
<style type="text/css">
+
.next-button {
+
  display: inline-block;
+
  width: 120px;
+
  height: 120px;
+
  line-height: 120px;
+
  background: -webkit-linear-gradient(#00000F , #000000);
+
  background: linear-gradient(#00000F , #000000);
+
  border: 1px solid #000000;
+
  border-radius: 50%;
+
  color: white;
+
  text-decoration: none;
+
  text-align: center;
+
}
+
 
.next-button:hover {
 
.next-button:hover {
   -webkit-animation: scale .3s ease-in-out;
+
   background: transparent;
   animation: scale .3s ease-in-out;
+
   color: #fff;
}
+
@-webkit-keyframes scale {
+
  50% { -webkit-transform: scale(1.1); }
+
}
+
@keyframes scale {
+
  50% { transform: scale(1.1); }
+
 
}
 
}
 +
.under-bg{z-index: 0.5;opacity: 1; position: fixed; top: 0; left: 0; width: 100%; height: 100%;}
 
</style>
 
</style>
 +
 
</head>
 
</head>
 +
<img class="under-bg" src="https://static.igem.org/mediawiki/2017/c/cc/T-NUDT_CHINA-MainPage1.jpg" alt="">
 
<div id="loading">
 
<div id="loading">
     <div></div>
+
     <div><img src="https://static.igem.org/mediawiki/2017/1/17/T-NUDT_CHINA-loadingBg3.jpg" alt="" class="big-bg"></div>
         <div>
+
         <div><img src="https://static.igem.org/mediawiki/2017/a/ab/T-NUDT_CHINA-loadingBg4.jpg" alt="" class="big-bg">
 
             <a class="next-button" id="next-button">Get Started!</a>
 
             <a class="next-button" id="next-button">Get Started!</a>
 
         </div>
 
         </div>
Line 471: Line 275:
 
         <div class="pure-menu"><img src="https://static.igem.org/mediawiki/2017/4/4f/T-NUDT_CHINA-icon01.png" width=240px height=190px alt="">
 
         <div class="pure-menu"><img src="https://static.igem.org/mediawiki/2017/4/4f/T-NUDT_CHINA-icon01.png" width=240px height=190px alt="">
 
           <ul class="pure-menu-list">
 
           <ul class="pure-menu-list">
             <li class="pure-menu-item"><a class="pure-menu-heading" href="https://2017.igem.org/Team:NUDT_CHINA" class="pure-menu-link">HOME</a></li>               
+
             <li class="pure-menu-item"><a class="pure-menu-heading" href="https://2017.igem.org/Team:NUDT_CHINA" class="pure-menu-link">HOME</a></li>               
 
            
 
            
 
             <li class="pure-menu-item pure-menu-has-children">
 
             <li class="pure-menu-item pure-menu-has-children">
Line 487: Line 291:
 
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Experiments" class="pure-menu-link">Experiment</a></li>
 
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Experiments" class="pure-menu-link">Experiment</a></li>
 
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Notebook" class="pure-menu-link">Notebook</a></li>
 
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Notebook" class="pure-menu-link">Notebook</a></li>
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/InterLab" class="pure-menu-link">InterLab</a></li>
 
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Contribution" class="pure-menu-link">Contribution</a></li>
 
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Model" class="pure-menu-link">Model</a></li>
 
 
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Results" class="pure-menu-link">Results</a></li>
 
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Results" class="pure-menu-link">Results</a></li>
 
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Demonstrate" class="pure-menu-link">Demonstrate</a></li>
 
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Demonstrate" class="pure-menu-link">Demonstrate</a></li>
 
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Improve" class="pure-menu-link">Improve</a></li>
 
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Improve" class="pure-menu-link">Improve</a></li>
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Attributions" class="pure-menu-link">Attributions</a></li>
 
 
             </ul>
 
             </ul>
 
             </li>
 
             </li>
Line 505: Line 305:
 
             </ul>
 
             </ul>
 
             </li>
 
             </li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Attributions" class="pure-menu-link">Attributions</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/InterLab" class="pure-menu-link">InterLab</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Model" class="pure-menu-link">Model</a></li>
 
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Safety" class="pure-menu-link">SAFETY</a></li>
 
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Safety" class="pure-menu-link">SAFETY</a></li>
 
             <li class="pure-menu-item pure-menu-has-children">
 
             <li class="pure-menu-item pure-menu-has-children">
 
               <a  class="pure-menu-link"onclick="Show('HP_show')">HP</a>
 
               <a  class="pure-menu-link"onclick="Show('HP_show')">HP</a>
 
               <ul class="pure-menu-children" id="HP_show">
 
               <ul class="pure-menu-children" id="HP_show">
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/HP/Silver" class="pure-menu-link">Sliver HP</a></li>
+
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/HP/Silver" class="pure-menu-link">Silver HP</a></li>
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/HP/Gold_Integrated" class="pure-menu-link">Integrated and Gold</a></li>
+
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/HP/Gold_Integrated" class="pure-menu-link">Integrated & Gold</a></li>
 
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Engagement" class="pure-menu-link">Public Engagement</a></li>
 
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Engagement" class="pure-menu-link">Public Engagement</a></li>
 
             </ul>
 
             </ul>
 
             </li>
 
             </li>
            <li class="pure-menu-item pure-menu-has-children">
 
              <a  class="pure-menu-link"onclick="Show('award_show')">AWARDS</a>
 
              <ul class="pure-menu-children" id="award_show">
 
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Applied_Design" class="pure-menu-link">Applied Design</a></li>
 
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Entrepreneurship" class="pure-menu-link">Enterpreneurship</a></li>
 
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Hardware" class="pure-menu-link">Hardware</a></li>
 
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Measurement" class="pure-menu-link">Measurement</a></li>
 
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Model" class="pure-menu-link">Model</a></li>
 
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Plant" class="pure-menu-link">Plant</a></li>
 
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Software" class="pure-menu-link">Software</a></li>
 
            </ul>
 
            </li>
 
               
 
 
             </ul>
 
             </ul>
 
         </div>   
 
         </div>   
Line 533: Line 323:
 
     <ul id="lay-menu">
 
     <ul id="lay-menu">
 
         <li class="active"></li>
 
         <li class="active"></li>
            <li></li>
 
 
             <li></li>
 
             <li></li>
 
             <li></li>
 
             <li></li>
Line 539: Line 328:
 
         </ul>
 
         </ul>
 
     <ul id="Qidilist">
 
     <ul id="Qidilist">
    <li id="abstract" class="liList">
+
      <li id="abstract" class="liList">
           
+
            <div class="myheader"id="main"><h1>MiRNA &nbsp;&nbsp;Locker</h1><h3>A Modularized DNA Assembly As miRNA Inhibitors</h3><button id="btn1" class="button-next">How it works?</button></div>
                <div class="Myheader" id="main" ><div class="myheader">
+
            <h5>NUDT_CHINA</h5>
+
            <h6>MicroRNAs (miRNAs) have been proven to play important roles on post-transcriptionalregulation of the gene expression by direct base pairing to target sites within untranslated regions of messenger RNAs.</h6>
+
            <br><h6>However, the functions of most microRNAs remain to be discovered. Our project attempts to develop a novel sponge for miRNAs, which would knock down the abundance of target miRNA in the cells. </h6>
+
            <br><h6>Thus the sponge will be a miRNA inhibitor to be used to induce miRNA loss-of-function phenotypes or other further applications like small non-coding RNA-based diagnostic and therapeutic applications.</h6>
+
              </div></div>
+
              <a class="button-after" id="button-after-1">How it works?</a>
+
 
             </li>
 
             </li>
 
       <li id="abstract" class="liList">
 
       <li id="abstract" class="liList">
             <div class="strory-telling1"></div>
+
             <div class="myheader"id="main"><img class="strory-telling1" src="https://static.igem.org/mediawiki/2017/a/ad/T-NUDT_CHINA-story1.png" no-repeat; ><button id="btn2" class="button-next">Next</button></div>
              <a class="button-after" id="button-after-2">NEXT</a>  
+
 
             </li>
 
             </li>
 
       <li id="abstract" class="liList">
 
       <li id="abstract" class="liList">
             <div class="strory-telling2"></div>
+
             <div class="myheader"id="main"><img class="strory-telling2" src="https://static.igem.org/mediawiki/2017/3/35/T-NUDT_CHINA-story2.png" no-repeat; ><button id="btn3" class="button-next">Next</button></div>
              <a class="button-after" id="button-after-3">AND</a>  
+
 
             </li>
 
             </li>
 
       <li id="abstract" class="liList">
 
       <li id="abstract" class="liList">
             <div class="strory-telling3"></div>
+
             <div class="myheader"id="main"><img class="strory-telling3" src="https://static.igem.org/mediawiki/2017/1/1e/T-NUDT_CHINA-story3.png" no-repeat; ><button id="btn4" class="button-next">Back</button></div>
              <a class="button-after" id="button-after-4">Our Dailies</a>
+
            </li>
+
    <li id="home" class="liList">
+
            <div id="homeContent" class="divList">
+
                <ul class="homeContent1">
+
                    </ul>
+
                    <ul class="homeContent2">
+
                    </ul>
+
                </div>
+
                <a class="button-after" id="button-after-0">Back</a>
+
 
             </li>
 
             </li>
 +
   
 
         </ul>
 
         </ul>
 
         </div>
 
         </div>

Latest revision as of 02:17, 2 November 2017

Team:NUDT_CHINA