883 lines
41 KiB
HTML
883 lines
41 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>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<div class="main">
|
||
|
||
|
||
<!-- 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
|
||
============================================= -->
|
||
|
||
<!-- TITLE BAR
|
||
============================================= -->
|
||
<div class="b-titlebar">
|
||
<div class="container layout">
|
||
<!-- Bread Crumbs -->
|
||
<ul class="crumbs">
|
||
<li>You are here:</li>
|
||
<li><a href="#">Home</a></li>
|
||
<li><a href="#">Elements</a></li>
|
||
</ul>
|
||
<!-- Title -->
|
||
<h1>Elements</h1>
|
||
</div>
|
||
</div>
|
||
<!-- END TITLE BAR
|
||
============================================= -->
|
||
|
||
<!-- CONTENT
|
||
============================================= -->
|
||
<div class="content shortcodes">
|
||
<div class="container layout">
|
||
<h3 class="lined margin-20">Promo Box</h3>
|
||
<!-- Promo Box -->
|
||
<div class="b-promo">
|
||
<a href="#" class="btn big colored">Buy Now!</a>
|
||
<h3>Reprehenderit In Voluptate Velit Esse</h3>
|
||
In anim uis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
|
||
</div>
|
||
<!-- End Promo Box -->
|
||
<div class="gap" style="height: 40px;">
|
||
</div>
|
||
<div class="row">
|
||
<div class="row-item col-md-6">
|
||
<h3 class="lined margin-20">Toggles</h3>
|
||
<!-- Toggle Content -->
|
||
<div class="element-wrap">
|
||
<!-- Toggle 1 -->
|
||
<div class="b-spoiler m-alt active">
|
||
<div class="spoiler-title active">
|
||
<span>Asunt in anim uis aute irure dolor</span>
|
||
</div>
|
||
<div class="spoiler-content">
|
||
<p>
|
||
Asunt in anim uis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Toggle 1 -->
|
||
<!-- Toggle 2 -->
|
||
<div class="b-spoiler m-alt">
|
||
<div class="spoiler-title">
|
||
<span>Reprehenderit in voluptate</span>
|
||
</div>
|
||
<div class="spoiler-content">
|
||
<p>
|
||
Asunt in anim uis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Toggle 2 -->
|
||
<!-- Toggle 3 -->
|
||
<div class="b-spoiler m-alt">
|
||
<div class="spoiler-title">
|
||
<span>Allamco laboris nisi ut aliquip</span>
|
||
</div>
|
||
<div class="spoiler-content">
|
||
<p>
|
||
Asunt in anim uis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Toggle 3 -->
|
||
</div>
|
||
<!-- End Toggle Content -->
|
||
<div class="gap" style="height: 30px;"></div>
|
||
</div>
|
||
|
||
<div class="row-item col-md-6">
|
||
<h3 class="lined margin-20">Accordion</h3>
|
||
<!-- Accordion Content -->
|
||
<div class="element-wrap">
|
||
<div class="b-accordion">
|
||
<!-- Accordion 1 -->
|
||
<div class="b-spoiler m-alt active">
|
||
<div class="spoiler-title active">
|
||
<span>Ex ea commodo consequat</span>
|
||
</div>
|
||
<div class="spoiler-content">
|
||
<p>
|
||
Asunt in anim uis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Accordion 1 -->
|
||
<!-- Accordion 2 -->
|
||
<div class="b-spoiler m-alt">
|
||
<div class="spoiler-title">
|
||
<span>Asunt in anim uis aute irure dolor in reprehenderit in voluptate</span>
|
||
</div>
|
||
<div class="spoiler-content">
|
||
<p>
|
||
Asunt in anim uis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Accordion 2 -->
|
||
<!-- Accordion 3 -->
|
||
<div class="b-spoiler m-alt">
|
||
<div class="spoiler-title">
|
||
<span>Excepteur sint occaecat</span>
|
||
</div>
|
||
<div class="spoiler-content">
|
||
<p>
|
||
Asunt in anim uis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Accordion 3 -->
|
||
</div>
|
||
</div>
|
||
<!-- End Accordion Content -->
|
||
<div class="gap" style="height: 30px;"></div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="row-item col-md-6">
|
||
<h3 class="lined margin-20">Horizontal Tabs</h3>
|
||
<!-- Horizontal Tabs -->
|
||
<div class="b-tabs">
|
||
<!-- Tabs Navigation -->
|
||
<ul class="tabs-nav">
|
||
<li class="active"><span><i class="icon-thumbs-up"></i>Company</span></li>
|
||
<li><span><i class="icon-money"></i>Careers</span></li>
|
||
<li><span><i class="icon-bullhorn"></i>Blogs</span></li>
|
||
</ul>
|
||
<!-- End Tabs Navigation -->
|
||
<!-- Tabs Content -->
|
||
<div class="tabs-content">
|
||
<div class="tab active">
|
||
<p>
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sem mauris, aliquam vel interdum in, faucibus non libero. Asunt in anim uis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in anim id est laborum. Allamco laboris nisi ut aliquip ex ea commodo consequat. Aser velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in anim id est laborum.
|
||
</p>
|
||
</div>
|
||
<div class="tab">
|
||
<p>
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sem mauris, aliquam vel interdum in, faucibus non libero. Asunt in anim uis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in anim id est laborum. Allamco laboris nisi ut aliquip ex ea commodo consequat. Aser velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in anim id est laborum.
|
||
</p>
|
||
</div>
|
||
<div class="tab">
|
||
<p>
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sem mauris, aliquam vel interdum in, faucibus non libero. Asunt in anim uis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in anim id est laborum. Allamco laboris nisi ut aliquip ex ea commodo consequat. Aser velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in anim id est laborum.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Tabs Content -->
|
||
</div>
|
||
<!-- End Horizontal Tabs -->
|
||
<div class="gap" style="height: 30px;"></div>
|
||
</div>
|
||
|
||
<div class="row-item col-md-6">
|
||
<h3 class="lined margin-20">Vertical Tabs</h3>
|
||
<!-- Vertical Tabs -->
|
||
<div class="b-tabs m-nav-left">
|
||
<!-- Tabs Navigation -->
|
||
<ul class="tabs-nav">
|
||
<li class="active"><span><i class="icon-thumbs-up"></i>Company</span></li>
|
||
<li><span><i class="icon-money"></i>Careers</span></li>
|
||
<li><span><i class="icon-bullhorn"></i>Blogs</span></li>
|
||
</ul>
|
||
<!-- End Tabs Navigation -->
|
||
<!-- Tabs Content -->
|
||
<div class="tabs-content">
|
||
<div class="tab active">
|
||
<p>
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sem mauris, aliquam vel interdum in, faucibus non libero. Asunt in anim uis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in anim id est laborum. Allamco laboris nisi ut aliquip ex ea commodo consequat. Aser velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in anim id est laborum.
|
||
</p>
|
||
</div>
|
||
<div class="tab">
|
||
<p>
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sem mauris, aliquam vel interdum in, faucibus non libero. Asunt in anim uis aute irure dolor in reprehenderit in voluptate.
|
||
</p>
|
||
</div>
|
||
<div class="tab">
|
||
<p>
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sem mauris, aliquam vel interdum in, faucibus non libero. Asunt in anim uis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in anim id est laborum. Allamco laboris nisi ut aliquip ex ea commodo consequat. Aser velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in anim id est laborum.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Tabs Content -->
|
||
</div>
|
||
<!-- End Vertical Tabs -->
|
||
<div class="gap" style="height: 20px;"></div>
|
||
</div>
|
||
</div>
|
||
<h3 class="lined margin-20">Small Buttons</h3>
|
||
<!-- Small Buttons -->
|
||
<p>
|
||
<a href="#" class="btn small"><i class="icon-shopping-cart"></i>Small</a>
|
||
<a href="#" class="btn small black"><i class="icon-trophy"></i>Black Small</a>
|
||
<a href="#" class="btn small colored"><i class="icon-globe"></i>Colored Small</a>
|
||
<a href="#" class="btn small turquoise"><i class="icon-truck"></i>Turquoise Small</a>
|
||
<a href="#" class="btn small blue"><i class="icon-save"></i>Blue Small</a>
|
||
<a href="#" class="btn small purple"><i class="icon-music"></i>Purple Small</a>
|
||
<a href="#" class="btn small pink"><i class="icon-trophy"></i>Pink Small</a>
|
||
<a href="#" class="btn small red"><i class="icon-file-text"></i>Red Small</a>
|
||
<a href="#" class="btn small orange"><i class="icon-hand-right"></i>Orange Small</a>
|
||
<a href="#" class="btn small yellow"><i class="icon-thumbs-up"></i>Yellow Small</a>
|
||
<a href="#" class="btn small green"><i class="icon-cut"></i>Green Small</a>
|
||
</p>
|
||
<!-- End Small Buttons -->
|
||
<div class="gap" style="height: 20px;"></div>
|
||
<h3 class="lined margin-20">Medium Buttons</h3>
|
||
<!-- Medium Buttons -->
|
||
<p>
|
||
<a href="#" class="btn"><i class="icon-shopping-cart"></i>Medium</a>
|
||
<a href="#" class="btn black"><i class="icon-trophy"></i>Black Medium</a>
|
||
<a href="#" class="btn colored"><i class="icon-globe"></i>Colored Medium</a>
|
||
<a href="#" class="btn turquoise"><i class="icon-truck"></i>Turquoise Medium</a>
|
||
<a href="#" class="btn blue"><i class="icon-save"></i>Blue Medium</a>
|
||
<a href="#" class="btn purple"><i class="icon-music"></i>Purple Medium</a>
|
||
<a href="#" class="btn pink"><i class="icon-trophy"></i>Pink Medium</a>
|
||
<a href="#" class="btn red"><i class="icon-file-text"></i>Red Medium</a>
|
||
<a href="#" class="btn orange"><i class="icon-hand-right"></i>Orange Medium</a>
|
||
<a href="#" class="btn yellow"><i class="icon-thumbs-up"></i>Yellow Medium</a>
|
||
<a href="#" class="btn green"><i class="icon-cut"></i>Green Medium</a>
|
||
</p>
|
||
<!-- End Medium Buttons -->
|
||
<div class="gap" style="height: 20px;"></div>
|
||
|
||
<h3 class="lined margin-20">Big Buttons</h3>
|
||
<!-- Big Buttons -->
|
||
<p>
|
||
<a href="#" class="btn big"><i class="icon-shopping-cart"></i>Big</a>
|
||
<a href="#" class="btn big black"><i class="icon-trophy"></i>Black Big</a>
|
||
<a href="#" class="btn big colored"><i class="icon-globe"></i>Colored Big</a>
|
||
<a href="#" class="btn big turquoise"><i class="icon-truck"></i>Turquoise Big</a>
|
||
<a href="#" class="btn big blue"><i class="icon-save"></i>Blue Big</a>
|
||
<a href="#" class="btn big purple"><i class="icon-music"></i>Purple Big</a>
|
||
<a href="#" class="btn big pink"><i class="icon-trophy"></i>Pink Big</a>
|
||
<a href="#" class="btn big red"><i class="icon-file-text"></i>Red Big</a>
|
||
<a href="#" class="btn big orange"><i class="icon-hand-right"></i>Orange Big</a>
|
||
<a href="#" class="btn big yellow"><i class="icon-thumbs-up"></i>Yellow Big</a>
|
||
<a href="#" class="btn big green"><i class="icon-cut"></i>Green big</a>
|
||
</p>
|
||
<!-- End Big Buttons -->
|
||
<div class="gap" style="height: 20px;"></div>
|
||
|
||
<h3 class="lined margin-20">Social Media Buttons</h3>
|
||
<!-- Social Media Buttons -->
|
||
<ul class="b-social m-varicolored">
|
||
<li><a class="fb" href="#"><i class="icon-facebook"></i></a></li>
|
||
<li><a class="tw" href="#"><i class="icon-twitter"></i></a></li>
|
||
<li><a class="pt" href="#"><i class="icon-pinterest"></i></a></li>
|
||
<li><a class="lin" href="#"><i class="icon-linkedin"></i></a></li>
|
||
<li><a class="gl" href="#"><i class="icon-google-plus"></i></a></li>
|
||
<li><a class="dr" href="#"><i class="icon-dribbble"></i></a></li>
|
||
<li><a class="tl" href="#"><i class="icon-tumblr"></i></a></li>
|
||
<li><a class="vk" href="#"><i class="icon-vk"></i></a></li>
|
||
<li><a class="dx" href="#"><i class="icon-dropbox"></i></a></li>
|
||
<li><a class="fs" href="#"><i class="icon-foursquare"></i></a></li>
|
||
<li><a class="is" href="#"><i class="icon-instagram"></i></a></li>
|
||
<li><a class="mx" href="#"><i class="icon-maxcdn"></i></a></li>
|
||
<li><a class="sk" href="#"><i class="icon-skype"></i></a></li>
|
||
<li><a class="yt" href="#"><i class="icon-youtube"></i></a></li>
|
||
<li><a class="gh" href="#"><i class="icon-github-alt"></i></a></li>
|
||
<li><a class="env" href="#"><i class="icon-envelope"></i></a></li>
|
||
<li><a class="rss" href="#"><i class="icon-rss"></i></a></li>
|
||
</ul>
|
||
<!-- End Social Media Buttons -->
|
||
|
||
<div class="gap" style="height: 30px;"> </div>
|
||
|
||
<div class="row">
|
||
<div class="row-item col-md-6">
|
||
<h3 class="lined margin-20">Testimonial</h3>
|
||
<!-- Testimonial -->
|
||
<div class="b-quote">
|
||
<img class="quote-ava" src="img/team/team-5.jpg" alt="">
|
||
<div class="quote-text">
|
||
Maecenas lacus aliquet et nisl nunc, per sed sed maecenas.Lectus tincidunt pellentesque augue urna sit sed, arcu sed ante ac montes.
|
||
<div class="quote-author-name">
|
||
Jhon Doe
|
||
</div>
|
||
<div class="quote-author-position">
|
||
Developer, <a href="#" class="link">Themeforest.net</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Testimonial -->
|
||
<div class="gap" style="height: 20px;"></div>
|
||
</div>
|
||
|
||
<div class="row-item col-md-6">
|
||
<h3 class="lined margin-20">Alternative Testimonial</h3>
|
||
<!-- Alternative Testimonial -->
|
||
<div class="b-recall">
|
||
<div class="recall-text">
|
||
“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sem mauris”
|
||
</div>
|
||
<div class="recall-author">
|
||
<span>Jhon Doe, <a href="#" class="link">Themeforest.net</a></span>
|
||
</div>
|
||
</div>
|
||
<!-- End Alternative Testimonial -->
|
||
<div class="gap" style="height: 20px;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 class="lined margin-20">Allert Messages</h3>
|
||
|
||
<div class="row">
|
||
<div class="row-item col-md-6">
|
||
<!-- Message -->
|
||
<div class="b-message">
|
||
Test a new type of technology called the World Wide
|
||
<div class="message-close icon-remove"></div>
|
||
</div>
|
||
<!-- End Message -->
|
||
<!-- Success Message -->
|
||
<div class="b-message message-success">
|
||
When one of our company’s founders set up a few computers
|
||
<div class="message-close icon-remove"></div>
|
||
</div>
|
||
<!-- End Success Message -->
|
||
<div class="gap" style="height: 30px;"></div>
|
||
</div>
|
||
<div class="row-item col-md-6">
|
||
<!-- Error Message -->
|
||
<div class="b-message message-error">
|
||
It was 1996 when one of our company’s founders set up
|
||
<div class="message-close icon-remove"></div>
|
||
</div>
|
||
<!-- End Error Message -->
|
||
<!-- Info Message -->
|
||
<div class="b-message message-info">
|
||
Founders set up a few computers in his basement to test
|
||
<div class="message-close icon-remove"></div>
|
||
</div>
|
||
<!-- End Info Message -->
|
||
<div class="gap" style="height: 30px;"></div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="row-item col-md-6">
|
||
<h3 class="lined margin-20">Table</h3>
|
||
<!-- Table -->
|
||
<div class="b-table">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<td>
|
||
<i class="icon-globe"></i>Perspic
|
||
</td>
|
||
<td>
|
||
<i class="icon-lightbulb"></i>Omnis iste
|
||
</td>
|
||
<td>
|
||
<i class="icon-print"></i>Volupta
|
||
</td>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>
|
||
Accusantm
|
||
</td>
|
||
<td>
|
||
Dolorem
|
||
</td>
|
||
<td>
|
||
Laudantium
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
Consequat
|
||
</td>
|
||
<td>
|
||
Nostrum
|
||
</td>
|
||
<td style="text-align: center;">
|
||
<i class="icon-ok" style="color: #62c82a;"></i>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
Molestiae
|
||
</td>
|
||
<td style="text-align: center;">
|
||
<i class="icon-ok" style="color: #62c82a;"></i>
|
||
</td>
|
||
<td>
|
||
Aspernat
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
Assumenda
|
||
</td>
|
||
<td>
|
||
Repellen
|
||
</td>
|
||
<td>
|
||
Impedit
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<!-- End Table -->
|
||
<div class="gap" style="height: 10px;">
|
||
</div>
|
||
</div>
|
||
<div class="row-item col-md-6">
|
||
<h3 class="lined margin-20">Progress Bars</h3>
|
||
<!-- Progress Bars -->
|
||
<div class="element-wrap">
|
||
<!-- Item 1 -->
|
||
<div class="b-progress-bar" data-capacity="100" data-value="97">
|
||
<div class="progress-label">
|
||
Progress 97%
|
||
</div>
|
||
<div class="progress-scale">
|
||
<div class="progress-line">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Item 1 -->
|
||
<!-- Item 2 -->
|
||
<div class="b-progress-bar" data-capacity="100" data-value="86">
|
||
<div class="progress-label">
|
||
Progress 86%
|
||
</div>
|
||
<div class="progress-scale">
|
||
<div class="progress-line m-2">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Item 2 -->
|
||
<!-- Item 3 -->
|
||
<div class="b-progress-bar" data-capacity="100" data-value="78">
|
||
<div class="progress-label">
|
||
Progress 78%
|
||
</div>
|
||
<div class="progress-scale">
|
||
<div class="progress-line m-3">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Item 3 -->
|
||
<!-- Item 4 -->
|
||
<div class="b-progress-bar" data-capacity="100" data-value="65">
|
||
<div class="progress-label">
|
||
Progress 65%
|
||
</div>
|
||
<div class="progress-scale">
|
||
<div class="progress-line m-4">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Item 4 -->
|
||
<!-- Item 5 -->
|
||
<div class="b-progress-bar" data-capacity="100" data-value="49">
|
||
<div class="progress-label">
|
||
Progress 49%
|
||
</div>
|
||
<div class="progress-scale">
|
||
<div class="progress-line m-5">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Item 5 -->
|
||
</div>
|
||
<!-- End Progress Bars -->
|
||
<div class="gap" style="height: 10px;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- END CONTENT
|
||
============================================= -->
|
||
|
||
<!-- FOOTER
|
||
============================================= -->
|
||
<div class="footer">
|
||
<!-- Widget Area -->
|
||
<div class="b-widgets">
|
||
<div class="container layout">
|
||
<div class="row">
|
||
<!-- Links -->
|
||
<div class="row-item col-md-3">
|
||
<h3>Links</h3>
|
||
<ul class="b-list just-links m-dark">
|
||
<li><a href="#">Voluptas Assumenda</a></li>
|
||
<li><a href="#">Repudiandae Sint</a></li>
|
||
<li><a href="#">Perferendis Doloribus</a></li>
|
||
<li><a href="#">Maxime Placeat</a></li>
|
||
<li><a href="#">Quidem Rerum</a></li>
|
||
<li><a href="#">Occaecati Cupiditate</a></li>
|
||
</ul>
|
||
</div>
|
||
<!-- End Links -->
|
||
<!-- Latest Tweets -->
|
||
<div class="row-item col-md-3">
|
||
<h3>Latest Tweets</h3>
|
||
<div class="b-twitter m-footer">
|
||
<ul>
|
||
<!-- Twitter Message 1 -->
|
||
<li>
|
||
<span>Sed ut perspiciatis unde omnis iste natus error sit voluptatem <a href="#" class="link">http://twitter.com</a></span>
|
||
<span class="twit-date">Jan 7, 2013</span>
|
||
</li>
|
||
<!-- Twitter Message 2 -->
|
||
<li>
|
||
<span>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aliquid :) <a href="#" class="link">http://twitter.com</a></span>
|
||
<span class="twit-date">Jan 7, 2013</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!-- End Latest Tweets -->
|
||
<!-- Tag Cloud -->
|
||
<div class="row-item col-md-3">
|
||
<h3>Popular Tags</h3>
|
||
<div class="b-tag-cloud m-dark">
|
||
<a href="#">beach</a>
|
||
<a href="#">bar</a>
|
||
<a href="#">blog</a>
|
||
<a href="#">business</a>
|
||
<a href="#">coctail</a>
|
||
</div>
|
||
</div>
|
||
<!-- End Tag Cloud -->
|
||
<!-- Contact Form -->
|
||
<div class="row-item col-md-3">
|
||
<h3>Contact Form</h3>
|
||
<!-- Success Message -->
|
||
<div class="form-message"></div>
|
||
<!-- Form -->
|
||
<form class="b-form b-contact-form" action="contact.php">
|
||
<div class="input-wrap m-full-width">
|
||
<i class="icon-user"></i>
|
||
<input class="field-name" type="text" placeholder="Name (required)">
|
||
</div>
|
||
<div class="input-wrap m-full-width">
|
||
<i class="icon-envelope"></i>
|
||
<input class="field-email" type="text" placeholder="E-mail (required)">
|
||
</div>
|
||
<div class="textarea-wrap">
|
||
<i class="icon-pencil"></i>
|
||
<textarea class="field-comments" placeholder="Message"></textarea>
|
||
</div>
|
||
<input class="btn-submit btn colored" type="submit" value="Send">
|
||
</form>
|
||
<!-- End Contact Form -->
|
||
</div>
|
||
<!-- End Get In Touch -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Widget Area -->
|
||
<!-- Copyright Area -->
|
||
<div class="b-copyright">
|
||
<div class="container layout">
|
||
<!-- Copyright Text -->
|
||
<span class="copy">Copyright © 2016 <a href="index.html">Boson</a>. All Right Reserved.</span>
|
||
<!-- Social Icons -->
|
||
<ul class="b-social bot">
|
||
<li>Follow Us:</li>
|
||
<li><a class="fb" href="#"><i class="icon-facebook"></i></a></li>
|
||
<li><a class="tw" href="#"><i class="icon-twitter"></i></a></li>
|
||
<li><a class="gl" href="#"><i class="icon-google-plus"></i></a></li>
|
||
<li><a class="dr" href="#"><i class="icon-dribbble"></i></a></li>
|
||
<li><a class="sk" href="#"><i class="icon-skype"></i></a></li>
|
||
<!--
|
||
<li><a class="yt" href="#"><i class="icon-youtube"></i></a></li>
|
||
<li><a class="tl" href="#"><i class="icon-tumblr"></i></a></li>
|
||
<li><a class="is" href="#"><i class="icon-instagram"></i></a></li>
|
||
<li><a class="pt" href="#"><i class="icon-pinterest"></i></a></li>
|
||
<li><a class="lin" href="#"><i class="icon-linkedin"></i></a></li>
|
||
<li><a class="vk" href="#"><i class="icon-vk"></i></a></li>
|
||
<li><a class="dx" href="#"><i class="icon-dropbox"></i></a></li>
|
||
<li><a class="fs" href="#"><i class="icon-foursquare"></i></a></li>
|
||
<li><a class="gh" href="#"><i class="icon-github-alt"></i></a></li>
|
||
<li><a class="mx" href="#"><i class="icon-maxcdn"></i></a></li>-->
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- END FOOTER
|
||
============================================= -->
|
||
|
||
</div>
|
||
<!-- END MAIN
|
||
============================================= -->
|
||
<script src="js/menu-target.js"></script>
|
||
|
||
</body>
|
||
</html>
|