<!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>Rainy 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 href="css/fractionslider.css" rel="stylesheet" type="text/css">
<link href="css/style-fraction.css" rel="stylesheet" type="text/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 class="home">
<div id="rainy-container">
<img id="background" alt="background" class="background" src="images/head-3.png"/>
</div>
<!--Start Header-->
<div id="top-fix" class="clearfix">
<header id="header" class="container">
<div class="row">
<div class="hidden-xs col-sm-7 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 clearfix">
<ul>
<li><a class="my-facebook" href=""><i class="fa fa-facebook"></i></a></li>
<li><a class="my-tweet" href=""><i class="fa fa-twitter"></i></a></li>
<li><a class="my-pint" href=""><i class="fa fa-pinterest"></i></a></li>
<li><a class="my-rss" href=""><i class="fa fa-rss"></i></a></li>
<li><a class="my-skype" href=""><i class="fa fa-skype"></i></a></li>
<li><a class="my-google" href=""><i class="fa fa-google-plus"></i></a></li>
</ul>
</div>
</div>
<div class="row">
<!-- Logo / Mobile Menu -->
<div id="logo-bar" class="col-sm-12 ">
<div id="logo">
<h1><a href="index.html"><img src="images/logo.png" alt="Rainy" /></a></h1>
</div>
</div>
</div>
<div class="row">
<!-- Navigation
================================================== -->
<div class="navbar navbar-default navbar-static-top" role="navigation">
<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><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_1.html">Portfolio 1</a></li>
<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>
</div>
<!-- Container / End -->
</header>
<!--Start Slider-->
<section class="slider">
<div class="fs_loader"></div>
<div class="slide">
<div class="s1a" data-position="80,230" data-in="left" data-out="Right" data-delay="50" style="min-width: 19%;">Welcome to Rainy</div>
<div class="s1b" data-position="140,230" data-in="right" data-out="left" data-delay="100" style="min-width: 34%;">Responsive Bootstrap Template</div>
<img src="images/fraction-slider/slider-girl.png" width="340" height="340" data-position="2,1150" data-in="fade" data-out="fade" data-delay="500" style="width:auto; height:auto">
</div>
<div class="slide">
<div class="s1a" data-position="80,230" data-in="top" data-out="top" data-delay="200" style="min-width: 22%;">Amazing Rainy Effect</div>
<div class="s1b" data-position="140,230" data-in="bottom" data-out="bottom" data-delay="400" style="min-width: 33%;">Awesome Responsive Template</div>
<img src="images/fraction-slider/gadgets/laptop.png" width="456" height="272" data-position="70,1180" data-in="bottom" data-out="bottom" data-delay="1100">
<img src="images/fraction-slider/gadgets/mack.png" width="357" height="313" data-position="20,1040" data-in="top" data-out="bottom" data-delay="900">
<img src="images/fraction-slider/gadgets/ipad.png" width="120" height="170" data-position="150,1030" data-in="left" data-delay="1000" data-out="left">
<img src="images/fraction-slider/gadgets/smartphone.png" width="70" height="140" data-position="195,1320" data-in="right" data-delay="1000" data-out="right">
</div>
<div class="slide">
<div class="s1a" data-position="70,230" data-in="top" data-out="top" style="min-width: 16%;">Rainy Template</div>
<div class="s1b" data-position="130,230" data-in="bottom" data-out="bottom" style="min-width: 25%;">Free Amazing Features</div>
<div class="list" data-position="70,900" data-in="left" data-out="left" data-delay="1000">Fraction Layer Slider</div>
<div class="list" data-position="130,900" data-in="left" data-out="left" data-delay="1500">Over 500 Icon Fonts</div>
<div class="list" data-position="190,900" data-in="left" data-out="left" data-delay="2500">Wide & Boxed Layout</div>
<div class="list" data-position="250,900" data-in="left" data-out="left" data-delay="3500">Retina Ready</div>
<div class="list" data-position="70,1250" data-in="right" data-out="right" data-delay="1000">7 Colour Theme</div>
<div class="list" data-position="130,1250" data-in="right" data-out="right" data-delay="1500">Google Font Support</div>
<div class="list" data-position="190,1250" data-in="right" data-out="right" data-delay="2500">Touch Swipe Support</div>
<div class="list" data-position="250,1250" data-in="right" data-out="right" data-delay="3500">SEO Optimized</div>
<a href="" class="btn btn-lg btn-default" data-position="200,230" data-in="bottom" data-out="Right" data-delay="4000" style="min-width: 11%">
Download Now
</a>
</div>
</section>
<!--End Slider-->
</div>
<!--End Header-->
<!--start wrapper-->
<section class="wrapper">
<section class="promo_box">
<div class="container">
<div class="row">
<div class="col-sm-9">
<div class="promo_content">
<h3>Rainy 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">
<div class="pb_action">
<a class="btn btn-lg btn-default" href="#fakelink">
<i class="fa fa-shopping-cart"></i>
Download Now
</a>
</div>
</div>
</div>
</div>
</section>
<!--start info service-->
<section class="info_service">
<div class="container">
<div class="row sub_content">
<div class="col-sm-4 col-md-4 col-lg-4">
<div class="serviceBox_1">
<div class="icon_service">
<div class="hover-icon new-effect">
<a href=""><i class="service-1-icon hover-icon-images fa fa-laptop"></i></a>
</div>
<h3>Modern Design</h3>
</div>
<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 class="col-sm-4 col-md-4 col-lg-4">
<div class="serviceBox_1">
<div class="icon_service">
<div class="hover-icon new-effect">
<a href=""><i class="service-1-icon hover-icon-images fa fa-heart"></i></a>
</div>
<h3>Clean & Minimal</h3>
</div>
<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 class="col-sm-4 col-md-4 col-lg-4">
<div class="serviceBox_1">
<div class="icon_service">
<div class="hover-icon new-effect">
<a href=""><i class="service-1-icon hover-icon-images fa fa-trophy"></i></a>
</div>
<h3>Branding Theme</h3>
</div>
<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="row sub_content">
<div class="col-sm-4 col-md-4 col-lg-4">
<div class="serviceBox_1">
<div class="icon_service">
<div class="hover-icon new-effect">
<a href=""><i class="service-1-icon hover-icon-images fa fa-gear"></i></a>
</div>
<h3>Easy To Customize</h3>
</div>
<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 class="col-sm-4 col-md-4 col-lg-4">
<div class="serviceBox_1">
<div class="icon_service">
<div class="hover-icon new-effect">
<a href=""><i class="service-1-icon hover-icon-images fa fa-volume-off"></i></a>
</div>
<h3>Multimedia Support</h3>
</div>
<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 class="col-sm-4 col-md-4 col-lg-4">
<div class="serviceBox_1">
<div class="icon_service">
<div class="hover-icon new-effect">
<a href=""><i class="service-1-icon hover-icon-images fa fa-suitcase"></i></a>
</div>
<h3>Documentation</h3>
</div>
<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>
</section>
<!--end info service-->
<section class="latest_work">
<div class="container">
<div class="row sub_content">
<div class="carousel-intro">
<div class="col-md-12">
<div class="dividerHeading">
<h4><span>Recent Work</span></h4>
</div>
<div class="carousel-navi">
<div id="work-prev" class="arrow-left jcarousel-prev"><i class="fa fa-angle-left"></i></div>
<div id="work-next" class="arrow-right jcarousel-next"><i class="fa fa-angle-right"></i></div>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="jcarousel recent-work-jc">
<ul class="jcarousel-list">
<!-- Recent Work Item -->
<li class="col-sm-12 col-md-3 col-lg-3">
<div class="recent-item">
<figure class="touching medium">
<div class="pic">
<img src="images/portfolio/portfolio_1.png" alt="" />
</div>
<div class="skin-overlay"></div>
<a href="images/portfolio/full/portfolio_1.png" class="hover-zoom mfp-image" ><i class="fa fa-search"></i></a>
<a href="portfolio_single.html" class="hover-link">
<i class="fa fa-link"></i>
</a>
<figcaption class="item-description">
<h5>Lorem ipsum</h5>
<span>Technology</span>
</figcaption>
</figure>
</div>
</li>
<!-- Recent Work Item -->
<li class="col-sm-12 col-md-3 col-lg-3">
<div class="recent-item">
<figure class="touching medium">
<div class="pic">
<img src="images/portfolio/portfolio_2.png" alt="" />
</div>
<div class="skin-overlay"></div>
<a href="images/portfolio/full/portfolio_2.png" class="hover-zoom mfp-image" ><i class="fa fa-search"></i></a>
<a href="portfolio_single.html" class="hover-link"><i class="fa fa-link"></i></a>
<figcaption class="item-description">
<h5>Dolorsit</h5>
<span>Technology</span>
</figcaption>
</figure>
</div>
</li>
<!-- Recent Work Item -->
<li class="col-sm-12 col-md-3 col-lg-3">
<div class="recent-item">
<figure class="touching medium">
<div class="pic">
<img src="images/portfolio/portfolio_3.png" alt="" />
</div>
<div class="skin-overlay"></div>
<a href="images/portfolio/full/portfolio_3.png" class="hover-zoom mfp-image" ><i class="fa fa-search"></i></a>
<a href="portfolio_single.html" class="hover-link"><i class="fa fa-link"></i></a>
<figcaption class="item-description">
<h5>Working in Shop</h5>
<span>Photography</span>
</figcaption>
</figure>
</div>
</li>
<!-- Recent Work Item -->
<li class="col-sm-12 col-md-3 col-lg-3">
<div class="recent-item">
<figure class="touching medium">
<div class="pic">
<img src="images/portfolio/portfolio_4.png" alt="" />
</div>
<div class="skin-overlay"></div>
<a href="images/portfolio/full/portfolio_4.png" class="hover-zoom mfp-image" ><i class="fa fa-search"></i></a>
<a href="portfolio_single.html" class="hover-link"><i class="fa fa-link"></i></a>
<figcaption class="item-description">
<h5>Sailing</h5>
<span>Photography</span>
</figcaption>
</figure>
</div>
</li>
<!-- Recent Work Item -->
<li class="col-sm-12 col-md-3 col-lg-3">
<div class="recent-item">
<figure class="touching medium">
<div class="pic">
<img src="images/portfolio/portfolio_5.png" alt="" />
</div>
<div class="skin-overlay"></div>
<a href="images/portfolio/full/portfolio_5.png" class="hover-zoom mfp-image" ><i class="fa fa-search"></i></a>
<a href="portfolio_single.html" class="hover-link"><i class="fa fa-link"></i></a>
<figcaption class="item-description">
<h5>House</h5>
<span>Architecture</span>
</figcaption>
</figure>
</div>
</li>
<!-- Recent Work Item -->
<li class="col-sm-12 col-md-3 col-lg-3">
<div class="recent-item">
<figure class="touching medium">
<div class="pic">
<img src="images/portfolio/portfolio_1.png" alt="" />
</div>
<div class="skin-overlay"></div>
<a href="images/portfolio/full/portfolio_3.png" class="hover-zoom mfp-image" ><i class="fa fa-search"></i></a>
<a href="portfolio_single.html" class="hover-link"><i class="fa fa-link"></i></a>
<figcaption class="item-description">
<h5>Nevide</h5>
<span>Motion</span>
</figcaption>
</figure>
</div>
</li>
<!-- Recent Work Item -->
<li class="col-sm-12 col-md-3 col-lg-3">
<div class="recent-item">
<figure class="touching medium">
<div class="pic">
<img src="images/portfolio/portfolio_2.png" alt="" />
</div>
<div class="skin-overlay"></div>
<a href="images/portfolio/full/portfolio_2.png" class="hover-zoom mfp-image"><i class="fa fa-search"></i></a>
<a href="portfolio_single.html" class="hover-link"><i class="fa fa-link"></i></a>
<figcaption class="item-description">
<h5>Sunrise</h5>
<span>Photography</span>
</figcaption>
</figure>
</div>
</li>
<!-- Recent Work Item -->
<li class="col-sm-12 col-md-3 col-lg-3">
<div class="recent-item">
<figure class="touching medium">
<div class="pic">
<img src="images/portfolio/portfolio_3.png" alt="" />
</div>
<div class="skin-overlay"></div>
<a href="images/portfolio/full/portfolio_3.png" class="hover-zoom mfp-image"><i class="fa fa-search"></i></a>
<a href="portfolio_single.html" class="hover-link"><i class="fa fa-link"></i></a>
<figcaption class="item-description">
<h5>Vena Branding</h5>
<span>Identity</span>
</figcaption>
</figure>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="feature_bottom">
<div class="container">
<div class="row sub_content">
<div class="col-md-6">
<div class="dividerHeading">
<h4><span>Why Choose Us?</span></h4>
</div>
<ul class="list_style circle">
<li><a href="#">Donec convallis, metus nec tempus aliquet</a></li>
<li><a href="#">Aenean commodo ligula eget dolor</a></li>
<li><a href="#">Cum sociis natoque penatibus mag ipsum</a></li>
<li><a href="#">Lorem ipsum dolor sit amet cons adipiscing</a></li>
<li><a href="#">Accumsan vulputate faucibus turpis dictum</a></li>
<li><a href="#">Nullam ultrices eros accumsan vulputate</a></li>
<li><a href="#">Nunc aliquet tincidunt metus sit amet</a></li>
</ul>
</div>
<!-- TESTIMONIALS -->
<div class="col-md-6">
<div class="dividerHeading">
<h4><span>What Client's Say</span></h4>
</div>
<div class="testimonial carousel slide" id="testimonial-carousel">
<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.</p>
</blockquote>
<div class="testimonial-review">
<img alt="testimoni" src="images/testimonials/1.png">
<h1>Tom Jobs,<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="testimonial-review">
<img alt="testimoni" src="images/testimonials/2.png">
<h1>Tom Jobs<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>Nunc 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="testimonial-review">
<img alt="testimoni" src="images/testimonials/3.png">
<h1>Tom Jobs<small>Leopard</small></h1>
</div>
</div>
</div>
</div>
<div class="testimonial-buttons"><a data-slide="prev" href="#testimonial-carousel"><i class="fa fa-chevron-left"></i></a>
<a data-slide="next" href="#testimonial-carousel"><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="top" 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="top" 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="top" 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="top" 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.</p>
<ul class="contact-details-alt">
<li><i class="fa fa-map-marker"></i> <p><strong>Address</strong>:#2021</p></li>
<li><i class="fa fa-user"></i> <p><strong>Phone</strong>:(+91) 7696263851</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><a href="#">Aenean commodo ligula eget dolor<span>November 07, 2014</span></a></li>
<li><a href="#">Temporibus autem quibusdam <span>November 05, 2014</span></a></li>
<li><a href="#">Debitis aut rerum saepe <span>November 03, 2014</span></a></li>
<li><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">
<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">
<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">
<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>
<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-md-6">
<p class="copyright">© Copyright 2014 jQuery Rain | Powered by <a href="http://jQueryrain.com/"> jQuery Rain</a></p>
</div>
<div class="col-md-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.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.smartmenus.min.js"></script>
<script src="js/jquery.smartmenus.bootstrap.min.js"></script>
<script src="js/jquery-scrolltofixed-min.js"></script>
<script charset="utf-8" type="text/javascript" src="js/jquery.fractionslider.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/rainyday.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,335",
'increase': true,
'pauseOnHover': true,
'slideEndAnimation': true,
'autoChange': true
});
});
/* Rainy-day
/*----------------------------------------------------------------*/
function run() {
var image = document.getElementById('background');
image.onload = function() {
var engine = new RainyDay({
element: image,
image: this
});
engine.trail = engine.TRAIL_SMUDGE;
// engine.rain([ [1, 0, 30], [1, 2, 2] ],600);
engine.rain([ [0, 2, 200], [3, 3, 1] ], 100);
};
image.crossOrigin = 'anonymous';
image.src = 'images/head-3.png';
}
window.onload = function() {
run();
};
</script>
</body>
</html>