Difference between revisions of "Team:ZJU-China/template test1"

Line 142: Line 142:
 
margin-bottom:-30px;
 
margin-bottom:-30px;
 
padding-top:0px;
 
padding-top:0px;
padding-botton:0px
+
padding-bottom:0px;
}
+
position:absolute;
@media screen and (max-width: 900px) {
+
top:0px;
.xwcms {display:none;}
+
.A {display:none;}
+
.B {display:inline;}
+
}
+
@media screen and (max-width: 900px) {
+
#top1 {display:none;}
+
}
+
#lalala{
+
    font-family:inherit;
+
    padding-top:0px;
+
}
+
#lalala1{
+
    font-family:inherit;
+
    padding-top:6px;
+
}
+
.dropdown ul{
+
    margin: 0px;
+
}
+
 
+
 
+
    </style>
+
<script type="text/javascript">
+
 
+
$(window).scroll(function(){
+
 
+
  var scroll = $(window).scrollTop();
+
     
+
  if (scroll > 0 ) {
+
 
+
    if ($('nav').is(':hover') === false) {
+
      $('nav').addClass('scrolled');
+
      $('nav a').css('padding', '5px 13px 0 13px');
+
      $('nav a').css('height', '29px');
+
      $('nav a#lalala').css('padding-top','0px');
+
      $('nav a#lalala1').css('padding-top','6px');
+
 
+
          }
+
 
+
    $( "nav" ).mouseenter(function() {
+
      $('nav').removeClass('scrolled');
+
      $('nav a').css('height', '40px');
+
      $('nav a').css('padding', '10px 13px 0 13px');
+
      $('nav a#lalala').css('padding-top','10px');
+
      $('nav a#lalala1').css('padding-top','18px');
+
 
+
          });
+
 
+
    $( "nav" ).mouseleave(function() {
+
      $('nav').addClass('scrolled');
+
      $('nav a').css('padding', '5px 13px 0 13px');
+
      $('nav a').css('height', '29px');
+
      $('nav a#lalala').css('padding-top','0px');
+
      $('nav a#lalala1').css('padding-top','6px');
+
     
+
        });
+
 
+
    $( "nav" ).mouseover(function() {
+
      $('nav').removeClass('scrolled');
+
      $('nav a').css('height', '40px');
+
      $('nav a').css('padding', '10px 13px 0 13px');
+
      $('nav a#lalala').css('padding-top','10px');
+
      $('nav a#lalala1').css('padding-top','18px');
+
     
+
 
+
    });
+
 
+
  }
+
 
+
  if (scroll <= 0 ) {
+
    $('nav').removeClass('scrolled');
+
    $('nav a').css('padding', '10px 13px 0 13px');
+
    $('nav a').css('height', '40px');
+
    $('nav a#lalala').css('padding-top','0px');
+
    $('nav a#lalala1').css('padding-top','6px');
+
+
    $( "nav" ).mouseenter(function() {
+
      $('nav').removeClass('scrolled');
+
      $('nav a').css('height', '40px');
+
      $('nav a').css('padding', '10px 13px 0 13px');
+
      $('nav a#lalala').css('padding-top','10px');
+
      $('nav a#lalala1').css('padding-top','18px');
+
    });
+
 
+
    $( "nav" ).mouseleave(function() {
+
      $('nav').removeClass('scrolled');
+
      $('nav a').css('padding', '10px 13px 0 13px');
+
      $('nav a').css('height', '40px');
+
      $('nav a#lalala').css('padding-top','0px');
+
      $('nav a#lalala1').css('padding-top','6px');
+
    });
+
 
+
    $( "nav" ).mouseover(function() {
+
      $('nav').removeClass('scrolled');
+
      $('nav a').css('height', '40px');
+
      $('nav a').css('padding', '10px 13px 0 13px');
+
      $('nav a#lalala').css('padding-top','10px');
+
      $('nav a#lalala1').css('padding-top','18px');
+
    });
+
 
+
  }
+
+
});
+
 
+
</script>
+
 
+
  <head>
+
    <meta charset="utf-8">
+
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
    <meta name="viewport" content="width=device-width, initial-scale=1">
+
    <link rel="stylesheet" href="https://2016.igem.org/Team:ZJU-China/css/Bootstrap?action=raw&ctype=text/css" type="text/css" />
+
    <link rel="stylesheet" href="https://2016.igem.org/Team:ZJU-China/css/animate?action=raw&ctype=text/css" type="text/css" />
+
    <link rel="stylesheet" href="https://2016.igem.org/Team:ZJU-China/css/reset?action=raw&ctype=text/css" type="text/css" />
