Team:NCTU Formosa/source/header-human practice

From 2014.igem.org

(Difference between revisions)
 
(74 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
 +
<head>
 +
<style>
 +
<style>
 +
#seemore1{
 +
cursor:pointer;
 +
}
 +
.letter-container h4 a {
 +
    text-align: center;
 +
    font-size: 130px;
 +
    line-height: 160px;
 +
    display: block;
 +
    padding-bottom: 30px;
 +
    mask: url(https://static.igem.org/mediawiki/2014/d/d0/Mask.png) repeat;
 +
}
 +
.letter-container h4 P span {
 +
    color: #fff;
 +
    opacity: 1;
 +
    text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7);
 +
    transition: all 0.3s linear;
 +
    animation: sharpen 0.9s linear backwards;
 +
}
 +
.letter-container h4 P span:hover{
 +
    text-shadow: 0px 0px 40px #fff;
 +
}
 +
.letter-container h4 P span:nth-child(1) {
 +
    animation-delay: 0s;
 +
}
 +
.letter-container h4 P span:nth-child(2) {
 +
    animation-delay: 0.5s;
 +
}
 +
.letter-container h4 P span:nth-child(3) {
 +
    animation-delay: 1s;
 +
}
 +
 +
@keyframes sharpen {
 +
0% {
 +
    opacity: 0;
 +
    text-shadow: 0px 0px 100px #fff;
 +
    color: transparent;
 +
}
 +
90% {
 +
    opacity: 0.9;
 +
    text-shadow: 0px 0px 10px #fff;
 +
    color: transparent;
 +
}
 +
100% {
 +
    color: #fff;
 +
    opacity: 1;
 +
    text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7);
 +
}
 +
}
 +
</style>
 +
<script type="text/javascript" src="http://tympanus.net/Tutorials/TypographyEffects/js/jquery.lettering.js"></script>
 +
<script type="text/javascript">
 +
$(function() {
 +
$("#letter-container h4 P").lettering();
 +
});
 +
</script></head>
<style>
<style>
-
.imagetion {
 
-
    border: 10px solid #5d9ab9;
 
-
    margin-left: auto;
 
-
    margin-right: auto;
 
-
    width: 90%;
 
-
    background-color: #d0f0f6;
 
-
    text-align: left;
 
-
    padding: 8px;
 
Line 33: Line 83:
   background: #ccc;
   background: #ccc;
}
}
 +
 +
#text.right{
 +
text-align:right;
 +
width:100%;
 +
}
 +
 +
.left.h{
 +
width:30%;
 +
float:left;
 +
}
 +
 +
.left.hh{
 +
width:30%;
 +
float:left;
 +
margin-top:-250pt;
 +
}
 +
Line 39: Line 106:
float:right;
float:right;
}
}
 +
 +
.right70{
 +
width:65%;
 +
float:right;
 +
margin-top:70pt;
 +
}
 +
.right90{
 +
width:65%;
 +
float:right;
 +
margin-top:90pt;
 +
}
 +
.right50{
 +
width:65%;
 +
float:right;
 +
margin-top:50pt;
 +
}
 +
.right20{
 +
width:65%;
 +
float:right;
 +
margin-top:20pt;
 +
}
 +
 +
 +
 +
 +
 +
 +
.left{
.left{
-
width:30%;
+
width:400%;
float:left;
float:left;
}
}
Line 61: Line 156:
text-align:center;
text-align:center;
}
}
-
#seemore1{
+
#seemore1 p{
-
color:blue;
+
color:white;
 +
text-shadow: 0 0 20px red;
text-align:right;
text-align:right;
-
width:100%
+
cursor: pointer;
}
}
-
#seemore2{
+
#seemore2 p{
-
color:blue;
+
color:white;
 +
text-shadow: 0 0 20px red;
text-align:right;
text-align:right;
 +
cursor: pointer;
}
}
-
#seemore3{
+
#seemore3 p{
-
color:blue;
+
color:white;
 +
