Files
pkrstarsbot/website/Boson/htdocs/index-11.html
2021-02-17 19:15:28 +01:00

1128 lines
52 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>Boson</title>
<!-- Styles -->
<link rel="stylesheet" href="css/prettyPhoto.css">
<link rel="stylesheet" type="text/css" href="css/settings.css" media="screen"/>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/jquery-ui.css">
<link rel="stylesheet" href="css/yamm/yamm.css">
<link rel="stylesheet" href="css/color-scheme/blue.css">
<link rel="stylesheet" href="css/responsive.css">
<!-- extra CSS for new pages -->
<link rel="stylesheet" href="css/custom.css">
<!-- Base JS -->
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jquery.sticky.js"></script>
<script src="js/stellar.js"></script>
<script src="js/main.js"></script>
<!-- Revolution Slider -->
<script src="js/jquery.themepunch.plugins.min.js"></script>
<script src="js/jquery.themepunch.revolution.min.js"></script>
<script src="js/revolution-slider-options.js"></script>
<!-- Prety photo -->
<script src="js/jquery.prettyPhoto.js"></script>
<script>
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
<!-- CSS and JS from Boson -->
<!-- Styles -->
<link rel="stylesheet" href="js/owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="js/owl-carousel/owl.theme.css">
<link rel="stylesheet" href="js/owl-carousel/owl.transitions.css">
<link rel="stylesheet" href="js/rs-plugin/css/settings.css">
<link rel="stylesheet" href="js/flexslider/flexslider.css">
<link rel="stylesheet" href="js/isotope/isotope.css">
<link rel="stylesheet" href="css/jquery-ui.css">
<link rel="stylesheet" href="js/magnific-popup/magnific-popup.css">
<link rel="stylesheet" href="css/custom.css">
<link rel="stylesheet" href="css/responsive.css">
<!-- Google Fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway:400,200,100,300,500,600,700,800,900' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Dosis:400,200,300,500,600,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lovers+Quarrel' rel='stylesheet' type='text/css'>
<!-- Icon Fonts -->
<link rel="stylesheet" href="css/icomoon/style.css" type="text/css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" type="text/css">
</head>
<body class="home-wrap">
<div class="main">
<div>
<div >
<div >
<!-- HEADER
============================================= -->
<div class="header">
<header>
<div class="navbar yamm navbar-default navbar-top">
<div class="container">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target="#navbar-collapse-1" class="navbar-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="./index.html" class="navbar-brand logo"><img src="img/logo.png" alt=""></a>
</div>
<div id="navbar-collapse-1" class="navbar-collapse collapse">
<!-- Search Form -->
<form action="/" class="b-search-form">
<div class="input-wrap">
<input type="text" placeholder="Search..">
</div>
</form>
<!-- End Search Form -->
<ul class="nav navbar-nav pull-right">
<li class="dropdown yamm-fw yamm-fw5">
<a href="#" data-toggle="dropdown" class="dropdown-toggle active">Home</a> <ul class="dropdown-menu">
<li>
<div class="yamm-content">
<div class="row">
<div class="col-xs-12 col-sm-3 m-submenu first">
<div class="mmenu-title">Home Pages</div>
<a href="index-1.html">Home Layout 1</a>
<a href="index-2.html">Home Layout 2</a>
<a href="index-3.html">Home Layout 3</a>
<a href="index-4.html">Home Layout 4</a>
<a href="index-5.html">Home Layout 5</a>
<a href="index-6.html">Home Layout 6</a>
<a href="index-7.html">Home Layout 7</a>
</div>
<div class="col-xs-12 col-sm-3 m-submenu">
<a href="index-8.html">Home Layout 8</a>
<a href="index-9.html">Home Layout 9</a>
<a href="index-10.html">Home Layout 10</a>
<a href="index-11.html">Home Layout 11</a>
<div class="mmenu-title">Home - One Page</div>
<a href="index-onepage.html">One Page Default</a>
<a href="oncepage-topbar.html">One Page Topbar</a>
<a href="onepage-transparent.html">One Page Transparent</a>
</div>
<div class="col-xs-12 col-sm-3 m-submenu">
<div class="mmenu-title">Landing Page 1-7</div>
<a href="home-restaurant.html">Home - Restaurant</a>
<a href="home-construction.html">Home - Construction</a>
<a href="home-hosting.html">Home - Hosting</a>
<a href="home-lawyer.html">Home - Lawyer</a>
<a href="home-fashion.html">Home - Fashion</a>
<a href="home-portfolio.html">Home - Portfolio</a>
<a href="home-landing.html">Home - App Landing</a>
</div>
<div class="col-xs-12 col-sm-3 m-submenu">
<div class="mmenu-title">Landing Pages 8 - 14</div>
<a href="home-creative.html">Home - Creative</a>
<a href="home-marketing.html">Home - Marketing</a>
<a href="home-resume.html">Home - Resume</a>
<a href="home-medical.html">Home - Medical</a>
<a href="home-gym.html">Home - Gym</a>
<a href="home-church.html">Home - church</a>
<a href="home-charity.html">Home - Charity</a>
</div>
<div class="col-xs-12 col-sm-3 m-submenu">
<div class="mmenu-title">Landing Pages 15-21 </div>
<a href="home-resume.html">Home - Resume</a>
<a href="home-portfolio2.html">Home - Portfolio 2</a>
<a href="home-app-landing.html">Home - App landing</a>
<a href="home-corporate.html">Home - Corporate</a>
<a href="home-hosting2.html">Home - Hosting</a>
<a href="home-marketing.html">Home - Marketing</a>
<a href="home-restaurant2.html">Home - Restaurant 2</a>
</div>
</div>
</div>
</li>
</ul>
</li>
<!-- Classic list -->
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">One Page</a>
<ul class="dropdown-menu yamm-sm">
<li class="dropdown-submenu">
<a href="#">Home - One Page</a>
<ul class="dropdown-menu">
<li><a href="index-onepage.html">One Page Default</a></li>
<li><a href="oncepage-topbar.html">One Page Topbar</a></li>
<li><a href="onepagefullslider.html">One Page Full Slider</a></li>
<li><a href="onepage-transparent.html">One Page Transparent</a></li>
</ul>
</li>
<li><a href="onepage-restaurant.html">OnePage - Restaurant</a></li>
<li><a href="onepage-construction.html">One Page - Construction</a></li>
<li><a href="onepage-hosting.html">One Page - Hosting</a></li>
<li><a href="onepage-lawyer.html">One Page - Lawyer</a></li>
<li><a href="onepage-fashion.html">One Page - Fashion</a></li>
<li><a href="onepage-landing.html">One Page - App Landing</a></li>
<li><a href="onepage-resume.html">One Page - Resume</a></li>
<li><a href="onepage-medical.html">One Page - Medical</a></li>
<li><a href="onepage-gym.html">One Page - Gym</a></li>
<li><a href="onepage-church.html">One Page - church</a></li>
<li><a href="onepage-charity.html">One Page - Charity</a></li>
<li><a href="onepage-corporate.html">One Page - Corporate</a></li>
</ul>
</li><li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Nav Style</a>
<ul class="dropdown-menu yamm-sm">
<li><a href="index-nav-with-topbar.html">Nav With Topbar</a></li>
<li><a href="index-nav-without-topbar.html">Nav Without Topbar</a></li>
<li><a href="index-bottom-nav-style.html">Bottom Nav Style</a></li>
<li><a href="index-bottom-nav-with-blackbar.html">Bottom Nav with Topbar</a></li>
<li><a href="index-transparent.html">Transparent Nav</a></li>
</ul>
</li>
<li class="dropdown yamm-fw">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Pages</a>
<ul class="dropdown-menu">
<li>
<div class="yamm-content">
<div class="row">
<div class="col-xs-12 col-sm-3 m-submenu first">
<a href="about-us.html">About Us</a>
<a href="pricing.html">Pricing Tables</a>
<a href="testimonials.html">Testimonials</a>
<a href="testimonials-2.html">Testimonials: 2</a>
<a href="404-error-page.html">404 Error Page</a>
</div>
<div class="col-xs-12 col-sm-3 m-submenu">
<a href="services-2.html">Services: 1</a>
<a href="services-3.html">Services: 2</a>
<a href="services-4.html">Services: 3</a>
<a href="services-5.html">Services: 4</a>
<a href="services-6.html">Services: 5</a>
</div>
<div class="col-xs-12 col-sm-3 m-submenu">
<a href="meet-the-team.html">Meet The Team</a>
<a href="faq.html">F.A.Q.</a>
<a href="full-width-page.html">Full Width Page</a>
<a href="side-navigation.html">Side Navigation</a>
<a href="search-results.html">Search Results</a>
</div>
<div class="col-xs-12 col-sm-3 m-submenu">
<a href="page-with-right-sidebar.html">Page With Right Sidebar</a>
<a href="page-with-left-sidebar.html">Page With Left Sidebar</a>
<a href="no-title-bar.html">No Title Bar</a>
<a href="contact-us-1.html">Contact Us 1</a>
<a href="contact-us-2.html">Contact Us 2</a>
</div>
</div>
</div>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Portfolio</a>
<ul class="dropdown-menu yamm-sm">
<li><a href="portfolio-2-columns.html">Portfolio: 2 Columns</a></li>
<li><a href="portfolio-3-columns.html">Portfolio: 3 Columns</a></li>
<li><a href="portfolio-4-columns.html">Portfolio: 4 Columns</a></li>
<li class="dropdown-submenu">
<a href="#">Single Project: Wide</a>
<ul class="dropdown-menu">
<li><a href="portfolio-single-wide-image.html">Image</a></li>
<li><a href="portfolio-single-wide-slider.html">Slider</a></li>
<li><a href="portfolio-single-wide-video.html">Video</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a href="#">Single Project: Half</a>
<ul class="dropdown-menu">
<li><a href="portfolio-single-half-image.html">Image</a></li>
<li><a href="portfolio-single-half-slider.html">Slider</a></li>
<li><a href="portfolio-single-half-video.html">Video</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Blog</a>
<ul class="dropdown-menu yamm-sm">
<li><a href="blog-large.html">Blog: Large Images</a></li>
<li><a href="blog-medium.html">Blog: Medium Images</a></li>
<li class="dropdown-submenu">
<a href="#">Blog: Single Post</a>
<ul class="dropdown-menu">
<li><a href="blog-single-image.html">Image</a></li>
<li><a href="blog-single-slider.html">Slider</a></li>
<li><a href="blog-single-video.html">Video</a></li>
</ul>
</li>
<li><a href="news.html">News</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Elements</a>
<ul class="dropdown-menu yamm-sm">
<li><a href="icon-boxes-1.html">Icon Boxes: 1</a></li>
<li><a href="icon-boxes-2.html">Icon Boxes: 2</a></li>
<li><a href="elements.html">Elements</a></li>
<li><a href="images.html">Images & Gallery</a></li>
<li><a href="lists.html">Lists</a></li>
<li><a href="columns.html">Grid Columns</a></li>
<li><a href="typography.html">Typography</a></li>
<li><a href="media.html">Media</a></li>
<li><a href="pricing-elements.html">Elements of Prices</a></li>
</ul>
</li>
<li class="dropdown">
<a href="./contact-us-1.html" data-toggle="dropdown" class="dropdown-toggle"><i class="shopping-cart"></i>Shop</a>
<ul class="dropdown-menu yamm-sm">
<li><a href="./shop.html">Shop - Home</a></li>
<li><a href="./shop-single.html">Shop - Single</a></li>
<li><a href="./shop_checkout.html">Shop - Checkout</a></li>
<li><a href="./shop_cart.html">Shop - Cart</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</header>
</div>
<!-- END HEADER
============================================= -->
<!-- SLIDER -->
<div class="slider-wrap">
<div class="tp-banner-container">
<div class="tp-banner" >
<ul>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="1" data-masterspeed="1500" data-thumb="" data-delay="13000" data-saveperformance="off" data-title="Our Workplace">
<img src="images/slider/1/1.jpg" alt="kenburns1" data-bgposition="left center" data-kenburns="on" data-duration="14000" data-ease="Linear.easeNone" data-bgfit="100" data-bgfitend="130" data-bgpositionend="right center">
<div class="tp-caption customin customout tp-resizeme"
data-x="left" data-hoffset="60"
data-y="170"
data-customin="x:0;y:0;z:0;rotationX:90;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="1000"
data-start="500"
data-easing="Back.easeInOut"
data-endspeed="300"
style="font-size:80px;color:#fff;text-transform:uppercase;font-weight: 800 !important;letter-spacing: 0px;line-height: 120% !important;"
>Creative <br>
Clean Design
</div>
<div class="tp-caption light_title customin customout tp-resizeme"
data-x="left" data-hoffset="60"
data-y="370"
data-customin="x:0;y:0;z:0;rotationX:90;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="1000"
data-start="700"
data-easing="Back.easeInOut"
data-endspeed="300"
style="font-size:18px;color:#fff;"
>Your website should look great across all devices, no matter how big <br>
or small. Take control of your content’s presentation.
</div>
<a href="#" class="tp-caption small_title customin customout tp-resizeme"
data-x="left" data-hoffset="60"
data-y="450"
data-customin="x:0;y:0;z:0;rotationX:90;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="1600"
data-start="900"
data-easing="Back.easeInOut"
data-endspeed="300" style=" background: #000;
padding:18px 28px;
color: #fff;
text-transform: uppercase;
border: none;
font-size: 13px;
letter-spacing: 2px;
border-radius: 0px;
display: table;
transition: .4s;
border-radius:5px;
">Buy now</a>
</li>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="7" data-masterspeed="2000" data-saveperformance="on" data-title="Ken Burns Slide">
<!-- MAIN IMAGE -->
<img src="images/dummy.png" alt="2" data-lazyload="images/slider/1/2.jpg" data-bgposition="right top" data-kenburns="on" data-duration="12000" data-ease="Power0.easeInOut" data-bgfit="115" data-bgfitend="100" data-bgpositionend="center bottom">
<!-- LAYERS -->
<!-- LAYER NR. 1 -->
<div class="tp-caption small_text lft tp-resizeme rs-parallaxlevel-0"
data-x="center"
data-y="210"
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="500"
data-start="1200"
data-easing="Power3.easeInOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.05"
data-endelementdelay="0.1"
style="z-index: 9; max-width: auto; max-height: auto; white-space: nowrap;
min-height: 0px;
position: absolute;
color: #fff;
text-shadow: none;
font-weight: 400;
font-size: 14px;
line-height: 20px;
margin: 0px;
border-width: 0px;
border-style: none;
text-transform: uppercase;
white-space: nowrap;
letter-spacing: 1.8px;
"><span>Why you choose this template</span>
</div>
<!-- LAYER NR. 2 -->
<div class="tp-caption small_text customin tp-resizeme rs-parallaxlevel-0"
data-x="center"
data-y="256"
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="500"
data-start="1400"
data-easing="Power3.easeInOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.1"
data-endelementdelay="0.1"
style="z-index: 7; max-width: auto; max-height: auto; white-space: nowrap; width: 60px !important;
height: 1px !important;
background: #fff !important;
">
<p class="line white"></p>
</div>
<!-- LAYER NR. 3 -->
<div class="tp-caption finewide_medium_white lfl tp-resizeme rs-parallaxlevel-0 center-align"
data-x="center"
data-y="280"
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="500"
data-start="1800"
data-easing="Power3.easeInOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.1"
data-endelementdelay="0.1"
style="z-index: 8; max-width: auto; max-height: auto; white-space: nowrap; color: #222222;
text-shadow: none;
font-size: 48px;
line-height: 50px;
font-weight: 900;
background-color: none;
text-decoration: none;
font-family:Open Sans, sans-serif;
text-transform: uppercase;
border-width: 0px;
color: #fff;
text-align:center;
border-color: transparent;
border-style: none;
letter-spacing: 2.5;
"><span>A Creative way to show <br> your projects</span>
</div>
<!-- LAYER NR. 4 -->
<div class="tp-caption small_text customin tp-resizeme rs-parallaxlevel-0"
data-x="center"
data-y="405"
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="500"
data-start="2000"
data-easing="Power3.easeInOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.1"
data-endelementdelay="0.1"
style="z-index: 7; max-width: auto; max-height: auto; white-space: nowrap;">
<p class="line white"></p>
</div>
<!-- LAYER NR. 5 -->
<div class="tp-caption small_text lfr tp-resizeme rs-parallaxlevel-0"
data-x="center"
data-y="435"
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="500"
data-start="2400"
data-easing="Power3.easeInOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.1"
data-endelementdelay="0.1"
style="z-index: 7; max-width: auto; max-height: auto; white-space: nowrap; position: absolute;
color: #222222;
text-shadow: none;
font-weight: 400;
font-size: 14px;
line-height: 20px;
margin: 0px;
border-width: 0px;
font-family:Open Sans, sans-serif;
text-transform: uppercase;
white-space: nowrap;
color: #fff;
letter-spacing: 1.8px;
"><span>Create UNLIMITED portfolios and showcase them ANYWHERE</span>
</div>
<!-- LAYER NR. 6 -->
<a href="#" class="tp-caption lfb tp-resizeme rs-parallaxlevel-0"
data-x="center"
data-y="490"
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="500"
data-start="2800"
data-easing="Power3.easeInOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.1"
data-endelementdelay="0.1"
data-linktoslide="next"
style="z-index: 12; max-width: auto; max-height: auto; white-space: nowrap;padding:18px 28px;
color: #fff;
text-transform: uppercase;
border: none;
background:#000;
font-size: 13px;
letter-spacing: 2px;
font-family: Montserrat;
border-radius: 0px;
display: table;
transition: .4s;
border-radius:5px;">buy this theme</a>
</li>
<!-- SLIDE -->
</ul>
<div class="tp-bannertimer"></div>
</div>
</div>
</div>
<div class="inner-content no-padding">
<div class="space40"></div>
<div class="container">
<div class="space60"></div>
<div class="welcome-content text-center">
<h3 class="uppercase text-center">Welcome to Boson</h3>
<p class="lead">The best looking template with mindblowing features</p>
</div>
</div>
<div class="container padding50">
<div class="services">
<div class="row">
<div class="col-md-3">
<div class="service-content text-center">
<span><i class="icon-desktop"></i></span>
<div class="services-content">
<h2>Responsive Design</h2>
<p>Curabitur eleifend leo justo id risus vel imperdiet justo a cursus risusauctor ullamcorper elit a feugiat.</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="service-content text-center">
<span><i class="icon-gears"></i></span>
<div class="services-content">
<h2>Fully Customizable</h2>
<p>Curabitur eleifend leo justo id risus vel imperdiet justo a cursus risusauctor ullamcorper elit a feugiat.</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="service-content text-center">
<span><i class="icon-layers"></i></span>
<div class="services-content">
<h2>unlimited Layouts</h2>
<p>Curabitur eleifend leo justo id risus vel imperdiet justo a cursus risusauctor ullamcorper elit a feugiat.</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="service-content text-center">
<span><i class="icon-refresh"></i></span>
<div class="services-content">
<h2>Live Support</h2>
<p>Curabitur eleifend leo justo id risus vel imperdiet justo a cursus risusauctor ullamcorper elit a feugiat.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="border-top padding50">
<div class="container">
<div class="section-about">
<div class="row">
<div class="col-md-6">
<div>
<img src="images/other/6.png" class="img-responsive" alt="">
</div>
</div>
<div class="col-md-6">
<div>
<div class="space70"></div>
<h3>Who We Are &amp; What We Do</h3>
<p>Cum nascetur ridiculus mus. Prae sent non sem eu mi malesuada viverra volutpat ut libero. Nullam a venenatis tellus. Nam fen convallis tristique. In imperdiet est sed aliquet imperdiet. Nulla libero orci, cursus ut consecr ac, tempus a odio. Etiam quis massa ac ante adipiscing consectetur. Duis dui turpis, porttitor sit amet metus sed, interdum tempus ipsum. Integer aliquam sem elementum pellentesque. Donec mollis eros dolor, a ongue neque venenatis vulputate. Etiam a eros adipiscing, dapibus ante id, luctus massa. Maecenas non quam interdum, aliquam leo a, ornare mi. Integer. faucibus turpis sed leo gravida laoreet. Curabitur at ligula. </p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="space50"></div>
<section id="portfolio-section" class="border-top padding70">
<div class="container">
<h2 class="uppercase text-center">Recent Works</h2>
</div>
<ul class="filter" data-option-key="filter">
<li><a class="selected" href="#filter" data-option-value="*">All</a></li>
<li><a href="#" data-option-value=".branding">Branding</a></li>
<li><a href="#" data-option-value=".illustration">Illustration</a></li>
<li><a href="#" data-option-value=".web-design">Web Design</a></li>
<li><a href="#" data-option-value=".print">Print</a></li>
</ul>
<div id="portfolio-home" class="isotope">
<div class="project-item photography branding">
<div class="project-gal">
<img src="images/projects/1.jpg" class="img-responsive" alt="">
<div class="overlay-folio">
<div class="hover-box">
<div class="hover-zoom">
<a class="mp-lightbox zoom" href="images/projects/1.jpg"><i class="fa fa-search"></i></a>
<a class="link" href="portfolio-single-slider.html"><i class="icon-link3"></i></a>
</div>
</div>
</div>
</div>
<div class="project-info">
<h2>Vestibulum Auctor</h2>
<p>Web , Creative</p>
</div>
</div>
<div class="project-item illustration web-design illustration">
<div class="project-gal">
<img src="images/projects/2.jpg" class="img-responsive" alt="">
<div class="overlay-folio">
<div class="hover-box">
<div class="hover-zoom">
<a class="mp-lightbox zoom" href="images/projects/2.jpg"><i class="fa fa-search"></i></a>
<a class="link" href="portfolio-single-slider.html"><i class="icon-link3"></i></a>
</div>
</div>
</div>
</div>
<div class="project-info">
<h2>Vestibulum auctor</h2>
<p>Image Gallery</p>
</div>
</div>
<div class="project-item illustration print">
<div class="project-gal">
<img src="images/projects/3.jpg" class="img-responsive" alt="">
<div class="overlay-folio">
<div class="hover-box">
<div class="hover-zoom">
<a class="mp-lightbox zoom" href="images/projects/3.jpg"><i class="fa fa-search"></i></a>
<a class="link" href="portfolio-single-slider.html"><i class="icon-link3"></i></a>
</div>
</div>
</div>
</div>
<div class="project-info">
<h2>Vestibulum Auctor</h2>
<p>Photoshop</p>
</div>
</div>
<div class="project-item photography web-design">
<div class="project-gal">
<img src="images/projects/4.jpg" class="img-responsive" alt="">
<div class="overlay-folio">
<div class="hover-box">
<div class="hover-zoom">
<a class="mp-lightbox zoom" href="images/projects/4.jpg"><i class="fa fa-search"></i></a>
<a class="link" href="portfolio-single-slider.html"><i class="icon-link3"></i></a>
</div>
</div>
</div>
</div>
<div class="project-info">
<h2>Vestibulum Auctor</h2>
<p>UI/UX, Web Design</p>
</div>
</div>
<div class="project-item branding">
<div class="project-gal">
<img src="images/projects/5.jpg" class="img-responsive" alt="">
<div class="overlay-folio">
<div class="hover-box">
<div class="hover-zoom">
<a class="mp-lightbox zoom" href="images/projects/5.jpg"><i class="fa fa-search"></i></a>
<a class="link" href="portfolio-single-slider.html"><i class="icon-link3"></i></a>
</div>
</div>
</div>
</div>
<div class="project-info">
<h2>Vestibulum Auctor</h2>
<p>Web Development</p>
</div>
</div>
<div class="project-item illustration web-design print">
<div class="project-gal">
<img src="images/projects/6.jpg" class="img-responsive" alt="">
<div class="overlay-folio">
<div class="hover-box">
<div class="hover-zoom">
<a class="mp-lightbox zoom" href="images/projects/6.jpg"><i class="fa fa-search"></i></a>
<a class="link" href="portfolio-single-slider.html"><i class="icon-link3"></i></a>
</div>
</div>
</div>
</div>
<div class="project-info">
<h2>Vestibulum Auctor</h2>
<p>Creative, Web</p>
</div>
</div>
<div class="project-item photography branding illustration">
<div class="project-gal">
<img src="images/projects/7.jpg" class="img-responsive" alt="">
<div class="overlay-folio">
<div class="hover-box">
<div class="hover-zoom">
<a class="mp-lightbox zoom" href="images/projects/7.jpg"><i class="fa fa-search"></i></a>
<a class="link" href="portfolio-single-slider.html"><i class="icon-link3"></i></a>
</div>
</div>
</div>
</div>
<div class="project-info">
<h2>Vestibulum Auctor</h2>
<p>Image Gallery</p>
</div>
</div>
<div class="project-item illustration web-design">
<div class="project-gal">
<img src="images/projects/8.jpg" class="img-responsive" alt="">
<div class="overlay-folio">
<div class="hover-box">
<div class="hover-zoom">
<a class="mp-lightbox zoom" href="images/projects/8.jpg"><i class="fa fa-search"></i></a>
<a class="link" href="portfolio-single-slider.html"><i class="icon-link3"></i></a>
</div>
</div>
</div>
</div>
<div class="project-info">
<h2>Vestibulum Auctor</h2>
<p>Image Gallery</p>
</div>
</div>
<div class="project-item branding web-design print">
<div class="project-gal">
<img src="images/projects/9.jpg" class="img-responsive" alt="">
<div class="overlay-folio">
<div class="hover-box">
<div class="hover-zoom">
<a class="mp-lightbox zoom" href="images/projects/9.jpg"><i class="fa fa-search"></i></a>
<a class="link" href="portfolio-single-slider.html"><i class="icon-link3"></i></a>
</div>
</div>
</div>
</div>
<div class="project-info">
<h2>Vestibulum Auctor</h2>
<p>Image Gallery</p>
</div>
</div>
<div class="project-item photography branding">
<div class="project-gal">
<img src="images/projects/10.jpg" class="img-responsive" alt="">
<div class="overlay-folio">
<div class="hover-box">
<div class="hover-zoom">
<a class="mp-lightbox zoom" href="images/projects/10.jpg"><i class="fa fa-search"></i></a>
<a class="link" href="portfolio-single-slider.html"><i class="icon-link3"></i></a>
</div>
</div>
</div>
</div>
<div class="project-info">
<h2>Vestibulum Auctor</h2>
<p>Image Gallery</p>
</div>
</div>
</div>
</section>
<div class="pattern-grey padding80">
<div id="stats4" class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="stats1-info">
<p><span class="count count4">200</span></p>
<h2>Completed Projects</h2>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="stats1-info">
<p><span class="count count4">150</span></p>
<h2>Awards Received</h2>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="stats1-info">
<p><span class="count count4">387</span></p>
<h2>Happy Clients</h2>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="stats1-info">
<p><span class="count count4">1540</span></p>
<h2>Coffee Consumed</h2>
</div>
</div>
</div>
</div>
</div>
<div class="space30"></div>
<div class="container padding40">
<div class="row" id="team2">
<h3 class="uppercase text-center no-margin">Our Awesome team</h3>
<div class="space50"></div>
<div class="col-md-3 margin-bottom-xs-30">
<div class="staff-img">
<img src="images/team/1.jpg" class="img-responsive" alt="">
</div>
<h2>Maud Elfreda</h2>
<span>Marketing Expert</span>
<div class="space10"></div>
<div class="text-center">
<p>Nam quis convallis erat, a fermentum tortor. Aliquam auctor felis eu mi tincidunt mollis. Morbi quis viverra lectus, eu accumsan nunc.</p>
<ul class="team-social">
<li><a class="facebook" href="#"><i class="fa fa-facebook"></i></a></li>
<li><a class="twitter" href="#"><i class="fa fa-twitter"></i></a></li>
<li><a class="google" href="#"><i class="fa fa-google-plus"></i></a></li>
<li><a class="pinterest" href="#"><i class="fa fa-pinterest"></i></a></li>
</ul>
</div>
</div>
<div class="col-md-3 margin-bottom-xs-30">
<div class="staff-img">
<img src="images/team/2.jpg" class="img-responsive" alt="">
</div>
<h2>Maud Elfreda</h2>
<span>Marketing Expert</span>
<div class="space10"></div>
<div class="text-center">
<p>Nam quis convallis erat, a fermentum tortor. Aliquam auctor felis eu mi tincidunt mollis. Morbi quis viverra lectus, eu accumsan nunc.</p>
<ul class="team-social">
<li><a class="facebook" href="#"><i class="fa fa-facebook"></i></a></li>
<li><a class="twitter" href="#"><i class="fa fa-twitter"></i></a></li>
<li><a class="google" href="#"><i class="fa fa-google-plus"></i></a></li>
<li><a class="pinterest" href="#"><i class="fa fa-pinterest"></i></a></li>
</ul>
</div>
</div>
<div class="col-md-3 margin-bottom-xs-30">
<div class="staff-img">
<img src="images/team/3.jpg" class="img-responsive" alt="">
</div>
<h2>Maud Elfreda</h2>
<span>Marketing Expert</span>
<div class="space10"></div>
<div class="text-center">
<p>Nam quis convallis erat, a fermentum tortor. Aliquam auctor felis eu mi tincidunt mollis. Morbi quis viverra lectus, eu accumsan nunc.</p>
<ul class="team-social">
<li><a class="facebook" href="#"><i class="fa fa-facebook"></i></a></li>
<li><a class="twitter" href="#"><i class="fa fa-twitter"></i></a></li>
<li><a class="google" href="#"><i class="fa fa-google-plus"></i></a></li>
<li><a class="pinterest" href="#"><i class="fa fa-pinterest"></i></a></li>
</ul>
</div>
</div>
<div class="col-md-3 margin-bottom-xs-30">
<div class="staff-img">
<img src="images/team/4.jpg" class="img-responsive" alt="">
</div>
<h2>Maud Elfreda</h2>
<span>Marketing Expert</span>
<div class="space10"></div>
<div class="text-center">
<p>Nam quis convallis erat, a fermentum tortor. Aliquam auctor felis eu mi tincidunt mollis. Morbi quis viverra lectus, eu accumsan nunc.</p>
<ul class="team-social">
<li><a class="facebook" href="#"><i class="fa fa-facebook"></i></a></li>
<li><a class="twitter" href="#"><i class="fa fa-twitter"></i></a></li>
<li><a class="google" href="#"><i class="fa fa-google-plus"></i></a></li>
<li><a class="pinterest" href="#"><i class="fa fa-pinterest"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix space30"></div>
<div class="pattern-grey padding50">
<div class="container space10">
<div class="testimonial-box">
<div id="testimonial" class="owl-carousel">
<div class="quote-info">
<img src="images/quote/1.jpg" class="img-responsive" alt="">
<p>Duis iaculis mauris dui tellus arcu rhoncus tellus non suscipit nisl tincidunt eget. Mauris in porta sapien. Pellentesque luctus urna volutpat, mollis dolor porttitor, rutrum sem. Aliquam vitae orci a libero iaculis sollicitudin. Sed ullamcorper lorem justo, ut elementum enim dapibus vel.</p>
<h2>David Billie</h2>
</div>
<div class="quote-info">
<img src="images/quote/2.jpg" class="img-responsive" alt="">
<p>Duis iaculis mauris dui tellus arcu rhoncus tellus non suscipit nisl tincidunt eget. Mauris in porta sapien. Pellentesque luctus urna volutpat, mollis dolor porttitor, rutrum sem. Aliquam vitae orci a libero iaculis sollicitudin. Sed ullamcorper lorem justo, ut elementum enim dapibus vel.</p>
<h2>Katey Thane</h2>
</div>
<div class="quote-info">
<img src="images/quote/3.jpg" class="img-responsive" alt="">
<p>Duis iaculis mauris dui tellus arcu rhoncus tellus non suscipit nisl tincidunt eget. Mauris in porta sapien. Pellentesque luctus urna volutpat, mollis dolor porttitor, rutrum sem. Aliquam vitae orci a libero iaculis sollicitudin. Sed ullamcorper lorem justo, ut elementum enim dapibus vel.</p>
<h2>Wally Buddy</h2>
</div>
</div>
</div>
</div>
</div>
<div class="clients container padding80">
<h4 class="uppercase space40 text-center">Our awesome Clients</h4>
<div id="carousel_five" class="owl-carousel">
<div class="item client-logo">
<a href="#"><img src="images/clients/1.png" class="img-responsive" alt=""/></a>
</div>
<div class="item client-logo">
<a href="#"><img src="images/clients/2.png" class="img-responsive" alt=""/></a>
</div>
<div class="item client-logo">
<a href="#"><img src="images/clients/3.png" class="img-responsive" alt=""/></a>
</div>
<div class="item client-logo">
<a href="#"><img src="images/clients/4.png" class="img-responsive" alt=""/></a>
</div>
<div class="item client-logo">
<a href="#"><img src="images/clients/5.png" class="img-responsive" alt=""/></a>
</div>
<div class="item client-logo">
<a href="#"><img src="images/clients/6.png" class="img-responsive" alt=""/></a>
</div>
<div class="item client-logo">
<a href="#"><img src="images/clients/7.png" class="img-responsive" alt=""/></a>
</div>
</div>
</div>
<!-- TWEET / SUBSCRIBE -->
<div class="footer-top">
<div class="container">
<div class="row">
<div class="col-md-6 f-tweet">
<small>Follow<em>Twitter</em></small>
<div class="tweet-info">
<div id="tweetcool"></div>
</div>
</div>
<div class="col-md-6 f-subscribe">
<small>Sign up<em>Newsletter</em></small>
<form>
<input placeholder="Search here ..." type="text">
<button type="submit">Subscribe</button>
</form>
</div>
</div>
</div>
</div>
<!-- FOOTER -->
<footer>
<div class="container">
<div class="row">
<div class="col-md-3 margin-bottom-xs-30">
<h4 class="space30">About us</h4>
<img src="img/logo.png" alt="" style="margin-bottom: 10px;">
<p>Lorem ipsum dolor sit amet consec tetur elit vel quam ligula. Duis vel pulvinar diam in lacus non nisl commodo convallis.</p>
<p>Phasellus rutrum urna ut nibh congue, ut vehicula nibh ultricies.</p>
</div>
<div class="col-md-3 margin-bottom-xs-30">
<h4 class="space30">Recent Posts</h4>
<ul class="f-posts">
<li>
<img src="images/blog/1/1.jpg" class="img-responsive" alt=""/>
<h5><a href="#">Lorem ipsum post title</a></h5>
<p><i class="fa fa-comments"></i> 5 Comments</p>
</li>
<li>
<img src="images/blog/1/2.jpg" class="img-responsive" alt=""/>
<h5><a href="#">Lorem ipsum post title</a></h5>
<p><i class="fa fa-comments"></i> 5 Comments</p>
</li>
<li>
<img src="images/blog/1/3.jpg" class="img-responsive" alt=""/>
<h5><a href="#">Lorem ipsum post title</a></h5>
<p><i class="fa fa-comments"></i> 5 Comments</p>
</li>
</ul>
</div>
<div class="col-md-3 margin-bottom-xs-30">
<h4 class="space30">Contact</h4>
<ul class="c-info">
<li><i class="fa fa-map-marker"></i> 72 Wall street Rd<br>Some county<br>Newyork 20001
</li>
<li>
</li>
<li><i class="fa fa-phone"></i> (012) 345 5678 910</li>
<li><i class="fa fa-envelope-o"></i> support@dk-themes.com</li>
<li><i class="fa fa-skype"></i> myskypeid</li>
</ul>
<div class="clearfix space10"></div>
</div>
<div class="col-md-3 margin-bottom-xs-30">
<h4 class="space30">Flickr</h4>
<ul id="flickr" class="thumbs"></ul>
</div>
</div>
</div>
</footer>
<!-- FOOTER COPYRIGHT -->
<div class="footer-bottom">
<div class="container">
<div class="row">
<div class="col-md-7">
<span class="copy">Copyright &copy; 2016 <a href="index.html">Boson</a>. All Right Reserved.</span>
</div>
<div class="col-md-5">
<div class="f-social pull-right">
<a class="fa fa-twitter" href="#"></a>
<a class="fa fa-facebook" href="#"></a>
<a class="fa fa-linkedin" href="#"></a>
<a class="fa fa-dribbble" href="#"></a>
<a class="fa fa-google-plus" href="#"></a>
<a class="fa fa-skype" href="#"></a>
<a class="fa fa-behance" href="#"></a>
<a class="fa fa-stumbleupon" href="#"></a>
<a class="fa fa-rss" href="#"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div> <!-- /.content-wrapper -->
</div> <!-- .offcanvas-pusher -->
</div><!-- /#main-wrapper -->
<!-- STYLE SWITCHER
============================================= -->
<div class="b-settings-panel">
<div class="settings-section">
<span>
Boxed
</span>
<div class="b-switch">
<div class="switch-handle"></div>
</div>
<span>
Wide
</span>
</div>
<hr class="dashed" style="margin: 15px 0px;">
<h5>Main Background</h5>
<div class="settings-section bg-list">
<div class="bg-pattern1"></div>
<div class="bg-pattern2"></div>
<div class="bg-pattern6"></div>
<div class="bg-pattern10"></div>
<div class="bg-pattern16"></div>
<div class="bg-pattern4"></div>
<div class="bg-pattern5"></div>
<div class="bg-pattern7"></div>
<div class="bg-pattern9"></div>
<div class="bg-pattern11"></div>
<div class="bg-pattern12"></div>
<div class="bg-pattern13"></div>
<div class="bg-pattern17"></div>
<div class="bg-pattern8"></div>
<div class="bg-pattern14"></div>
<div class="bg-pattern15"></div>
<div class="bg-pattern3"></div>
<div class="bg-pattern18"></div>
</div>
<hr class="dashed" style="margin: 15px 0px;">
<h5>Color Scheme</h5>
<div class="settings-section color-list">
<div data-src="css/color-scheme/moderate-green.css" style="background: #8ec249"></div>
<div data-src="css/color-scheme/vivid-blue.css" style="background: #228dff"></div>
<div data-src="css/color-scheme/orange.css" style="background: #fa6900"></div>
<div data-src="css/color-scheme/brown.css" style="background: #a68c69"></div>
<div data-src="css/color-scheme/yellow.css" style="background: #fabe28"></div>
<div data-src="css/color-scheme/violet.css" style="background: #ba01ff"></div>
<div data-src="css/color-scheme/strong-cyan.css" style="background: #00b9bd"></div>
<div data-src="css/color-scheme/soft-cyan.css" style="background: #4bd5ea"></div>
<div data-src="css/color-scheme/red.css" style="background: #ff0104"></div>
<div data-src="css/color-scheme/lite-brown.css" style="background: #f3a76d"></div>
<div data-src="css/color-scheme/lime-green.css" style="background: #3bdbad"></div>
<div data-src="css/color-scheme/light-voilet.css" style="background: #aaa5ff"></div>
<div data-src="css/color-scheme/gray-green.css" style="background: #697060"></div>
<div data-src="css/color-scheme/gray-cyan.css" style="background: #aeced2"></div>
<div data-src="css/color-scheme/de-green.css" style="background: #b6cd71"></div>
<div data-src="css/color-scheme/cream.css" style="background: #e0d6b2"></div>
</div>
<div class="btn-settings"></div>
</div>
<!-- END STYLE SWITCHER
============================================= -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Plugins -->
<script src="js/bootstrap.min.js"></script>
<script src="js/menu.js"></script>
<script src="js/owl-carousel/owl.carousel.min.js"></script>
<script src="js/rs-plugin/js/jquery.themepunch.tools.min.js"></script>
<script src="js/rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="js/isotope/isotope.pkgd.js"></script>
<script src="js/jflickrfeed.min.js"></script>
<script src="js/tweecool.js"></script>
<script src="js/flexslider/jquery.flexslider.js"></script>
<script src="js/easypie/jquery.easypiechart.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jquery.appear.js"></script>
<script src="js/jquery.inview.js"></script>
<script src="js/jquery.countdown.min.js"></script>
<script src="js/jquery.sticky.js"></script>
<script src="js/magnific-popup/jquery.magnific-popup.min.js"></script>
<script src="js/hippo-off-canvas.js"></script>
<script src="js/main.js"></script>
<script src="js/menu-target.js"></script>
</body>
</html>