Team:Toulouse/template/slider

From 2014.igem.org

(Difference between revisions)
 
(69 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
 +
 +
<!-- 1. Link to jQuery (1.8 or later), -->
 +
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- 33 KB -->
 +
 +
<!-- fotorama.css & fotorama.js. -->
 +
<link  href="http://fotorama.s3.amazonaws.com/4.5.2/fotorama.css" rel="stylesheet"> <!-- 3 KB -->
 +
<script src="http://fotorama.s3.amazonaws.com/4.5.2/fotorama.js"></script> <!-- 16 KB -->
<style type="text/css">
<style type="text/css">
-
/* Slider (thanks to flowplayer.org) */
 
-
/*************************************/
 
-
.scrollable {
 
-
/* required settinsg */
 
-
position: relative;
 
-
overflow :hidden;
 
-
    margin-top: 14px;
 
-
    width: 100%;
 
-
    height: 675px;
 
-
    border: 1px solid #FFFFFF;
 
-
    background: #FFFFFF;
 
-
    }
 
-
   
 
-
.scrollable .items {
 
-
/* this cannot be too large */
 
-
width: 50000px;
 
-
position: absolute;
 
-
    }
 
-
   
 
-
.items div {
 
-
float: left;
 
-
width: 100%;
 
-
height: 675px;
 
-
    }
 
-
   
 
-
.prev {
 
-
        background: url(https://static.igem.org/mediawiki/2011/8/81/DTU-Denmark2011-slider-prev.png) no-repeat;
 
-
        height: 74px;
 
-
        width: 74px;
 
-
        position: absolute;
 
-
            left: -486px; /* ceil(963/2) + 74/2 = 482 + 37 = 519 */
 
-
            top: 450px;
 
-
        margin-left: 50%;
 
-
        cursor: pointer;
 
-
        }
 
-
       
 
-
.next {
 
-
        background: url(https://static.igem.org/mediawiki/2011/5/56/DTU-Denmark2011-slider-next.png) no-repeat;
 
-
        height: 74px;
 
-
        width: 74px;
 
-
        margin-right: 50%;
 
-
        position: absolute;
 
-
            right: -488px;
 
-
            top: 450px;
 
-
        cursor: pointer;
 
-
        }
 
-
       
 
-
.disabled {
 
-
        visibility: hidden;}
 
-
</style>
 
-
<!--/* JS contenu PROPRE à cette page*/-->
+
.content-slide a{
 +
-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; padding: 15px 30px 15px; color: white; text-decoration: none; font-size: 20px; display: inline-block; width: 130px; background-color:#82C46C; text-align: center; margin-top: 70px;
 +
}
 +
.content-slide a:hover{
 +
background-color:#22780F;
 +
}
 +
 
 +
</style>
-
    <!-- jQuery Tools (slider) -->
 
-
    <script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
 
-
    <script>
 
-
        $(function() {
 
-
    // initialize scrollable
 
-
    $(".scrollable").scrollable().navigator();
 
-
        });
 
-
    </script>
 
<!-------------------------------- SLIDE HEADER --------------------------------->
<!-------------------------------- SLIDE HEADER --------------------------------->
-
            <div class="scrollable">  
+
<div style="position:relative; class="wrapper-slide">
-
              <div class="items">
+
  <div class="fotorama" data-width="100%" data-fit="contain" data-nav="false"  data-ratio="3.2" data-height="690px" data-loop="true" style="margin-top:35px;-webkit-filter: grayscale(0.3);">
-
                <div>
+
    <center><img src="https://static.igem.org/mediawiki/2014/2/24/Hometesttoulouse.jpg" data-fit="cover" style="-webkit-filter:grayscale(0.5); -moz-filter: grayscale(50%); filter: grayscale(50%);" ></center>
-
                  <a href="https://2014.igem.org/Team:Toulouse/Project/Overviews"><img src="https://static.igem.org/mediawiki/2014/d/d0/Template-igem2014-slide1.jpg" alt="Title"/></a>
+
    <!--<img src="https://static.igem.org/mediawiki/2014/3/39/Banderole.jpg" data-fit="cover" >
-
                </div>
+
    <img src="https://static.igem.org/mediawiki/2014/4/4b/Home_4.JPG" data-fit="cover" >
 +
    <img src="https://static.igem.org/mediawiki/2014/c/c1/Banderole_exp.jpg" data-fit="cover" >-->
 +
   
 +
  </div>
-
                <div>
+
  <div style="margin: 0 auto; width:230px;">
-
                  <a href="https://2014.igem.org/Team:Toulouse/Project/Overview"><img src="https://static.igem.org/mediawiki/2014/d/d0/Template-igem2014-slide2.jpg" alt="Introduction"/></a>
+
    <div style="position:absolute; top:0; text-align:center;" class="content-slide">
-
                </div>
+
      <h1 style="font-size:54px; color:white; margin-top: 120px; text-shadow: 2px 2px 2px rgba(0,0,0, 0.60);">SubtiTree</h1>
-
                <div>
+
      <p style="font-size:30px; color:white; margin-top: 30px; text-shadow: 2px 2px 2px rgba(0,0,0, 0.60);">Save our trees</p>
-
                    <a href="https://2014.igem.org/Team:Toulouse/Team"><img src="https://static.igem.org/mediawiki/2014/d/d0/Template-igem2014-slide1.jpg" alt="Team" /></a>
+
      <a href="https://2014.igem.org/Team:Toulouse/Project/Overviews">Learn more</a>
-
                </div>
+
  </div>
-
                <div>
+
  </div>
-
                    <a href="#"><img src="https://static.igem.org/mediawiki/2014/d/d0/Template-igem2014-slide2.jpg" alt="#"/></a>
+
-
                </div>
+
-
              </div>
+
</div>
-
            </div>
+
-
            <div class="prev"></div>
+
-
            <div class="next"></div>
+
-
            <div class="navi"></div>
+
-
<div class="clear"></div>
 
-
 
 
</html>
</html>

Latest revision as of 12:32, 23 February 2015

SubtiTree

Save our trees

Learn more

Retrieved from "http://2014.igem.org/Team:Toulouse/template/slider"