849 lines
36 KiB
HTML
849 lines
36 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="js/magnific-popup/magnific-popup.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="onepage-body">
|
|
<div class="main">
|
|
|
|
<!-- HEADER -->
|
|
<header id="header-main">
|
|
<div class="container">
|
|
<div class="navbar yamm navbar-default">
|
|
<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"><img alt="" src="img/logo.png"></a>
|
|
</div>
|
|
|
|
|
|
|
|
<div id="navbar-collapse-1" class="navbar-collapse collapse navbar-right">
|
|
<ul class="nav navbar-nav">
|
|
<li class="page-scroll"><a href="#page-top">Home</a></li>
|
|
<li class="page-scroll"><a href="#1">Services</a></li>
|
|
<li class="page-scroll"><a href="#2">Info</a></li>
|
|
<li class="page-scroll"><a href="#3">About</a></li>
|
|
<li class="page-scroll"><a href="#4">Testimonials</a></li>
|
|
<li class="page-scroll"><a href="#5">Pricing</a></li>
|
|
<li class="page-scroll"><a href="#6">Contact</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="slider-wrap">
|
|
<div class="tp-banner-container">
|
|
<div class="tp-banner" >
|
|
<ul>
|
|
<!-- SLIDE -->
|
|
<!-- 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/7.jpg" data-bgposition="center" data-kenburns="off" data-duration="12000" data-ease="Power0.easeInOut" data-bgfit="cover" data-bgpositionend="center bottom">
|
|
<!-- LAYERS -->
|
|
<!-- LAYER NR. 3 -->
|
|
<div class="tp-caption finewide_medium_white lfl tp-resizeme rs-parallaxlevel-0 center-align"
|
|
data-x="0"
|
|
data-y="190"
|
|
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="2200"
|
|
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: 80px;
|
|
line-height: 80px;
|
|
font-weight: 700;
|
|
background-color: none;
|
|
text-decoration: none;
|
|
font-family:Open Sans, sans-serif;
|
|
text-transform: uppercase;
|
|
border-width: 0px;
|
|
color: #fff;
|
|
border-color: transparent;
|
|
border-style: none;
|
|
letter-spacing: -2px;
|
|
"><span>The Perfect<br>landingpage</span>
|
|
</div>
|
|
<!-- LAYER NR. 5 -->
|
|
<div class="tp-caption small_text lfr tp-resizeme rs-parallaxlevel-0"
|
|
data-x="0"
|
|
data-y="360"
|
|
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="3000"
|
|
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<br>them ANYWHERE</span>
|
|
</div>
|
|
<!-- LAYER NR. 6 -->
|
|
<a href="#" class="tp-caption lfb tp-resizeme rs-parallaxlevel-0"
|
|
data-x="0"
|
|
data-y="430"
|
|
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="3400"
|
|
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;">buy this theme</a>
|
|
<!-- LAYER NR. 6 -->
|
|
<div class="tp-caption lfb tp-resizeme rs-parallaxlevel-0"
|
|
data-x="right"
|
|
data-y="100"
|
|
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="700"
|
|
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;"><img src="images/other/3.png" alt=""/></div>
|
|
</li>
|
|
<!-- SLIDE -->
|
|
<!-- 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/8.jpg" data-bgposition="center" data-kenburns="off" data-duration="12000" data-ease="Power0.easeInOut" data-bgfit="cover" data-bgpositionend="center bottom">
|
|
<!-- LAYERS -->
|
|
<!-- LAYER NR. 3 -->
|
|
<div class="tp-caption finewide_medium_white lfl tp-resizeme rs-parallaxlevel-0 center-align"
|
|
data-x="center"
|
|
data-y="215"
|
|
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="2200"
|
|
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;
|
|
text-shadow: none;
|
|
font-size: 60px;
|
|
line-height: 60px;
|
|
font-weight: 900;
|
|
background-color: none;
|
|
text-decoration: none;
|
|
font-family:Open Sans, sans-serif;
|
|
text-transform: uppercase;
|
|
border-width: 0px;
|
|
color: #000;
|
|
text-align:center;
|
|
border-color: transparent;
|
|
border-style: none;
|
|
letter-spacing: -2px;
|
|
"><span>Best lead generating<br>app landing page</span>
|
|
</div>
|
|
<!-- LAYER NR. 5 -->
|
|
<div class="tp-caption small_text lfr tp-resizeme rs-parallaxlevel-0"
|
|
data-x="center"
|
|
data-y="350"
|
|
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="3000"
|
|
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;
|
|
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: #666;
|
|
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="390"
|
|
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="3400"
|
|
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;">buy this theme</a>
|
|
</li>
|
|
<!-- SLIDE -->
|
|
</ul>
|
|
<div class="tp-bannertimer"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="inner-content no-padding">
|
|
<div class="container padding90" id="1">
|
|
<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="clearfix"></div>
|
|
|
|
<div class="parallax-bg5 padding50" id="2">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<img src="images/other/7.png" class="img-responsive" alt=""/>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="space90"></div>
|
|
<h2 class="uppercase white">5 Reasons to choose Boson</h2>
|
|
<div class="space20"></div>
|
|
<p class="lite-white">Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros.</p>
|
|
|
|
|
|
<div class="panel-group" id="accordion">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">
|
|
<a class="accordion-toggle collapsed white" data-toggle="collapse" data-parent="#accordion" href="#collapseOne1">
|
|
Lorem ipsum dolor sit amet consectetur adipiscing elit
|
|
</a>
|
|
</h4>
|
|
</div>
|
|
<div id="collapseOne1" class="panel-collapse collapse">
|
|
<div class="panel-body">
|
|
<p class="lite-white">Etiam cursus pellentesque neque, eget ullamcorper augue eleifend a. In sit amet pulvinar purus. Ut in nibh tortor. Nullam quis magna sed nunc facilisis blandit vel at erat. Donec blandit et nulla sed lacinia. Quisque ullamcorper tincidunt ante, ut feugiat felis consectetur ut.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="clearfix space10"></div>
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">
|
|
<a class="accordion-toggle collapsed white" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo1">
|
|
Curabitur et diam vitae dolor aliquet et in massa
|
|
</a>
|
|
</h4>
|
|
</div>
|
|
<div id="collapseTwo1" class="panel-collapse collapse">
|
|
<div class="panel-body">
|
|
<p class="lite-white">Nam ullamcorper imperdiet luctus. Vestibulum tincidunt malesuada mi, in posuere augue cursus nec. Morbi et vehicula risus, fermentum lacinia justo. Etiam tellus arcu, eleifend tristique enim rutrum iaculis risus, id tincidunt dui fringilla sed bibendum lorem.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="clearfix space10"></div>
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">
|
|
<a class="accordion-toggle collapsed white" data-toggle="collapse" data-parent="#accordion" href="#collapseThree1">
|
|
Proin faucibus sem sed dapibus dapibus
|
|
</a>
|
|
</h4>
|
|
</div>
|
|
<div id="collapseThree1" class="panel-collapse collapse">
|
|
<div class="panel-body">
|
|
<p class="lite-white">Etiam cursus pellentesque neque, eget ullamcorper augue eleifend a. In sit amet pulvinar purus. Ut in nibh tortor. Nullam quis magna sed nunc facilisis blandit vel at erat. Donec blandit et nulla sed lacinia. Quisque ullamcorper tincidunt ante, ut feugiat felis consectetur ut.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="clearfix space10"></div>
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">
|
|
<a class="accordion-toggle collapsed white" data-toggle="collapse" data-parent="#accordion" href="#collapseFour1">
|
|
Lorem ipsum dolor sit amet consectetur adipiscing elit
|
|
</a>
|
|
</h4>
|
|
</div>
|
|
<div id="collapseFour1" class="panel-collapse collapse">
|
|
<div class="panel-body">
|
|
<p class="lite-white">Etiam cursus pellentesque neque, eget ullamcorper augue eleifend a. In sit amet pulvinar purus. Ut in nibh tortor. Nullam quis magna sed nunc facilisis blandit vel at erat. Donec blandit et nulla sed lacinia. Quisque ullamcorper tincidunt ante, ut feugiat felis consectetur ut.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="clearfix space10"></div>
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">
|
|
<a class="accordion-toggle collapsed white" data-toggle="collapse" data-parent="#accordion" href="#collapseFive1">
|
|
Proin faucibus sem sed dapibus dapibus
|
|
</a>
|
|
</h4>
|
|
</div>
|
|
<div id="collapseFive1" class="panel-collapse collapse">
|
|
<div class="panel-body">
|
|
<p class="lite-white">Etiam cursus pellentesque neque, eget ullamcorper augue eleifend a. In sit amet pulvinar purus. Ut in nibh tortor. Nullam quis magna sed nunc facilisis blandit vel at erat. Donec blandit et nulla sed lacinia. Quisque ullamcorper tincidunt ante, ut feugiat felis consectetur ut.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- <div class="panel-group" id="accordion">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">
|
|
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne1">
|
|
<div class="white">Lorem ipsum dolor sit amet adipiscing elit</div>
|
|
<span class="white fa fa-plus"></span>
|
|
</a>
|
|
</h4>
|
|
</div>
|
|
<div id="collapseOne1" class="panel-collapse collapse">
|
|
<div class="panel-body">
|
|
<p class="lite-white">Etiam cursus pellentesque neque, eget ullamcorper augue eleifend a. In sit amet pulvinar purus. Ut in nibh tortor. Nullam quis magna sed nunc facilisis blandit vel at erat. Donec blandit et nulla sed lacinia. Quisque ullamcorper tincidunt ante, ut feugiat felis consectetur ut.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="clearfix space10"></div>
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">
|
|
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo1">
|
|
<div class="white">Curabitur et diam vitae dolor aliquet et in massa</div>
|
|
<span class="white fa fa-plus"></span>
|
|
</a>
|
|
</h4>
|
|
</div>
|
|
<div id="collapseTwo1" class="panel-collapse collapse">
|
|
<div class="panel-body">
|
|
<p class="lite-white">Nam ullamcorper imperdiet luctus. Vestibulum tincidunt malesuada mi, in posuere augue cursus nec. Morbi et vehicula risus, fermentum lacinia justo. Etiam tellus arcu, eleifend tristique enim rutrum iaculis risus, id tincidunt dui fringilla sed bibendum lorem.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="clearfix space10"></div>
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">
|
|
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree1">
|
|
<div class="white">Proin faucibus sem sed dapibus dapibus</div>
|
|
<span class="white fa fa-plus"></span>
|
|
</a>
|
|
</h4>
|
|
</div>
|
|
<div id="collapseThree1" class="panel-collapse collapse">
|
|
<div class="panel-body">
|
|
<p class="lite-white">Etiam cursus pellentesque neque, eget ullamcorper augue eleifend a. In sit amet pulvinar purus. Ut in nibh tortor. Nullam quis magna sed nunc facilisis blandit vel at erat. Donec blandit et nulla sed lacinia. Quisque ullamcorper tincidunt ante, ut feugiat felis consectetur ut.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="clearfix space10"></div>
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">
|
|
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseFour1">
|
|
<div class="white">Lorem ipsum dolor sit amet consectetur adipiscing elit</div>
|
|
<span class="white fa fa-plus"></span>
|
|
</a>
|
|
</h4>
|
|
</div>
|
|
<div id="collapseFour1" class="panel-collapse collapse">
|
|
<div class="panel-body">
|
|
<p class="lite-white">Etiam cursus pellentesque neque, eget ullamcorper augue eleifend a. In sit amet pulvinar purus. Ut in nibh tortor. Nullam quis magna sed nunc facilisis blandit vel at erat. Donec blandit et nulla sed lacinia. Quisque ullamcorper tincidunt ante, ut feugiat felis consectetur ut.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container padding60" id="3">
|
|
<div class="section-about">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div>
|
|
<img src="images/other/8.png" class="img-responsive" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div>
|
|
<div class="space90"></div>
|
|
<h3 class="uppercase" >Responsive design</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 class="border-top"></div>
|
|
<div class="container padding60">
|
|
<div class="section-about">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div>
|
|
<div class="space90"></div>
|
|
<h3 class="uppercase" >Lead generation</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 class="col-md-6">
|
|
<div>
|
|
<img src="images/other/9.png" class="img-responsive" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="clearfix"></div>
|
|
<div class="space30"></div>
|
|
<div class="parallax-bg6 padding60" id="4">
|
|
<div class="container">
|
|
<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 class="white">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 class="white">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 class="white">Wally Buddy</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container home-pricing padding70" id="5">
|
|
<div class="text-center space70">
|
|
<h2 class="uppercase">Choose your plan</h2>
|
|
<p>Sed laoreet libero eget tempus blandit praesent eu erat sed sem facilisis rutrum metus<br>facilisis eros justo non ipsum aliquam lacinia non eu ex.</p>
|
|
</div>
|
|
<!-- end section -->
|
|
<div class="row">
|
|
<div class="col-md-3 pricing-table4 text-center">
|
|
<div class="title">
|
|
<h2>Start Up</h2>
|
|
<strong><sup>$</sup>7.99<sub> /month</sub></strong>
|
|
</div>
|
|
<ul>
|
|
<li><strong>50 GB</strong> Storage</li>
|
|
<li><strong>1 FREE</strong> Domain Name</li>
|
|
<li><strong>100</strong> Mailboxes</li>
|
|
<li><strong>5</strong> One-Click Apps</li>
|
|
<li><strong>25</strong> Databases</li>
|
|
<li>24/7 Support</li>
|
|
<li><strong>Money back</strong> Guarantee</li>
|
|
</ul>
|
|
<div class="space20"></div>
|
|
<a class="button color2 btn-small btn-center" href="#">Sign Up</a>
|
|
</div>
|
|
<div class="col-md-3 pricing-table4 text-center">
|
|
<div class="title">
|
|
<h2>Standard</h2>
|
|
<strong><sup>$</sup>13.99<sub> /month</sub></strong>
|
|
</div>
|
|
<ul>
|
|
<li><strong>50 GB</strong> Storage</li>
|
|
<li><strong>1 FREE</strong> Domain Name</li>
|
|
<li><strong>100</strong> Mailboxes</li>
|
|
<li><strong>5</strong> One-Click Apps</li>
|
|
<li><strong>25</strong> Databases</li>
|
|
<li>24/7 Support</li>
|
|
<li><strong>Money back</strong> Guarantee</li>
|
|
</ul>
|
|
<div class="space20"></div>
|
|
<a class="button color2 btn-small btn-center" href="#">Sign Up</a>
|
|
</div>
|
|
<div class="col-md-3 pricing-table4 text-center" id="popular">
|
|
<div class="title">
|
|
<h6>Most Popular</h6>
|
|
<h2>Professional</h2>
|
|
<strong><sup>$</sup>29.99<sub> /month</sub></strong>
|
|
</div>
|
|
<ul>
|
|
<li><strong>50 GB</strong> Storage</li>
|
|
<li><strong>1 FREE</strong> Domain Name</li>
|
|
<li><strong>100</strong> Mailboxes</li>
|
|
<li><strong>5</strong> One-Click Apps</li>
|
|
<li><strong>25</strong> Databases</li>
|
|
<li>24/7 Support</li>
|
|
<li><strong>Money back</strong> Guarantee</li>
|
|
</ul>
|
|
<div class="space20"></div>
|
|
<a class="button color2 btn-small btn-center" href="#">Sign Up</a>
|
|
</div>
|
|
<div class="col-md-3 pricing-table4 text-center">
|
|
<div class="title">
|
|
<h2>Advanced</h2>
|
|
<strong><sup>$</sup>49.99<sub> /month</sub></strong>
|
|
</div>
|
|
<ul>
|
|
<li><strong>50 GB</strong> Storage</li>
|
|
<li><strong>1 FREE</strong> Domain Name</li>
|
|
<li><strong>100</strong> Mailboxes</li>
|
|
<li><strong>5</strong> One-Click Apps</li>
|
|
<li><strong>25</strong> Databases</li>
|
|
<li>24/7 Support</li>
|
|
<li><strong>Money back</strong> Guarantee</li>
|
|
</ul>
|
|
<div class="space20"></div>
|
|
<a class="button color2 btn-small btn-center" href="#">Sign Up</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border-top"></div>
|
|
<div class="clients container padding40">
|
|
<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>
|
|
</div>
|
|
|
|
<div class="border-top"></div>
|
|
<div class="container-fluid no-padding" id="6">
|
|
<div class="col-md-6 full-contact">
|
|
<h4 class="uppercase no-margin">Contact Us</h4>
|
|
<div class="space20"></div>
|
|
<p>We would be glad to have feedback from you. Drop us a line, whether it is a comment, a question or just a hello. You can use either the form below or the contact details on the right.</p>
|
|
<form class="home-contact-form">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="input-wrap">
|
|
<input class="i-field form-control" placeholder="Name (required)" type="text">
|
|
<i class="fa fa-user"></i>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="input-wrap">
|
|
<input class="i-field form-control" placeholder="Email (required)" type="text">
|
|
<i class="fa fa-envelope"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="input-wrap">
|
|
<input class="i-field form-control" placeholder="Subject" type="text">
|
|
<i class="fa fa-pencil"></i>
|
|
</div>
|
|
<div class="textarea-wrap">
|
|
<textarea class="i-field form-control" placeholder="Message"></textarea>
|
|
<i class="fa fa-pencil"></i>
|
|
</div>
|
|
<input class="button" value="Send it" type="submit">
|
|
</form>
|
|
</div>
|
|
<div class="col-md-6 padding-top-70">
|
|
<div class="map-greyscale" id="map-greyscale"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- FOOTER COPYRIGHT -->
|
|
<div class="footer-bottom">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-7">
|
|
<span class="copy">Copyright © 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/jquery.easing/jquery.easing.js"></script>
|
|
<script src="js/hippo-off-canvas.js"></script>
|
|
<script src="js/main.js"></script>
|
|
|
|
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
|
|
<script src="js/gmaps/greyscale.js"></script>
|
|
|
|
<script>
|
|
jQuery( "button.navbar-toggle" ).click(function(){
|
|
jQuery('#navbar-collapse-1').toggleClass('in');
|
|
|
|
});
|
|
</script>
|
|
<script src="js/menu-target.js"></script>
|
|
</body>
|
|
</html>
|
|
|
|
|
|
|
|
|