Difference between revisions of "Team:GZHS-United/Timeline"

(Created page with " <html> <head> <title>Timeline</title> <link href="https://2017.igem.org/Team:GZHS-United/CSS/homestyle?action=raw&ctype=text/css" rel="stylesheet" type="text/css" media="all"...")
 
 
(15 intermediate revisions by 2 users not shown)
Line 3: Line 3:
 
<head>
 
<head>
 
<title>Timeline</title>
 
<title>Timeline</title>
<link href="https://2017.igem.org/Team:GZHS-United/CSS/homestyle?action=raw&ctype=text/css" rel="stylesheet" type="text/css" media="all" />
 
 
<link href="https://2017.igem.org/Team:GZHS-United/CSS/bootstrapmin?action=raw&ctype=text/css" rel="stylesheet" type="text/css"/>
 
<link href="https://2017.igem.org/Team:GZHS-United/CSS/bootstrapmin?action=raw&ctype=text/css" rel="stylesheet" type="text/css"/>
 
<script type="text/javascript" src="https://2017.igem.org/Team:GZHS-United/JS/jquerymin?action=raw&ctype=text/javascript"></script>
 
<script type="text/javascript" src="https://2017.igem.org/Team:GZHS-United/JS/jquerymin?action=raw&ctype=text/javascript"></script>
 
<script type="text/javascript" src="https://2017.igem.org/Team:GZHS-United/JS/bootstrapmin?action=raw&ctype=text/javascript"></script>
 
<script type="text/javascript" src="https://2017.igem.org/Team:GZHS-United/JS/bootstrapmin?action=raw&ctype=text/javascript"></script>
 +
<link href="https://2017.igem.org/Team:GZHS-United/CSS/common?action=raw&ctype=text/css" rel="stylesheet" type="text/css"/>
 
<style>
 
<style>
#sideMenu, #top_title {display:none;}
+
#GZHS_content, #GZHS_content h1{
#content { padding:0px; width:100%; margin-top:-12px; margin-left:0px;}
+
background:#fff;
.mw-content-ltr ul{margin: 0;}
+
.slider{margin-top: -12px; margin-bottom: -2px;}
+
.dropdown_menu {
+
background:#000; filter:alpha(opacity:30); opacity:0.5;
+
 
}
 
}
.dropdown_title {
 
margin:0 10px;
 
}
 
 
 
/* CSS Document */
 
/* CSS Document */
 
body {height:100%;font:13px 'PT Sans', Arial, Tahoma, Verdana, Sans-Serif;color:#626363;background:#fff;}
 
body {height:100%;font:13px 'PT Sans', Arial, Tahoma, Verdana, Sans-Serif;color:#626363;background:#fff;}
Line 36: Line 28:
 
position: relative;
 
position: relative;
 
     margin: 0 auto;
 
     margin: 0 auto;
     width: 244px;
+
     width: 45%;
 
}
 
}
 
