Difference between revisions of "Team:JSNU-China"

 
(32 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
<!DOCTYPE html>
+
{{JSNU_China/homes}}
 
<html lang="en">
 
<html lang="en">
 
<head>
 
<head>
−
<meta charset="UTF-8">
+
    <title>JSNU-China</title>
−
<title>Home</title>
+
    <link href="https://2016.igem.org/Template:JSNU-China/css/homecss?action=raw&ctype=text/css" rel="stylesheet" />
−
<style>
+
</head>
−
body{
+
<body>
−
background-image: url(https://static.igem.org/mediawiki/2016/c/c0/Jsnuchina_body.jpg);
+
−
background-repeat: no-repeat;
+
−
background-size: 100% auto;
+
−
background-attachment: fixed;
+
−
}
+
  
−
/* top******************************************************** */
+
<div id="mini">
 +
<div id="mini-top">
 +
<div class="navlogo"><img src="https://static.igem.org/mediawiki/2016/d/dd/Jsnuchina_img_btn.jpg" width="80%"></div>
 +
<div id="smallnavs">
 +
<div id="onesmallnav">
 +
<a href="https://2016.igem.org/Team:JSNU-China" class="smalltitle"><p >·Home</p></a>
 +
<div id="smallnavselect" ></div>
 +
</div>
 +
<div id="onesmallnav">
 +
<a href="https://2016.igem.org/Team:JSNU-China/Description" class="smalltitle"><p>·Project <b>(Background | Experiment | Future work | Protocal)</b></p></a>
 +
<div id="smallnavselect" class="smallnavmouse"></div>
 +
</div>
 +
<div id="onesmallnav">
 +
<a href="https://2016.igem.org/Team:JSNU-China/Parts" class="smalltitle"><p >· Parts</p></a>
 +
<div id="smallnavselect"></div>
 +
</div>
 +
<div id="onesmallnav">
 +
<a href="https://2016.igem.org/Team:JSNU-China/Team" class="smalltitle"><p>·Team <b>(Members | Attribution | Ntroductors&Advisors | Acknowledgements)</b></p></a>
 +
<div id="smallnavselect"></div>
 +
</div>
 +
<div id="onesmallnav">
 +
<a href="https://2016.igem.org/Team:JSNU-China/Human_Practices" class="smalltitle"><p >·Human Partictice <b>(Sliver | Quick-flashing | Collaboration)</b></p></a>
 +
<div id="smallnavselect"></div>
 +
</div>
 +
<div id="onesmallnav">
 +
<a href="https://2016.igem.org/Team:JSNU-China/Notebook" class="smalltitle"><p>·Notebook</p></a>
 +
<div id="smallnavselect"></div>
 +
</div>
 +
<div id="onesmallnav">
 +
<a href="https://2016.igem.org/Team:JSNU-China/Safety" class="smalltitle"><p >·Safety</p></a>
 +
<div id="smallnavselect"></div>
 +
</div>
 +
</div>
 +
</div>
 +
<div id="mini-content">
 +
<div id="slider">
 +
<div id="oneslider" class="slider1">
  
−
#top{
+
<img src="https://static.igem.org/mediawiki/2016/f/f6/Jsnuchina_sm1.jpg" class="sliderimg">
−
width: 100%;
+
</div>
−
height: auto;
+
<div id="oneslider" class="slider2">
−
float: left;
+
<img src="https://static.igem.org/mediawiki/2016/9/9a/Jsnuchina_sm2.jpg" class="sliderimg">
−
margin-top: 30px;
+
</div>
−
}
+
<div id="oneslider" class="slider3">
 +
<img src="https://static.igem.org/mediawiki/2016/1/11/Jsnuchina_sm3.jpg" class="sliderimg">
 +
</div>
 +
<div id="oneslider" class="slider4">
 +
<img src="https://static.igem.org/mediawiki/2016/8/89/Jsnuchina_sm4.jpg" class="sliderimg">
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
<div id="impress" class="impress-not-supported">
 +
 +
    <div class="fallback-message">
 +
        <p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
 +
        <p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser. Upcoming version 10 of Internet Explorer <i>should</i> also handle it.</p>
 +
    </div>
 +
   
 +
    <div id="step1" class="step start" data-x="0" data-y="0" data-scale="1">
 +
    <div class="warning">
 +
    <img src="https://static.igem.org/mediawiki/2016/b/bd/Jsnuchina_close.png" id="close">
 +
    <img src="https://static.igem.org/mediawiki/2016/f/f4/Jsnuchina_warning.png" width="100%" height="100%">
 +
    </div>
 +
    <a href="#step6"><img src="https://static.igem.org/mediawiki/2016/b/b4/Jsnuchina_click1.png" width="20%" style="position: absolute;left: -20%;bottom:10px;z-index: 9999;cursor: pointer;"></a>
 +
    <a href="#step2"><img src="https://static.igem.org/mediawiki/2016/6/6a/Jsnuchina_click.png" width="20%" style="position: absolute;right: -20%;bottom:10px;z-index: 9999;cursor: pointer;"></a>
 +
    </div>
  
−
#navleft{
+
    <div id="step2" class="step cartoon1" data-x="250" data-y="1400" data-scale="2" data-rotate="90">
−
width: 40%;
+
    <a href="#step1"><img src="https://static.igem.org/mediawiki/2016/b/b4/Jsnuchina_click1.png" width="20%" style="position: absolute;left: -20%;bottom:10px;z-index: 9999;cursor: pointer;"></a>
−
height: 200px;
+
    <a href="#step3"><img src="https://static.igem.org/mediawiki/2016/6/6a/Jsnuchina_click.png" width="20%" style="position: absolute;right: -20%;bottom:10px;z-index: 9999;cursor: pointer;"></a>
−
float: left;
+
    </div>
−
}
+
  
