Team:NCTU Formosa/source/header-human practice

From 2014.igem.org

(Difference between revisions)
 
(126 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
 +
<head>
<style>
<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>
 +
 +
 +
.ot {
 +
  width: 400px;
 +
  height: 400px;
 +
  border: 1px solid #FF6600;
 +
  text-align: center;
 +
  margin: 0 auto;
 +
}
 +
 +
.ot:before {
 +
  content: '';
 +
  display: inline-block;
 +
  vertical-align: middle ;
 +
  height: 100%;
 +
}
 +
 +
.wrapper {
 +
  display: inline-block;
 +
  vertical-align: middle;
 +
  width: 200px;
 +
  height: 200px;
 +
  background: #ccc;
 +
}
 +
 +
#text.right{
 +
text-align:right;
 +
width:100%;
 +
}
 +
 +
.left.h{
 +
width:30%;
 +
float:left;
 +
}
 +
 +
.left.hh{
 +
width:30%;
 +
float:left;
 +
margin-top:-250pt;
 +
}
 +
 +
 +
 +
.right{
 +
width:65%;
 +
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{
 +
width:400%;
 +
float:left;
 +
}
 +
.effect {
 +
  left: 6.25%;
 +
}
 +
#cover{
 +
background-color: #fbfbfb;
 +
}
 +
.toclevel-3 {
 +
display:none;
 +
}
 +
 +
</style>
 +
<style>
 +
.flo1{float:left;}
 +
.flo2{float:right;}
 +
h4.big {
 +
font-size: 150%;
 +
text-align:center;
 +
}
 +
#seemore1 p{
 +
color:white;
 +
text-shadow: 0 0 20px red;
 +
text-align:right;
 +
cursor: pointer;
 +
}
 +
#seemore2 p{
 +
color:white;
 +
text-shadow: 0 0 20px red;
 +
text-align:right;
 +
cursor: pointer;
 +
}
 +
#seemore3 p{
 +
color:white;
 +
text-shadow: 0 0 20px red;
 +
text-align:right;
 +
cursor: pointer;
 +
}
 +
#seemore4 p{
 +
color:white;
 +
text-shadow: 0 0 20px red;
 +
text-align:right;
 +
width:100%
 +
display:block;
 +
cursor: pointer;
 +
}
 +
#seemore5 p{
 +
color:white;
 +
text-shadow: 0 0 20px red;
 +
text-align:right;
 +
cursor: pointer;
 +
}
 +
#seemore6 p{
 +
color:white;
 +
text-shadow: 0 0 20px red;
 +
text-align:right;
 +
cursor: pointer;
 +
}
 +
#seemore7 p{
 +
color:white;
 +
text-shadow: 0 0 20px red;
 +
text-align:right;
 +
cursor: pointer;
 +
}
 +
#seemore8 p{
 +
color:white;
 +
text-shadow: 0 0 20px red;
 +
text-align:right;
 +
cursor: pointer;
 +
}
 +
#seemore9 p{
 +
color:white;
 +
text-shadow: 0 0 20px red;
 +
text-align:right;
 +
cursor: pointer;
 +
}
 +
#seemore10 p{
 +
color:white;
 +
text-shadow: 0 0 20px red;
 +
text-align:right;
 +
cursor: pointer;
 +
}
 +
 +
 +
.effect {
.effect {
  left: 56.25%;
  left: 56.25%;
Line 7: Line 227:
background-color: #fbfbfb;
background-color: #fbfbfb;
}
}
-
#Sidebar{
+
ul.bjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;}
-
　width:120px;
+
li.bjqs-slide{position:absolute; display:none;}
-
　float:left;
+
ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;}
-
　height:280px;
+
ul.bjqs-controls.v-centered li a{position:absolute;}
-
　text-align:center;
+
ul.bjqs-controls.v-centered li.bjqs-next a{right:0;}
-
　line-height:280px;
+
ul.bjqs-controls.v-centered li.bjqs-prev a{left:0;}
-
　font-size:15px;
+
ol.bjqs-markers{list-style: none; padding: 0; margin: 0; width:100%;}
-
　color:#ffffff;
+
ol.bjqs-markers.h-centered{text-align: center;}
-
　font-weight:bold;
+
ol.bjqs-markers li{display:inline;}
-
　background-color:#cecece;
+
ol.bjqs-markers li a{display:inline-block;}
 +
