995 lines
73 KiB
HTML
995 lines
73 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>
|
|
<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="#myCarousel" class="inner-link">Home</a> </li>
|
|
<li><a href="#features" class="inner-link">About</a> </li>
|
|
<li><a href="#animated-tab" class="inner-link">Services</a> </li>
|
|
<li><a href="#portfolio" class="inner-link">Work</a></li>
|
|
<li><a href="#blog" class="inner-link">Blog</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>
|
|
<!--/.nav-collapse -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<!--end of navigation-->
|
|
<!-- Slide -->
|
|
<section id="myCarousel">
|
|
<div class="tp-banner-container">
|
|
<div class="revolution-slider-full" >
|
|
<ul> <!-- SLIDE 1 -->
|
|
<li data-transition="slidevertical" data-slotamount="1" data-masterspeed="1000" data-thumb="http://placehold.it/1920x1080" data-saveperformance="off" data-title="Slide">
|
|
<!-- MAIN IMAGE -->
|
|
<img src="http://placehold.it/1920x1080" alt="fullslide1" data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat">
|
|
<div class="slider-overlay bg-black"></div>
|
|
<!-- LAYERS 1 -->
|
|
<div class="tp-caption light_medium_30_shadowed lfb ltt tp-resizeme"
|
|
data-x="center" data-hoffset="0"
|
|
data-y="center" data-voffset="-50"
|
|
data-speed="600"
|
|
data-start="800"
|
|
data-easing="Power4.easeOut"
|
|
data-splitin="none"
|
|
data-splitout="none"
|
|
data-elementdelay="0.01"
|
|
data-endelementdelay="0.1"
|
|
data-endspeed="500"
|
|
data-endeasing="Power4.easeIn"
|
|
style="z-index: 2; max-width: auto; max-height: auto; white-space: nowrap;">We're a digital agency
|
|
</div>
|
|
<!-- LAYERS 2 -->
|
|
<div class="tp-caption light_heavy_70_shadowed lfb ltt tp-resizeme"
|
|
data-x="center" data-hoffset="0"
|
|
data-y="center" data-voffset="0"
|
|
data-speed="600"
|
|
data-start="900"
|
|
data-easing="Power4.easeOut"
|
|
data-splitin="none"
|
|
data-splitout="none"
|
|
data-elementdelay="0.01"
|
|
data-endelementdelay="0.1"
|
|
data-endspeed="500"
|
|
data-endeasing="Power4.easeIn"
|
|
style="z-index: 3; max-width: auto; max-height: auto; white-space: nowrap;">Power of great ideas
|
|
</div>
|
|
<!-- LAYERS 3 -->
|
|
<div class="tp-caption customin tp-resizeme rs-parallaxlevel-0"
|
|
data-x="center" data-hoffset="0"
|
|
data-y="center" data-voffset="80"
|
|
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
|
|
data-speed="500"
|
|
data-start="1200"
|
|
data-easing="Power3.easeInOut"
|
|
data-splitin="none"
|
|
data-splitout="none"
|
|
data-elementdelay="0.1"
|
|
data-endelementdelay="0.1"
|
|
data-linktoslide="next"
|
|
style="z-index: 4; max-width: auto; max-height: auto; white-space: nowrap;"><a href='#features' class='largeredbtn inner-link'>Go Innovation!</a>
|
|
</div>
|
|
</li>
|
|
<!-- SLIDE 2 -->
|
|
<li data-transition="slidevertical" data-slotamount="1" data-masterspeed="1000" data-thumb="http://placehold.it/1920x1080" data-saveperformance="off" data-title="Slide">
|
|
<!-- MAIN IMAGE -->
|
|
<img src="http://placehold.it/1920x1080" alt="fullslide2" data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat">
|
|
<div class="slider-overlay bg-slider"></div>
|
|
<!-- LAYERS 1 -->
|
|
<div class="tp-caption light_medium_30_shadowed lfb ltt tp-resizeme"
|
|
data-x="center" data-hoffset="0"
|
|
data-y="center" data-voffset="-50"
|
|
data-speed="600"
|
|
data-start="800"
|
|
data-easing="Power4.easeOut"
|
|
data-splitin="none"
|
|
data-splitout="none"
|
|
data-elementdelay="0.01"
|
|
data-endelementdelay="0.1"
|
|
data-endspeed="500"
|
|
data-endeasing="Power4.easeIn"
|
|
style="z-index: 2; max-width: auto; max-height: auto; white-space: nowrap;">Innovative technology
|
|
</div>
|
|
<!-- LAYERS 2 -->
|
|
<div class="tp-caption light_heavy_70_shadowed lfb ltt tp-resizeme"
|
|
data-x="center" data-hoffset="0"
|
|
data-y="center" data-voffset="0"
|
|
data-speed="600"
|
|
data-start="900"
|
|
data-easing="Power4.easeOut"
|
|
data-splitin="none"
|
|
data-splitout="none"
|
|
data-elementdelay="0.01"
|
|
data-endelementdelay="0.1"
|
|
data-endspeed="500"
|
|
data-endeasing="Power4.easeIn"
|
|
style="z-index: 3; max-width: auto; max-height: auto; white-space: nowrap;">Creating beautiful work
|
|
</div>
|
|
<!-- LAYERS 3 -->
|
|
<div class="tp-caption customin tp-resizeme rs-parallaxlevel-0"
|
|
data-x="center" data-hoffset="0"
|
|
data-y="center" data-voffset="80"
|
|
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
|
|
data-speed="500"
|
|
data-start="1200"
|
|
data-easing="Power3.easeInOut"
|
|
data-splitin="none"
|
|
data-splitout="none"
|
|
data-elementdelay="0.1"
|
|
data-endelementdelay="0.1"
|
|
data-linktoslide="next"
|
|
style="z-index: 4; max-width: auto; max-height: auto; white-space: nowrap;"><a href='#portfolio' class='largeredbtn inner-link'>Latest Work</a>
|
|
</div>
|
|
</li>
|
|
<!-- SLIDE 3 -->
|
|
<li data-transition="slidevertical" data-slotamount="1" data-masterspeed="1000" data-thumb="http://placehold.it/1920x1080" data-saveperformance="off" data-title="Slide">
|
|
<!-- MAIN IMAGE -->
|
|
<img src="http://placehold.it/1920x1080" alt="fullslide6" data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat">
|
|
<div class="slider-overlay bg-slider"></div>
|
|
<!-- LAYERS 1 -->
|
|
<div class="tp-caption light_medium_30_shadowed lfb ltt tp-resizeme"
|
|
data-x="center" data-hoffset="0"
|
|
data-y="center" data-voffset="-50"
|
|
data-speed="600"
|
|
data-start="800"
|
|
data-easing="Power4.easeOut"
|
|
data-splitin="none"
|
|
data-splitout="none"
|
|
data-elementdelay="0.01"
|
|
data-endelementdelay="0.1"
|
|
data-endspeed="500"
|
|
data-endeasing="Power4.easeIn"
|
|
style="z-index: 2; max-width: auto; max-height: auto; white-space: nowrap;">Digital communications
|
|
</div>
|
|
<!-- LAYERS 2 -->
|
|
<div class="tp-caption light_heavy_70_shadowed lfb ltt tp-resizeme"
|
|
data-x="center" data-hoffset="0"
|
|
data-y="center" data-voffset="0"
|
|
data-speed="600"
|
|
data-start="900"
|
|
data-easing="Power4.easeOut"
|
|
data-splitin="none"
|
|
data-splitout="none"
|
|
data-elementdelay="0.01"
|
|
data-endelementdelay="0.1"
|
|
data-endspeed="500"
|
|
data-endeasing="Power4.easeIn"
|
|
style="z-index: 3; max-width: auto; max-height: auto; white-space: nowrap;">Changing face of digital
|
|
</div>
|
|
<!-- LAYERS 3 -->
|
|
<div class="tp-caption customin tp-resizeme rs-parallaxlevel-0"
|
|
data-x="center" data-hoffset="0"
|
|
data-y="center" data-voffset="80"
|
|
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
|
|
data-speed="500"
|
|
data-start="1200"
|
|
data-easing="Power3.easeInOut"
|
|
data-splitin="none"
|
|
data-splitout="none"
|
|
data-elementdelay="0.1"
|
|
data-endelementdelay="0.1"
|
|
data-linktoslide="next"
|
|
style="z-index: 4; max-width: auto; max-height: auto; white-space: nowrap;"><a href='contact-us.html' class='largeredbtn'>Contact Now</a>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<div class="tp-bannertimer"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section id="features" class="features animate slow-mo even fadeIn no-padding-bottom xs-onepage-section" data-anim-type="fadeIn" data-anim-delay="200">
|
|
<div class="container">
|
|
<div class="row">
|
|
<!-- section title -->
|
|
<div class="col-md-12 text-center">
|
|
<h3 class="section-title">About H-Code</h3>
|
|
</div>
|
|
<!-- end section title -->
|
|
</div>
|
|
<div class="row">
|
|
<!-- features grid -->
|
|
<!-- features item -->
|
|
<div class="col-md-4 col-sm-4 about-onepage">
|
|
<div class="col-md-3 col-sm-12 border-right about-onepage-number position-relative overflow-hidden sm-no-border-right xs-text-center">
|
|
<span class="about-onepage-number-default fast-yellow-text font-weight-100 position-absolute xs-position-inherit">01</span>
|
|
<span class="about-onepage-number-hover gray-text font-weight-100 position-absolute xs-display-none">01</span>
|
|
</div>
|
|
<div class="col-md-9 col-sm-12 about-onepage-text">
|
|
<div class="about-onepage-text-sub sm-no-margin-left xs-text-center">
|
|
<span class="black-text">We are digital<br>media agency.</span>
|
|
<p class="text-med width-80 no-margin-bottom sm-width-100">Lorem Ipsum is dummy text of the printing and typesetting industry. </p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end features item -->
|
|
<!-- features item -->
|
|
<div class="col-md-4 col-sm-4 about-onepage xs-margin-top-ten">
|
|
<div class="col-md-3 col-sm-12 border-right about-onepage-number position-relative overflow-hidden sm-no-border-right xs-text-center">
|
|
<span class="about-onepage-number-default fast-yellow-text font-weight-100 position-absolute xs-position-inherit">02</span>
|
|
<span class="about-onepage-number-hover gray-text font-weight-100 position-absolute xs-display-none">02</span>
|
|
</div>
|
|
<div class="col-md-9 col-sm-12 about-onepage-text">
|
|
<div class="about-onepage-text-sub sm-no-margin-left xs-text-center">
|
|
<span class="black-text">We work hard<br>and play hard.</span>
|
|
<p class="text-med width-80 no-margin-bottom sm-width-100">Lorem Ipsum is dummy text of the printing and typesetting industry. </p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end features item -->
|
|
<!-- features item -->
|
|
<div class="col-md-4 col-sm-4 about-onepage xs-margin-top-ten">
|
|
<div class="col-md-3 col-sm-12 border-right about-onepage-number position-relative overflow-hidden sm-no-border-right xs-text-center">
|
|
<span class="about-onepage-number-default fast-yellow-text font-weight-100 position-absolute xs-position-inherit">03</span>
|
|
<span class="about-onepage-number-hover gray-text font-weight-100 position-absolute xs-display-none">03</span>
|
|
</div>
|
|
<div class="col-md-9 col-sm-12 about-onepage-text">
|
|
<div class="about-onepage-text-sub sm-no-margin-left xs-text-center">
|
|
<span class="black-text">We are leaders,<br>not followers.</span>
|
|
<p class="text-med width-80 no-margin-bottom sm-width-100">Lorem Ipsum is dummy text of the printing and typesetting industry. </p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end features item -->
|
|
<!-- end features grid -->
|
|
</div>
|
|
<div class="row"><div class="col-md-12 col-sm-12"><div class="wide-separator-line margin-eight no-margin-lr"></div></div></div>
|
|
</div>
|
|
</section>
|
|
<!-- Key Person -->
|
|
<section id="key-person" class="no-padding-top animate slow-mo even fadeIn" data-anim-type="fadeIn" data-anim-delay="200">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-5 center-col text-center">
|
|
<h4 class="gray-text">We are a multi-discipline design studio with an extensive network of the finest talent, allowing us to build the perfect team to respond to your brief. </h4>
|
|
</div>
|
|
</div>
|
|
<div class="row margin-six">
|
|
<div class="col-md-4 col-xs-4 bottom-margin text-center">
|
|
<div class="key-person">
|
|
<div class="key-person-img"><img src="http://placehold.it/500x730" alt=""></div>
|
|
<div class="key-person-details"> <span class="person-name black-text">Sommer Christian</span> <span class="person-post">Founder and CEO</span>
|
|
<div class="separator-line bg-yellow"></div>
|
|
<div class="person-social"><a href="#"><i class="fa fa-facebook"></i></a><a href="#"><i class="fa fa-twitter"></i></a><a href="#"><i class="fa fa-google-plus"></i></a></div>
|
|
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 col-xs-4 bottom-margin text-center">
|
|
<div class="key-person">
|
|
<div class="key-person-img"><img src="http://placehold.it/500x730" alt=""></div>
|
|
<div class="key-person-details"> <span class="person-name black-text">Sara smith</span> <span class="person-post">Creative Studio Head</span>
|
|
<div class="separator-line bg-yellow"></div>
|
|
<div class="person-social"><a href="#"><i class="fa fa-facebook"></i></a><a href="#"><i class="fa fa-twitter"></i></a><a href="#"><i class="fa fa-google-plus"></i></a></div>
|
|
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 col-xs-4 text-center">
|
|
<div class="key-person">
|
|
<div class="key-person-img"><img src="http://placehold.it/500x730" alt=""></div>
|
|
<div class="key-person-details"> <span class="person-name black-text">Jane Lupkin</span> <span class="person-post">Magento Developer</span>
|
|
<div class="separator-line bg-yellow"></div>
|
|
<div class="person-social"><a href="#"><i class="fa fa-facebook"></i></a><a href="#"><i class="fa fa-twitter"></i></a><a href="#"><i class="fa fa-google-plus"></i></a></div>
|
|
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="new-project" class="new-project no-padding-top">
|
|
<div class="container">
|
|
<div class="row center-col text-center">
|
|
<h5>We'd love to hear about your project.</h5>
|
|
<a href="#contact-us" class="btn highlight-button-black-border margin-four no-margin-bottom inner-link">Start Now</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="approach" class="approach bg-black">
|
|
<div id="myCarousel3" class="carousel slide carousel-slide">
|
|
<!-- Wrapper for Slides -->
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-12 text-center">
|
|
<h3 class="section-title white-text no-padding-bottom">What we do</h3>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-inner margin-seven no-margin-bottom">
|
|
<div class="item active">
|
|
<div class="row">
|
|
<div class="col-md-3 col-sm-6 text-center margin-four no-margin-top"> <i class="icon-camera medium-icon white-text"></i><h5 class="white-text margin-ten no-margin-bottom">Considered Design</h5><span class="approach-details">We respond directly to a<br>project's objectives.</span></div>
|
|
<div class="col-md-3 col-sm-6 text-center margin-four no-margin-top"> <i class="icon-target medium-icon white-text"></i><h5 class="white-text margin-ten no-margin-bottom">Creative Collaboration</h5><span class="approach-details">We love working with people<br>who embrace the design.</span></div>
|
|
<div class="col-md-3 col-sm-6 text-center margin-four no-margin-top"> <i class="icon-megaphone medium-icon white-text"></i><h5 class="white-text margin-ten no-margin-bottom">Impeccable Service</h5><span class="approach-details">Great service is achieved<br>through professionalism.</span></div>
|
|
<div class="col-md-3 col-sm-6 text-center margin-four no-margin-top"> <i class="icon-envelope medium-icon white-text"></i><h5 class="white-text margin-ten no-margin-bottom">Enhance. Amplify</h5><span class="approach-details">Working with the latest<br>technology we design.</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="row">
|
|
<div class="col-md-3 col-sm-6 text-center margin-four no-margin-top"><i class="icon-laptop medium-icon white-text"></i><h5 class="white-text margin-ten no-margin-bottom">Considered Design</h5><span class="approach-details">We respond directly to a<br>project's objectives.</span></div>
|
|
<div class="col-md-3 col-sm-6 text-center margin-four no-margin-top"><i class="icon-tools medium-icon white-text"></i><h5 class="white-text margin-ten no-margin-bottom">Creative Collaboration</h5><span class="approach-details">We love working with people<br>who embrace the design.</span></div>
|
|
<div class="col-md-3 col-sm-6 text-center margin-four no-margin-top"><i class="icon-hotairballoon medium-icon white-text"></i><h5 class="white-text margin-ten no-margin-bottom">Impeccable Service</h5><span class="approach-details">Great service is achieved<br>through professionalism.</span></div>
|
|
<div class="col-md-3 col-sm-6 text-center margin-four no-margin-top"> <i class="icon-map medium-icon white-text"></i><h5 class="white-text margin-ten no-margin-bottom">Understand situation</h5><span class="approach-details">Working with the latest<br>technology we design.</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Controls -->
|
|
<a class="left carousel-control" href="#myCarousel3" data-slide="prev"> <img src="images/arrow-pre.png" alt=""/> </a> <a class="right carousel-control" href="#myCarousel3" data-slide="next"> <img src="images/arrow-next.png" alt=""/> </a>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="animated-tab" class="xs-onepage-section">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-12 text-center">
|
|
<h3 class="section-title">Services</h3>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="container">
|
|
<div class="col-md-12 text-center center-col no-padding">
|
|
<!-- Tab nav -->
|
|
<ul class="nav nav-tabs">
|
|
<li class="nav active"><a href="#testimonials1" data-toggle="tab"><span><i class="icon-tools"></i></span></a></li>
|
|
<li class="nav"><a href="#testimonials2" data-toggle="tab"><span><i class="icon-laptop"></i></span></a></li>
|
|
<li class="nav"><a href="#testimonials3" data-toggle="tab"><span><i class="icon-target"></i></span></a></li>
|
|
<li class="nav"><a href="#testimonials4" data-toggle="tab"><span><i class="icon-camera"></i></span></a></li>
|
|
<li class="nav"><a href="#testimonials5" data-toggle="tab"><span><i class="icon-hotairballoon"></i></span></a></li>
|
|
</ul>
|
|
<!-- Tab panes -->
|
|
<div class="tab-content">
|
|
<div id="testimonials1" class="col-md-9 col-sm-12 text-center center-col tab-pane fade in active">
|
|
<div class="tab-pane fade in">
|
|
<div class="row">
|
|
<div class="col-md-6 col-sm-12 text-left gray-text">
|
|
<h5>Graphic Design</h5>
|
|
<div class="separator-line bg-yellow no-margin-lr"></div>
|
|
<p class="text-large margin-five margin-right-ten">We believe in the power of design, the strength of strategy, and the ability of technology to transform businesses and lives.</p>
|
|
</div>
|
|
<div class="col-md-6 col-sm-12 text-left text-med gray-text">
|
|
<p class="text-uppercase">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
|
|
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the standard dummy text. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="wide-separator-line"></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-12 col-sm-12 text-center service-year black-text">
|
|
<strong>1999 to 2014</strong> - Graphic Design Experience
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="wide-separator-line"></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-4 col-sm-4 bottom-margin text-center counter-section"><span class="counter-number">312</span> <span class="counter-title">Brochure Design</span> </div>
|
|
<div class="col-md-4 col-sm-4 bottom-margin text-center counter-section"><span class="counter-number">780</span> <span class="counter-title">Packaging Design</span> </div>
|
|
<div class="col-md-4 col-sm-4 bottom-margin text-center counter-section"><span class="counter-number">880</span> <span class="counter-title">Poster Design</span> </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="testimonials2" class="col-md-9 col-sm-12 text-center center-col tab-pane fade in">
|
|
<div class="tab-pane fade in">
|
|
<div class="row">
|
|
<div class="col-md-6 col-sm-12 text-left gray-text">
|
|
<h5>Web Design</h5>
|
|
<div class="separator-line bg-yellow no-margin-lr"></div>
|
|
<p class="text-large margin-five margin-right-ten">Every website we design is bespoke, fuelled with years of industry experience. Proudly designed in the World.</p>
|
|
</div>
|
|
<div class="col-md-6 col-sm-12 text-left text-med gray-text">
|
|
<p class="text-uppercase">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
|
|
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the standard dummy text. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="wide-separator-line"></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-12 col-sm-12 text-center service-year black-text">
|
|
<strong>1995 to 2014</strong> - Web Design Experience
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="wide-separator-line"></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-4 col-sm-4 bottom-margin text-center counter-section"><span class="counter-number">742</span> <span class="counter-title">Web Design</span> </div>
|
|
<div class="col-md-4 col-sm-4 bottom-margin text-center counter-section"><span class="counter-number">420</span> <span class="counter-title">UI Design</span> </div>
|
|
<div class="col-md-4 col-sm-4 bottom-margin text-center counter-section"><span class="counter-number">980</span> <span class="counter-title">Convert HTML</span> </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="testimonials3" class="col-md-9 col-sm-12 text-center center-col tab-pane fade in">
|
|
<div class="tab-pane fade in">
|
|
<div class="row">
|
|
<div class="col-md-6 col-sm-12 text-left gray-text">
|
|
<h5>Branding</h5>
|
|
<div class="separator-line bg-yellow no-margin-lr"></div>
|
|
<p class="text-large margin-five margin-right-ten">We create meaningful experiences through innovation in storytelling, technology, entertainment and products.</p>
|
|
</div>
|
|
<div class="col-md-6 col-sm-12 text-left text-med gray-text">
|
|
<p class="text-uppercase">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
|
|
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the standard dummy text. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="wide-separator-line"></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-12 col-sm-12 text-center service-year black-text">
|
|
<strong>1997 to 2014</strong> - Branding
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="wide-separator-line"></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-4 col-sm-4 bottom-margin text-center counter-section"><span class="counter-number">582</span> <span class="counter-title">Visual brand identity</span> </div>
|
|
<div class="col-md-4 col-sm-4 bottom-margin text-center counter-section"><span class="counter-number">700</span> <span class="counter-title">Individual branding</span> </div>
|
|
<div class="col-md-4 col-sm-4 bottom-margin text-center counter-section"><span class="counter-number">350</span> <span class="counter-title">Social media brands</span> </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="testimonials4" class="col-md-9 col-sm-12 text-center center-col tab-pane fade in">
|
|
<div class="tab-pane fade in">
|
|
<div class="row">
|
|
<div class="col-md-6 col-sm-12 text-left gray-text">
|
|
<h5>Photography</h5>
|
|
<div class="separator-line bg-yellow no-margin-lr"></div>
|
|
<p class="text-large margin-five margin-right-ten">A first impression can make or break you. we can help you find the precise message to clearly.</p>
|
|
</div>
|
|
<div class="col-md-6 col-sm-12 text-left text-med gray-text">
|
|
<p class="text-uppercase">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
|
|
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the standard dummy text. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="wide-separator-line"></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-12 col-sm-12 text-center service-year black-text">
|
|
<strong>1999 to 2014</strong> - Photography
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="wide-separator-line"></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-4 col-sm-4 bottom-margin text-center counter-section"><span class="counter-number">402</span> <span class="counter-title">Fashion Photography</span> </div>
|
|
<div class="col-md-4 col-sm-4 bottom-margin text-center counter-section"><span class="counter-number">780</span> <span class="counter-title">AD Photography</span> </div>
|
|
<div class="col-md-4 col-sm-4 bottom-margin text-center counter-section"><span class="counter-number">250</span> <span class="counter-title">Portrait Photography</span> </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="testimonials5" class="col-md-9 col-sm-12 text-center center-col tab-pane fade in">
|
|
<div class="tab-pane fade in">
|
|
<div class="row">
|
|
<div class="col-md-6 col-sm-12 text-left gray-text">
|
|
<h5>Social Marketing</h5>
|
|
<div class="separator-line bg-yellow no-margin-lr"></div>
|
|
<p class="text-large margin-five margin-right-ten">We believe in the power of design, the strength of strategy, and the ability of technology to transform businesses and lives.</p>
|
|
</div>
|
|
<div class="col-md-6 col-sm-12 text-left text-med gray-text">
|
|
<p class="text-uppercase">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
|
|
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the standard dummy text. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="wide-separator-line"></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-12 col-sm-12 text-center service-year black-text">
|
|
<strong>2000 to 2014</strong> - Social Marketing
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="wide-separator-line"></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-4 col-sm-4 bottom-margin text-center counter-section"><span class="counter-number">658</span> <span class="counter-title">Facebook marketing</span> </div>
|
|
<div class="col-md-4 col-sm-4 bottom-margin text-center counter-section"><span class="counter-number">380</span> <span class="counter-title">Youtube marketing</span> </div>
|
|
<div class="col-md-4 col-sm-4 bottom-margin text-center counter-section"><span class="counter-number">980</span> <span class="counter-title">Google Adsense</span> </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="piechart" class="bg-black">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-10 text-center center-col">
|
|
<div class="col-md-3 col-sm-3">
|
|
<div class="chart-percent"><span class="chart white-text" data-percent="75"><span class="percent"></span> </span></div>
|
|
<div class="chart-text">
|
|
<h5 class="white-text">Graphic Design</h5>
|
|
<p>Expert, 7 years</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3 col-sm-3">
|
|
<div class="chart-percent"><span class="chart white-text" data-percent="88"><span class="percent"></span></span></div>
|
|
<div class="chart-text">
|
|
<h5 class="white-text">Web Design</h5>
|
|
<p>Expert, 9 years</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3 col-sm-3">
|
|
<div class="chart-percent"><span class="chart white-text" data-percent="90"><span class="percent"></span> </span></div>
|
|
<div class="chart-text">
|
|
<h5 class="white-text">Branding</h5>
|
|
<p>Expert, 5 years</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3 col-sm-3">
|
|
<div class="chart-percent"><span class="chart white-text" data-percent="96"><span class="percent"></span> </span></div>
|
|
<div class="chart-text">
|
|
<h5 class="white-text">Photography</h5>
|
|
<p>Expert, 4 years</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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">
|
|
<div class="col-md-12 text-center">
|
|
<h3 class="section-title no-padding-bottom">Work</h3>
|
|
</div>
|
|
<div class="col-md-3 margin-three center-col text-center">
|
|
<h4 class="gray-text">We are technology leaders and have crafted intuitive and lasting online and mobile experiences for hundreds of associations and non-profits.</h4>
|
|
</div>
|
|
<!-- ./ Heading div-->
|
|
<div class="col-md-12 text-center" >
|
|
<div class="text-center">
|
|
<ul class="portfolio-filter nav nav-tabs">
|
|
<li class="nav active"><a href="#" data-filter="*">All</a></li>
|
|
<li class="nav"><a href="#" data-filter=".magento">Magento</a></li>
|
|
<li class="nav"><a href="#" data-filter=".jquery">Jquery</a></li>
|
|
<li class="nav"><a href="#" data-filter=".wordpress">Wordpress</a></li>
|
|
<li class="nav"><a href="#" data-filter=".html">HTML</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- ./ Filter Head div-->
|
|
<div class="grid-gallery overflow-hidden" >
|
|
<div class="tab-content">
|
|
<ul class="masonry-items grid">
|
|
<li class="html jquery">
|
|
<figure>
|
|
<div class="gallery-img"><a href="onepage-single-project-page1.html" class="simple-ajax-popup-align-top"><img src="http://placehold.it/800x600" alt=""></a></div>
|
|
<figcaption>
|
|
<h3><a href="onepage-single-project-page1.html" class="simple-ajax-popup-align-top">Herbal Beauty Salon</a></h3>
|
|
<p>Ajax popup - Style #1</p>
|
|
</figcaption>
|
|
</figure>
|
|
</li>
|
|
<li class="html magento wordpress">
|
|
<figure>
|
|
<div class="gallery-img"><a href="onepage-single-project-page2.html" class="simple-ajax-popup-align-top"><img src="http://placehold.it/800x1200" alt=""></a></div>
|
|
<figcaption>
|
|
<h3><a href="onepage-single-project-page2.html" class="simple-ajax-popup-align-top">Tailoring Interior </a></h3>
|
|
<p>Ajax popup - Style #2</p>
|
|
</figcaption>
|
|
</figure>
|
|
</li>
|
|
<li class="jquery magento lightbox-gallery">
|
|
<figure>
|
|
<div class="gallery-img"><a href="http://placehold.it/1200x800" title=""><img src="http://placehold.it/800x600" alt=""></a>
|
|
<a href="http://placehold.it/1200x800" title=""></a>
|
|
<a href="http://placehold.it/1200x800" title=""></a>
|
|
</div>
|
|
<figcaption>
|
|
<h3>Pixflow Studio</h3>
|
|
<p>Lightbox gallery</p>
|
|
</figcaption>
|
|
</figure>
|
|
</li>
|
|
<li class="wordpress jquery magento">
|
|
<figure>
|
|
<div class="gallery-img"><a href="onepage-single-project-page3.html" class="simple-ajax-popup-align-top"><img src="http://placehold.it/800x1200" alt=""></a></div>
|
|
<figcaption>
|
|
<h3><a href="onepage-single-project-page3.html" class="simple-ajax-popup-align-top">Kaya Skin Care</a></h3>
|
|
<p>Ajax popup - Style #3</p>
|
|
</figcaption>
|
|
</figure>
|
|
</li>
|
|
<li class="html wordpress">
|
|
<figure>
|
|
<div class="gallery-img"><a href="onepage-single-project-page4.html" class="simple-ajax-popup-align-top"><img src="http://placehold.it/800x600" alt=""></a></div>
|
|
<figcaption>
|
|
<h3><a href="onepage-single-project-page5.html" class="simple-ajax-popup-align-top">Third Eye Glasses</a></h3>
|
|
<p>Ajax popup - Style #4</p>
|
|
</figcaption>
|
|
</figure>
|
|
</li>
|
|
<li class="html wordpress magento jquery">
|
|
<figure>
|
|
<div class="gallery-img"><a href="onepage-single-project-page5.html" class="simple-ajax-popup-align-top"><img src="http://placehold.it/800x600" alt=""></a></div>
|
|
<figcaption>
|
|
<h3><a href="onepage-single-project-page1.html" class="simple-ajax-popup-align-top">Rubber Studio</a></h3>
|
|
<p>Ajax popup - Style #5</p>
|
|
</figcaption>
|
|
</figure>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="work-process" class="work-process wow fadeIn">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-3 col-sm-6 col-xs-12 text-center work-process-sub position-relative overflow-hidden sm-margin-bottom-eight wow fadeIn">
|
|
<div class="work-process-text">
|
|
<span class="work-process-number font-weight-100 display-block">01</span>
|
|
<span class="text-uppercase letter-spacing-2 font-weight-600 black-text">Strategy</span>
|
|
<div class="separator-line-thick bg-mid-gray margin-three"></div>
|
|
</div>
|
|
<div class="work-process-details position-absolute display-block">
|
|
<i class="icon-chat medium-icon fast-yellow-text display-block"></i>
|
|
<span class="text-small text-uppercase">Lorem Ipsum is simply dummy text<br> of the printing and typesetting.</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3 col-sm-6 col-xs-12 text-center work-process-sub position-relative overflow-hidden sm-margin-bottom-eight wow fadeIn">
|
|
<div class="work-process-text">
|
|
<span class="work-process-number font-weight-100 display-block">02</span>
|
|
<span class="text-uppercase letter-spacing-2 font-weight-600 black-text">Planning</span>
|
|
<div class="separator-line-thick bg-mid-gray margin-three"></div>
|
|
</div>
|
|
<div class="work-process-details position-absolute display-block">
|
|
<i class="icon-toolbox medium-icon fast-yellow-text display-block"></i>
|
|
<span class="text-small text-uppercase">Lorem Ipsum is simply dummy text<br> of the printing and typesetting.</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3 col-sm-6 col-xs-12 text-center work-process-sub position-relative overflow-hidden wow fadeIn">
|
|
<div class="work-process-text">
|
|
<span class="work-process-number font-weight-100 display-block">03</span>
|
|
<span class="text-uppercase letter-spacing-2 font-weight-600 black-text">Development</span>
|
|
<div class="separator-line-thick bg-mid-gray margin-three"></div>
|
|
</div>
|
|
<div class="work-process-details position-absolute display-block">
|
|
<i class="icon-desktop medium-icon fast-yellow-text display-block"></i>
|
|
<span class="text-small text-uppercase">Lorem Ipsum is simply dummy text<br> of the printing and typesetting.</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3 col-sm-6 col-xs-12 text-center work-process-sub position-relative overflow-hidden wow fadeIn">
|
|
<div class="work-process-text">
|
|
<span class="work-process-number font-weight-100 display-block">04</span>
|
|
<span class="text-uppercase letter-spacing-2 font-weight-600 black-text">Launch</span>
|
|
<div class="separator-line-thick bg-mid-gray margin-three"></div>
|
|
</div>
|
|
<div class="work-process-details position-absolute display-block">
|
|
<i class="icon-hotairballoon medium-icon fast-yellow-text display-block"></i>
|
|
<span class="text-small text-uppercase">Lorem Ipsum is simply dummy text<br> of the printing and typesetting.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="testimonial" class="bg-black dark-section">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-12 text-center">
|
|
<h3 class="section-title white-text no-padding-bottom">Testimonials</h3>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 text-center center-col">
|
|
<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>
|
|
<li data-slide-to="3" data-target="#slider-content" class=""></li>
|
|
</ol>
|
|
<div class="carousel-inner">
|
|
<div class="item active">
|
|
<p>Focused, hard work is the real key to success. Keep your eyes on the goal, and just keep taking the next step towards completing it. If you aren't sure which way to do something, do it both ways and see which works better.</p>
|
|
<span class="name">John Carmack - Google Inc</span></div>
|
|
<div class="item">
|
|
<p>All life demands struggle. Those who have everything given to them become lazy, selfish, and insensitive to the real values of life. The very striving and hard work that we so constantly try to avoid is the major building.</p>
|
|
<span class="name">Calvin Coolidge - ThemeForest</span></div>
|
|
<div class="item">
|
|
<p>What is success? I think it is a mixture of having a flair for the thing that you are doing; knowing that it is not enough, that you have got to have hard work and a certain sense of purpose.</p>
|
|
<span class="name">Margaret Thatcher - Marketplaces</span></div>
|
|
<div class="item">
|
|
<p>All life demands struggle. Those who have everything given to them become lazy, selfish, and insensitive to the real values of life. The very striving and hard work that we so constantly try to avoid is the major.</p>
|
|
<span class="name">Pope Paul - AppStorm</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="blog" class="xs-onepage-section">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-12 text-center">
|
|
<h3 class="section-title">Latest Blogs</h3>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-4 col-sm-4">
|
|
<div class="blog-post">
|
|
<div class="blog-post-images"><a href="blog-single-full-width.html"><img src="http://placehold.it/800x500" alt=""></a></div>
|
|
<div class="post-details">
|
|
<a href="blog-single-full-width.html" class="post-title">Standard post with picture</a>
|
|
<span class="post-author">Posted by <a href="blog-grid-full-width.html">Michael Freemon</a> | 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>
|
|
<div class="col-md-4 col-sm-4">
|
|
<div class="blog-post">
|
|
<div class="blog-post-images"><a href="blog-single-full-width.html"><img src="http://placehold.it/800x500" alt=""></a></div>
|
|
<div class="post-details">
|
|
<a href="blog-single-full-width.html" class="post-title">Post with featured picture</a>
|
|
<span class="post-author">Posted by <a href="blog-grid-full-width.html">Colin Powell</a> | 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>
|
|
<div class="col-md-4 col-sm-4">
|
|
<div class="blog-post">
|
|
<div class="blog-post-images"><a href="blog-single-full-width.html"><img src="http://placehold.it/800x500" alt=""></a></div>
|
|
<div class="post-details">
|
|
<a href="blog-single-full-width.html" class="post-title">Standard post with slider</a>
|
|
<span class="post-author">Posted by <a href="blog-grid-full-width.html">Vince Lombardi</a> | 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>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-12 text-center">
|
|
<a href="blog-grid-full-width.html" class="btn btn-black btn-small margin-four no-margin-bottom">View All Blog</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="clients" class="client-logos bg-black">
|
|
<div class="container">
|
|
<div data-os-animation="bounceIn" class="row os-animation animated bounceIn">
|
|
<div class="clients-slider text-center">
|
|
<ul class="slides">
|
|
<li><img src="http://placehold.it/350x89" alt="Client Logo"></li>
|
|
<li><img src="http://placehold.it/350x89" alt="Client Logo"></li>
|
|
<li><img src="http://placehold.it/350x89" alt="Client Logo"></li>
|
|
<li><img src="http://placehold.it/350x89" alt="Client Logo"></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="contact-us" class="xs-onepage-section">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-12 text-center no-padding">
|
|
<h3 class="section-title">Contact Us</h3>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<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 href="mailto:no-reply@domain.com" class="black-text">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>
|
|
|
|
<!-- Counter -->
|
|
<section id="counter" class="parallax10 parallax-fix" >
|
|
<img class="parallax-background-img" src="http://placehold.it/1902x974" alt="" />
|
|
<div class="slider-overlay bg-slider"></div>
|
|
<div class="container">
|
|
<div class="row">
|
|
<!-- counter item -->
|
|
<div class="col-md-3 col-sm-6 bottom-margin text-center counter-section sm-margin-bottom-ten"> <i class="icon-heart medium-icon"></i> <span class="timer counter-number white-text" data-to="654" data-speed="7000"></span> <span class="counter-title gray-text">Pizzas Ordered</span> </div>
|
|
<!-- end counter item -->
|
|
<!-- counter item -->
|
|
<div class="col-md-3 col-sm-6 bottom-margin text-center counter-section sm-margin-bottom-ten"> <i class="icon-happy medium-icon"></i> <span class="timer counter-number white-text" data-to="741" data-speed="7000"></span> <span class="counter-title gray-text">Happy Clients</span> </div>
|
|
<!-- end counter item -->
|
|
<!-- counter item -->
|
|
<div class="col-md-3 col-sm-6 bottom-margin-small text-center counter-section xs-margin-bottom-ten"> <i class="icon-anchor medium-icon"></i> <span class="timer counter-number white-text" data-to="842" data-speed="7000"></span> <span class="counter-title gray-text">Projects Completed</span> </div>
|
|
<!-- end counter item -->
|
|
<!-- counter item -->
|
|
<div class="col-md-3 col-sm-6 text-center counter-section xs-margin-bottom-ten"> <i class="icon-chat medium-icon"></i> <span class="timer counter-number white-text" data-to="642" data-speed="7000"></span> <span class="counter-title gray-text">Comments Reserved</span> </div>
|
|
<!-- end counter item -->
|
|
</div>
|
|
</div>
|
|
</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">
|
|
© 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>
|