−
#logo{
+
    <div id="step3" class="step cartoon2" data-x="6000" data-y="2500" data-z="3000" data-scale="3" data-rotate="180">
−
z-index: 999999;
+
    <a href="#step2"><img src="https://static.igem.org/mediawiki/2016/b/b4/Jsnuchina_click1.png" width="20%" style="position: absolute;left: -20%;bottom:10px;z-index: 9999;cursor: pointer;"></a>
−
width: 18%;
+
    <a href="#step4"><img src="https://static.igem.org/mediawiki/2016/6/6a/Jsnuchina_click.png" width="20%" style="position: absolute;right: -20%;bottom:10px;z-index: 9999;cursor: pointer;"></a>
−
height: 200px;
+
    </div>
−
float: left;
+
  
−
}
+
    <div id="step4" class="step cartoon3" data-x="6000" data-y="500" data-z="-6000" data-rotate="300" data-scale="1">
−
#logo img{
+
    <a href="#step3"><img src="https://static.igem.org/mediawiki/2016/b/b4/Jsnuchina_click1.png" width="20%" style="position: absolute;left: -20%;bottom:10px;z-index: 9999;cursor: pointer;"></a>
−
width: 80%;
+
    <a href="#step5"><img src="https://static.igem.org/mediawiki/2016/6/6a/Jsnuchina_click.png" width="20%" style="position: absolute;right: -20%;bottom:10px;z-index: 9999;cursor: pointer;"></a>
−
z-index: 9999;
+
</div>
−
}
+
  
−
#navright{
+
<div id="step5" class="step cartoon4" data-x="7500" data-y="-800" data-z="-6400" data-scale="0.5" data-rotate="90" >
−
width: 41%;
+
<a href="#step4"><img src="https://static.igem.org/mediawiki/2016/b/b4/Jsnuchina_click1.png" width="20%" style="position: absolute;left: -20%;bottom:10px;z-index: 9999;cursor: pointer;"></a>
−
height: 200px;
+
<a href="#step6"><img src="https://static.igem.org/mediawiki/2016/6/6a/Jsnuchina_click.png" width="20%" style="position: absolute;right: -20%;bottom:10px;z-index: 9999;cursor: pointer;"></a>
−
float: left;
+
</div>
  
−
}
+
<div id="step6" class="step navigate" data-x="7150" data-y="-800" data-z="-6600" data-scale="1" data-rotate="90" data-rotate-x="0" data-rotate-y="-40">
 +
<a href="#step5"><img src="https://static.igem.org/mediawiki/2016/b/b4/Jsnuchina_click1.png" width="20%" style="position: absolute;left: -20%;bottom:10px;z-index: 9999;cursor: pointer;"></a>
 +
<a href="#step1"><img src="https://static.igem.org/mediawiki/2016/6/6a/Jsnuchina_click.png" width="20%" style="position: absolute;right: -20%;bottom:10px;z-index: 9999;cursor: pointer;"></a>
 +
<div class="onenav">
 +
<a href="https://2016.igem.org/Team:JSNU-China/Description"><img src="https://static.igem.org/mediawiki/2016/b/b2/Jsnuchina_project.png" width="120%">
 +