+
    <link rel="stylesheet" href="https://2016.igem.org/Team:ZJU-China/css/fa?action=raw&ctype=text/css" type="text/css" />
+
<script src="https://2016.igem.org/Team:ZJU-China/js/Bootstrap?action=raw&amp;ctype=text/javascript"></script>
+
<script src="https://2016.igem.org/Team:ZJU-China/js/Bootstrap_jQuery?action=raw&amp;ctype=text/javascript"></script>
+
 
+
 
+
    <!-- Bootstrap -->
+
  </head>
+
<div class="A">
+
  <nav class="navbar navbar-default navbar-fixed-top" id="bar">
+
  <div class="container" style="padding-top:36px;">
+
    <!-- Brand and toggle get grouped for better mobile display -->
+
 
+
 
+
    <!-- Collect the nav links, forms, and other content for toggling -->
+
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+
 
+
      <ul class="nav navbar-nav"> 
+
<li><a href="https://2016.igem.org/Team:ZJU-China" id="lalala">Home</a></li>
+
        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="lalala">Project<span class="caret"></span></a>
+
          <ul class="dropdown-menu">
+
            <li><a href="https://2016.igem.org/Team:ZJU-China/Description">Description</a></li>
+
            <li><a href="https://2016.igem.org/Team:ZJU-China/Design">Design</a></li>
+
            <li><a href="https://2016.igem.org/Team:ZJU-China/Experiments">Experiments</a></li>         
+
            <li><a href="https://2016.igem.org/Team:ZJU-China/Proof">Proof of concept</a></li>
+
            <li role="separator" class="divider"></li>
+
            <li><a href="https://2016.igem.org/Team:ZJU-China/Results">Result</a></li>
+
            <li><a href="https://2016.igem.org/Team:ZJU-China/Notebook">Notebook</a></li>
+
            <li><a href="https://2016.igem.org/Team:ZJU-China/Demonstrate">Demonstrate</a></li>
+
 
+
          </ul>
+
        </li>
+
          <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="lalala">Parts<span class="caret"></span></a>
+
          <ul class="dropdown-menu">
+
            <li><a href="https://2016.igem.org/Team:ZJU-China/Parts">Parts</a></li>
+
            <li><a href="https://2016.igem.org/Team:ZJU-China/Composite_Part">Composite Parts</a></li>
+
            <li><a href="https://2016.igem.org/Team:ZJU-China/Part_Collection">Part collection</a></li>
+
          </ul>
+
        </li>
+
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="lalala">Modeling<span class="caret"></span></a>
+
          <ul class="dropdown-menu">
+
            <li><a href="https://2016.igem.org/Team:ZJU-China/Model">Overview</a></li>
+
            <li><a href="https://2016.igem.org/Team:ZJU-China/Model/first">Light Control</a></li>
+
            <li><a href="https://2016.igem.org/Team:ZJU-China/Model/second">Infiltration</a></li>         
+
            <li><a href="https://2016.igem.org/Team:ZJU-China/Model/third">Oscillation</a></li>
+
</ul>
+
        </li>
+
                <li><a href="https://2016.igem.org/Team:ZJU-China/Hardware" id="lalala">Hardware</a></li>
+
                <li><a href="https://2016.igem.org/Team:ZJU-China/Safety" id="lalala">Safety</a></li>
+
          <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="lalala">Human Practice<span class="caret"></span></a>
+
          <ul class="dropdown-menu">
+
          <li><a href="https://2016.igem.org/Team:ZJU-China/Human_Practices">HP summary</a></li>
+
            <li><a href="https://2016.igem.org/Team:ZJU-China/HP/Silver">Silver</a></li>
+
            <li><a href="https://2016.igem.org/Team:ZJU-China/HP/Gold">Gold</a></li>
+
            <li><a href="https://2016.igem.org/Team:ZJU-China/Engagement">Engagement</a></li>
+
          </ul>
+
        </li>
+
 
+
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="lalala">Team<span class="caret"></span></a>
+
          <ul class="dropdown-menu">
+
            <li><a href="https://2016.igem.org/Team:ZJU-China/Team">Team</a></li>
+
            <li><a href="https://2016.igem.org/Team:ZJU-China/Collaborations">Collaborations</a></li>
+
            <li><a href="https://2016.igem.org/Team:ZJU-China/Attribution">Attributions</a></li>
+
                   
+
</ul>
+
        </li>
+
      </ul>
+
 
+
 
+
 
+
 
+
    </div><!-- /.navbar-collapse -->
+
  </div><!-- /.container-fluid -->
+
</nav>
+
</div>
+
<div class="B">
+
 
