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

1131 lines
52 KiB
HTML
Raw Blame History

<!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/jquery.easing.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>
<!-- Filtering -->
<script src="js/jquery.isotope.min.js"></script>
<script src="js/filter.js"></script>
<!-- Prety photo -->
<script src="js/jquery.prettyPhoto.js"></script>
<script>
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
</head>
<body class="onepage-body">
<div class="main">
<!-- HEADER
============================================= -->
<div>
<!-- REVOLUTION SLIDER
============================================= -->
<div class="fullwidthbanner-container top-shadow">
<div class="fullwidthbanner">
<ul>
<!-- Slide 1 -->
<li data-masterspeed="300" data-slotamount="2" data-transition="fade">
<!-- Main Image -->
<img alt="" src="img/slider/Slider-8.jpg">
<!-- End Main Image -->
<!-- Captions -->
<div class="tp-caption sfr" data-easing="easeOutExpo" data-speed="700" data-start="600" data-x="540" data-y="39">
<img alt="" src="img/slider/coffee.png">
</div>
<div class="tp-caption sfb" data-easing="easeInOutBack" data-speed="300" data-start="1500" data-x="730" data-y="110">
<img alt="" src="img/slider/coffee-thumb-up.png">
</div>
<div class="tp-caption sfb" data-easing="easeInOutBack" data-speed="700" data-start="800" data-x="460" data-y="210">
<img alt="" src="img/slider/spoon.png">
</div>
<div class="tp-caption m-3-2em m-text-black m-semibold sft" data-easing="easeOutExpo" data-speed="700" data-start="1400" data-x="40" data-y="130">
<span>Corporis Suscipit Ratione</span>
</div>
<div class="tp-caption m-1-8em m-text-black sfr" data-easing="easeOutExpo" data-speed="700" data-start="1600" data-x="40" data-y="185">
<span>Animate Anything You Want!</span>
</div>
<div class="tp-caption sfb" data-easing="easeInOutExpo" data-speed="700" data-start="1700" data-x="40" data-y="233">
<a class="btn" href="#">Read More</a>
</div>
<div class="tp-caption sfb" data-easing="easeInOutExpo" data-speed="700" data-start="1800" data-x="165" data-y="233">
<a class="btn colored" href="#">Get Started</a>
</div>
<!-- End Captions -->
</li>
<!-- End Slide 1 -->
<!-- Slide 2 -->
<li data-masterspeed="300" data-slotamount="3" data-transition="fade">
<!-- Main Image -->
<img alt="" src="img/slider/Slider-8.jpg">
<!-- End Main Image -->
<!-- Captions -->
<div class="tp-caption sfr" data-easing="easeOutExpo" data-speed="700" data-start="600" data-x="640" data-y="9">
<img alt="" src="img/slider/women.png">
</div>
<div class="tp-caption sfb" data-easing="easeOutExpo" data-speed="700" data-start="900" data-x="369" data-y="327">
<img alt="" src="img/slider/graph-2.png">
</div>
<div class="tp-caption sfb" data-easing="easeOutExpo" data-speed="700" data-start="1000" data-x="433" data-y="298">
<img alt="" src="img/slider/graph-3.png">
</div>
<div class="tp-caption sfb" data-easing="easeOutExpo" data-speed="700" data-start="1100" data-x="511" data-y="261">
<img alt="" src="img/slider/graph-4.png">
</div>
<div class="tp-caption sfb" data-easing="easeOutExpo" data-speed="700" data-start="1200" data-x="579" data-y="236">
<img alt="" src="img/slider/graph-5.png">
</div>
<div class="tp-caption sfb" data-easing="easeOutExpo" data-speed="700" data-start="1300" data-x="651" data-y="197">
<img alt="" src="img/slider/graph-6.png">
</div>
<div class="tp-caption sfb" data-easing="easeOutExpo" data-speed="1700" data-start="1700" data-x="360" data-y="24">
<img alt="" src="img/slider/graph-7.png">
</div>
<div class="tp-caption fade" data-easing="easeOutExpo" data-speed="700" data-start="800" data-x="369" data-y="387">
<img alt="" src="img/slider/graph-1.png">
</div>
<div class="tp-caption m-3-2em m-text-black m-semibold sft" data-easing="easeOutExpo" data-speed="700" data-start="1400" data-x="40" data-y="130">
<span>Vitae Dicta Suscipit</span>
</div>
<div class="tp-caption m-1-8em m-text-black sfr" data-easing="easeOutExpo" data-speed="700" data-start="1600" data-x="40" data-y="185">
<span>Animate Anything You Want!</span>
</div>
<div class="tp-caption sfb" data-easing="easeInOutExpo" data-speed="700" data-start="1700" data-x="40" data-y="233">
<a class="btn" href="#">Read More</a>
</div>
<div class="tp-caption sfb" data-easing="easeInOutExpo" data-speed="700" data-start="1800" data-x="165" data-y="233">
<a class="btn colored" href="#">Get Started</a>
</div>
<!-- End Captions -->
</li>
<!-- End Slide 2 -->
<!-- Slide 3 -->
<li data-masterspeed="300" data-slotamount="4" data-transition="fade">
<!-- Main Image -->
<img alt="" src="img/slider/Slider-8.jpg">
<!-- End Main Image -->
<!-- Captions -->
<div class="tp-caption sfr" data-easing="easeOutExpo" data-speed="700" data-start="600" data-x="670" data-y="34">
<img alt="" src="img/slider/men.png">
</div>
<div class="tp-caption fade" data-easing="easeOutExpo" data-speed="700" data-start="1300" data-x="670" data-y="34">
<img alt="" src="img/slider/men-2.png">
</div>
<div class="tp-caption sft" data-easing="easeInOutBack" data-speed="700" data-start="900" data-x="526" data-y="23">
<img alt="" src="img/slider/lightbulb.png">
</div>
<div class="tp-caption fade" data-easing="easeOutExpo" data-speed="700" data-start="1300" data-x="526" data-y="23">
<img alt="" src="img/slider/lightbulb-2.png">
</div>
<div class="tp-caption m-3-2em m-text-black m-semibold sft" data-easing="easeOutExpo" data-speed="700" data-start="1400" data-x="40" data-y="130">
<span>Architecto Velit Beatae</span>
</div>
<div class="tp-caption m-1-8em m-text-black sfr" data-easing="easeOutExpo" data-speed="700" data-start="1600" data-x="40" data-y="185">
<span>Animate Anything You Want!</span>
</div>
<div class="tp-caption sfb" data-easing="easeInOutExpo" data-speed="700" data-start="1700" data-x="40" data-y="233">
<a class="btn" href="#">Read More</a>
</div>
<div class="tp-caption sfb" data-easing="easeInOutExpo" data-speed="700" data-start="1800" data-x="165" data-y="233">
<a class="btn colored" href="#">Get Started</a>
</div>
<!-- End Captions -->
</li>
<!-- End Slide 3 -->
<!-- Slide 4 -->
<li data-masterspeed="300" data-slotamount="1" data-transition="fade">
<!-- Main Image -->
<img alt="" src="img/slider/Slider-8.jpg">
<!-- End Main Image -->
<!-- Captions -->
<div class="tp-caption m-3-2em m-text-black m-semibold sft" data-easing="easeOutExpo" data-speed="700" data-start="1400" data-x="40" data-y="130">
<span>Tempora Incidunt</span>
</div>
<div class="tp-caption m-1-8em m-text-black sfr" data-easing="easeOutExpo" data-speed="700" data-start="1600" data-x="40" data-y="185">
<span>Animate Anything You Want!</span>
</div>
<div class="tp-caption sfb" data-easing="easeInOutExpo" data-speed="700" data-start="1800" data-x="40" data-y="233">
<a class="btn" href="#">Read More</a>
</div>
<div class="tp-caption sfb" data-easing="easeInOutExpo" data-speed="700" data-start="1900" data-x="165" data-y="233">
<a class="btn colored" href="#">Get Started</a>
</div>
<div class="tp-caption sfr" data-easing="easeOutExpo" data-speed="700" data-start="600" data-x="533" data-y="18">
<img alt="" src="img/slider/imac.png">
</div>
<div class="tp-caption sfr" data-easing="easeOutExpo" data-speed="700" data-start="800" data-x="703" data-y="152">
<img alt="" src="img/slider/macbook.png">
</div>
<div class="tp-caption sfr" data-easing="easeOutExpo" data-speed="700" data-start="1000" data-x="473" data-y="172">
<img alt="" src="img/slider/ipad.png">
</div>
<div class="tp-caption sfr" data-easing="easeOutExpo" data-speed="700" data-start="1200" data-x="616" data-y="258">
<img alt="" src="img/slider/iphone.png">
</div>
<!-- End Captions -->
</li>
<!-- End Slide 4 -->
</ul>
</div>
</div>
<!-- END REVOLUTION SLIDER
============================================= -->
<!-- TOP BAR
============================================= -->
<div class="b-top-bar">
<div class="container layout">
<!-- Some text -->
<div class="wrap-left">
<span class="top-bar-text">Duis autem vel eum iriure dolor in hendrerit.</span>
</div>
<div class="wrap-right">
<!-- Phone -->
<span class="top-bar-phone"><span class="icon-phone">Call us: </span> 1.244.145.3232</span>
<!-- Social Icons -->
<div class="top-bar-social">
<a class="fb" href="#"><i class="icon-facebook"></i></a>
<a class="tw" href="#"><i class="icon-twitter"></i></a>
<a class="lin" href="#"><i class="icon-linkedin"></i></a>
<a class="gl" href="#"><i class="icon-google-plus"></i></a>
<a class="dr" href="#"><i class="icon-dribbble"></i></a>
<a class="sk" href="#"><i class="icon-skype"></i></a>
<a class="rss" href="#"><i class="icon-rss"></i></a>
<!--
<a class="yt" href="#"><i class="icon-youtube"></i></a>
<a class="pt" href="#"><i class="icon-pinterest"></i></a>
<a class="tl" href="#"><i class="icon-tumblr"></i></a>
<a class="is" href="#"><i class="icon-instagram"></i></a>
<a class="vk" href="#"><i class="icon-vk"></i></a>
<a class="dx" href="#"><i class="icon-dropbox"></i></a>
<a class="fs" href="#"><i class="icon-foursquare"></i></a>
<a class="gh" href="#"><i class="icon-github-alt"></i></a>
<a class="mx" href="#"><i class="icon-maxcdn"></i></a>
-->
</div>
<!-- End Social Icons -->
</div>
</div>
</div>
<!-- END TOP BAR
============================================= -->
<header class="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 pull-right">
<div class="input-wrap">
<input type="text" placeholder="Search..">
</div>
</form>
<!-- End Search Form -->
<!-- Navigation -->
<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>
</div>
<!-- END HEADER
============================================= -->
<!-- CONTENT
============================================= -->
<div class="onepage-content onepage-content1">
<div id="about" class="shortcodes">
<div class="container layout">
<div class="row">
<div class="row-item col-md-12">
<div class="margin-50"></div>
<h1 class="lined centered margin-30">We are Boson</h1>
<div class="margin-10"></div>
<p class="intro">We are utmost <strong class="colored">Creative Agency</strong> located in Melbourne, Australia. Praesent rhoncus nunc <strong class="colored">vitae metus</strong> condimentum viverra.</p>
<div class="gap" style="height:10px"></div>
</div>
</div>
</div>
</div>
<div class="shortcodes content gray-content">
<div class="container layout no-pad-bottom">
<div class="row">
<div class="row-item col-md-12">
<h2 class="centered semibold uppercase">WHAT WE DO?</h2>
<p class="centered p-20" style="color: #6e6e73;">POWERFUL WEBSITES THAT LOOK BEAUTIFUL.</p>
<div class="margin-20"></div>
<div class="row">
<div class="row-item col-md-4">
<div class="b-service">
<a href=""><i class="icon-magic m-colored "></i></a>
<h3 class="centered"><a href="" class="dark-link">Innovative</a></h3>
<p class="centered">
Pellentesquemattis arcu malesuada in. Donec urna sem, rutrum sit amet pellentesque vel, suscipit at metus.
</p>
</div>
</div>
<div class="row-item col-md-4">
<div class="b-service">
<a href=""><i class="icon-plane m-colored "></i></a>
<h3 class="centered"><a href="" class="dark-link">Experimental</a></h3>
<p class="centered">
Pellentesquemattis arcu malesuada in. Donec urna sem, rutrum sit amet pellentesque vel, suscipit at metus.
</p>
</div>
</div>
<div class="row-item col-md-4">
<div class="b-service">
<a href=""><i class="icon-thumbs-up m-colored "></i></a>
<h3 class="centered"><a href="" class="dark-link">Perfect</a></h3>
<p class="centered">
Pellentesquemattis arcu malesuada in. Donec urna sem, rutrum sit amet pellentesque vel, suscipit at metus.
</p>
</div>
</div>
</div>
<div class="margin-40"></div>
</div>
</div>
</div>
</div>
<div class="shortcodes parallax" data-stellar-background-ratio="0.5" style="background: url(img/parallax/9.jpg)">
<div class="container layout">
<div class="row">
<div class="row-item col-md-12">
<div class="gap" style="height:150px"></div>
<div class="row">
<div class="row-item col-md-12">
<div class="b-quote">
<img class="quote-ava" src="img/team/team-7.jpg" alt="">
<div class="quote-text">
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam.
<div class="quote-author-name">- John Doe -</div>
<div class="quote-author-position">
Developer, <a href="#" class="link">Themeforest.net</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="ourteam" class="shortcodes">
<div class="container layout">
<div class="row">
<div class="row-item col-md-12">
<div class="margin-50"></div>
<h1 class="lined centered margin-30">Who are we anyway?</h1>
<div class="margin-20"></div>
<p class="intro">Professional&nbsp;&amp; Outstanding&nbsp;<strong class="colored">ideas</strong> of our&nbsp;&nbsp;<strong class="colored">passionate team</strong>&nbsp;&nbsp;makes us unique in every sense.</p>
<div class="margin-40"></div>
</div>
</div>
</div>
</div>
<div class="shortcodes content gray-content">
<div class="container layout">
<div class="row">
<div class="row-item col-md-12">
<h2 class="centered semibold uppercase">Who are we anyway?</h2>
<p class="centered p-20" style="color: #6e6e73;">Meet the team who built the dream</p>
<div class="gap" style="height:20px;"></div>
<div class="row">
<div class="b-member m-quad row-item col-md-4">
<div class="member-photo">
<img src="img/team/team-1.jpg" class="img-responsive" alt="John Doe" title="team-1">
<ul style="display: none; opacity: 1;" class="b-social">
<li><a class="fb" href="#" target="_blank"><i class="icon-facebook"></i></a></li>
<li><a class="lin" href="#" target="_blank"><i class="icon-linkedin"></i></a></li>
<li><a class="tw" href="#" target="_blank"><i class="icon-twitter"></i></a></li>
</ul>
</div>
<div class="member-meta">
<div class="member-name">John Doe</div>
<div class="member-position">
Developer
</div>
</div>
Inventore veritatis et quasi architectos beatae vitae dicta sunt explicabo. Nemo enims sadips ipsums un
</div>
<div class="b-member m-quad row-item col-md-4">
<div class="member-photo">
<img src="img/team/team-2.jpg" class="img-responsive" alt="Jane Doe" title="team-2">
<ul class="b-social">
<li><a class="fb" href="#" target="_blank"><i class="icon-facebook"></i></a></li>
<li><a class="tw" href="#" target="_blank"><i class="icon-twitter"></i></a></li>
<li><a class="lin" href="#" target="_blank"><i class="icon-linkedin"></i></a></li>
</ul>
</div>
<div class="member-meta">
<div class="member-name">Jane Doe</div>
<div class="member-position">
Developer
</div>
</div>
<p>Inventore veritatis et quasi architectos beatae vitae dicta sunt explicabo. Nemo enims sadips ipsums un</p>
</div>
<div class="b-member m-quad row-item col-md-4">
<div class="member-photo">
<img src="img/team/team-3.jpg" class="img-responsive" alt="John Doe" title="team-3">
<ul class="b-social">
<li><a class="fb" href="#" target="_blank"><i class="icon-facebook"></i></a></li>
<li><a class="vk" href="#" target="_blank"><i class="icon-vk"></i></a></li>
<li><a class="lin" href="#" target="_blank"><i class="icon-linkedin"></i></a></li>
</ul>
</div>
<div class="member-meta">
<div class="member-name">John Doe</div>
<div class="member-position">
Developer
</div>
</div>
<p>Inventore veritatis et quasi architectos beatae vitae dicta sunt explicabo. Nemo enims sadips ipsums un</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="shortcodes">
<div class="container layout">
<div class="row">
<div class="row-item col-md-12">
<div class="margin-40"></div>
<h3 class="lined margin-20">Here's few Famous clients we've worked with so far</h3>
<div class="b-clients" style="margin-bottom: 10px;">
<div class="client tooltips">
<div class="tooltips-data">Unde omnis iste natus</div>
<a href="#"><img src="img/elements/logo-1.jpg" alt=""></a>
</div>
<div class="client tooltips">
<div class="tooltips-data">Quae ab illo inventore</div>
<a href="#"><img src="img/elements/logo-2.jpg" alt=""></a>
</div>
<div class="client tooltips">
<div class="tooltips-data">Nisi ut aliquid ex ea</div>
<a href="#"><img src="img/elements/logo-3.jpg" alt=""></a>
</div>
<div class="client tooltips">
<div class="tooltips-data">Quae ab illo inventore</div>
<a href="#"><img src="img/elements/logo-4.jpg" alt=""></a>
</div>
<div class="client tooltips">
<div class="tooltips-data">Quae ab illo inventore</div>
<a href="#"><img src="img/elements/logo-5.jpg" alt=""></a>
</div>
</div>
<div class="margin-40"></div>
</div>
</div>
</div>
</div>
<div class="shortcodes parallax" data-stellar-background-ratio="0.5" style="background: url(img/parallax/10.jpg)">
<div class="container layout">
<div class="row">
<div class="row-item col-md-12">
<div class="gap" style="height:150px;"></div>
<div class="row">
<div class="row-item col-md-12">
<div class="b-quote">
<img class="quote-ava" src="http://119.18.59.74/~ckthemes/bdemodata/wp-content/uploads/2013/12/team-8.jpg" alt="">
<div class="quote-text">
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam.
<div class="quote-author-name">Jhon Doe</div>
<div class="quote-author-position">
Developer <a href="#" class="link">Themeforest.net</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="services" class="shortcodes">
<div class="container layout">
<div class="row">
<div class="row-item col-md-12">
<div class="margin-40"></div>
<h1 class="lined centered margin-30">Our Services</h1>
<div class="margin-10"></div>
<p class="intro">Our services are delivered by our team with <strong class="colored">years of experience</strong> are <strong class="colored">passionate </strong> about developing business.</p>
<div class="margin-30"></div>
</div>
</div>
</div>
</div>
<div class="shortcodes content gray-content">
<div class="container layout no-pad-bottom">
<div class="row">
<div class="row-item col-md-12">
<div class="row">
<div class="row-item col-md-3">
<div class="b-service">
<div class="service-image"><img src="img/icons/painting.png"></div>
<h3 class="centered"><a href="" class="dark-link">Qquis Nostrud</a></h3>
<p class="centered">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam laoreet sodales lacinia. Curabitur ut purus tincidunt, iaculis elit a, eleifend augue.
</p>
</div>
</div>
<div class="row-item col-md-3">
<div class="b-service">
<div class="service-image"><img src="img/icons/photography.png"></div>
<h3 class="centered"><a href="" class="dark-link">Ut Wisi Minim</a></h3>
<p class="centered">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam laoreet sodales lacinia. Curabitur ut purus tincidunt, iaculis elit a, eleifend augue.
</p>
</div>
</div>
<div class="row-item col-md-3">
<div class="b-service">
<div class="service-image"><img src="img/icons/industrial-design.png"></div>
<h3 class="centered"><a href="" class="dark-link">Praesent Luptat</a></h3>
<p class="centered">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam laoreet sodales lacinia. Curabitur ut purus tincidunt, iaculis elit a, eleifend augue
</p>
</div>
</div>
<div class="row-item col-md-3 column_last">
<div class="b-service">
<div class="service-image"><img src="img/icons/packaging.png"></div>
<h3 class="centered"><a href="" class="dark-link">Feugait Nulla</a></h3>
<p class="centered">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam laoreet sodales lacinia. Curabitur ut purus tincidunt, iaculis elit a, eleifend augue.
</p>
</div>
</div>
</div>
<div class="b-promo margin-30">
<a href="#" class="btn big colored">Get in Touch</a>
<h3>Excited to know more about us?</h3>
Are you ready to start a conversation?
</div>
<div class="margin-40"></div>
</div>
</div>
</div>
</div>
<div id="pricing" class="shortcodes">
<div class="container layout">
<div class="row">
<div class="row-item col-md-12">
<div class="margin-40"></div>
<h1 class="lined centered margin-30">pricing</h1>
<div class="margin-10"></div>
<p class="intro">We create what's best for you at the right price, so how about starting away with something small?</p>
<div class="margin-40"></div>
</div>
</div>
</div>
</div>
<div id="pricing" class="shortcodes content gray-content">
<div class="container layout no-pad-bottom">
<div class="row">
<div class="row-item col-md-12">
<h2 class="centered semibold uppercase">HOW MUCH WE CHARGE?</h2>
<p class="centered p-20" style="color: #6e6e73;">SMALL CHARGE FOR A MASSIVE PRODUCT</p>
<div class="gap" style="height:20px;"></div>
<div class="row m-tariff-row">
<div class="row-item col-md-3">
<div class="b-tariff ">
<div class="tariff-head">
<div class="tariff-title">Starter</div>
<div class="tariff-price">
<span class="tariff-cy">$</span>
<span class="tariff-cost">25</span>
<span class="tariff-period">/mo</span>
</div>
<p class="tariff-description">Sed ut perspiciatis unde omnis iste natus.</p>
</div>
<ul class="tariff-meta">
<li><mark class="green strong">FREE</mark> Setup</li>
<li><i class="icon-user" style="color: #73ca3f"></i> 3 Active Users</li>
<li><i class="icon-plus" style="color: #73ca3f"></i> Additional User is $5/mo</li>
<li><i class="icon-lock" style="color: #73ca3f"></i> Unlimited Questions</li>
<li><i class="icon-ok" style="color: #73ca3f"></i> Full Data Security</li>
</ul>
<a class="btn green tariff-btn" href="#">Start Now!</a>
</div>
</div>
<div class="row-item col-md-3">
<div class="b-tariff m-popular">
<div class="popular-title m-turquoise"><i class="icon-thumbs-up"></i>Most Popular</div>
<div class="tariff-head">
<div class="tariff-title">Basic</div>
<div class="tariff-price">
<span class="tariff-cy">$</span>
<span class="tariff-cost">50</span>
<span class="tariff-period">/mo</span>
</div>
<p class="tariff-description">Nemo enim ipsam voluptatem quia voluptas.</p>
</div>
<ul class="tariff-meta">
<li><mark class="green strong">FREE</mark> Setup</li>
<li><i class="icon-user" style="color: #73ca3f"></i> 3 Active Users</li>
<li><i class="icon-plus" style="color: #73ca3f"></i> Additional User is $5/mo</li>
<li><i class="icon-lock" style="color: #73ca3f"></i> Unlimited Questions</li>
<li><i class="icon-ok" style="color: #73ca3f"></i> Full Data Security</li>
</ul>
<a class="btn turquoise tariff-btn" href="#">Start Now!</a>
</div>
</div>
<div class="row-item col-md-3">
<div class="b-tariff ">
<div class="tariff-head">
<div class="tariff-title">Professional</div>
<div class="tariff-price">
<span class="tariff-cy">$</span>
<span class="tariff-cost">75</span>
<span class="tariff-period">/mo</span>
</div>
<p class="tariff-description">Neque porro quisquam est, qui dolorem ipsum.</p>
</div>
<ul class="tariff-meta">
<li><mark class="green strong">FREE</mark> Setup</li>
<li><i class="icon-user" style="color: #73ca3f"></i> 3 Active Users</li>
<li><i class="icon-plus" style="color: #73ca3f"></i> Additional User is $5/mo</li>
<li><i class="icon-lock" style="color: #73ca3f"></i> Unlimited Questions</li>
<li><i class="icon-ok" style="color: #73ca3f"></i> Full Data Security</li>
</ul>
<a class="btn blue tariff-btn" href="#">Start Now!</a>
</div>
</div>
<div class="row-item col-md-3">
<div class="b-tariff ">
<div class="tariff-head">
<div class="tariff-title">Unlimited</div>
<div class="tariff-price">
<span class="tariff-cy">$</span>
<span class="tariff-cost">150</span>
<span class="tariff-period">/mo</span>
</div>
<p class="tariff-description">Quis autem vel eum iure reprehenderit qui.</p>
</div>
<ul class="tariff-meta">
<li><mark class="green strong">FREE</mark> Setup</li>
<li><i class="icon-user" style="color: #73ca3f"></i> 3 Active Users</li>
<li><i class="icon-plus" style="color: #73ca3f"></i> Additional User is $5/mo</li>
<li><i class="icon-lock" style="color: #73ca3f"></i> Unlimited Questions</li>
<li><i class="icon-ok" style="color: #73ca3f"></i> Full Data Security</li>
</ul>
<a class="btn purple tariff-btn" href="#">Start Now!</a>
</div>
</div>
</div>
<div class="margin-40"></div>
</div>
</div>
</div>
</div>
<div class="shortcodes parallax" data-stellar-background-ratio="0.5" style="background: url(img/parallax/11.jpg)">
<div class="container layout">
<div class="row">
<div class="row-item col-md-12">
<div class="gap" style="height:150px;"></div>
<div class="b-quote">
<img class="quote-ava" src="http://119.18.59.74/~ckthemes/bdemodata/wp-content/uploads/2013/12/team-7.jpg" alt="">
<div class="quote-text">
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam.
<div class="quote-author-name">Jhon Doe</div>
<div class="quote-author-position">
Designer <a href="#" class="link">Themeforest.net</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="ourwork" class="shortcodes">
<div class="container layout">
<div class="row">
<div class="margin-40"></div>
<h1 class="lined centered margin-30">Portfolio</h1>
<div class="margin-10"></div>
<p class="intro">Our Featured Works and Case Studies so far</p>
<div class="margin-40"></div>
<ul class="b-filter-list">
<li data-filter="*" class="active">All</li>
<li data-filter=".webdesign">Web Design</li>
<li data-filter=".photography">Photography</li>
<li data-filter=".identity">Identity</li>
<li data-filter=".tehnology">Tehnology</li>
</ul>
<div class="b-filter-select">
<div class="filter-current">
All categories
</div>
<ul>
<li data-filter="*" class="active">All</li>
<li data-filter=".webdesign">Web Design</li>
<li data-filter=".photography">Photography</li>
<li data-filter=".identity">Identity</li>
<li data-filter=".tehnology">Tehnology</li>
</ul>
</div>
<div class="row m-block port b-works">
<div class="row-item col-md-3 identity photography tehnology">
<div class="work">
<a href="http://vimeo.com/67500403" rel="prettyPhoto" class="work-image">
<img src="http://ckthemes.com/boson/wp-content/uploads/2013/12/spring-flowers.jpg" alt="">
<div class="link-overlay icon-play"></div>
</a>
<a href="#" class="work-name">Smiling</a>
<div class="tags">
Identity, Photography, Tehnology
</div>
</div>
</div>
<div class="row-item col-md-3 photography webdesign">
<div class="work">
<a href="img/port/surfer-big.jpg" rel="prettyPhoto" class="work-image">
<img src="img/port/surfer.jpg" alt="">
<div class="link-overlay icon-search"></div>
</a>
<a href="#" class="work-name">Surfer</a>
<div class="tags">
Photography, Webdesign
</div>
</div>
</div>
<div class="row-item col-md-3 identity">
<div class="work">
<a href="http://vimeo.com/67500403" rel="prettyPhoto" class="work-image">
<img src="img/port/architecture.jpg" alt="">
<div class="link-overlay icon-play">
</div>
</a>
<a href="#" class="work-name">Architecture</a>
<div class="tags">
Identity
</div>
</div>
</div>
<div class="row-item col-md-3 tehnology">
<div class="work">
<a href="img/port/yacht-sailing-big.jpg" rel="prettyPhoto" class="work-image">
<img src="img/port/yacht-sailing.jpg" alt="">
<div class="link-overlay icon-search">
</div>
</a>
<a href="#" class="work-name">Yacht Sailing</a>
<div class="tags">
Tehnology
</div>
</div>
</div>
<div class="row-item col-md-3 photography webdesign identity">
<div class="work">
<a href="http://vimeo.com/67500403" rel="prettyPhoto" class="work-image">
<img src="img/port/golf.jpg" alt="">
<div class="link-overlay icon-play">
</div>
</a>
<a href="#" class="work-name">Golf</a>
<div class="tags">
Webdesign Identity
</div>
</div>
</div>
<div class="row-item col-md-3 tehnology">
<div class="work">
<a href="img/port/spring-flowers.jpg" rel="prettyPhoto" class="work-image">
<img src="img/port/spring-flowers.jpg" alt="">
<div class="link-overlay icon-search">
</div>
</a>
<a href="#" class="work-name">Spring Flowers</a>
<div class="tags">
Tehnology
</div>
</div>
</div>
<div class="row-item col-md-3 photography tehnology identity">
<div class="work">
<a href="img/port/work-from-home-big.jpg" rel="prettyPhoto" class="work-image">
<img src="img/port/work-from-home.jpg" alt="">
<div class="link-overlay icon-search">
</div>
</a>
<a href="#" class="work-name">Work From Home</a>
<div class="tags">
Tehnology Identity
</div>
</div>
</div>
<div class="row-item col-md-3 webdesign">
<div class="work">
<a href="img/port/music-night-club.jpg" rel="prettyPhoto" class="work-image">
<img src="img/port/music-night-club.jpg" alt="">
<div class="link-overlay icon-search">
</div>
</a>
<a href="#" class="work-name">Music Night Club</a>
<div class="tags">
Web Design
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="contact" class="shortcodes">
<div class="container layout">
<div class="row">
<div class="row-item col-md-12">
<div class="margin-50"></div>
<h1 class="lined centered margin-30">Contact</h1>
<div class="margin-10"></div>
<p class="intro">We'd really love to <strong class="colored">hear from you</strong> so why not drop us an email and <strong class="colored"> we<77>ll get back</strong> to you as soon as we can.</p>
<div class="margin-40"></div>
</div>
</div>
</div>
</div>
<div class="shortcodes">
<div class="container layout">
<div class="row">
<div class="row-item col-md-12">
</div>
</div>
</div>
</div>
<!-- GOOGLE MAP
============================================= -->
<div class="b-google-map take-out">
<div id="map_canvas" class="top-shadow" style="width: 100%; height: 400px;"></div>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="js/jquery.gmap.min.js"></script>
<script>
jQuery('#map_canvas').gMap({
maptype: 'ROADMAP',
scrollwheel: false,
zoom: 18,
markers: [
{
address: 'US', // Your Adress Here
html: '',
popup: false,
}
],
});
</script>
</div>
<!-- END GOOGLE MAP
============================================= -->
</div>
<!-- END CONTENT
============================================= -->
<!-- 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>
<!-- END MAIN
============================================= -->
<script src="js/menu-target.js"></script>
<script>
jQuery(document).ready(function(){
jQuery(window).scroll(function(e){
var divHeight = jQuery(".fullwidthbanner-container").outerHeight();
var scrollHeight = e.currentTarget.scrollY;
divHeight = divHeight-11;
if(scrollHeight >= divHeight){
jQuery(".header,#header-main").addClass("fixed-header");
}else{
jQuery(".header,#header-main").removeClass("fixed-header");
}
});
});
</script>
</body>
</html>