website/theme/how-it-works.html

985 lines
75 KiB
HTML
Raw Normal View History

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 class="current_page_item">
<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>
<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 id="Subheader">
<div class="container">
<div class="column one">
<h1 class="title">How it works?</h1>
</div>
</div>
</div>
</div>
<div id="Content">
<div class="content_wrapper clearfix">
<div class="sections_group">
<div class="entry-content">
<div class="section mcb-section" style="padding-top:50px; padding-bottom:20px; background-color:#f2f2f2; background-image:url(images/home_betheme_hiw_bg.jpg); background-repeat:no-repeat; background-position:center top">
<div class="section_wrapper mcb-section-inner">
<div class="wrap mcb-wrap one clearfix">
<div class="mcb-wrap-inner">
<div class="column mcb-column one column_fancy_heading">
<div class="fancy_heading fancy_heading_icon">
<h2 class="title">How it works?</h2>
</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_hiw_1.png" class="scale-with-grid" alt="home_betheme_hiw_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_hiw_2.png" class="scale-with-grid" alt="home_betheme_hiw_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_hiw_3.png" class="scale-with-grid" alt="home_betheme_hiw_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_hiw_4.png" class="scale-with-grid" alt="home_betheme_hiw_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 class="column mcb-column one column_divider">
<hr style="margin: 0 auto 35px">
</div>
<div class="column mcb-column one column_fancy_heading">
<div class="fancy_heading fancy_heading_icon">
<h2 class="title">We help you build a better
<br>
tomorrow</h2>
</div>
</div>
<div class="column mcb-column one-second column_image ">
<div class="image_frame image_item no_link scale-with-grid aligncenter no_border">
<div class="image_wrapper"><img class="scale-with-grid" src="images/home_betheme_hiw_lab.png" alt="home_betheme_hiw_lab" width="436" height="340" />
</div>
</div>
</div>
<div class="column mcb-column one-second column_column">
<div class="column_attr clearfix" style=" padding:50px 7% 0;">
<h2>We analyse your needs carefully</h2>
<p class="big">
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 ante lobortis id. In viverra ipsum stie id viverra a...
</p>
<a href="#technologies" class="scroll">Read more</a>
</div>
</div>
<div class="column mcb-column one column_divider">
<hr class="no_line">
</div>
<div class="column mcb-column one-second column_column">
<div class="column_attr clearfix" style=" padding:50px 7% 0;">
<h2>We provide best solutions</h2>
<p class="big">
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 ante lobortis id. In viverra ipsum stie id viverra a...
</p>
<a href="#features" class="scroll">Read more</a>
</div>
</div>
<div class="column mcb-column one-second column_image ">
<div class="image_frame image_item no_link scale-with-grid aligncenter no_border">
<div class="image_wrapper"><img class="scale-with-grid" src="images/home_betheme_hiw_cup.png" alt="home_betheme_hiw_cup" width="496" height="302" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section mcb-section" id="technologies" style="padding-top:50px; padding-bottom:20px; background-color:#fff">
<div class="section_wrapper mcb-section-inner">
<div class="wrap mcb-wrap one clearfix">
<div class="mcb-wrap-inner">
<div class="column mcb-column one column_fancy_heading">
<div class="fancy_heading fancy_heading_icon">
<h2 class="title">Technologies</h2>
</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_hiw_tools.png" class="scale-with-grid" alt="home_betheme_hiw_tools" width="102" height="100" />
</div>
<div class="desc_wrapper">
<h4 class="title">Awesome builder</h4>
<div class="desc">
Vitae adipiscing turpis. Aenean ligula nibh in, molestie id viverra a, dapibus at dolor.
</div>
</div>
</a>
</div>
</div>
<div class="column mcb-column one-third column_icon_box ">
<div class="icon_box icon_position_left no_border">
<a href="#">
<div class="image_wrapper"><img src="images/home_betheme_hiw_stuff.png" class="scale-with-grid" alt="home_betheme_hiw_stuff" width="102" height="100">
</div>
<div class="desc_wrapper">
<h4 class="title">Own framework</h4>
<div class="desc">
Vitae adipiscing turpis. Aenean ligula nibh in, molestie id viverra a, dapibus at dolor.
</div>
</div>
</a>
</div>
</div>
<div class="column mcb-column one-third column_icon_box ">
<div class="icon_box icon_position_left no_border">
<a href="#">
<div class="image_wrapper"><img src="images/home_betheme_hiw_note.png" class="scale-with-grid" alt="home_betheme_hiw_note" width="102" height="100">
</div>
<div class="desc_wrapper">
<h4 class="title">Great documentation</h4>
<div class="desc">
Vitae adipiscing turpis. Aenean ligula nibh in, molestie id viverra a, dapibus at dolor.
</div>
</div>
</a>
</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 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>Watch our video tutorial</h3>
</div>
<div class="call_center">
<a href="https://www.youtube.com/watch?v=ZACc1L9oXkI" rel="prettyphoto"><span class="icon_wrapper"><i class="icon-play"></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="features" style="padding-top:50px; padding-bottom:20px">
<div class="section_wrapper mcb-section-inner">
<div class="wrap mcb-wrap one clearfix">
<div class="mcb-wrap-inner">
<div class="column mcb-column one column_fancy_heading">
<div class="fancy_heading fancy_heading_icon">
<h2 class="title">Why people choose us?</h2>
<div class="inside">
<p class="big">
Morbi in sem quis dui placerat ornare. Pelle ntesque odio nisi, euismod in, phar etra a, ultricies in, diam.
<br> Morbi in sem quis dui placerat ornare. Pellente s dui placerat sque odio nisi, euismod
</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-heart-line"></i>
</div>
<div class="desc_wrapper">
<div class="number-wrapper">
<span class="number" data-to="238">238</span>
</div>
<p class="title">
Lovely shortcodes
</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-star-line"></i>
</div>
<div class="desc_wrapper">
<div class="number-wrapper">
<span class="number" data-to="15927">15927</span>
</div>
<p class="title">
Happy clients
</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-beaker-line"></i>
</div>
<div class="desc_wrapper">
<div class="number-wrapper">
<span class="number" data-to="9">9</span>
</div>
<p class="title">
Years experience
</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-comment-line"></i>
</div>
<div class="desc_wrapper">
<div class="number-wrapper">
<span class="number" data-to="1797">1797</span>
</div>
<p class="title">
Rating comments
</p>
</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>
</body>
</html>