+
<nav class="navbar navbar-default" role="navigation" style="background-color:#031924; font-weight:bold;">
+
<div class="container-fluid">
+
<div class="navbar-header">
+
<button type="button" class="navbar-toggle" data-toggle="collapse"
+
data-target="#example-navbar-collapse">
+
<span class="sr-only"></span>
+
<span class="icon-bar"></span>
+
<span class="icon-bar"></span>
+
<span class="icon-bar"></span>
+
</button>
+
<a class="navbar-brand" href="https://2016.igem.org/Team:ZJU-China">ZJU-China</a>
+
</div>
+
<div class="collapse navbar-collapse" id="example-navbar-collapse">
+
<ul class="nav navbar-nav"> 
+
<li><a href="https://2016.igem.org/Team:ZJU-China" id="lalala">Home</a></li>
+
        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="lalala">Project<span class="caret"></span></a>
+
          <ul class="dropdown-menu">
+
            <li><a href="https://2016.igem.org/Team:ZJU-China/Description">Description</a></li>
+
            <li><a href="https://2016.igem.org/Team:ZJU-China/Design">Design</a></li>
+
            <li><a href="https://2016.igem.org/Team:ZJU-China/Experiments">Experiments</a></li>         
+
            <li><a href="https://2016.igem.org/Team:ZJU-China/Proof">Proof of concept</a></li>
+
            <li role="separator" class="divider"></li>
+
            <li><a href="https://2016.igem.org/Team:ZJU-China/Results">Result</a></li>
+
            <li><a href="https://2016.igem.org/Team:ZJU-China/Notebook">Notebook</a></li>
+
            <li><a href="https://2016.igem.org/Team:ZJU-China/Demonstrate">Demonstrate</a></li>
+
 
+
          </ul>
+
        </li>
+
          <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="lalala">Parts<span class="caret"></span></a>
+
          <ul class="dropdown-menu">
+
            <li><a href="https://2016.igem.org/Team:ZJU-China/Parts">Parts</a></li>
+
            <li><a href="https://2016.igem.org/Team:ZJU-China/Composite_Part">Composite Parts</a></li>
+
            <li><a href="https://2016.igem.org/Team:ZJU-China/Part_Collection">Part collection</a></li>
+
          </ul>
+
        </li>
+
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="lalala">Modeling<span class="caret"></span></a>
+
          <ul class="dropdown-menu">
+
            <li><a href="https://2016.igem.org/Team:ZJU-China/Model">Overview</a></li>
+
            <li><a href="https://2016.igem.org/Team:ZJU-China/Model/first">Light Control</a></li>
+
            <li><a href="https://2016.igem.org/Team:ZJU-China/Model/second">Infiltration</a></li>         
+
            <li><a href="https://2016.igem.org/Team:ZJU-China/Model/third">Oscillation</a></li>
+
</ul>
+
        </li>
+
                <li><a href="https://2016.igem.org/Team:ZJU-China/Hardware" id="lalala">Hardware</a></li>
+
                <li><a href="https://2016.igem.org/Team:ZJU-China/Safety" id="lalala">Safety</a></li>
+
          <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="lalala">Human Practice<span class="caret"></span></a>
+
          <ul class="dropdown-menu">
+
          <li><a href="https://2016.igem.org/Team:ZJU-China/Human_Practices">HP summary</a></li>
+
            <li><a href="https://2016.igem.org/Team:ZJU-China/HP/Silver">Silver</a></li>
+
            <li><a href="https://2016.igem.org/Team:ZJU-China/HP/Gold">Gold</a></li>
+
            <li><a href="https://2016.igem.org/Team:ZJU-China/Engagement">Engagement</a></li>
+
          </ul>
+
        </li>
+
 
+
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="lalala">Team<span class="caret"></span></a>
+
          <ul class="dropdown-menu">
+
            <li><a href="https://2016.igem.org/Team:ZJU-China/Team">Team</a></li>
+
            <li><a href="https://2016.igem.org/Team:ZJU-China/Collaborations">Collaborations</a></li>
+
            <li><a href="https://2016.igem.org/Team:ZJU-China/Attribution">Attributions</a></li>
+
                   
+
</ul>
+
        </li>
+
      </ul>
+
</div>
+
</div>
+
</nav>
+
</div>
+
 
+
 
+
<div id="top" class="animated infinite bounce slow"><a href="#"><strong>Back to top</strong></a></div>
+
<div id="top2" class="animated infinite bounce slow"><p><i class="icon-chevon-up-3x"></i></p></div>
+
<div id="top1" class="xwcms"><a href="#"><img src="https://static.igem.org/mediawiki/2016/d/d2/Backtotop.png" id="image"></a></div>
+
 
