<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>index</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- Base MasterSlider style sheet -->
<link rel="stylesheet" href="../masterslider/style/masterslider.css" />
<!-- MasterSlider default skin -->
<link rel="stylesheet" href="../masterslider/skins/default/style.css" />
<!-- Home slider style -->
<link rel="stylesheet" href="style/style.css" />
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>
<!-- Latest version of jQuery from Google CDN -->
<!-- You can remove it if jQuery is already included. -->
<!-- jQuery -->
<script src="../masterslider/jquery.min.js"></script>
<script src="../masterslider/jquery.easing.min.js"></script>
<!-- MasterSlider main JS file -->
<script src="../masterslider/masterslider.min.js"></script>
<style type="text/css" media="screen">
html{font-size: 100%}
body{
margin:0;
color: #3D3D3D;
font: normal 81.25%/1.5 'Lato',arial,sans-serif !important;
min-height: 100%;
}
.header{
margin:0;
}
</style>
</head>
<body>
<!-- masterslider -->
<div class="master-slider ms-skin-default" id="masterslider">
<!-- new slide -->
<div class="ms-slide slide-1" data-delay="14">
<!-- slide background -->
<img src="masterslider/blank.gif" data-src="img/slide1/bg.jpg" alt="Slide1 background"/>
<h3 class="ms-layer hps-title1"
style="left: 580px; top: 28px;"
data-type="text"
>
The Web's Most Advanced
</h3>
<h3 class="ms-layer hps-title2"
style="left: 485px; top: 54px;"
data-type="text"
>
Responsive and Touch Slider
</h3>
<img src="masterslider/blank.gif" data-src="img/slide1/ico-4.png" alt="Icon"
style="left:218px; top:315px;"
class="ms-layer"
data-type="image"
data-delay="9200"
data-duration="2701"
data-effect="scalefrom(0.5,0.5,449,-39)"
data-ease="easeOutExpo"
/>
<img src="masterslider/blank.gif" data-src="img/slide1/ico-6.png" alt="Icon"
style="left:73px; top:196px;"
class="ms-layer"
data-type="image"
data-delay="9000"
data-duration="2701"
data-effect="scalefrom(0.5,0.5,596,80)"
data-ease="easeOutExpo"
/>
<img src="masterslider/blank.gif" data-src="img/slide1/ico-8.png" alt="Icon"
style="left:1021px; top:412px;"
class="ms-layer"
data-type="image"
data-delay="9800"
data-duration="2701"
data-effect="scalefrom(0.5,0.5,-354,-136)"
data-ease="easeOutExpo"
/>
<img src="masterslider/blank.gif" data-src="img/slide1/ico-14.png" alt="Icon"
style="left:1104px; top:148px;"
class="ms-layer"
data-type="image"
data-delay="10000"
data-duration="2701"
data-effect="scalefrom(0.5,0.5,-437,128)"
data-ease="easeOutExpo"
/>
<img src="masterslider/blank.gif" data-src="img/slide1/ico-15.png" alt="Icon"
style="left:958px; top:323px;"
class="ms-layer"
data-type="image"
data-delay="9900"
data-duration="2701"
data-effect="scalefrom(0.5,0.5,-291,-47)"
data-ease="easeOutExpo"
/>
<img src="masterslider/blank.gif" data-src="img/slide1/ico-16.png" alt="Icon"
style="left:386px; top:224px;"
class="ms-layer"
data-type="image"
data-delay="8800"
data-duration="2701"
data-effect="scalefrom(0.5,0.5,456,200)"
data-ease="easeOutExpo"
/>
<img src="masterslider/blank.gif" data-src="img/slide1/ipad.png" alt="Master slider in ipad"
style="left:380px; top:64px;"
class="ms-layer"
data-type="image"
data-effect="bottom(900)"
data-duration="4500"
data-ease="easeOutExpo"
/>
<img src="masterslider/blank.gif" data-src="img/slide1/ipad-screen-bg.jpg" alt="Background of ipad"
style="left:473px; top:138px;"
class="ms-layer"
data-type="image"
data-delay="3400"
data-effect="scale(0.98,0.98)"
/>
<img src="masterslider/blank.gif" data-src="img/slide1/logo-trans-stroke.png" alt="Transparent stroke"
style="left:607px; top:214px;"
class="ms-layer"
data-type="image"
data-delay="7500"
data-duration="1000"
data-effect="scale(0.5,0.5)"
data-ease="easeOutBack"
/>
<img src="masterslider/blank.gif" data-src="img/slide1/ipad-reflect.png" alt="iPad reflect"
style="left:656px; top:103px;"
class="ms-layer"
data-type="image"
data-effect="bottom(900)"
data-duration="4500"
data-ease="easeOutExpo"
/>
<img src="masterslider/blank.gif" data-src="img/slide1/ico-1.png" alt="Icon"
style="left:1260px; top:207px;"
class="ms-layer"
data-type="image"
data-delay="9200"
data-duration="2701"
data-effect="scalefrom(0.5,0.5,-593,69)"
data-ease="easeOutExpo"
/>
<img src="masterslider/blank.gif" data-src="img/slide1/ico-2.png" alt="Icon"
style="left:1225px; top:439px;"
class="ms-layer"
data-type="image"
data-delay="9000"
data-duration="2701"
data-effect="scalefrom(0.5,0.5,-558,-163)"
data-ease="easeOutExpo"
/>
<img src="masterslider/blank.gif" data-src="img/slide1/ico-3.png" alt="Icon"
style="left:211px; top:76px;"
class="ms-layer"
data-type="image"
data-delay="8500"
data-duration="2701"
data-effect="scalefrom(0.5,0.5,456,200)"
data-ease="easeOutExpo"
/>
<img src="masterslider/blank.gif" data-src="img/slide1/ico-5.png" alt="Icon"
style="left:121px; top:346px;"
class="ms-layer"
data-type="image"
data-delay="8800"
data-duration="2701"
data-effect="scalefrom(0.5,0.5,546,-70)"
data-ease="easeOutExpo"
/>
<img src="masterslider/blank.gif" data-src="img/slide1/ico-7.png" alt="Icon"
style="left:258px; top:191px;"
class="ms-layer"
data-type="image"
data-delay="8600"
data-duration="2701"
data-effect="scalefrom(0.5,0.5,409,85)"
data-ease="easeOutExpo"
/>
<img src="masterslider/blank.gif" data-src="img/slide1/ico-9.png" alt="Icon"
style="left:1155px; top:23px;"
class="ms-layer"
data-type="image"
data-delay="9400"
data-duration="2701"
data-effect="scalefrom(0.5,0.5,-488,253)"
data-ease="easeOutExpo"
/>
<img src="masterslider/blank.gif" data-src="img/slide1/ico-10.png" alt="Icon"
style="left:960px; top:165px;"
class="ms-layer"
data-type="image"
data-delay="9300"
data-duration="4001"
data-effect="scalefrom(0.5,0.5,-293,111)"
data-ease="easeOutExpo"
/>
<img src="masterslider/blank.gif" data-src="img/slide1/ico-11.png" alt="Icon"
style="left:368px; top:337px;"
class="ms-layer"
data-type="image"
data-delay="8700"
data-duration="2701"
data-effect="scalefrom(0.5,0.5,299,-61)"
data-ease="easeOutExpo"
/>
<img src="masterslider/blank.gif" data-src="img/slide1/ico-12.png" alt="Icon"
style="left:247px; top:465px;"
class="ms-layer"
data-type="image"
data-delay="8900"
data-duration="2701"
data-effect="scalefrom(0.5,0.5,418,-189)"
data-ease="easeOutExpo"
/>
<img src="masterslider/blank.gif" data-src="img/slide1/ico-13.png" alt="Icon"
style="left:1105px; top:288px;"
class="ms-layer"
data-type="image"
data-delay="9100"
data-duration="2701"
data-effect="scalefrom(0.5,0.5,-438,-12)"
/>
<img src="masterslider/blank.gif" data-src="img/slide1/logo-white-stroke.png" alt="White stroke"
style="left:569px; top:175px;"
class="ms-layer"
data-type="image"
data-delay="3900"
data-duration="3000"
data-effect="scale(0.5,0.5)"
data-ease="easeOutExpo"
/>
<img src="masterslider/blank.gif" data-src="img/slide1/logo.gif" alt="Master Slider logo in ipad"
style="left:662px; top:287px;"
class="ms-layer"
data-type="image"
data-delay="5100"
data-duration="1500"
data-effect="scale(0.8,0.8,c)"
data-ease="easeOutBack"
/>
<img src="masterslider/blank.gif" data-src="img/slide1/hand.png" alt="Hand over ipad"
style="left:687px; top:312px;"
class="ms-layer"
data-type="image"
data-delay="5800"
data-effect="bottom(500,false)"
data-ease="easeOutExpo"
data-duration="2400"
data-hide-time="8210"
data-hide-ease="easeInExpo"
/>
</div>
<!-- end of slide -->
<!-- new slide -->
<div class="ms-slide slide-2" data-delay="10">
<!-- slide background -->
<img src="masterslider/blank.gif" data-src="img/slide2/bg.png" alt="Slide background"/>
<h3 class="ms-layer hps-title1"
style="left: 570px;top: 89px;"
data-type="text"
data-delay="1500"
data-duration="2800"
data-ease="easeOutExpo"
data-effect="rotatefront(-40,900,tr)"
>
Responsive &
</h3>
<h3 class="ms-layer hps-title2"
style="left: 445px;top: 146px;"
data-type="text"
data-delay="2200"
data-duration="2000"
data-ease="easeOutExpo"
data-effect="rotate3dright(10,50,0,50)"
>
Touch Swipe Navigation
</h3>
<img src="masterslider/blank.gif" data-src="img/slide2/macbook.png" alt="Master Slider in Macbook"
style="left:528px; top:265px;"
class="ms-layer"
data-type="image"
data-delay="0"
data-duration="2500"
data-ease="easeOutExpo"
data-effect="scalefrom(1.1,1.1,-190,0)"
/>
<img src="masterslider/blank.gif" data-src="img/slide2/imac.png" alt="Master Slider in iMac"
style="left:814px; top:157px;"
class="ms-layer"
data-type="image"
data-delay="600"
data-duration="2500"
data-ease="easeOutExpo"
data-effect="scalefrom(1.1,1.1,190,0)"
/>
<img src="masterslider/blank.gif" data-src="img/slide2/ipad.png" alt="Master Slider in iPad"
style="left:770px; top:295px;"
class="ms-layer"
data-type="image"
data-delay="400"
data-duration="2500"
data-ease="easeOutExpo"
data-effect="scalefrom(1.3,1.3,0,0)"
/>
<img src="masterslider/blank.gif" data-src="img/slide2/iphone.png" alt="Master Slider in iPhone"
style="left:146px; top:257px;"
class="ms-layer"
data-type="image"
data-delay="3000"
data-duration="3000"
data-ease="easeOutExpo"
data-effect="from(-30,350,false)"
/>
<img src="masterslider/blank.gif" data-src="img/slide1/hand.png" alt="Hande is touching iPhone"
style="left:512px; top:326px;"
class="ms-layer"
data-type="image"
data-delay="4000"
data-duration="2500"
data-ease="easeOutExpo"
data-effect="from(30,350,false)"
/>
</div>
<!-- end of slide -->
<!-- Video Slide -->
<div class="ms-slide slide-video" data-delay="15">
<img src="masterslider/blank.gif" alt="" data-src="img/video/video-bg.jpg">
<div class="ms-layer hps-vicapton-box"
style="left:361px; top:223px"
data-effect="bottom(150)"
data-duration="2800"
data-ease="easeOutExpo"
></div>
<h3 class="ms-layer hps-hd"
style="left: 378px; top:226px;"
data-delay="1800"
data-duration="2400"
data-effect="scale(1.05,1.05)"
data-ease="easeOutExpo"
>HD</h3>
<h3 class="ms-layer hps-videotitle"
style="left: 595px; top:251px;"
data-delay="2000"
data-duration="3000"
data-ease="easeOutExpo"
data-effect="rotate3dright(0,20,0,0)"
><span style="font-weight:400">video</span> backgrounds</h3>
<p class="ms-layer hps-videotext"
style="left: 596px; top:290px;"
data-delay="2200"
data-ease="easeOutExpo"
data-duration="1300"
data-effect="skewleft(-8,30)"
>
Now you can add high quality videos as slide background. It supports various video formats and looped videos.
</p>
<video data-autopause="false" data-mute="true" data-loop="true" data-fill-mode="fill">
<source id="mp4" src="../assets/video/video.mp4" type="video/mp4"/>
<source id="webm" src="../assets/video/video.webm" type="video/webm"/>
<source id="ogv" src="../assets/video/video.ogv" type="video/ogg"/>
</video>
</div>
<!-- new slide -->
<div class="ms-slide slide-3" data-delay="8">
<!-- slide background -->
<img src="masterslider/blank.gif" data-src="img/slide3/bg.jpg" alt="Slide3 Background"/>
<h3 class="ms-layer hps-title1"
style="left:660px;top:136px;"
data-type="text"
data-ease="easeOutExpo"
data-delay="2000"
data-duration="1400"
data-effect="skewleft(30,80)"
>
Hardware
</h3>
<h3 class="ms-layer hps-amp"
style="left: 1063px;top: 114px;"
data-type="text"
data-delay="2800"
data-duration="1400"
data-effect="scale(2.8,2.8)"
data-ease="easeOutExpo"
>
&
</h3>
<h3 class="ms-layer hps-title2"
style="left: 950px;top: 150px;"
data-type="text"
data-delay="2500"
data-duration="1400"
data-effect="skewright(30,80)"
data-ease="easeOutExpo"
>
Accelerated
</h3>
<h3 class="ms-layer hps-title3"
style="left: 662px;top: 200px;"
data-type="text"
data-delay="2900"
data-duration="2400"
data-effect="rotate3dtop(-100,0,0,40,t)"
data-ease="easeOutExpo"
>
Super Smooth
</h3>
<h3 class="ms-layer hps-title4"
style="left: 662px;top: 257px;"
data-type="text"
data-delay="3100"
data-duration="2800"
data-effect="rotate3dtop(-100,0,0,18,t)"
data-ease="easeOutExpo"
>
Transitions
</h3>
<img src="masterslider/blank.gif" data-src="img/slide3/part-1.png" alt="Snow particle 1"
style="left:426px; top:252px;"
class="ms-layer"
data-type="image"
data-ease="easeOutExpo"
data-duration="8000"
data-delay="200"
data-effect="scalefrom(0.4,0.4,180,300,br)"
/>
<img src="masterslider/blank.gif" data-src="img/slide3/part-2.png" alt="Snow particle 2"
style="left:424px; top:261px;"
class="ms-layer"
data-type="image"
data-ease="easeOutExpo"
data-delay="150"
data-duration="8200"
data-effect="scalefrom(0.3,0.3,180,300,br)"
/>
<img src="masterslider/blank.gif" data-src="img/slide3/part-3.png" alt="Snow particle 3"
style="left:401px; top:241px;"
class="ms-layer"
data-type="image"
data-ease="easeOutExpo"
data-duration="7400"
data-effect="scalefrom(0.3,0.3,180,300,br)"
/>
<img src="masterslider/blank.gif" data-src="img/slide3/cool-guy.png" alt="A guy with snowboard"
style="left:345px; top:103px;"
class="ms-layer"
data-type="image"
data-delay="0"
data-ease="easeOutExpo"
data-duration="5000"
data-effect="scalefrom(0.7,0.7,380,450,br,false)"
/>
<div class="ms-layer" style="left:416px; top:135px;"
data-delay="4010"
data-type="hotspot"
data-align="left"
>
<div class="product-tt"><h3>LOREM IPSUM DOLOR</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</div>
</div>
<div class="ms-layer" style="left:408px; top:222px;"
data-delay="4100"
data-type="hotspot"
data-align="bottom"
>
<div class="product-tt"><h3>LOREM IPSUM DOLOR</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</div>
</div>
<div class="ms-layer" style="left:565px; top:265px;"
data-delay="4050"
data-type="hotspot"
data-align="right"
>
<div class="product-tt"><h3>LOREM IPSUM DOLOR</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</div>
</div>
</div>
<!-- end of slide -->
<!-- new slide -->
<div class="ms-slide slide-4" data-delay="11.5">
<!-- slide background -->
<img src="masterslider/blank.gif" data-src="img/slide4/bg.jpg" alt="Slide3 Background"/>
<h3 class="ms-layer hps-title1"
style="left: 641px;top: 70px;"
data-type="text"
data-delay="7500"
data-duration="2500"
data-ease="easeOutExpo"
data-effect="rotate3dleft(90,0,0,100)"
>
25+ Starter Templates
</h3>
<img src="masterslider/blank.gif" data-src="img/slide4/two.png" alt="Two of 25+"
style="left:327px; top:95px;"
class="ms-layer"
data-type="image"
data-delay="0"
data-duration="1800"
data-effect="bottom(480,false)"
data-ease="easeOutExpo"
/>
<img src="masterslider/blank.gif" data-src="img/slide4/five.png" alt="Five of 25+"
style="left:591px; top:112px;"
class="ms-layer"
data-type="image"
data-delay="350"
data-duration="1800"
data-effect="bottom(480,false)"
data-ease="easeOutExpo"
/>
<img src="masterslider/blank.gif" data-src="img/slide4/plus.png" alt="Plus of 25+"
style="left:854px; top:178px;"
class="ms-layer"
data-type="image"
data-delay="700"
data-duration="1800"
data-effect="bottom(480,false)"
data-ease="easeOutExpo"
/>
<!-- Two Particles -->
<img src="masterslider/blank.gif" data-src="img/slide4/two-9.png" alt="Particle"
style="left:461px; top:400px;"
class="ms-layer"
data-type="image"
data-delay="0"
data-duration="1800"
data-effect="bottom(480,false)"
data-ease="easeOutExpo"
data-hide-duration="800"
data-hide-time="4110"
data-hide-ease="easeInQuart"
data-hide-effect="rotatebottom(-150|150,780,t,false)"
/>
<img src="masterslider/blank.gif" data-src="img/slide4/two-8.png" alt="Particle"
style="left:392px; top:338px;"
class="ms-layer"
data-type="image"
data-delay="0"
data-duration="1800"
data-effect="bottom(480,false)"
data-ease="easeOutExpo"
data-hide-duration="800"
data-hide-time="3910"
data-hide-ease="easeInQuart"
data-hide-effect="rotatebottom(-150|150,780,t,false)"
/>
<img src="masterslider/blank.gif" data-src="img/slide4/two-7.png" alt="Particle"
style="left:485px; top:390px;"
class="ms-layer"
data-type="image"
data-delay="0"
data-duration="1800"
data-effect="bottom(480,false)"
data-ease="easeOutExpo"
data-hide-duration="800"
data-hide-time="3710"
data-hide-ease="easeInQuart"
data-hide-effect="rotatebottom(-150|150,780,t,false)"
/>
<img src="masterslider/blank.gif" data-src="img/slide4/two-6.png" alt="Particle"
style="left:332px; top:359px;"
class="ms-layer"
data-type="image"
data-delay="0"
data-duration="1800"
data-effect="bottom(480,false)"
data-ease="easeOutExpo"
data-hide-duration="800"
data-hide-time="3510"
data-hide-ease="easeInQuart"
data-hide-effect="rotatebottom(-150|150,780,t,false)"
/>
<img src="masterslider/blank.gif" data-src="img/slide4/two-5.png" alt="Particle"
style="left:333px; top:357px;"
class="ms-layer"
data-type="image"
data-delay="0"
data-duration="1800"
data-effect="bottom(480,false)"
data-ease="easeOutExpo"
data-hide-duration="800"
data-hide-time="3310"
data-hide-ease="easeInQuart"
data-hide-effect="rotatebottom(-150|150,780,t,false)"
/>
<img src="masterslider/blank.gif" data-src="img/slide4/two-4.png" alt="Particle"
style="left:389px; top:194px;"
class="ms-layer"
data-type="image"
data-delay="0"
data-duration="1800"
data-effect="bottom(480,false)"
data-ease="easeOutExpo"
data-hide-duration="800"
data-hide-time="3110"
data-hide-ease="easeInQuart"
data-hide-effect="rotatebottom(-150|150,780,t,false)"
/>
<img src="masterslider/blank.gif" data-src="img/slide4/two-3.png" alt="Particle"
style="left:537px; top:162px;"
class="ms-layer"
data-type="image"
data-delay="0"
data-duration="1800"
data-effect="bottom(480,false)"
data-ease="easeOutExpo"
data-hide-duration="800"
data-hide-time="2910"
data-hide-ease="easeInQuart"
data-hide-effect="rotatebottom(-150|150,780,t,false)"
/>
<img src="masterslider/blank.gif" data-src="img/slide4/two-2.png" alt="Particle"
style="left:430px; top:111px;"
class="ms-layer"
data-type="image"
data-delay="0"
data-duration="1800"
data-effect="bottom(480,false)"
data-ease="easeOutExpo"
data-hide-duration="800"
data-hide-time="2710"
data-hide-ease="easeInQuart"
data-hide-effect="rotatebottom(-150|150,780,t,false)"
/>
<img src="masterslider/blank.gif" data-src="img/slide4/two-1.png" alt="Particle"
style="left:337px; top:112px;"
class="ms-layer"
data-type="image"
data-delay="0"
data-duration="1800"
data-effect="bottom(480,false)"
data-ease="easeOutExpo"
data-hide-duration="800"
data-hide-time="2510"
data-hide-ease="easeInQuart"
data-hide-effect="rotatebottom(-150|150,780,t,false)"
/>
<!-- Five Particles -->
<img src="masterslider/blank.gif" data-src="img/slide4/five-1.png" alt="Particle"
style="left:637px; top:114px;"
class="ms-layer"
data-type="image"
data-delay="350"
data-duration="1800"
data-effect="bottom(480,false)"
data-ease="easeOutExpo"
data-hide-duration="800"
data-hide-time="5310"
data-hide-ease="easeInQuart"
data-hide-effect="rotatebottom(-150|150,780,t,false)"
/>
<img src="masterslider/blank.gif" data-src="img/slide4/five-2.png" alt="Particle"
style="left:615px; top:130px;"
class="ms-layer"
data-type="image"
data-delay="350"
data-duration="1800"
data-effect="bottom(480,false)"
data-ease="easeOutExpo"
data-hide-duration="800"
data-hide-time="5110"
data-hide-ease="easeInQuart"
data-hide-effect="rotatebottom(-150|150,780,t,false)"
/>
<img src="masterslider/blank.gif" data-src="img/slide4/five-3.png" alt="Particle"
style="left:610px; top:226px;"
class="ms-layer"
data-type="image"
data-delay="350"
data-duration="1800"
data-effect="bottom(480,false)"
data-ease="easeOutExpo"
data-hide-duration="800"
data-hide-time="4910"
data-hide-ease="easeInQuart"
data-hide-effect="rotatebottom(-150|150,780,t,false)"
/>
<img src="masterslider/blank.gif" data-src="img/slide4/five-4.png" alt="Particle"
style="left:649px; top:206px;"
class="ms-layer"
data-type="image"
data-delay="350"
data-duration="1800"
data-effect="bottom(480,false)"
data-ease="easeOutExpo"
data-hide-duration="800"
data-hide-time="4710"
data-hide-ease="easeInQuart"
data-hide-effect="rotatebottom(-150|150,780,t,false)"
/>
<img src="masterslider/blank.gif" data-src="img/slide4/five-5.png" alt="Particle"
style="left:716px; top:288px;"
class="ms-layer"
data-type="image"
data-delay="350"
data-duration="1800"
data-effect="bottom(480,false)"
data-ease="easeOutExpo"
data-hide-duration="800"
data-hide-time="4510"
data-hide-ease="easeInQuart"
data-hide-effect="rotatebottom(-150|150,780,t,false)"
/>
<img src="masterslider/blank.gif" data-src="img/slide4/five-6.png" alt="Particle"
style="left:591px; top:316px;"
class="ms-layer"
data-type="image"
data-delay="350"
data-duration="1800"
data-effect="bottom(480,false)"
data-ease="easeOutExpo"
data-hide-duration="800"
data-hide-time="4310"
data-hide-ease="easeInQuart"
data-hide-effect="rotatebottom(-150|150,780,t,false)"
/>
<!-- Plus Particles -->
<img src="masterslider/blank.gif" data-src="img/slide4/plus-1.png" alt="Particle"
style="left:864px; top:180px;"
class="ms-layer"
data-type="image"
data-delay="700"
data-duration="1800"
data-effect="bottom(480,false)"
data-ease="easeOutExpo"
data-hide-duration="800"
data-hide-time="5510"
data-hide-ease="easeInQuart"
data-hide-effect="rotatebottom(-150|150,780,t,false)"
/>
<img src="masterslider/blank.gif" data-src="img/slide4/plus-2.png" alt="Particle"
style="left:961px; top:180px;"
class="ms-layer"
data-type="image"
data-delay="700"
data-duration="1800"
data-effect="bottom(480,false)"
data-ease="easeOutExpo"
data-hide-duration="800"
data-hide-time="5710"
data-hide-ease="easeInQuart"
data-hide-effect="rotatebottom(-150|150,780,t,false)"
/>
<img src="masterslider/blank.gif" data-src="img/slide4/plus-3.png" alt="Particle"
style="left:980px; top:357px;"
class="ms-layer"
data-type="image"
data-delay="700"
data-duration="1800"
data-effect="bottom(480,false)"
data-ease="easeOutExpo"
data-hide-duration="800"
data-hide-time="5910"
data-hide-ease="easeInQuart"
data-hide-effect="rotatebottom(-150|150,780,t,false)"
/>
<img src="masterslider/blank.gif" data-src="img/slide4/plus-4.png" alt="Particle"
style="left:864px; top:180px;"
class="ms-layer"
data-type="image"
data-delay="700"
data-duration="1800"
data-effect="bottom(480,false)"
data-ease="easeOutExpo"
data-hide-duration="800"
data-hide-time="6110"
data-hide-ease="easeInQuart"
data-hide-effect="rotatebottom(-150|150,780,t,false)"
/>
</div>
<!-- end of slide -->
<!-- new slide -->
<div class="ms-slide slide-5" data-delay="23">
<!-- slide background -->
<img src="masterslider/blank.gif" data-src="img/slide5/bg.jpg" alt="Slide3 Background"/>
<img src="masterslider/blank.gif" data-src="img/slide5/plane1.png" alt="Layers plane"
style="left:141px; top:151px;"
class="ms-layer"
data-type="image"
data-effect="left(200)"
data-ease="easeOutQuart"
data-duration="2200"
/>
<img src="masterslider/blank.gif" data-src="img/slide5/plane2.png" alt="Layers plane"
style="left:87px; top:157px;"
class="ms-layer"
data-type="image"
data-effect="left(200)"
data-ease="easeOutQuart"
data-duration="2200"
data-hide-effect="top(53,false)"
data-hide-time="2301"
data-hide-duration="4500"
data-hide-ease="easeInOutQuart"
/>
<img src="masterslider/blank.gif" data-src="img/slide5/plane3.png" alt="Layers plane"
style="left:88px; top:133px;"
class="ms-layer"
data-type="image"
data-effect="left(200)"
data-ease="easeOutQuart"
data-duration="2200"
data-hide-effect="top(105,false)"
data-hide-time="2301"
data-hide-duration="4500"
data-hide-ease="easeInOutQuart"
/>
<img src="masterslider/blank.gif" data-src="img/slide5/tooltip1.png" alt="Animated Layers"
style="left:97px; top:97px;"
class="ms-layer"
data-type="image"
data-effect="top(400,false)"
data-duration="2100"
data-ease="easeOutQuart"
data-delay="6400"
data-hide-time="9000"
data-hide-duration="800"
data-hide-effect="from(-90,50)"
data-hide-ease="easeInQuad"
/>
<img src="masterslider/blank.gif" data-src="img/slide5/tooltip-shadow.png" alt="Tooltip Shadow"
style="left:102px; top:262px;"
class="ms-layer"
data-type="image"
data-duration="2100"
data-ease="easeOutQuart"
data-delay="6400"
data-hide-time="9000"
data-hide-duration="800"
data-hide-effect="from(-90,50)"
data-hide-ease="easeInQuad"
/>
<img src="masterslider/blank.gif" data-src="img/slide5/image-layer.png" alt="Image Layers"
style="left:97px; top:97px;"
class="ms-layer"
data-type="image"
data-effect="top(400,false)"
data-duration="2100"
data-ease="easeOutQuart"
data-delay="9100"
data-hide-time="12300"
data-hide-duration="800"
data-hide-effect="from(-90,50)"
data-hide-ease="easeInQuad"
/>
<img src="masterslider/blank.gif" data-src="img/slide5/tooltip-shadow.png" alt="Tooltip Shadow"
style="left:102px; top:262px;"
class="ms-layer"
data-type="image"
data-duration="2100"
data-ease="easeOutQuart"
data-delay="9100"
data-hide-time="12300"
data-hide-duration="800"
data-hide-effect="from(-90,50)"
data-hide-ease="easeInQuad"
/>
<img src="masterslider/blank.gif" data-src="img/slide5/video-layer.png" alt="Video Layers"
style="left:97px; top:97px;"
class="ms-layer"
data-type="image"
data-effect="top(400,false)"
data-duration="2100"
data-ease="easeOutQuart"
data-delay="12800"
data-hide-time="15600"
data-hide-duration="800"
data-hide-effect="from(-90,50)"
data-hide-ease="easeInQuad"
/>
<img src="masterslider/blank.gif" data-src="img/slide5/tooltip-shadow.png" alt="Tooltip Shadow"
style="left:102px; top:262px;"
class="ms-layer"
data-type="image"
data-duration="2100"
data-ease="easeOutQuart"
data-delay="12800"
data-hide-time="15600"
data-hide-duration="800"
data-hide-effect="from(-90,50)"
data-hide-ease="easeInQuad"
/>
<img src="masterslider/blank.gif" data-src="img/slide5/html-layer.png" alt="HTML Layers"
style="left:97px; top:97px;"
class="ms-layer"
data-type="image"
data-effect="top(400,false)"
data-duration="2100"
data-ease="easeOutQuart"
data-delay="15700"
data-hide-time="18400"
data-hide-duration="800"
data-hide-effect="from(-90,50)"
data-hide-ease="easeInQuad"
/>
<img src="masterslider/blank.gif" data-src="img/slide5/tooltip-shadow.png" alt="Tooltip Shadow"
style="left:102px; top:262px;"
class="ms-layer"
data-type="image"
data-duration="2100"
data-ease="easeOutQuart"
data-delay="15700"
data-hide-time="18400"
data-hide-duration="800"
data-hide-effect="from(-90,50)"
data-hide-ease="easeInQuad"
/>
<img src="masterslider/blank.gif" data-src="img/slide5/text-layer.png" alt="Text Layers"
style="left:97px; top:97px;"
class="ms-layer"
data-type="image"
data-effect="top(400,false)"
data-duration="2100"
data-ease="easeOutQuart"
data-delay="18500"
/>
<img src="masterslider/blank.gif" data-src="img/slide5/tooltip-shadow.png" alt="Tooltip Shadow"
style="left:102px; top:262px;"
class="ms-layer"
data-type="image"
data-duration="2100"
data-ease="easeOutQuart"
data-delay="18500"
/>
<img src="masterslider/blank.gif" data-src="img/slide5/infinit.png" alt="char"
style="left:1057px; top:175px;"
class="ms-layer"
data-type="image"
data-delay="7600"
data-effect="rotatefront(40,900)"
data-ease="easeOutExpo"
data-duration="1500"
/>
<h3 class="ms-layer hps-title1"
style="left: 881px;top: 193px;"
data-type="text"
data-delay="6300"
data-effect="skewleft(50,340)"
data-ease="easeOutExpo"
data-duration="2200"
>
Unlimited
</h3>
<h3 class="ms-layer hps-title2"
style="left: 883px;top: 233px;"
data-type="text"
data-delay="6300"
data-effect="skewright(50,340)"
data-ease="easeOutExpo"
data-duration="2200"
>
Transition Effects
</h3>
<h3 class="ms-layer hps-title3"
style="left: 883px;top: 287px;"
data-type="text"
data-delay="7000"
data-effect="rotate3dbottom(100,0,0,70)"
data-ease="easeOutExpo"
data-duration="2300"
>
In & Out Transitions Supported
</h3>
<p class="ms-layer hps-text1"
style="left: 885px; top: 350px;"
data-type="text"
data-delay="7800"
data-ease="easeOutExpo"
data-effect="left(50)"
data-duration="2300"
>
You can easily add image, html formatted texts and video layers over each slide and each layer accepts unique animation parameters like animation effect, duration, delay, etc.
</p>
</div>
<!-- end of slide -->
<!-- new slide -->
<div class="ms-slide slide-6" data-delay="9">
<!-- slide background -->
<img src="masterslider/blank.gif" data-src="img/slide6/bg.jpg" alt="Slide3 Background"/>
<h3 class="ms-layer hps-title1"
style="left: 1032px;top: 197px;"
data-type="text"
data-delay="1500"
data-effect="left(250)"
data-ease="easeInOutQuart"
data-duration="2400"
>
Video Layer <br /><span class="sub-title">Support</span>
</h3>
<h3 class="ms-layer hps-title2"
style="left: 1032px;top: 287px;"
data-type="text"
data-delay="1650"
data-effect="left(250)"
data-ease="easeInOutQuart"
data-duration="2400"
>
with Custom Video Cover
</h3>
<h3 class="ms-layer hps-title3"
style="left: 1032px;top: 320px;"
data-type="text"
data-delay="1750"
data-effect="left(250)"
data-ease="easeInOutQuart"
data-duration="2400"
>
YouTube
</h3>
<h3 class="ms-layer hps-title3 hps-title3-vimeo"
style="left: 1032px;top: 372px;"
data-type="text"
data-delay="1850"
data-effect="left(250)"
data-ease="easeInOutQuart"
data-duration="2400"
>
Vimeo
</h3>
<img src="masterslider/blank.gif" data-src="img/slide6/video-shadow.png" alt="video shadow"
style="left:298px; top:435px;"
class="ms-layer"
data-type="image"
data-duration="3000"
data-ease="easeOutExpo"
/>
<div class="ms-layer video-box" style="left:370px; top:105px; width:662px; height:372px"
data-type="video"
data-effect="top(100)"
data-duration="3000"
data-ease="easeOutExpo"
>
<img src="masterslider/blank.gif" data-src="img/slide6/video-cover.jpg" alt="video shadow"/>
<iframe src="http://player.vimeo.com/video/50672540" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen> </iframe>
</div>
</div>
<!-- end of slide -->
<!-- new slide -->
<div class="ms-slide slide-7" data-delay="6">
<!-- slide background -->
<img src="masterslider/blank.gif" data-src="img/slide7/bg.jpg" alt="Slide3 Background"/>
<a href="http://player.vimeo.com/video/58226214" data-type="video">REDBULL</a>
<h3 class="ms-layer hps-title1"
style="left: 830px; top: 220px;"
data-type="text"
data-duration="1400"
data-ease="easeOutExpo"
data-effect="rotate3dtop(90,0,0,80)"
>
Fullscreen
</h3>
<h3 class="ms-layer hps-title2"
style="left: 835px;top: 284px;"
data-type="text"
data-duration="1800"
data-delay="140"
data-ease="easeOutExpo"
data-effect="bottom(40)"
>
Video Support
</h3>
<h3 class="ms-layer hps-title3"
style="left: 835px;top: 318px;"
data-type="text"
data-delay="1000"
data-ease="easeOutExpo"
data-duration="1230"
data-effect="scale(1.5,1.6)"
>
with Custom Video Cover
</h3>
</div>
<!-- end of slide -->
</div>
<script type="text/javascript">
var slider = new MasterSlider();
// adds Arrows navigation control to the slider.
slider.control('arrows');
slider.control('timebar' , {insertTo:'#masterslider'});
slider.control('bullets');
slider.setup('masterslider' , {
width:1400, // slider standard width
height:580, // slider standard height
space:1,
layout:'fullwidth',
loop:true,
preload:0,
instantStartLayers:true,
autoplay:true
});
</script>
</body>
</html>