787 lines
51 KiB
HTML
787 lines
51 KiB
HTML
<!doctype html>
|
|
<html class="no-js" lang="en">
|
|
<head>
|
|
<title>H-Code | Responsive & Multi-Purpose One/Multi Page Template</title>
|
|
<meta name="description" content="H-Code - A premium portfolio template from ThemeZaa">
|
|
<meta name="keywords" content="">
|
|
<meta charset="utf-8">
|
|
<meta name="author" content="ThemeZaa">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1" />
|
|
<!-- favicon -->
|
|
<link rel="shortcut icon" href="images/favicon.png">
|
|
<link rel="apple-touch-icon" href="images/apple-touch-icon-57x57.png">
|
|
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
|
|
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
|
|
<!-- animation -->
|
|
<link rel="stylesheet" href="css/animate.css" />
|
|
<!-- bootstrap -->
|
|
<link rel="stylesheet" href="css/bootstrap.css" />
|
|
<!-- et line icon -->
|
|
<link rel="stylesheet" href="css/et-line-icons.css" />
|
|
<!-- font-awesome icon -->
|
|
<link rel="stylesheet" href="css/font-awesome.min.css" />
|
|
<!-- revolution slider -->
|
|
<link rel="stylesheet" href="css/extralayers.css" />
|
|
<link rel="stylesheet" href="css/settings.css" />
|
|
<!-- magnific popup -->
|
|
<link rel="stylesheet" href="css/magnific-popup.css" />
|
|
<!-- owl carousel -->
|
|
<link rel="stylesheet" href="css/owl.carousel.css" />
|
|
<link rel="stylesheet" href="css/owl.transitions.css" />
|
|
<link rel="stylesheet" href="css/full-slider.css" />
|
|
<!-- text animation -->
|
|
<link rel="stylesheet" href="css/text-effect.css" />
|
|
<!-- hamburger menu -->
|
|
<link rel="stylesheet" href="css/menu-hamburger.css" />
|
|
<!-- common -->
|
|
<link rel="stylesheet" href="css/style.css" />
|
|
<!-- responsive -->
|
|
<link rel="stylesheet" href="css/responsive.css" />
|
|
<!--[if IE]>
|
|
<link rel="stylesheet" href="css/style-ie.css" />
|
|
<![endif]-->
|
|
<!--[if IE]>
|
|
<script src="js/html5shiv.js"></script>
|
|
<![endif]-->
|
|
</head>
|
|
|
|
<body>
|
|
<!-- navigation -->
|
|
<nav class="navbar navbar-default navbar-fixed-top nav-transparent overlay-nav sticky-nav nav-white nav-dark 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/homepage-fashion-logo.png" class="logo" /></a><a class="logo-dark" href="index.html"><img alt="" src="images/logo-white.png" class="logo" /></a></div>
|
|
<div class="navbar-header">
|
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
|
|
</div>
|
|
<div class="col-md-9 text-right">
|
|
<div class="navbar-collapse collapse">
|
|
<ul class="nav navbar-nav navbar-right">
|
|
<li><a href="#slider" class="inner-link">Home</a> </li>
|
|
<li><a href="#features" class="inner-link">About</a> </li>
|
|
<li><a href="#model" class="inner-link">Models</a> </li>
|
|
<li><a href="#key-person" class="inner-link">Team</a></li>
|
|
<li><a href="#portfolio" class="inner-link">Photoshots</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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<!--end of navigation -->
|
|
<!-- slider -->
|
|
<section id="slider" class="no-padding bg-white fashion-slider position-relative overflow-hidden">
|
|
<div class="background-slider-text">
|
|
<div class="container full-screen position-relative">
|
|
<div class="slider-typography">
|
|
|
|
<div class="slider-text-middle-main pull-right padding-left-right">
|
|
<div class="slider-text-bottom slider-text-middle5 text-left no-padding">
|
|
<span class="slider-title-big5 white-text margin-eleven">Elegant. Vintage. Classic A Fashion Brand For Men And Women</span>
|
|
<div class="separator-line bg-white no-margin-lr no-margin-top margin-eleven"></div>
|
|
</div>
|
|
</div>
|
|
<div class="pull-right xs-display-none"><img src="images/homepage-fashion-modeling.png" alt=""></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="owl-demo-background" class="owl-carousel owl-theme">
|
|
<!-- slider item -->
|
|
<div class="item owl-bg-img full-screen" style="background-image:url('http://placehold.it/1920x1003');"></div>
|
|
<!-- end slider item -->
|
|
<!-- slider item -->
|
|
<div class="item owl-bg-img full-screen" style="background-image:url('http://placehold.it/1920x1003');"></div>
|
|
<!-- end slider item -->
|
|
<!-- slider item -->
|
|
<div class="item owl-bg-img full-screen" style="background-image:url('http://placehold.it/1920x1003');"></div>
|
|
<!-- end slider item -->
|
|
</div>
|
|
</section>
|
|
<!-- end slider -->
|
|
<section id="features" class="bg-black fashion-about features xs-onepage-section">
|
|
<div class="container">
|
|
<div class="row">
|
|
<!-- section title -->
|
|
<div class="col-md-12 text-center">
|
|
<h3 class="section-title no-padding-bottom fashion-text">About</h3>
|
|
</div>
|
|
<!-- end section title -->
|
|
<div class="col-md-5 center-col text-center margin-six">
|
|
<h4 class="gray-text">Lorem Ipsum is simply dummy text of the printing & typesetting industry. Lorem Ipsum has been the industry's standard dummy </h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- about section -->
|
|
<section class="parallax1 parallax-fix" >
|
|
<img class="parallax-background-img" src="http://placehold.it/1920x1250" alt="" />
|
|
<div class="opacity-full bg-pink"></div>
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-6 col-sm-6 parallax-content no-padding-bottom position-relative center-col text-center">
|
|
<i class="icon-heart large-icon white-text margin-ten no-margin-top"></i>
|
|
<span class="parallax-title white-text">We Talk About Fashion</span>
|
|
<span class="parallax-sub-title white-text">the perfect balance<br>between tradition<br> and innovation</span>
|
|
<div class="separator-line bg-white"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="bg-black">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-6 col-sm-6 center-col text-center margin-ten no-margin-top">
|
|
<h1 class="fashion-text">Fashion Season</h1>
|
|
<p class="title-small gray-text text-uppercase">Spring/Summer 2015</p>
|
|
</div>
|
|
<div class="col-md-6 col-sm-12 text-center">
|
|
<a href="#"><img src="http://placehold.it/500x500" alt=""/></a>
|
|
</div>
|
|
<div class="col-md-6 col-sm-12 text-center sm-margin-top-four">
|
|
<a href="#"><img src="http://placehold.it/500x500" alt=""/></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- end about section -->
|
|
<!-- model section -->
|
|
<section id="model" class="grid-wrap work-4col xs-onepage-section">
|
|
<div class="container-fluid" >
|
|
<div class="row">
|
|
<!-- section title -->
|
|
<div class="col-md-12 text-center">
|
|
<h3 class="section-title no-padding-bottom">Model</h3>
|
|
</div>
|
|
<!-- end section title -->
|
|
<div class="col-lg-3 col-md-8 col-sm-11 margin-three center-col text-center">
|
|
<h4 class="gray-text">Lorem Ipsum is simply dummy text of the printing & typesetting industry. Lorem Ipsum has been the industry's standard dummy </h4>
|
|
</div>
|
|
<div class="grid-gallery overflow-hidden" >
|
|
<div class="tab-content">
|
|
<ul class="masonry-items grid">
|
|
<!-- model item -->
|
|
<li>
|
|
<figure>
|
|
<div class="gallery-img"><a href="onepage-single-project-page6.html" class="simple-ajax-popup-align-top" title=""><img src="http://placehold.it/800x1200" alt=""></a></div>
|
|
<figcaption>
|
|
<div class="separator-line bg-white"></div>
|
|
<h3>Alexandra royla</h3>
|
|
</figcaption>
|
|
</figure>
|
|
</li>
|
|
<!-- end model item -->
|
|
<!-- model item -->
|
|
<li>
|
|
<figure>
|
|
<div class="gallery-img"><a href="onepage-single-project-page6.html" class="simple-ajax-popup-align-top" title=""><img src="http://placehold.it/800x600" alt=""></a></div>
|
|
<figcaption>
|
|
<div class="separator-line bg-white"></div>
|
|
<h3>Jane Lupkin</h3>
|
|
</figcaption>
|
|
</figure>
|
|
</li>
|
|
<!-- end model item -->
|
|
<!-- model item -->
|
|
<li>
|
|
<figure>
|
|
<div class="gallery-img"><a href="onepage-single-project-page6.html" class="simple-ajax-popup-align-top" title=""><img src="http://placehold.it/800x600" alt=""></a></div>
|
|
<figcaption>
|
|
<div class="separator-line bg-white"></div>
|
|
<h3>Celestine Debby</h3>
|
|
</figcaption>
|
|
</figure>
|
|
</li>
|
|
<!-- end model item -->
|
|
<!-- model item -->
|
|
<li>
|
|
<figure>
|
|
<div class="gallery-img"><a href="onepage-single-project-page6.html" class="simple-ajax-popup-align-top" title=""><img src="http://placehold.it/800x1200" alt=""></a></div>
|
|
<figcaption>
|
|
<div class="separator-line bg-white"></div>
|
|
<h3>Sommer Christian</h3>
|
|
</figcaption>
|
|
</figure>
|
|
</li>
|
|
<!-- end model item -->
|
|
<!-- model item -->
|
|
<li>
|
|
<figure>
|
|
<div class="gallery-img"><a href="onepage-single-project-page6.html" class="simple-ajax-popup-align-top" title=""><img src="http://placehold.it/800x600" alt=""></a></div>
|
|
<figcaption>
|
|
<div class="separator-line bg-white"></div>
|
|
<h3>Heather Laureen</h3>
|
|
</figcaption>
|
|
</figure>
|
|
</li>
|
|
<!-- end model item -->
|
|
<!-- model item -->
|
|
<li>
|
|
<figure>
|
|
<div class="gallery-img"><a href="onepage-single-project-page6.html" class="simple-ajax-popup-align-top" title=""><img src="http://placehold.it/800x600" alt=""></a></div>
|
|
<figcaption>
|
|
<div class="separator-line bg-white"></div>
|
|
<h3>Bobby Rosie</h3>
|
|
</figcaption>
|
|
</figure>
|
|
</li>
|
|
<!-- end model item -->
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-3 col-md-5 col-sm-8 center-col text-center margin-five no-margin-bottom sm-margin-top-ten">
|
|
<i class="icon-heart large-icon black-text margin-ten no-margin-top sm-margin-bottom-four"></i>
|
|
<h1>The talent behind the reputation</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- end model section -->
|
|
<!-- team section -->
|
|
<section id="key-person" class="parallax2 parallax-fix fashion-parallax key-person-fashion xs-onepage-section">
|
|
<img class="parallax-background-img" src="http://placehold.it/1920x1500" alt="" />
|
|
<div class="container fashion-team">
|
|
<div class="row">
|
|
<!-- section title -->
|
|
<div class="col-md-12 text-center">
|
|
<h3 class="section-title no-padding-bottom fashion-text">Meet The Team</h3>
|
|
</div>
|
|
<!-- end section title -->
|
|
<div class="col-md-5 col-sm-8 center-col text-center margin-six">
|
|
<h4 class="gray-text">Lorem Ipsum is simply dummy text of the printing & typesetting industry. Lorem Ipsum has been the industry's standard dummy </h4>
|
|
</div>
|
|
</div>
|
|
<div class="row margin-ten no-margin-bottom">
|
|
<!-- team item -->
|
|
<div class="col-md-4 col-xs-4 xs-margin-bottom-seven text-center">
|
|
<div class="key-person">
|
|
<div class="key-person-img"><img src="http://placehold.it/800x1100" alt=""></div>
|
|
<div class="key-person-details bg-white"> <span class="person-name black-text">Sommer Christian</span> <span class="person-post black-text">Team Leader</span>
|
|
<div class="separator-line bg-fashion"></div>
|
|
<div class="person-social"><a href="#"><i class="fa fa-facebook black-text"></i></a><a href="#"><i class="fa fa-twitter black-text"></i></a><a href="#"><i class="fa fa-google-plus black-text"></i></a></div>
|
|
<p class="margin-three black-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end team item -->
|
|
<!-- team item -->
|
|
<div class="col-md-4 col-xs-4 xs-margin-bottom-seven text-center">
|
|
<div class="key-person">
|
|
<div class="key-person-img"><img src="http://placehold.it/800x1100" alt=""></div>
|
|
<div class="key-person-details bg-white"> <span class="person-name black-text">Sara Smith</span> <span class="person-post black-text">Fashion Designer</span>
|
|
<div class="separator-line bg-fashion"></div>
|
|
<div class="person-social"><a href="#"><i class="fa fa-facebook black-text"></i></a><a href="#"><i class="fa fa-twitter black-text"></i></a><a href="#"><i class="fa fa-google-plus black-text"></i></a></div>
|
|
<p class="margin-three black-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end team item -->
|
|
<!-- team item -->
|
|
<div class="col-md-4 col-xs-4 text-center">
|
|
<div class="key-person">
|
|
<div class="key-person-img"><img src="http://placehold.it/800x1100" alt=""></div>
|
|
<div class="key-person-details bg-white"> <span class="person-name black-text">Jane Lupkin</span> <span class="person-post black-text">Fashion Designer</span>
|
|
<div class="separator-line bg-fashion"></div>
|
|
<div class="person-social"><a href="#"><i class="fa fa-facebook black-text"></i></a><a href="#"><i class="fa fa-twitter black-text"></i></a><a href="#"><i class="fa fa-google-plus black-text"></i></a></div>
|
|
<p class="margin-three black-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end team item -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- end team section -->
|
|
<!-- counter section -->
|
|
<section>
|
|
<div class="container">
|
|
<div class="row">
|
|
<!-- counter item -->
|
|
<div class="col-md-3 col-sm-6 sm-margin-bottom-ten text-center counter-section">
|
|
<i class="icon-tools medium-icon fashion-text"></i>
|
|
<span class="timer counter-number alt-font" data-to="450" data-speed="7000"></span>
|
|
<span class="counter-title">Models</span>
|
|
</div>
|
|
<!-- end counter item -->
|
|
<!-- counter item -->
|
|
<div class="col-md-3 col-sm-6 sm-margin-bottom-ten text-center counter-section">
|
|
<i class="icon-scissors medium-icon fashion-text"></i>
|
|
<span class="timer counter-number alt-font" data-to="687" data-speed="7000"></span>
|
|
<span class="counter-title">Styling</span>
|
|
</div>
|
|
<!-- end counter item -->
|
|
<!-- counter item -->
|
|
<div class="col-md-3 col-sm-6 xs-margin-bottom-ten text-center counter-section">
|
|
<i class="icon-camera medium-icon fashion-text"></i>
|
|
<span class="timer counter-number alt-font" data-to="835" data-speed="7000"></span>
|
|
<span class="counter-title">Photography</span>
|
|
</div>
|
|
<!-- end counter item -->
|
|
<!-- counter item -->
|
|
<div class="col-md-3 col-sm-6 text-center counter-section">
|
|
<i class="icon-briefcase medium-icon fashion-text"></i>
|
|
<span class="timer counter-number alt-font" data-to="450" data-speed="7000"></span>
|
|
<span class="counter-title">New Styles</span>
|
|
</div>
|
|
<!-- end counter item -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- end counter section -->
|
|
<!-- key model section -->
|
|
<section class="fashion-person no-padding person-grid">
|
|
<div class="row center-col">
|
|
<div class="col-md-4 col-sm-12 col-xs-12 no-padding">
|
|
<img src="http://placehold.it/898x840" alt="">
|
|
</div>
|
|
<div class="col-md-4 col-sm-12 col-xs-12 no-padding">
|
|
<img src="http://placehold.it/898x840" alt="">
|
|
</div>
|
|
<div class="col-md-4 col-sm-12 col-xs-12 fashion-right">
|
|
<img src="http://placehold.it/899x841" alt="">
|
|
<div class="right-content">
|
|
<span class="title-large text-uppercase letter-spacing-2 display-block white-text ">Fashion is our passion.</span>
|
|
<span class="owl-subtitle white-text sm-margin-top-five sm-margin-bottom-five">welcome to fashion design</span>
|
|
<div class="separator-line bg-white"></div>
|
|
<h4 class="white-text no-padding-left-right sm-display-none">Good bread is the most fundamentally satisfying of all foods; and good bread with fresh butter, the greatest of feasts. Lorem Ipsum is simply dummy text of the printing & typesetting.</h4>
|
|
<a class="btn btn-small-white-background margin-seven margin-four-bottom sm-no-margin-top" href="#">Read More</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- end key model section -->
|
|
<!-- photoshot section-->
|
|
<section id="portfolio" class="grid-wrap work-4col margin-top-section no-margin-top no-padding-bottom xs-onepage-section">
|
|
<div class="container-fluid" >
|
|
<div class="row no-padding">
|
|
<!-- section title -->
|
|
<div class="col-md-12 text-center">
|
|
<h3 class="section-title no-padding-bottom">Photoshots</h3>
|
|
</div>
|
|
<!-- end section title -->
|
|
<div class="col-md-3 margin-three center-col text-center">
|
|
<h4 class="gray-text">Lorem Ipsum is simply dummy text of the printing & typesetting industry. Lorem Ipsum has been the industry's standard dummy </h4>
|
|
</div>
|
|
<!-- ./ Filter Head div-->
|
|
<div class="grid-gallery overflow-hidden" >
|
|
<div class="tab-content">
|
|
<ul class="masonry-items grid lightbox-gallery">
|
|
<!-- photoshot item -->
|
|
<li>
|
|
<figure>
|
|
<div class="gallery-img"><a href="http://placehold.it/800x600" title=""><img src="http://placehold.it/800x600" alt=""></a></div>
|
|
<figcaption>
|
|
<h3>Alexander Lewis</h3>
|
|
<p>Fashion Model</p>
|
|
</figcaption>
|
|
</figure>
|
|
</li>
|
|
<!-- end photoshot item -->
|
|
<!-- photoshot item -->
|
|
<li>
|
|
<figure>
|
|
<div class="gallery-img"><a href="http://placehold.it/800x600" title=""><img src="http://placehold.it/800x600" alt=""></a></div>
|
|
<figcaption>
|
|
<h3>Bionda Castana</h3>
|
|
<p>Fashion Model</p>
|
|
</figcaption>
|
|
</figure>
|
|
</li>
|
|
<!-- end photoshot item -->
|
|
<!-- photoshot item -->
|
|
<li>
|
|
<figure>
|
|
<div class="gallery-img"><a href="http://placehold.it/800x600" title=""><img src="http://placehold.it/800x600" alt=""></a></div>
|
|
<figcaption>
|
|
<h3>Carine Gilson</h3>
|
|
<p>Fashion Model</p>
|
|
</figcaption>
|
|
</figure>
|
|
</li>
|
|
<!-- end photoshot item -->
|
|
<!-- photoshot item -->
|
|
<li>
|
|
<figure>
|
|
<div class="gallery-img"><a href="http://placehold.it/800x600" title=""><img src="http://placehold.it/800x600" alt=""></a></div>
|
|
<figcaption>
|
|
<h3>Camilla Cuisine</h3>
|
|
<p>Fashion Model</p>
|
|
</figcaption>
|
|
</figure>
|
|
</li>
|
|
<!-- end photoshot item -->
|
|
<!-- photoshot item -->
|
|
<li>
|
|
<figure>
|
|
<div class="gallery-img"><a href="http://placehold.it/800x600" title=""><img src="http://placehold.it/800x600" alt=""></a></div>
|
|
<figcaption>
|
|
<h3>Jessica Lauri</h3>
|
|
<p>Fashion Model</p>
|
|
</figcaption>
|
|
</figure>
|
|
</li>
|
|
<!-- end photoshot item -->
|
|
<!-- photoshot item -->
|
|
<li>
|
|
<figure>
|
|
<div class="gallery-img"><a href="http://placehold.it/800x600" title=""><img src="http://placehold.it/800x600" alt=""></a></div>
|
|
<figcaption>
|
|
<h3>Maryann Ray</h3>
|
|
<p>Fashion Model</p>
|
|
</figcaption>
|
|
</figure>
|
|
</li>
|
|
<!-- end photoshot item -->
|
|
<!-- photoshot item -->
|
|
<li>
|
|
<figure>
|
|
<div class="gallery-img"><a href="http://placehold.it/800x600" title=""><img src="http://placehold.it/800x600" alt=""></a></div>
|
|
<figcaption>
|
|
<h3>Alberta Allie</h3>
|
|
<p>Fashion Model</p>
|
|
</figcaption>
|
|
</figure>
|
|
</li>
|
|
<!-- end photoshot item -->
|
|
<!-- photoshot item -->
|
|
<li>
|
|
<figure>
|
|
<div class="gallery-img"><a href="http://placehold.it/800x600" title=""><img src="http://placehold.it/800x600" alt=""></a></div>
|
|
<figcaption>
|
|
<h3>Bonnie Celia</h3>
|
|
<p>Fashion Model</p>
|
|
</figcaption>
|
|
</figure>
|
|
</li>
|
|
<!-- end photoshot item -->
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- end photo shot section-->
|
|
<!-- blog section -->
|
|
<section id="blog" class="xs-onepage-section">
|
|
<div class="container">
|
|
<div class="row">
|
|
<!-- section title -->
|
|
<div class="col-md-12 text-center">
|
|
<h3 class="section-title">Latest Blog</h3>
|
|
</div>
|
|
<!-- end section title -->
|
|
</div>
|
|
</div>
|
|
<div id="myCarousel2" class="carousel slide carousel-slide">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="carousel-inner">
|
|
<div class="item active">
|
|
<!-- blog item -->
|
|
<div class="col-md-4 col-sm-4">
|
|
<div class="blog-post">
|
|
<div class="blog-post-images"><a href="blog-single-full-width-with-image-slider.html"><img src="http://placehold.it/900x564" alt=""></a></div>
|
|
<div class="post-details">
|
|
<a href="blog-single-full-width-with-image-slider.html" class="post-title">Standard post with picture</a>
|
|
<span class="post-author">Posted by Michael Freemon | 10 January 2015</span>
|
|
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end blog item -->
|
|
<!-- blog item -->
|
|
<div class="col-md-4 col-sm-4">
|
|
<div class="blog-post">
|
|
<div class="blog-post-images"><a href="blog-single-full-width-with-image-slider.html"><img src="http://placehold.it/900x564" alt=""></a></div>
|
|
<div class="post-details">
|
|
<a href="blog-single-full-width-with-image-slider.html" class="post-title">Post with featured picture</a>
|
|
<span class="post-author">Posted by Colin Powell | 02 January 2015</span>
|
|
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end blog item -->
|
|
<!-- blog item -->
|
|
<div class="col-md-4 col-sm-4">
|
|
<div class="blog-post">
|
|
<div class="blog-post-images"><a href="blog-single-full-width-with-image-slider.html"><img src="http://placehold.it/900x564" alt=""></a></div>
|
|
<div class="post-details">
|
|
<a href="blog-single-full-width-with-image-slider.html" class="post-title">Standard post with slider</a>
|
|
<span class="post-author">Posted by Vince Lombardi | 02 January 2015</span>
|
|
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end blog item -->
|
|
</div>
|
|
<div class="item">
|
|
<!-- blog item -->
|
|
<div class="col-md-4 col-sm-4">
|
|
<div class="blog-post">
|
|
<div class="blog-post-images"><a href="blog-single-full-width-with-image-slider.html"><img src="http://placehold.it/900x564" alt=""></a></div>
|
|
<div class="post-details">
|
|
<a href="blog-single-full-width-with-image-slider.html" class="post-title">Standard post with picture</a>
|
|
<span class="post-author">Posted by Michael Freemon | 10 January 2015</span>
|
|
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end blog item -->
|
|
<!-- blog item -->
|
|
<div class="col-md-4 col-sm-4">
|
|
<div class="blog-post">
|
|
<div class="blog-post-images"><a href="blog-single-full-width-with-image-slider.html"><img src="http://placehold.it/900x564" alt=""></a></div>
|
|
<div class="post-details">
|
|
<a href="blog-single-full-width-with-image-slider.html" class="post-title">Post with featured picture</a>
|
|
<span class="post-author">Posted by Colin Powell | 02 January 2015</span>
|
|
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end blog item -->
|
|
<!-- blog item -->
|
|
<div class="col-md-4 col-sm-4">
|
|
<div class="blog-post">
|
|
<div class="blog-post-images"><a href="blog-single-full-width-with-image-slider.html"><img src="http://placehold.it/900x564" alt=""></a></div>
|
|
<div class="post-details">
|
|
<a href="blog-single-full-width-with-image-slider.html" class="post-title">Standard post with slider</a>
|
|
<span class="post-author">Posted by Vince Lombardi | 02 January 2015</span>
|
|
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end blog item -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- slider controls -->
|
|
<a class="left carousel-control" href="#myCarousel2" data-slide="prev"><img src="images/arrow-pre.png" alt=""/> </a> <a class="right carousel-control" href="#myCarousel2" data-slide="next"> <img src="images/arrow-next.png" alt=""/> </a>
|
|
<!-- end slider controls -->
|
|
</div>
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-12 text-center">
|
|
<a href="blog-grid-full-width.html" class="btn btn-black btn-small no-margin-right">View All blog</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- end blog section -->
|
|
<!-- testimonial section -->
|
|
<section id="testimonial" class="bg-black dark-section">
|
|
<div class="container">
|
|
<div class="row">
|
|
<!-- section title -->
|
|
<div class="col-md-12 text-center">
|
|
<h3 class="section-title white-text no-padding-bottom">Testimonials</h3>
|
|
</div>
|
|
<!-- end section title -->
|
|
</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">
|
|
<!-- blog item -->
|
|
<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>
|
|
<!-- end blog item -->
|
|
<!-- blog item -->
|
|
<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>
|
|
<!-- end blog item -->
|
|
<!-- blog item -->
|
|
<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>
|
|
<!-- end blog item -->
|
|
<!-- blog item -->
|
|
<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>
|
|
<!-- end blog item -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- end testimonial section -->
|
|
<!-- contact us 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 class="black-text" href="mailto:no-reply@domain.com">no-reply@domain.com</a></h6></div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<!-- form -->
|
|
<form id="contactusform" action="javascript:void(0)" method="post">
|
|
<div class="col-md-10 col-sm-12 center-col">
|
|
<div class="row"><div class="col-md-12 col-sm-12"><div class="wide-separator-line margin-ten"></div></div>
|
|
<div class="col-md-12 col-sm-12"><div id="success"></div></div>
|
|
</div>
|
|
<div class="col-md-6 col-sm-12">
|
|
<input name="name" type="text" placeholder="Your Name" />
|
|
<input name="email" type="text" placeholder="Your Email" />
|
|
</div>
|
|
<div class="col-md-6 col-sm-12">
|
|
<textarea name="comment" placeholder="Your Message" ></textarea>
|
|
</div>
|
|
<div class="col-md-12 col-sm-12">
|
|
<div class="col-md-6 col-sm-6 no-padding-left"><span class="required">*Please complete all fields correctly</span></div>
|
|
<div class="col-md-3 col-sm-6 f-right no-padding-right"><input id="contact-us-button" name="send message" type="button" value="send message" class="btn btn-black no-margin-top f-right no-margin-lr"></div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<!-- end form -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- end contact us section -->
|
|
<!-- counter section -->
|
|
<section class="parallax10 parallax-fix" >
|
|
<img class="parallax-background-img" src="http://placehold.it/1920x1100" alt="" />
|
|
<div class="opacity-full bg-black"></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 fashion-text"></i> <span id="anim-number-pizza" class="counter-number white-text">234</span> <span class="counter-title light-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 fashion-text"></i> <span id="anim-number-client" class="counter-number white-text">733</span> <span class="counter-title light-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 fashion-text"></i> <span id="anim-number-projects" class="counter-number white-text">606</span> <span class="counter-title light-gray-text">Projects Completed</span> </div>
|
|
<!-- end counter item -->
|
|
<!-- counter item -->
|
|
<div class="col-md-3 col-sm-6 text-center counter-section"> <i class="icon-chat medium-icon fashion-text"></i> <span id="anim-number-comments" class="counter-number white-text">449</span> <span class="counter-title gray-text">Comments</span> </div>
|
|
<!-- end counter item -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- end counter 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>
|