</a>
 +
<div class="mores">
 +
<a href="https://2016.igem.org/Team:JSNU-China/Description#background"><p>Background</p></a>
 +
<a href="https://2016.igem.org/Team:JSNU-China/Description#experience"><p>Experiment</p></a>
 +
<a href="https://2016.igem.org/Team:JSNU-China/Description#future"><p>Future work</p></a>
 +
<a href="https://2016.igem.org/Team:JSNU-China/Description#protocal"><p>Protocal</p></a>
 +
</div>
 +
</div>
 +
<div class="onenav">
 +
<a href="https://2016.igem.org/Team:JSNU-China/Parts"><img src="https://static.igem.org/mediawiki/2016/9/98/Jsnuchina_parts.png" width="120%"></a>
 +
<div class="mores">
 +
<a href="https://2016.igem.org/Team:JSNU-China/Parts#parts"><p>Parts</p></a>
 +
</div>
 +
</div>
 +
 +
<div class="onenav">
 +
<a href="https://2016.igem.org/Team:JSNU-China/Team"><img src="https://static.igem.org/mediawiki/2016/2/2c/Jsnuchina_team.png" width="120%"></a>
 +
<div class="mores">
 +
<a href="https://2016.igem.org/Team:JSNU-China/Team#member"><p>Members</p></a>
 +
<a href="https://2016.igem.org/Team:JSNU-China/Attributions"><p>Attribution</p></a>
 +
<a href="https://2016.igem.org/Team:JSNU-China/Team#advisors"><p>Introductors&advisors</p></a>
 +
<a href="https://2016.igem.org/Team:JSNU-China/Team#acknow"><p>Acknowledgements</p></a>
  
−
ul.bignav{
+
</div>
−
list-style: none;
+
</div>
−
margin-top:80px;
+
<div class="onenav">
−
width: 100%;
+
<a href="https://2016.igem.org/Team:JSNU-China/Human_Practices"><img src="https://static.igem.org/mediawiki/2016/d/df/Jsnuchina_human.png" width="120%"></a>
−
padding-left: 0px;
+
<div class="mores">
−
}
+
<a href="https://2016.igem.org/Team:JSNU-China/HP/Silver"><p>Sliver</p></a>
 +
<a href="https://2016.igem.org/Team:JSNU-China/HP/Gold"><p>Quick-flashing</p></a>
 +
<a href="https://2016.igem.org/Team:JSNU-China/Collaborations"><p>Collaboration</p></a>
 +
</div>
 +
</div>
 +
<div class="onenav">
 +
<a href="https://2016.igem.org/Team:JSNU-China/Notebook"><img src="https://static.igem.org/mediawiki/2016/8/8d/Jsnuchina_notebook.png" width="120%"></a>
 +
<div class="mores">
 +
<a href="https://2016.igem.org/Team:JSNU-China/Notebook#notebook"><p>Notebook</p></a>
 +
</div>
 +
</div>
 +
<div class="onenav">
 +
<a href="https://2016.igem.org/Team:JSNU-China/Safety"><img src="https://static.igem.org/mediawiki/2016/b/b3/Jsnuchina_safety.png" width="120%"></a>
 +
<div class="mores">
 +
<a href="https://2016.igem.org/Team:JSNU-China/Safety#safety"><p>Safety</p></a>
 +
</div>
 +
</div>
 +
</div>
  
−
ul.bignav >li{
 
−
float: left;
 
−
font-family: 黑体;
 
−
font-size: 1.5em;
 
−
width: 25%;
 
−
text-align: center;
 
−
}
 
  
−
ul.bignav >li.firstli{
+
</div>
−
width: 44%;
+
−
}
+
  
−
ul.bignav >li.nofirstli{
+
<script src="https://2016.igem.org/Team:JSNU-China/jquery?action=raw&ctype=text/javascript"></script>
−
width: 28%;
+
<script src="https://2016.igem.org/Team:JSNU-China/impress?action=raw&ctype=text/javascript"></script>
−
}
+
<script>
 +
impress();
 +
</script>
 +
<script>
  
−
ul.bignav >li>a{
+
$(function(){
−
color: white;
+
$(".navlogo").click(function(){
−
text-decoration: none;
+
$("#smallnavs").toggle()
−
}
+
})
 +
})
 +
