Team:TP CC-SanDiego/TheTeam.html

From 2014hs.igem.org

(Difference between revisions)
(Blanked the page)
Line 1: Line 1:
 +
<!DOCTYPE html>
 +
<html lang="en">
 +
    <head>
 +
<meta charset="UTF-8" />
 +
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 +
        <title>Fullscreen Slit Slider with CSS3 and jQuery</title>
 +
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
 +
        <meta name="description" content="Fullscreen Slit Slider with CSS3 and jQuery" />
 +
        <meta name="keywords" content="slit slider, plugin, css3, transitions, jquery, fullscreen, autoplay" />
 +
        <meta name="author" content="Codrops" />
 +
        <link rel="shortcut icon" href="../favicon.ico">
 +
<link rel="stylesheet" type="text/css" href="css/demo.css" />
 +
        <link rel="stylesheet" type="text/css" href="css/style.css" />
 +
        <link rel="stylesheet" type="text/css" href="css/custom.css" />
 +
<script type="text/javascript" src="js/modernizr.custom.79639.js"></script>
 +
<noscript>
 +
<link rel="stylesheet" type="text/css" href="css/styleNoJS.css" />
 +
</noscript>
 +
    </head>
 +
    <body>
 +
       
 +
        <div class="container demo-1">
 +
            <div id="slider" class="sl-slider-wrapper">
 +
 +
<div class="sl-slider">
 +
 +
<div class="sl-slide bg-1" data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2">
 +
<div class="sl-slide-inner">
 +
<div class="deco" data-icon="H"></div>
 +
<h2>A bene placito</h2>
 +
<blockquote><p>You have just dined, and however scrupulously the slaughterhouse is concealed in the graceful distance of miles, there is complicity.</p><cite>Ralph Waldo Emerson</cite></blockquote>
 +
</div>
 +
</div>
 +
 +
<div class="sl-slide bg-2" data-orientation="vertical" data-slice1-rotation="10" data-slice2-rotation="-15" data-slice1-scale="1.5" data-slice2-scale="1.5">
 +
<div class="sl-slide-inner">
 +
<div class="deco" data-icon="q"></div>
 +
<h2>Regula aurea</h2>
 +
<blockquote><p>Until he extends the circle of his compassion to all living things, man will not himself find peace.</p><cite>Albert Schweitzer</cite></blockquote>
 +
</div>
 +
</div>
 +
 +
<div class="sl-slide bg-3" data-orientation="horizontal" data-slice1-rotation="3" data-slice2-rotation="3" data-slice1-scale="2" data-slice2-scale="1">
 +
<div class="sl-slide-inner">
 +
<div class="deco" data-icon="O"></div>
 +
<h2>Dum spiro, spero</h2>
 +
<blockquote><p>Thousands of people who say they 'love' animals sit down once or twice a day to enjoy the flesh of creatures who have been utterly deprived of everything that could make their lives worth living and who endured the awful suffering and the terror of the abattoirs.</p><cite>Dame Jane Morris Goodall</cite></blockquote>
 +
</div>
 +
</div>
 +
 +
<div class="sl-slide bg-4" data-orientation="vertical" data-slice1-rotation="-5" data-slice2-rotation="25" data-slice1-scale="2" data-slice2-scale="1">
 +
<div class="sl-slide-inner">
 +
<div class="deco" data-icon="I"></div>
 +
<h2>Donna nobis pacem</h2>
 +
<blockquote><p>The human body has no more need for cows' milk than it does for dogs' milk, horses' milk, or giraffes' milk.</p><cite>Michael Klaper M.D.</cite></blockquote>
 +
</div>
 +
</div>
 +
 +
<div class="sl-slide bg-5" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1">
 +
<div class="sl-slide-inner">
 +
<div class="deco" data-icon="t"></div>
 +
<h2>Acta Non Verba</h2>
 +
<blockquote><p>I think if you want to eat more meat you should kill it yourself and eat it raw so that you are not blinded by the hypocrisy of having it processed for you.</p><cite>Margi Clarke</cite></blockquote>
 +