text-shadow: 0 0 20px red;
text-align:right;
text-align:right;
 +
cursor: pointer;
}
}
-
#seemore4{
+
#seemore4 p{
-
color:blue;
+
color:white;
 +
text-shadow: 0 0 20px red;
text-align:right;
text-align:right;
width:100%
width:100%
display:block;
display:block;
 +
cursor: pointer;
}
}
-
#seemore5{
+
#seemore5 p{
-
color:blue;
+
color:white;
 +
text-shadow: 0 0 20px red;
text-align:right;
text-align:right;
 +
cursor: pointer;
}
}
-
#seemore6{
+
#seemore6 p{
-
color:blue;
+
color:white;
 +
text-shadow: 0 0 20px red;
text-align:right;
text-align:right;
 +
cursor: pointer;
}
}
-
#seemore7{
+
#seemore7 p{
-
color:blue;
+
color:white;
 +
text-shadow: 0 0 20px red;
text-align:right;
text-align:right;
 +
cursor: pointer;
}
}
-
#seemore8{
+
#seemore8 p{
-
color:blue;
+
color:white;
 +
text-shadow: 0 0 20px red;
text-align:right;
text-align:right;
 +
cursor: pointer;
}
}
-
#seemore9{
+
#seemore9 p{
-
color:blue;
+
color:white;
 +
text-shadow: 0 0 20px red;
text-align:right;
text-align:right;
 +
cursor: pointer;
}
}
-
#seemore10{
+
#seemore10 p{
-
color:blue;
+
color:white;
 +
text-shadow: 0 0 20px red;
text-align:right;
text-align:right;
-
}
+
cursor: pointer;
-
.tabimage1 {
+
-
width : 30% ;
+
-
  height: 100%;
+
-
  display :block ;
+
-
  float :left;
+
-
background-image: url('https://static.igem.org/mediawiki/2014/b/b4/WIKI_2.jpg');
+
-
background-size: 150px 150px;
+
-
    background-repeat: no-repeat;
+
}
}
-
.tabimage2 {
 
-
width : 30% ;
 
-
  height: 100%;
 
-
  display :block ;
 
-
  float :left;
 
-
background-image: url('https://static.igem.org/mediawiki/2014/2/22/2014Formosaexchange.jpg');
 
-
background-size: 150px 150px;
 
-
    background-repeat: no-repeat;
 
-
}
 
-
 
-
.tabimage3 {
 
-
width : 30% ;
 
-
  height: 100%;
 
-
  display :block ;
 
-
  float :left;
 
-
background-image: url('https://static.igem.org/mediawiki/2014/6/6f/2014Formosaadvertising.jpg');
 
-
 
-
background-size: 150px 150px;
 
-
    background-repeat: no-repeat;
 
-
}
 
-
 
-
//資料夾
 
-
#abgne-block-20120327 {
 
-
width: 640px;
 
-
margin:0px auto
 
-
}
 
-
#abgne-block-20120327 ul, #abgne-block-20120327 li {
 
-
list-style: none;
 
-
margin: 0;
 
-
padding: 0;
 
-
}
 
-
#abgne-block-20120327 .tabs li {
 
-
float: left;
 
-
margin: 0 0 -1px 5px;
 
-
border: 1px solid #ddd;
 
-
background-image: url('https://static.igem.org/mediawiki/2014/f/fb/Nctu_flie1.jpg');
 
-
height: 32px;
 
-
cursor: pointer;
 
-
border-radius: 5px 5px 0 0;
 
-
}
 
-
#abgne-block-20120327 .tabs li.active {
 
-
background-image: url('https://static.igem.org/mediawiki/2014/f/fb/Nctu_flie1.jpg');
 
-
padding-bottom: 1px;
 
-
border-bottom: none;
 
-
}
 
-
#abgne-block-20120327 .tabs li.hover{
 
-
background-image: url('https://static.igem.org/mediawiki/2014/f/fb/Nctu_flie1.jpg');
 
