Team:NCTU Formosa/source/introo

From 2014.igem.org

(Difference between revisions)
(Replaced content with "<html> <body> <div class="flexslider"> <ul class="slides"> <li> <img src="https://static.igem.org/mediawiki/2014/2/2b/NCTUOVERVIEW.jpg" /> </li> <li> <im...")
Line 1: Line 1:
<html>
<html>
-
<head>
+
 
-
<style type="text/css">
+
-
/*
+
-
* jQuery FlexSlider v2.0
+
-
* http://www.woothemes.com/flexslider/
+
-
*
+
-
* Copyright 2012 WooThemes
+
-
* Free to use under the GPLv2 license.
+
-
* http://www.gnu.org/licenses/gpl-2.0.html
+
-
*
+
-
* Contributing author: Tyler Smith (@mbmufffin)
+
-
*/
+
-
/* Browser Resets */
+
-
.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 Necessary Styles
+
-
*********************************/
+
-
.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;
+
-
}
+
-
/* Hide the slides before the JS is loaded. Avoids image jumping */
+
-
.flexslider .slides img{
+
-
width:100%;
+
-
display:block;
+
-
}
+
-
.flex-pauseplay span{
+
-
text-transform:capitalize;
+
-
}
+
-
/* Clearfix for the .slides element */
+
-
.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 JavaScript Fallback */
+
-
/* If you are not using another script, such as Modernizr, make sure you
+
-
* include js that eliminates this class on page load */
+
-
.no-js .slides > li:first-child{
+
-
display:block;
+
-
}
+
-
/* FlexSlider Default Theme
+
-
*********************************/
+
-
.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;
+
-
}
+
-
/* Direction Nav */
+
-
.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;
+
-
}
+
-
/* Control Nav */
+
-
.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.js"></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>
+
-
</head>
+
<body>
<body>
<div class="flexslider">
<div class="flexslider">

Revision as of 19:17, 17 October 2014

Retrieved from "http://2014.igem.org/Team:NCTU_Formosa/source/introo"