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

Line 1: Line 1:
 +
<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) {
 +
.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>
 
<html>
 
<style type="text/css">
 
<style type="text/css">

Revision as of 06:48, 19 October 2016