759 lines
57 KiB
HTML
759 lines
57 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 nav-dark navbar-fixed-top nav-transparent overlay-nav sticky-nav full-width-pull-menu full-width-pull-menu-dark" role="navigation">
|
||
<!-- navigation panel -->
|
||
<div class="container">
|
||
<div class="row">
|
||
<!-- logo -->
|
||
<div class="col-md-2 col-sm-2 pull-left"><a href="index.html"><img alt="" src="images/logo-orange.png" class="logo" /></a></div>
|
||
<!-- end logo -->
|
||
<!-- main menu -->
|
||
<div class="col-md-10 col-sm-10 no-padding-right">
|
||
<div class="menu-wrap full-screen no-padding">
|
||
<div class="col-md-6 col-sm-6 full-screen no-padding cover-background xs-display-none" style="background-image:url('http://placehold.it/1079x1079');"></div>
|
||
<div class="col-md-6 col-sm-6 full-screen bg-white">
|
||
<div class="pull-menu full-screen ">
|
||
<div class="pull-menu-open">
|
||
<div class="pull-menu-open-sub">
|
||
<ul id="accordion" class="nav navbar-nav panel-group no-padding">
|
||
<li><span class="menu-number">01</span><a href="#home" class="inner-link">Home</a> </li>
|
||
<li><span class="menu-number">02</span><a href="#short-history" class="inner-link">Short History</a> </li>
|
||
<li><span class="menu-number">03</span><a href="#portfolio" class="inner-link">Portfolio</a> </li>
|
||
<li><span class="menu-number">04</span><a href="#our-services" class="inner-link">Our Services</a></li>
|
||
<li><span class="menu-number">05</span><a href="#our-team" class="inner-link">Our Team</a></li>
|
||
<li><span class="menu-number">06</span><a href="#blog" class="inner-link">Blog</a></li>
|
||
<li><span class="menu-number">07</span><a href="#contact" class="inner-link">Contact</a></li>
|
||
<li><span class="menu-number">08</span><a href="index.html" class="inner-link">Demos</a></li>
|
||
</ul>
|
||
<div class="separator-line-thick bg-black margin-three pull-left margin-five"></div>
|
||
<div class="col-md-12 col-sm-12 col-xs-12 no-padding">
|
||
<a href="#" class="btn social-icon button"><i class="fa fa-facebook"></i></a>
|
||
<a href="#" class="btn social-icon button"><i class="fa fa-twitter"></i></a>
|
||
<a href="#" class="btn social-icon button"><i class="fa fa-google-plus"></i></a>
|
||
<a href="#" class="btn social-icon button"><i class="fa fa-tumblr"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<button class="close-button" id="close-button">Close Menu</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- end main menu -->
|
||
<button class="menu-button-orange position-absolute navbar-toggle" type="button" id="open-button" data-toggle="collapse" data-target=".navbar-collapse">Open Menu</button>
|
||
</div>
|
||
</div>
|
||
<!-- end navigation panel -->
|
||
</div>
|
||
<!-- end navigation -->
|
||
</nav>
|
||
<!-- slider -->
|
||
<section id="home" class="no-padding">
|
||
<div id="owl-demo" class="owl-carousel owl-theme light-pagination square-pagination dark-pagination-without-next-prev-arrow main-slider">
|
||
<!-- slider item -->
|
||
<div class="item owl-bg-img" style="background-image:url('http://placehold.it/1920x1079');">
|
||
<div class="container full-screen position-relative">
|
||
<div class="slider-typography">
|
||
<div class="slider-text-middle-main">
|
||
<div class="slider-text-middle slider-text-middle6 padding-left-right-px wow fadeInUp">
|
||
<div class="col-md-12 text-left animated fadeInUp no-padding">
|
||
<span class="slider-title-big6 sm-slider-title-big6 xs-width-100 xs-slider-title-big6 xs-text-center orange-light-text font-weight-700 text-decoration-underline display-inline-block margin-eight no-margin-lr no-margin-top">Experiences</span>
|
||
<span class="slider-title-big7 sm-slider-title-big7 xs-width-100 xs-slider-title-big7 xs-text-center">We deliver intelligent full builds for adventurous brands.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- end slider item -->
|
||
<!-- slider item -->
|
||
<div class="item owl-bg-img" style="background-image:url('http://placehold.it/1920x1079');">
|
||
<div class="container full-screen position-relative">
|
||
<div class="slider-typography">
|
||
<div class="slider-text-middle-main">
|
||
<div class="slider-text-middle slider-text-middle6 padding-left-right-px wow fadeInUp">
|
||
<div class="col-md-12 text-left animated fadeInUp no-padding">
|
||
<span class="slider-title-big6 sm-slider-title-big6 xs-width-100 xs-slider-title-big6 xs-text-center orange-light-text font-weight-700 text-decoration-underline display-inline-block margin-eight no-margin-lr no-margin-top">Leadership</span>
|
||
<span class="slider-title-big7 sm-slider-title-big7 xs-width-100 xs-slider-title-big7 xs-text-center">We deliver intelligent full builds for adventurous brands.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- end slider item -->
|
||
<!-- slider item -->
|
||
<div class="item owl-bg-img" style="background-image:url('http://placehold.it/1920x1079');">
|
||
<div class="container full-screen position-relative">
|
||
<div class="slider-typography">
|
||
<div class="slider-text-middle-main">
|
||
<div class="slider-text-middle slider-text-middle6 padding-left-right-px wow fadeInUp">
|
||
<div class="col-md-12 text-left animated fadeInUp no-padding">
|
||
<span class="slider-title-big6 sm-slider-title-big6 xs-width-100 xs-slider-title-big6 xs-text-center orange-light-text font-weight-700 text-decoration-underline display-inline-block margin-eight no-margin-lr no-margin-top">Expertise</span>
|
||
<span class="slider-title-big7 sm-slider-title-big7 xs-width-100 xs-slider-title-big7 xs-text-center">We deliver intelligent full builds for adventurous brands.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- end slider item -->
|
||
</div>
|
||
</section>
|
||
<!-- end slider -->
|
||
<!-- about us section -->
|
||
<section id="short-history" class="short-history position-relative display-table width-100 xs-text-center xs-onepage-section">
|
||
<div class="fill sm-display-none" style="background-image:url('http://placehold.it/1920x704');"></div>
|
||
<div class="col-md-6 pull-right">
|
||
<div class="col-lg-8 col-md-12 sm-no-padding">
|
||
<h1 class="text-transform-none title margin-ten no-margin-lr no-margin-top orange-light-text">Short History<span class="underline-bg bg-light-orange"></span></h1>
|
||
<div class="title-large font-weight-700 margin-four no-margin-lr no-margin-top">Hello.</div>
|
||
<p class="text-extra-large xs-margin-bottom-four">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
|
||
<p class="text-extra-large xs-margin-bottom-four">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
|
||
</div>
|
||
<div class="sub-headline">We love what we do every day</div>
|
||
</div>
|
||
</section>
|
||
<!-- about us section and -->
|
||
<!-- portfolio section -->
|
||
<section id="portfolio" class="grid-wrap work-4col margin-top-section no-margin-top border-top no-padding-bottom xs-onepage-section">
|
||
<div class="container-fluid">
|
||
<div class="row no-padding">
|
||
<!-- section title -->
|
||
<div class="col-lg-6 col-md-5 col-sm-12 text-center">
|
||
<h1 class="text-transform-none title margin-ten no-margin-lr no-margin-top orange-light-text">Portfolio<span class="underline-bg bg-light-orange"></span></h1>
|
||
</div>
|
||
|
||
<div class="col-lg-6 col-md-7 col-sm-12 text-center" >
|
||
<div class="text-center">
|
||
<ul class="portfolio-filter nav nav-tabs nav-tabs-style2 sm-no-margin-top">
|
||
<li class="nav active"><a href="#" data-filter="*">All</a></li>
|
||
<li class="nav"><a href="#" data-filter=".design">Design</a></li>
|
||
<li class="nav"><a href="#" data-filter=".graPhics">GraPhics</a></li>
|
||
<li class="nav"><a href="#" data-filter=".branding">Branding</a></li>
|
||
<li class="nav"><a href="#" data-filter=".photography">Photography</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="grid-gallery overflow-hidden" >
|
||
<div class="tab-content">
|
||
<ul class="masonry-items grid lightbox-gallery">
|
||
<!-- porfilio item -->
|
||
<li class="branding design">
|
||
<figure>
|
||
<div class="gallery-img"><a href="onepage-single-project-page1.html" class="simple-ajax-popup-align-top" title=""><img src="http://placehold.it/800x600" alt=""></a></div>
|
||
<figcaption>
|
||
<h3>Herbal Beauty Salon</h3>
|
||
<p>Ajax popup - Style #1</p>
|
||
</figcaption>
|
||
</figure>
|
||
</li>
|
||
<!-- end porfilio item -->
|
||
<!-- porfilio item -->
|
||
<li class="photography">
|
||
<figure>
|
||
<div class="gallery-img"><a href="onepage-single-project-page2.html" class="simple-ajax-popup-align-top" title=""><img src="http://placehold.it/800x1200" alt=""></a></div>
|
||
<figcaption>
|
||
<h3>Tailoring Interior</h3>
|
||
<p>Ajax popup - Style #2</p>
|
||
</figcaption>
|
||
</figure>
|
||
</li>
|
||
<!-- end porfilio item -->
|
||
<!-- porfilio item -->
|
||
<li class="design graPhics branding">
|
||
<figure>
|
||
<div class="gallery-img"><a href="onepage-single-project-page3.html" class="simple-ajax-popup-align-top" title=""><img src="http://placehold.it/800x600" alt=""></a></div>
|
||
<figcaption>
|
||
<h3>Pixflow Studio</h3>
|
||
<p>Ajax popup - Style #3</p>
|
||
</figcaption>
|
||
</figure>
|
||
</li>
|
||
<!-- end porfilio item -->
|
||
<!-- porfilio item -->
|
||
<li class="photography branding design graPhics">
|
||
<figure>
|
||
<div class="gallery-img"><a href="onepage-single-project-page4.html" class="simple-ajax-popup-align-top" title=""><img src="http://placehold.it/800x600" alt=""></a></div>
|
||
<figcaption>
|
||
<h3>Kaya Skin Care</h3>
|
||
<p>Ajax popup - Style #4</p>
|
||
</figcaption>
|
||
</figure>
|
||
</li>
|
||
<!-- end porfilio item -->
|
||
<!-- porfilio item -->
|
||
<li class=" branding graPhics">
|
||
<figure>
|
||
<div class="gallery-img"><a href="onepage-single-project-page1.html" class="simple-ajax-popup-align-top" title=""><img src="http://placehold.it/800x600" alt=""></a></div>
|
||
<figcaption>
|
||
<h3>Third Eye Glasses</h3>
|
||
<p>Ajax popup - Style #1</p>
|
||
</figcaption>
|
||
</figure>
|
||
</li>
|
||
<!-- end porfilio item -->
|
||
<!-- porfilio item -->
|
||
<li class="photography design ">
|
||
<figure>
|
||
<div class="gallery-img"><a href="onepage-single-project-page2.html" class="simple-ajax-popup-align-top" title=""><img src="http://placehold.it/800x600" alt=""></a></div>
|
||
<figcaption>
|
||
<h3>Rubber Studio</h3>
|
||
<p>Ajax popup - Style #2</p>
|
||
</figcaption>
|
||
</figure>
|
||
</li>
|
||
<!-- end porfilio item -->
|
||
<!-- porfilio item -->
|
||
<li class="photography graPhics">
|
||
<figure>
|
||
<div class="gallery-img"><a href="onepage-single-project-page3.html" class="simple-ajax-popup-align-top" title=""><img src="http://placehold.it/800x600" alt=""></a></div>
|
||
<figcaption>
|
||
<h3>Pixflow Studio</h3>
|
||
<p>Ajax popup - Style #3</p>
|
||
</figcaption>
|
||
</figure>
|
||
</li>
|
||
<!-- end porfilio item -->
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- end portfolio section -->
|
||
<!-- counter section -->
|
||
<section id="counter">
|
||
<div class="container position-relative">
|
||
<div class="row">
|
||
<div class="col-lg-3 col-md-12 md-text-center"><div class="text-extra-large text-transform-uppercase dark-gray-text font-weight-600 counter-subheadline md-margin-four-bottom xs-margin-bottom-three">Some Interesting Facts <span class="orange-light-text md-display-none">/</span></div></div>
|
||
<div class="col-lg-9 col-md-12">
|
||
<!-- counter item -->
|
||
<div class="col-md-3 col-sm-3 col-xs-12 bottom-margin counter-section wow fadeInUp xs-margin-bottom-three xs-text-center" data-wow-duration="300ms">
|
||
<div class="counter-style2">
|
||
<span class="timer counter-number light-gray-text main-font font-weight-700 text-extra-large" data-to="516" data-speed="7000"></span>
|
||
<span class="counter-title light-gray-text font-weight-300 text-extra-large">Awards</span>
|
||
<i class="fa fa-plus orange-light-text xs-display-none"></i>
|
||
</div>
|
||
</div>
|
||
<!-- end counter item -->
|
||
<!-- counter item -->
|
||
<div class="col-md-3 col-sm-3 col-xs-12 bottom-margin text-center counter-section wow fadeInUp xs-margin-bottom-three xs-text-center" data-wow-duration="600ms">
|
||
<div class="counter-style2">
|
||
<span class="timer counter-number light-gray-text main-font font-weight-700 text-extra-large" data-to="315" data-speed="7000"></span>
|
||
<span class="counter-title light-gray-text font-weight-300 text-extra-large">Projects</span>
|
||
<i class="fa fa-plus orange-light-text xs-display-none"></i>
|
||
</div>
|
||
</div>
|
||
<!-- end counter item -->
|
||
<!-- counter item -->
|
||
<div class="col-md-3 col-sm-3 col-xs-12 bottom-margin-small text-center counter-section wow fadeInUp xs-margin-bottom-three xs-text-center" data-wow-duration="900ms">
|
||
<div class="counter-style2">
|
||
<span class="timer counter-number light-gray-text main-font font-weight-700 text-extra-large" data-to="417" data-speed="7000"></span>
|
||
<span class="counter-title light-gray-text font-weight-300 text-extra-large">Cases</span>
|
||
<i class="fa fa-plus orange-light-text xs-display-none"></i>
|
||
</div>
|
||
</div>
|
||
<!-- end counter item -->
|
||
<!-- counter item -->
|
||
<div class="col-md-3 col-sm-3 col-xs-12 text-center counter-section wow fadeInUp xs-text-center sm-no-padding-right" data-wow-duration="1200ms">
|
||
<div class="counter-style2">
|
||
<span class="timer counter-number light-gray-text main-font font-weight-700 text-extra-large" data-to="230" data-speed="7000"></span>
|
||
<span class="counter-title light-gray-text font-weight-300 text-extra-large">Happy Clients</span>
|
||
</div>
|
||
</div>
|
||
<!-- end counter item -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- end counter section -->
|
||
<!-- services section -->
|
||
<section id="our-services" class="our-services no-padding">
|
||
<div class="col-md-6 bg-light-gray padding-five box-min-height sm-display-table xs-display-inherit xs-text-center cover-background xs-onepage-section" style="background-image:url('http://placehold.it/1097x842');">
|
||
<div class="col-lg-9 col-md-12 pull-right xs-no-padding xs-pull-none">
|
||
<h1 class="text-transform-none title margin-ten no-margin-lr no-margin-top orange-light-text">Our Services<span class="underline-bg bg-light-orange"></span></h1>
|
||
<div class="margin-ten no-margin-lr no-margin-top title-large font-weight-300">Branding, design and development created with passion and a close attention to detail.</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 bg-gray-light padding-five no-padding-bottom sm-padding-bottom-six box-min-height sm-display-table">
|
||
<div class="col-lg-11 col-md-12 pull-left xs-no-padding">
|
||
<ul>
|
||
<li class="position-relative font-weight-300 text-extra-large margin-seven-bottom">
|
||
<div class="number orange-light-text">01.</div>
|
||
<div><span class="black-text font-weight-700 text-transform-uppercase display-table margin-two-bottom">Branding</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae odit iste exercitationem praesentium deleniti nostrum laborum rem id nihil tempora.</div>
|
||
</li>
|
||
<li class="position-relative font-weight-300 text-extra-large margin-seven-bottom">
|
||
<div class="number orange-light-text">02.</div>
|
||
<div><span class="black-text font-weight-700 text-transform-uppercase display-table margin-two-bottom">Web Development</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae odit iste exercitationem praesentium deleniti nostrum laborum rem id nihil tempora.</div>
|
||
</li>
|
||
<li class="position-relative font-weight-300 text-extra-large margin-seven-bottom">
|
||
<div class="number orange-light-text">03.</div>
|
||
<div><span class="black-text font-weight-700 text-transform-uppercase display-table margin-two-bottom">Digital Art</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae odit iste exercitationem praesentium deleniti nostrum laborum rem id nihil tempora.</div>
|
||
</li>
|
||
<li class="position-relative font-weight-300 text-extra-large">
|
||
<div class="number orange-light-text">04.</div>
|
||
<div><span class="black-text font-weight-700 text-transform-uppercase display-table margin-two-bottom">Photography</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae odit iste exercitationem praesentium deleniti nostrum laborum rem id nihil tempora.</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- end services section -->
|
||
<section class="border-bottom clear-both xs-text-center">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-12">
|
||
<h1 class="text-transform-none title margin-ten no-margin-lr no-margin-top orange-light-text">Our Process<span class="underline-bg bg-light-orange"></span></h1>
|
||
</div>
|
||
<div class="col-md-12 our-process">
|
||
<div class="col-md-6 no-padding-left margin-five no-margin-top xs-no-padding">
|
||
<div class="icon position-relative xs-no-margin-lr-auto"><img src="images/we-talk.png" alt="">
|
||
<div class="title black-text title-large font-weight-700 display-inline-block vertical-align-middle">We Talk</div></div>
|
||
<p class="text-extra-large width-90">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae odit iste exercitationem praesentiu deleniti nostrum laborum rem id nihil tempora.</p>
|
||
</div>
|
||
<div class="col-md-6 no-padding-left margin-five no-margin-top xs-no-padding">
|
||
<div class="icon position-relative xs-no-margin-lr-auto"><img src="images/we-think.png" alt="">
|
||
<div class="title black-text title-large font-weight-700 display-inline-block vertical-align-middle">We Think</div></div>
|
||
<p class="text-extra-large width-90">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae odit iste exercitationem praesentiu deleniti nostrum laborum rem id nihil tempora.</p>
|
||
</div>
|
||
<div class="col-md-6 no-padding-left xs-margin-bottom-five xs-no-padding">
|
||
<div class="icon position-relative xs-no-margin-lr-auto"><img src="images/we-create.png" alt="">
|
||
<div class="title black-text title-large font-weight-700 display-inline-block vertical-align-middle">We Create</div></div>
|
||
<p class="text-extra-large width-90">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae odit iste exercitationem praesentiu deleniti nostrum laborum rem id nihil tempora.</p>
|
||
</div>
|
||
<div class="col-md-6 no-padding-left xs-no-padding">
|
||
<div class="icon position-relative xs-no-margin-lr-auto"><img src="images/we-deliver.png" alt="">
|
||
<div class="title black-text title-large font-weight-700 display-inline-block vertical-align-middle">We Deliver</div></div>
|
||
<p class="text-extra-large width-90">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae odit iste exercitationem praesentiu deleniti nostrum laborum rem id nihil tempora.</p>
|
||
</div>
|
||
</div>
|
||
</div></div>
|
||
</section>
|
||
<!-- case study section -->
|
||
<section id="our-team" class="our-team-agency no-padding-bottom xs-onepage-section">
|
||
<div class="container-fluid">
|
||
<div class="row">
|
||
<div class="container">
|
||
<div class="row">
|
||
<!-- section title -->
|
||
<div class="col-md-12 margin-five-bottom xs-text-center">
|
||
<div class="col-md-6 no-padding">
|
||
<h1 class="text-transform-none title margin-ten no-margin-lr no-margin-top orange-light-text">Our Team<span class="underline-bg bg-light-orange"></span></h1>
|
||
</div>
|
||
<div class="col-md-6 no-padding">
|
||
<div class="font-weight-300 title-large">8 Art Directors, 6 Developers, 4 Designers, 4 Testers and 3 Copywriters</div>
|
||
</div>
|
||
</div>
|
||
<!-- end section title -->
|
||
</div>
|
||
</div>
|
||
<div id="owl-demo-small" class="owl-carousel owl-theme dark-pagination bottom-arrow-pagination">
|
||
<!-- case study item -->
|
||
<div class="item">
|
||
<div class="col-lg-6 col-md-6 case-study-details bg-gray">
|
||
<div class="col-lg-7 col-md-12 pull-right about-text position-relative xs-text-center">
|
||
<p class="title-small text-uppercase letter-spacing-3 black-text font-weight-600">CEO / Project Manager</p>
|
||
<p class="width-100 xs-width-100">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae odit iste exercitationem praesentiu deleniti nostrum laborum rem id nihil tempora. Lorem ipsum dolor amet, consectetur adipisicing elit. Repudiandae odit iste exercitationem praesentiu deleniti nostrum laborum.</p>
|
||
<div class="our-team-agency-social">
|
||
<!-- social media link -->
|
||
<div><a href="https://www.facebook.com/" target="_blank"><i class="fa fa-facebook"></i></a><span>/</span></div>
|
||
<div><a href="https://twitter.com/" target="_blank"><i class="fa fa-twitter"></i></a><span>/</span></div>
|
||
<div><a href="https://plus.google.com" target="_blank"><i class="fa fa-google-plus"></i></a><span>/</span></div>
|
||
<div><a href="https://dribbble.com/" target="_blank"><i class="fa fa-dribbble"></i></a><span>/</span></div>
|
||
<div><a href="https://www.youtube.com/" target="_blank"><i class="fa fa-youtube"></i></a><span>/</span></div>
|
||
<div><a href="https://www.linkedin.com/" target="_blank"><i class="fa fa-linkedin"></i></a></div>
|
||
<!-- end social media link -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-6 col-md-6 case-study-img cover-background" style="background-image:url('http://placehold.it/960x500');"></div>
|
||
</div>
|
||
<!-- end case study item -->
|
||
<!-- case study item -->
|
||
<div class="item">
|
||
<div class="col-lg-6 col-md-6 case-study-details bg-gray">
|
||
<div class="col-lg-7 col-md-12 pull-right about-text position-relative xs-text-center">
|
||
<p class="title-small text-uppercase letter-spacing-3 black-text font-weight-600">CEO / Project Manager</p>
|
||
<p class="width-100 xs-width-100">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae odit iste exercitationem praesentiu deleniti nostrum laborum rem id nihil tempora. Lorem ipsum dolor amet, consectetur adipisicing elit. Repudiandae odit iste exercitationem praesentiu deleniti nostrum laborum.</p>
|
||
<div class="our-team-agency-social">
|
||
<!-- social media link -->
|
||
<div><a href="https://www.facebook.com/" target="_blank"><i class="fa fa-facebook"></i></a><span>/</span></div>
|
||
<div><a href="https://twitter.com/" target="_blank"><i class="fa fa-twitter"></i></a><span>/</span></div>
|
||
<div><a href="https://plus.google.com" target="_blank"><i class="fa fa-google-plus"></i></a><span>/</span></div>
|
||
<div><a href="https://dribbble.com/" target="_blank"><i class="fa fa-dribbble"></i></a><span>/</span></div>
|
||
<div><a href="https://www.youtube.com/" target="_blank"><i class="fa fa-youtube"></i></a><span>/</span></div>
|
||
<div><a href="https://www.linkedin.com/" target="_blank"><i class="fa fa-linkedin"></i></a></div>
|
||
<!-- end social media link -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-6 col-md-6 case-study-img cover-background" style="background-image:url('http://placehold.it/960x500');"></div>
|
||
</div>
|
||
<!-- end case study item -->
|
||
<!-- case study item -->
|
||
<div class="item">
|
||
<div class="col-lg-6 col-md-6 case-study-details bg-gray">
|
||
<div class="col-lg-7 col-md-12 pull-right about-text position-relative xs-text-center">
|
||
<p class="title-small text-uppercase letter-spacing-3 black-text font-weight-600">CEO / Project Manager</p>
|
||
<p class="width-100 xs-width-100">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae odit iste exercitationem praesentiu deleniti nostrum laborum rem id nihil tempora. Lorem ipsum dolor amet, consectetur adipisicing elit. Repudiandae odit iste exercitationem praesentiu deleniti nostrum laborum.</p>
|
||
<div class="our-team-agency-social">
|
||
<!-- social media link -->
|
||
<div><a href="https://www.facebook.com/" target="_blank"><i class="fa fa-facebook"></i></a><span>/</span></div>
|
||
<div><a href="https://twitter.com/" target="_blank"><i class="fa fa-twitter"></i></a><span>/</span></div>
|
||
<div><a href="https://plus.google.com" target="_blank"><i class="fa fa-google-plus"></i></a><span>/</span></div>
|
||
<div><a href="https://dribbble.com/" target="_blank"><i class="fa fa-dribbble"></i></a><span>/</span></div>
|
||
<div><a href="https://www.youtube.com/" target="_blank"><i class="fa fa-youtube"></i></a><span>/</span></div>
|
||
<div><a href="https://www.linkedin.com/" target="_blank"><i class="fa fa-linkedin"></i></a></div>
|
||
<!-- end social media link -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-6 col-md-6 case-study-img cover-background" style="background-image:url('http://placehold.it/960x500');"></div>
|
||
</div>
|
||
<!-- end case study item -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- end case study section -->
|
||
<!-- blog section -->
|
||
<section id="blog" class="latest-blogs xs-onepage-section">
|
||
<div class="container">
|
||
<div class="row">
|
||
<!-- section title -->
|
||
<div class="col-xs-12 text-center">
|
||
<h1 class="text-transform-none title margin-ten no-margin-lr no-margin-top orange-light-text">Latest blogs<span class="underline-bg bg-light-orange"></span></h1>
|
||
</div>
|
||
<!-- end section title -->
|
||
</div>
|
||
<div class="row">
|
||
<!-- post item -->
|
||
<div class="col-md-4 col-sm-6 col-xs-12 blog-listing margin-three-bottom sm-margin-bottom-four">
|
||
<div class="blog-image"><img src="http://placehold.it/767x767" alt=""/>
|
||
<div class="blog-content xs-text-center">
|
||
<div class="slider-text-middle-main">
|
||
<div class="slider-text-middle">
|
||
<span class="post-author">Colin Powell | 02 January 2015</span>
|
||
<a class="post-title" href="blog-single-full-width-with-image-slider.html">User experience be beautiful?</a>
|
||
<p>Lorem ipsum dolor amet, consectetur adipisicing elit. Repudiandae odit iste exercitationem praesentiu deleniti.</p>
|
||
<div class="like-share"><a href="#" class="text-uppercase"><i class="fa fa-heart-o"></i>Likes</a><a href="#" class="text-uppercase"><i class="fa fa-share-alt"></i>Share</a><a href="#" class="text-uppercase"><i class="fa fa-comment-o"></i>3 comment(s)</a></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- end post item -->
|
||
<!-- post item -->
|
||
<div class="col-md-4 col-sm-6 col-xs-12 blog-listing margin-three-bottom sm-margin-bottom-four">
|
||
<div class="blog-image"><img src="http://placehold.it/767x767" alt=""/>
|
||
<div class="blog-content xs-text-center">
|
||
<div class="slider-text-middle-main">
|
||
<div class="slider-text-middle">
|
||
<span class="post-author">Colin Powell | 02 January 2015</span>
|
||
<a class="post-title" href="blog-single-full-width-with-image-slider.html">User experience be beautiful?</a>
|
||
<p>Lorem ipsum dolor amet, consectetur adipisicing elit. Repudiandae odit iste exercitationem praesentiu deleniti.</p>
|
||
<div class="like-share"><a class="blog-like" href="#"><i class="fa fa-heart-o"></i>Likes</a><a class="blog-share" href="#"><i class="fa fa-share-alt"></i>Share</a><a class="comment" href="#"><i class="fa fa-comment-o"></i>3 comment(s)</a></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- end post item -->
|
||
<!-- post item -->
|
||
<div class="col-md-4 col-sm-6 col-xs-12 blog-listing margin-three-bottom sm-margin-bottom-four">
|
||
<div class="blog-image"><img src="http://placehold.it/767x767" alt=""/>
|
||
<div class="blog-content xs-text-center">
|
||
<div class="slider-text-middle-main">
|
||
<div class="slider-text-middle">
|
||
<span class="post-author">Colin Powell | 02 January 2015</span>
|
||
<a class="post-title" href="blog-single-full-width-with-image-slider.html">User experience be beautiful?</a>
|
||
<p>Lorem ipsum dolor amet, consectetur adipisicing elit. Repudiandae odit iste exercitationem praesentiu deleniti.</p>
|
||
<div class="like-share"><a class="blog-like" href="#"><i class="fa fa-heart-o"></i>Likes</a><a class="blog-share" href="#"><i class="fa fa-share-alt"></i>Share</a><a class="comment" href="#"><i class="fa fa-comment-o"></i>3 comment(s)</a></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- end post item -->
|
||
<!-- post item -->
|
||
<div class="col-md-4 col-sm-6 col-xs-12 blog-listing margin-three-bottom sm-margin-bottom-four">
|
||
<div class="blog-image"><img src="http://placehold.it/767x767" alt=""/>
|
||
<div class="blog-content xs-text-center">
|
||
<div class="slider-text-middle-main">
|
||
<div class="slider-text-middle">
|
||
<span class="post-author">Colin Powell | 02 January 2015</span>
|
||
<a class="post-title" href="blog-single-full-width-with-image-slider.html">User experience be beautiful?</a>
|
||
<p>Lorem ipsum dolor amet, consectetur adipisicing elit. Repudiandae odit iste exercitationem praesentiu deleniti.</p>
|
||
<div class="like-share"><a class="blog-like" href="#"><i class="fa fa-heart-o"></i>Likes</a><a class="blog-share" href="#"><i class="fa fa-share-alt"></i>Share</a><a class="comment" href="#"><i class="fa fa-comment-o"></i>3 comment(s)</a></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- end post item -->
|
||
<!-- post item -->
|
||
<div class="col-md-4 col-sm-6 col-xs-12 blog-listing margin-three-bottom sm-margin-bottom-four">
|
||
<div class="blog-image"><img src="http://placehold.it/767x767" alt=""/>
|
||
<div class="blog-content xs-text-center">
|
||
<div class="slider-text-middle-main">
|
||
<div class="slider-text-middle">
|
||
<span class="post-author">Colin Powell | 02 January 2015</span>
|
||
<a class="post-title" href="blog-single-full-width-with-image-slider.html">User experience be beautiful?</a>
|
||
<p>Lorem ipsum dolor amet, consectetur adipisicing elit. Repudiandae odit iste exercitationem praesentiu deleniti.</p>
|
||
<div class="like-share"><a class="blog-like" href="#"><i class="fa fa-heart-o"></i>Likes</a><a class="blog-share" href="#"><i class="fa fa-share-alt"></i>Share</a><a class="comment" href="#"><i class="fa fa-comment-o"></i>3 comment(s)</a></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- end post item -->
|
||
<!-- post item -->
|
||
<div class="col-md-4 col-sm-6 col-xs-12 blog-listing no-margin-bottom sm-margin-bottom-four">
|
||
<div class="blog-image"><img src="http://placehold.it/767x767" alt=""/>
|
||
<div class="blog-content xs-text-center">
|
||
<div class="slider-text-middle-main">
|
||
<div class="slider-text-middle">
|
||
<span class="post-author">Colin Powell | 02 January 2015</span>
|
||
<a class="post-title" href="blog-single-full-width-with-image-slider.html">User experience be beautiful?</a>
|
||
<p>Lorem ipsum dolor amet, consectetur adipisicing elit. Repudiandae odit iste exercitationem praesentiu deleniti.</p>
|
||
<div class="like-share"><a class="blog-like" href="#"><i class="fa fa-heart-o"></i>Likes</a><a class="blog-share" href="#"><i class="fa fa-share-alt"></i>Share</a><a class="comment" href="#"><i class="fa fa-comment-o"></i>3 comment(s)</a></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- end post item -->
|
||
<div class="row">
|
||
<div class="col-md-12 text-center">
|
||
<a href="blog-grid-3columns.html" class="highlight-button-orange-border btn no-margin-bottom sm-no-margin">View All Blog</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- end blog section -->
|
||
<!-- testimonial section -->
|
||
<section id="testimonial" class="fix-background" style="background-image:url('http://placehold.it/1920x1280');">
|
||
<div class="opacity-full bg-dark-gray"></div>
|
||
<div class="container">
|
||
<div class="col-md-6 text-center center-col position-relative wow fadeIn xs-no-padding">
|
||
<div class="carousel slide jumbotron testimonial" id="slider-content">
|
||
<ol class="carousel-indicators">
|
||
<li data-slide-to="0" data-target="#slider-content" class="active"></li>
|
||
<li data-slide-to="1" data-target="#slider-content" class=""></li>
|
||
<li data-slide-to="2" data-target="#slider-content" class=""></li>
|
||
</ol>
|
||
<div class="carousel-inner">
|
||
<!-- testimonial item -->
|
||
<div class="item active">
|
||
<div class="col-md-11 testimonial-style2 center-col text-center">
|
||
<img src="http://placehold.it/300x300" alt=""/>
|
||
<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, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
|
||
<span class="name font-weight-700">John Carmack - Google</span>
|
||
<i class="fa fa-quote-left small-icon orange-light-text display-block margin-five no-margin-bottom"></i>
|
||
</div>
|
||
</div>
|
||
<!-- end testimonial item -->
|
||
<!-- testimonial item -->
|
||
<div class="item">
|
||
<div class="col-md-11 testimonial-style2 center-col text-center">
|
||
<img src="http://placehold.it/300x300" alt=""/>
|
||
<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, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
|
||
<span class="name font-weight-700">Herman Miller - Facebook</span>
|
||
<i class="fa fa-quote-left small-icon orange-light-text display-block margin-five no-margin-bottom"></i>
|
||
</div>
|
||
</div>
|
||
<!-- end testimonial item -->
|
||
<!-- testimonial item -->
|
||
<div class="item">
|
||
<div class="col-md-11 testimonial-style2 center-col text-center">
|
||
<img src="http://placehold.it/300x300" alt=""/>
|
||
<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, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
|
||
<span class="name font-weight-700">Bryan Johnson - Apple</span>
|
||
<i class="fa fa-quote-left small-icon orange-light-text display-block margin-five no-margin-bottom"></i>
|
||
</div>
|
||
</div>
|
||
<!-- end testimonial item -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- end testimonial section -->
|
||
<!-- contact us section -->
|
||
<section id="contact" class="xs-onepage-section">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-12 text-center no-padding">
|
||
<h1 class="text-transform-none title margin-two no-margin-lr no-margin-top orange-light-text">Contact Us<span class="underline-bg bg-light-orange"></span></h1>
|
||
<h4 class=" margin-ten no-margin-lr no-margin-top font-weight-300 gray-text">We’d love to hear about your project.</h4>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 col-sm-6 bg-gray contact-map contact-map-bottom map" id="canvas1">
|
||
<!-- form -->
|
||
<form id="contactusform" action="javascript:void(0)" method="post">
|
||
<div class="col-md-12 col-sm-12 center-col"><div id="success"></div>
|
||
<div class="col-md-12 col-sm-12 no-padding">
|
||
<input name="name" type="text" placeholder="Your Name" />
|
||
<input name="email" type="text" placeholder="Your Email" />
|
||
</div>
|
||
<div class="col-md-12 col-sm-12 no-padding">
|
||
<textarea name="comment" placeholder="Your Message" ></textarea>
|
||
</div>
|
||
<div class="col-md-12 col-sm-12 no-padding">
|
||
<div class="col-md-12 col-sm-12 no-padding"><span class="required">*Please complete all fields correctly</span></div>
|
||
<div class="col-md-12 col-sm-12 no-padding"><input id="contact-us-button" name="send message" type="button" value="send message" class="btn btn-black no-margin-bottom no-margin-lr"></div>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
<!-- end form -->
|
||
</div>
|
||
<div class="map-contact col-md-6 col-sm-6 bg-light-orange">
|
||
<ul>
|
||
<li>
|
||
<span><i class="fa fa-map-marker"></i></span>
|
||
<strong>Our Studio</strong><br>301 The Greenhouse, Custard Factory, London, e2 8dy.
|
||
</li>
|
||
<li>
|
||
<span><i class="fa fa-envelope"></i></span>
|
||
<strong>General Enquiries</strong><br><a href="mailto:no-reply@domain.com">no-reply@domain.com</a>
|
||
</li>
|
||
<li>
|
||
<span><i class="fa fa-phone"></i></span>
|
||
<strong>call us today!</strong><br>+44 (0) 123 456 7890
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- end contact us section -->
|
||
<!-- footer -->
|
||
<footer class="bg-white border-top">
|
||
<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">
|
||
© 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> |