+
</div>
+
 
+
</html>
+
<html>
+
<style type="text/css">
+
    body {
+
background-color: #fffae6;
+
color: #022634;
+
width:100%;
+
padding-bottom:150px;
+
}
+
#sideMenu, #top_title {
+
        display: none;
+
    }
+
  @font-face{
+
    font-family: 'test';
+
    src:  url(https://static.igem.org/mediawiki/2016/f/fd/Montserrat-Regular.otf);
+
    }
+
@font-face{
+
    font-family: 'fsb';
+
    src:  url('https://static.igem.org/mediawiki/2016/3/3f/Fsb.otf');
+
    }
+
@font-face{
+
    font-family: 'gga';
+
    src:  url('https://static.igem.org/mediawiki/2016/9/94/Gga.otf') format('truetype');
+
    }
+
        @font-face{
+
    font-family: 'spr';
+
    src:  url('https://static.igem.org/mediawiki/2016/b/b7/SansPro-Regular.otf');
+
    }
+
    .color2 {
+
font-family: Verdana, Geneva, sans-serif;
+
color: #660000;
+
font-weight:700;
+
        font-size:40px;
+
}
+
    .templates{
+
font-size: 20px;
+
font-family:Verdana, Geneva, sans-serif;
+
color:#000501;
+
padding-left:100px;
+
        padding-right:100px;
+
}
+
#top.bounce{
+
    -moz-animation-duration: 3s;
+
  -moz-animation-delay: 2s;
+
  -moz-animation-iteration-count: infinite;
+
-webkit-animation-duration: 3s;
+
  -webkit-animation-delay: 2s;
+
  -webkit-animation-iteration-count: infinite;
+
}
+
#top {
+
position: fixed;
+
width: 150px;
+
height: 20px;
+
z-index: 1034;
+
font-size: 15px;
+
font-weight:200;
+
        bottom:120px;
+
        right:0px;
+
        font-family: Verdana, Geneva, sans-serif;
+
}
+
#top1 {
+
position: fixed;
+
width: 100px;
+
height: 100px;
+
z-index: 1033;
+
        bottom:0px;
+
        right:50px;
+
}
+
#top2 {
+
position: fixed;
+
width: 100px;
+
height: 100px;
+
z-index: 1033;
+
        bottom:150px;
+
        right:50px;
+
}
+
#bar{
+
  background-color: #031924;
+
  text-decoration: blink;
+
  font-family: test;
+
  transition: opacity 1s ease;
+
  z-index:100;
+
  height:90px;
+
  line-height:100px;
+
 
+
}
+
.scrolled{
+
  opacity:0.5;
+
  line-height:100px;
+
 
+
}
+
 
+
.xwcms {
+
width: 100px;
+
height: 100px;
+
margin: 0 auto;
+
-webkit-background-size: 100px 100px;
+
-moz-background-size: 100px 100px;
+
background-size: 100px 100px;
+
        background: no-repeat url("https://static.igem.org/mediawiki/2016/d/d2/Backtotop.png") left top;
+
-webkit-border-radius: 50px;
+
border-radius: 50px;
+
-webkit-transition: -webkit-transform 0.5s ease-out;
+
-moz-transition: -moz-transform 0.5s ease-out;
+
-o-transition: -o-transform 0.5s ease-out;
+
-ms-transition: -ms-transform 0.5s ease-out;
+
}
+
.xwcms:hover {
+
-webkit-transform: rotateZ(360deg);
+
-moz-transform: rotateZ(360deg);
+
-o-transform: rotateZ(360deg);
+
-ms-transform: rotateZ(360deg);
+
transform: rotateZ(360deg);
+
}
+
  #bar:hover{
+
      height:120px;
+
      transition: all 1s ease;
+
      opacity: 1;
+
      font-size:20px;
+
      }
+
#image{
+
        border-radius: 50%;
+
margin:0 auto;
+
width:100px;
+
height:100px;
+
border:none;
+
overflow:hidden;
+
  }
+
.color3{
+
    background-color:#031924;
+
    color:white;
+
    font-size:14px;
+
    position:absolute;
+
    width:100%;
+
}
+
.color3 address{
+
    margin-left:20px;
+
    margin-top:20px;
+
    margin-bottom:20px;
+
}
+
.B{ display:none;
+
margin-top:-10px;
+
margin-bottom:-30px;
+
padding-top:0px;
+
padding-botton:0px
+
 
}
 
}
 
@media screen and (max-width: 900px) {
 
@media screen and (max-width: 900px) {

Revision as of 06:51, 19 October 2016