-
}
 
-
#abgne-block-20120327 .tabs span {
 
-
display: block;
 
-
float: left;
 
-
overflow: hidden;
 
-
padding: 7px 15px 5px 15px;
 
-
}
 
-
#abgne-block-20120327 .tab_container {
 
-
clear: both;
 
-
border: 1px solid #DDD;
 
-
background-image: url('https://static.igem.org/mediawiki/2014/8/8b/Nctu_flie3.jpg');
 
-
background-size: cover;
 
-
background-repeat: no-repeat;
 
-
overflow: hidden;
 
-
border-radius: 5px;
 
-
}
 
-
#abgne-block-20120327 .tab_container ul {
 
-
position: relative;
 
-
height: 320px;
 
-
overflow: hidden;
 
-
}
 
-
#abgne-block-20120327 .tab_container .tab_content li {
 
-
position: absolute;
 
-
width: 610px;
 
-
height: 100%;
 
-
padding: 15px;
 
-
margin-top: 10px;
 
-
background-image: url('https://static.igem.org/mediawiki/2014/8/8b/Nctu_flie3.jpg');
 
-
background-size: cover;
 
-
background-repeat: no-repeat;
 
-
}
 
-
#abgne-block-20120327 .tab_container .tab_content li img {
 
-
display: block;
 
-
float: left;
 
-
margin-right: 15px;
 
-
}
 
-
#abgne-block-20120327 .tab_container .tab_content li .tab_title {
 
-
font-size: 22px;
 
-
line-height: 22px;
 
-
margin: 5px 0 15px;
 
-
}
 
-
///資料夾
 
.effect {
.effect {
Line 221: Line 237:
ol.bjqs-markers li{display:inline;}
ol.bjqs-markers li{display:inline;}
ol.bjqs-markers li a{display:inline-block;}
ol.bjqs-markers li a{display:inline-block;}
-
p.bjqs-caption{display:block;width:96%;margin:0;padding:2%;position:absolute;bottom:0;}
+
p.bjqs-caption{display:block;width:96%;margin:0;padding:2%;position:absolute;bottom:0;color:black;}
#banner-fade,
#banner-fade,
Line 267: Line 283:
}
}
</style>
</style>
-
<script src="https://2014.igem.org/Template:Team:NCTU_Formosa/js/album?action=raw"></script>
+
 
