2287 lines
190 KiB
HTML
Executable File
2287 lines
190 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<!--[if lt IE 7]><html class="no-js lt-ie10 lt-ie9 lt-ie8 lt-ie7 "> <![endif]-->
|
|
<!--[if IE 7]><html class="no-js lt-ie10 lt-ie9 lt-ie8"> <![endif]-->
|
|
<!--[if IE 8]><html class="no-js lt-ie10 lt-ie9"> <![endif]-->
|
|
<!--[if IE 9]><html class="no-js lt-ie10"> <![endif]-->
|
|
<!--[if gt IE 8]><!-->
|
|
<html class="no-js">
|
|
<!--<![endif]-->
|
|
|
|
<head>
|
|
|
|
<!-- Basic Page Needs -->
|
|
<meta charset="utf-8">
|
|
<title>Be</title>
|
|
<meta name="description" content="">
|
|
<meta name="author" content="">
|
|
|
|
<!-- Mobile Specific Metas -->
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
|
|
<!-- Favicons -->
|
|
<link rel="shortcut icon" href="images/favicon.ico">
|
|
|
|
<!-- FONTS -->
|
|
<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Roboto:100,300,400,400italic,700'>
|
|
<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Patua+One:100,300,400,400italic,700'>
|
|
<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Lato:100,100,300,400,400italic,700'>
|
|
<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Lora:100,300,400,400italic,500,700,700italic'>
|
|
|
|
<!-- CSS -->
|
|
<link rel='stylesheet' href='../css/global.css'>
|
|
<link rel='stylesheet' href='css/structure.css'>
|
|
<link rel='stylesheet' href='css/betheme.css'>
|
|
<link rel='stylesheet' href='css/custom.css'>
|
|
|
|
</head>
|
|
|
|
<body class="color-custom style-default layout-full-width no-content-padding header-plain header-fw minimalist-header sticky-header sticky-white ab-hide subheader-both-center menuo-last menuo-right mm-vertical mobile-tb-hide mobile-mini-mr-ll">
|
|
<div id="Wrapper">
|
|
<div id="Header_wrapper">
|
|
<header id="Header">
|
|
<div class="header_placeholder"></div>
|
|
<div id="Top_bar">
|
|
<div class="container">
|
|
<div class="column one">
|
|
<div class="top_bar_left clearfix">
|
|
<div class="logo">
|
|
<span id="logo"><img class="logo-main scale-with-grid" src="images/theme.png" alt="theme"><img class="logo-sticky scale-with-grid" src="images/theme.png" alt="theme"><img class="logo-mobile scale-with-grid" src="images/theme.png" alt="theme"><img class="logo-mobile-sticky scale-with-grid" src="images/theme.png" alt="theme"></span>
|
|
</div>
|
|
<div class="menu_wrapper">
|
|
<nav id="menu" class="menu-main-menu-container">
|
|
<ul id="menu-main-menu" class="menu">
|
|
<li>
|
|
<a href="http://bit.ly/1WCOsgu"><span>Home</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="about.html"><span>Pages</span></a>
|
|
<ul class="mfn-megamenu">
|
|
<li>
|
|
<ul>
|
|
<li>
|
|
<a href="about.html"><span><i class="icon-info"></i> About</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="careers.html"><span><i class="icon-heart-empty-fa"></i> Careers</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="contact.html"><span><i class="icon-address"></i> Contact</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="under-construction.html"><span><i class="icon-traffic-cone"></i> Under Construction</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<ul>
|
|
<li>
|
|
<a href="error.html"><span><i class="icon-traffic-cone"></i> Error 404</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="features.html"><span><i class="icon-star-empty"></i> Features</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="gallery.html"><span><i class="icon-picture"></i> Gallery</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="blank-page.html"><span><i class="icon-doc"></i> Blank Page</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<ul>
|
|
<li>
|
|
<a href="help-center.html"><span><i class="icon-lifebuoy"></i> Help Center</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="how-it-works.html"><span><i class="icon-graduation-cap"></i> How it works?</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="our-team.html"><span><i class="icon-users"></i> Our team</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="features.html"><span><i class="icon-comment-fa"></i> Features</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<ul>
|
|
<li>
|
|
<a href="press.html"><span><i class="icon-newspaper"></i> Press</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="pricing.html"><span><i class="icon-money-line"></i> Pricing</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="sidebar.html"><span><i class="icon-list-add"></i> Sidebar</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="dual-sidebars.html"><span><i class=" icon-pause"></i> Dual Sidebars</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="current_page_item">
|
|
<a href="typography.html"><span>Shortcodes</span></a>
|
|
<ul class="mfn-megamenu">
|
|
<li class="hide-border">
|
|
<a class="mfn-megamenu-title" href="typography.html"><span>Typography</span></a>
|
|
<ul>
|
|
<li>
|
|
<a href="typography.html#alert"><span>Alert</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="typography.html#basic"><span>Basic</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="typography.html#tooltip"><span>Blockquote</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="typography.html#buttons"><span>Buttons</span></a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="typography.html#columns"><span>Columns</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="typography.html#contentlink"><span>Content Link</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="typography.html#divider"><span>Divider</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="typography.html#dropcap"><span>Dropcap</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="typography.html#fancylink"><span>Fancy Link</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="typography.html#googlefont"><span>Google Font</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="typography.html#dropcap"><span>Highlight</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="typography.html#divider"><span>Hr</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="typography.html#icons"><span>Icons</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="typography.html#iconbar"><span>Icon Bar</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="typography.html#iconblock"><span>Icon Block</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="typography.html#idea"><span>Idea</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<ul>
|
|
<li>
|
|
<a href="typography.html#image"><span>Image</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="typography.html#lists"><span>Lists & Bullets lists</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="typography.html#popup"><span>Popup</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="typography.html#iconblock"><span>Progress Icons</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="typography.html#popup"><span>Share Box</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="typography.html#table"><span>Table</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="typography.html#tooltip"><span>Tooltip</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="typography.html#tooltip"><span>Tooltip Image</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="gallery.html"><span>Gallery</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a class="mfn-megamenu-title" href="boxes-infographics.html"><span>Boxes & Infographics</span></a>
|
|
<ul>
|
|
<li>
|
|
<a href="boxes-infographics.html#articlebox"><span>Article box</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="boxes-infographics.html#beforeafter"><span>Before After</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="boxes-infographics.html#chart"><span>Chart</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="boxes-infographics.html#countdown"><span>Countdown</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="boxes-infographics.html#counter"><span>Counter</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="boxes-infographics.html#featurebox"><span>Feature Box</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="boxes-infographics.html#flatbox"><span>Flat Box</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="boxes-infographics.html#hoverbox"><span>Hover Box</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="boxes-infographics.html#iconbox"><span>Icon Box</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="boxes-infographics.html#photobox"><span>Photo Box</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="boxes-infographics.html#progressbar"><span>Progress Bars</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="boxes-infographics.html#promobox"><span>Promo Box</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="boxes-infographics.html#quickfact"><span>Quick Fact</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="boxes-infographics.html#slidingbox"><span>Sliding Box</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="boxes-infographics.html#storybox"><span>Story Box</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="boxes-infographics.html#trailerbox"><span>Trailer Box</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="boxes-infographics.html#zoombox"><span>Zoom Box</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a class="mfn-megamenu-title" href="content-blocks.html"><span>Content blocks</span></a>
|
|
<ul>
|
|
<li>
|
|
<a href="content-blocks.html#accordion"><span>Accordion</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="content-blocks.html#faq"><span>FAQ</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="content-blocks.html#helper"><span>Helper</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="content-blocks.html#list"><span>List</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="content-blocks.html#pricingitem"><span>Pricing Item</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="content-blocks.html#slider"><span>Slider</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="content-blocks.html#tabs"><span>Tabs</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a class="mfn-megamenu-title" href="content-elements.html"><span>Content elements</span></a>
|
|
<ul>
|
|
<li>
|
|
<a href="content-elements.html#calltoaction"><span>Call to Action</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="content-elements.html#contactbox"><span>Contact Box</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="content-elements.html#fancydivider"><span>Fancy Divider</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="content-elements.html#fancyheading"><span>Fancy Heading</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="content-elements.html#features-list"><span>Features List</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="content-elements.html#hovercolor"><span>Hover Color</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="content-elements.html#howitworks"><span>How It Works</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="content-elements.html#contactbox"><span>Infobox</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="content-elements.html#mapbig"><span>Map</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="content-elements.html#contactbox"><span>Opening Hours</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="content-elements.html#ourteam"><span>Our Team</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="content-elements.html#ourteamlist"><span>Our Team List</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="content-elements.html#timeline"><span>Timeline</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="content-elements.html#video"><span>Video</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a class="mfn-megamenu-title" href="loops.html"><span>Loops</span></a>
|
|
<ul>
|
|
<li>
|
|
<a href="loops.html#blog-item"><span>Blog</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="loops.html#blognews"><span>Blog News</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="loops.html#blogslider"><span>Blog Slider</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="loops.html#clients"><span>Clients</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="loops.html#clientsslider"><span>Clients Slider</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="loops.html#offerslider"><span>Offer Slider Full</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="loops.html#offersliderthumb"><span>Offer Slider Thumb</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="loops.html#portfolio-item"><span>Portfolio</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="loops.html#portfoliogrid"><span>Portfolio Grid</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="loops.html#portfoliophoto"><span>Portfolio Photo</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="loops.html#portfolioslider"><span>Portfolio Slider</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="loops.html#shopslider"><span>Shop Slider</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="loops.html#testimonials-item"><span>Testimonials</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="loops.html#testimonialslist"><span>Testimonials List</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a href="blog-classic.html"><span>Blog</span></a>
|
|
<ul class="mfn-megamenu">
|
|
<li>
|
|
<a class="mfn-megamenu-title" href="blog-classic-fullwidth.html"><span>Full width</span></a>
|
|
<ul>
|
|
<li>
|
|
<a href="blog-classic-fullwidth.html"><span>Classic</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="blog-timeline-fullwidth.html"><span>Timeline</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="blog-photo-fullwidth.html"><span>Photo</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="blog-masonry-style-fullwidth.html"><span>Masonry Blog Style</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="blog-masonry-tiles-fullwidth.html"><span>Masonry Tiles</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="blog-grid-fullwidth.html"><span>Grid</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a class="mfn-megamenu-title" href="blog-classic.html"><span>With Sidebar</span></a>
|
|
<ul>
|
|
<li>
|
|
<a href="blog-classic.html"><span>Classic</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="blog-timeline.html"><span>Timeline</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="blog-photo.html"><span>Photo</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="blog-masonry-style.html"><span>Masonry Blog Style</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="blog-masonry-tiles.html"><span>Masonry Tiles</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="blog-grid.html"><span>Grid</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="hide-border">
|
|
<a class="mfn-megamenu-title" href="content-builder-for-posts.html"><span>Single Post</span></a>
|
|
<ul>
|
|
<li>
|
|
<a href="content-builder-for-posts.html"><span>Content builder for posts</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="post-with-vertical-photo.html"><span>Post with vertical photo</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="portfolio-single-1.html"><span>Blockquote</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="post-with-slider.html"><span>Post with Slider</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="post-with-youtube-vimeo.html"><span>Post with youtube / vimeo</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="post-with-html5-video.html"><span>Post with HTML5 Video</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<ul>
|
|
<li>
|
|
<a href="single-post-1.html"><span>Intro Header – Full screen</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="single-post-2.html"><span>Intro Header</span></a>
|
|
</li>
|
|
<li>
|
|
<a target="_blank" href="http://be.beantownthemes.com/html/content/blogger2/item-6.html"><span>Post with Header Image <i class="icon-forward"></i></span></a>
|
|
</li>
|
|
<li>
|
|
<a href="single-post-3.html"><span>Single Post 3</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="single-post-4.html"><span>Single Post 4</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="single-post-5.html"><span>Single Post 5</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="single-post-6.html"><span>Single Post 6</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a href="portfolio-flat-fullwidth.html"><span>Portfolio</span></a>
|
|
<ul class="mfn-megamenu">
|
|
<li>
|
|
<a class="mfn-megamenu-title" href="portfolio-flat-fullwidth.html"><span>Full width</span></a>
|
|
<ul>
|
|
<li>
|
|
<a href="portfolio-flat-fullwidth.html"><span>Flat</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="portfolio-grid-fullwidth.html"><span>Grid</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="portfolio-list-fullwidth.html"><span>List</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="portfolio-masonry-blog-style-fullwidth.html"><span>Masonry Blog Style</span></a>
|
|
</li>
|
|
<li>
|
|
<a target="_blank" href="http://be.beantownthemes.com/html/content/minimal/the-artwork.html"><span>Masonry Minimal <i class="icon-forward"></i></span></a>
|
|
</li>
|
|
<li>
|
|
<a href="portfolio-masonry-flat-fullwidth.html"><span>Masonry Flat</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="portfolio-masonry-hover-details-fullwidth.html"><span>Masonry Hover Details</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="portfolio-exposure.html"><span>Exposure</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a class="mfn-megamenu-title" href="portfolio-flat.html"><span>With Sidebar</span></a>
|
|
<ul>
|
|
<li>
|
|
<a href="portfolio-flat.html"><span>Flat</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="portfolio-grid.html"><span>Grid</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="portfolio-list.html"><span>List</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="portfolio-masonry-blog-style.html"><span>Masonry Blog Style</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="portfolio-masonry-flat.html"><span>Masonry Flat</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="portfolio-masonry-hover-details.html"><span>Masonry Hover Details</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="hide-border">
|
|
<a class="mfn-megamenu-title" href="content-builder-for-portfolio.html"><span>Single Project</span></a>
|
|
<ul>
|
|
<li>
|
|
<a href="content-builder-for-portfolio.html"><span>Content Builder for portfolio</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="single-project-1.html"><span>Single Project 1</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="single-project-2.html"><span>Single Project 2</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="single-project-3.html"><span>Single Project 3</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="single-project-4.html"><span>Single Project 4</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="single-project-5.html"><span>Single Project 5</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="single-project-6.html"><span>Single Project 6</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="single-project-7.html"><span>Single Project 7</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<ul>
|
|
<li>
|
|
<a href="single-project-8.html"><span>Single Project 8</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="single-project-9.html"><span>Single Project 9</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="single-project-10.html"><span>Single Project 10</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="last">
|
|
<a href="shop.html"><span>Shop</span></a>
|
|
<ul>
|
|
<li>
|
|
<a href="shop.html"><span>Grid 3 Columns</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="shop-4-columns.html"><span>Grid 4 Columns</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="shop-list.html"><span>List</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="shop-masonry.html"><span>Masonry</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="product_page.html"><span>Single Product</span></a>
|
|
<ul>
|
|
<li>
|
|
<a href="product_page.html"><span>Single Product 1</span></a>
|
|
</li>
|
|
<li>
|
|
<a target="_blank" href="http://be.beantownthemes.com/html/content/biker/product2.html"><span>Single Product 2 <i class="icon-forward"></i></span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a href="cart.html"><span>Cart</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</nav><a class="responsive-menu-toggle" href="#"><i class="icon-menu-fine"></i></a>
|
|
</div>
|
|
<div class="secondary_menu_wrapper"></div>
|
|
<div class="banner_wrapper"></div>
|
|
<div class="search_wrapper">
|
|
<form method="get" id="searchform" action="#">
|
|
<i class="icon_search icon-search-fine"></i><a href="#" class="icon_close"><i class="icon-cancel-fine"></i></a>
|
|
<input type="text" class="field" name="s" id="s" placeholder="Enter your search">
|
|
<input type="submit" class="submit" value="" style="display:none">
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div class="top_bar_right">
|
|
<div class="top_bar_right_wrapper">
|
|
<a href="http://bit.ly/1M6lijQ" class="button button_theme button_js action_button " target="_blank"><span class="button_label">Buy now</span></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</div>
|
|
<div id="Content">
|
|
<div class="content_wrapper clearfix">
|
|
<div class="sections_group">
|
|
<div class="entry-content">
|
|
<div class="section mcb-section bg-cover" style="padding-top:80px; padding-bottom:60px; background-color:#0e1b27; background-image:url(images/home_betheme_subheader_shortcodes.png); background-repeat:no-repeat; background-position:center top; background-attachment:fixed">
|
|
<div class="section_wrapper mcb-section-inner">
|
|
<div class="wrap mcb-wrap one valign-top clearfix">
|
|
<div class="mcb-wrap-inner">
|
|
<div class="column mcb-column one column_column column-margin-0px">
|
|
<div class="column_attr clearfix align_center">
|
|
<h2 style="color:#fff">200+ shortcodes & items
|
|
<br>
|
|
with 2 unique styles for unlimited possibilities</h2>
|
|
<hr class="no_line" style="margin: 0 auto 40px">
|
|
<h1 class="themecolor">Content blocks</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="section mcb-section section-border-bottom " style="padding-top:45px; padding-bottom:0px; background-color:#eaeaea">
|
|
<div class="section_wrapper mcb-section-inner">
|
|
<div class="wrap mcb-wrap one valign-top clearfix">
|
|
<div class="mcb-wrap-inner">
|
|
<div class="column mcb-column one column_column column-margin-30px">
|
|
<div class="column_attr clearfix align_center">
|
|
<div class="demo-switch">
|
|
<h3><span class="title">Choose global style for all shortcodes:</span><a href="#" class="default" data-style="default">Classic</a><a href="#" class="simple" data-style="simple">Simple</a></h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="section mcb-section" id="tabs" style="padding-top:50px; padding-bottom:0px">
|
|
<div class="section_wrapper mcb-section-inner">
|
|
<div class="wrap mcb-wrap one valign-top clearfix">
|
|
<div class="mcb-wrap-inner">
|
|
<div class="column mcb-column one column_helper">
|
|
<div class="helper">
|
|
<div class="helper_header">
|
|
<h4 class="title"> Tabs <span style="color:#ccc; font-size: 18px; margin-left: 10px;">Horizontal / Vertical</span></h4>
|
|
<div class="links">
|
|
<a class="link link-1 toggle" href="#" data-rel="1"><i class="icon-code"></i> Example Code</a>
|
|
</div>
|
|
</div>
|
|
<div class="helper_content">
|
|
<div class="item item-1">
|
|
<p>
|
|
This Item allows you to create horizontal or vertical tabs. You can add as many tabs as you want.
|
|
</p>
|
|
<hr>
|
|
<p class="big">
|
|
Example Code (horizontal tabs):
|
|
</p>
|
|
<pre class="brush: xml;">
|
|
<div class="jq-tabs* tabs_wrapper tabs_horizontal">
|
|
<ul>
|
|
<li>
|
|
<a href="#tab-1">Commodo luctus</a>
|
|
</li>
|
|
<li>
|
|
<a href="#tab-2">Eget lacina</a>
|
|
</li>
|
|
<li>
|
|
<a href="#tab-3">Porta gravida</a>
|
|
</li>
|
|
</ul>
|
|
<div id="tab-1">
|
|
<p class="big">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit tortor, dictum in gravida nec, aliquet non lorem.
|
|
</p>
|
|
<p>
|
|
Donec vestibulum justo a diam ultricies pellentesque. Quisque mattis diam vel lacus tincidunt elementum. Sed vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor. In iaculis viverra neque, ac eleifend ante lobortis id. In viverra ipsum ac eros tristique dignissim. Donec aliquam velit vitae mi dictum.
|
|
</p>
|
|
</div>
|
|
<div id="tab-2">
|
|
<p class="big">
|
|
Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor.
|
|
</p>
|
|
<p>
|
|
Donec vestibulum justo a diam ultricies pellentesque. Quisque mattis diam vel lacus tincidunt elementum. Sed vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor. In iaculis viverra neque, ac eleifend ante lobortis id.
|
|
</p>
|
|
</div>
|
|
<div id="tab-3">
|
|
<p class="big">
|
|
Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.
|
|
</p>
|
|
<p>
|
|
Donec vestibulum justo a diam ultricies pellentesque. Quisque mattis diam vel lacus tincidunt elementum. Sed vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor. In iaculis viverra neque, ac eleifend ante lobortis id. In viverra ipsum ac eros tristique dignissim. Donec aliquam velit vitae mi dictum.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</pre>
|
|
|
|
<p class="big">
|
|
Example Code (vertical tabs):
|
|
</p>
|
|
<pre class="brush: xml;">
|
|
<div class="jq-tabs* tabs_wrapper tabs_vertical">
|
|
<ul>
|
|
<li>
|
|
<a href="#tab-1">Commodo luctus</a>
|
|
</li>
|
|
<li>
|
|
<a href="#tab-2">Eget lacina</a>
|
|
</li>
|
|
<li>
|
|
<a href="#tab-3">Porta gravida</a>
|
|
</li>
|
|
</ul>
|
|
<div id="tab-1">
|
|
<p>
|
|
<span class="big">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit tortor, dictum in gravida nec, aliquet non lorem. </span>
|
|
</p>
|
|
<p>
|
|
Donec vestibulum justo a diam ultricies pellentesque. Quisque mattis diam vel lacus tincidunt elementum. Sed vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor. In iaculis viverra neque, ac eleifend ante lobortis id. In viverra ipsum ac eros tristique dignissim. Donec aliquam velit vitae mi dictum.
|
|
</p>
|
|
</div>
|
|
<div id="tab-2">
|
|
<p>
|
|
<span class="big">Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor.</span>
|
|
</p>
|
|
<p>
|
|
Donec vestibulum justo a diam ultricies pellentesque. Quisque mattis diam vel lacus tincidunt elementum. Sed vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor. In iaculis viverra neque, ac eleifend ante lobortis id.
|
|
</p>
|
|
</div>
|
|
<div id="tab-3">
|
|
<p>
|
|
<span class="big">Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.</span>
|
|
</p>
|
|
<p>
|
|
Donec vestibulum justo a diam ultricies pellentesque. Quisque mattis diam vel lacus tincidunt elementum. Sed vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor. In iaculis viverra neque, ac eleifend ante lobortis id. In viverra ipsum ac eros tristique dignissim. Donec aliquam velit vitae mi dictum.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column mcb-column one-second column_tabs ">
|
|
<div class="jq-tabs tabs_wrapper tabs_horizontal">
|
|
<ul>
|
|
<li>
|
|
<a href="#tab-58b3355c1407f-1">Commodo luctus</a>
|
|
</li>
|
|
<li>
|
|
<a href="#tab-58b3355c1407f-2">Eget lacina</a>
|
|
</li>
|
|
<li>
|
|
<a href="#tab-58b3355c1407f-3">Porta gravida</a>
|
|
</li>
|
|
</ul>
|
|
<div id="tab-58b3355c1407f-1">
|
|
<p class="big">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit tortor, dictum in gravida nec, aliquet non lorem.
|
|
</p>
|
|
<p>
|
|
Donec vestibulum justo a diam ultricies pellentesque. Quisque mattis diam vel lacus tincidunt elementum. Sed vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor. In iaculis viverra neque, ac eleifend ante lobortis id. In viverra ipsum ac eros tristique dignissim. Donec aliquam velit vitae mi dictum.
|
|
</p>
|
|
</div>
|
|
<div id="tab-58b3355c1407f-2">
|
|
<p class="big">
|
|
Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor.
|
|
</p>
|
|
<p>
|
|
Donec vestibulum justo a diam ultricies pellentesque. Quisque mattis diam vel lacus tincidunt elementum. Sed vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor. In iaculis viverra neque, ac eleifend ante lobortis id.
|
|
</p>
|
|
</div>
|
|
<div id="tab-58b3355c1407f-3">
|
|
<p class="big">
|
|
Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.
|
|
</p>
|
|
<p>
|
|
Donec vestibulum justo a diam ultricies pellentesque. Quisque mattis diam vel lacus tincidunt elementum. Sed vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor. In iaculis viverra neque, ac eleifend ante lobortis id. In viverra ipsum ac eros tristique dignissim. Donec aliquam velit vitae mi dictum.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column mcb-column one-second column_tabs ">
|
|
<div class="jq-tabs tabs_wrapper tabs_vertical">
|
|
<ul>
|
|
<li>
|
|
<a href="#tab-58b3355c140df-1">Commodo luctus</a>
|
|
</li>
|
|
<li>
|
|
<a href="#tab-58b3355c140df-2">Eget lacina</a>
|
|
</li>
|
|
<li>
|
|
<a href="#tab-58b3355c140df-3">Porta gravida</a>
|
|
</li>
|
|
</ul>
|
|
<div id="tab-58b3355c140df-1">
|
|
<p>
|
|
<span class="big">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit tortor, dictum in gravida nec, aliquet non lorem. </span>
|
|
</p>
|
|
<p>
|
|
Donec vestibulum justo a diam ultricies pellentesque. Quisque mattis diam vel lacus tincidunt elementum. Sed vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor. In iaculis viverra neque, ac eleifend ante lobortis id. In viverra ipsum ac eros tristique dignissim. Donec aliquam velit vitae mi dictum.
|
|
</p>
|
|
</div>
|
|
<div id="tab-58b3355c140df-2">
|
|
<p>
|
|
<span class="big">Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor.</span>
|
|
</p>
|
|
<p>
|
|
Donec vestibulum justo a diam ultricies pellentesque. Quisque mattis diam vel lacus tincidunt elementum. Sed vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor. In iaculis viverra neque, ac eleifend ante lobortis id.
|
|
</p>
|
|
</div>
|
|
<div id="tab-58b3355c140df-3">
|
|
<p>
|
|
<span class="big">Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.</span>
|
|
</p>
|
|
<p>
|
|
Donec vestibulum justo a diam ultricies pellentesque. Quisque mattis diam vel lacus tincidunt elementum. Sed vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor. In iaculis viverra neque, ac eleifend ante lobortis id. In viverra ipsum ac eros tristique dignissim. Donec aliquam velit vitae mi dictum.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="section mcb-section" id="accordion" style="padding-top:50px; padding-bottom:0px">
|
|
<div class="section_wrapper mcb-section-inner">
|
|
<div class="wrap mcb-wrap one valign-top clearfix">
|
|
<div class="mcb-wrap-inner">
|
|
<div class="column mcb-column one column_helper">
|
|
<div class="helper">
|
|
<div class="helper_header">
|
|
<h4 class="title">Accordion <span style="color:#ccc; font-size: 18px; margin-left: 10px;">Toggle</span></h4>
|
|
<div class="links">
|
|
<a class="link link-1 toggle" href="#" data-rel="1"><i class="icon-code"></i> Example Code</a>
|
|
</div>
|
|
</div>
|
|
<div class="helper_content">
|
|
<div class="item item-1">
|
|
<p>
|
|
This Item adds an <em>Accordion </em>or<em> Toggle</em> element to the page. You can add as many tabs as you need.
|
|
</p>
|
|
<hr>
|
|
<p class="big">
|
|
Example Code (accordion):
|
|
</p>
|
|
|
|
<pre class="brush: xml;">
|
|
<div class="accordion">
|
|
<div class="mfn-acc accordion_wrapper open1st">
|
|
<div class="question">
|
|
<div class="title">
|
|
<i class="icon-plus acc-icon-plus"></i><i class="icon-minus acc-icon-minus"></i><i class=" icon-cog"></i> Sed est elit posuere ac semper hendrerit neque
|
|
</div>
|
|
<div class="answer">
|
|
<p>
|
|
<span class="big">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit tortor, dictum in gravida nec, aliquet non lorem. </span>
|
|
</p>
|
|
<p>
|
|
Donec vestibulum justo a diam ultricies pellentesque. Quisque mattis diam vel lacus tincidunt elementum. Sed vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor. In iaculis viverra neque, ac eleifend ante lobortis id. In viverra ipsum ac eros tristique dignissim. Donec aliquam velit vitae mi dictum.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="question">
|
|
<div class="title">
|
|
<i class="icon-plus acc-icon-plus"></i><i class="icon-minus acc-icon-minus"></i><i class=" icon-star"></i> Aenean ligula nibh, molestie id viverra a
|
|
</div>
|
|
<div class="answer">
|
|
<p>
|
|
<span class="big">Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor.</span>
|
|
</p>
|
|
<p>
|
|
Donec vestibulum justo a diam ultricies pellentesque. Quisque mattis diam vel lacus tincidunt elementum. Sed vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor. In iaculis viverra neque, ac eleifend ante lobortis id.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="question">
|
|
<div class="title">
|
|
<i class="icon-plus acc-icon-plus"></i><i class="icon-minus acc-icon-minus"></i><i class="icon-users"></i> Morbi sed dolor risus rhoncus sapien
|
|
</div>
|
|
<div class="answer">
|
|
<p>
|
|
<span class="big">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit tortor, dictum in gravida nec, aliquet non lorem. </span>
|
|
</p>
|
|
<p>
|
|
Donec vestibulum justo a diam ultricies pellentesque. Quisque mattis diam vel lacus tincidunt elementum. Sed vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor. In iaculis viverra neque, ac eleifend ante lobortis id. In viverra ipsum ac eros tristique dignissim. Donec aliquam velit vitae mi dictum.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</pre>
|
|
|
|
<p class="big">
|
|
Example Code (toggle):
|
|
</p>
|
|
|
|
<pre class="brush: xml;">
|
|
<div class="accordion">
|
|
<div class="mfn-acc accordion_wrapper open1st toggle">
|
|
<div class="question">
|
|
<div class="title">
|
|
<i class="icon-plus acc-icon-plus"></i><i class="icon-minus acc-icon-minus"></i>Sed est elit posuere ac semper hend
|
|
</div>
|
|
<div class="answer">
|
|
<p>
|
|
<span class="big">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit tortor, dictum in gravida nec, aliquet non lorem. </span>
|
|
</p>
|
|
<p>
|
|
Donec vestibulum justo a diam ultricies pellentesque. Quisque mattis diam vel lacus tincidunt elementum. Sed vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor. In iaculis viverra neque, ac eleifend ante lobortis id. In viverra ipsum ac eros tristique dignissim. Donec aliquam velit vitae mi dictum.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="question">
|
|
<div class="title">
|
|
<i class="icon-plus acc-icon-plus"></i><i class="icon-minus acc-icon-minus"></i>Aenean ligula nibh, molestie id viverra a
|
|
</div>
|
|
<div class="answer">
|
|
<p>
|
|
<span class="big">Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor.</span>
|
|
</p>
|
|
<p>
|
|
Donec vestibulum justo a diam ultricies pellentesque. Quisque mattis diam vel lacus tincidunt elementum. Sed vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor. In iaculis viverra neque, ac eleifend ante lobortis id.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="question">
|
|
<div class="title">
|
|
<i class="icon-plus acc-icon-plus"></i><i class="icon-minus acc-icon-minus"></i>Morbi sed dolor risus rhoncus sapien
|
|
</div>
|
|
<div class="answer">
|
|
<p>
|
|
<span class="big">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit tortor, dictum in gravida nec, aliquet non lorem. </span>
|
|
</p>
|
|
<p>
|
|
Donec vestibulum justo a diam ultricies pellentesque. Quisque mattis diam vel lacus tincidunt elementum. Sed vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor. In iaculis viverra neque, ac eleifend ante lobortis id. In viverra ipsum ac eros tristique dignissim. Donec aliquam velit vitae mi dictum.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column mcb-column one-second column_accordion">
|
|
<div class="accordion">
|
|
<div class="mfn-acc accordion_wrapper open1st">
|
|
<div class="question">
|
|
<div class="title">
|
|
<i class="icon-plus acc-icon-plus"></i><i class="icon-minus acc-icon-minus"></i><i class=" icon-cog"></i> Sed est elit posuere ac semper hendrerit neque
|
|
</div>
|
|
<div class="answer">
|
|
<p>
|
|
<span class="big">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit tortor, dictum in gravida nec, aliquet non lorem. </span>
|
|
</p>
|
|
<p>
|
|
Donec vestibulum justo a diam ultricies pellentesque. Quisque mattis diam vel lacus tincidunt elementum. Sed vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor. In iaculis viverra neque, ac eleifend ante lobortis id. In viverra ipsum ac eros tristique dignissim. Donec aliquam velit vitae mi dictum.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="question">
|
|
<div class="title">
|
|
<i class="icon-plus acc-icon-plus"></i><i class="icon-minus acc-icon-minus"></i><i class=" icon-star"></i> Aenean ligula nibh, molestie id viverra a
|
|
</div>
|
|
<div class="answer">
|
|
<p>
|
|
<span class="big">Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor.</span>
|
|
</p>
|
|
<p>
|
|
Donec vestibulum justo a diam ultricies pellentesque. Quisque mattis diam vel lacus tincidunt elementum. Sed vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor. In iaculis viverra neque, ac eleifend ante lobortis id.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="question">
|
|
<div class="title">
|
|
<i class="icon-plus acc-icon-plus"></i><i class="icon-minus acc-icon-minus"></i><i class="icon-users"></i> Morbi sed dolor risus rhoncus sapien
|
|
</div>
|
|
<div class="answer">
|
|
<p>
|
|
<span class="big">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit tortor, dictum in gravida nec, aliquet non lorem. </span>
|
|
</p>
|
|
<p>
|
|
Donec vestibulum justo a diam ultricies pellentesque. Quisque mattis diam vel lacus tincidunt elementum. Sed vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor. In iaculis viverra neque, ac eleifend ante lobortis id. In viverra ipsum ac eros tristique dignissim. Donec aliquam velit vitae mi dictum.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column mcb-column one-second column_accordion ">
|
|
<div class="accordion">
|
|
<div class="mfn-acc accordion_wrapper open1st toggle">
|
|
<div class="question">
|
|
<div class="title">
|
|
<i class="icon-plus acc-icon-plus"></i><i class="icon-minus acc-icon-minus"></i>Sed est elit posuere ac semper hend
|
|
</div>
|
|
<div class="answer">
|
|
<p>
|
|
<span class="big">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit tortor, dictum in gravida nec, aliquet non lorem. </span>
|
|
</p>
|
|
<p>
|
|
Donec vestibulum justo a diam ultricies pellentesque. Quisque mattis diam vel lacus tincidunt elementum. Sed vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor. In iaculis viverra neque, ac eleifend ante lobortis id. In viverra ipsum ac eros tristique dignissim. Donec aliquam velit vitae mi dictum.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="question">
|
|
<div class="title">
|
|
<i class="icon-plus acc-icon-plus"></i><i class="icon-minus acc-icon-minus"></i>Aenean ligula nibh, molestie id viverra a
|
|
</div>
|
|
<div class="answer">
|
|
<p>
|
|
<span class="big">Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor.</span>
|
|
</p>
|
|
<p>
|
|
Donec vestibulum justo a diam ultricies pellentesque. Quisque mattis diam vel lacus tincidunt elementum. Sed vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor. In iaculis viverra neque, ac eleifend ante lobortis id.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="question">
|
|
<div class="title">
|
|
<i class="icon-plus acc-icon-plus"></i><i class="icon-minus acc-icon-minus"></i>Morbi sed dolor risus rhoncus sapien
|
|
</div>
|
|
<div class="answer">
|
|
<p>
|
|
<span class="big">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit tortor, dictum in gravida nec, aliquet non lorem. </span>
|
|
</p>
|
|
<p>
|
|
Donec vestibulum justo a diam ultricies pellentesque. Quisque mattis diam vel lacus tincidunt elementum. Sed vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor. In iaculis viverra neque, ac eleifend ante lobortis id. In viverra ipsum ac eros tristique dignissim. Donec aliquam velit vitae mi dictum.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="section mcb-section" id="faq" style="padding-top:50px; padding-bottom:0px">
|
|
<div class="section_wrapper mcb-section-inner">
|
|
<div class="wrap mcb-wrap one valign-top clearfix">
|
|
<div class="mcb-wrap-inner">
|
|
<div class="column mcb-column one column_helper">
|
|
<div class="helper">
|
|
<div class="helper_header">
|
|
<h4 class="title">FAQ</h4>
|
|
<div class="links">
|
|
<a class="link link-1 toggle" href="#" data-rel="1"><i class="icon-code"></i> Example Code</a>
|
|
</div>
|
|
</div>
|
|
<div class="helper_content">
|
|
<div class="item item-1">
|
|
<p>
|
|
This Item creates an FAQ page.
|
|
</p>
|
|
<hr>
|
|
<p class="big">
|
|
Example Code:
|
|
</p>
|
|
|
|
<pre class="brush: xml;">
|
|
<div class="faq">
|
|
<div class="mfn-acc faq_wrapper open1st">
|
|
<div class="question">
|
|
<div class="title">
|
|
<span class="num">1</span><i class="icon-plus acc-icon-plus"></i><i class="icon-minus acc-icon-minus"></i>Sed est elit posuere ac semper at hendrerit a neque?
|
|
</div>
|
|
<div class="answer">
|
|
<p>
|
|
Lorem ipsum dolor sit amet tempor ac, laoreet feugiat. Proin id dui. Integer a placerat at, mollis nunc vel neque sollicitudin augue sit amet magna. Donec aliquam dictum quis, tincidunt molestie, neque nibh ultricies nec, aliquam purus. Fusce convallis non, facilisis sodales. Vivamus sem at augue. Nulla et magnis dis parturient montes, nascetur ridiculus mus. Vivamus justo.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="question">
|
|
<div class="title">
|
|
<span class="num">2</span><i class="icon-plus acc-icon-plus"></i><i class="icon-minus acc-icon-minus"></i>Donec vestibulum justo a diam ultricies pellentesque?
|
|
</div>
|
|
<div class="answer">
|
|
<p>
|
|
<span class="big">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit tortor, dictum in gravida nec, aliquet non lorem. </span>
|
|
</p>
|
|
<p>
|
|
Donec vestibulum justo a diam ultricies pellentesque. Quisque mattis diam vel lacus tincidunt elementum. Sed vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor. In iaculis viverra neque, ac eleifend ante lobortis id. In viverra ipsum ac eros tristique dignissim. Donec aliquam velit vitae mi dictum.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="question">
|
|
<div class="title">
|
|
<span class="num">3</span><i class="icon-plus acc-icon-plus"></i><i class="icon-minus acc-icon-minus"></i>Quisque mattis diam vel lacus tincidunt elementum?
|
|
</div>
|
|
<div class="answer">
|
|
<p>
|
|
Donec vestibulum justo a diam ultricies pellentesque. Quisque mattis diam vel lacus tincidunt elementum. Sed vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor. In iaculis viverra neque, ac eleifend ante lobortis id. In viverra ipsum ac eros tristique dignissim. Donec aliquam velit vitae mi dictum.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="question">
|
|
<div class="title">
|
|
<span class="num">4</span><i class="icon-plus acc-icon-plus"></i><i class="icon-minus acc-icon-minus"></i>Integer a placerat at, mollis nunc vel neque sollicitudin?
|
|
</div>
|
|
<div class="answer">
|
|
<p>
|
|
<span class="big">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit tortor, dictum in gravida nec, aliquet non lorem. </span>
|
|
</p>
|
|
<p>
|
|
Donec vestibulum justo a diam ultricies pellentesque. Quisque mattis diam vel lacus tincidunt elementum. Sed vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor. In iaculis viverra neque, ac eleifend ante lobortis id. In viverra ipsum ac eros tristique dignissim. Donec aliquam velit vitae mi dictum.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="question">
|
|
<div class="title">
|
|
<span class="num">5</span><i class="icon-plus acc-icon-plus"></i><i class="icon-minus acc-icon-minus"></i>Integer lorem non enim fringilla orci?
|
|
</div>
|
|
<div class="answer">
|
|
<p>
|
|
<span class="big">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit tortor, dictum in gravida nec, aliquet non lorem. </span>
|
|
</p>
|
|
<p>
|
|
Donec vestibulum justo a diam ultricies pellentesque. Quisque mattis diam vel lacus tincidunt elementum. Sed vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor. In iaculis viverra neque, ac eleifend ante lobortis id. In viverra ipsum ac eros tristique dignissim. Donec aliquam velit vitae mi dictum.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column mcb-column one column_faq ">
|
|
<div class="faq">
|
|
<div class="mfn-acc faq_wrapper open1st">
|
|
<div class="question">
|
|
<div class="title">
|
|
<span class="num">1</span><i class="icon-plus acc-icon-plus"></i><i class="icon-minus acc-icon-minus"></i>Sed est elit posuere ac semper at hendrerit a neque?
|
|
</div>
|
|
<div class="answer">
|
|
<p>
|
|
Lorem ipsum dolor sit amet tempor ac, laoreet feugiat. Proin id dui. Integer a placerat at, mollis nunc vel neque sollicitudin augue sit amet magna. Donec aliquam dictum quis, tincidunt molestie, neque nibh ultricies nec, aliquam purus. Fusce convallis non, facilisis sodales. Vivamus sem at augue. Nulla et magnis dis parturient montes, nascetur ridiculus mus. Vivamus justo.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="question">
|
|
<div class="title">
|
|
<span class="num">2</span><i class="icon-plus acc-icon-plus"></i><i class="icon-minus acc-icon-minus"></i>Donec vestibulum justo a diam ultricies pellentesque?
|
|
</div>
|
|
<div class="answer">
|
|
<p>
|
|
<span class="big">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit tortor, dictum in gravida nec, aliquet non lorem. </span>
|
|
</p>
|
|
<p>
|
|
Donec vestibulum justo a diam ultricies pellentesque. Quisque mattis diam vel lacus tincidunt elementum. Sed vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor. In iaculis viverra neque, ac eleifend ante lobortis id. In viverra ipsum ac eros tristique dignissim. Donec aliquam velit vitae mi dictum.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="question">
|
|
<div class="title">
|
|
<span class="num">3</span><i class="icon-plus acc-icon-plus"></i><i class="icon-minus acc-icon-minus"></i>Quisque mattis diam vel lacus tincidunt elementum?
|
|
</div>
|
|
<div class="answer">
|
|
<p>
|
|
Donec vestibulum justo a diam ultricies pellentesque. Quisque mattis diam vel lacus tincidunt elementum. Sed vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor. In iaculis viverra neque, ac eleifend ante lobortis id. In viverra ipsum ac eros tristique dignissim. Donec aliquam velit vitae mi dictum.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="question">
|
|
<div class="title">
|
|
<span class="num">4</span><i class="icon-plus acc-icon-plus"></i><i class="icon-minus acc-icon-minus"></i>Integer a placerat at, mollis nunc vel neque sollicitudin?
|
|
</div>
|
|
<div class="answer">
|
|
<p>
|
|
<span class="big">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit tortor, dictum in gravida nec, aliquet non lorem. </span>
|
|
</p>
|
|
<p>
|
|
Donec vestibulum justo a diam ultricies pellentesque. Quisque mattis diam vel lacus tincidunt elementum. Sed vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor. In iaculis viverra neque, ac eleifend ante lobortis id. In viverra ipsum ac eros tristique dignissim. Donec aliquam velit vitae mi dictum.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="question">
|
|
<div class="title">
|
|
<span class="num">5</span><i class="icon-plus acc-icon-plus"></i><i class="icon-minus acc-icon-minus"></i>Integer lorem non enim fringilla orci?
|
|
</div>
|
|
<div class="answer">
|
|
<p>
|
|
<span class="big">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit tortor, dictum in gravida nec, aliquet non lorem. </span>
|
|
</p>
|
|
<p>
|
|
Donec vestibulum justo a diam ultricies pellentesque. Quisque mattis diam vel lacus tincidunt elementum. Sed vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor. In iaculis viverra neque, ac eleifend ante lobortis id. In viverra ipsum ac eros tristique dignissim. Donec aliquam velit vitae mi dictum.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="section mcb-section" id="helper" style="padding-top:50px; padding-bottom:0px">
|
|
<div class="section_wrapper mcb-section-inner">
|
|
<div class="wrap mcb-wrap one valign-top clearfix">
|
|
<div class="mcb-wrap-inner">
|
|
<div class="column mcb-column one column_helper">
|
|
<div class="helper">
|
|
<div class="helper_header">
|
|
<h4 class="title">Helper</h4>
|
|
<div class="links">
|
|
<a class="link link-1 toggle" href="#" data-rel="1"><i class="icon-help"></i> First Tab</a><a class="link link-2 " href="http://beantownthemes.com" target="_blank"><i class="icon-forward"></i> External Link</a>
|
|
</div>
|
|
</div>
|
|
<div class="helper_content">
|
|
<div class="item item-1">
|
|
<p>
|
|
This is <strong>one of 2 tabs</strong> you can add.
|
|
</p>
|
|
<p>
|
|
<strong>Second tab</strong> has been replaced with <strong>external link</strong>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column mcb-column one column_column">
|
|
<div class="column_attr clearfix"><img class="scale-with-grid" src="images/item_helper_arrow.png" alt="" style="margin-right:10px;" /> It is the item you can see above. It consists of header with text and 2 functional buttons which can open tabs or link to other sites.
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="section mcb-section" id="list" style="padding-top:50px; padding-bottom:0px">
|
|
<div class="section_wrapper mcb-section-inner">
|
|
<div class="wrap mcb-wrap one valign-top clearfix">
|
|
<div class="mcb-wrap-inner">
|
|
<div class="column mcb-column one column_helper">
|
|
<div class="helper">
|
|
<div class="helper_header">
|
|
<h4 class="title">List</h4>
|
|
<div class="links">
|
|
<a class="link link-1 toggle" href="#" data-rel="1"><i class="icon-code"></i> Example Code</a>
|
|
</div>
|
|
</div>
|
|
<div class="helper_content">
|
|
<div class="item item-1">
|
|
<p>
|
|
The List item enables you to define and create styles, images, icons and more.
|
|
</p>
|
|
<hr>
|
|
<p class="big">
|
|
Example Code:
|
|
</p>
|
|
<pre class="brush: xml;">
|
|
<div class="list_item lists_1 clearfix">
|
|
<div class="list_left list_icon">
|
|
<i class="icon-heart-line"></i>
|
|
</div>
|
|
<div class="list_right">
|
|
<h4>Tincidunt mauris</h4>
|
|
<div class="desc">
|
|
Vitae adipiscing turpis. Aenean ligula nibh in, molestie id viverra a, dapibus at dolor.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column mcb-column one-third column_list">
|
|
<div class="list_item lists_1 clearfix">
|
|
<div class="list_left list_icon">
|
|
<i class="icon-heart-line"></i>
|
|
</div>
|
|
<div class="list_right">
|
|
<h4>Tincidunt mauris</h4>
|
|
<div class="desc">
|
|
Vitae adipiscing turpis. Aenean ligula nibh in, molestie id viverra a, dapibus at dolor.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column mcb-column one-third column_list">
|
|
<div class="list_item lists_1 clearfix">
|
|
<div class="list_left list_icon">
|
|
<i class="icon-picture"></i>
|
|
</div>
|
|
<div class="list_right">
|
|
<h4>Integer aliquam</h4>
|
|
<div class="desc">
|
|
Vitae adipiscing turpis. Aenean ligula nibh in, molestie id viverra a, dapibus at dolor.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column mcb-column one-third column_list">
|
|
<div class="list_item lists_1 clearfix">
|
|
<div class="list_left list_icon">
|
|
<i class="icon-adjust"></i>
|
|
</div>
|
|
<div class="list_right">
|
|
<h4>Malesuada fames</h4>
|
|
<div class="desc">
|
|
Vitae adipiscing turpis. Aenean ligula nibh in, molestie id viverra a, dapibus at dolor.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column mcb-column one column_divider">
|
|
<hr class="no_line">
|
|
</div>
|
|
<div class="column mcb-column one-third column_list">
|
|
<div class="list_item lists_1 clearfix">
|
|
<div class="list_left list_icon">
|
|
<i class=" icon-calendar"></i>
|
|
</div>
|
|
<div class="list_right">
|
|
<h4>Bibendum sapien</h4>
|
|
<div class="desc">
|
|
Vitae adipiscing turpis. Aenean ligula nibh in, molestie id viverra a, dapibus at dolor.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column mcb-column one-third column_list">
|
|
<div class="list_item lists_1 clearfix">
|
|
<div class="list_left list_icon">
|
|
<i class=" icon-clock"></i>
|
|
</div>
|
|
<div class="list_right">
|
|
<h4>Vestibulum commodo</h4>
|
|
<div class="desc">
|
|
Vitae adipiscing turpis. Aenean ligula nibh in, molestie id viverra a, dapibus at dolor.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column mcb-column one-third column_list">
|
|
<div class="list_item lists_1 clearfix">
|
|
<div class="list_left list_icon">
|
|
<i class=" icon-comment-empty-fa"></i>
|
|
</div>
|
|
<div class="list_right">
|
|
<h4>Quisque lorem</h4>
|
|
<div class="desc">
|
|
Vitae adipiscing turpis. Aenean ligula nibh in, molestie id viverra a, dapibus at dolor.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column mcb-column one column_divider">
|
|
<hr class="no_line" style="margin: 0 auto 40px">
|
|
</div>
|
|
<div class="column mcb-column one-third column_list">
|
|
<div class="list_item lists_2 clearfix">
|
|
<a href="#">
|
|
<div class="list_left list_image"><img src="images/home_betheme_icon_1.png" class="scale-with-grid" alt="home_betheme_icon_1" width="100" height="100" />
|
|
</div>
|
|
<div class="list_right">
|
|
<h4>Tincidunt mauris</h4>
|
|
<div class="desc">
|
|
Vitae adipiscing turpis. Aenean ligula nibh in, molestie id viverra a, dapibus at dolor.
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="column mcb-column one-third column_list">
|
|
<div class="list_item lists_2 clearfix">
|
|
<a href="#">
|
|
<div class="list_left list_image"><img src="images/home_betheme_icon_2.png" class="scale-with-grid" alt="home_betheme_icon_2" width="100" height="100" />
|
|
</div>
|
|
<div class="list_right">
|
|
<h4>Integer aliquam</h4>
|
|
<div class="desc">
|
|
Vitae adipiscing turpis. Aenean ligula nibh in, molestie id viverra a, dapibus at dolor.
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="column mcb-column one-third column_list">
|
|
<div class="list_item lists_2 clearfix">
|
|
<a href="#">
|
|
<div class="list_left list_image"><img src="images/home_betheme_icon_5.png" class="scale-with-grid" alt="home_betheme_icon_5" width="100" height="100" />
|
|
</div>
|
|
<div class="list_right">
|
|
<h4>Malesuada fames</h4>
|
|
<div class="desc">
|
|
Vitae adipiscing turpis. Aenean ligula nibh in, molestie id viverra a, dapibus at dolor.
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="column mcb-column one column_divider">
|
|
<hr class="no_line">
|
|
</div>
|
|
<div class="column mcb-column one-third column_list">
|
|
<div class="list_item lists_2 clearfix">
|
|
<a href="#">
|
|
<div class="list_left list_image"><img src="images/home_betheme_icon_4.png" class="scale-with-grid" alt="home_betheme_icon_4" width="100" height="100" />
|
|
</div>
|
|
<div class="list_right">
|
|
<h4>Bibendum sapien</h4>
|
|
<div class="desc">
|
|
Vitae adipiscing turpis. Aenean ligula nibh in, molestie id viverra a, dapibus at dolor.
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="column mcb-column one-third column_list">
|
|
<div class="list_item lists_2 clearfix">
|
|
<a href="#">
|
|
<div class="list_left list_image"><img src="images/home_betheme_icon_6.png" class="scale-with-grid" alt="home_betheme_icon_6" width="100" height="100" />
|
|
</div>
|
|
<div class="list_right">
|
|
<h4>Vestibulum commodo</h4>
|
|
<div class="desc">
|
|
Vitae adipiscing turpis. Aenean ligula nibh in, molestie id viverra a, dapibus at dolor.
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="column mcb-column one-third column_list">
|
|
<div class="list_item lists_2 clearfix">
|
|
<a href="#">
|
|
<div class="list_left list_image"><img src="images/home_betheme_icon_7.png" class="scale-with-grid" alt="home_betheme_icon_7" width="100" height="100" />
|
|
</div>
|
|
<div class="list_right">
|
|
<h4>Quisque lorem</h4>
|
|
<div class="desc">
|
|
Vitae adipiscing turpis. Aenean ligula nibh in, molestie id viverra a, dapibus at dolor.
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="column mcb-column one column_divider">
|
|
<hr class="no_line" style="margin: 0 auto 40px">
|
|
</div>
|
|
<div class="column mcb-column one-fourth column_list ">
|
|
<div class="list_item lists_3 clearfix">
|
|
<div class="list_left list_image"><img src="images/home_betheme_icon_3.png" class="scale-with-grid" alt="home_betheme_icon_3" width="100" height="100" />
|
|
</div>
|
|
<div class="list_right">
|
|
<h4>Tincidunt mauris</h4>
|
|
<div class="desc">
|
|
Vitae adipiscing turpis. Aenean ligula nibh in, molestie id viverra a, dapibus at dolor.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column mcb-column one-fourth column_list ">
|
|
<div class="list_item lists_3 clearfix">
|
|
<div class="list_left list_image"><img src="images/home_betheme_icon_7.png" class="scale-with-grid" alt="home_betheme_icon_7" width="100" height="100" />
|
|
</div>
|
|
<div class="list_right">
|
|
<h4>Integer aliquam</h4>
|
|
<div class="desc">
|
|
Vitae adipiscing turpis. Aenean ligula nibh in, molestie id viverra a, dapibus at dolor.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column mcb-column one-fourth column_list ">
|
|
<div class="list_item lists_3 clearfix">
|
|
<div class="list_left list_image"><img src="images/home_betheme_icon_1.png" class="scale-with-grid" alt="home_betheme_icon_1" width="100" height="100" />
|
|
</div>
|
|
<div class="list_right">
|
|
<h4>Malesuada fames</h4>
|
|
<div class="desc">
|
|
Vitae adipiscing turpis. Aenean ligula nibh in, molestie id viverra a, dapibus at dolor.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column mcb-column one-fourth column_list ">
|
|
<div class="list_item lists_3 clearfix">
|
|
<div class="list_left list_image"><img src="images/home_betheme_icon_4.png" class="scale-with-grid" alt="home_betheme_icon_4" width="100" height="100" />
|
|
</div>
|
|
<div class="list_right">
|
|
<h4>Quisque lorem</h4>
|
|
<div class="desc">
|
|
Vitae adipiscing turpis. Aenean ligula nibh in, molestie id viverra a, dapibus at dolor.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column mcb-column one column_divider">
|
|
<hr class="no_line">
|
|
</div>
|
|
<div class="column mcb-column one-fourth column_list ">
|
|
<div class="list_item lists_3 clearfix">
|
|
<div class="list_left list_image"><img src="images/home_betheme_icon_6.png" class="scale-with-grid" alt="home_betheme_icon_6" width="100" height="100" />
|
|
</div>
|
|
<div class="list_right">
|
|
<h4>Bibendum sapien</h4>
|
|
<div class="desc">
|
|
Vitae adipiscing turpis. Aenean ligula nibh in, molestie id viverra a, dapibus at dolor.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column mcb-column one-fourth column_list ">
|
|
<div class="list_item lists_3 clearfix">
|
|
<div class="list_left list_image"><img src="images/home_betheme_icon_5.png" class="scale-with-grid" alt="home_betheme_icon_5" width="100" height="100" />
|
|
</div>
|
|
<div class="list_right">
|
|
<h4>Vestibulum commodo</h4>
|
|
<div class="desc">
|
|
Vitae adipiscing turpis. Aenean ligula nibh in, molestie id viverra a, dapibus at dolor.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column mcb-column one-fourth column_list ">
|
|
<div class="list_item lists_3 clearfix">
|
|
<div class="list_left list_image"><img src="images/home_betheme_icon_2.png" class="scale-with-grid" alt="home_betheme_icon_2" width="100" height="100" />
|
|
</div>
|
|
<div class="list_right">
|
|
<h4>Integer aliquam</h4>
|
|
<div class="desc">
|
|
Vitae adipiscing turpis. Aenean ligula nibh in, molestie id viverra a, dapibus at dolor.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column mcb-column one-fourth column_list ">
|
|
<div class="list_item lists_3 clearfix">
|
|
<div class="list_left list_image"><img src="images/home_betheme_icon_1.png" class="scale-with-grid" alt="home_betheme_icon_1" width="100" height="100" />
|
|
</div>
|
|
<div class="list_right">
|
|
<h4>Tincidunt mauris</h4>
|
|
<div class="desc">
|
|
Vitae adipiscing turpis. Aenean ligula nibh in, molestie id viverra a, dapibus at dolor.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column mcb-column one column_divider">
|
|
<hr class="no_line" style="margin: 0 auto 40px">
|
|
</div>
|
|
<div class="column mcb-column one-third column_list">
|
|
<div class="list_item lists_4 clearfix">
|
|
<div class="circle">
|
|
1
|
|
</div>
|
|
<div class="list_right">
|
|
<div class="desc">
|
|
Vitae adipiscing turpis. Aenean ligula nibh in, molestie id viverra a, dapibus at dolor.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column mcb-column one-third column_list">
|
|
<div class="list_item lists_4 clearfix">
|
|
<div class="circle">
|
|
2
|
|
</div>
|
|
<div class="list_right">
|
|
<div class="desc">
|
|
Vitae adipiscing turpis. Aenean ligula nibh in, molestie id viverra a, dapibus at dolor.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column mcb-column one-third column_list">
|
|
<div class="list_item lists_4 clearfix">
|
|
<div class="circle">
|
|
3
|
|
</div>
|
|
<div class="list_right">
|
|
<div class="desc">
|
|
Vitae adipiscing turpis. Aenean ligula nibh in, molestie id viverra a, dapibus at dolor.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column mcb-column one column_divider">
|
|
<hr class="no_line">
|
|
</div>
|
|
<div class="column mcb-column one-third column_list">
|
|
<div class="list_item lists_4 clearfix">
|
|
<div class="circle">
|
|
4
|
|
</div>
|
|
<div class="list_right">
|
|
<div class="desc">
|
|
Vitae adipiscing turpis. Aenean ligula nibh in, molestie id viverra a, dapibus at dolor.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column mcb-column one-third column_list">
|
|
<div class="list_item lists_4 clearfix">
|
|
<div class="circle">
|
|
5
|
|
</div>
|
|
<div class="list_right">
|
|
<div class="desc">
|
|
Vitae adipiscing turpis. Aenean ligula nibh in, molestie id viverra a, dapibus at dolor.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column mcb-column one-third column_list">
|
|
<div class="list_item lists_4 clearfix">
|
|
<div class="circle">
|
|
6
|
|
</div>
|
|
<div class="list_right">
|
|
<div class="desc">
|
|
Vitae adipiscing turpis. Aenean ligula nibh in, molestie id viverra a, dapibus at dolor.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="section mcb-section" id="pricingitem" style="padding-top:50px; padding-bottom:0px">
|
|
<div class="section_wrapper mcb-section-inner">
|
|
<div class="wrap mcb-wrap one valign-top clearfix">
|
|
<div class="mcb-wrap-inner">
|
|
<div class="column mcb-column one column_helper">
|
|
<div class="helper">
|
|
<div class="helper_header">
|
|
<h4 class="title">Pricing item <span style="color:#ccc; font-size: 18px; margin-left: 10px;">Boxes / Tables</span></h4>
|
|
<div class="links">
|
|
<a class="link link-1 toggle" href="#" data-rel="1"><i class="icon-code"></i> Example Code</a>
|
|
</div>
|
|
</div>
|
|
<div class="helper_content">
|
|
<div class="item item-1">
|
|
<p>
|
|
This Item creates a Pricing page. You can choose among 3 different styles. For example, you can use boxes or tables, with or without labels.
|
|
</p>
|
|
<hr>
|
|
<p class="big">
|
|
Example Code:
|
|
</p>
|
|
|
|
<pre class="brush: xml;">
|
|
<div class="column mcb-column one-fourth column_pricing_item">
|
|
<div class="pricing-box pricing-box-box">
|
|
<div class="plan-header">
|
|
<div class="image"><img src="images/img.png" alt="img">
|
|
</div>
|
|
<h2>Basic</h2>
|
|
<div class="price">
|
|
<sup class="currency">$</sup><span>12</span><sup class="period">/ monthly</sup>
|
|
</div>
|
|
<hr class="hr_color">
|
|
<p class="subtitle">
|
|
<span class="big">Vitae adipiscing turpis. Aenean ligula nibh, molestie id vivide.</span>
|
|
</p>
|
|
</div>
|
|
<div class="plan-inside">
|
|
<ul>
|
|
<li>
|
|
<strong>10GB</strong> Space amount
|
|
</li>
|
|
<li>
|
|
<strong>Unlimited</strong> users
|
|
</li>
|
|
<li>
|
|
<strong> 30GB</strong> Bandwidth
|
|
</li>
|
|
<li>
|
|
Enhanced Security
|
|
</li>
|
|
<li>
|
|
<strong>20</strong> MySQL Databases
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="plan-footer">
|
|
<a href="#" class="button button_theme button_js "><span class="button_label">Sign up now</span></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</pre>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column mcb-column one-fourth column_pricing_item">
|
|
<div class="pricing-box pricing-box-box">
|
|
<div class="plan-header">
|
|
<div class="image"><img src="images/home_betheme_pricingitem_1.png" alt="home_betheme_pricingitem_1" width="400" height="366" />
|
|
</div>
|
|
<h2>Basic</h2>
|
|
<div class="price">
|
|
<sup class="currency">$</sup><span>12</span><sup class="period">/ monthly</sup>
|
|
</div>
|
|
<hr class="hr_color">
|
|
<p class="subtitle">
|
|
<span class="big">Vitae adipiscing turpis. Aenean ligula nibh, molestie id vivide.</span>
|
|
</p>
|
|
</div>
|
|
<div class="plan-inside">
|
|
<ul>
|
|
<li>
|
|
<strong>10GB</strong> Space amount
|
|
</li>
|
|
<li>
|
|
<strong>Unlimited</strong> users
|
|
</li>
|
|
<li>
|
|
<strong> 30GB</strong> Bandwidth
|
|
</li>
|
|
<li>
|
|
Enhanced Security
|
|
</li>
|
|
<li>
|
|
<strong>20</strong> MySQL Databases
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="plan-footer">
|
|
<a href="#" class="button button_theme button_js "><span class="button_label">Sign up now</span></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column mcb-column one-fourth column_pricing_item ">
|
|
<div class="pricing-box pricing-box-featured pricing-box-box">
|
|
<div class="plan-header">
|
|
<div class="image"><img src="images/home_betheme_pricingitem_2.png" alt="home_betheme_pricingitem_2" width="400" height="366" />
|
|
</div>
|
|
<h2>Standard</h2>
|
|
<div class="price">
|
|
<sup class="currency">$</sup><span>29</span><sup class="period">/ monthly</sup>
|
|
</div>
|
|
<hr class="hr_color">
|
|
<p class="subtitle">
|
|
<span class="big">Vitae adipiscing turpis. Aenean ligula nibh, molestie id vivide.</span>
|
|
</p>
|
|
</div>
|
|
<div class="plan-inside">
|
|
<ul>
|
|
<li>
|
|
<strong>10GB</strong> Space amount
|
|
</li>
|
|
<li>
|
|
<strong>Unlimited</strong> users
|
|
</li>
|
|
<li>
|
|
<strong> 30GB</strong> Bandwidth
|
|
</li>
|
|
<li>
|
|
Enhanced Security
|
|
</li>
|
|
<li>
|
|
<strong>20</strong> MySQL Databases
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="plan-footer">
|
|
<a href="#" class="button button_theme button_js "><span class="button_label">Sign up now</span></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column mcb-column one-fourth column_pricing_item ">
|
|
<div class="pricing-box pricing-box-box">
|
|
<div class="plan-header">
|
|
<div class="image"><img src="images/home_betheme_pricingitem_3.png" alt="home_betheme_pricingitem_3" width="400" height="366" />
|
|
</div>
|
|
<h2>Business</h2>
|
|
<div class="price">
|
|
<sup class="currency">$</sup><span>39</span><sup class="period">/ monthly</sup>
|
|
</div>
|
|
<hr class="hr_color">
|
|
<p class="subtitle">
|
|
<span class="big">Vitae adipiscing turpis. Aenean ligula nibh, molestie id vivide.</span>
|
|
</p>
|
|
</div>
|
|
<div class="plan-inside">
|
|
<ul>
|
|
<li>
|
|
<strong>10GB</strong> Space amount
|
|
</li>
|
|
<li>
|
|
<strong>Unlimited</strong> users
|
|
</li>
|
|
<li>
|
|
<strong> 30GB</strong> Bandwidth
|
|
</li>
|
|
<li>
|
|
Enhanced Security
|
|
</li>
|
|
<li>
|
|
<strong>20</strong> MySQL Databases
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="plan-footer">
|
|
<a href="#" class="button button_theme button_js "><span class="button_label">Sign up now</span></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column mcb-column one-fourth column_pricing_item ">
|
|
<div class="pricing-box pricing-box-box">
|
|
<div class="plan-header">
|
|
<div class="image"><img src="images/home_betheme_pricingitem_4.png" alt="home_betheme_pricingitem_4" width="400" height="366" />
|
|
</div>
|
|
<h2>Professional</h2>
|
|
<div class="price">
|
|
<sup class="currency">$</sup><span>49</span><sup class="period">/ monthly</sup>
|
|
</div>
|
|
<hr class="hr_color">
|
|
<p class="subtitle">
|
|
<span class="big">Vitae adipiscing turpis. Aenean ligula nibh, molestie id vivide.</span>
|
|
</p>
|
|
</div>
|
|
<div class="plan-inside">
|
|
<ul>
|
|
<li>
|
|
<strong>10GB</strong> Space amount
|
|
</li>
|
|
<li>
|
|
<strong>Unlimited</strong> users
|
|
</li>
|
|
<li>
|
|
<strong> 30GB</strong> Bandwidth
|
|
</li>
|
|
<li>
|
|
Enhanced Security
|
|
</li>
|
|
<li>
|
|
<strong>20</strong> MySQL Databases
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="plan-footer">
|
|
<a href="#" class="button button_theme button_js "><span class="button_label">Sign up now</span></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column mcb-column one column_divider">
|
|
<hr class="no_line" style="margin: 0 auto 20px">
|
|
</div>
|
|
<div class="column mcb-column one-fourth column_pricing_item ">
|
|
<div class="pricing-box pricing-box-label">
|
|
<div class="plan-header">
|
|
<h2>Basic</h2>
|
|
<div class="price">
|
|
<sup class="currency">$</sup><span>12</span><sup class="period">/ monthly</sup>
|
|
</div>
|
|
<hr class="hr_color">
|
|
<p class="subtitle">
|
|
<span class="big">Vitae adipiscing turpis. Aenean ligula nibh, molestie id vivide.</span>
|
|
</p>
|
|
</div>
|
|
<div class="plan-inside">
|
|
<ul>
|
|
<li>
|
|
Space amount
|
|
</li>
|
|
<li>
|
|
Users
|
|
</li>
|
|
<li>
|
|
Bandwidth
|
|
</li>
|
|
<li>
|
|
Enhanced Security
|
|
</li>
|
|
<li>
|
|
MySQL Databases
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="plan-footer">
|
|
<a href="#" class="button button_theme button_js "><span class="button_label">Sign up now</span></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column mcb-column one-fourth column_pricing_item ">
|
|
<div class="pricing-box pricing-box-table">
|
|
<div class="plan-header">
|
|
<h2>Standard</h2>
|
|
<div class="price">
|
|
<sup class="currency">$</sup><span>29</span><sup class="period">/ monthly</sup>
|
|
</div>
|
|
<hr class="hr_color">
|
|
<p class="subtitle">
|
|
<span class="big">Vitae adipiscing turpis. Aenean ligula nibh, molestie id vivide.</span>
|
|
</p>
|
|
</div>
|
|
<div class="plan-inside">
|
|
<ul>
|
|
<li>
|
|
<strong>10GB</strong> Space amount
|
|
</li>
|
|
<li>
|
|
<strong>Unlimited</strong> users
|
|
</li>
|
|
<li>
|
|
<strong> 30GB</strong> Bandwidth
|
|
</li>
|
|
<li>
|
|
<span class="no"></span>
|
|
</li>
|
|
<li>
|
|
<strong>20</strong> MySQL Databases
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="plan-footer">
|
|
<a href="#" class="button button_theme button_js "><span class="button_label">Sign up now</span></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column mcb-column one-fourth column_pricing_item ">
|
|
<div class="pricing-box pricing-box-featured pricing-box-table">
|
|
<div class="plan-header">
|
|
<h2>Business</h2>
|
|
<div class="price">
|
|
<sup class="currency">$</sup><span>39</span><sup class="period">/ monthly</sup>
|
|
</div>
|
|
<hr class="hr_color">
|
|
<p class="subtitle">
|
|
<span class="big">Vitae adipiscing turpis. Aenean ligula nibh, molestie id vivide.</span>
|
|
</p>
|
|
</div>
|
|
<div class="plan-inside">
|
|
<ul>
|
|
<li>
|
|
<strong>10GB</strong> Space amount
|
|
</li>
|
|
<li>
|
|
<strong>Unlimited</strong> users
|
|
</li>
|
|
<li>
|
|
<strong> 30GB</strong> Bandwidth
|
|
</li>
|
|
<li>
|
|
<span class="yes"></span>
|
|
</li>
|
|
<li>
|
|
<strong>20</strong> MySQL Databases
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="plan-footer">
|
|
<a href="#" class="button button_theme button_js "><span class="button_label">Sign up now</span></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column mcb-column one-fourth column_pricing_item ">
|
|
<div class="pricing-box pricing-box-table">
|
|
<div class="plan-header">
|
|
<h2>Professional</h2>
|
|
<div class="price">
|
|
<sup class="currency">$</sup><span>49</span><sup class="period">/ monthly</sup>
|
|
</div>
|
|
<hr class="hr_color">
|
|
<p class="subtitle">
|
|
<span class="big">Vitae adipiscing turpis. Aenean ligula nibh, molestie id vivide.</span>
|
|
</p>
|
|
</div>
|
|
<div class="plan-inside">
|
|
<ul>
|
|
<li>
|
|
<strong>10GB</strong> Space amount
|
|
</li>
|
|
<li>
|
|
<strong>Unlimited</strong> users
|
|
</li>
|
|
<li>
|
|
<strong> 30GB</strong> Bandwidth
|
|
</li>
|
|
<li>
|
|
<span class="yes"></span>
|
|
</li>
|
|
<li>
|
|
<strong>20</strong> MySQL Databases
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="plan-footer">
|
|
<a href="#" class="button button_theme button_js "><span class="button_label">Sign up now</span></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="section mcb-section" id="slider" style="padding-top:50px; padding-bottom:20px;">
|
|
<div class="section_wrapper mcb-section-inner">
|
|
<div class="wrap mcb-wrap one valign-top clearfix">
|
|
<div class="mcb-wrap-inner">
|
|
<div class="column mcb-column one column_helper">
|
|
<div class="helper">
|
|
<div class="helper_header">
|
|
<h4 class="title">Slider</h4>
|
|
<div class="links">
|
|
<a class="link link-1 toggle" href="#" data-rel="1"><i class="icon-code"></i> Example Code</a>
|
|
</div>
|
|
</div>
|
|
<div class="helper_content">
|
|
<div class="item item-1">
|
|
<p>
|
|
If you prefer something other than Revolution Slider we recommend the Slider Item. You can easily show simple slide images with this feature.
|
|
</p>
|
|
<hr>
|
|
<p class="big">
|
|
Example Code:
|
|
</p>
|
|
|
|
<pre class="brush: xml;">
|
|
<div class="content_slider">
|
|
<ul class="content_slider_ul*">
|
|
<li class="content_slider_li_1"><img src="images/1.jpg" class="scale-with-grid wp-post-image" alt="">
|
|
</li>
|
|
<li class="content_slider_li_2"><img src="images/2.jpg" class="scale-with-grid wp-post-image" alt="">
|
|
</li>
|
|
<li class="content_slider_li_3"><img src="images/3.jpg" class="scale-with-grid wp-post-image" alt="">
|
|
</li>
|
|
<li class="content_slider_li_4"><img src="images/4.jpg" class="scale-with-grid wp-post-image" alt="">
|
|
</li>
|
|
</ul>
|
|
<div class="slider_pager slider_pagination"></div>
|
|
</div>
|
|
</pre>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column mcb-column one column_slider ">
|
|
<div class="content_slider">
|
|
<ul class="content_slider_ul">
|
|
<li class="content_slider_li_1"><img width="890" height="470" src="images/home_betheme_slider_1.jpg" class="scale-with-grid wp-post-image" alt="">
|
|
</li>
|
|
<li class="content_slider_li_2"><img width="890" height="470" src="images/home_betheme_slider_2.jpg" class="scale-with-grid wp-post-image" alt="">
|
|
</li>
|
|
<li class="content_slider_li_3"><img width="890" height="470" src="images/home_betheme_slider_3.jpg" class="scale-with-grid wp-post-image" alt="">
|
|
</li>
|
|
<li class="content_slider_li_4"><img width="890" height="470" src="images/home_betheme_slider_4.jpg" class="scale-with-grid wp-post-image" alt="">
|
|
</li>
|
|
</ul>
|
|
<div class="slider_pager slider_pagination"></div>
|
|
</div>
|
|
</div>
|
|
<div class="column mcb-column one column_divider">
|
|
<hr class="no_line" style="margin: 0 auto 40px">
|
|
</div>
|
|
<div class="column mcb-column one column_slider ">
|
|
<div class="content_slider description flat">
|
|
<ul class="content_slider_ul">
|
|
<li class="content_slider_li_1"><img width="890" height="470" src="images/home_betheme_slider_2.jpg" class="scale-with-grid wp-post-image" alt="">
|
|
<h3 class="title">About 1</h3>
|
|
<div class="desc">
|
|
<p class="big">
|
|
Fusce auctor ultricies neque id commodo. Aliquam eu nisi imperdiet, egestas nibh vel, consectetur augue. Aenean et felis vel lectus eleifend aliquet.
|
|
</p>
|
|
<p>
|
|
Nullam vitae placerat ex. Praesent porttitor lobortis leo eu laoreet. Pellentesque dui vitae rutrum. Pellentesque pulvinar sit amet libero eu ullamcorper.
|
|
</p>
|
|
</div>
|
|
</li>
|
|
<li class="content_slider_li_2"><img width="890" height="470" src="images/home_betheme_slider_3.jpg" class="scale-with-grid wp-post-image" alt="">
|
|
<h3 class="title">About 2</h3>
|
|
<div class="desc">
|
|
<p class="big">
|
|
Sed luctus facilisis interdum. In eleifend, enim sit amet dignissim bibendum, lectus nisi viverra enim, sit amet iaculis sem sapien quis nunc.
|
|
</p>
|
|
<p>
|
|
Nam varius arcu suscipit lectus pellentesque, vitae faucibus quam laoreet. Donec eget accumsan ante. Sed ac libero sapien.
|
|
</p>
|
|
</div>
|
|
</li>
|
|
<li class="content_slider_li_3"><img width="890" height="470" src="images/home_betheme_slider_4.jpg" class="scale-with-grid wp-post-image" alt="">
|
|
<h3 class="title">About 3</h3>
|
|
<div class="desc">
|
|
<p class="big">
|
|
Curabitur vulputate urna nec mi feugiat dictum. Ut tincidunt vel erat non blandit.
|
|
</p>
|
|
<p>
|
|
Nullam vitae placerat ex. Praesent porttitor lobortis leo eu laoreet. Pellentesque dui vitae rutrum. Pellentesque pulvinar sit amet libero eu ullamcorper.
|
|
</p>
|
|
</div>
|
|
</li>
|
|
<li class="content_slider_li_4"><img width="890" height="470" src="images/home_betheme_slider_1.jpg" class="scale-with-grid wp-post-image" alt="">
|
|
<h3 class="title">About 4</h3>
|
|
<div class="desc">
|
|
<p class="big">
|
|
Donec leo leo, vulputate id est eget, venenatis consectetur augue. Aenean et felis vel lectus eleifend aliquet.
|
|
</p>
|
|
<p>
|
|
Quisque lorem enim, efficitur at lorem et, ullamcorper commodo nunc. Praesent gravida, tellus in molestie hendrerit.
|
|
</p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<div class="slider_pager slider_pagination"></div>
|
|
</div>
|
|
</div>
|
|
<div class="column mcb-column one column_divider">
|
|
<hr class="no_line" style="margin: 0 auto 40px">
|
|
</div>
|
|
<div class="column mcb-column one column_slider ">
|
|
<div class="content_slider flat">
|
|
<ul class="content_slider_ul">
|
|
<li class="content_slider_li_1"><img width="890" height="470" src="images/home_betheme_slider_4.jpg" class="scale-with-grid wp-post-image" alt="">
|
|
</li>
|
|
<li class="content_slider_li_2"><img width="890" height="470" src="images/home_betheme_slider_3.jpg" class="scale-with-grid wp-post-image" alt="">
|
|
</li>
|
|
<li class="content_slider_li_3"><img width="890" height="470" src="images/home_betheme_slider_2.jpg" class="scale-with-grid wp-post-image" alt="">
|
|
</li>
|
|
<li class="content_slider_li_4"><img width="890" height="470" src="images/home_betheme_slider_1.jpg" class="scale-with-grid wp-post-image" alt="">
|
|
</li>
|
|
</ul>
|
|
<div class="slider_pager slider_pagination"></div>
|
|
</div>
|
|
</div>
|
|
<div class="column mcb-column one column_divider">
|
|
<hr class="no_line" style="margin: 0 auto 40px">
|
|
</div>
|
|
<div class="column mcb-column one column_slider ">
|
|
<div class="content_slider carousel">
|
|
<ul class="content_slider_ul">
|
|
<li class="content_slider_li_1"><img width="890" height="470" src="images/home_betheme_slider_1.jpg" class="scale-with-grid wp-post-image" alt="">
|
|
<p class="title">
|
|
About 4
|
|
</p>
|
|
</li>
|
|
<li class="content_slider_li_2"><img width="890" height="470" src="images/home_betheme_slider_2.jpg" class="scale-with-grid wp-post-image" alt="">
|
|
<p class="title">
|
|
About 1
|
|
</p>
|
|
</li>
|
|
<li class="content_slider_li_3"><img width="890" height="470" src="images/home_betheme_slider_3.jpg" class="scale-with-grid wp-post-image" alt="">
|
|
<p class="title">
|
|
About 2
|
|
</p>
|
|
</li>
|
|
<li class="content_slider_li_4"><img width="890" height="470" src="images/home_betheme_slider_4.jpg" class="scale-with-grid wp-post-image" alt="">
|
|
<p class="title">
|
|
About 3
|
|
</p>
|
|
</li>
|
|
</ul>
|
|
<div class="slider_pager slider_pagination"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<footer id="Footer" class="clearfix">
|
|
<div class="widgets_wrapper" style="padding:100px 0 290px">
|
|
<div class="container">
|
|
<div class="column one">
|
|
<aside id="text-9" class="widget widget_text">
|
|
<div class="textwidget">
|
|
<div style="text-align: center">
|
|
<h1 style="font-weight: 300">Creating with BeTheme is super fast and easy
|
|
<br>
|
|
Start your website today!</h1>
|
|
<hr class="no_line" style="margin: 0 auto 50px">
|
|
<div class="button-stroke">
|
|
<a class="button button_size_4 button_theme button_js" href="http://bit.ly/1M6lijQ" target="_blank"><span class="button_label">BUY NOW</span></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="footer_copy">
|
|
<div class="container">
|
|
<div class="column one">
|
|
<a id="back_to_top" class="button button_left button_js" href="#"><span class="button_icon"><i class="icon-up-open-big"></i></span></a>
|
|
<div class="copyright">
|
|
© 2017 BeTheme. Muffin group - HTML by <a target="_blank" rel="nofollow" href="http://bit.ly/1M6lijQ">BeantownThemes</a>
|
|
</div>
|
|
<ul class="social"></ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
|
|
<!-- JS -->
|
|
<script src="../js/jquery-2.1.4.min.js"></script>
|
|
<script src="../js/ui/jquery-ui.min.js"></script>
|
|
|
|
<script src="../js/mfn.menu.js"></script>
|
|
<script src="../js/jquery.plugins.js"></script>
|
|
<script src="../js/jquery.jplayer.min.js"></script>
|
|
<script src="../js/animations/animations.js"></script>
|
|
<script src="../js/translate3d.js"></script>
|
|
<script src="../js/scripts.js"></script>
|
|
|
|
<script>
|
|
jQuery(window).load(function() {
|
|
jQuery(".jq-tabs").tabs();
|
|
|
|
var retina = window.devicePixelRatio > 1 ? true : false;
|
|
if (retina) {
|
|
var retinaEl = jQuery("#logo img.logo-main");
|
|
var retinaLogoW = retinaEl.width();
|
|
var retinaLogoH = retinaEl.height();
|
|
retinaEl.attr("src", "images/retina-theme.png").width(retinaLogoW).height(retinaLogoH);
|
|
var stickyEl = jQuery("#logo img.logo-sticky");
|
|
var stickyLogoW = stickyEl.width();
|
|
var stickyLogoH = stickyEl.height();
|
|
stickyEl.attr("src", "images/retina-theme.png").width(stickyLogoW).height(stickyLogoH);
|
|
var mobileEl = jQuery("#logo img.logo-mobile");
|
|
var mobileLogoW = mobileEl.width();
|
|
var mobileLogoH = mobileEl.height();
|
|
mobileEl.attr("src", "images/retina-theme.png").width(mobileLogoW).height(mobileLogoH);
|
|
var mobileStickyEl = jQuery("#logo img.logo-mobile-sticky");
|
|
var mobileStickyLogoW = mobileStickyEl.width();
|
|
var mobileStickyLogoH = mobileStickyEl.height();
|
|
mobileStickyEl.attr("src", "images/retina-theme.png").width(mobileStickyLogoW).height(mobileStickyLogoH);
|
|
}
|
|
});
|
|
</script>
|
|
|
|
|
|
<!-- SYNTAX HIGHLIGHTER SCRIPT FOR DEMO CODE -->
|
|
<link rel="stylesheet" href="css/syntaxHighlighter/sh.css">
|
|
<script src="css/syntaxHighlighter/sh.js"></script>
|
|
|
|
|
|
</body>
|
|
|
|
</html> |