$(function(){
 +
$(".smalltitle").on("mouseover",function(){
 +
$(this).siblings("#smallnavselect").addClass("smallnavmouse");
 +
$(this).siblings("#smallnavselect").removeClass("smallnavmouseout");
  
−
ul.bignav >li>a:hover{
+
})
−
color: #333;
+
−
text-decoration: none;
+
−
}
+
  
 +
$(".smalltitle").on("mouseout",function(){
 +
$(this).siblings("#smallnavselect").addClass("smallnavmouseout");
 +
$(this).siblings("#smallnavselect").removeClass("smallnavmouse");
  
−
/* content******************************************************** */
+
})
 +
})
 +
</script>
  
 +
<script>
 +
        $(function(){
 +
        if($(window).width()<992){
 +
            $(".slider1").css("left","0");
 +
            $(".slider2").css("left","100%");
 +
            $(".slider3").css("left","100%");
 +
            $(".slider4").css("left","100%");
  
−
#content{
+
            setTimeout(function(){  
−
width: 86%;
+
                        slidershow(1);
−
float: left;
+
            },3000);
−
margin-left: 7%;
+
−
margin-top: 50px;
+
−
background-color: white;
+
−
border-radius: 1em;
+
−
}
+
  
 +
            function slidershow(num){
 +
               
 +
                number1=parseInt(num);
 +
                number2=number1+1;
 +
               
 +
                if (number2==5) {
 +
                    number2=1;
 +
                }
 +
                $(".slider"+number1).animate({left:"-100%"},1000,function(){
 +
                    $(".slider"+number1).css("left","100%");
 +
                });
  
−
#main{
+
                $(".slider"+number2).animate({left:"0"},1000,function(){
−
width: 100%;
+
                    setTimeout(function(){  
−
height: 1000px;
+
                        slidershow(number2);
−
float: left;
+
                    },3000);
−
}
+
                });
−
#bottomnav{
+
               
−
width: 100%;
+
            }
−
height: 200px;
+
        }
−
float: left;
+
        })
−
background-color: rgb(85,71,42);
+
    </script>
−
}
+
  
  
−
/* footer******************************************************** */
+
<script>
 +
$(function(){
 +
var navwidth=$(".onenav").width();
  
 +
$(".onenav").css("height",navwidth)
  
−
#footer{
+
var bodywidth=$(window).width();
−
width: 100%;
+
if (bodywidth<992) {
−
float: left;
+
$("#impress").css("display","none")
 +
};
 +
})
 +
</script>
  
−
}
+
<script>
 +
$(function(){
 +
$("#close").click(function(){
 +
$(".warning").toggle()
 +
})
 +
})
 +
</script>
  
−
#footer p{
 
−
text-align: center;
 
−
margin-top: 30px;
 
−
font-size: 0.9em;
 
−
color: #333;
 
−
 
−
}
 
−
</style>
 
−
</head>
 
−
<body>
 
−
<div id="top">
 
−
<div id="navleft">
 
−
<ul class="bignav">
 
−
<li><a href="project.html"><img src="images/hand3.png" style="width:20%;">PROJECT</a></li>
 
−
<li><a href="#"><img src="images/hand1.png" style="width:20%;">MODELING</a></li>
 
−
<li><a href="#"><img src="images/hand4.png" style="width:20%;">PARTS</a></li>
 
−
<li><a href="#"><img src="images/hand5.png" style="width:20%;">TEAM</a></li>
 
−
</ul>
 
−
</div>
 
−
<div id="logo">
 
−
<center>
 
−
<a href="home.html"><img src="images/logo.png" alt="logo"></a>
 
−
</center>
 
−
</div>
 
−
<div id="navright">
 
−
<ul class="bignav">
 
−
<li class="firstli"><a href="#"><img src="images/hand9.png" style="width:12%;">HUMAN PARTICTICE</a></li>
 
−
<li class="nofirstli"><a href="#"><img src="images/hand7.png" style="width:16%;">NOTEBOOK</a></li>
 
−
<li class="nofirstli"><a href="#"><img src="images/hand6.png" style="width:16%;">SAFETY</a></li>
 
−
</ul>
 
−
</div>
 
−
</div>
 
−
<div id="content">
 
−
<div id="main"></div>
 
−
<div id="bottomnav"></div>
 
−
</div>
 
−
<div id="footer">
 
−
<p>&copy; Copyright &copy; 2014.Company name All rights reserved.</p>
 
−
</div>
 
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 10:38, 16 October 2016

JSNU-China

Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser. Upcoming version 10 of Internet Explorer should also handle it.