-
<script>
+
<style type="text/css">
-
jQuery(document).ready(function($) {
+
.flex-container a:active,
-
    $('#banner-fade').bjqs({
+
.flexslider a:active,
-
        'height' : 768,
+
.flex-container a:focus,
-
        'width' : 1024,
+
.flexslider a:focus{
-
        'responsive' : true
+
outline:none;
-
     });
+
}
 +
.slides,
 +
.flex-control-nav,
 +
.flex-direction-nav{
 +
margin:0;
 +
padding:0;
 +
list-style:none;
 +
}
 +
.flexslider{
 +
margin:0;
 +
padding:0;
 +
}
 +
.flexslider .slides > li{
 +
display:none;
 +
-webkit-backface-visibility:hidden;
 +
-moz-backface-visibility:hidden;
 +
-ms-backface-visibility:hidden;
 +
-o-backface-visibility:hidden;
 +
backface-visibility:hidden;
 +
}
 +
.flexslider .slides img{
 +
width:100%;
 +
display:block;
 +
}
 +
.flex-pauseplay span{
 +
text-transform:capitalize;
 +
}
 +
.flexslider a.intro {
 +
bottom:0;
 +
color:rgba(0, 0, 0, 0.1);
 +
font-size:14px;
 +
position:absolute;
 +
right:0;
 +
text-decoration:none;
 +
z-index:99999;
 +
}
 +
.slides:after{
 +
content:".";
 +
display:block;
 +
clear:both;
 +
visibility:hidden;
 +
line-height:0;
 +
height:0;
 +
}
 +
html[xmlns] .slides{
 +
display:block;
 +
}
 +
* html .slides{
 +
height:1%;
 +
}
 +
.no-js .slides > li:first-child{
 +
display:block;
 +
}
 +
 
 +
.flexslider{
 +
margin:0 0 60px;
 +
background:#fff;
 +
border:4px solid #fff;
 +
position:relative;
 +
-webkit-border-radius:4px;
 +
-moz-border-radius:4px;
 +
border-radius:4px;
 +
-webkit-box-shadow:0 1px 4px rgba(0,0,0,.2);
 +
-moz-box-shadow:0 1px 4px rgba(0,0,0,.2);
 +
box-shadow:0 1px 4px rgba(0,0,0,.2);
 +
zoom:1;
 +
}
 +
.flex-viewport{
 +
max-height:2000px;
 +
-webkit-transition:all 1s ease;
 +
-moz-transition:all 1s ease;
 +
-o-transition:all 1s ease;
 +
transition:all 1s ease;
 +
}
 +
.loading .flex-viewport{
 +
max-height:300px;
 +
}
 +
.flexslider .slides{
 +
zoom:1;
 +
}
 +
.carousel li{
 +
margin-right:5px;
 +
}
 +
.flexslider li {
 +
border: 0 none !important;
 +
padding: 0 !important;
 +
text-indent: 0 !important;
 +
}
 +
.flex-direction-nav a{
 +
width:30px;
 +
height:30px;
 +
margin:-20px 0 0;
 +
display:block;
 +
background:url(http://project.dimpost.com/flexslider-carousel/images/bg_direction_nav.png) no-repeat 0 0;
 +
position:absolute;
 +
top:50%;
 +
cursor:pointer;
 +
text-indent:-9999px;
 +
opacity:0;
 +
-webkit-transition:all .3s ease;
 +
-moz-transition:all .3s ease;
 +
-o-transition:all .3s ease;
 +
transition:all .3s ease;
 +
}
 +
.flex-direction-nav .flex-next{
 +
background-position:100% 0;
 +
right:-36px;
 +
}
 +
.flex-direction-nav .flex-prev{
 +
left:-36px;
 +
}
 +
.flexslider:hover .flex-next{
 +
opacity:0.8;
 +
right:5px;
 +
}
 +
.flexslider:hover .flex-prev{
 +
opacity:0.8;
 +
left:5px;
 +
}
 +
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover{
 +
opacity:1;
 +
}
 +
.flex-direction-nav .disabled{
 +
opacity:.3!important;
 +
filter:alpha(opacity=30);
 +
cursor:default;
 +
}
 +
.flex-control-nav{
 +
width:100%;
 +
position:absolute;
 +
bottom:-40px;
 +
text-align:center;
 +
}
 +
.flex-control-nav li{
 +
margin:0 6px;
 +
display:inline-block;
 +
zoom:1;
 +
*display:inline;
 +
}
 +
.flex-control-paging li a{
 +
width:11px;
 +
height:11px;
 +
display:block;
 +
background:#666;
 +
background:rgba(0,0,0,0.5);
 +
cursor:pointer;
 +
text-indent:-9999px;
 +
-webkit-border-radius:20px;
 +
-moz-border-radius:20px;
 +
border-radius:20px;
 +
-webkit-box-shadow:inset 0 0 3px rgba(0,0,0,0.3);
 +
-moz-box-shadow:inset 0 0 3px rgba(0,0,0,0.3);
 +
box-shadow:inset 0 0 3px rgba(0,0,0,0.3);
 +
}
 +
.flex-control-paging li a:hover{
 +
background:#333;
 +
background:rgba(0,0,0,0.7);
 +
}
 +
.flex-control-paging li a.flex-active{
 +
background:#000;
 +
background:rgba(0,0,0,0.9);
 +
cursor:default;
 +
}
 +
.flex-control-thumbs{
 +
margin:5px 0 0;
 +
position:static;
 +
overflow:hidden;
 +
}
 +
.flex-control-thumbs li{
 +
width:25%;
 +
float:left;
 +
margin:0;
 +
}
 +
.flex-control-thumbs img{
 +
width:100%;
 +
display:block;
 +
opacity:.7;
 +
cursor:pointer;
 +
}
 +
.flex-control-thumbs img:hover{
 +
opacity:1;
 +
}
 +
.flex-control-thumbs .active{
 +
opacity:1;
 +
cursor:default;
 +
}
 +
</style>
 +
<script type="text/javascript" src="http://project.dimpost.com/flexslider-carousel/jquery.flexslider-min.js"></script>
 +
<script type="text/javascript">
 +
$(document).ready(function(){ 
 +
$(window).load(function() {
 +
  $('.flexslider').flexslider({
 +
    animation: "slide",
 +
    animationLoop: false,
 +
    itemWidth: 210,
 +
     itemMargin: 0,
 +
    minItems: 1,
 +
    maxItems: 1
 +
  });
});
});
-
$(function(){
 
-
// 預設顯示第一個頁籤
 
-
// 並先把 .tabs, .tabs li 及 .tab_content, .tab_content li 等元素取出
 
-
// 同時也要取得 .tab_content 的寬
 
-
var _default = 0,
 
-
$block = $('#abgne-block-20120327'),
 
-
$tabs = $block.find('.tabs'),
 
-
$tabsLi = $tabs.find('li'),
 
-
$tab_content = $block.find('.tab_content'),
 
-
$tab_contentLi = $tab_content.find('li'),
 
-
_width = $tab_content.width();
 
-
 
-
// 當滑鼠移到 .tabs li 上時要套用 .hover 樣式
 
-
// 移出時要移除 .hover 樣式
 
-
$tabsLi.hover(function(){
 
-
var $this = $(this);
 
-
 
-
// 若被滑鼠移上去的 li 是目前顯示的頁籤就不做任何動作
 
-
if($this.hasClass('active')) return;
 
-
 
-
$this.toggleClass('hover');
 
-
}).click(function(){ // 當滑鼠點擊 .tabs li 時
 
-
// 先取出被點擊及目前顯示的頁籤與索引
 
-
var $active = $tabsLi.filter('.active').removeClass('active'),
 
-
_activeIndex = $active.index(), 
 
-
$this = $(this).addClass('active').removeClass('hover'),
 
-
_index = $this.index(),
 
-
isNext = _index > _activeIndex;
 
-
 
-
// 如果被點擊的頁籤就是目前已顯示的頁籤, 則不做任何動作
 
-
if(_activeIndex == _index) return;
 
-
 
-
// 依索引大或小來決定移動的位置
 
-
$tab_contentLi.eq(_activeIndex).stop().animate({
 
-
left: isNext ? -_width : _width
 
-
}).end().eq(_index).css('left', isNext ? _width : -_width).stop().animate({
 
-
left: 0
 
-
});
 
-
});
 
-
 
-
// 先把預設要顯示的頁籤加上 .active 樣式及顯示相對應的內容
 
-
$tabsLi.eq(_default).addClass('active');
 
-
$tab_contentLi.eq(_default).siblings().css({
 
-
left: _width
 
-
});
 
});
});
 +
</script>
 +
 +
 +
<script>
$(document).ready(function(){
$(document).ready(function(){
$(".move1").hide();
$(".move1").hide();
Line 332: Line 505:
$(".move7").hide();
$(".move7").hide();
$(".move8").hide();
$(".move8").hide();
-
$(".move9").hide();$(".move10").hide();
+
$(".move9").hide();
 +
$(".move10").hide();
   $("#seemore1").click(function(){
   $("#seemore1").click(function(){
Line 365: Line 539:
   });
   });
});
});
-
 
+
</script>
</script>

Latest revision as of 22:21, 17 October 2014

Retrieved from "http://2014.igem.org/Team:NCTU_Formosa/source/header-human_practice"