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

2383 lines
188 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">Content elements</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="timeline" 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">Timeline</h4>
<div class="links">
</div>
</div>
</div>
</div>
<div class="column mcb-column one column_timeline">
<ul class="timeline_items">
<li>
<h3><span>29.12.2013</span>Vitae adipiscing turpis aen</h3>
<div class="desc">
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 stie id viverra.
</div>
</li>
<li>
<h3><span>15.08.2013</span>Quisque lorem tortor fringilla</h3>
<div class="desc">
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 stie id viverra.
</div>
</li>
<li>
<h3><span>11.05.2013</span>Aenean ferme ntum elit eget</h3>
<div class="desc">
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 stie id viverra.
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="section mcb-section" id="howitworks" 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">How it works</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 How it Works item allows you to create steps sections that can be used on landing pages.
</p>
<hr>
<p class="big">
Example Code:
</p>
<pre class="brush: xml;">
<div class="how_it_works has_border">
<div class="image">
<img src="images/img.png" class="scale-with-grid" alt="img">
<span class="number">1</span>
</div>
<h4>Step 1</h4>
<div class="desc">
Vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor.
</div>
</div>
</pre>
</div>
</div>
</div>
</div>
<div class="column mcb-column one-fourth column_how_it_works">
<div class="how_it_works has_border">
<div class="image">
<img src="images/home_betheme_howitworks_1.png" class="scale-with-grid" alt="home_betheme_howitworks_1" width="98" height="91">
<span class="number">1</span>
</div>
<h4>Step 1</h4>
<div class="desc">
Vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor.
</div>
</div>
</div>
<div class="column mcb-column one-fourth column_how_it_works">
<div class="how_it_works has_border">
<div class="image">
<img src="images/home_betheme_howitworks_2.png" class="scale-with-grid" alt="home_betheme_howitworks_2" width="98" height="91">
<span class="number">2</span>
</div>
<h4>Step 2</h4>
<div class="desc">
Vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor.
</div>
</div>
</div>
<div class="column mcb-column one-fourth column_how_it_works">
<div class="how_it_works has_border">
<div class="image">
<img src="images/home_betheme_howitworks_3.png" class="scale-with-grid" alt="home_betheme_howitworks_3" width="98" height="91">
<span class="number">3</span>
</div>
<h4>Step 3</h4>
<div class="desc">
Vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor.
</div>
</div>
</div>
<div class="column mcb-column one-fourth column_how_it_works">
<div class="how_it_works no_border">
<div class="image">
<img src="images/home_betheme_howitworks_4.png" class="scale-with-grid" alt="home_betheme_howitworks_4" width="98" height="91"><span class="number">4</span>
</div>
<h4>Step 4</h4>
<div class="desc">
Vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section mcb-section" id="contactbox" style="padding-top:50px; padding-bottom:0px">
<div class="section_wrapper mcb-section-inner">
<div class="wrap mcb-wrap one-third 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">Contact Box</h4>
<div class="links">
<a class="link link-1 toggle" href="#" data-rel="1"><i class="icon-code"></i></a>
</div>
</div>
<div class="helper_content">
<div class="item item-1">
<p>
Contact box - an attractive Contact Box item.
</p>
<hr>
<p class="big">
Example Code:
</p>
<pre class="brush: xml;">
<div class="get_in_touch">
<h3>Contact Box</h3>
<div class="get_in_touch_wrapper">
<ul>
<li class="address">
<span class="icon"><i class="icon-location"></i></span>
<span class="address_wrapper">
<strong>Envato</strong>
<br>
Level 13, 2 Elizabeth St,
<br>
Melbourne, Victoria 3000 Australia
</span>
</li>
<li class="phone phone-1">
<span class="icon"><i class="icon-phone"></i></span>
<p>
<a href="tel:+61(0)791803458">+61 (0) 7 9180 3458</a>
</p>
</li>
<li class="mail">
<span class="icon"><i class="icon-mail"></i></span>
<p>
<a href="mailto:noreply@envato.com">noreply@envato.com</a>
</p>
</li>
<li class="www">
<span class="icon"><i class="icon-link"></i></span>
<p>
<a target="_blank" href="http://www.envato.com">www.envato.com</a>
</p>
</li>
</ul>
</div>
</div>
</pre>
</div>
</div>
</div>
</div>
<div class="column mcb-column one column_contact_box">
<div class="get_in_touch" style="background-image:url(images/home_betheme_get_in_touch.png);">
<h3>Contact Box</h3>
<div class="get_in_touch_wrapper">
<ul>
<li class="address">
<span class="icon"><i class="icon-location"></i></span>
<span class="address_wrapper">
<strong>Envato</strong>
<br>
Level 13, 2 Elizabeth St,
<br>
Melbourne, Victoria 3000 Australia
</span>
</li>
<li class="phone phone-1">
<span class="icon"><i class="icon-phone"></i></span>
<p>
<a href="tel:+61(0)791803458">+61 (0) 7 9180 3458</a>
</p>
</li>
<li class="mail">
<span class="icon"><i class="icon-mail"></i></span>
<p>
<a href="mailto:noreply@envato.com">noreply@envato.com</a>
</p>
</li>
<li class="www">
<span class="icon"><i class="icon-link"></i></span>
<p>
<a target="_blank" href="http://www.envato.com">www.envato.com</a>
</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="wrap mcb-wrap one-third 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">Opening hours</h4>
<div class="links">
<a class="link link-1 toggle" href="#" data-rel="1"><i class="icon-code"></i></a>
</div>
</div>
<div class="helper_content">
<div class="item item-1">
<p>
This item will create a Opening hours box in which you can type whatever content you want. You can also include a background image for an added effect.
</p>
<hr>
<p class="big">
Example Code:
</p>
<pre class="brush: xml;">
<div class="opening_hours">
<h3>Opening hours</h3>
<div class="opening_hours_wrapper">
<p>
Vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor.
</p>
<ul>
<li>
<label>Monday - Friday</label><span>8<sup>00</sup> - 16<sup>00</sup></span>
</li>
<li>
<label>Saturday</label><span>8<sup>00</sup> - 15<sup>00</sup></span>
</li>
</ul>
</div>
</div>
</pre>
</div>
</div>
</div>
</div>
<div class="column mcb-column one column_opening_hours">
<div class="opening_hours" style="background-image:url(images/home_betheme_opening_hours.png);">
<h3>Opening hours</h3>
<div class="opening_hours_wrapper">
<p>
Vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor.
</p>
<ul>
<li>
<label>Monday - Friday</label><span>8<sup>00</sup> - 16<sup>00</sup></span>
</li>
<li>
<label>Saturday</label><span>8<sup>00</sup> - 15<sup>00</sup></span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="wrap mcb-wrap one-third 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">Infobox</h4>
<div class="links">
<a class="link link-1 toggle" href="#" data-rel="1"><i class="icon-code"></i></a>
</div>
</div>
<div class="helper_content">
<div class="item item-1">
<p>
This Item allows you to create an awesome Info box. You can also include a background image for an added effect.
</p>
<hr>
<p class="big">
Example Code:
</p>
<pre class="brush: xml;">
<div class="infobox">
<h3>Infobox</h3>
<div class="infobox_wrapper">
<ul>
<li>
100% Responsive & Retina ready
</li>
<li>
Best drag&drop page builder
</li>
<li>
Tons of shortcodes
</li>
<li>
SEO optimized
</li>
<li>
and so much more...
</li>
</ul>
</div>
</div>
</pre>
</div>
</div>
</div>
</div>
<div class="column mcb-column one column_info_box">
<div class="infobox" style="background-image:url(images/home_betheme_infobox.png);">
<h3>Infobox</h3>
<div class="infobox_wrapper">
<ul>
<li>
100% Responsive & Retina ready
</li>
<li>
Best drag&drop page builder
</li>
<li>
Tons of shortcodes
</li>
<li>
SEO optimized
</li>
<li>
and so much more...
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section mcb-section" id="mapbig" 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">Map with address 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>
Embed a Google map. Map item is based on Google Maps API.
</p>
<hr>
<p class="big">
Example Code:
</p>
<pre class="brush: xml;">
<div class="google-map-wrapper no_border">
<div class="google-map-contact-wrapper style-box">
<div class="get_in_touch">
<h3>Our office</h3>
<div class="get_in_touch_wrapper">
<ul>
<li class="address">
<span class="icon"><i class="icon-location"></i></span>
<span class="address_wrapper">
Envato
<br>
Level 13, 2 Elizabeth
<br>
Victoria 3000 Australia
</span>
</li>
</ul>
</div>
</div>
</div>
<div class="google-map" id="google-map-area-1">
</div>
</div>
</pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section mcb-section full-width" style="padding-top:0px; 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_map">
<div class="google-map-wrapper no_border">
<div class="google-map-contact-wrapper style-box">
<div class="get_in_touch">
<h3>Our office</h3>
<div class="get_in_touch_wrapper">
<ul>
<li class="address">
<span class="icon"><i class="icon-location"></i></span>
<span class="address_wrapper">
Envato
<br>
Level 13, 2 Elizabeth
<br>
Victoria 3000 Australia
</span>
</li>
</ul>
</div>
</div>
</div>
<div class="google-map" id="google-map-area-58b335ed356f9" style="width:100%; height:400px;">
&nbsp;
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section mcb-section" id="ourteam" 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">Our Team</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 a single "Our Team" profile to show your team.
</p>
<hr>
<p class="big">
Example Code:
</p>
<pre class="brush: xml;">
<div class="team team_vertical">
<div class="image_frame photo no_link scale-with-grid">
<div class="image_wrapper">
<img class="scale-with-grid" src="images/img.jpg" alt="img">
</div>
</div>
<div class="desc_wrapper">
<h4>Jennifer Lee</h4>
<p class="subtitle">
Software Engineer
</p>
<hr class="hr_color">
<div class="desc">
Vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor.
</div>
<div class="links">
<a href="mailto:noreply@envato.com" class="icon_bar icon_bar_small">
<span class="t"><i class="icon-mail"></i></span>
<span class="b"><i class="icon-mail"></i></span>
</a>
<a target="_blank" href="http://facebook.com/" class="icon_bar icon_bar_small">
<span class="t"><i class="icon-facebook"></i></span>
<span class="b"><i class="icon-facebook"></i></span>
</a>
<a target="_blank" href="http://twitter.com/" class="icon_bar icon_bar_small">
<span class="t"><i class="icon-twitter"></i></span>
<span class="b"><i class="icon-twitter"></i></span></a>
<a target="_blank" href="http://www.linkedin.com/" class="icon_bar icon_bar_small">
<span class="t"><i class="icon-linkedin"></i></span>
<span class="b"><i class="icon-linkedin"></i></span>
</a>
</div>
</div>
</div>
</pre>
</div>
</div>
</div>
</div>
<div class="column mcb-column one-fourth column_our_team">
<div class="team team_vertical">
<div class="image_frame photo no_link scale-with-grid">
<div class="image_wrapper">
<img class="scale-with-grid" src="images/home_betheme_ourteam_1.jpg" alt="img">
</div>
</div>
<div class="desc_wrapper">
<h4>Jennifer Lee</h4>
<p class="subtitle">
Software Engineer
</p>
<hr class="hr_color">
<div class="desc">
Vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor.
</div>
<div class="links">
<a href="mailto:noreply@envato.com" class="icon_bar icon_bar_small">
<span class="t"><i class="icon-mail"></i></span>
<span class="b"><i class="icon-mail"></i></span>
</a>
<a target="_blank" href="http://facebook.com/" class="icon_bar icon_bar_small">
<span class="t"><i class="icon-facebook"></i></span>
<span class="b"><i class="icon-facebook"></i></span>
</a>
<a target="_blank" href="http://twitter.com/" class="icon_bar icon_bar_small">
<span class="t"><i class="icon-twitter"></i></span>
<span class="b"><i class="icon-twitter"></i></span></a>
<a target="_blank" href="http://www.linkedin.com/" class="icon_bar icon_bar_small">
<span class="t"><i class="icon-linkedin"></i></span>
<span class="b"><i class="icon-linkedin"></i></span>
</a>
</div>
</div>
</div>
</div>
<div class="column mcb-column one-fourth column_our_team">
<div class="team team_vertical">
<div class="image_frame photo no_link scale-with-grid">
<div class="image_wrapper">
<img class="scale-with-grid" src="images/home_betheme_ourteam_2.jpg" alt="img">
</div>
</div>
<div class="desc_wrapper">
<h4>Sara Wright</h4>
<p class="subtitle">
Systems Engineer
</p>
<hr class="hr_color">
<div class="desc">
Vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor.
</div>
<div class="links">
<a href="mailto:noreply@envato.com" class="icon_bar icon_bar_small">
<span class="t"><i class="icon-mail"></i></span>
<span class="b"><i class="icon-mail"></i></span>
</a>
<a target="_blank" href="http://facebook.com/" class="icon_bar icon_bar_small">
<span class="t"><i class="icon-facebook"></i></span>
<span class="b"><i class="icon-facebook"></i></span>
</a>
<a target="_blank" href="http://twitter.com/" class="icon_bar icon_bar_small">
<span class="t"><i class="icon-twitter"></i></span>
<span class="b"><i class="icon-twitter"></i></span></a>
<a target="_blank" href="http://www.linkedin.com/" class="icon_bar icon_bar_small">
<span class="t"><i class="icon-linkedin"></i></span>
<span class="b"><i class="icon-linkedin"></i></span>
</a>
</div>
</div>
</div>
</div>
<div class="column mcb-column one-fourth column_our_team">
<div class="team team_vertical">
<div class="image_frame photo no_link scale-with-grid">
<div class="image_wrapper">
<img class="scale-with-grid" src="images/home_betheme_ourteam_3.jpg" alt="img">
</div>
</div>
<div class="desc_wrapper">
<h4>Kevin Perry</h4>
<p class="subtitle">
Software Developer
</p>
<hr class="hr_color">
<div class="desc">
Vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor.
</div>
<div class="links">
<a href="mailto:noreply@envato.com" class="icon_bar icon_bar_small">
<span class="t"><i class="icon-mail"></i></span>
<span class="b"><i class="icon-mail"></i></span>
</a>
<a target="_blank" href="http://facebook.com/" class="icon_bar icon_bar_small">
<span class="t"><i class="icon-facebook"></i></span>
<span class="b"><i class="icon-facebook"></i></span>
</a>
<a target="_blank" href="http://twitter.com/" class="icon_bar icon_bar_small">
<span class="t"><i class="icon-twitter"></i></span>
<span class="b"><i class="icon-twitter"></i></span></a>
<a target="_blank" href="http://www.linkedin.com/" class="icon_bar icon_bar_small">
<span class="t"><i class="icon-linkedin"></i></span>
<span class="b"><i class="icon-linkedin"></i></span>
</a>
</div>
</div>
</div>
</div>
<div class="column mcb-column one-fourth column_our_team">
<div class="team team_vertical">
<div class="image_frame photo no_link scale-with-grid">
<div class="image_wrapper">
<img class="scale-with-grid" src="images/home_betheme_ourteam_4.jpg" alt="img">
</div>
</div>
<div class="desc_wrapper">
<h4>Brandon Ross</h4>
<p class="subtitle">
Java Developer
</p>
<hr class="hr_color">
<div class="desc">
Vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor.
</div>
<div class="links">
<a href="mailto:noreply@envato.com" class="icon_bar icon_bar_small">
<span class="t"><i class="icon-mail"></i></span>
<span class="b"><i class="icon-mail"></i></span>
</a>
<a target="_blank" href="http://facebook.com/" class="icon_bar icon_bar_small">
<span class="t"><i class="icon-facebook"></i></span>
<span class="b"><i class="icon-facebook"></i></span>
</a>
<a target="_blank" href="http://twitter.com/" class="icon_bar icon_bar_small">
<span class="t"><i class="icon-twitter"></i></span>
<span class="b"><i class="icon-twitter"></i></span></a>
<a target="_blank" href="http://www.linkedin.com/" class="icon_bar icon_bar_small">
<span class="t"><i class="icon-linkedin"></i></span>
<span class="b"><i class="icon-linkedin"></i></span>
</a>
</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-second column_our_team">
<div class="team team_horizontal">
<div class="image_frame photo no_link scale-with-grid">
<div class="image_wrapper">
<img class="scale-with-grid" src="images/home_betheme_ourteam_5.jpg" alt="img">
</div>
</div>
<div class="desc_wrapper">
<h4>Doris Flores</h4>
<p class="subtitle">
Business Analyst
</p>
<hr class="hr_color">
<div class="desc">
Vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor.
</div>
<div class="links">
<a href="mailto:noreply@envato.com" class="icon_bar icon_bar_small">
<span class="t"><i class="icon-mail"></i></span>
<span class="b"><i class="icon-mail"></i></span>
</a>
<a target="_blank" href="http://facebook.com/" class="icon_bar icon_bar_small">
<span class="t"><i class="icon-facebook"></i></span>
<span class="b"><i class="icon-facebook"></i></span>
</a>
<a target="_blank" href="http://twitter.com/" class="icon_bar icon_bar_small">
<span class="t"><i class="icon-twitter"></i></span>
<span class="b"><i class="icon-twitter"></i></span></a>
<a target="_blank" href="http://www.linkedin.com/" class="icon_bar icon_bar_small">
<span class="t"><i class="icon-linkedin"></i></span>
<span class="b"><i class="icon-linkedin"></i></span>
</a>
</div>
</div>
</div>
</div>
<div class="column mcb-column one-second column_our_team">
<div class="team team_horizontal">
<div class="image_frame photo no_link scale-with-grid">
<div class="image_wrapper">
<img class="scale-with-grid" src="images/home_betheme_ourteam_1.jpg" alt="img">
</div>
</div>
<div class="desc_wrapper">
<h4>Alice Boyd</h4>
<p class="subtitle">
.NET Developer
</p>
<hr class="hr_color">
<div class="desc">
Vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor.
</div>
<div class="links">
<a href="mailto:noreply@envato.com" class="icon_bar icon_bar_small">
<span class="t"><i class="icon-mail"></i></span>
<span class="b"><i class="icon-mail"></i></span>
</a>
<a target="_blank" href="http://facebook.com/" class="icon_bar icon_bar_small">
<span class="t"><i class="icon-facebook"></i></span>
<span class="b"><i class="icon-facebook"></i></span>
</a>
<a target="_blank" href="http://twitter.com/" class="icon_bar icon_bar_small">
<span class="t"><i class="icon-twitter"></i></span>
<span class="b"><i class="icon-twitter"></i></span></a>
<a target="_blank" href="http://www.linkedin.com/" class="icon_bar icon_bar_small">
<span class="t"><i class="icon-linkedin"></i></span>
<span class="b"><i class="icon-linkedin"></i></span>
</a>
</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-fourth column_our_team ">
<div class="team team_circle">
<div class="image_frame photo no_link scale-with-grid">
<div class="image_wrapper"><img class="scale-with-grid" src="images/home_betheme_ourteam_1.jpg" alt="home_betheme_ourteam_1" width="780" height="780" />
</div>
</div>
<div class="desc_wrapper">
<h4>Kevin Perry</h4>
<p class="subtitle">
Software Developer
</p>
<hr class="hr_color">
<div class="desc">
Vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor.
</div>
<div class="links">
<a href="mailto:noreply@envato.com" class="icon_bar icon_bar_small">
<span class="t"><i class="icon-mail"></i></span>
<span class="b"><i class="icon-mail"></i></span>
</a>
<a target="_blank" href="http://facebook.com/" class="icon_bar icon_bar_small">
<span class="t"><i class="icon-facebook"></i></span>
<span class="b"><i class="icon-facebook"></i></span>
</a>
<a target="_blank" href="http://twitter.com/" class="icon_bar icon_bar_small">
<span class="t"><i class="icon-twitter"></i></span>
<span class="b"><i class="icon-twitter"></i></span></a>
<a target="_blank" href="http://www.linkedin.com/" class="icon_bar icon_bar_small">
<span class="t"><i class="icon-linkedin"></i></span>
<span class="b"><i class="icon-linkedin"></i></span>
</a>
</div>
</div>
</div>
</div>
<div class="column mcb-column one-fourth column_our_team ">
<div class="team team_circle">
<div class="image_frame photo no_link scale-with-grid">
<div class="image_wrapper">
<img class="scale-with-grid" src="images/home_betheme_ourteam_2.jpg" alt="img">
</div>
</div>
<div class="desc_wrapper">
<h4>Jennifer Lee</h4>
<p class="subtitle">
Software Engineer
</p>
<hr class="hr_color">
<div class="desc">
Vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor.
</div>
<div class="links">
<a href="mailto:noreply@envato.com" class="icon_bar icon_bar_small">
<span class="t"><i class="icon-mail"></i></span>
<span class="b"><i class="icon-mail"></i></span>
</a>
<a target="_blank" href="http://facebook.com/" class="icon_bar icon_bar_small">
<span class="t"><i class="icon-facebook"></i></span>
<span class="b"><i class="icon-facebook"></i></span>
</a>
<a target="_blank" href="http://twitter.com/" class="icon_bar icon_bar_small">
<span class="t"><i class="icon-twitter"></i></span>
<span class="b"><i class="icon-twitter"></i></span></a>
<a target="_blank" href="http://www.linkedin.com/" class="icon_bar icon_bar_small">
<span class="t"><i class="icon-linkedin"></i></span>
<span class="b"><i class="icon-linkedin"></i></span>
</a>
</div>
</div>
</div>
</div>
<div class="column mcb-column one-fourth column_our_team ">
<div class="team team_circle">
<div class="image_frame photo no_link scale-with-grid">
<div class="image_wrapper">
<img class="scale-with-grid" src="images/home_betheme_ourteam_3.jpg" alt="img">
</div>
</div>
<div class="desc_wrapper">
<h4>Brandon Ross</h4>
<p class="subtitle">
Java Developer
</p>
<hr class="hr_color">
<div class="desc">
Vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor.
</div>
<div class="links">
<a href="mailto:noreply@envato.com" class="icon_bar icon_bar_small">
<span class="t"><i class="icon-mail"></i></span>
<span class="b"><i class="icon-mail"></i></span>
</a>
<a target="_blank" href="http://facebook.com/" class="icon_bar icon_bar_small">
<span class="t"><i class="icon-facebook"></i></span>
<span class="b"><i class="icon-facebook"></i></span>
</a>
<a target="_blank" href="http://twitter.com/" class="icon_bar icon_bar_small">
<span class="t"><i class="icon-twitter"></i></span>
<span class="b"><i class="icon-twitter"></i></span></a>
<a target="_blank" href="http://www.linkedin.com/" class="icon_bar icon_bar_small">
<span class="t"><i class="icon-linkedin"></i></span>
<span class="b"><i class="icon-linkedin"></i></span>
</a>
</div>
</div>
</div>
</div>
<div class="column mcb-column one-fourth column_our_team ">
<div class="team team_circle">
<div class="image_frame photo no_link scale-with-grid">
<div class="image_wrapper">
<img class="scale-with-grid" src="images/home_betheme_ourteam_4.jpg" alt="img">
</div>
</div>
<div class="desc_wrapper">
<h4>Sara Wright</h4>
<p class="subtitle">
Systems Engineer
</p>
<hr class="hr_color">
<div class="desc">
Vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor.
</div>
<div class="links">
<a href="mailto:noreply@envato.com" class="icon_bar icon_bar_small">
<span class="t"><i class="icon-mail"></i></span>
<span class="b"><i class="icon-mail"></i></span>
</a>
<a target="_blank" href="http://facebook.com/" class="icon_bar icon_bar_small">
<span class="t"><i class="icon-facebook"></i></span>
<span class="b"><i class="icon-facebook"></i></span>
</a>
<a target="_blank" href="http://twitter.com/" class="icon_bar icon_bar_small">
<span class="t"><i class="icon-twitter"></i></span>
<span class="b"><i class="icon-twitter"></i></span></a>
<a target="_blank" href="http://www.linkedin.com/" class="icon_bar icon_bar_small">
<span class="t"><i class="icon-linkedin"></i></span>
<span class="b"><i class="icon-linkedin"></i></span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section mcb-section" id="ourteamlist" 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">Our Team 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>
An optional layout for your team page.
</p>
<hr>
<p class="big">
Example Code:
</p>
<pre class="brush: xml;">
<div class="team team_list clearfix">
<div class="column one-fourth">
<div class="image_frame no_link scale-with-grid">
<div class="image_wrapper">
<img class="scale-with-grid" src="images/home_betheme_ourteam_4.jpg" alt="img">
</div>
</div>
</div>
<div class="column one-second">
<div class="desc_wrapper">
<h4>Tina Rice</h4>
<p class="subtitle">
Web Developer
</p>
<hr class="hr_color">
<div class="desc">
<p class="big">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit tortor, dictum in gravida nec, aliquet non lorem. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi.
</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. mattis diam vel lacus tincidunt elementum. Sed vitae adipiscing turpis. Aenean ligula.
</p>
</div>
</div>
</div>
<div class="column one-fourth">
<div class="bq_wrapper">
<blockquote>
Vitae adipiscing turpis. Aen ligula nibh, molestie sed vitae dictum in gravida
</blockquote>
<div class="links">
<a href="mailto:noreply@envato.com" class="icon_bar icon_bar_small">
<span class="t"><i class="icon-mail"></i></span>
<span class="b"><i class="icon-mail"></i></span>
</a>
<a target="_blank" href="http://facebook.com/" class="icon_bar icon_bar_small">
<span class="t"><i class="icon-facebook"></i></span>
<span class="b"><i class="icon-facebook"></i></span>
</a>
<a target="_blank" href="http://twitter.com/" class="icon_bar icon_bar_small">
<span class="t"><i class="icon-twitter"></i></span>
<span class="b"><i class="icon-twitter"></i></span></a>
<a target="_blank" href="http://www.linkedin.com/" class="icon_bar icon_bar_small">
<span class="t"><i class="icon-linkedin"></i></span>
<span class="b"><i class="icon-linkedin"></i></span>
</a>
</div>
</div>
</div>
</div>
</pre>
</div>
</div>
</div>
</div>
<div class="column mcb-column one column_our_team_list">
<div class="team team_list clearfix">
<div class="column one-fourth">
<div class="image_frame no_link scale-with-grid">
<div class="image_wrapper">
<img class="scale-with-grid" src="images/home_betheme_ourteam_4.jpg" alt="img">
</div>
</div>
</div>
<div class="column one-second">
<div class="desc_wrapper">
<h4>Tina Rice</h4>
<p class="subtitle">
Web Developer
</p>
<hr class="hr_color">
<div class="desc">
<p class="big">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit tortor, dictum in gravida nec, aliquet non lorem. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi.
</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. mattis diam vel lacus tincidunt elementum. Sed vitae adipiscing turpis. Aenean ligula.
</p>
</div>
</div>
</div>
<div class="column one-fourth">
<div class="bq_wrapper">
<blockquote>
Vitae adipiscing turpis. Aen ligula nibh, molestie sed vitae dictum in gravida
</blockquote>
<div class="links">
<a href="mailto:noreply@envato.com" class="icon_bar icon_bar_small">
<span class="t"><i class="icon-mail"></i></span>
<span class="b"><i class="icon-mail"></i></span>
</a>
<a target="_blank" href="http://facebook.com/" class="icon_bar icon_bar_small">
<span class="t"><i class="icon-facebook"></i></span>
<span class="b"><i class="icon-facebook"></i></span>
</a>
<a target="_blank" href="http://twitter.com/" class="icon_bar icon_bar_small">
<span class="t"><i class="icon-twitter"></i></span>
<span class="b"><i class="icon-twitter"></i></span></a>
<a target="_blank" href="http://www.linkedin.com/" class="icon_bar icon_bar_small">
<span class="t"><i class="icon-linkedin"></i></span>
<span class="b"><i class="icon-linkedin"></i></span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section mcb-section" id="fancyheading" 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">Fancy heading</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 unique headings with icons and other elements.
</p>
<hr>
<p class="big">
Example Code:
</p>
<pre class="brush: xml;">
<div class="fancy_heading fancy_heading_icon">
<span class="icon_top"><i class="icon-picture"></i></span>
<h2 class="title">Praesent dapibus neque id</h2>
<div class="inside">
<p class="big">
Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam.
</p>
<a class="button button_left button_size_2 button_js" href="#">
<span class="button_icon"><i class="icon-heart-fa" ></i></span>
<span class="button_label">Button with icon</span></a>
<a class="button button_left button_size_2 button_theme button_js" href="#">
<span class="button_icon"><i class="icon-heart-fa" ></i></span>
<span class="button_label">Button with icon</span>
</a>
</div>
</div>
</pre>
</div>
</div>
</div>
</div>
<div class="column mcb-column one column_fancy_heading">
<div class="fancy_heading fancy_heading_icon">
<span class="icon_top"><i class="icon-picture"></i></span>
<h2 class="title">Praesent dapibus neque id</h2>
<div class="inside">
<p class="big">
Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam.
</p>
<a class="button button_left button_size_2 button_js" href="#">
<span class="button_icon"><i class="icon-heart-fa" ></i></span>
<span class="button_label">Button with icon</span></a>
<a class="button button_left button_size_2 button_theme button_js" href="#">
<span class="button_icon"><i class="icon-heart-fa" ></i></span>
<span class="button_label">Button with icon</span>
</a>
</div>
</div>
</div>
<div class="column mcb-column one column_fancy_heading">
<div class="fancy_heading fancy_heading_line">
<span class="slogan">Morbi in sem quis dui placerat</span>
<h2 class="title">Praesent dapibus neque id</h2>
</div>
</div>
<div class="column mcb-column one column_fancy_heading">
<div class="fancy_heading fancy_heading_arrows">
<h2 class="title"><i class="icon-right-dir"></i>Praesent dapibus neque id<i class="icon-left-dir"></i></h2>
<div class="inside">
<p class="big">
Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section mcb-section" id="calltoaction" 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">Call to action</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 "Call to Action" items with or without a background image, icons, or text.
</p>
<hr>
<p class="big">
Example Code:
</p>
<pre class="brush: xml;">
<div class="call_to_action">
<div class="call_to_action_wrapper">
<div class="call_left">
<h3>Click to play</h3>
</div>
<div class="call_center">
<a href="https://www.youtube.com/watch?v=liqoMjRT81A" rel="prettyphoto"><span class="icon_wrapper"><i class="icon-play"></i></span></a>
</div>
<div class="call_right">
<div class="desc">
You can setup any youtube or vimeo videos to play. Instead of videos you can also open other things like images or other links. Open videos or images inside popup window or regular.
</div>
</div>
</div>
</div>
</pre>
</div>
</div>
</div>
</div>
<div class="column mcb-column one column_call_to_action">
<div class="call_to_action">
<div class="call_to_action_wrapper">
<div class="call_left">
<h3>Click to play</h3>
</div>
<div class="call_center">
<a href="https://www.youtube.com/watch?v=liqoMjRT81A" rel="prettyphoto"><span class="icon_wrapper"><i class="icon-play"></i></span></a>
</div>
<div class="call_right">
<div class="desc">
You can setup any youtube or vimeo videos to play. Instead of videos you can also open other things like images or other links. Open videos or images inside popup window or regular.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section mcb-section dark" style="padding-top:0px; padding-bottom:0px; background-image:url(images/home_betheme_section_calltoaction.jpg); background-repeat:no-repeat; background-position:center top">
<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_call_to_action ">
<div class="call_to_action">
<div class="call_to_action_wrapper">
<div class="call_left">
<h3>Open image in popup</h3>
</div>
<div class="call_center">
<a href="https://vimeo.com/38293771" rel="prettyphoto">
<span class="icon_wrapper"><i class="icon-picture"></i></span>
</a>
</div>
<div class="call_right">
<div class="desc">
Nullam nec nulla eget nulla viverra congue. Proin convallis quam sit amet est suscipit tincidunt. Praesent aliquam tincidunt elit, eget sagittis turpis ornare non. Mauris non leo tortor.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section mcb-section" id="fancydivider" 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">Fancy divider</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 class="big">
Example Code:
</p>
<pre class="brush: xml;">
<div class="column mcb-column one column_fancy_divider">
<div class="fancy-divider">
<svg preserveAspectRatio="none" viewBox="0 0 100 100" height="100" width="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" style="background:#FFF">
<path d="M0 0 L50 100 L100 0 Z" style="fill: #3498db; stroke: #3498db;">
</svg>
</div>
</div>
</pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section mcb-section center" style="padding-top:120px; padding-bottom:0px; background-color:#3498db">
<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">
<div class="column_attr clearfix">
<a class="button button_left button_size_2 button_js" href="fancy-divider.html" target="_blank">
<span class="button_icon">
<i class="icon-search" ></i></span>
<span class="button_label">Fancy Dividers in action</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section mcb-section full-width" style="padding-top:0px; 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_fancy_divider">
<div class="fancy-divider">
<svg preserveAspectRatio="none" viewBox="0 0 100 100" height="100" width="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" style="background:#FFF">
<path d="M0 0 L50 100 L100 0 Z" style="fill: #3498db; stroke: #3498db;">
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section mcb-section" id="hovercolor" 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 color</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 class="big">
Example Code:
</p>
<pre class="brush: xml;">
<div class="hover_color" ontouchstart="this.classList.toggle('hover');">
<div class="hover_color_bg">
<a href="#">
<div class="hover_color_wrapper">
<h4>Curabitur sit amet magna quam</h4>
</div>
</a>
</div>
</div>
</pre>
</div>
</div>
</div>
</div>
<div class="column mcb-column one column_hover_color">
<div class="hover_color" style="background:#373737;" ontouchstart="this.classList.toggle('hover');">
<div class="hover_color_bg" style="background:#2991D6;">
<a href="#">
<div class="hover_color_wrapper" style="padding:40px 30px;">
<h4 style="margin: 0; color: #fff;">Curabitur sit amet magna quam</h4>
</div>
</a>
</div>
</div>
</div>
<div class="column mcb-column one-third column_hover_color ">
<div class="hover_color" style="background:#0095eb;" ontouchstart="this.classList.toggle('hover');">
<div class="hover_color_bg" style="background:#373737;">
<a href="#">
<div class="hover_color_wrapper" style="padding:40px 30px;">
<div class="image_frame image_item no_link scale-with-grid alignnone no_border">
<div class="image_wrapper"><img class="scale-with-grid" src="images/home_betheme_icon_10.png" alt="home_betheme_icon_10" width="100" height="100">
</div>
</div>
<hr class="no_line" style="margin: 0 auto 20px">
<h3 style="color:#fff">Nullam wisi</h3>
<hr class="no_line" style="margin: 0 auto 25px">
<p style="color:#fff">
Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam.
</p>
</div>
</a>
</div>
</div>
</div>
<div class="column mcb-column one-third column_hover_color ">
<div class="hover_color" style="background:;border-color:#000000;" ontouchstart="this.classList.toggle('hover');">
<div class="hover_color_bg" style="background:;border-color:#0095eb;">
<a href="#">
<div class="hover_color_wrapper" style="padding:40px 30px;">
<div class="image_frame image_item no_link scale-with-grid alignnone no_border">
<div class="image_wrapper"><img class="scale-with-grid" src="images/home_betheme_icon_2.png" alt="home_betheme_icon_2" width="100" height="100">
</div>
</div>
<hr class="no_line" style="margin: 0 auto 20px">
<h3>Fusce posuere</h3>
<hr class="no_line" style="margin: 0 auto 25px">
<p style="color: #5a5a5a;">
Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam.
</p>
</div>
</a>
</div>
</div>
</div>
<div class="column mcb-column one-third column_hover_color ">
<div class="hover_color" style="background:#f0f9ff;border-color:#9edbff;" ontouchstart="this.classList.toggle('hover');">
<div class="hover_color_bg" style="background:#FFF;border-color:#8d8d8d;">
<a href="#">
<div class="hover_color_wrapper" style="padding:40px 30px;">
<div class="image_frame image_item no_link scale-with-grid alignnone no_border">
<div class="image_wrapper"><img class="scale-with-grid" src="images/home_betheme_icon_7.png" alt="home_betheme_icon_7" width="100" height="100">
</div>
</div>
<hr class="no_line" style="margin: 0 auto 20px">
<h3>Integer quis</h3>
<hr class="no_line" style="margin: 0 auto 25px">
<p style="color: #5a5a5a;">
Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam.
</p>
</div>
</a>
</div>
</div>
</div>
<div class="column mcb-column one column_hover_color ">
<div class="hover_color" style="background:#24afff;" ontouchstart="this.classList.toggle('hover');">
<div class="hover_color_bg" style="background:#005cb1;">
<a href="#">
<div class="hover_color_wrapper" style="padding:40px 30px;">
<h4 style="margin: 0; color: #fff;">Vestibulum ante ipsum dolor cursus non</h4>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section mcb-section" id="features-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">Feature 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>
Create a list of feature elements with icons and text.
</p>
<hr>
<p class="big">
Example Code:
</p>
<pre class="brush: xml;">
<div class="feature_list" data-col="4">
<ul>
<li>
<a href="#">
<span class="icon"><i class="icon-tools"></i></span>
<p>Best Muffin Options panel</p>
</a>
</li>
<li>
<a href="#">
<span class="icon"><i class="icon-cog"></i></span>
<p>Easy and fast Muffin Builder</p>
</a>
</li>
<li>
<a href="#">
<span class="icon"><i class="icon-basket"></i></span>
<p>WooCommerce ready</p>
</a>
</li>
<li>
<a href="#">
<span class="icon"><i class="icon-globe"></i></span>
<p>WordPress Multilingual ready</p>
</a>
</li>
<li>
<a href="#">
<span class="icon"><i class="icon-flag"></i></span>
<p>Built-in Translator</p>
</a>
</li>
<li>
<a href="#">
<span class="icon"><i class="icon-infinity"></i></span>
<p>Unlimited layouts</p>
</a>
</li>
<li>
<a href="#">
<span class="icon"><i class="icon-code"></i></span>
<p>200+ builder items/shortcodes</p>
</a>
</li>
<li>
<a href="#">
<span class="icon"><i class="icon-picture"></i></span>
<p>Revolution Slider included</p>
</a>
</li>
<li>
<a href="#">
<span class="icon"><i class="icon-palette"></i></span>
<p>Unlimited colors</p>
</a>
</li>
<li>
<a href="#"><span class="icon"><i class="icon-docs"></i></span>
<p>Outstanding documentation</p>
</a>
</li>
<li>
<a href="#"><span class="icon"><i class="icon-help"></i></span>
<p>and much more...</p>
</a>
</li>
</ul>
</div>
</pre>
</div>
</div>
</div>
</div>
<div class="column mcb-column one column_feature_list">
<div class="feature_list" data-col="4">
<ul>
<li>
<a href="#">
<span class="icon"><i class="icon-tools"></i></span>
<p>Best Muffin Options panel</p>
</a>
</li>
<li>
<a href="#">
<span class="icon"><i class="icon-cog"></i></span>
<p>Easy and fast Muffin Builder</p>
</a>
</li>
<li>
<a href="#">
<span class="icon"><i class="icon-basket"></i></span>
<p>WooCommerce ready</p>
</a>
</li>
<li>
<a href="#">
<span class="icon"><i class="icon-globe"></i></span>
<p>WordPress Multilingual ready</p>
</a>
</li>
<li>
<a href="#">
<span class="icon"><i class="icon-flag"></i></span>
<p>Built-in Translator</p>
</a>
</li>
<li>
<a href="#">
<span class="icon"><i class="icon-infinity"></i></span>
<p>Unlimited layouts</p>
</a>
</li>
<li>
<a href="#">
<span class="icon"><i class="icon-code"></i></span>
<p>200+ builder items/shortcodes</p>
</a>
</li>
<li>
<a href="#">
<span class="icon"><i class="icon-picture"></i></span>
<p>Revolution Slider included</p>
</a>
</li>
<li>
<a href="#">
<span class="icon"><i class="icon-palette"></i></span>
<p>Unlimited colors</p>
</a>
</li>
<li>
<a href="#"><span class="icon"><i class="icon-docs"></i></span>
<p>Outstanding documentation</p>
</a>
</li>
<li>
<a href="#"><span class="icon"><i class="icon-help"></i></span>
<p>and much more...</p>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section mcb-section" id="video" 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">Video</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>
Embed <em>Vimeo</em>, <em>Youtube</em> and <em>HTML5</em> videos.
</p>
<hr>
<p class="big">
Example Code:
</p>
<pre class="brush: xml;">
<iframe class="scale-with-grid" width="1176" height="662" src="http://player.vimeo.com/video/85925023?wmode=opaque" allowFullScreen></iframe>
</pre>
</div>
</div>
</div>
</div>
<div class="column mcb-column one column_video">
<div class="content_video iframe has-wh">
<iframe class="scale-with-grid" width="1176" height="662" src="http://player.vimeo.com/video/85925023?wmode=opaque" allowFullScreen></iframe>
</div>
</div>
<div class="column mcb-column one column_column">
<div class="column_attr clearfix"></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 src="http://maps.google.com/maps/api/js?sensor=false&ver=5.9"></script>
<script>
function google_maps_58b335ed356f9() {
var latlng = new google.maps.LatLng(-33.8710, 151.2039);
var draggable = true;
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
draggable: draggable,
zoomControl: true,
mapTypeControl: false,
streetViewControl: false,
scrollwheel: false
};
var map = new google.maps.Map(document.getElementById("google-map-area-58b335ed356f9"), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
}
jQuery(document).ready(function($) {
google_maps_58b335ed356f9();
});
</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