Helgen-Website/html/onepage-corporate.html
2024-11-04 11:54:48 -06:00

707 lines
46 KiB
HTML

<!doctype html>
<html class="no-js" lang="en">
<head>
<title>H-Code | Responsive & Multi-Purpose One/Multi Page Template</title>
<meta name="description" content="H-Code - A premium portfolio template from ThemeZaa">
<meta name="keywords" content="">
<meta charset="utf-8">
<meta name="author" content="ThemeZaa">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1" />
<!-- favicon -->
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
<!-- animation -->
<link rel="stylesheet" href="css/animate.css" />
<!-- bootstrap -->
<link rel="stylesheet" href="css/bootstrap.css" />
<!-- et line icon -->
<link rel="stylesheet" href="css/et-line-icons.css" />
<!-- font-awesome icon -->
<link rel="stylesheet" href="css/font-awesome.min.css" />
<!-- revolution slider -->
<link rel="stylesheet" href="css/extralayers.css" />
<link rel="stylesheet" href="css/settings.css" />
<!-- magnific popup -->
<link rel="stylesheet" href="css/magnific-popup.css" />
<!-- owl carousel -->
<link rel="stylesheet" href="css/owl.carousel.css" />
<link rel="stylesheet" href="css/owl.transitions.css" />
<link rel="stylesheet" href="css/full-slider.css" />
<!-- text animation -->
<link rel="stylesheet" href="css/text-effect.css" />
<!-- hamburger menu -->
<link rel="stylesheet" href="css/menu-hamburger.css" />
<!-- common -->
<link rel="stylesheet" href="css/style.css" />
<!-- responsive -->
<link rel="stylesheet" href="css/responsive.css" />
<!--[if IE]>
<link rel="stylesheet" href="css/style-ie.css" />
<![endif]-->
<!--[if IE]>
<script src="js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<!-- navigation -->
<nav class="navbar navbar-default navbar-fixed-top nav-transparent overlay-nav sticky-nav nav-white nav-border-bottom no-transition" role="navigation">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-6"><a class="logo-light" href="index.html"><img alt="" src="images/logo-white.png" class="logo" /></a><a class="logo-dark" href="index.html"><img alt="" src="images/logo-light.png" class="logo" /></a></div>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
</div>
<div class="col-md-9 text-right">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#slider" class="inner-link">Home</a> </li>
<li><a href="#about" class="inner-link">About</a> </li>
<li><a href="#services" class="inner-link">Services</a></li>
<li><a href="#pricing" class="inner-link">Pricing</a></li>
<li><a href="#clients" class="inner-link">Clients</a></li>
<li><a href="#news" class="inner-link">News</a> </li>
<li><a href="#contact-us" class="inner-link">Contact</a> </li>
<li><a href="index.html" class="inner-link">Demos</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<!-- end of navigation -->
<!-- slider section -->
<section id="slider" class="full-screen no-padding dark-pagination-without-next-prev-arrow onepage-corporate-slider">
<div id="owl-demo" class="owl-carousel owl-theme light-pagination">
<!-- slider item -->
<div class="item owl-bg-img" style="background-image:url('http://placehold.it/1920x1100');"><div class="slider-overlay bg-slider"></div>
<div class="container full-screen position-relative">
<div class="slider-typography">
<div class="slider-text-middle-main">
<div class="slider-text-middle">
<h1 class="white-text">shortcodes</h1>
<p class="text-large light-gray-text letter-spacing-3 margin-three">Easy way to build Amazing Website</p>
<a class="btn-small-white-background btn btn-small no-margin" href="#">start browsing</a>
</div>
</div>
</div>
</div>
</div>
<!-- end slider item -->
<!-- slider item -->
<div class="item owl-bg-img" style="background-image:url('http://placehold.it/1920x1100');"><div class="slider-overlay bg-slider"></div>
<div class="container full-screen position-relative">
<div class="slider-typography">
<div class="slider-text-middle-main">
<div class="slider-text-middle">
<h1 class="white-text">elements</h1>
<p class="text-large light-gray-text letter-spacing-3 margin-three">Create what you need for your Website</p>
<a class="btn-small-white-background btn btn-small no-margin" href="#">start browsing</a>
</div>
</div>
</div>
</div>
</div>
<!-- end slider item -->
<!-- slider item -->
<div class="item owl-bg-img" style="background-image:url('http://placehold.it/1920x1100');"><div class="slider-overlay bg-slider"></div>
<div class="container full-screen position-relative">
<div class="slider-typography">
<div class="slider-text-middle-main">
<div class="slider-text-middle">
<h1 class="white-text">shortcodes</h1>
<p class="text-large light-gray-text letter-spacing-3 margin-three">Easy way to build Amazing Website</p>
<a class="btn-small-white-background btn btn-small no-margin" href="#">start browsing</a>
</div>
</div>
</div>
</div>
</div>
<!-- end slider item -->
</div>
</section>
<!-- end slider section -->
<!-- about us section -->
<section id="about" class="border-bottom no-padding-bottom xs-onepage-section">
<div class="container">
<div class="row">
<!-- section title -->
<div class="col-md-12 text-center ">
<h3 class="section-title main-font no-padding margin-one no-margin-top gray-text letter-spacing-3">About Product</h3>
<h1>Interface Benefits</h1>
</div>
<!-- end section title -->
</div>
<div class="row margin-ten">
<!-- features item -->
<div class="col-md-4 col-sm-4 text-center xs-margin-bottom-ten">
<i class="icon-chat extra-large-icon"></i>
<span class="text-uppercase letter-spacing-2 black-text font-weight-600 display-block margin-ten no-margin-bottom xs-margin-top-five">Targeting Setting</span>
<p class="width-80 center-col margin-three">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<!-- end features item -->
<!-- features item -->
<div class="col-md-4 col-sm-4 text-center xs-margin-bottom-ten">
<i class="icon-browser extra-large-icon"></i>
<span class="text-uppercase letter-spacing-2 black-text font-weight-600 display-block margin-ten no-margin-bottom xs-margin-top-five">Affordable Price</span>
<p class="width-80 center-col margin-three">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<!-- end features item -->
<!-- features item -->
<div class="col-md-4 col-sm-4 text-center xs-margin-bottom-ten">
<i class="icon-hotairballoon extra-large-icon"></i>
<span class="text-uppercase letter-spacing-2 black-text font-weight-600 display-block margin-ten no-margin-bottom xs-margin-top-five">Instant Support</span>
<p class="width-80 center-col margin-three">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<!-- end features item -->
</div>
<div class="row">
<div class="col-md-9 text-center center-col">
<img src="http://placehold.it/1195x563" alt=""/>
</div>
</div>
</div>
</section>
<!-- end about us section -->
<!-- services section -->
<section id="services" class="bg-white no-padding-bottom xs-onepage-section">
<div class="container margin-five no-margin-top sm-margin-bottom-ten">
<div class="row">
<!-- section title -->
<div class="col-md-12 text-center">
<h3 class="section-title main-font no-padding margin-one no-margin-top gray-text letter-spacing-3">Our Services</h3>
<h1>Detailed Analytics</h1>
</div>
<!-- end section title -->
</div>
<div class="row margin-ten no-margin-bottom">
<div class="col-md-4 col-sm-4 text-center xs-margin-bottom-ten">
<span class="services-number font-weight-100 gray-text">01</span>
<p class="text-uppercase letter-spacing-2 black-text font-weight-600 margin-five no-margin-bottom">Several Design Options</p>
<p class="margin-two text-med width-90 center-col">Lorem Ipsum is simply dummy text of the printing & typesetting industry.</p>
</div>
<div class="col-md-4 col-sm-4 text-center xs-margin-bottom-ten">
<span class="services-number font-weight-100 gray-text">02</span>
<p class="text-uppercase letter-spacing-2 black-text font-weight-600 margin-five no-margin-bottom">Clean & Modern Design</p>
<p class="margin-two text-med width-90 center-col">Lorem Ipsum is simply dummy text of the printing & typesetting industry.</p>
</div>
<div class="col-md-4 col-sm-4 text-center xs-margin-bottom-ten">
<span class="services-number font-weight-100 gray-text">03</span>
<p class="text-uppercase letter-spacing-2 black-text font-weight-600 margin-five no-margin-bottom">Build Your Website</p>
<p class="margin-two text-med width-90 center-col">Lorem Ipsum is simply dummy text of the printing & typesetting industry.</p>
</div>
</div>
</div>
<div class="container-fuild parallax9 parallax-fix">
<img class="parallax-background-img" src="http://placehold.it/1920x901" alt="" />
<div class="col-md-6 col-sm-12 col-xs-12 grid-border pull-right no-padding clearfix">
<!-- services item -->
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 no-padding grid-border-box bg-gray text-center">
<i class="icon-mobile extra-large-icon"></i><span class="text-uppercase letter-spacing-2 black-text font-weight-600 display-block margin-ten no-margin-bottom xs-margin-top-five">Responsive<br> Framework</span>
</div>
<!-- end services item -->
<!-- services item -->
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 no-padding grid-border-box bg-gray text-center">
<i class="icon-presentation extra-large-icon"></i><span class="text-uppercase letter-spacing-2 black-text font-weight-600 display-block margin-ten no-margin-bottom xs-margin-top-five">Beautifully<br> Designs</span>
</div>
<!-- end services item -->
<!-- services item -->
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 no-padding grid-border-box bg-gray text-center">
<i class="icon-puzzle extra-large-icon"></i><span class="text-uppercase letter-spacing-2 black-text font-weight-600 display-block margin-ten no-margin-bottom xs-margin-top-five">Extensively<br> Extendable</span>
</div>
<!-- end services item -->
<!-- services item -->
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 no-padding grid-border-box bg-gray text-center">
<i class="icon-gears extra-large-icon"></i><span class="text-uppercase letter-spacing-2 black-text font-weight-600 display-block margin-ten no-margin-bottom xs-margin-top-five">Powerfully<br> Customizable</span>
</div>
<!-- end services item -->
<!-- services item -->
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 no-padding grid-border-box bg-gray text-center">
<i class="icon-genius extra-large-icon"></i><span class="text-uppercase letter-spacing-2 black-text font-weight-600 display-block margin-ten no-margin-bottom xs-margin-top-five">Tons of<br> Features</span>
</div>
<!-- end services item -->
<!-- services item -->
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 no-padding grid-border-box bg-gray text-center">
<i class="icon-hotairballoon extra-large-icon"></i><span class="text-uppercase letter-spacing-2 black-text font-weight-600 display-block margin-ten no-margin-bottom xs-margin-top-five">Amazing<br> Support</span>
</div>
<!-- end services item -->
</div>
</div>
</section>
<!-- end services section -->
<!-- pricing section -->
<section id="pricing" class="xs-onepage-section">
<div class="container">
<div class="row">
<!-- section title -->
<div class="col-md-12 text-center ">
<h3 class="section-title main-font no-padding margin-one no-margin-top gray-text letter-spacing-3">Affordable prices</h3>
<h1>Select Something</h1>
</div>
<!-- end section title -->
</div>
<div class="row margin-ten no-margin-bottom">
<div class="pricing">
<!-- pricing item -->
<div class="col-md-3 sm-margin-bottom-five sm-no-margin-top sm-margin-bottom-ten">
<div class="pricing-box sm-border">
<div class="pricing-title no-border">
<h3>Starter</h3>
</div>
<div class="pricing-price">
<span class="price-unit">€</span>7<span class="price-tenure">/mo</span>
</div>
<div class="pricing-features">
<ul>
<li><strong>Full</strong> Access</li>
<li><i class="icon-code"></i> Source Files</li>
<li><strong>100</strong> User Accounts</li>
<li><strong>1 Year</strong> License</li>
<li>Phone &amp; Email Support</li>
</ul>
</div>
<div class="pricing-action">
<a href="#" class="highlight-button btn btn-small button no-margin">Sign Up Now!</a>
</div>
</div>
</div>
<!-- end pricing item -->
<!-- pricing item -->
<div class="col-md-3 sm-margin-bottom-five sm-no-margin-top sm-margin-bottom-seven">
<div class="pricing-box best-price xs-no-margin">
<div class="pricing-title no-border">
<h3>Professional</h3>
<span>Most Popular</span>
</div>
<div class="pricing-price">
<span class="price-unit">€</span>12<span class="price-tenure">/mo</span>
</div>
<div class="pricing-features">
<ul>
<li><strong>Full</strong> Access</li>
<li><i class="icon-code"></i> Source Files</li>
<li><strong>1000</strong> User Accounts</li>
<li><strong>2 Years</strong> License</li>
<li>Phone &amp; Email Support</li>
<li><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i></li>
</ul>
</div>
<div class="pricing-action">
<a href="#" class="btn-small-white-background btn btn-small button no-margin">Sign Up Now!</a>
</div>
</div>
</div>
<!-- end pricing item -->
<!-- pricing item -->
<div class="col-md-3 sm-margin-bottom-five sm-no-margin-top sm-margin-bottom-seven">
<div class="pricing-box sm-border">
<div class="pricing-title no-border">
<h3>Business</h3>
</div>
<div class="pricing-price">
<span class="price-unit">€</span>19<span class="price-tenure">/mo</span>
</div>
<div class="pricing-features">
<ul>
<li><strong>Full</strong> Access</li>
<li><i class="icon-code"></i> Source Files</li>
<li><strong>500</strong> User Accounts</li>
<li><strong>3 Years</strong> License</li>
<li>Phone &amp; Email Support</li>
</ul>
</div>
<div class="pricing-action">
<a href="#" class="highlight-button btn btn-small button no-margin">Sign Up Now!</a>
</div>
</div>
</div>
<!-- end pricing item -->
<!-- pricing item -->
<div class="col-md-3 sm-no-margin-top">
<div class="pricing-box last sm-border">
<div class="pricing-title no-border">
<h3>Enterprise</h3>
</div>
<div class="pricing-price">
<span class="price-unit">€</span>29<span class="price-tenure">/mo</span>
</div>
<div class="pricing-features">
<ul>
<li><strong>Full</strong> Access</li>
<li><i class="icon-code"></i> Source Files</li>
<li><strong>1000</strong> User Accounts</li>
<li><strong>5 Years</strong> License</li>
<li>Phone &amp; Email Support</li>
</ul>
</div>
<div class="pricing-action">
<a href="#" class="highlight-button btn btn-small button no-margin">Sign Up Now!</a>
</div>
</div>
</div>
<!-- end pricing item -->
</div>
</div>
</div>
</section>
<!-- end pricing section -->
<!-- clients section -->
<section id="clients" class="border-top xs-onepage-section">
<div class="container">
<div class="row">
<!-- section title -->
<div class="col-md-12 text-center ">
<h3 class="section-title main-font no-padding margin-one no-margin-top gray-text letter-spacing-3">about reviews</h3>
<h1>What Clients Say?</h1>
</div>
<!-- end section title -->
</div>
<div class="row grid-border border-top border-right margin-ten no-margin-bottom">
<!-- clients logo -->
<div class="col-md-3 col-sm-6 no-padding">
<div class="client-logo-outer"><div class="client-logo-inner"><img src="http://placehold.it/800x500" alt=""/></div></div>
</div>
<!-- end clients logo -->
<!-- clients logo -->
<div class="col-md-3 col-sm-6 no-padding">
<div class="client-logo-outer"><div class="client-logo-inner"><img src="http://placehold.it/800x500" alt=""/></div></div>
</div>
<!-- end clients logo -->
<!-- clients logo -->
<div class="col-md-3 col-sm-6 no-padding">
<div class="client-logo-outer"><div class="client-logo-inner"><img src="http://placehold.it/800x500" alt=""/></div></div>
</div>
<!-- end clients logo -->
<!-- clients logo -->
<div class="col-md-3 col-sm-6 no-padding">
<div class="client-logo-outer"><div class="client-logo-inner"><img src="http://placehold.it/800x500" alt=""/></div></div>
</div>
<!-- end clients logo -->
<!-- clients logo -->
<div class="col-md-3 col-sm-6 no-padding">
<div class="client-logo-outer"><div class="client-logo-inner"><img src="http://placehold.it/800x500" alt=""/></div></div>
</div>
<!-- end clients logo -->
<!-- clients logo -->
<div class="col-md-3 col-sm-6 no-padding">
<div class="client-logo-outer"><div class="client-logo-inner"><img src="http://placehold.it/800x500" alt=""/></div></div>
</div>
<!-- end clients logo -->
<!-- clients logo -->
<div class="col-md-3 col-sm-6 no-padding">
<div class="client-logo-outer"><div class="client-logo-inner"><img src="http://placehold.it/800x500" alt=""/></div></div>
</div>
<!-- end clients logo -->
<!-- clients logo -->
<div class="col-md-3 col-sm-6 no-padding">
<div class="client-logo-outer"><div class="client-logo-inner"><img src="http://placehold.it/800x500" alt=""/></div></div>
</div>
<!-- end clients logo -->
</div>
</div>
</section>
<!-- end clients section -->
<!-- testimonials section -->
<section class="fix-background" style="background-image:url('http://placehold.it/1920x1100');">
<div class="opacity-full bg-dark-gray"></div>
<div class="container">
<div class="row">
<div id="testimonial-slider" class="col-md-12 owl-carousel owl-theme light-pagination owl-no-pagination dark-pagination-without-next-prev-arrow position-relative">
<!-- testimonials item -->
<div class="item">
<div class="testimonial-style2 text-center xs-margin-bottom-ten">
<img src="http://placehold.it/300x300" alt=""/>
<p class="center-col width-90">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
<span class="name white-text">Alexander Harvard - Google</span>
<i class="fa fa-quote-left small-icon yellow-text display-block margin-five no-margin-bottom"></i>
</div>
</div>
<!-- end testimonials item -->
<!-- testimonials item -->
<div class="item">
<div class="testimonial-style2 text-center xs-margin-bottom-ten">
<img src="http://placehold.it/300x300" alt=""/>
<p class="center-col width-90">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
<span class="name white-text">Herman Miller - Apple</span>
<i class="fa fa-quote-left small-icon yellow-text display-block margin-five no-margin-bottom"></i>
</div>
</div>
<!-- end testimonials item -->
<!-- testimonials item -->
<div class="item">
<div class="testimonial-style2 text-center">
<img src="http://placehold.it/300x300" alt=""/>
<p class="center-col width-90">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
<span class="name white-text">Bryan Jonhson - Yahoo</span>
<i class="fa fa-quote-left small-icon yellow-text display-block margin-five no-margin-bottom"></i>
</div>
</div>
<!-- end testimonials item -->
<!-- testimonials item -->
<div class="item">
<div class="testimonial-style2 text-center xs-margin-bottom-ten">
<img src="http://placehold.it/300x300" alt=""/>
<p class="center-col width-90">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
<span class="name white-text">Jeremy Dupont - Apple</span>
<i class="fa fa-quote-left small-icon yellow-text display-block margin-five no-margin-bottom"></i>
</div>
</div>
<!-- end testimonials item -->
<!-- testimonials item -->
<div class="item">
<div class="testimonial-style2 text-center xs-margin-bottom-ten">
<img src="http://placehold.it/300x300" alt=""/>
<p class="center-col width-90">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
<span class="name white-text">Steve Anders - Facebook</span>
<i class="fa fa-quote-left small-icon yellow-text display-block margin-five no-margin-bottom"></i>
</div>
</div>
<!-- end testimonials item -->
<!-- testimonials item -->
<div class="item">
<div class="testimonial-style2 text-center">
<img src="http://placehold.it/300x300" alt=""/>
<p class="center-col width-90">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
<span class="name white-text">Bryan Johnson - Apple</span>
<i class="fa fa-quote-left small-icon yellow-text display-block margin-five no-margin-bottom"></i>
</div>
</div>
<!-- end testimonials item -->
</div>
</div>
</div>
</section>
<!-- end testimonials section -->
<!-- counter section -->
<section id="counter" class="border-bottom">
<div class="container">
<div class="row">
<!-- counter -->
<div class="col-md-3 col-sm-6 bottom-margin text-center counter-section wow fadeInUp sm-margin-bottom-ten" data-wow-duration="300ms">
<i class="icon-global medium-icon"></i>
<span class="timer counter-number alt-font" data-to="698" data-speed="7000"></span>
<span class="counter-title gray-text">Projects</span>
</div>
<!-- end counter -->
<!-- counter -->
<div class="col-md-3 col-sm-6 bottom-margin text-center counter-section wow fadeInUp sm-margin-bottom-ten" data-wow-duration="600ms">
<i class="icon-download medium-icon"></i>
<span class="timer counter-number alt-font" data-to="742" data-speed="7000"></span>
<span class="counter-title gray-text">Downloads</span>
</div>
<!-- end counter -->
<!-- counter -->
<div class="col-md-3 col-sm-6 bottom-margin-small text-center counter-section wow fadeInUp xs-margin-bottom-ten" data-wow-duration="900ms">
<i class="icon-quote medium-icon"></i>
<span class="timer counter-number alt-font" data-to="952" data-speed="7000"></span>
<span class="counter-title gray-text">Likes</span>
</div>
<!-- end counter -->
<!-- counter -->
<div class="col-md-3 col-sm-6 text-center counter-section wow fadeInUp" data-wow-duration="1200ms">
<i class="icon-wine medium-icon"></i>
<span class="timer counter-number alt-font" data-to="387" data-speed="7000"></span>
<span class="counter-title gray-text">Wine</span>
</div>
<!-- end counter -->
</div>
</div>
</section>
<!-- end counter section -->
<!-- news section -->
<section id="news" class="border-bottom xs-onepage-section">
<div class="container">
<div class="row">
<!-- section title -->
<div class="col-md-12 text-center ">
<h3 class="section-title main-font no-padding margin-one no-margin-top gray-text letter-spacing-3">Latest Blog</h3>
<h1>Be Aware Of News</h1>
</div>
<!-- end section title -->
</div>
<div class="row margin-ten no-margin-bottom">
<!-- news item -->
<div class="col-md-4 col-sm-4 wow fadeIn xs-margin-bottom-ten">
<div class="blog-post">
<div class="blog-post-images"><a href="blog-grid-3columns.html"><img src="http://placehold.it/800x500" alt=""></a></div>
<div class="post-details">
<a href="blog-grid-3columns.html" class="post-title">Standard post with picture</a>
<span class="post-author">Posted by Michael Freemon | 10 January 2015</span>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>
</div>
</div>
<!-- end news item -->
<!-- news item -->
<div class="col-md-4 col-sm-4 wow fadeIn xs-margin-bottom-ten">
<div class="blog-post">
<div class="blog-post-images"><a href="blog-masonry-3columns.html"><img src="http://placehold.it/800x500" alt=""></a></div>
<div class="post-details">
<a href="blog-masonry-3columns.html" class="post-title">Post with featured picture</a>
<span class="post-author">Posted by Colin Powell | 02 January 2015</span>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>
</div>
</div>
<!-- end news item -->
<!-- news item -->
<div class="col-md-4 col-sm-4 wow fadeIn">
<div class="blog-post">
<div class="blog-post-images"><a href="blog-right-sidebar.html"><img src="http://placehold.it/800x500" alt=""></a></div>
<div class="post-details">
<a href="blog-right-sidebar.html" class="post-title">Standard post with slider</a>
<span class="post-author">Posted by Vince Lombardi | 02 January 2015</span>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>
</div>
</div>
<!-- end news item -->
</div>
</div>
</section>
<!-- end news section -->
<!-- contact us section -->
<section id="contact-us" class="xs-onepage-section">
<div class="container">
<div class="row">
<!-- section title -->
<div class="col-md-12 text-center ">
<h3 class="section-title main-font no-padding margin-one no-margin-top gray-text letter-spacing-3">Contact us</h3>
<h1>Get in touch with us</h1>
</div>
<!-- end section title -->
</div>
<div class="row margin-ten no-margin-bottom">
<div class="col-md-9 text-center center-col">
<div class="col-md-4 col-sm-4 text-center"><i class="icon-phone medium-icon black-text"></i><h6 class="black-text margin-two no-margin-bottom">123-456-7890</h6></div>
<div class="col-md-4 col-sm-4 text-center"><i class="icon-map-pin medium-icon black-text"></i><h6 class="black-text margin-two no-margin-bottom">Victoria, United States</h6></div>
<div class="col-md-4 col-sm-4 text-center"><i class="icon-envelope medium-icon black-text"></i><h6 class="black-text margin-two no-margin-bottom"><a class="black-text" href="mailto:no-reply@domain.com">no-reply@domain.com</a></h6></div>
</div>
</div>
<div class="row">
<!-- form -->
<form id="contactusform" action="javascript:void(0)" method="post">
<div class="col-md-10 col-sm-12 center-col">
<div class="row"><div class="col-md-12 col-sm-12"><div class="wide-separator-line margin-ten"></div></div>
<div class="col-md-12 col-sm-12"><div id="success"></div></div>
</div>
<div class="col-md-6 col-sm-12">
<input name="name" type="text" placeholder="Your Name" />
<input name="email" type="text" placeholder="Your Email" />
</div>
<div class="col-md-6 col-sm-12">
<textarea name="comment" placeholder="Your Message" ></textarea>
</div>
<div class="col-md-12 col-sm-12">
<div class="col-md-6 col-sm-6 no-padding-left"><span class="required">*Please complete all fields correctly</span></div>
<div class="col-md-3 col-sm-6 f-right no-padding-right"><input id="contact-us-button" name="send message" type="button" value="send message" class="btn btn-black no-margin-top f-right no-margin-lr"></div>
</div>
</div>
</form>
<!-- end form -->
</div>
</div>
</section>
<!-- end contact us section -->
<!-- footer -->
<footer>
<div class=" bg-white footer-top">
<div class="container">
<div class="row margin-four">
<!-- phone -->
<div class="col-md-4 col-sm-4 text-center"><i class="icon-phone small-icon black-text"></i><h6 class="black-text margin-two no-margin-bottom">123-456-7890</h6></div>
<!-- end phone -->
<!-- address -->
<div class="col-md-4 col-sm-4 text-center"><i class="icon-map-pin small-icon black-text"></i><h6 class="black-text margin-two no-margin-bottom">Victoria, United States</h6></div>
<!-- end address -->
<!-- email -->
<div class="col-md-4 col-sm-4 text-center"><i class="icon-envelope small-icon black-text"></i><h6 class="margin-two no-margin-bottom"><a href="mailto:no-reply@domain.com" class="black-text">no-reply@domain.com</a></h6></div>
<!-- end email -->
</div>
</div>
</div>
<div class="container onepage-footer-middle">
<div class="row">
<div class="col-md-12 col-sm-12 footer-social text-right text-center">
<!-- social media link -->
<a target="_blank" href="https://www.facebook.com/"><i class="fa fa-facebook"></i></a>
<a target="_blank" href="https://twitter.com/"><i class="fa fa-twitter"></i></a>
<a target="_blank" href="https://plus.google.com"><i class="fa fa-google-plus"></i></a>
<a target="_blank" href="https://dribbble.com/"><i class="fa fa-dribbble"></i></a>
<a target="_blank" href="https://www.youtube.com/"><i class="fa fa-youtube"></i></a>
<a target="_blank" href="https://www.linkedin.com/"><i class="fa fa-linkedin"></i></a>
<!-- end social media link -->
</div>
</div>
</div>
<div class="container-fluid bg-dark-gray footer-bottom">
<div class="container">
<div class="row margin-three">
<!-- copyright -->
<div class="col-md-6 col-sm-6 col-xs-12 copyright text-left letter-spacing-1 xs-text-center xs-margin-bottom-one">
&copy; 2015 H-Code is proudly powered by ThemeZaa.
</div>
<!-- end copyright -->
<!-- logo -->
<div class="col-md-6 col-sm-6 col-xs-12 footer-logo text-right xs-text-center">
<a href="index.html"><img src="images/logo-light-gray.png" alt=""/></a>
</div>
<!-- end logo -->
</div>
</div>
</div>
<!-- scroll to top -->
<a href="javascript:;" class="scrollToTop"><i class="fa fa-angle-up"></i></a>
<!-- scroll to top end... -->
</footer>
<!-- end footer -->
<!-- javascript libraries / javascript files set #2 -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/modernizr.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/skrollr.min.js"></script>
<script type="text/javascript" src="js/jquery.viewport.mini.js"></script>
<script type="text/javascript" src="js/smooth-scroll.js"></script>
<!-- jquery appear -->
<script type="text/javascript" src="js/jquery.appear.js"></script>
<!-- animation -->
<script type="text/javascript" src="js/wow.min.js"></script>
<!-- page scroll -->
<script type="text/javascript" src="js/page-scroll.js"></script>
<!-- easy piechart-->
<script type="text/javascript" src="js/jquery.easypiechart.js"></script>
<!-- parallax -->
<script type="text/javascript" src="js/jquery.parallax-1.1.3.js"></script>
<!--portfolio with shorting tab -->
<script type="text/javascript" src="js/jquery.isotope.min.js"></script>
<!-- owl slider -->
<script type="text/javascript" src="js/owl.carousel.min.js"></script>
<!-- magnific popup -->
<script type="text/javascript" src="js/jquery.magnific-popup.min.js"></script>
<script type="text/javascript" src="js/popup-gallery.js"></script>
<!-- text effect -->
<script type="text/javascript" src="js/text-effect.js"></script>
<!-- revolution slider -->
<script type="text/javascript" src="js/jquery.tools.min.js"></script>
<script type="text/javascript" src="js/jquery.revolution.js"></script>
<!-- counter -->
<script type="text/javascript" src="js/counter.js"></script>
<!-- countTo -->
<script type="text/javascript" src="js/jquery.countTo.js"></script>
<!-- fit videos -->
<script type="text/javascript" src="js/jquery.fitvids.js"></script>
<!-- imagesloaded -->
<script type="text/javascript" src="js/imagesloaded.pkgd.min.js"></script>
<!-- hamburger menu-->
<script type="text/javascript" src="js/classie.js"></script>
<script type="text/javascript" src="js/hamburger-menu.js"></script>
<!-- one page navigation -->
<script type="text/javascript" src="js/one-page-main.js"></script>
<!-- setting -->
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>