<!DOCTYPE html>
<!--[if IE 8 ]><html class="ie ie8" class="no-js" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html class="no-js" lang="en"> <!--<![endif]-->
<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, maximum-scale=1">
<title>Eve Responsive Multipurpose Template</title>
<meta name="description" content="">
<!-- CSS FILES -->
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" data-name="skins">
<link rel="stylesheet" href="css/layout/wide.css" data-name="layout">
<link rel="stylesheet" href="css/fractionslider.css"/>
<link rel="stylesheet" href="css/style-fraction.css"/>
<link rel="stylesheet" type="text/css" href="css/switcher.css" media="screen" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!--Start Header-->
<header id="header">
<div id="top-bar">
<div class="container">
<div class="row">
<div class="col-sm-7 hidden-xs top-info">
<span><i class="fa fa-phone"></i>Phone: (123) 456-7890</span>
<span><i class="fa fa-envelope"></i>Email: mail@example.com</span>
</div>
<div class="col-sm-5 top-info">
<ul>
<li><a href="" class="my-tweet"><i class="fa fa-twitter"></i></a></li>
<li><a href="" class="my-facebook"><i class="fa fa-facebook"></i></a></li>
<li><a href="" class="my-skype"><i class="fa fa-skype"></i></a></li>
<li><a href="" class="my-pint"><i class="fa fa-pinterest"></i></a></li>
<li><a href="" class="my-rss"><i class="fa fa-rss"></i></a></li>
<li><a href="" class="my-google"><i class="fa fa-google-plus"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- LOGO bar -->
<div id="logo-bar" class="clearfix">
<!-- Container -->
<div class="container">
<div class="row">
<!-- Logo / Mobile Menu -->
<div class="col-xs-12">
<div id="logo">
<h1><a href="index.html"><img src="images/logo.png" alt="Eve" /></a></h1>
</div>
</div>
</div>
</div>
<!-- Container / End -->
</div>
<!--LOGO bar / End-->
<!-- Navigation
================================================== -->
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="row">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a>
<ul class="dropdown-menu">
<li class="active"><a href="index_2.html">Home 2</a></li>
<li><a href="index_3.html">Home 3</a></li>
<li><a href="index_4.html">Home 4</a></li>
<li><a href="index_5.html">Home 5</a></li>
</ul>
</li>
<li><a href="#">Shortcodes</a>
<ul class="dropdown-menu">
<li><a href="elements.html">Elements</a></li>
<li><a href="columns.html">Columns</a></li>
<li><a href="typography.html">Typography</a></li>
<li><a href="pricing-tables.html">Pricing Tables</a></li>
<li><a href="icons.html">Icons</a></li>
</ul>
</li>
<li><a href="#">Pages</a>
<ul class="dropdown-menu">
<li>
<a href="about.html">About</a>
<ul class="dropdown-menu">
<li><a href="about.html">About Us 1</a></li>
<li><a href="about-2.html">About Us 2</a></li>
</ul>
</li>
<li><a href="services.html">Services</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="sidebar-right.html">Right Sidebar</a></li>
<li><a href="sidebar-left.html">Left Sidebar</a></li>
<li><a href="404-page.html">404 Page</a></li>
</ul>
</li>
<li><a href="#">Portfolio</a>
<ul class="dropdown-menu">
<li><a href="portfolio_2.html">Portfolio 2</a></li>
<li><a href="portfolio_3.html">Portfolio 3</a></li>
<li><a href="portfolio_4.html">Portfolio 4</a></li>
<li>
<a href="portfolio_single.html">Portfolio Single</a>
<ul class="dropdown-menu">
<li><a href="portfolio_single.html">Portfolio Single 1</a></li>
<li><a href="portfolio_single_2.html">Portfolio Single 2</a></li>
<li><a href="portfolio_single_3.html">Portfolio Single 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Blog</a>
<ul class="dropdown-menu">
<li><a href="blog-large-image.html">Large Image</a></li>
<li><a href="blog-medium-image.html">Medium Image</a></li>
<li><a href="blog-post.html">Single Post</a></li>
</ul>
</li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div><!--/.row -->
</div><!--/.container -->
</div>
</header>
<!--End Header-->
<!--start wrapper-->
<section class="wrapper">
<!--Start Slider-->
<div class="slider-wrapper">
<div class="slider">
<div class="fs_loader"></div>
<div class="slide">
<!--1- slide background-->
<img src="images/fraction-slider/gadgets/laptop-lg.png" data-position="-30,550" data-in="bottom" data-delay="500" data-out="fade" width="800" height="750"> <!--3- laptop-->
<p class="para-new" data-position="10,600" data-in="top" data-out="Right" data-delay="">Welcome to Eve</p>
</div>
<div class="slide">
<img src="images/fraction-slider/fraction_2.png" data-in="fade" data-delay="" data-out="fade" width="1920" height="450"> <!--2- slide background-->
<img src="images/fraction-slider/slider-boy.png" width="600" height="600" data-position="8,1240" data-in="bottomLeft" data-delay="500" data-out="fade" style="width:auto; height:auto">
<p class="claim light-pink" data-position="40,230" data-in="top" data-out="left" data-delay="1800" data-ease-in="easeOutBounce">the Rain template design</p>
<p class="teaser turky small" data-position="150,230" data-in="left" data-out="left" data-delay="5500">unlimited elements</p>
<p class="teaser turky small" data-position="210,230" data-in="left" data-out="left" data-delay="6500">many transitions</p>
<p class="teaser turky small" data-position="270,230" data-in="left" data-out="left" data-delay="8000">unlimited elements</p>
<p class="teaser turky small" data-position="150,670" data-in="right" data-out="right" data-delay="5500">unlimited slides</p>
<p class="teaser turky small" data-position="210,670" data-in="right" data-out="right" data-delay="6500">background animation</p>
<p class="teaser turky small" data-position="270,670" data-in="right" data-out="right" data-delay="8000">unlimited slides</p>
<a href="" class="slider-read" data-position="350,230" data-in="bottom" data-out="Right" data-delay="9500">Download Now</a>
</div>
<div class="slide">
<img src="images/fraction-slider/build.png" data-in="fade" data-out="fade" width="1920" height="450"/> <!--3- slide background-->
<p class="claim light-pink" data-position="30,250" data-in="top" data-out="top" data-ease-in="easeOutBounce" data-delay="1500">Easy Responsive Design</p>
<p class="claim theme-colored" data-position="110,250" data-in="left" data-out="Right" data-delay="2500">Easy customization</p>
<img src="images/fraction-slider/gadgets/laptop.png" width="456" height="272" data-position="103,1180" data-in="bottom" data-out="bottom" data-delay="400">
<img src="images/fraction-slider/gadgets/mack.png" width="357" height="313" data-position="60,1040" data-in="top" data-out="bottom" data-delay="200">
<img src="images/fraction-slider/gadgets/ipad.png" width="120" height="170" data-position="230,1030" data-in="left" data-delay="300" data-out="left">
<img src="images/fraction-slider/gadgets/smartphone.png" width="70" height="140" data-position="270,1320" data-in="right" data-delay="300" data-out="right">
<div class="para-2" data-position="200,250" data-in="left" data-out="right" data-delay="3000">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, aspernatur consequatur consequuntur debitis
delectus nostrum quam quod reiciendis sit!
</div>
<a href="" class="slider-read" data-position="360,250" data-in="bottom" data-out="Right" data-delay="3500">Free Download</a>
</div>
<div class="slide">
<img src="images/fraction-slider/fraction_6.png" data-in="fade" data-out="fade" width="1920" height="auto"> <!--4- slide background-->
<p class="claim light-pink" data-position="50,1050" data-in="top" data-out="top" data-ease-in="jswing">We Design Creative Websites</p>
<p class="teaser turky" data-position="120,1180" data-in="left" data-delay="1500">animate multiple elements</p>
<p class="teaser turky" data-position="170,1180" data-in="left" data-delay="3000">full control over each element</p>
<p class="teaser turky" data-position="220,1180" data-in="left" data-delay="4500" data-out="none">opensource and free</p>
<p class="teaser turky" data-position="270,1180" data-in="left" data-delay="5500" data-out="none">Download free</p>
<img src="images/fraction-slider/slider-girl.png" width="480" height="480" data-position="-20,250" data-in="right" data-delay="500" data-out="fade" style="width:auto; height:auto">
<a href="" class="slider-read" data-position="340,1330" data-in="bottom" data-out="top" data-delay="6500">download Now</a>
</div>
</div>
</div>
<!--End Slider-->
<section class="promo_box">
<div class="container">
<div class="row">
<div class="col-sm-9 col-md-9 col-lg-9">
<div class="promo_content no-padd">
<h3>Eve is awesome responsive template, with refreshingly clean design.</h3>
<p>Lorem ipsum dolor sit amet, cons adipiscing elit. Aenean commodo ligula eget dolor. </p>
</div>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<a class="btn btn-lg btn-default" href="#fakelink">
<i class="fa fa-shopping-cart"></i>
Download Now
</a>
</div>
</div>
</div>
</section>
<!--start info service-->
<section class="info_service">
<div class="container">
<div class="row sub_content">
<div class="rs_box">
<div class="col-sm-4 col-md-4 col-lg-4">
<div class="serviceBox_1">
<div class="icon_service">
<i class="fa fa-laptop"></i>
<h3>Modern Design</h3>
</div>
<div class="fr_content">
<p>Lorem ipsum dolor sit amet, cons adipiscing elit. Aenean commodo ligula eget dolor. Cum sociis natoque penatibus mag dis parturient.</p>
<a class="read" href="#">Read more</a>
</div>
</div>
</div>
<div class="col-sm-4 col-md-4 col-lg-4">
<div class="serviceBox_1">
<div class="icon_service">
<i class="fa fa-heart"></i>
<h3>Clean & Minimal</h3>
</div>
<div class="fr_content">
<p>Lorem ipsum dolor sit amet, cons adipiscing elit. Aenean commodo ligula eget dolor. Cum sociis natoque penatibus mag dis parturient.</p>
<a class="read" href="#">Read more</a>
</div>
</div>
</div>
<div class="col-sm-4 col-md-4 col-lg-4">
<div class="serviceBox_1">
<div class="icon_service">
<i class="fa fa-trophy"></i>
<h3>Branding Theme</h3>
</div>
<div class="fr_content">
<p>Lorem ipsum dolor sit amet, cons adipiscing elit. Aenean commodo ligula eget dolor. Cum sociis natoque penatibus mag dis parturient.</p>
<a class="read" href="#">Read more</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--end info service-->
<section class="fetaure_bottom">
<div class="container">
<div class="row sub_content">
<div class="col-lg-8 col-md-8 col-sm-8">
<div class="dividerHeading">
<h4><span>Why Choose Us?</span></h4>
</div>
<div class="row">
<div class="col-lg-6 rec_blog">
<div class="blogPic">
<div class="news-thumb">
<div class="swipe" id="slider" style="visibility: visible;">
<ul class="swipe-wrap" style="width: 904px;">
<li><img alt="" src="images/blog/blog_1.png"></li>
<li><img alt="" src="images/blog/blog_2.png"></li>
<li><img alt="" src="images/blog/blog_3.png"></li>
<li><img alt="" src="images/blog/blog_4.png"></li>
</ul>
<div class="swipe-navi">
<div onclick="mySwipe.prev()" class="swipe-left"><i class="fa fa-chevron-left"></i></div>
<div onclick="mySwipe.next()" class="swipe-right"><i class="fa fa-chevron-right"></i></div>
</div>
</div>
</div>
</div>
<div class="blogDetail">
<div class="blogTitle">
<a href="#">
<h2>This title in post blogs</h2>
</a>
<span>
<i class="fa fa-calendar"></i>
30 June, 20:43 PM
</span>
</div>
<div class="blogContent">
<p>Etu eros omnes theophratus mei, cumit usulan dicit omnium eripuit. Qui tever iluma facete gubergren. </p>
</div>
<div class="blogMeta">
<a href="#">
<i class="fa fa-user"></i>
Here Author Name
</a>
<a href="#">
<i class="fa fa-comment"></i>
1980
</a>
</div>
</div>
</div>
<div class="col-lg-6 rec_blog">
<div class="blogPic">
<img alt="" src="images/blog/blog_6.png">
<div class="blog-hover">
<a href="#">
<span class="icon">
<i class="fa fa-link"></i>
</span>
</a>
</div>
</div>
<div class="blogDetail">
<div class="blogTitle">
<a href="#">
<h2>This title in post blogs</h2>
</a>
<span>
<i class="fa fa-calendar"></i>
30 June, 20:43 PM
</span>
</div>
<div class="blogContent">
<p>Etu eros omnes theophratus mei, cumit usulan dicit omnium eripuit. Qui tever iluma facete gubergren. </p>
</div>
<div class="blogMeta">
<a href="#">
<i class="fa fa-user"></i>
Here Author Name
</a>
<a href="#">
<i class="fa fa-comment"></i>
1980
</a>
</div>
</div>
</div>
</div>
</div>
<!-- TESTIMONIALS -->
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="dividerHeading">
<h4><span>What Client's Say</span></h4>
</div>
<div id="testimonial-carousel" class="testimonial carousel slide">
<div class="carousel-inner">
<div class="active item">
<div class="testimonial-item">
<div class="icon"><i class="fa fa-quote-right"></i></div>
<blockquote>
<p>Donec convallis, metus nec tempus aliquet, nunc metus adipiscing leo, a lobortis nisi dui ut odio. Nullam ultrices, eros accumsan vulputate faucibus, turpis tortor dictum phasellus ac libero. </p>
</blockquote>
<div class="icon-tr"></div>
<div class="testimonial-review">
<img src="images/testimonials/1.png" alt="testimoni">
<h1>Jonathan Dower,<small>Company Inc.</small></h1>
</div>
</div>
</div>
<div class="item">
<div class="testimonial-item">
<div class="icon"><i class="fa fa-quote-right"></i></div>
<blockquote>
<p>Metus aliquet tincidunt metus, sit amet mattis lectus sodales ac. Suspendisse rhoncus dictum eros, ut egestas eros luctus eget. Nam nibh sem, mattis et feugiat ut, porttitor nec risus.</p>
</blockquote>
<div class="icon-tr"></div>
<div class="testimonial-review">
<img src="images/testimonials/2.png" alt="testimoni">
<h1>Jonathan Dower<small>Leopard</small></h1>
</div>
</div>
</div>
<div class="item">
<div class="testimonial-item">
<div class="icon"><i class="fa fa-quote-right"></i></div>
<blockquote>
<p>Donec convallis, metus nec tempus aliquet, nunc metus adipiscing leo, a lobortis nisi dui ut odio. Nullam ultrices, eros accumsan vulputate faucibus, turpis tortor dictum. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commo, magnase quis lacinia ornare, quam ante aliqua nisi, eu iaculis. </p>
</blockquote>
<div class="icon-tr"></div>
<div class="testimonial-review">
<img src="images/testimonials/3.png" alt="testimoni">
<h1>Jonathan Dower<small>Leopard</small></h1>
</div>
</div>
</div>
</div>
<div class="testimonial-buttons"><a href="#testimonial-carousel" data-slide="prev"><i class="fa fa-chevron-left"></i></a> 
<a href="#testimonial-carousel" data-slide="next"><i class="fa fa-chevron-right"></i></a></div>
</div>
</div><!-- TESTIMONIALS END -->
</div>
</div>
</section>
<section class="clients">
<div class="container">
<div class="row sub_content">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="dividerHeading">
<h4><span>Our Clients</span></h4>
</div>
<div class="our_clients">
<ul class="client_items clearfix">
<li class="col-sm-3 col-md-3 col-lg-3"><a href="services.html" data-placement="bottom" data-toggle="tooltip" title="Client 1" ><img src="images/clients/1.png" alt="" /></a></li>
<li class="col-sm-3 col-md-3 col-lg-3"><a href="services.html" data-placement="bottom" data-toggle="tooltip" title="Client 2" ><img src="images/clients/2.png" alt="" /></a></li>
<li class="col-sm-3 col-md-3 col-lg-3"><a href="services.html" data-placement="bottom" data-toggle="tooltip" title="Client 3" ><img src="images/clients/3.png" alt="" /></a></li>
<li class="col-sm-3 col-md-3 col-lg-3"><a href="services.html" data-placement="bottom" data-toggle="tooltip" title="Client 4" ><img src="images/clients/4.png" alt="" /></a></li>
</ul><!--/ .client_items-->
</div>
</div>
</div>
</div>
</section>
</section>
<!--end wrapper-->
<!--start footer-->
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3 col-lg-3">
<div class="widget_title">
<h4><span>About Us</span></h4>
</div>
<div class="widget_content">
<p>Donec earum rerum hic tenetur ans sapiente delectus, ut aut reiciendise voluptat maiores alias consequaturs aut perferendis doloribus asperiores.</p>
<ul class="contact-details-alt">
<li><i class="fa fa-map-marker"></i> <p><strong>Address</strong>: #2021 Lorem Ipsum</p></li>
<li><i class="fa fa-user"></i> <p><strong>Phone</strong>:(+91) 9000-12345</p></li>
<li><i class="fa fa-envelope"></i> <p><strong>Email</strong>: <a href="#">mail@example.com</a></p></li>
</ul>
</div>
</div>
<div class="col-sm-6 col-md-3 col-lg-3">
<div class="widget_title">
<h4><span>Recent Posts</span></h4>
</div>
<div class="widget_content">
<ul class="links">
<li><i class="fa fa-caret-right"></i> <a href="#">Aenean commodo ligula eget dolor<span>November 07, 2014</span></a></li>
<li><i class="fa fa-caret-right"></i> <a href="#">Temporibus autem quibusdam <span>November 05, 2014</span></a></li>
<li><i class="fa fa-caret-right"></i> <a href="#">Debitis aut rerum saepe <span>November 03, 2014</span></a></li>
<li><i class="fa fa-caret-right"></i> <a href="#">Et voluptates repudiandae <span>November 02, 2014</span></a></li>
</ul>
</div>
</div>
<div class="col-sm-6 col-md-3 col-lg-3">
<div class="widget_title">
<h4><span>Twitter</span></h4>
</div>
<div class="widget_content">
<ul class="tweet_list">
<li class="tweet_content item">
<i class="fa fa-twitter"></i>
<p class="tweet_link"><a href="#">@jquery_rain </a> Lorem ipsum dolor et, consectetur adipiscing eli</p>
<span class="time">29 September 2014</span>
</li>
<li class="tweet_content item">
<i class="fa fa-twitter"></i>
<p class="tweet_link"><a href="#">@jquery_rain </a> Lorem ipsum dolor et, consectetur adipiscing eli</p>
<span class="time">29 September 2014</span>
</li>
<li class="tweet_content item">
<i class="fa fa-twitter"></i>
<p class="tweet_link"><a href="#">@jquery_rain </a> Lorem ipsum dolor et, consectetur adipiscing eli</p>
<span class="time">29 September 2014</span>
</li>
</ul>
</div>
<div class="widget_content">
<div class="tweet_go"></div>
</div>
</div>
<div class="col-sm-6 col-md-3 col-lg-3">
<div class="widget_title">
<h4><span>Flickr Gallery</span></h4>
</div>
<div class="widget_content">
<div class="flickr">
<ul id="flickrFeed" class="flickr-feed"></ul>
</div>
</div>
</div>
</div>
</div>
</footer>
<!--end footer-->
<section class="footer_bottom">
<div class="container">
<div class="row">
<div class="col-lg-6 ">
<p class="copyright">© Copyright 2014 Eve | Powered by <a href="http://www.jqueryrain.com/">jQuery Rain</a></p>
</div>
<div class="col-lg-6 ">
<div class="footer_social">
<ul class="footbot_social">
<li><a class="fb" href="#." data-placement="top" data-toggle="tooltip" title="Facbook"><i class="fa fa-facebook"></i></a></li>
<li><a class="twtr" href="#." data-placement="top" data-toggle="tooltip" title="Twitter"><i class="fa fa-twitter"></i></a></li>
<li><a class="dribbble" href="#." data-placement="top" data-toggle="tooltip" title="Dribbble"><i class="fa fa-dribbble"></i></a></li>
<li><a class="skype" href="#." data-placement="top" data-toggle="tooltip" title="Skype"><i class="fa fa-skype"></i></a></li>
<li><a class="rss" href="#." data-placement="top" data-toggle="tooltip" title="RSS"><i class="fa fa-rss"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/retina-1.1.0.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script> <!-- jQuery cookie -->
<script type="text/javascript" src="js/styleswitch.js"></script> <!-- Style Colors Switcher -->
<script src="js/jquery.fractionslider.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery.smartmenus.min.js"></script>
<script type="text/javascript" src="js/jquery.smartmenus.bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.js"></script>
<script type="text/javascript" src="js/jflickrfeed.js"></script>
<script type="text/javascript" src="js/jquery.magnific-popup.min.js"></script>
<script type="text/javascript" src="js/jquery.isotope.min.js"></script>
<script type="text/javascript" src="js/swipe.js"></script>
<script type="text/javascript" src="js/jquery-scrolltofixed-min.js"></script>
<script src="js/main.js"></script>
<!-- Start Style Switcher -->
<div class="switcher"></div>
<!-- End Style Switcher -->
<script>
$(window).load(function(){
$('.slider').fractionSlider({
'fullWidth': true,
'controls': true,
'responsive': true,
'dimensions': "1920,450",
'increase': true,
'pauseOnHover': true,
'slideEndAnimation': true,
'autoChange': true
});
});
</script>
</body>
</html>