Difference between revisions of "Team:ZJU-China"

Line 41: Line 41:
  
 
<style>
 
<style>
−
 
−
 
−
#bgcolor a:link{color: white !important;}
 
−
#bgcolor a:visited{color: white !important;}
 
−
#bgcolor a:hover{color: rgb(250,226,180) !important;}
 
−
#bgcolor a:active{color: white !important;}
 
−
 
−
#bgcolor #bgcolor2 a:link{color: black !important;}
 
−
#bgcolor #bgcolor2 a:visited{color: black !important;}
 
−
#bgcolor #bgcolor2 a:hover{color: rgb(250,226,180) !important;}
 
−
#bgcolor #bgcolor2 a:active{color: black !important;}
 
−
 
−
 
−
 
−
 
−
 
−
 
 
.container0 {
 
.container0 {
 
     width: 100%;
 
     width: 100%;
Line 69: Line 52:
 
     width: 100%;
 
     width: 100%;
 
     height: 100%;
 
     height: 100%;
−
}
 
−
.sky {
 
−
    height: 200px;
 
−
    background: #8cc9dc;
 
−
}
 
−
.sky-inner {
 
−
    width: 1000px;
 
−
    height: 100%;
 
−
    margin: 0 auto;
 
−
    position: relative;
 
−
    min-height: 200px;
 
−
    overflow: hidden;
 
−
}
 
−
.title {
 
−
    height: 100%;
 
−
    min-height: 200px;
 
−
}
 
−
img.logo {
 
−
    margin-top: 52px;
 
−
    max-width: 197px;
 
−
    max-height: 170px;
 
−
}
 
−
img.rightF{
 
−
top:15%;
 
−
height:50%;
 
−
right:5%;
 
−
}
 
−
img.leftWord{
 
−
    left: 5%;
 
−
    top: 20%;
 
−
height:50%;
 
−
}
 
−
.title img {
 
−
    height: 80%;
 
 
}
 
}
  
