automated_bytes/website
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
main
website/theme/boxes-infographics.html

2590 lines
196 KiB
HTML
Raw Permalink Normal View History

Initial website commit, WIP
2017-03-30 04:06:17 +00:00
<!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 &#038; 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 &#038; 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 &#8211; 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">Boxes & Infographics</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="iconbox" 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">Icon box</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>
With this Item you can create an awesome <em>Icon box</em> featuring a hover effect. Choose your own icon positioned on top or left and set an optional link.
</p>
<hr>
<p class="big">
Example top icon:
</p>
<pre class="brush: xml;">
<div class="icon_box icon_position_top has_border">
<a href="#">
<div class="icon_wrapper">
<div class="icon">
<i class="icon-heart-line"></i>
</div>
</div>
<div class="desc_wrapper">
<h4 class="title">Aenean fermen</h4>
<div class="desc">
Vitae adipiscing turpis. Aenean ligula nibo molestie id vivide.
</div>
</div>
</a>
</div>
</pre>
<p class="big">
Example left icon:
</p>
<pre class="brush: xml;">
<div class="icon_box icon_position_left no_border">
<a href="#">
<div class="icon_wrapper">
<div class="icon">
<i class=" icon-database-line"></i>
</div>
</div>
<div class="desc_wrapper">
<h4 class="title">Curabitur ipsum</h4>
<div class="desc">
Vitae adipiscing turpis. Aenean ligula nibo molestie id vivide.
</div>
</div>
</a>
</div>
</pre>
</div>
</div>
</div>
</div>
<div class="column mcb-column one-fourth column_icon_box ">
<div class="icon_box icon_position_top has_border">
<a href="#">
<div class="icon_wrapper">
<div class="icon">
<i class="icon-heart-line"></i>
</div>
</div>
<div class="desc_wrapper">
<h4 class="title">Aenean fermen</h4>
<div class="desc">
Vitae adipiscing turpis. Aenean ligula nibo molestie id vivide.
</div>
</div>
</a>
</div>
</div>
<div class="column mcb-column one-fourth column_icon_box ">
<div class="icon_box icon_position_top has_border">
<a href="#">
<div class="icon_wrapper">
<div class="icon">
<i class=" icon-star-line"></i>
</div>
</div>
<div class="desc_wrapper">
<h4 class="title">Quisque lorem</h4>
<div class="desc">
Vitae adipiscing turpis. Aenean ligula nibo molestie id vivide.
</div>
</div>
</a>
</div>
</div>
<div class="column mcb-column one-fourth column_icon_box ">
<div class="icon_box icon_position_top has_border">
<a href="#">
<div class="icon_wrapper">
<div class="icon">
<i class=" icon-calendar-line"></i>
</div>
</div>
<div class="desc_wrapper">
<h4 class="title">Gravida vitae</h4>
<div class="desc">
Vitae adipiscing turpis. Aenean ligula nibo molestie id vivide.
</div>
</div>
</a>
</div>
</div>
<div class="column mcb-column one-fourth column_icon_box ">
<div class="icon_box icon_position_top no_border">
<a href="#">
<div class="icon_wrapper">
<div class="icon">
<i class=" icon-desktop-line"></i>
</div>
</div>
<div class="desc_wrapper">
<h4 class="title">Sapien massa</h4>
<div class="desc">
Vitae adipiscing turpis. Aenean ligula nibo molestie id vivide.
</div>
</div>
</a>
</div>
</div>
<div class="column mcb-column one column_divider">
<hr class="no_line" style="margin: 0 auto 15px">
</div>
<div class="column mcb-column one-third column_icon_box ">
<div class="icon_box icon_position_left no_border">
<a href="#">
<div class="icon_wrapper">
<div class="icon">
<i class=" icon-database-line"></i>
</div>
</div>
<div class="desc_wrapper">
<h4 class="title">Curabitur ipsum</h4>
<div class="desc">
Vitae adipiscing turpis. Aenean ligula nibo molestie id vivide.
</div>
</div>
</a>
</div>
</div>
<div class="column mcb-column one-third column_icon_box ">
<div class="icon_box icon_position_left no_border">
<a href="#">
<div class="icon_wrapper">
<div class="icon">
<i class=" icon-cog-line"></i>
</div>
</div>
<div class="desc_wrapper">
<h4 class="title">Aliquam eratur</h4>
<div class="desc">
Vitae adipiscing turpis. Aenean ligula nibo molestie id vivide.
</div>
</div>
</a>
</div>
</div>
<div class="column mcb-column one-third column_icon_box ">
<div class="icon_box icon_position_left no_border">
<a href="#">
<div class="icon_wrapper">
<div class="icon">
<i class=" icon-cup-line"></i>
</div>
</div>
<div class="desc_wrapper">
<h4 class="title">Integer aliquam</h4>
<div class="desc">
Vitae adipiscing turpis. Aenean ligula nibo molestie id vivide.
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<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">Icon box with image</h4>
<div class="links"></div>
</div>
<div class="helper_content">
<div class="item item-1">
<div class="used-as">
<p>
Can be used as:
</p>
<img src="images/home_betheme_shortcode.png" /><img src="images/home_betheme_item.png" />
</div>
</div>
</div>
</div>
</div>
<div class="column mcb-column one-fourth column_icon_box ">
<div class="icon_box icon_position_top no_border">
<a href="#">
<div class="image_wrapper"><img src="images/home_betheme_icon_1.png" class="scale-with-grid" alt="img">
</div>
<div class="desc_wrapper">
<h4 class="title">Aenean fermen</h4>
<div class="desc">
Vitae adipiscing turpis. Aenean ligula nibo molestie id vivide.
</div>
</div>
</a>
</div>
</div>
<div class="column mcb-column one-fourth column_icon_box ">
<div class="icon_box icon_position_top no_border">
<a href="#">
<div class="image_wrapper"><img src="images/home_betheme_icon_2.png" class="scale-with-grid" alt="img">
</div>
<div class="desc_wrapper">
<h4 class="title">Quisque lorem</h4>
<div class="desc">
Vitae adipiscing turpis. Aenean ligula nibo molestie id vivide.
</div>
</div>
</a>
</div>
</div>
<div class="column mcb-column one-fourth column_icon_box ">
<div class="icon_box icon_position_top no_border">
<a href="#">
<div class="image_wrapper"><img src="images/home_betheme_icon_3.png" class="scale-with-grid" alt="img">
</div>
<div class="desc_wrapper">
<h4 class="title">Gravida vitae</h4>
<div class="desc">
Vitae adipiscing turpis. Aenean ligula nibo molestie id vivide.
</div>
</div>
</a>
</div>
</div>
<div class="column mcb-column one-fourth column_icon_box ">
<div class="icon_box icon_position_top no_border">
<a href="#">
<div class="image_wrapper"><img src="images/home_betheme_icon_4.png" class="scale-with-grid" alt="img">
</div>
<div class="desc_wrapper">
<h4 class="title">Sapien massa</h4>
<div class="desc">
Vitae adipiscing turpis. Aenean ligula nibo molestie id vivide.
</div>
</div>
</a>
</div>
</div>
<div class="column mcb-column one column_divider">
<hr class="no_line" style="margin: 0 auto 15px">
</div>
<div class="column mcb-column one-third column_icon_box ">
<div class="icon_box icon_position_left has_border">
<a href="#">
<div class="image_wrapper"><img src="images/home_betheme_icon_5.png" class="scale-with-grid" alt="img">
</div>
<div class="desc_wrapper">
<h4 class="title">Curabitur ipsum</h4>
<div class="desc">
Vitae adipiscing turpis. Aenean ligula nibo molestie id vivide.
</div>
</div>
</a>
</div>
</div>
<div class="column mcb-column one-third column_icon_box ">
<div class="icon_box icon_position_left has_border">
<a href="#">
<div class="image_wrapper"><img src="images/home_betheme_icon_6.png" class="scale-with-grid" alt="img">
</div>
<div class="desc_wrapper">
<h4 class="title">Aliquam eratur</h4>
<div class="desc">
Vitae adipiscing turpis. Aenean ligula nibo molestie id vivide.
</div>
</div>
</a>
</div>
</div>
<div class="column mcb-column one-third column_icon_box ">
<div class="icon_box icon_position_left no_border">
<a href="#">
<div class="image_wrapper"><img src="images/home_betheme_icon_7.png" class="scale-with-grid" alt="img">
</div>
<div class="desc_wrapper">
<h4 class="title">Integer aliquam</h4>
<div class="desc">
Vitae adipiscing turpis. Aenean ligula nibo molestie id vivide.
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section mcb-section" id="featurebox" 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">Feature Box</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>
Feature Box is a great way to bring attention to a chunk of text and an image.
</p>
<hr>
<p class="big">
Example code:
</p>
<pre class="brush: xml;">
<div class="feature_box">
<div class="feature_box_wrapper">
<div class="photo_wrapper">
<a href="#"><img class="scale-with-grid" src="images/img.jpg" alt="img">
</a>
</div>
<div class="desc_wrapper">
<h4>Nulla imperdiet</h4>
<div class="desc">
Vitae adipiscing turpis. Aenean ligula nibh in, molestie id viverra dapibus.
</div>
</div>
</div>
</div>
</pre>
</div>
</div>
</div>
</div>
<div class="column mcb-column one-second column_feature_box">
<div class="feature_box">
<div class="feature_box_wrapper" style="background-color:#F7F7F7">
<div class="photo_wrapper">
<a href="#"><img class="scale-with-grid" src="images/home_betheme_featurebox_1.jpg" alt="img">
</a>
</div>
<div class="desc_wrapper">
<h4>Nulla imperdiet</h4>
<div class="desc">
Vitae adipiscing turpis. Aenean ligula nibh in, molestie id viverra dapibus.
</div>
</div>
</div>
</div>
</div>
<div class="column mcb-column one-second column_feature_box">
<div class="feature_box">
<div class="feature_box_wrapper" style="background-color:#F7F7F7">
<div class="photo_wrapper">
<a href="#"><img class="scale-with-grid" src="images/home_betheme_featurebox_2.jpg" alt="img">
</a>
</div>
<div class="desc_wrapper">
<h4>Integer aliquam</h4>
<div class="desc">
Vitae adipiscing turpis. Aenean ligula nibh in, molestie id viverra dapibus.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section mcb-section" id="flatbox" 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">Flat box</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>
Flat Box features an icon on the left and an image on the right with a nice hover effect.
</p>
<hr>
<p class="big">
Example code:
</p>
<pre class="brush: xml;">
<div class="flat_box">
<a href="#">
<div class="photo_wrapper">
<div class="icon themebg">
<i class="icon-heart-line"></i>
</div><img class="photo scale-with-grid" src="images/img.jpg" alt="img">
</div>
<div class="desc_wrapper">
<h4>Beauty centre</h4>
<div class="desc">
Duis sed odio ligula. Suspendisse tempor consequat felis tempor lacinia. Nam porttitor, massa eget blandit mollis
</div>
</div>
</a>
</div>
</pre>
</div>
</div>
</div>
</div>
<div class="column mcb-column one-third column_flat_box">
<div class="flat_box">
<a href="#">
<div class="photo_wrapper">
<div class="icon themebg">
<i class="icon-heart-line"></i>
</div><img class="photo scale-with-grid" src="images/home_betheme_flatbox_1.jpg" alt="img">
</div>
<div class="desc_wrapper">
<h4>Beauty centre</h4>
<div class="desc">
Duis sed odio ligula. Suspendisse tempor consequat felis tempor lacinia. Nam porttitor, massa eget blandit mollis
</div>
</div>
</a>
</div>
</div>
<div class="column mcb-column one-third column_flat_box ">
<div class="flat_box">
<a href="#">
<div class="photo_wrapper">
<div class="icon themebg">
<i class="icon-beaker-line"></i>
</div><img class="photo scale-with-grid" src="images/home_betheme_flatbox_2.jpg" alt="img">
</div>
<div class="desc_wrapper">
<h4>Geotermal centre</h4>
<div class="desc">
Duis sed odio ligula. Suspendisse tempor consequat felis tempor lacinia. Nam porttitor, massa eget blandit mollis
</div>
</div>
</a>
</div>
</div>
<div class="column mcb-column one-third column_flat_box ">
<div class="flat_box">
<a href="#">
<div class="photo_wrapper">
<div class="icon themebg">
<i class="icon-air"></i>
</div><img class="photo scale-with-grid" src="images/home_betheme_flatbox_3.jpg" alt="img">
</div>
<div class="desc_wrapper">
<h4>Massage centre</h4>
<div class="desc">
Duis sed odio ligula. Suspendisse tempor consequat felis tempor lacinia. Nam porttitor, massa eget blandit mollis
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section mcb-section" id="hoverbox" 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">Hover box</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>
Hover Box displays one image and switches to a second image on hover for a nice effect.
</p>
<hr>
<p class="big">
Example code:
</p>
<pre class="brush: xml;">
<div class="hover_box">
<a href="#">
<div class="hover_box_wrapper">
<img class="visible_photo scale-with-grid" src="images/img-default.jpg" alt="img default">
<img class="hidden_photo scale-with-grid" src="images/img-hover.jpg" alt="img hover">
</div>
</a>
</div>
</pre>
</div>
</div>
</div>
</div>
<div class="column mcb-column one-third column_hover_box">
<div class="hover_box">
<a href="#">
<div class="hover_box_wrapper">
<img class="visible_photo scale-with-grid" src="images/home_betheme_hoverbox_1a.jpg" alt="img">>
<img class="hidden_photo scale-with-grid" src="images/home_betheme_hoverbox_1b.jpg" alt="img">
</div>
</a>
</div>
</div>
<div class="column mcb-column one-third column_hover_box">
<div class="hover_box">
<a href="#">
<div class="hover_box_wrapper">
<img class="visible_photo scale-with-grid" src="images/home_betheme_hoverbox_2a.jpg" alt="img">>
<img class="hidden_photo scale-with-grid" src="images/home_betheme_hoverbox_2b.jpg" alt="img">
</div>
</a>
</div>
</div>
<div class="column mcb-column one-third column_hover_box">
<div class="hover_box">
<a href="#">
<div class="hover_box_wrapper">
<img class="visible_photo scale-with-grid" src="images/home_betheme_hoverbox_3a.jpg" alt="img">>
<img class="hidden_photo scale-with-grid" src="images/home_betheme_hoverbox_3b.jpg" alt="img">
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section mcb-section" id="photobox" 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">Photo box</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>
Photo box - attractive box with title, text and image, with a nice hover effect.
</p>
<hr>
<p class="big">
Example code:
</p>
<pre class="brush: xml;">
<div class="photo_box">
<h4>Nulla imperdiet</h4>
<div class="image_frame">
<div class="image_wrapper">
<a href="#">
<div class="mask"></div><img class="scale-with-grid" src="images/img.jpg" alt="img">
</a>
</div>
</div>
<div class="desc">
Vitae adipiscing turpis. Aenean ligula nibh in, molestie id viverra a, dapibus at dolor.
</div>
</div>
</pre>
</div>
</div>
</div>
</div>
<div class="column mcb-column one-third column_photo_box">
<div class="photo_box">
<h4>Nulla imperdiet</h4>
<div class="image_frame">
<div class="image_wrapper">
<a href="#">
<div class="mask"></div>
<img class="scale-with-grid" src="images/home_betheme_photobox_1.jpg" alt="img">
</a>
</div>
</div>
<div class="desc">
Vitae adipiscing turpis. Aenean ligula nibh in, molestie id viverra a, dapibus at dolor.
</div>
</div>
</div>
<div class="column mcb-column one-third column_photo_box">
<div class="photo_box ">
<h4>Integer aliquam</h4>
<div class="image_frame">
<div class="image_wrapper">
<a href="#">
<div class="mask"></div>
<img class="scale-with-grid" src="images/home_betheme_photobox_2.jpg" alt="img">
</a>
</div>
</div>
<div class="desc">
Vitae adipiscing turpis. Aenean ligula nibh in, molestie id viverra a, dapibus at dolor.
</div>
</div>
</div>
<div class="column mcb-column one-third column_photo_box">
<div class="photo_box ">
<h4>Quisque cursus</h4>
<div class="image_frame">
<div class="image_wrapper">
<a href="#">
<div class="mask"></div>
<img class="scale-with-grid" src="images/home_betheme_photobox_3.jpg" alt="img">
</a>
</div>
</div>
<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 class="section mcb-section" id="slidingbox" 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">Sliding box</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>
Sliding Box allows you to create a photo box with a nice sliding effect. This box can contain a link if desired.
</p>
<hr>
<p class="big">
Example code:
</p>
<pre class="brush: xml;">
<div class="sliding_box">
<a href="#">
<div class="photo_wrapper">
<img class="scale-with-grid" src="images/img.jpg" alt="img">
</div>
<div class="desc_wrapper">
<h4>Aenean ligula</h4>
</div>
</a>
</div>
</pre>
</div>
</div>
</div>
</div>
<div class="column mcb-column one-third column_sliding_box ">
<div class="sliding_box">
<a href="#">
<div class="photo_wrapper">
<img class="scale-with-grid" src="images/home_betheme_slidingbox_1.jpg" alt="img">
</div>
<div class="desc_wrapper">
<h4>Aenean ligula</h4>
</div>
</a>
</div>
</div>
<div class="column mcb-column one-third column_sliding_box ">
<div class="sliding_box">
<a href="#">
<div class="photo_wrapper">
<img class="scale-with-grid" src="images/home_betheme_slidingbox_2.jpg" alt="img">
</div>
<div class="desc_wrapper">
<h4>Commodo volutpat</h4>
</div>
</a>
</div>
</div>
<div class="column mcb-column one-third column_sliding_box ">
<div class="sliding_box">
<a href="#">
<div class="photo_wrapper">
<img class="scale-with-grid" src="images/home_betheme_slidingbox_3.jpg" alt="img">
</div>
<div class="desc_wrapper">
<h4>Quisque cursus</h4>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section mcb-section" id="articlebox" 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">Article box</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>
Article Box is a box with an image and text. The box can be linked if desired.
</p>
<hr>
<p class="big">
Example code:
</p>
<pre class="brush: xml;">
<div class="article_box">
<a href="#">
<div class="photo_wrapper">
<img class="scale-with-grid" src="images/img.jpg" alt="img">
</div>
<div class="desc_wrapper">
<p>
Aliqu tincid mauris
</p>
<h4>Aenean ferme ntum elit eget</h4><i class="icon-right-open themecolor"></i>
</div>
</a>
</div>
</pre>
</div>
</div>
</div>
</div>
<div class="column mcb-column one-third column_article_box ">
<div class="article_box">
<a href="#">
<div class="photo_wrapper">
<img class="scale-with-grid" src="images/home_betheme_articlebox_1.jpg" alt="img">
</div>
<div class="desc_wrapper">
<p>
Aliqu tincid mauris
</p>
<h4>Aenean ferme ntum elit eget</h4><i class="icon-right-open themecolor"></i>
</div>
</a>
</div>
</div>
<div class="column mcb-column one-third column_article_box ">
<div class="article_box">
<a href="#">
<div class="photo_wrapper">
<img class="scale-with-grid" src="images/home_betheme_articlebox_2.jpg" alt="img">
</div>
<div class="desc_wrapper">
<p>
Nec malesuada fames
</p>
<h4>Vitae adipiscing turpis aen</h4><i class="icon-right-open themecolor"></i>
</div>
</a>
</div>
</div>
<div class="column mcb-column one-third column_article_box ">
<div class="article_box">
<a href="#">
<div class="photo_wrapper">
<img class="scale-with-grid" src="images/home_betheme_articlebox_3.jpg" alt="img">
</div>
<div class="desc_wrapper">
<p>
Lorem ipsum primi
</p>
<h4>Nulla imperdiet sit amet</h4><i class="icon-right-open themecolor"></i>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section mcb-section" id="promobox" 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">Promo box</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 Promo Box with has text, image and a button with a link. You can select left or right style.
</p>
<hr>
<p class="big">
Example code:
</p>
<pre class="brush: xml;">
<div class="promo_box no_border">
<div class="promo_box_wrapper promo_box_left">
<div class="photo_wrapper">
<img class="scale-with-grid" src="images/img.png" alt="img">
</div>
<div class="desc_wrapper">
<h2>Eleifend ante lobortis</h2>
<div class="desc">
<p class="big">
Vitae adipiscing turpis. Aenean ligula nibh, molest ie id viverra a, dapibus at dolor. In iaculis viverra ne que, ac eleifend ante lobortis.
</p>
</div><a href="#" class="button button_left button_theme button_js"><span class="button_icon"><i class="icon-layout"></i></span><span class="button_label">Button with icon</span></a>
</div>
</div>
</div>
</pre>
</div>
</div>
</div>
</div>
<div class="column mcb-column one-second column_promo_box">
<div class="promo_box no_border">
<div class="promo_box_wrapper promo_box_left">
<div class="photo_wrapper">
<img class="scale-with-grid" src="images/home_betheme_icon_8.png" alt="img">
</div>
<div class="desc_wrapper">
<h2>Eleifend ante lobortis</h2>
<div class="desc">
<p class="big">
Vitae adipiscing turpis. Aenean ligula nibh, molest ie id viverra a, dapibus at dolor. In iaculis viverra ne que, ac eleifend ante lobortis.
</p>
</div><a href="#" class="button button_left button_theme button_js"><span class="button_icon"><i class="icon-layout"></i></span><span class="button_label">Button with icon</span></a>
</div>
</div>
</div>
</div>
<div class="column mcb-column one-second column_promo_box">
<div class="promo_box no_border">
<div class="promo_box_wrapper promo_box_right">
<div class="photo_wrapper">
<img class="scale-with-grid" src="images/home_betheme_icon_9.png" alt="img">
</div>
<div class="desc_wrapper">
<h2>Ante laculis viverra</h2>
<div class="desc">
<p class="big">
Vitae adipiscing turpis. Aenean ligula nibh, molest ie id viverra a, dapibus at dolor. In iaculis viverra ne que, ac eleifend ante lobortis.
</p>
</div><a href="#" class="button button_left button_theme button_js"><span class="button_icon"><i class="icon-layout"></i></span><span class="button_label">Button with icon</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section mcb-section" id="trailerbox" 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">Trailer box</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 Trailer Box item features a slogan, a photo, and has a nice hover effect.
</p>
<hr>
<p class="big">
Example code:
</p>
<pre class="brush: xml;">
<div class="trailer_box">
<a href="#"><img class="scale-with-grid" src="images/img.jpg" alt="img">
<div class="desc">
<div class="subtitle">
Vitae adipis
</div>
<h2>Vitae adipiscing turpis aenea</h2>
<div class="line"></div>
</div>
</a>
</div>
</pre>
</div>
</div>
</div>
</div>
<div class="column mcb-column one-fourth column_trailer_box ">
<div class="trailer_box">
<a href="#">
<img class="scale-with-grid" src="images/home_betheme_trailerbox_1.jpg" alt="img">
<div class="desc">
<div class="subtitle">
Vitae adipis
</div>
<h2>Vitae adipiscing turpis aenea</h2>
<div class="line"></div>
</div>
</a>
</div>
</div>
<div class="column mcb-column one-fourth column_trailer_box ">
<div class="trailer_box">
<a href="#">
<img class="scale-with-grid" src="images/home_betheme_trailerbox_2.jpg" alt="img">
<div class="desc">
<div class="subtitle">
Vitae adipis
</div>
<h2>Vestibul commodo volpat</h2>
<div class="line"></div>
</div>
</a>
</div>
</div>
<div class="column mcb-column one-fourth column_trailer_box ">
<div class="trailer_box">
<a href="#">
<img class="scale-with-grid" src="images/home_betheme_trailerbox_3.jpg" alt="img">
<div class="desc">
<div class="subtitle">
Vitae adipis
</div>
<h2>Nulla imperdiet sit amet magna</h2>
<div class="line"></div>
</div>
</a>
</div>
</div>
<div class="column mcb-column one-fourth column_trailer_box ">
<div class="trailer_box">
<a href="#">
<img class="scale-with-grid" src="images/home_betheme_trailerbox_4.jpg" alt="img">
<div class="desc">
<div class="subtitle">
Vitae adipis
</div>
<h2>Quisque lorem tortor fringilla</h2>
<div class="line"></div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section mcb-section" id="zoombox" 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">Zoom box</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>
Zoom Box show an image with additional content on hover with a nice effect.
</p>
<hr>
<p class="big">
Example code:
</p>
<pre class="brush: xml;">
<div class="zoom_box">
<a href="#">
<div class="photo">
<img class="scale-with-grid" src="images/img.jpg" alt="img">
</div>
<div class="desc">
<div class="desc_wrap">
<div class="desc_img">
<img class="scale-with-grid" src="images/img.png" alt="img">
</div>
<div class="desc_txt">
SMALL BUSINESS WEBSITES
</div>
</div>
</div>
</a>
</div>
</pre>
</div>
</div>
</div>
</div>
<div class="column mcb-column one-third column_zoom_box">
<div class="zoom_box">
<a href="#">
<div class="photo">
<img class="scale-with-grid" src="images/home_betheme_zoombox_1.jpg" alt="img">
</div>
<div class="desc" style="background-color:rgba(0, 0, 0, 0.8);">
<div class="desc_wrap">
<div class="desc_img">
<img class="scale-with-grid" src="images/home_betheme_zoombox_1_icon.png" alt="img">
</div>
<div class="desc_txt">
SMALL BUSINESS WEBSITES
</div>
</div>
</div>
</a>
</div>
</div>
<div class="column mcb-column one-third column_zoom_box">
<div class="zoom_box">
<a href="#">
<div class="photo">
<img class="scale-with-grid" src="images/home_betheme_zoombox_2.jpg" alt="img">
</div>
<div class="desc" style="background-color:rgba(0, 149, 235, 0.8);">
<div class="desc_wrap">
<div class="desc_img">
<img class="scale-with-grid" src="images/home_betheme_zoombox_2_icon.png" alt="img">
</div>
<div class="desc_txt">
PORTALS FOR LARGE SCALE
</div>
</div>
</div>
</a>
</div>
</div>
<div class="column mcb-column one-third column_zoom_box">
<div class="zoom_box">
<a href="#">
<div class="photo">
<img class="scale-with-grid" src="images/home_betheme_zoombox_3.jpg" alt="home_betheme_zoombox_3" width="780" height="620" />
</div>
<div class="desc" style="background-color:rgba(0, 3, 116, 0.8);">
<div class="desc_wrap">
<div class="desc_img">
<img class="scale-with-grid" src="images/home_betheme_zoombox_3_icon.png" alt="img">
</div>
<div class="desc_txt">
BRAND IDENTITY
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section mcb-section" id="storybox" 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">Story box</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>
Story Box show a great way to show article style content.
</p>
<hr>
<p class="big">
Example code:
</p>
<pre class="brush: xml;">
<div class="story_box">
<a href="#">
<div class="photo_wrapper">
<img class="scale-with-grid" src="images/img.jpg" alt="img">
</div>
<div class="desc_wrapper">
<h3 class="themecolor">Praesent felis volutpat curabitur sitam porttitor donec facilisis</h3>
<hr class="hr_color">
<div class="desc">
Curabitur sit amet porttitor orci. Donec a mollis diam, facilisis convallis sem. Lorem ipsum dolor sit amet, consectetur adipi scing elit. Nulla semper a nullam.
</div>
</div>
</a>
</div>
</pre>
</div>
</div>
</div>
</div>
<div class="column mcb-column one-second column_story_box">
<div class="story_box">
<a href="#">
<div class="photo_wrapper">
<img class="scale-with-grid" src="images/home_betheme_storybox_1.jpg" alt="img">
</div>
<div class="desc_wrapper">
<h3 class="themecolor">Praesent felis volutpat curabitur sitam porttitor donec facilisis</h3>
<hr class="hr_color">
<div class="desc">
Curabitur sit amet porttitor orci. Donec a mollis diam, facilisis convallis sem. Lorem ipsum dolor sit amet, consectetur adipi scing elit. Nulla semper a nullam.
</div>
</div>
</a>
</div>
</div>
<div class="column mcb-column one-second column_story_box">
<div class="story_box ">
<a href="#">
<div class="photo_wrapper">
<img class="scale-with-grid" src="images/home_betheme_storybox_2.jpg" alt="img">
</div>
<div class="desc_wrapper">
<h3 class="themecolor">Nunc magna rhoncus velporta commodo nec libero maecenas</h3>
<hr class="hr_color">
<div class="desc">
Maecenas congue massa nec odio cursus finibus. In quis dapibus lectus. Integer neque metus, laoreet sed posuere vitae, hendrerit et diam fusce.
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section mcb-section" id="beforeafter" 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">Before After</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>
Before After items are a great way to visually show changes or work made.
</p>
<hr>
<p class="big">
Example code:
</p>
<pre class="brush: xml;">
<div class="before_after twentytwenty-containe r">
<img class="scale-with-grid" src="images/before.jpg" alt="before">
<img class="scale-with-grid" src="images/after.jpg" alt="after">
</div>
</pre>
</div>
</div>
</div>
</div>
<div class="column mcb-column one-second column_before_after">
<div class="before_after twentytwenty-container">
<img class="scale-with-grid" src="images/home_betheme_beforeafter_1_2.jpg" alt="before">
<img class="scale-with-grid" src="images/home_betheme_beforeafter_1.jpg" alt="after">
</div>
</div>
<div class="column mcb-column one-second column_before_after">
<div class="before_after twentytwenty-container">
<img class="scale-with-grid" src="images/home_betheme_beforeafter_2_2.jpg" alt="before">
<img class="scale-with-grid" src="images/home_betheme_beforeafter_2.jpg" alt="after">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section mcb-section" id="quickfact" 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">Quick fact</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>
Create Quick Fact, a nice item for presenting facts with short descriptions.
</p>
<hr>
<p class="big">
Example code:
</p>
<pre class="brush: xml;">
<div class="quick_fact align_center animate-math">
<div class="number-wrapper">
<span class="number" data-to="35">35</span>
</div>
<h3 class="title">countries</h3>
<hr class="hr_narrow">
<div class="desc">
Donec vestibulum justo a diam ultricies pel lentesque. Quisque mattis diam vel lac.
</div>
</div>
</pre>
</div>
</div>
</div>
</div>
<div class="column mcb-column one-fourth column_quick_fact ">
<div class="quick_fact align_center animate-math">
<div class="number-wrapper">
<span class="number" data-to="35">35</span>
</div>
<h3 class="title">countries</h3>
<hr class="hr_narrow">
<div class="desc">
Donec vestibulum justo a diam ultricies pel lentesque. Quisque mattis diam vel lac.
</div>
</div>
</div>
<div class="column mcb-column one-fourth column_quick_fact ">
<div class="quick_fact align_center animate-math">
<div class="number-wrapper">
<span class="number" data-to="142">142</span>
</div>
<h3 class="title">articles</h3>
<hr class="hr_narrow">
<div class="desc">
Donec vestibulum justo a diam ultricies pel lentesque. Quisque mattis diam vel lac.
</div>
</div>
</div>
<div class="column mcb-column one-fourth column_quick_fact ">
<div class="quick_fact align_center animate-math">
<div class="number-wrapper">
<span class="number" data-to="89">89</span>
</div>
<h3 class="title">projects</h3>
<hr class="hr_narrow">
<div class="desc">
Donec vestibulum justo a diam ultricies pel lentesque. Quisque mattis diam vel lac.
</div>
</div>
</div>
<div class="column mcb-column one-fourth column_quick_fact ">
<div class="quick_fact align_center animate-math">
<div class="number-wrapper">
<span class="number" data-to="9">9</span>
</div>
<h3 class="title">years of experience</h3>
<hr class="hr_narrow">
<div class="desc">
Donec vestibulum justo a diam ultricies pel lentesque. Quisque mattis diam vel lac.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section mcb-section" id="counter" 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">Counter</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 Counter with icons or images.
</p>
<hr>
<p class="big">
Example code:
</p>
<pre class="brush: xml;">
<div class="counter counter_vertical animate-math">
<div class="icon_wrapper">
<i class=" icon-t-shirt-line"></i>
</div>
<div class="desc_wrapper">
<div class="number-wrapper">
<span class="number" data-to="1452">1452</span>
</div>
<p class="title">
Tincidunt mauris
</p>
</div>
</div>
</pre>
</div>
</div>
</div>
</div>
<div class="column mcb-column one-fourth column_counter">
<div class="counter counter_vertical animate-math">
<div class="icon_wrapper">
<i class=" icon-t-shirt-line"></i>
</div>
<div class="desc_wrapper">
<div class="number-wrapper">
<span class="number" data-to="1452">1452</span>
</div>
<p class="title">
Tincidunt mauris
</p>
</div>
</div>
</div>
<div class="column mcb-column one-fourth column_counter ">
<div class="counter counter_vertical animate-math">
<div class="icon_wrapper">
<i class=" icon-calendar-line"></i>
</div>
<div class="desc_wrapper">
<div class="number-wrapper">
<span class="number" data-to="958">958</span>
</div>
<p class="title">
Integer aliquam
</p>
</div>
</div>
</div>
<div class="column mcb-column one-fourth column_counter ">
<div class="counter counter_vertical animate-math">
<div class="icon_wrapper"><img src="images/home_betheme_icon_2.png" alt="home_betheme_icon_2" width="100" height="100" />
</div>
<div class="desc_wrapper">
<div class="number-wrapper">
<span class="number" data-to="744">744</span>
</div>
<p class="title">
Malesuada fames
</p>
</div>
</div>
</div>
<div class="column mcb-column one-fourth column_counter ">
<div class="counter counter_vertical animate-math">
<div class="icon_wrapper"><img src="images/home_betheme_icon_6.png" alt="home_betheme_icon_6" width="100" height="100" />
</div>
<div class="desc_wrapper">
<div class="number-wrapper">
<span class="number" data-to="295">295</span>
</div>
<p class="title">
Bibendum sapien
</p>
</div>
</div>
</div>
<div class="column mcb-column one column_divider">
<hr class="no_line">
</div>
<div class="column mcb-column one-third column_counter ">
<div class="counter counter_horizontal animate-math">
<div class="icon_wrapper">
<i class=" icon-attach-line"></i>
</div>
<div class="desc_wrapper">
<div class="number-wrapper">
<span class="number" data-to="367">367</span>
</div>
<p class="title">
Vestibulum commodo
</p>
</div>
</div>
</div>
<div class="column mcb-column one-third column_counter ">
<div class="counter counter_horizontal animate-math">
<div class="icon_wrapper">
<i class=" icon-lock-line"></i>
</div>
<div class="desc_wrapper">
<div class="number-wrapper">
<span class="number" data-to="630">630</span>
</div>
<p class="title">
Integer aliquam
</p>
</div>
</div>
</div>
<div class="column mcb-column one-third column_counter ">
<div class="counter counter_horizontal animate-math">
<div class="icon_wrapper">
<i class=" icon-tag-line"></i>
</div>
<div class="desc_wrapper">
<div class="number-wrapper">
<span class="number" data-to="118">118</span>
</div>
<p class="title">
Quisque lorem
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section mcb-section" id="chart" 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">Chart</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>
Chart use this item to put charts on your page.
</p>
<hr>
<p class="big">
Example code:
</p>
<pre class="brush: xml;">
<div class="chart_box">
<div class="char t" data-percent="42" data-bar-color="#0095eb">
<div class="num">
42%
</div>
</div>
<p>
<span class="big">Curabitur ipsum</span>
</p>
</div>
</pre>
</div>
</div>
</div>
</div>
<div class="column mcb-column one-fourth column_chart">
<div class="chart_box">
<div class="chart" data-percent="42" data-bar-color="#0095eb">
<div class="num">
42%
</div>
</div>
<p>
<span class="big">Curabitur ipsum</span>
</p>
</div>
</div>
<div class="column mcb-column one-fourth column_chart ">
<div class="chart_box">
<div class="chart" data-percent="67" data-bar-color="#0095eb">
<div class="num">
67%
</div>
</div>
<p>
<span class="big">Aliquam eratur</span>
</p>
</div>
</div>
<div class="column mcb-column one-fourth column_chart">
<div class="chart_box">
<div class="chart" data-percent="34" data-bar-color="#0095eb">
<div class="icon">
<i class="icon-heart-line"></i>
</div>
</div>
<p>
<span class="big">Tincidunt mauris</span>
</p>
</div>
</div>
<div class="column mcb-column one-fourth column_chart">
<div class="chart_box">
<div class="chart" data-percent="50" data-bar-color="#0095eb" data-line-width="5">
<div class="image"><img class="scale-with-grid" src="images/home_betheme_icon_1.png" alt="home_betheme_icon_1" width="100" height="100" />
</div>
</div>
<p>
<span class="big">Tincidunt mauris</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section mcb-section" id="progressbar" 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">Progress bars</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>
Progress bars - present your skills using this feature.
</p>
<hr>
<p class="big">
Example code:
</p>
<pre class="brush: xml;">
<div class="progress_bars">
<ul class="bars_list">
<li>
<h6>Aenean fermen<span class="label">60<em>%</em></span></h6>
<div class="bar">
<span class="progress" style="width:60%"></span>
</div>
</li>
<li>
<h6>Quisque lorem<span class="label">47<em>%</em></span></h6>
<div class="bar" style="height:10px">
<span class="progress" style="width:47%"></span>
</div>
</li>
<li>
<h6>Tincidunt mauris<span class="label">75<em>%</em></span></h6>
<div class="bar" style="height:2px">
<span class="progress" style="width:75%"></span>
</div>
</li>
</ul>
</div>
</pre>
</div>
</div>
</div>
</div>
<div class="column mcb-column one-third column_progress_bars ">
<div class="progress_bars">
<ul class="bars_list">
<li>
<h6>Aenean fermen<span class="label">60<em>%</em></span></h6>
<div class="bar">
<span class="progress" style="width:60%"></span>
</div>
</li>
<li>
<h6>Quisque lorem<span class="label">47<em>%</em></span></h6>
<div class="bar" style="height:10px">
<span class="progress" style="width:47%"></span>
</div>
</li>
<li>
<h6>Tincidunt mauris<span class="label">75<em>%</em></span></h6>
<div class="bar" style="height:2px">
<span class="progress" style="width:75%"></span>
</div>
</li>
</ul>
</div>
</div>
<div class="column mcb-column one-third column_progress_bars ">
<div class="progress_bars">
<ul class="bars_list">
<li>
<h6>Gravida vitae<span class="label">85<em>%</em></span></h6>
<div class="bar">
<span class="progress" style="width:85%"></span>
</div>
</li>
<li>
<h6>Sapien massa<span class="label">54<em>%</em></span></h6>
<div class="bar" style="height:10px">
<span class="progress" style="width:54%"></span>
</div>
</li>
<li>
<h6>Aliquam eratur<span class="label">62<em>%</em></span></h6>
<div class="bar" style="height:2px">
<span class="progress" style="width:62%"></span>
</div>
</li>
</ul>
</div>
</div>
<div class="column mcb-column one-third column_progress_bars ">
<div class="progress_bars">
<ul class="bars_list">
<li>
<h6>Curabitur ipsum<span class="label">75<em>%</em></span></h6>
<div class="bar">
<span class="progress" style="width:75%"></span>
</div>
</li>
<li>
<h6>Aliquam eratur<span class="label">65<em>%</em></span></h6>
<div class="bar" style="height:10px">
<span class="progress" style="width:65%"></span>
</div>
</li>
<li>
<h6>Quisque lorem<span class="label">37<em>%</em></span></h6>
<div class="bar" style="height:2px">
<span class="progress" style="width:37%"></span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section mcb-section" id="countdown" 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">Countdown</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>
Countdown - this feature will place a time countdown in any location you specify.
</p>
<hr>
<p class="big">
Example code:
</p>
<pre class="brush: xml;">
<div class="downcount clearfix" data-date="12/30/2018 12:00:00" data-offset="0">
<div class="column one-fourth column_quick_fact">
<div class="quick_fact">
<div data-anim-type="zoomIn" class="animate zoomIn">
<div class="number-wrapper">
<div class="number days">
00
</div>
</div>
<h3 class="title">days</h3>
<hr class="hr_narrow">
</div>
</div>
</div>
<div class="column one-fourth column_quick_fact">
<div class="quick_fact">
<div data-anim-type="zoomIn" class="animate zoomIn">
<div class="number-wrapper">
<div class="number hours">
00
</div>
</div>
<h3 class="title">hours</h3>
<hr class="hr_narrow">
</div>
</div>
</div>
<div class="column one-fourth column_quick_fact">
<div class="quick_fact">
<div data-anim-type="zoomIn" class="animate zoomIn">
<div class="number-wrapper">
<div class="number minutes">
00
</div>
</div>
<h3 class="title">minutes</h3>
<hr class="hr_narrow">
</div>
</div>
</div>
<div class="column one-fourth column_quick_fact">
<div class="quick_fact">
<div data-anim-type="zoomIn" class="animate zoomIn">
<div class="number-wrapper">
<div class="number seconds">
00
</div>
</div>
<h3 class="title">seconds</h3>
<hr class="hr_narrow">
</div>
</div>
</div>
</div>
</pre>
</div>
</div>
</div>
</div>
<div class="column mcb-column one column_countdown">
<div class="downcount clearfix" data-date="12/30/2018 12:00:00" data-offset="0">
<div class="column one-fourth column_quick_fact">
<div class="quick_fact">
<div data-anim-type="zoomIn" class="animate zoomIn">
<div class="number-wrapper">
<div class="number days">
00
</div>
</div>
<h3 class="title">days</h3>
<hr class="hr_narrow">
</div>
</div>
</div>
<div class="column one-fourth column_quick_fact">
<div class="quick_fact">
<div data-anim-type="zoomIn" class="animate zoomIn">
<div class="number-wrapper">
<div class="number hours">
00
</div>
</div>
<h3 class="title">hours</h3>
<hr class="hr_narrow">
</div>
</div>
</div>
<div class="column one-fourth column_quick_fact">
<div class="quick_fact">
<div data-anim-type="zoomIn" class="animate zoomIn">
<div class="number-wrapper">
<div class="number minutes">
00
</div>
</div>
<h3 class="title">minutes</h3>
<hr class="hr_narrow">
</div>
</div>
</div>
<div class="column one-fourth column_quick_fact">
<div class="quick_fact">
<div data-anim-type="zoomIn" class="animate zoomIn">
<div class="number-wrapper">
<div class="number seconds">
00
</div>
</div>
<h3 class="title">seconds</h3>
<hr class="hr_narrow">
</div>
</div>
</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">
&copy; 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/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() {
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>
Reference in New Issue Copy Permalink