703 lines
37 KiB
HTML
703 lines
37 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>
|
|
<script src="js/main2.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="#">Typography</a></li>
|
|
</ul>
|
|
<!-- Title -->
|
|
<h1>Typography</h1>
|
|
</div>
|
|
</div>
|
|
<!-- END TITLE BAR
|
|
============================================= -->
|
|
|
|
<!-- CONTENT
|
|
============================================= -->
|
|
<div class="content">
|
|
<div class="container layout">
|
|
<div class="row">
|
|
<div class="row-item col-md-6">
|
|
<h1>H1 Heading</h1>
|
|
<p>
|
|
Lorem ipsum dosectetur adipisicing This is sup element elit, sed do. Lorem ipsum This is sub element dolor sit amet, consectetur adipisicing elit.
|
|
</p>
|
|
<h2>H2 Heading</h2>
|
|
<p>
|
|
Lorem ipsum dosectetur adipisicing This is sup element elit, sed do. Lorem ipsum This is sub element dolor sit amet, consectetur adipisicing elit.
|
|
</p>
|
|
<h3>H3 Heading</h3>
|
|
<p>
|
|
Lorem ipsum dosectetur adipisicing This is sup element elit, sed do. Lorem ipsum This is sub element dolor sit amet, consectetur adipisicing elit.
|
|
</p>
|
|
<h4>H4 Heading</h4>
|
|
<p>
|
|
Lorem ipsum dosectetur adipisicing This is sup element elit, sed do. Lorem ipsum This is sub element dolor sit amet, consectetur adipisicing elit.
|
|
</p>
|
|
<h5>H5 Heading</h5>
|
|
<p>
|
|
Lorem ipsum dosectetur adipisicing This is sup element elit, sed do. Lorem ipsum This is sub element dolor sit amet, consectetur adipisicing elit.
|
|
</p>
|
|
<h6>H6 Heading</h6>
|
|
<p>
|
|
Lorem ipsum dosectetur adipisicing This is sup element elit, sed do. Lorem ipsum This is sub element dolor sit amet, consectetur adipisicing elit.
|
|
</p>
|
|
</div>
|
|
<div class="row-item col-md-6">
|
|
<h1 class="lined">H1 Heading</h1>
|
|
<p>
|
|
Lorem ipsum dosectetur adipisicing This is sup element elit, sed do. Lorem ipsum This is sub element dolor sit amet, consectetur adipisicing elit.
|
|
</p>
|
|
<h2 class="lined">H2 Heading</h2>
|
|
<p>
|
|
Lorem ipsum dosectetur adipisicing This is sup element elit, sed do. Lorem ipsum This is sub element dolor sit amet, consectetur adipisicing elit.
|
|
</p>
|
|
<h3 class="lined">H3 Heading</h3>
|
|
<p>
|
|
Lorem ipsum dosectetur adipisicing This is sup element elit, sed do. Lorem ipsum This is sub element dolor sit amet, consectetur adipisicing elit.
|
|
</p>
|
|
<h4 class="lined">H4 Heading</h4>
|
|
<p>
|
|
Lorem ipsum dosectetur adipisicing This is sup element elit, sed do. Lorem ipsum This is sub element dolor sit amet, consectetur adipisicing elit.
|
|
</p>
|
|
<h5 class="lined">H5 Heading</h5>
|
|
<p>
|
|
Lorem ipsum dosectetur adipisicing This is sup element elit, sed do. Lorem ipsum This is sub element dolor sit amet, consectetur adipisicing elit.
|
|
</p>
|
|
<h6 class="lined">H6 Heading</h6>
|
|
<p>
|
|
Lorem ipsum dosectetur adipisicing This is sup element elit, sed do. Lorem ipsum This is sub element dolor sit amet, consectetur adipisicing elit.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="gap" style="height: 30px;">
|
|
</div>
|
|
<!-- Centered H1 -->
|
|
<h1 class="centered">Tincidunt Ut Laoreet Dolore!</h1>
|
|
<!-- Centered Paragraph 20px -->
|
|
<p class="p-20 centered">
|
|
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat ullamcorper.
|
|
</p>
|
|
<!-- End Centered Paragraph 20px -->
|
|
<!-- Centered Big Button -->
|
|
<p class="centered">
|
|
<a href="#" class="btn big colored"><i class="icon-desktop"></i>Purchase Now</a>
|
|
</p>
|
|
<!-- End Centered Big Button -->
|
|
<div class="gap" style="height: 30px;">
|
|
</div>
|
|
<!-- Intro Text -->
|
|
<p class="intro" style="margin-bottom: 15px;">
|
|
<strong>Proin ac ultricies velit?</strong><br> Aliquam accumsan, sapien id elementum venenatis
|
|
</p>
|
|
<!-- End Intro Text -->
|
|
<!-- Centered Buttons -->
|
|
<p class="centered">
|
|
<a href="#" class="btn">Learn More..</a><a href="#" class="btn colored">Get Started!</a>
|
|
</p>
|
|
<!-- End Centered Buttons -->
|
|
<div class="gap" style="height: 30px;">
|
|
</div>
|
|
<!-- Intro Text in the Box -->
|
|
<div class="b-box gray">
|
|
<p class="intro">
|
|
<strong>Sed ut perspiciatis unde</strong> omnis iste natus error sit voluptatem <strong class="colored">accusantium doloremque</strong> laudantium, totam rem aperiam
|
|
</p>
|
|
</div>
|
|
<!-- End Intro Text in the Box -->
|
|
<div class="gap" style="height: 30px;">
|
|
</div>
|
|
<!-- Intro Text in the Box -->
|
|
<div class="b-box gray" style="padding-bottom: 5px;">
|
|
<!-- Intro Text -->
|
|
<p class="intro" style="margin-bottom: 15px;">
|
|
<strong>Proin ac ultricies velit?</strong><br> Aliquam accumsan, <strong class="colored">sapien id elementum</strong> venenatis
|
|
</p>
|
|
<!-- End Intro Text -->
|
|
<!-- Centered Buttons -->
|
|
<p class="centered">
|
|
<a href="#" class="btn">Learn More..</a><a href="#" class="btn colored">Get Started!</a>
|
|
</p>
|
|
<!-- End Centered Buttons -->
|
|
</div>
|
|
<!-- End Intro Text in the Box -->
|
|
<div class="gap" style="height: 30px;">
|
|
</div>
|
|
<!-- Quote in the Box -->
|
|
<div class="b-box gray" style="padding: 20px 20px 0px;">
|
|
<div class="blockquote">
|
|
Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium... <a href="#">Learn more<i class="icon-circle-arrow-right" style="margin-left: 7px; font-size: 14px;"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Quote in the Box -->
|
|
<div class="gap" style="height: 30px;">
|
|
</div>
|
|
<h3 class="lined margin-20">Blockquote & Pullquotes</h3>
|
|
<p>
|
|
Ut aenean pellentesque felis at turpis
|
|
<!-- Link -->
|
|
<a href="#">this is the link</a>
|
|
<!-- End Link -->
|
|
dictum ac wisi libero a, nec sed ac elit
|
|
<!-- Strong -->
|
|
<strong>this is the strong text</strong>
|
|
<!-- End Strong -->
|
|
. Fringilla penatibus orci lacus aliquet lacus aliquet et nisl nunc, per sed sed maecenas.Lectus tincidunt pellentesque augue urna sit sed, suspendisse
|
|
<!-- Dark Mark -->
|
|
<mark>dark mark element</mark>
|
|
<!-- End Dark Mark -->
|
|
a donec, iaculis aenean,
|
|
<!-- Green Mark -->
|
|
<mark class="green">green mark element</mark>
|
|
<!-- End Green Mark -->
|
|
viverra vestibulum, nascetur
|
|
<!-- Yellow Mark -->
|
|
<mark class="yellow">yellow mark element</mark>
|
|
<!-- End Yellow Mark -->
|
|
per sed sed maecenas
|
|
<!-- Orange Mark -->
|
|
<mark class="orange">orange mark element</mark>
|
|
<!-- End Orange Mark -->
|
|
nibh molestie fusce.
|
|
</p>
|
|
<!-- Blockquote -->
|
|
<div class="blockquote">
|
|
Sapien pede libero. Maecenas lacus aliquet et nisl nunc, per sed sed maecenas.Lectus tincidunt pellentesque augue urna sit sed, arcu sed ante ac montes pellentesque consectetuer.
|
|
</div>
|
|
<!-- End Blockquote -->
|
|
<p>
|
|
Fringilla penatibus orci est non mollit, suspendisse pulvinar egestas a donec. Vulputate mi dui suscipit, molestie vulputate libero fusce iaculis suscipit. Sapien pede libero. Maecenas lacus aliquet et nisl nunc, per sed sed maecenas. Lectus tincidunt pellentesque augue urna sit sed, arcu sed ante ac montes pellentesque consectetuer, neque magnis penatibus laoreet vehicula nulla orci, a malesuada justo laoreet ipsum, in ac fusce.
|
|
</p>
|
|
<!-- Blockquote Aligned to the Left -->
|
|
<div class="blockquote m-left">
|
|
Sapien pede libero. Maecenas lacus aliquet et nisl nunc, per sed sed maecenas.Lectus tincidunt pellentesque augue urna sit sed, arcu sed ante ac montes pellentesque consectetuer.
|
|
</div>
|
|
<!-- End Blockquote Aligned to the Left -->
|
|
<p>
|
|
Fringilla penatibus orci est non mollit, suspendisse pulvinar egestas a donec. Vulputate mi dui suscipit, molestie vulputate libero fusce iaculis suscipit. Sapien pede libero. Maecenas lacus aliquet et nisl nunc, per sed sed maecenas. Lectus tincidunt pellentesque augue urna sit sed, arcu sed ante ac montes pellentesque consectetuer, neque magnis penatibus laoreet vehicula nulla orci, a malesuada justo laoreet ipsum, in ac fusce.
|
|
</p>
|
|
<p>
|
|
Fringilla penatibus orci est non mollit, suspendisse pulvinar egestas a donec. Vulputate mi dui suscipit, molestie vulputate libero fusce iaculis suscipit. Sapien pede libero. Maecenas lacus aliquet et nisl nunc, per sed sed maecenas.Lectus tincidunt pellentesque augue urna sit sed, arcu sed ante ac montes pellentesque consectetuer, neque magnis penatibus laoreet vehicula nulla orci, a malesuada justo laoreet ipsum, in ac fusce.
|
|
</p>
|
|
<!-- Blockquote Aligned to the Right -->
|
|
<div class="blockquote m-right">
|
|
Sapien pede libero. Maecenas lacus aliquet et nisl nunc, per sed sed maecenas.Lectus tincidunt pellentesque augue urna sit sed, arcu sed ante ac montes pellentesque consectetuer.
|
|
</div>
|
|
<!-- End Blockquote Aligned to the Right -->
|
|
<p>
|
|
Fringilla penatibus orci est non mollit, suspendisse pulvinar egestas a donec. Vulputate mi dui suscipit, molestie vulputate libero fusce iaculis suscipit. Sapien pede libero. Maecenas lacus aliquet et nisl nunc, per sed sed maecenas.Lectus tincidunt pellentesque augue urna sit sed, arcu sed ante ac montes pellentesque consectetuer, neque magnis penatibus laoreet vehicula nulla orci, a malesuada justo laoreet ipsum, in ac fusce.
|
|
</p>
|
|
<p>
|
|
Fringilla <strong>penatibus orci est non mollit, suspendisse pulvinar egestas a donec. Vulputate mi dui suscipit</strong>, molestie vulputate libero fusce iaculis suscipit. Sapien pede libero. Maecenas lacus aliquet et nisl nunc, per sed sed maecenas.Lectus tincidunt pellentesque augue urna sit sed, arcu sed ante ac montes pellentesque consectetuer, neque magnis penatibus laoreet vehicula nulla orci, a malesuada justo laoreet ipsum, in ac fusce.
|
|
</p>
|
|
<div class="gap" style="height: 30px;">
|
|
</div>
|
|
<div class="row">
|
|
<div class="row-item col-md-6">
|
|
<h3 class="lined margin-20">Unordered List</h3>
|
|
<!-- Unordered List -->
|
|
<ul>
|
|
<li>
|
|
Maecenas lacus aliquet et nisl nunc, per sed
|
|
<ul>
|
|
<li>Maecenas lacus aliquet et nisl nunc, per sed</li>
|
|
<li>Neque magnis penatibus laoreet vehicula nulla</li>
|
|
<li>Sed ante ac montes pellentesque consectetuer</li>
|
|
</ul>
|
|
</li>
|
|
<li>Neque magnis penatibus laoreet vehicula nulla</li>
|
|
<li>Sed ante ac montes pellentesque consectetuer</li>
|
|
</ul>
|
|
<!-- End Unordered List -->
|
|
<div class="gap" style="height: 30px;">
|
|
</div>
|
|
</div>
|
|
<div class="row-item col-md-6">
|
|
<h3 class="lined margin-20">Ordered List</h3>
|
|
<!-- Ordered List -->
|
|
<ol>
|
|
<li>
|
|
Maecenas lacus aliquet et nisl nunc, per sed
|
|
<ol>
|
|
<li>Maecenas lacus aliquet et nisl nunc, per sed</li>
|
|
<li>Neque magnis penatibus laoreet vehicula nulla</li>
|
|
<li>Sed ante ac montes pellentesque consectetuer</li>
|
|
</ol>
|
|
</li>
|
|
<li>Neque magnis penatibus laoreet vehicula nulla</li>
|
|
<li>Sed ante ac montes pellentesque consectetuer</li>
|
|
</ol>
|
|
<!-- End Ordered List -->
|
|
<div class="gap" style="height: 30px;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h3 class="lined margin-20">Preformatted Text</h3>
|
|
<!-- Preformatted Text -->
|
|
<pre>
|
|
Fringilla penatibus orci est non mollit. Suspendisse pulvinar egestas a donec. Vulputate mi dui suscipit. Molestie vulputate libero fusce iaculis suscipit.
|
|
</pre>
|
|
<!-- End Preformatted Text -->
|
|
<div class="gap" style="height: 30px;">
|
|
</div>
|
|
<h3 class="lined margin-20">Dropcaps</h3>
|
|
<div class="row">
|
|
<div class="row-item col-md-6">
|
|
<!-- Dropcap 1 -->
|
|
<p>
|
|
<span class="dropcap simple">S</span>t aenean pellentesque felis at turpis <a href="#">bibendum, duis eu consectetur sed tellus, blandit pulvinar</a> dictum ac wisi libero a, nec sed ac elit. Fringilla penatibus orci est non mollit, suspendisse pulvinar egestas a donec, iaculis aenean, parturient velit elit ac viverra vestibulum, quis et nascetur rutrum nibh molestie fusce penatibus orci est non mollit, suspendisse pulvinar egestas a donec.
|
|
</p>
|
|
<!-- End Dropcap 1 -->
|
|
<div class="gap" style="height: 30px;">
|
|
</div>
|
|
</div>
|
|
<div class="row-item col-md-6">
|
|
<!-- Dropcap 2 -->
|
|
<p>
|
|
<span class="dropcap with-bg">U</span>t aenean pellentesque felis at turpis <a href="#">bibendum, duis eu consectetur sed tellus, blandit pulvinar</a> dictum ac wisi libero a, nec sed ac elit. Fringilla penatibus orci est non mollit, suspendisse pulvinar egestas a donec, iaculis aenean, parturient velit elit ac viverra vestibulum, quis et nascetur rutrum nibh molestie fusce penatibus orci est non mollit, suspendisse pulvinar egestas a donec.
|
|
</p>
|
|
<!-- End Dropcap 2 -->
|
|
<div class="gap" style="height: 30px;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h3 class="lined margin-20">Dividers</h3>
|
|
<p>
|
|
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
|
|
</p>
|
|
<!-- Divider -->
|
|
<hr>
|
|
<!-- End Divider -->
|
|
<p>
|
|
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
|
|
</p>
|
|
<!-- Divider Dashed -->
|
|
<hr class="dashed">
|
|
<!-- End Divider Dashed -->
|
|
<p>
|
|
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
|
|
</p>
|
|
<!-- Shadow Divider -->
|
|
<hr class="shadow-2">
|
|
<!-- End Shadow Divider -->
|
|
<p>
|
|
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
|
|
</p>
|
|
<!-- Striped Divider -->
|
|
<hr class="striped">
|
|
<!-- End Striped Divider -->
|
|
<p>
|
|
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
|
|
</p>
|
|
</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
|
|
============================================= -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</body>
|
|
</html> |