Difference between revisions of "Team:ZJU-China"
Line 117: | Line 117: | ||
<div class="row"> | <div class="row"> | ||
<div class="col-md-6"><div class="block2" data-scale="5" > | <div class="col-md-6"><div class="block2" data-scale="5" > | ||
+ | {{:Team:ZJU-China/template/head}} | ||
+ | <html> | ||
+ | <head> | ||
+ | <link rel="stylesheet" type="text/css" href="https://2015.igem.org/Team:ZJU-China/css/home/ZJU-bootstrap.css?action=raw&ctype=text/css" /> | ||
+ | |||
+ | <link rel="stylesheet" type="text/css" href="https://2015.igem.org/Team:ZJU-China/css/home/ZJU-component.css?action=raw&ctype=text/css" /> | ||
+ | |||
+ | <script type="text/javascript" src="https://2015.igem.org/Team:ZJU-China/js/home/ZJU-modernizr.custom.js?action=raw&ctype=text/javascript"></script> | ||
+ | <script type="text/javascript" src="https://2015.igem.org/Team:ZJU-China/js/home/ZJU-classie.js?action=raw&ctype=text/javascript"></script> | ||
+ | <script type="text/javascript" src="https://2015.igem.org/Team:ZJU-China/js/home/ZJU-boxesFx.js?action=raw&ctype=text/javascript"></script> | ||
+ | |||
+ | <script src="js/ZJU-jquery-1.11.0.min.js"></script> | ||
+ | |||
+ | <script type="text/javascript"> | ||
+ | $(document).ready(function(){ | ||
+ | $('a[href^="#"]').on('click',function (e) { | ||
+ | e.preventDefault(); | ||
+ | |||
+ | var target = this.hash, | ||
+ | $target = $(target); | ||
+ | |||
+ | $('html, body').stop().animate({ | ||
+ | 'scrollTop': $target.offset().top | ||
+ | }, 900, 'swing', function () { | ||
+ | window.location.hash = target; | ||
+ | }); | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
+ | </head> | ||
+ | <body style="min-width:1400px;background-image: url(https://static.igem.org/mediawiki/2015/a/ab/ZJU-background.jpg);"> | ||
+ | <!--<body style="overflow:scroll;overflow-y:hidden;min-width:1400px;background-image: url(https://static.igem.org/mediawiki/2015/a/ab/ZJU-background.jpg);">--> | ||
+ | <div class="container1" > | ||
+ | |||
+ | <div id="boxgallery" class="boxgallery" data-effect="effect-1"> | ||
+ | <div class="panel"><img src="https://static.igem.org/mediawiki/2015/d/d1/ZJU-home-2.png" alt="Image 1"/></div> | ||
+ | <div class="panel"><img src="https://static.igem.org/mediawiki/2015/d/d2/ZJU-home1.png" alt="Image 2"/></div> | ||
+ | <div class="panel"><img src="https://static.igem.org/mediawiki/2015/e/e8/ZJU-home-3.png" alt="Image 3"/></div> | ||
+ | <div class="panel"><img src="https://static.igem.org/mediawiki/2015/b/bb/ZJU-home-4.png" /></div> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | <script> | ||
+ | new BoxesFx( document.getElementById( 'boxgallery' ) ); | ||
+ | </script> | ||
+ | |||
+ | <div style="position: relative;top: 80%;text-align: center; width: 100%;height: 0;z-index: 99;"><a href="#intro"><img src="https://static.igem.org/mediawiki/2015/0/09/ZJU_down.png" style="width:10%;height:40px;" /></a></div> | ||
+ | |||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <link rel="stylesheet" type="text/css" href="https://2015.igem.org/Team:ZJU-China/css/home/ZJU-home-Intro.css?action=raw&ctype=text/css" /> | ||
+ | |||
+ | <style type="text/css"> | ||
+ | |||
+ | .divcss5_list_title{border:1px solid #cccccc; padding:1em;} | ||
+ | |||
+ | .divcss5_list_content{padding:1em;} | ||
+ | |||
+ | #tinybox{position:absolute; display:none; padding:10px; background: url(https://static.igem.org/mediawiki/2015/2/2f/Loading3.gif) no-repeat 50% 50%;z-index:2000;background-size:100px 100px;width:1000px;} | ||
+ | |||
+ | #tinymask{position:absolute; display:none; top:0; left:0; height:100%; width:100%; background:rgb(51,51,51); z-index:1500;} | ||
+ | |||
+ | #tinycontent{font-size:1.1em;} | ||
+ | |||
+ | #n{margin:10px auto; width:920px; border:1px solid #CCC;font-size:12px; line-height:30px;} | ||
+ | |||
+ | #n a{ padding:0 4px; color:#333} | ||
+ | |||
+ | #tinycontent img{ | ||
+ | width:1000px; | ||
+ | height:600px; | ||
+ | } | ||
+ | |||
+ | |||
+ | #tinycontent img{ | ||
+ | width:1000px; | ||
+ | height:600px; | ||
+ | } | ||
+ | |||
+ | #tinycontent #content{ | ||
+ | position:absolute; | ||
+ | left:-120%; | ||
+ | |||
+ | } | ||
+ | </style> | ||
+ | |||
+ | |||
+ | <script type="text/javascript" src="https://2015.igem.org/Team:ZJU-China/js/home/ZJU-tinybox.js?action=raw&ctype=text/javascript"></script> | ||
+ | |||
+ | <script type="text/javascript">function getValue1(){ | ||
+ | var task = "<img src='https://static.igem.org/mediawiki/2015/2/25/ZJU-Card1.png' />";TINY.box.show('https://2015.igem.org/Team:ZJU-China/Page-in/test',1,300,150,1)}</script> | ||
+ | <script type="text/javascript">function getValue2(){ | ||
+ | var task = "<img src='https://static.igem.org/mediawiki/2015/8/88/ZJU-Card2.png' />";TINY.box.show(task,0,0,0,1)}</script> | ||
+ | <script type="text/javascript">function getValue3(){ | ||
+ | var task = "<img src='https://static.igem.org/mediawiki/2015/5/5e/ZJU-Card3.png' />";TINY.box.show(task,0,0,0,1)}</script> | ||
+ | <script type="text/javascript">function getValue4(){ | ||
+ | var task = "<img src='https://static.igem.org/mediawiki/2015/a/a3/ZJU-Card4.png' />";TINY.box.show(task,0,0,0,1)}</script> | ||
+ | <script type="text/javascript">function getValue5(){ | ||
+ | var task = "<img src='https://static.igem.org/mediawiki/2015/2/25/ZJU-Card1.png' />";TINY.box.show(task,0,0,0,1)}</script> | ||
+ | <script type="text/javascript">function getValue6(){ | ||
+ | var task = "<img src='https://static.igem.org/mediawiki/2015/8/88/ZJU-Card2.png' />";TINY.box.show(task,0,0,0,1)}</script> | ||
+ | <script type="text/javascript">function getValue7(){ | ||
+ | var task = "<img src='https://static.igem.org/mediawiki/2015/5/5e/ZJU-Card3.png' />";TINY.box.show(task,0,0,0,1)}</script> | ||
+ | <script type="text/javascript">function getValue8(){ | ||
+ | var task = "<img src='https://static.igem.org/mediawiki/2015/a/a3/ZJU-Card4.png' />";TINY.box.show(task,0,0,0,1)}</script> | ||
+ | |||
+ | <div class="wrap" > | ||
+ | <div class="container" id="intro"> | ||
+ | |||
+ | |||
+ | <h2 class="hh2">INTRODUCTION</h2> | ||
+ | <div class="row"> | ||
+ | <div class="col-md-6"><div class="block2" data-scale="5" > | ||
+ | <h2 class="intro-in-h">Why we choose termites?</h2> | ||
+ | <p class="intro-in-p"> | ||
+ | Termites are widely recognized as the 5th pest around the world, | ||
+ | based on its astonishing number and incredible damage towards wood. | ||
+ | Given that a termite weighed 1 gram, | ||
+ | then everyone should own 500 thousand termites! | ||
+ | Owing to their wood-eating habits, | ||
+ | termites are terminators of crops, | ||
+ | trees, buildings, river dams; | ||
+ | and more often, spoil people’s life. | ||
+ | </p> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="col-md-6"><div class="block2" data-scale="0.2" data-skew="90deg,90deg"> | ||
+ | |||
+ | |||
+ | </div></div> | ||
+ | </div> | ||
+ | |||
+ | <div class="row"> | ||
+ | <div class="col-md-6"><div class="block2" data-rotate-y="270deg" data-move-x="-150%"> | ||
+ | |||
+ | |||
+ | </div></div> | ||
+ | <div class="col-md-6"><div class="block2" data-rotate-y="270deg" data-move-x="150%"> | ||
+ | |||
+ | </div></div> | ||
+ | </div> | ||
+ | |||
+ | <div style=";text-align: center; width: 100%;height: 0;z-index: 99;"> | ||
+ | <a href="#globalWrapper" style="margin-right:150px"> | ||
+ | <img src="https://static.igem.org/mediawiki/2015/1/16/ZJU_up.png" style="width:10%;height:40px;" /> | ||
+ | </a> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <div style=";text-align: center; width: 100%;height: 0;z-index: 99;"> | ||
+ | <a href="#Quickview" style="margin-left:150px"> | ||
+ | <img src="https://static.igem.org/mediawiki/2015/0/09/ZJU_down.png" style="width:10%;height:40px;" /> | ||
+ | </a> | ||
+ | |||
+ | </div> | ||
+ | <br> | ||
+ | <br> | ||
+ | <br> | ||
+ | |||
+ | <div class="container" id="Quickview" style="padding-bottom:100px"> | ||
+ | |||
+ | |||
+ | <h2 class="hh2">Quickview</h2> | ||
+ | |||
+ | <div class="row"> | ||
+ | |||
+ | |||
+ | |||
+ | <div class="col-md-3"> | ||
+ | <div class="block" onclick="getValue1()" data-rotate-y="180deg" data-move-z="-200px" data-move-x="-300px" id="block1-1" > | ||
+ | <img style="padding:20%" src="https://static.igem.org/mediawiki/2015/0/08/ZJU-promotion.png"/> | ||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
+ | <div class="col-md-3"> | ||
+ | <div class="block" onclick="getValue2()" data-rotate-x="180deg" data-rotate-y="180deg" data-move-z="-700px" id="block1-2"> | ||
+ | <img style="padding:20%" src="https://static.igem.org/mediawiki/2015/e/ee/ZJU-outreach.png"/> | ||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | <div class="col-md-3"> | ||
+ | <div class="block" onclick="getValue3()" data-rotate-x="180deg" data-rotate-y="45deg" data-move-z="-500px" id="block1-3"> | ||
+ | <img style="padding:20%" src="https://static.igem.org/mediawiki/2015/6/6f/ZJU-modling.png"/> | ||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | <div class="col-md-3"> | ||
+ | <div class="block" onclick="getValue4()" data-rotate-y="180deg" data-move-z="-100px" data-move-x="500px" id="block1-4"> | ||
+ | <img style="padding:20%" src="https://static.igem.org/mediawiki/2015/5/50/ZJU-application.png"/> | ||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | <div class="row"> | ||
+ | |||
+ | |||
+ | <div class="col-md-3"> | ||
+ | <div class="block" onclick="getValue5()" data-rotate-y="270deg" data-move-x="-150%" id="block2-1"> | ||
+ | <img style="padding:20%" src="https://static.igem.org/mediawiki/2015/0/04/ZJU-judge.png"/> | ||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
+ | <div class="col-md-3"> | ||
+ | <div class="block" onclick="getValue6()" data-rotate-y="270deg" data-move-x="150%" id="block2-2"> | ||
+ | <img style="padding:20%" src="https://static.igem.org/mediawiki/2015/d/d7/ZJU-FUTURE.png"/> | ||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | <div class="col-md-3"> | ||
+ | <div class="block" onclick="getValue7()" data-rotate-y="270deg" data-move-x="-150%" id="block2-3"> | ||
+ | <img style="padding:20%" src="https://static.igem.org/mediawiki/2015/f/f3/ZJU-card.png"/> | ||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
+ | <div class="col-md-3"> | ||
+ | <div class="block" onclick="getValue8()" data-rotate-y="270deg" data-move-x="150%" id="block2-4"> | ||
+ | <img style="padding:20%" src="https://static.igem.org/mediawiki/2015/4/43/ZJU-safty.png"/> | ||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <div style=";text-align: center; width: 100%;height: 0;z-index: 99;"> | ||
+ | <a href="#intro" style="margin-right:150px"> | ||
+ | <img src="https://static.igem.org/mediawiki/2015/1/16/ZJU_up.png" style="width:10%;height:40px" /> | ||
+ | </a> | ||
+ | </div> | ||
+ | |||
+ | <div style=";text-align: center; width: 100%;height: 0;z-index: 99;"> | ||
+ | <a href="#globalWrapper" style="margin-left:150px"> | ||
+ | <img src="https://static.igem.org/mediawiki/2015/0/09/ZJU_down.png" style="width:10%;height:40px" /> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | </div> | ||
+ | <script type="text/javascript" src="https://2015.igem.org/Team:ZJU-China/js/home/ZJU-jquery.smoove.min.js?action=raw&ctype=text/javascript"></script> | ||
+ | <script>$('.block').smoove({offset:'40%'});</script> | ||
+ | |||
+ | |||
+ | |||
+ | </body></html> | ||
</div> | </div> |
Revision as of 12:55, 8 September 2015
INTRODUCTION
INTRODUCTION
Why we choose termites?
Termites are widely recognized as the 5th pest around the world, based on its astonishing number and incredible damage towards wood. Given that a termite weighed 1 gram, then everyone should own 500 thousand termites! Owing to their wood-eating habits, termites are terminators of crops, trees, buildings, river dams; and more often, spoil people’s life.
</div> </div>
</div>
<a href="#globalWrapper" style="margin-right:150px"> <img src="" style="width:10%;height:40px;" /> </a>
<a href="#Quickview" style="margin-left:150px"> <img src="" style="width:10%;height:40px;" /> </a>
Quickview
<img style="padding:20%" src=""/>
<img style="padding:20%" src=""/>
<img style="padding:20%" src=""/>
<img style="padding:20%" src=""/>
<img style="padding:20%" src=""/>
<img style="padding:20%" src=""/>
<img style="padding:20%" src=""/>
<img style="padding:20%" src=""/>
<a href="#intro" style="margin-right:150px"> <img src="" style="width:10%;height:40px" /> </a>
<a href="#globalWrapper" style="margin-left:150px"> <img src="" style="width:10%;height:40px" />
<script type="text/javascript" src="https://2015.igem.org/Team:ZJU-China/js/home/ZJU-jquery.smoove.min.js?action=raw&ctype=text/javascript"></script> <script>$('.block').smoove({offset:'40%'});</script>
</body></html>