|
|
| Line 27: |
Line 27: |
| | | | |
| | <!--===============Script for slider starts=====================================================02--> | | <!--===============Script for slider starts=====================================================02--> |
| - | <link rel="canonical" href="http://www.thepetedesign.com/demos/immersive_slider_demo.html" />
| + | <script> |
| - | <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'>
| + | |
| - | <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
| + | |
| - | <script type="text/javascript" src="jquery.immersive-slider.js"></script>
| + | |
| - | <link href='immersive-slider.css' rel='stylesheet' type='text/css'>
| + | |
| | | | |
| - | <style> <!--immersive slider=========-->
| |
| - | /*=================================================
| |
| - | Class Definitions
| |
| - | =================================================*/
| |
| - | .main {
| |
| - | float: left;
| |
| - | width: 100%;
| |
| - | margin: 0 auto;
| |
| - | background: transparent;
| |
| - |
| |
| - | }
| |
| - |
| |
| - | .immersive_slider {
| |
| - | background: transparent;
| |
| - | width: 978px;
| |
| - | height: 316px;
| |
| - | opacity: 1;
| |
| - | border:none;
| |
| - | position: relative;
| |
| - | overflow: hidden;
| |
| - | }
| |
| - | .immersive_slider .is-slide {
| |
| - |
| |
| - | height: 316px;
| |
| - | width: 978px;
| |
| - | position: absolute;
| |
| - | border:none;
| |
| - | }
| |
| - | .immersive_slider .is-slide .image {
| |
| - | float: none;
| |
| - | width: 978px
| |
| - | position:absolute;
| |
| - | top:0px;
| |
| - | left:0px;
| |
| - | border:none;
| |
| - | border:none;
| |
| - | repeat:none;
| |
| - | }
| |
| - | .is-bg-overflow {
| |
| - | width: 100%;
| |
| - | height: 100%;
| |
| - | position: absolute;
| |
| - | z-index: 0;
| |
| - | }
| |
| | | | |
| - | .is-overflow, .is-bg-overflow {
| |
| - | height: 100%;
| |
| - | }
| |
| - |
| |
| - | .ease {
| |
| - | -webkit-transition: 1000ms ease all;
| |
| - | -moz-transition: 1000ms ease all;
| |
| - | -o-transition: 1000ms ease all;
| |
| - | transition: 1000ms ease all;
| |
| - | }
| |
| - |
| |
| - | .bounce {
| |
| - | -webkit-transition: 1000ms cubic-bezier(0.175, 0.885, 0.420, 1.310) all;
| |
| - | -moz-transition: 1000ms cubic-bezier(0.175, 0.885, 0.420, 1.310) all;
| |
| - | -o-transition: 1000ms cubic-bezier(0.175, 0.885, 0.420, 1.310) all;
| |
| - | transition: 1000ms cubic-bezier(0.175, 0.885, 0.420, 1.310) all;
| |
| - | }
| |
| - |
| |
| - | .no-animation {
| |
| - | -webkit-transition: none!important;
| |
| - | -moz-transition: none!important;
| |
| - | -o-transition: none!important;
| |
| - | transition: none !important;
| |
| - | }
| |
| - |
| |
| - | .immersive_slider .is-slide .image img{
| |
| - | width: 978px;
| |
| - |
| |
| - | position:absolute;
| |
| - | top:0px;
| |
| - | left:0px;
| |
| - | border:none;
| |
| - |
| |
| - | }
| |
| - |
| |
| - | .immersive_slider .is-slide .content {
| |
| - | float: none;
| |
| - | width: 50%;
| |
| - | padding-right: 10px;
| |
| - | border:none;
| |
| - | color: white;
| |
| - | text-align: left;
| |
| - | line-height: 160%;
| |
| - | vertical-align: middle;
| |
| - | display: table-cell;
| |
| - | position:absolute;
| |
| - | top:150px;
| |
| - | }
| |
| - |
| |
| - | .immersive_slider .is-slide .content h2{
| |
| - | font-size: 42px;
| |
| - | font-weight: 300;
| |
| - | text-align: left;
| |
| - | border:none;
| |
| - | }
| |
| - |
| |
| - | .is-container {
| |
| - | position: relative;
| |
| - | overflow: hidden;
| |
| - | }
| |
| - |
| |
| - | .is-container .is-background {
| |
| - | position: absolute;
| |
| - | top: 0;
| |
| - | left: 0;
| |
| - | width: 100%;
| |
| - | height: 100%;
| |
| - | }
| |
| - |
| |
| - | .is-container .is-background img{
| |
| - | width: 100%;
| |
| - | height: 100%;
| |
| - | left: 0;
| |
| - | position: relative;
| |
| - |
| |
| - | }
| |
| - |
| |
| - | .is-container .is-background.gs_cssblur {
| |
| - | -webkit-filter: blur(20px);
| |
| - | -moz-filter: blur(20px);
| |
| - | -o-filter: blur(20px);
| |
| - | filter: blur(20px);
| |
| - | }
| |
| - |
| |
| - | .is-pagination {
| |
| - | position: absolute;
| |
| - | left: 0;
| |
| - | width: 100%;
| |
| - | bottom: 20px;
| |
| - | z-index: 40;
| |
| - | list-style: none;
| |
| - | margin: 0;
| |
| - | padding: 0;
| |
| - | text-align: center;
| |
| - | }
| |
| - | .is-pagination li {
| |
| - | padding: 0;
| |
| - | display: inline-block;
| |
| - |
| |
| - | text-align: center;
| |
| - | position: relative;
| |
| - | }
| |
| - | .is-pagination li a{
| |
| - | padding: 10px;
| |
| - | width: 4px;
| |
| - | height: 4px;
| |
| - | display: block;
| |
| - |
| |
| - | }
| |
| - | .is-pagination li a:before{
| |
| - | content: '';
| |
| - | position: absolute;
| |
| - | width: 4px;
| |
| - | height: 4px;
| |
| - | background: rgba(255,255,255,0.85);
| |
| - | border-radius: 10px;
| |
| - | -webkit-border-radius: 10px;
| |
| - | -moz-border-radius: 10px;
| |
| - |
| |
| - | }
| |
| - |
| |
| - | .is-pagination li a.active:before{
| |
| - | width: 10px;
| |
| - | height: 10px;
| |
| - | background: none;
| |
| - | border: 1px solid white;
| |
| - | margin-top: -4px;
| |
| - | left: 8px;
| |
| - | }
| |
| - |
| |
| - | .is-next{
| |
| - | padding: 5px 5px 15px;
| |
| - | font-size: 50px;
| |
| - | position: absolute;
| |
| - | bottom: 50%;
| |
| - | z-index: 40;
| |
| - | margin-bottom: -36px;
| |
| - | width: 35px;
| |
| - | color: #FFF;
| |
| - | display: inline-block;
| |
| - | line-height: 100%;
| |
| - | background: rgba(0, 0, 0, 0.35);
| |
| - | }
| |
| - |
| |
| - | .is-prev {
| |
| - | padding: 5px 5px 15px;
| |
| - | font-size: 50px;
| |
| - | position: absolute;
| |
| - | bottom: 50%;
| |
| - | z-index: 40;
| |
| - | margin-bottom: -36px;
| |
| - | width: 35px;
| |
| - | color: #FFF;
| |
| - | display: inline-block;
| |
| - | line-height: 100%;
| |
| - | background: rgba(0, 0, 0, 0.35);
| |
| - | }
| |
| - |
| |
| - | .is-next {
| |
| - | right: 10px;
| |
| - | }
| |
| - |
| |
| - | .is-prev {
| |
| - | left: 10px;
| |
| - | }
| |
| - |
| |
| - | /*======================*/
| |
| - |
| |
| - |
| |
| - | .wrapper {
| |
| - | height: auto !important;
| |
| - | height: 100%;
| |
| - | margin: 0 auto;
| |
| - | overflow: hidden;
| |
| - | border:none;
| |
| - | }
| |
| - |
| |
| - | a {
| |
| - | text-decoration: none;
| |
| - | }
| |
| - |
| |
| - |
| |
| - |
| |
| - |
| |
| - |
| |
| - |
| |
| - | .page_container {
| |
| - | width: 978px;
| |
| - | height: 316px;
| |
| - | margin: 50px auto;
| |
| - | border:none;
| |
| - | }
| |
| - |
| |
| - |
| |
| - |
| |
| - | .immersive_slider .is-slide .content h2{
| |
| - | line-height: 140%;
| |
| - | font-weight: 100;
| |
| - | color: white;
| |
| - | font-weight: 100;
| |
| - | border:none;
| |
| - | }
| |
| - | .immersive_slider .is-slide .content a {
| |
| - | color: white;
| |
| - | border:none;
| |
| - | }
| |
| - |
| |
| - | .immersive_slider .is-slide .content p{
| |
| - | float: left;
| |
| - | font-weight: 100;
| |
| - | width: 100%;
| |
| - | font-size: 17px;
| |
| - | margin-top: 5px;
| |
| - | border:none;
| |
| - | }
| |
| - |
| |
| - | </style>
| |
| - | <script><!--jquery immersive slider=============-->
| |
| - | /* ===========================================================
| |
| - | * jquery-immersive-slider.js v1
| |
| - | * ===========================================================
| |
| - | * Copyright 2013 Pete Rojwongsuriya.
| |
| - | * http://www.thepetedesign.com
| |
| - | *
| |
| - | * Create an immersive slider that changes the
| |
| - | * the whole container to match the viewing slide
| |
| - | *
| |
| - | * https://github.com/peachananr/immersive-slider
| |
| - | *
| |
| - | * ========================================================== */
| |
| - |
| |
| - | !function($){
| |
| - |
| |
| - | var defaults = {
| |
| - | animation: "bounce",
| |
| - | slideSelector: ".slide",
| |
| - | container: ".main",
| |
| - | cssBlur: false,
| |
| - | pagination: true,
| |
| - | loop: true,
| |
| - | autoStart: 8000
| |
| - | };
| |
| - |
| |
| - | /*------------------------------------------------*/
| |
| - | /* Credit: Eike Send for the awesome swipe event */
| |
| - | /*------------------------------------------------*/
| |
| - |
| |
| - | $.fn.swipeEvents = function() {
| |
| - | return this.each(function() {
| |
| - |
| |
| - | var startX,
| |
| - | startY,
| |
| - | $this = $(this);
| |
| - |
| |
| - | $this.bind('touchstart', touchstart);
| |
| - |
| |
| - | function touchstart(event) {
| |
| - | var touches = event.originalEvent.touches;
| |
| - | if (touches && touches.length) {
| |
| - | startX = touches[0].pageX;
| |
| - | startY = touches[0].pageY;
| |
| - | $this.bind('touchmove', touchmove);
| |
| - | }
| |
| - | event.preventDefault();
| |
| - | }
| |
| - |
| |
| - | function touchmove(event) {
| |
| - | var touches = event.originalEvent.touches;
| |
| - | if (touches && touches.length) {
| |
| - | var deltaX = startX - touches[0].pageX;
| |
| - | var deltaY = startY - touches[0].pageY;
| |
| - |
| |
| - | if (deltaX >= 50) {
| |
| - | $this.trigger("swipeLeft");
| |
| - | }
| |
| - | if (deltaX <= -50) {
| |
| - | $this.trigger("swipeRight");
| |
| - | }
| |
| - | if (deltaY >= 50) {
| |
| - | $this.trigger("swipeUp");
| |
| - | }
| |
| - | if (deltaY <= -50) {
| |
| - | $this.trigger("swipeDown");
| |
| - | }
| |
| - | if (Math.abs(deltaX) >= 50 || Math.abs(deltaY) >= 50) {
| |
| - | $this.unbind('touchmove', touchmove);
| |
| - | }
| |
| - | }
| |
| - | event.preventDefault();
| |
| - | }
| |
| - |
| |
| - | });
| |
| - | };
| |
| - |
| |
| - | $.fn.transformSlider = function(settings, pos) {
| |
| - | var el = $(this)
| |
| - | switch(settings.animation) {
| |
| - | case 'slide':
| |
| - | el.addClass("ease").css({
| |
| - | "-webkit-transform": "translate3d(" + pos + "%, 0, 0)",
| |
| - | "-moz-transform": "translate3d(" + pos + "%, 0, 0)",
| |
| - | "-ms-transform": "translate3d(" + pos + "%, 0, 0)",
| |
| - | "transform": "translate3d(" + pos + "%, 0, 0)"
| |
| - | });
| |
| - | break;
| |
| - | case 'slideUp':
| |
| - | el.addClass("ease").css({
| |
| - | "-webkit-transform": "translate3d(0, " + pos + "%, 0)",
| |
| - | "-moz-transform": "translate3d(0, " + pos + "%, 0)",
| |
| - | "-ms-transform": "translate3d(0, " + pos + "%, 0)",
| |
| - | "transform": "translate3d(0, " + pos + "%, 0)"
| |
| - | });
| |
| - | break;
| |
| - | case 'bounce':
| |
| - | el.addClass("bounce").css({
| |
| - | "-webkit-transform": "translate3d(" + pos + "%, 0, 0)",
| |
| - | "-moz-transform": "translate3d(" + pos + "%, 0, 0)",
| |
| - | "-ms-transform": "translate3d(" + pos + "%, 0, 0)",
| |
| - | "transform": "translate3d(" + pos + "%, 0, 0)"
| |
| - | });
| |
| - | break;
| |
| - | case 'bounceUp':
| |
| - | el.addClass("bounce").css({
| |
| - | "-webkit-transform": "translate3d(0, " + pos + "%, 0)",
| |
| - | "-moz-transform": "translate3d(0, " + pos + "%, 0)",
| |
| - | "-ms-transform": "translate3d(0, " + pos + "%, 0)",
| |
| - | "transform": "translate3d(0, " + pos + "%, 0)"
| |
| - | });
| |
| - | break;
| |
| - | case 'fade':
| |
| - | el.addClass("no-animation").fadeOut("slow", function() {
| |
| - | el.css({
| |
| - | "-webkit-transform": "translate3d(" + pos + "%, 0, 0)",
| |
| - | "-moz-transform": "translate3d(" + pos + "%, 0, 0)",
| |
| - | "-ms-transform": "translate3d(" + pos + "%, 0, 0)",
| |
| - | "transform": "translate3d(" + pos + "%, 0, 0)"
| |
| - | }).fadeIn("slow");
| |
| - | });
| |
| - |
| |
| - | break;
| |
| - | }
| |
| - | }
| |
| - |
| |
| - | $.fn.positionSlides = function(settings, index) {
| |
| - | var el = $(this);
| |
| - | if (settings.animation == "slideUp" || settings.animation == "bounceUp") {
| |
| - | el.css({
| |
| - | top: (index * 100) + "%"
| |
| - | });
| |
| - | }else {
| |
| - | el.css({
| |
| - | left: (index * 100) + "%"
| |
| - | });
| |
| - | }
| |
| - | }
| |
| - |
| |
| - |
| |
| - |
| |
| - | $.fn.immersive_slider = function(options){
| |
| - | var settings = $.extend({}, defaults, options),
| |
| - | el = $(this),
| |
| - | cssblur = "",
| |
| - | pagination = "";
| |
| - |
| |
| - | // Add all the gs sepecific classes
| |
| - | el.addClass("immersive_slider")
| |
| - | el.find(settings.slideSelector).addClass("is-slide");
| |
| - |
| |
| - | // Use CSS to blur the first image the plugin found automatically
| |
| - | if (settings.cssBlur == true) {
| |
| - | el.find(".is-slide img:first-child").each(function( index ) {
| |
| - | var activeclass = ""
| |
| - | if(index == 0) activeclass = "active"
| |
| - | var img = $(this);
| |
| - |
| |
| - | $(settings.container).addClass("is-container").prepend("<div id='slide_" + (index + 1) + "_bg' class='is-background gs_cssblur " + activeclass + "'>" + img.clone().wrap("<div />").parent().html() + "</div>")
| |
| - | $("#slide_" + (index + 1) + "_bg").positionSlides(settings, index)
| |
| - | });
| |
| - | } else {
| |
| - | el.find(".is-slide").each(function( index ) {
| |
| - | var activeclass = ""
| |
| - | if(index == 0) activeclass = "active"
| |
| - | var img = "<img src='"+ $(this).data("blurred") +"'>";
| |
| - |
| |
| - | $(settings.container).addClass("is-container").prepend("<div id='slide_" + (index + 1) + "_bg' class='is-background " + activeclass + "'>" + img + "</div>")
| |
| - | $("#slide_" + (index + 1) + "_bg").positionSlides(settings, index)
| |
| - | });
| |
| - | }
| |
| - |
| |
| - | if(settings.autoStart != 0 || settings.autoStart != false) {
| |
| - | setInterval(function() {
| |
| - | el.moveNext();
| |
| - | }, settings.autoStart);
| |
| - | }
| |
| - |
| |
| - | $(settings.container).find(".is-background").wrapAll( "<div class='is-bg-overflow' />");
| |
| - | el.find(".is-slide").wrapAll( "<div class='is-overflow' />");
| |
| - | el.find(".is-slide").each(function( index ) {
| |
| - | var activeclass = ""
| |
| - | if(index == 0) activeclass = "active"
| |
| - | $(this).attr("id","slide_" + (index + 1)).addClass(activeclass)
| |
| - | $(this).positionSlides(settings, index)
| |
| - | if(settings.pagination == true) {
| |
| - | pagination += "<li><a class='is-page " + activeclass + "' href='#slide_" + (index + 1) + "'></a></li>"
| |
| - | }
| |
| - | });
| |
| - |
| |
| - | $("<ul class='is-pagination'>"+pagination+"</ul>").appendTo(el)
| |
| - |
| |
| - | if(settings.pagination == true) {
| |
| - | $(".is-pagination li a").click(function (){
| |
| - | var page_index = $(this).attr("href");
| |
| - |
| |
| - | if (!$(this).hasClass("active")) {
| |
| - | el.moveSlider(settings, page_index)
| |
| - | }
| |
| - | return false
| |
| - | });
| |
| - | }
| |
| - | $(".is-next").click(function() {
| |
| - | el.moveNext();
| |
| - | return false;
| |
| - | });
| |
| - | $(".is-prev").click(function() {
| |
| - | el.movePrev();
| |
| - | return false;
| |
| - | });
| |
| - |
| |
| - | $.fn.moveSlider = function(settings, page_index) {
| |
| - | var el = $(this),
| |
| - | current = el.find(".is-slide.active"),
| |
| - | next = el.find(".is-slide" + page_index),
| |
| - | bg_current = $(settings.container).find(".is-background.active"),
| |
| - | bg_next = $(settings.container).find(".is-background" + page_index + "_bg");
| |
| - | if(next) {
| |
| - | current.removeClass("active")
| |
| - | next.addClass("active")
| |
| - |
| |
| - | bg_current.removeClass("active")
| |
| - | bg_next.addClass("active")
| |
| - | $(".is-pagination li a" + ".active").removeClass("active");
| |
| - | $(".is-pagination li a" + "[href='" + (page_index) + "']").addClass("active");
| |
| - | }
| |
| - | pos = ((page_index.replace('#slide_','') - 1) * 100) * -1;
| |
| - | el.find(".is-overflow").transformSlider(settings, pos);
| |
| - | $(settings.container).find(".is-bg-overflow").transformSlider(settings, pos);
| |
| - | }
| |
| - |
| |
| - | $.fn.moveNext = function() {
| |
| - | var el = $(this),
| |
| - | total = el.find(settings.slideSelector).length + 1,
| |
| - | page_index_number = parseInt($(this).find(".is-slide.active").attr("id").replace('slide_','')) + 1;
| |
| - | if(page_index_number < total) {
| |
| - | el.moveSlider(settings, "#slide_" + page_index_number)
| |
| - | } else {
| |
| - | if (settings.loop == true ) el.moveSlider(settings, "#slide_1")
| |
| - | }
| |
| - | }
| |
| - |
| |
| - | $.fn.movePrev = function() {
| |
| - | var el = $(this),
| |
| - | total = el.find(settings.slideSelector).length + 1,
| |
| - | page_index_number = parseInt($(this).find(".is-slide.active").attr("id").replace('slide_','')) - 1;
| |
| - | if(page_index_number <= total && page_index_number > 0) {
| |
| - | el.moveSlider(settings, "#slide_" + page_index_number)
| |
| - | }else {
| |
| - | if (settings.loop == true ) el.moveSlider(settings, "#slide_" + (total - 1 ))
| |
| - | }
| |
| - | }
| |
| - |
| |
| - | el.swipeEvents().bind("swipeRight", function(){
| |
| - | el.movePrev();
| |
| - | }).bind("swipeLeft", function(){
| |
| - | el.moveNext();
| |
| - | });
| |
| - |
| |
| - | }
| |
| - |
| |
| - | }(window.jQuery);
| |
| | | | |
| | | | |
| Line 564: |
Line 37: |
| | <!--================Script for slider ends=====================================================02--> | | <!--================Script for slider ends=====================================================02--> |
| | | | |
| - | <!--internal script for slider starts============04-->
| |
| - | <script type="text/javascript">
| |
| - | $(document).ready( function() {
| |
| - | $("#immersive_slider").immersive_slider({
| |
| - | container: ".main"
| |
| - | });
| |
| - | });
| |
| | | | |
| - | </script>
| |
| - |
| |
| - | <script>
| |
| | | | |
| - | var _gaq=[['_setAccount','UA-11278966-1'],['_trackPageview']]; // Change UA-XXXXX-X to be your site's ID
| |
| - | (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
| |
| - | g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
| |
| - | s.parentNode.insertBefore(g,s)}(document,'script'));
| |
| - | </script>
| |
| - | <!--internal script for slider ends============04-->
| |
| | </p> | | </p> |
| | <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> | | <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> |
| Line 590: |
Line 47: |
| | <!--======================Code for slider=====================================================03--> | | <!--======================Code for slider=====================================================03--> |
| | | | |
| - | <div class="main" style="position:absolute; top:200px; left:0px"> | + | <div style="background-image: url(back.png); width:980px; height:367px; position:relative; top:30px; left:200px"> |
| - | <div id=" immersive_slider" class=" immersive_slider"> | + | <div id= " slider" ; style=" position: relative; width: 940px; height: 327px; top:19px; left:19px"> |
| - | | + | |
| - | <!--slide1==========================================-->
| + | <img src="slide2.jpg"> |
| - | <div class="slide" data-blurred="https://static.igem.org/mediawiki/2014/4/4f/Transparent555.png">
| + | <img src="slide3.jpg"> |
| - |
| + | |
| - | <div class="image">
| + | |
| - | <a href="http://www.bucketlistly.com" target="_blank">
| + | |
| - | <img src=" https://static. igem.org/mediawiki/2014/7/72/111.png" alt="Slider 1"></a> | + | |
| - | </div>
| + | |
| - | </div>
| + | |
| - | | + | |
| - | <!--slide2==========================================-->
| + | |
| - | <div class="slide" data-blurred="https://static.igem.org/mediawiki/2014/4/4f/Transparent555.png">
| + | |
| - |
| + | |
| - | <div class="image">
| + | |
| - | <a href="http://www.bucketlistly.com/apps" target="_blank">
| + | |
| - | <img src=" https://static. igem.org/mediawiki/2014/b/b3/222.png" alt="Slider 1"></a> | + | |
| - | </div>
| + | |
| | </div> | | </div> |
| - |
| |
| - | <!--slide3==========================================-->
| |
| - | <div class="slide" data-blurred="https://static.igem.org/mediawiki/2014/4/4f/Transparent555.png">
| |
| - |
| |
| - | <div class="image">
| |
| - | <a href="http://www.thepetedesign.com" target="_blank">
| |
| - | <img src="https://static.igem.org/mediawiki/2014/5/53/333.png" alt="Slider 1"></a>
| |
| - | </div>
| |
| | </div> | | </div> |
| - |
| |
| - | <!--slide4==========================================-->
| |
| - | <div class="slide" data-blurred="https://static.igem.org/mediawiki/2014/4/4f/Transparent555.png">
| |
| - |
| |
| - | <div class="image">
| |
| - | <a href="http://www.thepetedesign.com" target="_blank">
| |
| - | <img src="https://static.igem.org/mediawiki/2014/8/8f/444.png" alt="Slider 1"></a>
| |
| - | </div>
| |
| - | </div>
| |
| - |
| |
| - | <!--slide5==========================================-->
| |
| - | <div class="slide" data-blurred="https://static.igem.org/mediawiki/2014/4/4f/Transparent555.png">
| |
| - |
| |
| - | <div class="image">
| |
| - | <a href="http://www.thepetedesign.com" target="_blank">
| |
| - | <img src="https://static.igem.org/mediawiki/2014/c/c8/555.png" alt="Slider 1"></a>
| |
| - | </div>
| |
| - | </div>
| |
| - | <!--==========================================-->
| |
| - |
| |
| - | <a href="#" class="is-prev">«</a>
| |
| - | <a href="#" class="is-next">»</a>
| |
| - | </div>
| |
| - |
| |
| - | </div>
| |
| - |
| |
| - | <div class="benefits">
| |
| - | <div class="page_container"></div>
| |
| - | </div>
| |
| - |
| |
| - |
| |
| - |
| |
| | | | |
| | <!--======================Code for slider ends=================================================03--> | | <!--======================Code for slider ends=================================================03--> |
"