p.bjqs-caption{display:block;width:96%;margin:0;padding:2%;position:absolute;bottom:0;color:black;}
 +
 
 +
#banner-fade,
 +
#banner-slide{
 +
margin-bottom: 60px;
}
}
-
#Body{
+
 
-
　width:240px;
+
.bjqs {
-
　height:280px;
+
-moz-box-shadow: 0 0 5px #ccc;
-
　text-align:center;
+
-webkit-box-shadow: 0 0 5px #ccc;
-
　line-height:280px;
+
box-shadow: 0 0 5px #ccc;
-
　font-size:15px;
+
border: 5px solid #fff;
-
　color:#f9c81e;
+
left: -5px;
-
　font-weight:bold;
+
background: #fff;
-
　background-color:#fffaf3;
+
-
　float:left;
+
}
}
-
.BOX {
+
ul.bjqs-controls.v-centered li a{
 +
display:block;
 +
padding:10px;
 +
background:#fff;
 +
color:#000;
 +
text-decoration: none;
 +
}
-
position:relative;
+
ul.bjqs-controls.v-centered li a:hover{
-
margin: 0px auto;
+
background:#000;
-
  width:auto ;
+
color:#fff;
-
  height:320px;
+
}
}
-
.imageRow {
+
 
-
max-width:800px;
+
ol.bjqs-markers li a{
-
margin:0 auto;
+
padding:5px 10px;
 +
background:#000;
 +
color:#fff;
 +
margin:5px;
 +
text-decoration: none;
 +
}
 +
 
 +
ol.bjqs-markers li.active-marker a,
 +
ol.bjqs-markers li a:hover{
 +
background: #999;
 +
}
 +
 
 +
p.bjqs-caption{
 +
background: rgba(255,255,255,0.5);
 +
}
 +
</style>
 +
 
 +
<style type="text/css">
 +
.flex-container a:active,
 +
.flexslider a:active,
 +
.flex-container a:focus,
 +
.flexslider a:focus{
 +
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;
}
}
-
#imgshow, #imgshow2 {
+
.slides:after{
-
padding-top:15px;
+
content:".";
 +
display:block;
clear:both;
clear:both;
 +
visibility:hidden;
 +
line-height:0;
 +
height:0;
}
}
-
.imageRow .single {
+
html[xmlns] .slides{
-
  float: left;
+
display:block;
}
}
-
.imageRow .single a {
+
* html .slides{
-
  float: left;
+
height:1%;
-
  display: block;
+
-
  background: #eee;
+
-
  padding: 7px;
+
-
  line-height: 1em;
+
-
  -webkit-border-radius: 4px;
+
-
  -moz-border-radius: 4px;
+
-
  -ms-border-radius: 4px;
+
-
  -o-border-radius: 4px;
+
-
  border-radius: 4px;
+
-
  -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
+
-
  -moz-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
+
-
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
+
-
  margin-right: 40px;
+
-
  -webkit-transition: all 0.2s ease-out;
+
-
  -moz-transition: all 0.2s ease-out;
+
-
  -ms-transition: all 0.2s ease-out;
+
-
  -o-transition: all 0.2s ease-out;
+
-
  transition: all 0.2s ease-out;
+
}
}
-
.imageRow .set {
+
.no-js .slides > li:first-child{
-
  float: left;
+
display:block;
-
  background: #efefef;
+
-
  -webkit-border-radius: 4px;
+
-
  -moz-border-radius: 4px;
+
-
  -ms-border-radius: 4px;
+
-
  -o-border-radius: 4px;
+
-
  border-radius: 4px;
+
-
  -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
+
-
  -moz-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
+
-
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
+
-
  -webkit-transition: all 0.2s ease-out;
+
-
  -moz-transition: all 0.2s ease-out;
+
-
  -ms-transition: all 0.2s ease-out;
+
-
  -o-transition: all 0.2s ease-out;
+
-
  transition: all 0.2s ease-out;
+
}
}
-
.imageRow .set .single {
+
 
-
width:25%;
+
.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;
}
}
-
.onlythree .set .single {
+
.flex-viewport{
-
width:33.33%;
+
max-height:2000px;
 +
-webkit-transition:all 1s ease;
 +
-moz-transition:all 1s ease;
 +
-o-transition:all 1s ease;
 +
transition:all 1s ease;
}
}
-
.imageRow .set .single img {
+
.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%;
width:100%;
 +
position:absolute;
 +
bottom:-40px;
 +
text-align:center;
}
}
-
.imageRow .set .single a {
+
.flex-control-nav li{
-
width:90%;
+
margin:0 6px;
-
  background: none;
+
display:inline-block;
-
  -webkit-border-radius: 0;
+
zoom:1;
-
  -moz-border-radius: 0;
+
*display:inline;
-
  -ms-border-radius: 0;
+
-
  -o-border-radius: 0;
+
-
  border-radius: 0;
+
-
  -webkit-box-shadow: none;
+
-
  -moz-box-shadow: none;
+
-
  box-shadow: none;
+
-
  margin-right: 0;
+
}
}
-
.imageRow .set .single a:hover {
+
.flex-control-paging li a{
-
  background-color: rgba(173, 255, 47, 0.75);
+
width:11px;
-
  -webkit-box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.5);
+
height:11px;
-
  -moz-box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.5);
