View file Electrify-Template/index_7.html

File size: 50.24Kb
<!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>Electrify 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" href="css/animate.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.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body class="home">
<!--Start Header-->
    <header id="header">
        <div id="top-bar">
            <div class="container">
                <div class="row">
                    <div class="col-sm-8 top-info hidden-xs">
                        <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-4 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>
        <div id="logo-bar">
            <div class="container">
                <div class="row">
                    <!-- Logo / Mobile Menu -->
                    <div  class="col-lg-3 col-sm-3 ">
                        <div id="logo">
                            <h1><a href="index.html"><img alt="logo" src="images/logo.png"/></a></h1>
                        </div>
                    </div>
                    <!-- Navigation
    ================================================== -->
                    <div class="col-lg-9 col-sm-9">
                        <div class="navbar navbar-default navbar-static-top" role="navigation">
                            <!--  <div class="container">-->
                            <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="#">Home</a>
                                        <ul class="dropdown-menu">
                                            <li><a href="index.html">Home 1</a></li>
                                            <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>
                                            <li><a href="index_6.html">Home 6</a></li>
                                            <li class="active"><a href="index_7.html">Home 7</a></li>
                                        </ul>
                                    </li>

                                    <li><a href="#">Shortcodes</a>
                                        <ul class="dropdown-menu">
                                            <li><a href="elements.html">Elements</a></li>
                                            <li><a href="form-elements.html">Form 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="animation.html">Animation</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 Classic</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>
                                                </ul>
                                            </li>
                                            <li>
                                                <a href="portfolio_masonry_3.html">Portfolio Masnory</a>
                                                <ul class="dropdown-menu">
                                                    <li><a href="portfolio_masonry_2.html">Masonry portfolio 2</a></li>
                                                    <li><a href="portfolio_masonry_3.html">Masonry portfolio 3</a></li>
                                                    <li><a href="portfolio_masonry_4.html">Masonry portfolio 4</a></li>
                                                </ul>
                                            </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="portfolio_masonry_3.html">Masnory Blog Style</a>
                                                <ul class="dropdown-menu">
                                                    <li><a href="blog-masonry-two.html">Blog Masonry 2</a></li>
                                                    <li><a href="blog-masonry-three.html">Blog Masonry 3</a></li>
                                                    <li><a href="blog-masonry-four.html">Blog Masonry 4</a></li>
                                                </ul>
                                            </li>
                                            <li>
                                                <a href="portfolio_masonry_3.html">Classic Blog Style</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>
                                                </ul>
                                            </li>
                                            <li><a href="blog-post.html">Single Post</a></li>
                                        </ul>
                                    </li>

                                    <li><a href="#">Contact</a>
                                        <ul class="dropdown-menu">
                                            <li><a href="contact_1.html">Contact 1</a></li>
                                            <li><a href="contact_2.html">Contact 2</a></li>
                                            <li><a href="contact_3.html">Contact 3</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </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">
                    <img src="images/fraction-slider/base.jpg" width="1920" height="auto" data-in="fade" data-out="fade" />

                    <img src="images/fraction-slider/slider-boy.png" width="600" height="600" data-position="30,1100" data-in="left" data-out="right" data-delay="700"/>

                    <p class="slide-1" data-position="50,610" data-in="fade" data-out="fade" data-delay="800">fully responsive</p>
                    <p class="slide-1" data-position="100,560" data-in="fade" data-out="fade" data-delay="1200">Our latest designs </p>
                    <p class="slide-1" data-position="150,500" data-in="fade" data-out="fade" data-delay="1600">Simply & Clear Design</p>

                    <p class="slide-1a" data-position="220,770" data-in="bottom" data-out="bottom" data-delay="2000" data-ease-in="easeOutBounce">SEO Friendly Website</p>
                    <p class="slide-1a" data-position="267,698" data-in="bottom" data-out="bottom" data-delay="3200"  data-ease-in="easeOutBounce">7 combination color option</p>
                    <p class="slide-1a" data-position="314,760" data-in="bottom" data-out="bottom" data-delay="4200"  data-ease-in="easeOutBounce">Animated layer slider</p>
                    <p class="slide-1a" data-position="361,753" data-in="bottom" data-out="bottom" data-delay="5200"  data-ease-in="easeOutBounce">Much More Featured...</p>
                </div>

                <div class="slide">
                    <img src="images/fraction-slider/base_2.jpg" width="1920" height="auto" data-in="fade" data-out="fade" />

                    <img src="images/fraction-slider/slider-girl.png" width="600" height="545" data-position="20,400" data-in="right" data-0ut="bottom" data-delay="500"/>

                    <p class="slide-2 " data-position="120,900" data-in="bottom" data-out="top" data-delay="2000">Your-Business</p>
                    <p class="slide-2a " data-position="210,900" data-in="left" data-out="right" data-delay="3000">A responsive multipurpose Theme</p>
                    <p class="slide-2b " data-position="270,900" data-in="top" data-out="bottom" data-delay="4000" data-ease-in="easeOutBounce">For Your Prestigious World !</p>
                </div>

                <div class="slide">
                    <img src="images/fraction-slider/base_3.jpg"  width="1920" height="auto" data-in="fade" data-out="fade" />

                    <p class="slide-heading" data-position="130,370" data-in="top" data-out="top" data-ease-in="easeOutBounce" data-delay="1500">Electrify theme</p>

                    <p class="sub-line" data-position="230,370" data-in="right" data-out="left" data-delay="2500">grid system and responsive design</p>

                    <img src="images/fraction-slider/gadgets/laptop.png" width="456" height="272" data-position="115,1180" data-in="bottom" data-out="bottom" data-delay="400">

                    <img src="images/fraction-slider/gadgets/mack.png" width="357" height="313" data-position="90,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-out="left" data-delay="300">

                    <img src="images/fraction-slider/gadgets/smartphone.png" width="70" height="140" data-position="270,1320" data-in="right" data-out="right" data-delay="300">

                    <a href=""	class="btn btn-lg btn-default" data-position="320,370" data-in="bottom"  data-out="bottom" data-delay="3700" data-ease-in="easeOutBounce">Free Download</a>
                </div>

            </div>
        </div>
    <!--End Slider-->
		<!--start info service-->
		<section class="info_service">
			<div class="container">
                <div class="row sub_content wow fadeIn">
                    <div class="col-md-3 col-sm-6">
                        <div class="serviceBox_2 green">
                            <div class="service-icon">
                                <i class="fa fa-globe"></i>
                            </div>
                            <div class="service-content">
                                <h3>Web Development</h3>
                                <p> sit amet, consec tetuer adipis elit, aliquam eget nibh etlibura.</p>
                                <div class="read">
                                    <a href="">Read more</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="serviceBox_2 purple">
                            <div class="service-icon">
                                <i class="fa fa-rocket"></i>
                            </div>
                            <div class="service-content">
                                <h3>Brand Building</h3>
                                <p> sit amet, consec tetuer adipis elit, aliquam eget nibh etlibura.</p>
                                <div class="read">
                                    <a href="">Read more</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="serviceBox_2 red">
                            <div class="service-icon">
                                <i class="fa fa-user-md"></i>
                            </div>
                            <div class="service-content">
                                <h3>Responsive Design</h3>
                                <p> sit amet, consec tetuer adipis elit, aliquam eget nibh etlibura.</p>
                                <div class="read">
                                    <a href="">Read more</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="serviceBox_2 blue">
                            <div class="service-icon">
                                <i class="fa fa-twitter"></i>
                            </div>
                            <div class="service-content">
                                <h3>Clean & Clear Design</h3>
                                <p> sit amet, consec tetuer adipis elit, aliquam eget nibh etlibura.</p>
                                <div class="read">
                                    <a href="">Read more</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
			</div>
		</section>
		<!--end info service-->

        <section>
            <div class="container">
                <div class="row sub_content">
                    <div class="col-md-4 wow fadeInLeft">
                        <div class="dividerHeading">
                            <h4><span>More About Us</span></h4>
                        </div>
                        <div class="widget widget_tab">
                            <ul  class="nav nav-tabs">
                                <li class="active"><a href="#Popular" data-toggle="tab">Popular</a></li>
                                <li class=""><a href="#Recent" data-toggle="tab">Recent</a></li>
                                <li class="last-tab"><a href="#Recent-Comment" data-toggle="tab"><i class="fa fa-comments-o"></i></a></li>
                            </ul>

                            <div  class="tab-content clearfix">
                                <div class="tab-pane fade active in" id="Popular">
                                    <p>Fusce lacinia tempor malesuada. Ut lacus sapien, placerat a ornare nec, elementum sit amet felis. Maecenas pretium lorem hendrerit eros sagittis fermentum. Donec in ut odio libero, at vulputate urna. </p>
                                    <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 dis parturient</a></li>
                                    </ul>
                                </div>
                                <div class="tab-pane fade" id="Recent">
                                    <p>Fusce lacinia tempor malesuada. Ut lacus sapien, placerat a ornare nec, elementum sit amet felis. Maecenas pretium lorem hendrerit eros sagittis fermentum. Donec in ut odio libero, at vulputate urna. </p>
                                    <ul class="list_style">
                                        <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 dis parturient</a></li>
                                    </ul>
                                </div>
                                <div class="tab-pane fade" id="Recent-Comment">
                                    <p>Fusce lacinia tempor malesuada. Ut lacus sapien, placerat a ornare nec, elementum sit amet felis. Maecenas pretium lorem hendrerit eros sagittis fermentum. Donec in ut odio libero, at vulputate urna. </p>
                                    <ul class="list_style square">
                                        <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 dis parturient</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 wow fadeInUp">
                        <div class="dividerHeading">
                            <h4><span>Why Choose Us</span></h4>
                        </div>
                        <div id="accordion" class="panel-group accordion"><!-- Accordians -->
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                                            Full Responsive Theme
                                        </a>
                                    </h4>
                                </div>
                                <div class="panel-collapse collapse in" id="collapseOne">
                                    <div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.</div>
                                </div>
                            </div>

                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                                            Touchable Slider
                                        </a>
                                    </h4>
                                </div>
                                <div class="panel-collapse collapse" id="collapseTwo">
                                    <div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.</div>
                                </div>
                            </div>

                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTen">
                                            Vestibulum turpis lacus
                                        </a>
                                    </h4>
                                </div>
                                <div id="collapseTen" class="panel-collapse collapse">
                                    <div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.</div>
                                    <div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.</div>
                                </div>
                            </div>

                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseEleven">
                                            How to Copy and paste ?
                                        </a>
                                    </h4>
                                </div>
                                <div id="collapseEleven" class="panel-collapse collapse">
                                    <div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.</div>
                                    <div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.</div>
                                </div>
                            </div>

                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                                            Retina Ready
                                        </a>
                                    </h4>
                                </div>
                                <div class="panel-collapse collapse" id="collapseThree">
                                    <div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4 wow fadeInRight">
                        <div class="dividerHeading">
                            <h4><span>Vimeo Video</span></h4>
                        </div>
                        <div class="embed-responsive embed-responsive-4by3">
                            <iframe src="https://player.vimeo.com/video/80101893?title=0&amp;byline=0&amp;portrait=0" width="800" height="450" frameborder="0"></iframe>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <div class="container-fluid grey-transparent-content">
            <div class="row">
                <div class="col-md-8 same-height sub_content clearfix">
                    <div class="col-sm-6">
                        <div class="serviceBox_1">
                            <div class="service-icon">
                                <i class="fa fa-pencil"></i>
                            </div>
                            <div class="service-content">
                                <h3>Clean &amp; Minimal</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a feugiat ligula, in efficitur ligula. Duis interdum velit orci, tempor facilisis magna.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="serviceBox_1">
                            <div class="service-icon">
                                <i class="fa fa-diamond"></i>
                            </div>
                            <div class="service-content">
                                <h3>Branding Theme</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a feugiat ligula, in efficitur ligula. Duis interdum velit orci, tempor facilisis magna. </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="serviceBox_1">
                            <div class="service-icon">
                                <i class="fa fa-anchor"></i>
                            </div>
                            <div class="service-content">
                                <h3>Modern Design</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a feugiat ligula, in efficitur ligula. Duis interdum velit orci, tempor facilisis magna. </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="serviceBox_1">
                            <div class="service-icon">
                                <i class="fa fa-gears"></i>
                            </div>
                            <div class="service-content">
                                <h3>Quick Support</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a feugiat ligula, in efficitur ligula. Duis interdum velit orci, tempor facilisis magna. </p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-4 same-height hidden-sm hidden-xs text-center retro">
                    <div class="heading-item">
                        <h4>
                            Ullam Corporis Suscipit </h4>
                        <p>
                            Nemo enim ipsam voluptatem quia voluptas sit aspernatur<br>
                            aut odit aut fugit, sed quia consequuntur
                        </p>
                        <a class="btn btn-default btn-lg" href="">Get a free Quote</a>
                        <em>or give us call
                            <strong>
                                +23-4321-12323
                            </strong>
                        </em>
                    </div>
                </div>
            </div>
        </div>

		<!--Start recent work-->
		<section>
			<div class="container">
                <div class="row sub_content">
                    <div class="col-md-12">
                        <div class="dividerHeading">
                            <h4><span>Recent Work</span></h4>
                        </div>
                        <div id="recent-work-slider" class="owl-carousel">
                            <div class="recent-item box">
                                <figure class="touching ">
                                    <img src="images/portfolio/portfolio_1.png" alt=""/>
                                    <div class="option inner">
                                        <div>
                                            <h5>Touch and Swipe</h5>
                                            <a href="images/portfolio/full/portfolio_1.png" class="fa fa-search mfp-image"></a>
                                            <a href="portfolio_single.html" class="fa fa-link"></a>
                                            <span>Mobile</span>
                                        </div>
                                    </div>
                                </figure>
                            </div>
                            <div class="recent-item box">
                                <figure class="touching ">
                                    <img src="images/portfolio/portfolio_2.png" alt=""/>
                                    <div class="option inner">
                                        <div>
                                            <h5>Touch and Swipe</h5>
                                            <a href="images/portfolio/full/portfolio_2.png" class="fa fa-search mfp-image"></a>
                                            <a href="portfolio_single.html" class="fa fa-link"></a>
                                            <span>Mobile</span>
                                        </div>
                                    </div>
                                </figure>
                            </div>
                            <div class="recent-item box">
                                <figure class="touching ">
                                    <img src="images/portfolio/portfolio_3.png" alt=""/>
                                    <div class="option inner">
                                        <div>
                                            <h5>Touch and Swipe</h5>
                                            <a href="images/portfolio/full/portfolio_3.png" class="fa fa-search mfp-image"></a>
                                            <a href="portfolio_single.html" class="fa fa-link"></a>
                                            <span>Mobile</span>
                                        </div>
                                    </div>
                                </figure>
                            </div>
                            <div class="recent-item box">
                                <figure class="touching ">
                                    <img src="images/portfolio/portfolio_4.png" alt=""/>
                                    <div class="option inner">
                                        <div>
                                            <h5>Touch and Swipe</h5>
                                            <a href="images/portfolio/full/portfolio_4.png" class="fa fa-search mfp-image"></a>
                                            <a href="portfolio_single.html" class="fa fa-link"></a>
                                            <span>Mobile</span>
                                        </div>
                                    </div>
                                </figure>
                            </div>
                            <div class="recent-item box">
                                <figure class="touching ">
                                    <img src="images/portfolio/portfolio_5.png" alt=""/>
                                    <div class="option inner">
                                        <div>
                                            <h5>Touch and Swipe</h5>
                                            <a href="images/portfolio/full/portfolio_5.png" class="fa fa-search mfp-image"></a>
                                            <a href="portfolio_single.html" class="fa fa-link"></a>
                                            <span>Mobile</span>
                                        </div>
                                    </div>
                                </figure>
                            </div>
                            <div class="recent-item box">
                                <figure class="touching ">
                                    <img src="images/portfolio/portfolio_6.png" alt=""/>
                                    <div class="option inner">
                                        <div>
                                            <h5>Touch and Swipe</h5>
                                            <a href="images/portfolio/full/portfolio_6.png" class="fa fa-search mfp-image"></a>
                                            <a href="portfolio_single.html" class="fa fa-link"></a>
                                            <span>Mobile</span>
                                        </div>
                                    </div>
                                </figure>
                            </div>

                            <div class="recent-item box">
                                <figure class="touching ">
                                    <img src="images/portfolio/portfolio_7.png" alt=""/>
                                    <div class="option inner">
                                        <div>
                                            <h5>Touch and Swipe</h5>
                                            <a href="images/portfolio/full/portfolio_7.png" class="fa fa-search mfp-image"></a>
                                            <a href="portfolio_single.html" class="fa fa-link"></a>
                                            <span>Mobile</span>
                                        </div>
                                    </div>
                                </figure>
                            </div>

                            <div class="recent-item box">
                                <figure class="touching ">
                                    <img src="images/portfolio/portfolio_8.png" alt=""/>
                                    <div class="option inner">
                                        <div>
                                            <h5>Touch and Swipe</h5>
                                            <a href="images/portfolio/full/portfolio_8.png" class="fa fa-search mfp-image"></a>
                                            <a href="portfolio_single.html" class="fa fa-link"></a>
                                            <span>Mobile</span>
                                        </div>
                                    </div>
                                </figure>
                            </div>

                        </div>
                    </div>
                </div>
			</div>
		</section>
		<!--Start recent work-->
		
		<section class="feature-block">
			<div class="container">
				<div class="row super_sub_content">
                    <div class="col-lg-6 wow fadeInLeft">
                        <div class="text-center">
                            <img src="images/mobile-1.png" alt=""/>
                        </div>
                    </div>

                    <div class="col-lg-6 fadeInRight">
                        <h4>Responsive Designs</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae cum dolore fugit impedit nisi, quasi saepe temporibus velit! Debitis, nihil velit? A accusantium adipisci aliquam amet aperiam aut consequuntur dolore ducimus eaque eius est eveniet fugiat maxime molestias natus necessitatibus quae sapiente suscipit tenetur veniam vero, voluptate voluptatum! At, quia!</p>
                        <hr>
                            <i class="fa fa-apple"></i>
                            <i class="fa fa-windows"></i>
                            <i class="fa fa-clock-o"></i>
                            <i class="fa fa-android"></i>
                            <i class="fa fa-paperclip"></i>
                            <i class="fa fa-skype"></i>
                        <hr>
                        <a href="" class="btn btn-default btn-md">Read more</a>&nbsp;
                        <a href="" class="btn btn-default btn-md">Purchase Now</a>
					</div>
				</div>
			</div>
		</section>


        <div class="grey_bg">
            <div class="container">
                <div class="row sub_content">
                    <div class="col-lg-3 col-md-4 col-sm-6 text-center">
                        <span class="circular-chart-big" data-percent="94">
                            <span class="percent"></span>
                        </span>
                        <h5 class="circular-title">WebDesign</h5>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6 text-center">
                        <span class="circular-chart-big" data-percent="87">
                            <span class="percent"></span>
                        </span>
                        <h5 class="circular-title">Graphic Design</h5>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6 text-center">
                        <span class="circular-chart-big" data-percent="77">
                            <span class="percent"></span>
                        </span>
                        <h5 class="circular-title">Mobile Applications</h5>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6 text-center">
                        <span class="circular-chart-big" data-percent="82">
                            <span class="percent"></span>
                        </span>
                        <h5 class="circular-title">Search Engine Optimization</h5>
                    </div>
                </div>
            </div>
        </div>


		<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 class="promo_box wow bounce">
            <div class="container">
                <div class="row">
                    <div class="col-sm-9 col-md-9 col-lg-9">
                        <div class="promo_content">
                            <h3>Electrify is awesome responsive template, with 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">
                        <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>
	</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><a href="#">Aenean commodo ligula eget dolor<span>November 07, 2015</span></a></li>
                            <li><a href="#">Temporibus autem quibusdam <span>November 05, 2015</span></a></li>
                            <li><a href="#">Debitis aut rerum saepe <span>November 03, 2015</span></a></li>
                            <li><a href="#">Et voluptates repudiandae <span>November 02, 2015</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 2015</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 2015</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 2015</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-sm-6">
                <p class="copyright">&copy; Copyright 2015 Electrify | Powered by  <a href="http://www.jqueryrain.com/">jQuery Rain</a></p>
            </div>

            <div class="col-sm-6 ">
                <div class="footer_social">
                    <ul class="footbot_social">
                        <li><a class="fb" href="#." data-placement="top" data-toggle="tooltip" title="Facebook"><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/owl.carousel.min.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/jquery.easypiechart.min.js"></script>
	<script type="text/javascript" src="js/swipe.js"></script>
    <script type="text/javascript" src="js/jquery.matchHeight-min.js"></script>
    <script type="text/javascript" src="js/jquery-scrolltofixed-min.js"></script>
    <script type="text/javascript" src="js/jquery-hoverdirection.min.js"></script>

    <script src="js/main.js"></script>
	
	<!-- Start Style Switcher -->
	<div class="switcher"></div>
	<!-- End Style Switcher -->

    <!-- WARNING: Wow.js doesn't work in IE 9 or less -->
    <!--[if gte IE 9 | !IE ]><!-->
        <script type="text/javascript" src="js/wow.min.js"></script>
        <script>
            // WOW Animation
            new WOW().init();
        </script>
    <![endif]-->
</body>
</html>