−
.bottle {
 
−
    position: absolute;
 
−
    margin-top: 40px;
 
−
    max-width: 95px;
 
−
    max-height: 120px;
 
−
    right: 0;
 
−
    z-index: 2;
 
−
    top: 10%;
 
−
    width: 73.17px;
 
−
    background: url(https://static.igem.org/mediawiki/2019/6/6c/T--Fudan--Home14.png) no-repeat 0 0;
 
−
}
 
−
img.bottleEmpty {
 
−
    margin-top: 40px;
 
−
    max-width: 95px;
 
−
    max-height: 120px;
 
−
    right: 0;
 
−
    z-index: 1;
 
−
}
 
−
.scroll-message {
 
−
    position: absolute;
 
−
    left: 160px;
 
−
    color: #FFFFFF;
 
−
    top: 40px;
 
−
}
 
−
 
−
.scroll-message:after {
 
−
    content: url(https://static.igem.org/mediawiki/2019/a/a3/T--Fudan--Home3.png);
 
−
    position: relative;
 
−
    top: 75px;
 
−
    left: 10px;
 
−
    opacity: 0.8;
 
−
}
 
−
 
−
.ribbon-message {
 
−
    -webkit-box-sizing: border-box;
 
−
    -moz-box-sizing: border-box;
 
−
    -ms-box-sizing: border-box;
 
−
    box-sizing: border-box;
 
−
    background: #f1f1ea;
 
−
    width: 40%;
 
−
    position: absolute;
 
−
    left: 32%;
 
−
    top: 60%;
 
−
    margin-top: -67px;
 
−
    padding: 17px 17px 17px 17px;
 
−
    height: 137px;
 
−
    text-align: center;
 
−
    font-size: 15px;
 
−
    line-height: 22px;
 
−
}
 
−
 
−
.ribbon-message:before {
 
−
    content: url(https://static.igem.org/mediawiki/2019/e/e5/T--Fudan--Home4.png);
 
−
    width: 27px;
 
−
    height: 137px;
 
−
    position: absolute;
 
−
    left: -27px;
 
−
    top: 0;
 
−
}
 
−
 
−
.ribbon-message:after {
 
−
    content: url(https://static.igem.org/mediawiki/2019/d/de/T--Fudan--Home5.png);
 
−
    width: 28px;
 
−
    height: 137px;
 
−
    position: absolute;
 
−
    right: -27px;
 
−
    top: 0;
 
−
}
 
  
 
.bedroom-floor {
 
.bedroom-floor {
Line 179: Line 60:
 
}
 
}
 
.floor-inner {
 
.floor-inner {
 +
    position: absolute;
 +
    vertical-align: middle;
 +
    border: 0;
 +
    -ms-interpolation-mode: bicubic;
 
     width: 1000px;
 
     width: 1000px;
 
     height: 94%;
 
     height: 94%;
Line 186: Line 71:
 
     position: relative;
 
     position: relative;
 
}
 
}
−
img.desk {
+
 
 +
img .fone {
 
     max-width: 1000px;
 
     max-width: 1000px;
 
     max-height: 130px;
 
     max-height: 130px;
−
     height: 60%;
+
     height: 200%;
−
     top: 44%;
+
     top: 20%;
−
    z-index: 1;
+
     left: 30%;
−
     left: 15%;
+
 
      
 
      
 
}
 
}
  
−
img.nipple {
 
−
    max-width: 1200px;
 
−
    max-height: 130px;
 
−
    z-index: 2;
 
−
    width: 65.5%;
 
−
    top: 44%;
 
−
}
 
−
img.nipple2 {
 
−
    max-width: 1000px;
 
−
    max-height: 130px;
 
−
    z-index: 2;
 
−
    left: 20.6%;
 
−
    width: 65.5%;
 
−
    top: 74%;
 
−
}
 
−
img.feeder {
 
−
    max-width: 1000px;
 
−
    max-height: 130px;
 
−
    z-index: 2;
 
−
    width: 65.5%;
 
−
    top: 44%;
 
−
}
 
−
img.feeder2 {
 
−
    max-width: 1000px;
 
−
    max-height: 130px;
 
−
    z-index: 2;
 
−
    width: 65.5%;
 
−
    top: 74%;
 
−
}
 
−
 
−
img.lacZ {
 
−
width: 250px;
 
−
    top: 55%;
 
−
    left: 10%;
 
−
}
 
−
img.lactose {
 
−
width: 500px;
 
−
    top: 10%;
 
−
    left: 2%;
 
−
}
 
−
img.intest {
 
−
    height: 600px;
 
−
    width: 300px;
 
−
    left: 70%;
 
−
    top: 14%;
 
−
}
 
−
img.light{
 
−
height:100%;
 
−
width:100%;
 
−
}
 
−
img.info{
 
−
    top: 30%;
 
−
    height: 45%;
 
−
}
 
−
 
−
img.intest10{
 
−
    height: 80%;
 
−
    top: 14%;
 
−
    left: 65%;
 
−
}
 
−
img.stage{
 
−
    height: 90%;
 
−
    top: 7%;
 
−
    left: 9%;
 
−
}
 
−
img.lastbg{
 
−
    height: 100%;
 
−
    width: 100%;
 
−
}
 
 
.bathroom-wall {
 
.bathroom-wall {
 
     height: 100%;
 
     height: 100%;
Line 282: Line 98:
 
}
 
}
 
.last-wall {
 
.last-wall {
−
     height: 75%;
+
     height: 100%;
 
     background: rgb(255,227,232);
 
     background: rgb(255,227,232);
 
     min-height: 300px;
 
     min-height: 300px;
 
}
 
}
 
.last-floor {
 
.last-floor {
−
     height: 25%;
+
     height: 100%;
 
     background: rgb(27,31,59);
 
     background: rgb(27,31,59);
 
     min-height: 300px;
 
     min-height: 300px;
Line 317: Line 133:
  
 
</style>
 
</style>
 +
  
  
Line 484: Line 301:
  
  
−
<section id="domain-search" style="height:1000px">
+
<section id="domain-search" style="height:80px">
 
</section>
 
</section>
 +
 +
  <div id="skrollr-body">
 +
 +
         
 +
          <div class="container0"
 +
            data-18699="display:block"
 +
            data-18700="display:block"
 +
          >
 +
         
 +
            <!-- Scene 1: Drinking -->
 +
            <div class="scene"
 +
                data-2700="top: 0%"
 +
                data-3700="top: -100%; display: block;"
 +
                data-3701="display: none;"
 +
            >
 +
           
 +
               
 +
               
 +
                <div class="bedroom-floor">
 +
                      <div class="floor-inner">
 +
                        <img src="https://static.igem.org/mediawiki/2019/3/38/T--Fudan--Home70.png"  class="fone"
 +
                     
 +
                        data-="display:none;"
 +
                        data-500="display:block; opacity:0;"
 +
                        data-1000="display:block; opacity:1; "
 +
                        data-3600="display:block; opacity:1; "
 +
                        data-3700="display:block; opacity:0; "
 +
                        >
 +
                       
 +
                       
 +
                    </div>
 +
                 
 +
                   
 +
                </div>
 +
           
 +
            <!-- End Scene 1 -->
 +
            </div>
 +
 +
 +
 +
 +
            <!-- Scene 2: Crying -->
 +
            <div class="scene"
 +
                data-2700="top: 100%;"
 +
                data-3700="top: 0%;"
 +
                data-7700="top: 0%"
 +
                data-8700="top: -100%; display: block;"
 +
                data-8701="display: none;"
 +
            >
 +
         
 +
              <div class="bathroom-wall">
 +
                       
 +
                <img src="https://static.igem.org/mediawiki/2019/3/38/T--Fudan--Home70.png"  class="fone"
 +
                     
 +
                data-="display:none;"
 +
                data-3800="display:block; opacity:0;"
 +
                data-5400="display:block; opacity:1; "
 +
                data-5500="display:block; opacity:1; "
 +
                data-8700="display:block; opacity:0; "
 +
                >
 +
 +
              </div>
 +
           
 +
 +
       
 +
            </div>
 +
 +
 +
            <!-- Scene 3: Nissle helps -->
 +
            <div class="scene"
 +
                data-7700="top: 100%;"
 +
                data-8700="top: 0%;"
 +
                data-10500="top: 0%;"
 +
                data-11500="top: -100%; display: block;"
 +
                data-11501="display: none;"
 +
            >
 +
               
 +
                <div class="wardrobe-wall">
 +
                    <div class="wall-inner">
 +
                     
 +
                    </div>
 +
                </div>
 +
               
 +
 +
           
 +
            </div>
 +
           
 +
       
 +
 +
            <!-- Scene 4: How work -->
 +
          <div class="scene"
 +
                data-10500="top: 100%;"
 +
                data-11500="top: 0%;"
 +
                data-16900="top: 0%;"
 +
                data-17900="top: -100%; display: block;"
 +
                data-17901="display: none;"
 +
          >
 +
             
 +
              <div class="kitchen-wall">
 +
                  <div class="kitchen-wall-inner">
 +
                     
 +
                       
 +
                       
 +
                       
 +
                       
 +
                       
 +
                     
 +
 +
                  </div>
 +
         
 +
              </div>
 +
             
 +
 +
          </div>
 +
 +
 +
          <!-- Scene 5: final -->
 +
          <div class="scene"
 +
                data-16900="top: 100%;"
 +
                data-17900="top: 0%;"
 +
          >
 +
             
 +
              <div class="last-wall">
 +
                  <div class="last-wall-inner">
 +
                     
 +
                  </div>
 +
         
 +
              </div>
 +
           
 +
           
 +
 +
 +
 +
 +
         
 +
 +
 +
 +
         
 +
            </div>
 +
            </div>
 +
</div>
 +
  
 
    
 
    
Line 522: Line 482:
  
  
−
<script src="https://2019.igem.org/wiki/index.php?title=Template:Fudan/skrollr&amp;action=raw&amp;ctype=text/javascript"></script>
+
<script src="https://2020.igem.org/wiki/index.php?title=Template:ZJU-China/JS/indexjs/scroll&amp;action=raw&amp;ctype=text/javascript"></script>
  
  

Revision as of 02:39, 26 October 2020

ZJU-China