</div>
 +
</div>
 +
</div><!-- /sl-slider -->
 +
 +
<nav id="nav-arrows" class="nav-arrows">
 +
<span class="nav-arrow-prev">Previous</span>
 +
<span class="nav-arrow-next">Next</span>
 +
</nav>
 +
 +
<nav id="nav-dots" class="nav-dots">
 +
<span class="nav-dot-current"></span>
 +
<span></span>
 +
<span></span>
 +
<span></span>
 +
<span></span>
 +
</nav>
 +
 +
</div><!-- /slider-wrapper -->
 +
 +
        </div>
 +
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
 +
<script type="text/javascript" src="js/jquery.ba-cond.min.js"></script>
 +
<script type="text/javascript" src="js/jquery.slitslider.js"></script>
 +
<script type="text/javascript">
 +
$(function() {
 +
 +
var Page = (function() {
 +
 +
var $navArrows = $( '#nav-arrows' ),
 +
$nav = $( '#nav-dots > span' ),
 +
slitslider = $( '#slider' ).slitslider( {
 +
onBeforeChange : function( slide, pos ) {
 +
 +
$nav.removeClass( 'nav-dot-current' );
 +
$nav.eq( pos ).addClass( 'nav-dot-current' );
 +
 +
}
 +
} ),
 +
 +
init = function() {
 +
 +
initEvents();
 +
 +
},
 +
initEvents = function() {
 +
 +
// add navigation events
 +
$navArrows.children( ':last' ).on( 'click', function() {
 +
 +
slitslider.next();
 +
return false;
 +
 +
} );
 +
 +
$navArrows.children( ':first' ).on( 'click', function() {
 +
 +
slitslider.previous();
 +
return false;
 +
 +
} );
 +
 +
$nav.each( function( i ) {
 +
 +
$( this ).on( 'click', function( event ) {
 +
 +
var $dot = $( this );
 +
 +
if( !slitslider.isActive() ) {
 +
 +
$nav.removeClass( 'nav-dot-current' );
 +
$dot.addClass( 'nav-dot-current' );
 +
 +
}
 +
 +
slitslider.jump( i + 1 );
 +
return false;
 +
 +
} );
 +
 +
} );
 +
 +
};
 +
 +
return { init : init };
 +
 +
})();
 +
 +
Page.init();
 +
 +
/**
 +
* Notes:
 +
*
 +
* example how to add items:
 +
*/
 +
 +
/*
 +
 +
var $items  = $('<div class="sl-slide sl-slide-color-2" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1"><div class="sl-slide-inner bg-1"><div class="sl-deco" data-icon="t"></div><h2>some text</h2><blockquote><p>bla bla</p><cite>Margi Clarke</cite></blockquote></div></div>');
 +
 +
// call the plugin's add method
 +
ss.add($items);
 +
 +
*/
 +
 +
});
 +
</script>
 +
</body>
 +
</html>

Revision as of 05:35, 20 June 2014

<!DOCTYPE html> Fullscreen Slit Slider with CSS3 and jQuery

A bene placito

You have just dined, and however scrupulously the slaughterhouse is concealed in the graceful distance of miles, there is complicity.

Ralph Waldo Emerson

Regula aurea

Until he extends the circle of his compassion to all living things, man will not himself find peace.

Albert Schweitzer

Dum spiro, spero

Thousands of people who say they 'love' animals sit down once or twice a day to enjoy the flesh of creatures who have been utterly deprived of everything that could make their lives worth living and who endured the awful suffering and the terror of the abattoirs.

Dame Jane Morris Goodall

Donna nobis pacem

The human body has no more need for cows' milk than it does for dogs' milk, horses' milk, or giraffes' milk.

Michael Klaper M.D.

Acta Non Verba

I think if you want to eat more meat you should kill it yourself and eat it raw so that you are not blinded by the hypocrisy of having it processed for you.

Margi Clarke