+
display:block;
-
  box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.5);
+
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>
</style>
-
<script src="https://2013.igem.org/Template:Team:NCTU_Formosa/js/vidfit?action=raw"></script>
+
<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
 +
  });
 +
});
 +
});
 +
</script>
 +
 
 +
 
 +
 
<script>
<script>
-
  $(document).ready(function(){
+
$(document).ready(function(){
-
     $(".videow").fitVids();
+
$(".move1").hide();
-
$('a.image').click(function() { return false; });
+
$(".move2").hide();
-
$('img').each(function(){ $(this).removeAttr('height');$(this).removeAttr('width'); });
+
$(".move3").hide();
 +
$(".move4").hide();
 +
$(".move5").hide();
 +
$(".move6").hide();
 +
$(".move7").hide();
 +
$(".move8").hide();
 +
$(".move9").hide();
 +
$(".move10").hide();
 +
 
 +
  $("#seemore1").click(function(){
 +
     $(".move1").slideToggle();
 +
  });
 +
$("#seemore2").click(function(){
 +
    $(".move2").slideToggle();
 +
  });
 +
$("#seemore3").click(function(){
 +
    $(".move3").slideToggle();
 +
  });
 +
$("#seemore4").click(function(){
 +
    $(".move4").slideToggle();
 +
  });
 +
$("#seemore5").click(function(){
 +
    $(".move5").slideToggle();
 +
  });
 +
$("#seemore6").click(function(){
 +
    $(".move6").slideToggle();
 +
  });
 +
$("#seemore7").click(function(){
 +
    $(".move7").slideToggle();
 +
  });
 +
$("#seemore8").click(function(){
 +
    $(".move8").slideToggle();
 +
  });
 +
$("#seemore9").click(function(){
 +
    $(".move9").slideToggle();
 +
  });
 +
$("#seemore10").click(function(){
 +
    $(".move10").slideToggle();
   });
   });
 +
});
 +
</script>
</script>

Latest revision as of 22:21, 17 October 2014

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