<!DOCTYPE html> <!-- ####################################### - THE HEAD PART - ###################################### --> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>SLIDER REVOLUTION - The Responsive Slider Plugin</title> <!-- get jQuery from the google apis --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script> <!-- CSS STYLE--> <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" /> <!-- THE PREVIEW STYLE SHEETS, NO NEED TO LOAD IN YOUR DOM --> <link rel="stylesheet" type="text/css" href="css/noneed.css" media="screen" /> <!-- SLIDER REVOLUTION 4.x SCRIPTS --> <script type="text/javascript" src="rs-plugin/js/jquery.themepunch.tools.min.js"></script> <script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script> <!-- SLIDER REVOLUTION 4.x CSS SETTINGS --> <link rel="stylesheet" type="text/css" href="css/extralayers.css" media="screen" /> <link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" /> <!-- GOOGLE FONTS --> <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800' rel='stylesheet' type='text/css'> </head> <!-- ####################################### - THE BODY PART - ###################################### --> <body> <!-- HEADER --> <header class="header"> <section class="container"> <article class="logo-container"><a href="http://themes.themepunch.com/?theme=revolution_jq"><div class="logo"></div></a></article> <div class="button-holder"><a href="http://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848" target="_blank" class="button"><strong>BUY NOW</strong></a></div> <div style="clear:both"></div> </section> </header> <!-- END OF HEADER --> <!-- START REVOLUTION SLIDER 4.5.0 fullwidth mode --> <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Raleway:100,200,300,700,800,900' rel='stylesheet' type='text/css'> <!-- ################################# - THEMEPUNCH BANNER - ################################# --> <div class="tp-banner-container"> <div class="tp-banner" > <ul> <!-- SLIDE --> <li data-transition="slidehorizontal" data-slotamount="1" data-masterspeed="1000" data-thumb="http://themepunch.com/revolution/wp-content/uploads/2014/05/video_woman_cover3-320x200.jpg" data-fstransition="fade" data-fsmasterspeed="1000" data-fsslotamount="7" data-saveperformance="off" data-title="Free on the Beach"> <!-- MAIN IMAGE --> <img src="http://themepunch.com/revolution/wp-content/uploads/2014/05/video_woman_cover3.jpg" alt="video_woman_cover3" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat"> <!-- LAYERS --> <!-- LAYER NR. 1 --> <div class="tp-caption tp-fade fadeout fullscreenvideo" data-x="0" data-y="0" data-speed="1000" data-start="1100" data-easing="Power4.easeOut" data-elementdelay="0.01" data-endelementdelay="0.1" data-endspeed="1500" data-endeasing="Power4.easeIn" data-autoplay="true" data-autoplayonlyfirsttime="false" data-nextslideatend="true" data-volume="mute" data-forceCover="1" data-aspectratio="16:9" data-forcerewind="on" style="z-index: 2;"><video class="" preload="none" width="100%" height="100%" poster='http://themepunch.com/revolution/wp-content/uploads/2014/05/video_woman_cover2.jpg'> <source src='http://themepunch.com/revolution/wp-content/uploads/2014/05/woman_sun.mp4' type='video/mp4' /> <source src='http://themepunch.com/revolution/wp-content/uploads/2014/05/woman_sun.webm' type='video/webm' /> </video> </div> <!-- LAYER NR. 2 --> <div class="tp-caption black_thin_whitebg_30 customin ltl tp-resizeme" data-x="730" data-y="360" data-customin="x:0;y:0;z:0;rotationX:90;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;" data-speed="1500" data-start="2100" data-easing="Power4.easeInOut" data-splitin="none" data-splitout="none" data-elementdelay="0.01" data-endelementdelay="0.1" data-endspeed="1000" data-endeasing="Power4.easeIn" style="z-index: 3; max-width: auto; max-height: auto; white-space: nowrap;">Ready to create Magnificent </div> <!-- LAYER NR. 3 --> <div class="tp-caption black_heavy_60 customin ltl tp-resizeme" data-x="739" data-y="278" data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;" data-speed="1500" data-start="1100" data-easing="Power4.easeOut" data-splitin="chars" data-splitout="none" data-elementdelay="0.1" data-endelementdelay="0.1" data-endspeed="1000" data-endeasing="Power4.easeIn" style="z-index: 4; max-width: auto; max-height: auto; white-space: nowrap;">HTML5 </div> <!-- LAYER NR. 4 --> <div class="tp-caption randomrotate ltl" data-x="961" data-y="291" data-speed="1500" data-start="1600" data-easing="Power4.easeOut" data-elementdelay="0.1" data-endelementdelay="0.1" data-endspeed="1000" data-endeasing="Power4.easeIn" style="z-index: 5;"><img src="http://themepunch.com/revolution/wp-content/uploads/2014/05/redbg.png" alt=""> </div> <!-- LAYER NR. 5 --> <div class="tp-caption light_heavy_34 customin ltl tp-resizeme" data-x="970" data-y="296" data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;" data-speed="1500" data-start="1800" data-easing="Power4.easeOut" data-splitin="none" data-splitout="none" data-elementdelay="0.01" data-endelementdelay="0.1" data-endspeed="1000" data-endeasing="Power4.easeIn" style="z-index: 6; max-width: auto; max-height: auto; white-space: nowrap;">Video </div> <!-- LAYER NR. 6 --> <div class="tp-caption black_thin_whitebg_30 customin ltl tp-resizeme" data-x="730" data-y="405" data-customin="x:0;y:0;z:0;rotationX:90;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;" data-speed="1500" data-start="2400" data-easing="Power4.easeInOut" data-splitin="none" data-splitout="none" data-elementdelay="0.01" data-endelementdelay="0.1" data-endspeed="1000" data-endeasing="Power4.easeIn" style="z-index: 7; max-width: auto; max-height: auto; white-space: nowrap;">Video Sliders that will perfect </div> <!-- LAYER NR. 7 --> <div class="tp-caption black_thin_whitebg_30 customin ltl tp-resizeme" data-x="730" data-y="450" data-customin="x:0;y:0;z:0;rotationX:90;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;" data-speed="1500" data-start="2700" data-easing="Power4.easeInOut" data-splitin="none" data-splitout="none" data-elementdelay="0.01" data-endelementdelay="0.1" data-endspeed="1000" data-endeasing="Power4.easeIn" style="z-index: 8; max-width: auto; max-height: auto; white-space: nowrap;">your Website experience. </div> </li> <!-- SLIDE --> <li data-transition="slidehorizontal" data-slotamount="1" data-masterspeed="1000" data-thumb="http://themepunch.com/revolution/wp-content/uploads/2014/05/video_typing_cover-320x200.jpg" data-saveperformance="off" data-title="Quick Results"> <!-- MAIN IMAGE --> <img src="http://themepunch.com/revolution/wp-content/uploads/2014/05/video_typing_cover.jpg" alt="video_typing_cover" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat"> <!-- LAYERS --> <!-- LAYER NR. 1 --> <div class="tp-caption tp-fade fadeout fullscreenvideo" data-x="0" data-y="0" data-speed="1000" data-start="1100" data-easing="Power4.easeOut" data-elementdelay="0.01" data-endelementdelay="0.1" data-endspeed="1500" data-endeasing="Power4.easeIn" data-autoplay="true" data-autoplayonlyfirsttime="false" data-nextslideatend="true" data-volume="mute" data-forceCover="1" data-aspectratio="16:9" data-forcerewind="on" style="z-index: 2;"><video class="" preload="none" width="100%" height="100%" poster='http://themepunch.com/revolution/wp-content/uploads/2014/05/video_typing_cover.jpg'> <source src='http://themepunch.com/revolution/wp-content/uploads/2014/05/computer_typing.mp4' type='video/mp4' /> <source src='http://themepunch.com/revolution/wp-content/uploads/2014/05/computer_typing.webm' type='video/webm' /> </video> </div> <!-- LAYER NR. 2 --> <div class="tp-caption black_thin_blackbg_30 customin ltl tp-resizeme" data-x="700" data-y="360" data-customin="x:0;y:0;z:0;rotationX:90;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;" data-speed="1500" data-start="2100" data-easing="Power4.easeInOut" data-splitin="none" data-splitout="none" data-elementdelay="0.01" data-endelementdelay="0.1" data-endspeed="1000" data-endeasing="Power4.easeIn" style="z-index: 3; max-width: auto; max-height: auto; white-space: nowrap;">An intuitive visual interface </div> <!-- LAYER NR. 3 --> <div class="tp-caption white_heavy_60 customin ltl tp-resizeme" data-x="700" data-y="278" data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;" data-speed="1500" data-start="1100" data-easing="Power4.easeOut" data-splitin="chars" data-splitout="none" data-elementdelay="0.1" data-endelementdelay="0.1" data-endspeed="1000" data-endeasing="Power4.easeIn" style="z-index: 4; max-width: auto; max-height: auto; white-space: nowrap;">Quick </div> <!-- LAYER NR. 4 --> <div class="tp-caption black_thin_blackbg_30 customin ltl tp-resizeme" data-x="700" data-y="405" data-customin="x:0;y:0;z:0;rotationX:90;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;" data-speed="1500" data-start="2400" data-easing="Power4.easeInOut" data-splitin="none" data-splitout="none" data-elementdelay="0.01" data-endelementdelay="0.1" data-endspeed="1000" data-endeasing="Power4.easeIn" style="z-index: 5; max-width: auto; max-height: auto; white-space: nowrap;">Set up slides in minutes </div> <!-- LAYER NR. 5 --> <div class="tp-caption black_thin_blackbg_30 customin ltl tp-resizeme" data-x="700" data-y="450" data-customin="x:0;y:0;z:0;rotationX:90;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;" data-speed="1500" data-start="2700" data-easing="Power4.easeInOut" data-splitin="none" data-splitout="none" data-elementdelay="0.01" data-endelementdelay="0.1" data-endspeed="1000" data-endeasing="Power4.easeIn" style="z-index: 6; max-width: auto; max-height: auto; white-space: nowrap;">Safe precious time! </div> <!-- LAYER NR. 6 --> <div class="tp-caption light_thin_60 customin ltl tp-resizeme" data-x="880" data-y="278" data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;" data-speed="1500" data-start="1800" data-easing="Power4.easeOut" data-splitin="chars" data-splitout="none" data-elementdelay="0.1" data-endelementdelay="0.1" data-endspeed="1000" data-endeasing="Power4.easeIn" style="z-index: 7; max-width: auto; max-height: auto; white-space: nowrap;">Results </div> </li> <!-- SLIDE --> <li data-transition="slidehorizontal" data-slotamount="1" data-masterspeed="1000" data-thumb="http://themepunch.com/revolution/wp-content/uploads/2014/05/video_space_cover-320x200.jpg" data-saveperformance="off" data-title="Infinite Possibilities"> <!-- MAIN IMAGE --> <img src="http://themepunch.com/revolution/wp-content/uploads/2014/05/video_space_cover.jpg" alt="video_space_cover" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat"> <!-- LAYERS --> <!-- LAYER NR. 1 --> <div class="tp-caption tp-fade fadeout fullscreenvideo" data-x="0" data-y="0" data-speed="1000" data-start="1100" data-easing="Power4.easeOut" data-elementdelay="0.01" data-endelementdelay="0.1" data-endspeed="1500" data-endeasing="Power4.easeIn" data-autoplay="true" data-autoplayonlyfirsttime="false" data-nextslideatend="true" data-volume="mute" data-forceCover="1" data-aspectratio="16:9" data-forcerewind="on" style="z-index: 2;"><video class="" preload="none" width="100%" height="100%" poster='http://themepunch.com/revolution/wp-content/uploads/2014/05/video_space_cover.jpg'> <source src='http://themepunch.com/revolution/wp-content/uploads/2014/05/among_the_stars.mp4' type='video/mp4' /> <source src='http://themepunch.com/revolution/wp-content/uploads/2014/05/among_the_stars.webm' type='video/webm' /> </video> </div> <!-- LAYER NR. 2 --> <div class="tp-caption light_medium_30 lfr ltl tp-resizeme" data-x="center" data-hoffset="185" data-y="center" data-voffset="65" data-speed="1000" data-start="2900" data-easing="Power4.easeInOut" data-splitin="none" data-splitout="none" data-elementdelay="0.01" data-endelementdelay="0.1" data-endspeed="1000" data-endeasing="Power4.easeIn" style="z-index: 3; max-width: auto; max-height: auto; white-space: nowrap;">was born </div> <!-- LAYER NR. 3 --> <div class="tp-caption white_heavy_60 lfb ltl tp-resizeme" data-x="center" data-hoffset="0" data-y="center" data-voffset="-60" data-speed="2000" data-start="1100" data-easing="Power4.easeInOut" data-splitin="none" data-splitout="none" data-elementdelay="0.1" data-endelementdelay="0.1" data-endspeed="1000" data-endeasing="Power4.easeIn" style="z-index: 4; max-width: auto; max-height: auto; white-space: nowrap;">A long time ago... </div> <!-- LAYER NR. 4 --> <div class="tp-caption randomrotate ltl" data-x="center" data-hoffset="155" data-y="center" data-voffset="9" data-speed="1000" data-start="2300" data-easing="Power4.easeInOut" data-elementdelay="0.01" data-endelementdelay="0.1" data-endspeed="1000" data-endeasing="Power4.easeIn" style="z-index: 5;"><img src="http://themepunch.com/revolution/wp-content/uploads/2014/05/redbg_big.png" alt="" data-ww="220" data-hh="85"> </div> <!-- LAYER NR. 5 --> <div class="tp-caption light_thin_60 lfb ltl tp-resizeme" data-x="center" data-hoffset="-110" data-y="center" data-voffset="10" data-speed="1500" data-start="2000" data-easing="Power4.easeInOut" data-splitin="none" data-splitout="none" data-elementdelay="0.01" data-endelementdelay="0.1" data-endspeed="1000" data-endeasing="Power4.easeIn" style="z-index: 6; max-width: auto; max-height: auto; white-space: nowrap;">Revolution </div> <!-- LAYER NR. 6 --> <div class="tp-caption light_heavy_60 customin ltl tp-resizeme" data-x="center" data-hoffset="150" data-y="center" data-voffset="10" data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;" data-speed="1000" data-start="2600" data-easing="Power4.easeInOut" data-splitin="none" data-splitout="none" data-elementdelay="0.01" data-endelementdelay="0.1" data-endspeed="1000" data-endeasing="Power4.easeIn" style="z-index: 7; max-width: auto; max-height: auto; white-space: nowrap;">Slider </div> <!-- LAYER NR. 7 --> <div class="tp-caption black_thin_whitebg_30 lfb ltl tp-resizeme" data-x="center" data-hoffset="0" data-y="center" data-voffset="110" data-speed="1500" data-start="3200" data-easing="Power4.easeInOut" data-splitin="none" data-splitout="none" data-elementdelay="0.1" data-endelementdelay="0.1" data-endspeed="1000" data-endeasing="Power4.easeIn" style="z-index: 8; max-width: auto; max-height: auto; white-space: nowrap;">Now its the #1 Slider on CodeCanyon </div> </li> </ul> <div class="tp-bannertimer"></div> </div> </div> <script type="text/javascript"> jQuery(document).ready(function() { jQuery('.tp-banner').show().revolution( { dottedOverlay:"none", delay:9000, startwidth:1170, startheight:700, hideThumbs:200, thumbWidth:100, thumbHeight:50, thumbAmount:3, navigationType:"none", navigationArrows:"solo", navigationStyle:"preview4", touchenabled:"on", onHoverStop:"on", swipe_velocity: 0.7, swipe_min_touches: 1, swipe_max_touches: 1, drag_block_vertical: false, keyboardNavigation:"on", navigationHAlign:"center", navigationVAlign:"bottom", navigationHOffset:0, navigationVOffset:20, soloArrowLeftHalign:"left", soloArrowLeftValign:"center", soloArrowLeftHOffset:20, soloArrowLeftVOffset:0, soloArrowRightHalign:"right", soloArrowRightValign:"center", soloArrowRightHOffset:20, soloArrowRightVOffset:0, shadow:0, fullWidth:"off", fullScreen:"on", spinner:"spinner0", stopLoop:"off", stopAfterLoops:-1, stopAtSlide:-1, shuffle:"off", forceFullWidth:"off", fullScreenAlignForce:"off", minFullScreenHeight:"400", hideThumbsOnMobile:"off", hideNavDelayOnMobile:1500, hideBulletsOnMobile:"off", hideArrowsOnMobile:"off", hideThumbsUnderResolution:0, hideSliderAtLimit:0, hideCaptionAtLimit:0, hideAllCaptionAtLilmit:0, startWithSlide:0, fullScreenOffsetContainer: ".header" }); }); //ready </script> <!-- END REVOLUTION SLIDER --> </div> </div> </body>