.features_block ul li {
 
.features_block ul li {
 
position:relative;
 
position:relative;
 
width:100%;
 
width:100%;
padding:264px 0 100px 0;
+
padding:200px 0 80px 0;
background:url(images/arrow.png) 50% 100% no-repeat;
+
background:url(https://static.igem.org/mediawiki/2017/4/4c/T--GZHS-United--timeline_arrow.png) 50% 100% no-repeat;
 
}
 
}
 
.features_block ul li:last-child {padding-right:0;background:none;}
 
.features_block ul li:last-child {padding-right:0;background:none;}
.features_block ul li h4 {text-align:center;padding:13px 0;position:relative;}
+
.features_block ul li h1 {text-align:center;padding:13px 0;position:relative;}
.features_block ul li h4:before {content:'';display:block;width:100%;height:0;position:absolute;top:25px;left:0;border-top:1px solid #d6d5d5;}
+
.features_block ul li h1:before {content:'';display:block;width:100%;height:0;position:absolute;top:25px;left:0;border-top:1px solid #d6d5d5;}
.features_block ul li h4 span {padding:0 6px;background:#fff;position:relative;z-index:2;}
+
.features_block ul li h1 span {padding:0 6px;background:#fff;position:relative;z-index:2;}
.features_block ul li p {text-align:center;}
+
#GZHS_content h1 {
 +
text-align:center;
 +
font-size: 36px;
 +
}
 +
#GZHS_content .features_block ul li p {
 +
text-align:center;
 +
font-size:1.3em;
 +
text-indent:0em;
 +
}
 
.features_block ul li .circle {
 
.features_block ul li .circle {
 
position:absolute;
 
position:absolute;
 
top:20px;
 
top:20px;
left:7px;
+
left:129px;
 
display:block;
 
display:block;
width:230px;
+
width:173px;
height:230px;
+
height:173px;
background:url(images/circles.png) 0 0 no-repeat;-webkit-transition:all .4s linear;-moz-transition:all .4s linear;-o-transition:all .4s linear;-ms-transition:all .4s linear;transition:all .4s linear;}
+
background:url(https://static.igem.org/mediawiki/2017/9/97/T--GZHS-United--timeline_circles.png) 0 0 no-repeat;-webkit-transition:all .4s linear;-moz-transition:all .4s linear;-o-transition:all .4s linear;-ms-transition:all .4s linear;transition:all .4s linear;}
 
.features_block ul li:hover .circle {top:0;}
 
.features_block ul li:hover .circle {top:0;}
.features_block ul li .circle_link {visibility:hidden;position:absolute;top:0;left:7px;display:block;width:230px;height:230px;color:#fff;text-indent:-999em;z-index:10;}
+
.features_block ul li .circle_link {visibility:hidden;position:absolute;top:0;left:7px;display:block;width:173px;height:173px;color:#fff;text-indent:-999em;z-index:10;}
 
.features_block ul li:hover .circle_link {visibility:visible;}
 
.features_block ul li:hover .circle_link {visibility:visible;}
 
.features_block ul li:after {
 
.features_block ul li:after {
Line 64: Line 64:
 
visibility:hidden;
 
visibility:hidden;
 
position:absolute;
 
position:absolute;
top:250px;
+
top:190px;
left:55px;
+
left:153px;
 
display:block;
 
display:block;
 
width:252px;
 
width:252px;
 
height:24px;
 
height:24px;
background:url(images/shadow.png) 0 0 no-repeat;-webkit-transition:all .4s linear;-moz-transition:all .4s linear;-o-transition:all .4s linear;-ms-transition:all .4s linear;transition:all .4s linear;}
+
background:url(https://static.igem.org/mediawiki/2017/c/c9/T--GZHS-United--timeline_shadow.png) 0 0 no-repeat;-webkit-transition:all .4s linear;-moz-transition:all .4s linear;-o-transition:all .4s linear;-ms-transition:all .4s linear;transition:all .4s linear;}
 
.features_block ul li:hover:after {visibility:visible;}
 
.features_block ul li:hover:after {visibility:visible;}
.features_block ul li.circle1 .circle {background-position:-3px 0;}
+
.features_block ul li.circle1 .circle {background-position:-2px 0;}
.features_block ul li.circle2 .circle {background-position:-265px 0;}
+
.features_block ul li.circle2 .circle {background-position:-199px 0;}
.features_block ul li.circle3 .circle {background-position:-528px 0;}
+
.features_block ul li.circle3 .circle {background-position:-396px 0;}
.features_block ul li.circle4 .circle {background-position:-790px 0;}
+
.features_block ul li.circle4 .circle {background-position:-592px 0;}
.features_block ul li.circle5 .circle {background-position:-1057px 0;}
+
.features_block ul li.circle5 .circle {background-position:-793px 0;}
.features_block ul li.circle6 .circle {background-position:-1323px 0;}
+
.features_block ul li.circle6 .circle {background-position:-991px 0;}
.features_block ul li.circle7 .circle {background-position:-1586px 0;}
+
.features_block ul li.circle7 .circle {background-position:-1189px 0;}
  
 
</style>
 
</style>
Line 84: Line 84:
 
<div class="header-banner" id="head">
 
<div class="header-banner" id="head">
 
<div class="header-bottom">
 
<div class="header-bottom">
<div class="fixed-header">
+
<div class="fixed-header" id="nav">
 
<div class="container">
 
<div class="container">
 
<div class="top-menu">
 
<div class="top-menu">
<span class="menu"><img src="https://static.igem.org/mediawiki/2017/8/83/T--GZHS-United--home_nav.png" alt=""/> </span>
 
 
<ul>
 
<ul>
 
<nav class="cl-effect-5">
 
<nav class="cl-effect-5">
Line 139: Line 138:
 
</li>
 
</li>
 
<li role="presentation">
 
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Improve</a>
+
<a role="menuitem" tabindex="-1" href="https://2017.igem.org/Team:GZHS-United/Contribution">Contribution</a>
</li>
+
<li role="presentation">
+
<a role="menuitem" tabindex="-1" href="#">Contribution</a>
+
 
</li>
 
</li>
 
</ul>
 
</ul>
Line 161: Line 157:
 
</a>
 
</a>
 
<ul class="dropdown-menu dropdown_menu" role="menu" aria-labelledby="dropdownMenu5">
 
<ul class="dropdown-menu dropdown_menu" role="menu" aria-labelledby="dropdownMenu5">
 +
<li role="presentation">
 +
<a role="menuitem" tabindex="-1" href="https://2017.igem.org/Team:GZHS-United/Notebook">Notebook</a>
 +
</li>
 
<li role="presentation">
 
<li role="presentation">
 
<a role="menuitem" tabindex="-1" href="https://2017.igem.org/Team:GZHS-United/Gallery">Gallery</a>
 
<a role="menuitem" tabindex="-1" href="https://2017.igem.org/Team:GZHS-United/Gallery">Gallery</a>
Line 202: Line 201:
 
</li>
 
</li>
 
</nav>
 
</nav>
</ul>
+
</ul>
<!-- script for menu -->
+
<!--script-nav-->
+
<script>
+
$("span.menu").click(function(){
+
$(".top-menu ul").slideToggle("slow" , function(){
+
});
+
});
+
</script>
+
<!-- //script for menu -->
+
 
+
<!-- script-for sticky-nav -->
+
<script>
+
$(document).ready(function() {
+
var navoffeset=$(".header-bottom").offset().top;
+
$(window).scroll(function(){
+
var scrollpos=$(window).scrollTop();
+
if(scrollpos >=navoffeset){
+
$(".header-bottom").addClass("fixed");
+
}else{
+
$(".header-bottom").removeClass("fixed");
+
}
+
});
+
+
});
+
</script>
+
<!-- //script-for sticky-nav -->
+
 
</div>
 
</div>
  
Line 235: Line 208:
 
</div>
 
</div>
 
</div>
 
</div>
<div class="content" id="content">
+
<div class="content" id="GZHS_content">
 
<div class="container">  
 
<div class="container">  
<div class="row">
+
<div class="row" style="padding:60px 0;">
 
<div class="content_block">
 
<div class="content_block">
 
<div class="wraper">
 
<div class="wraper">
Line 245: Line 218:
 
<li class="circle1">
 
<li class="circle1">
 
<a class="circle_link" href="#">&nbsp;</a>
 
<a class="circle_link" href="#">&nbsp;</a>
<h4><span>2016.10</span></h4>
+
<h1><span>2016.10</span></h1>
<p>set up team GZHS-United</p>
+
<p>Set up team GZHS-United</p>
 
</li>
 
</li>
 
<li class="circle2">
 
<li class="circle2">
 
<a class="circle_link" href="#">&nbsp;</a>
 
<a class="circle_link" href="#">&nbsp;</a>
<h4><span>2016.10-2017.6</span></h4>
+
<h1><span>2016.10-2017.6</span></h1>
 
<p>Weekend training course about molecular biology</p>
 
<p>Weekend training course about molecular biology</p>
 
</li>
 
</li>
 
<li class="circle3">
 
<li class="circle3">
 
<a class="circle_link" href="#">&nbsp;</a>
 
<a class="circle_link" href="#">&nbsp;</a>
<h4><span>2017.1.15-2017.2.8</span></h4>
+
<h1><span>2017.1.15-2017.2.8</span></h1>
<p>winter vacation: learning basic lab skill</p>
+
<p>Winter vacation: learning basic lab skill</p>
 
</li>
 
</li>
 
<li class="circle4">
 
<li class="circle4">
 
<a class="circle_link" href="#">&nbsp;</a>
 
<a class="circle_link" href="#">&nbsp;</a>
<h4><span>2017.5</span></h4>
+
<h1><span>2017.5</span></h1>
 
<p>Brain storm Read a lot of papers to decide our project</p>
 
<p>Brain storm Read a lot of papers to decide our project</p>
 
</li>
 
</li>
 
<li class="circle5">
 
<li class="circle5">
 
<a class="circle_link" href="#">&nbsp;</a>
 
<a class="circle_link" href="#">&nbsp;</a>
<h4><span>2017.7.9-2017.8.15</span></h4>
+
<h1><span>2017.7.9-2017.8.15</span></h1>
 
<p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis voluptas uns sadips doloreusi.</p>
 
<p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis voluptas uns sadips doloreusi.</p>
 
</li>
 
</li>
 
<li class="circle6">
 
<li class="circle6">
 
<a class="circle_link" href="#">&nbsp;</a>
 
<a class="circle_link" href="#">&nbsp;</a>
<h4><span>2017.8.24</span></h4>
+
<h1><span>2017.8.24</span></h1>
<p>communicate with team  RDFZ-CHINA </p>
+
<p>Communicate with team  RDFZ-CHINA </p>
 
</li>
 
</li>
 
<li class="circle7">
 
<li class="circle7">
 
<a class="circle_link" href="#">&nbsp;</a>
 
<a class="circle_link" href="#">&nbsp;</a>
<h4><span>2017.9~10</span></h4>
+
<h1><span>2017.9~10</span></h1>
 
<p>Presentation、poster and wiki preparing</p>
 
<p>Presentation、poster and wiki preparing</p>
 
</li>
 
</li>
Line 287: Line 260:
 
</div>
 
</div>
 
</body>
 
</body>
 +
<div id="to_top">
 +
<img src="https://static.igem.org/mediawiki/2017/9/97/T--GZHS-United--toTop_buttom.png" onClick="toTop()"/>
 +
</div>
 +
<div id="last_page">
 +
<a href="https://2017.igem.org/Team:GZHS-United/Gallery"><img src="https://static.igem.org/mediawiki/2017/8/8d/T--GZHS-United--left_buttom.png"/></a>
 +
</div>
 +
<div id="next_page">
 +
<a href="https://2017.igem.org/Team:GZHS-United/InterLab"><img src="https://static.igem.org/mediawiki/2017/b/bb/T--GZHS-United--right_buttom.png"/></a>
 +
</div>
 
<script>
 
<script>
 
$(document).ready(function(){
 
$(document).ready(function(){
Line 300: Line 282:
 
$('.features_block ul li').prepend('<span class="circle"></span>');  
 
$('.features_block ul li').prepend('<span class="circle"></span>');  
 
});
 
});
 +
 +
var timer = null;
 +
function toTop(){
 +
cancelAnimationFrame(timer);
 +
timer = requestAnimationFrame(function fn(){
 +
var oTop = document.body.scrollTop || document.documentElement.scrollTop;
 +
if(oTop > 0){
 +
document.body.scrollTop = document.documentElement.scrollTop = oTop - 50;
 +
timer = requestAnimationFrame(fn);
 +
}else{
 +
cancelAnimationFrame(timer);
 +
}
 +
});
 +
}
 
</script>
 
</script>
 
</html>
 
</html>

Latest revision as of 17:43, 28 October 2017

Timeline

  •  

    2016.10

    Set up team GZHS-United

  •  

    2016.10-2017.6

    Weekend training course about molecular biology

  •  

    2017.1.15-2017.2.8

    Winter vacation: learning basic lab skill

  •  

    2017.5

    Brain storm Read a lot of papers to decide our project

  •  

    2017.7.9-2017.8.15

    Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis voluptas uns sadips doloreusi.

  •  

    2017.8.24

    Communicate with team RDFZ-CHINA

  •  

    2017.9~10

    Presentation、poster and wiki preparing