766 lines
51 KiB
HTML
766 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-border-bottom no-transition" role="navigation">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-3 col-sm-2 col-xs-6"><a class="logo-light" href="index.html"><img alt="" src="images/logo-light.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 col-sm-10 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="#skills" class="inner-link">Skills</a></li>
|
|
<li><a href="#education" class="inner-link">Education</a></li>
|
|
<li><a href="#portfolio" class="inner-link">Portfolio</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 -->
|
|
<!-- parallax section -->
|
|
<section class="parallax1 parallax-fix full-screen no-padding scroll-to-down" onclick="scrollToDown()" id="slider">
|
|
<div class="overlay-gray"></div>
|
|
<img class="parallax-background-img" src="http://placehold.it/1920x1200" alt="" />
|
|
<div class="container full-screen position-relative">
|
|
<div class="slider-typography">
|
|
<div class="slider-text-middle-main">
|
|
<div class="slider-text-middle slider-text-middle2 personal-name animated fadeIn">
|
|
<h1 class="margin-two">I'm Andrew Smith</h1>
|
|
<span class="cd-headline letters type text-uppercase">
|
|
<span class="cd-words-wrapper waiting">
|
|
<b class="is-visible main-font text-large font-weight-400">I'm creative designer</b>
|
|
<b class="main-font text-large font-weight-400">I'm dedicated freelancer</b>
|
|
<b class="main-font text-large font-weight-400">I'm brilliant developer</b>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- end parallax section -->
|
|
<!-- about us section -->
|
|
<section id="features" class="border-bottom no-padding-bottom xs-onepage-section">
|
|
<div class="container">
|
|
<div class="row">
|
|
<!-- section title -->
|
|
<div class="col-md-12 text-center">
|
|
<span class="title-number">01</span><h3 class="section-title no-padding">About Me</h3>
|
|
</div>
|
|
<!-- end section title -->
|
|
</div>
|
|
<div class="row margin-ten no-margin-bottom">
|
|
<div class="col-md-6 col-sm-6 text-center xs-margin-bottom-ten">
|
|
<img src="http://placehold.it/630x638" alt=""/>
|
|
</div>
|
|
<div class="col-md-6 col-sm-6 sm-margin-bottom-ten">
|
|
<div class="col-md-12 col-sm-12 no-padding">
|
|
<p class="text-large">Hello, I'm a UI/UX Designer & Front End Developer from Victoria, Australia. I hold a master degree of Web Design from the World University.</p>
|
|
<ul class="list-line margin-ten text-med">
|
|
<li><span class="font-weight-600">Name:</span> Andrew Smith</li>
|
|
<li><span class="font-weight-600">Email:</span>andrew@gmail.com</li>
|
|
<li><span class="font-weight-600">Phone:</span> (123) - 456-7890</li>
|
|
<li><span class="font-weight-600">Date of birth:</span> 23 February 1986</li>
|
|
<li><span class="font-weight-600">Nationality:</span> United States</li>
|
|
</ul>
|
|
<a class="highlight-button-dark btn btn-medium button" href="#">Download Resume</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- end about us section -->
|
|
<!-- skills section -->
|
|
<section id="skills" class="xs-onepage-section">
|
|
<div class="container">
|
|
<div class="row">
|
|
<!-- section title -->
|
|
<div class="col-md-12 text-center">
|
|
<span class="title-number">02</span><h3 class="section-title no-padding">Skills</h3>
|
|
</div>
|
|
<!-- end section title -->
|
|
</div>
|
|
<div class="row margin-ten no-margin-bottom">
|
|
<!-- features grid -->
|
|
<div class="col-md-4 col-sm-12">
|
|
<!-- features item -->
|
|
<div class="features-section col-md-12 col-sm-6 no-padding">
|
|
<div class="col-md-3 col-sm-2 col-xs-2 no-padding"><i class="icon-desktop medium-icon "></i></div>
|
|
<div class="col-md-9 col-sm-9 col-xs-9 no-padding text-left f-right">
|
|
<h5 class="margin-five no-margin-top">Photoshop</h5>
|
|
<p class="width-90">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been.</p>
|
|
</div>
|
|
</div>
|
|
<!-- end features item -->
|
|
<!-- features item -->
|
|
<div class="features-section col-md-12 col-sm-6 no-padding no-margin">
|
|
<div class="col-md-3 col-sm-2 col-xs-2 no-padding"><i class="icon-target medium-icon"></i></div>
|
|
<div class="col-md-9 col-sm-9 col-xs-9 no-padding text-left f-right">
|
|
<h5 class="margin-five no-margin-top">Dreamweaver </h5>
|
|
<p class="width-90">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been.</p>
|
|
</div>
|
|
</div>
|
|
<!-- end features item -->
|
|
</div>
|
|
<div class="col-md-4 col-sm-12">
|
|
<!-- features item -->
|
|
<div class="features-section col-md-12 col-sm-6 no-padding">
|
|
<div class="col-md-3 col-sm-2 col-xs-2 no-padding"><i class="icon-trophy medium-icon"></i></div>
|
|
<div class="col-md-9 col-sm-9 col-xs-9 no-padding text-left f-right">
|
|
<h5 class="margin-five no-margin-top">Illustrator</h5>
|
|
<p class="width-90">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been.</p>
|
|
</div>
|
|
</div>
|
|
<!-- end features item -->
|
|
<!-- features item -->
|
|
<div class="features-section col-md-12 col-sm-6 no-padding no-margin">
|
|
<div class="col-md-3 col-sm-2 col-xs-2 no-padding"><i class="icon-scissors medium-icon"></i></div>
|
|
<div class="col-md-9 col-sm-9 col-xs-9 no-padding text-left f-right">
|
|
<h5 class="margin-five no-margin-top">Fireworks</h5>
|
|
<p class="width-90">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been.</p>
|
|
</div>
|
|
</div>
|
|
<!-- end features item -->
|
|
</div>
|
|
<div class="col-md-4 col-sm-12">
|
|
<!-- features item -->
|
|
<div class="features-section col-md-12 col-sm-6 no-padding">
|
|
<div class="col-md-3 col-sm-2 col-xs-2 no-padding"><i class="icon-hotairballoon medium-icon"></i></div>
|
|
<div class="col-md-9 col-sm-9 col-xs-9 no-padding text-left f-right">
|
|
<h5 class="margin-five no-margin-top">HTML-5</h5>
|
|
<p class="width-90">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been.</p>
|
|
</div>
|
|
</div>
|
|
<!-- end features item -->
|
|
<!-- features item -->
|
|
<div class="features-section col-md-12 col-sm-6 no-padding no-margin">
|
|
<div class="col-md-3 col-sm-2 col-xs-2 no-padding"><i class="icon-tools medium-icon"></i></div>
|
|
<div class="col-md-9 col-sm-9 col-xs-9 no-padding text-left f-right">
|
|
<h5 class="margin-five no-margin-top">CSS-3</h5>
|
|
<p class="width-90">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been.</p>
|
|
</div>
|
|
</div>
|
|
<!-- end features item -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- end skills section -->
|
|
<!-- pie charts section -->
|
|
<section class="fix-background" style="background-image:url('http://placehold.it/1920x1100');">
|
|
<div class="opacity-medium bg-black"></div>
|
|
<div class="container position-relative">
|
|
<div class="row">
|
|
<div class="text-center center-col">
|
|
<!-- pie charts -->
|
|
<div class="col-md-3 col-sm-3 wow bounceIn xs-margin-bottom-ten">
|
|
<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>
|
|
<!-- end pie charts -->
|
|
<!-- pie charts -->
|
|
<div class="col-md-3 col-sm-3 wow bounceIn xs-margin-bottom-ten">
|
|
<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>
|
|
<!-- end pie charts -->
|
|
<!-- pie charts -->
|
|
<div class="col-md-3 col-sm-3 wow bounceIn xs-margin-bottom-ten">
|
|
<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>
|
|
<!-- end pie charts -->
|
|
<!-- pie charts -->
|
|
<div class="col-md-3 col-sm-3 wow bounceIn">
|
|
<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>
|
|
<!-- end pie charts -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- end pie charts section -->
|
|
<!-- education section -->
|
|
<section id="education" class="xs-onepage-section">
|
|
<div class="container">
|
|
<div class="row margin-ten no-margin-top">
|
|
<!-- section title -->
|
|
<div class="col-md-12 text-center">
|
|
<span class="title-number">03</span><h3 class="section-title no-padding">Education</h3>
|
|
</div>
|
|
<!-- end section title -->
|
|
</div>
|
|
<div class="row">
|
|
<div id="owl-demo-small" class="col-md-12 owl-carousel owl-theme dark-pagination owl-no-pagination dark-pagination-without-next-prev-arrow position-relative no-padding">
|
|
<div class="item">
|
|
<!-- education item -->
|
|
<div class="col-md-3 col-sm-6 sm-margin-bottom-ten">
|
|
<div class="education-box-main text-center">
|
|
<div class="education-box">
|
|
<i class="icon-laptop black-text"></i>
|
|
<span class="year text-large gray-text display-block margin-five">2012 - 2014</span>
|
|
<span class="university text-uppercase display-block black-text letter-spacing-2 font-weight-600">Boston State University</span>
|
|
<div class="separator-line bg-black margin-ten"></div>
|
|
</div>
|
|
<div class="namerol"><span class="text-uppercase display-block black-text letter-spacing-2 margin-five no-margin-top">Bachelor of Arts</span>
|
|
<p>Lorem Ipsum is simply dummy text of the printing.</p>
|
|
<span class="result text-uppercase white-text font-weight-600 letter-spacing-1">Grade A++</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end education item -->
|
|
<!-- education item -->
|
|
<div class="col-md-3 col-sm-6 sm-margin-bottom-ten">
|
|
<div class="education-box-main text-center">
|
|
<div class="education-box">
|
|
<i class="icon-video black-text"></i>
|
|
<span class="year text-large gray-text display-block margin-five">2010 - 2012</span>
|
|
<span class="university text-uppercase display-block black-text letter-spacing-2 font-weight-600">Boston State University</span>
|
|
<div class="separator-line bg-black margin-ten"></div>
|
|
</div>
|
|
<div class="namerol"><span class="text-uppercase display-block black-text letter-spacing-2 margin-five no-margin-top">Visual Art & Design</span>
|
|
<p>Lorem Ipsum is simply dummy text of the printing.</p>
|
|
<span class="result text-uppercase white-text font-weight-600 letter-spacing-1">Grade A++</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end education item -->
|
|
<!-- education item -->
|
|
<div class="col-md-3 col-sm-6 xs-margin-bottom-ten">
|
|
<div class="education-box-main text-center">
|
|
<div class="education-box">
|
|
<i class="icon-camera black-text"></i>
|
|
<span class="year text-large gray-text display-block margin-five">2008 - 2010</span>
|
|
<span class="university text-uppercase display-block black-text letter-spacing-2 font-weight-600">Boston State University</span>
|
|
<div class="separator-line bg-black margin-ten"></div>
|
|
</div>
|
|
<div class="namerol"><span class="text-uppercase display-block black-text letter-spacing-2 margin-five no-margin-top">Degree of Web Design</span>
|
|
<p>Lorem Ipsum is simply dummy text of the printing.</p>
|
|
<span class="result text-uppercase white-text font-weight-600 letter-spacing-1">Grade A++</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end education item -->
|
|
<!-- education item -->
|
|
<div class="col-md-3 col-sm-6">
|
|
<div class="education-box-main text-center">
|
|
<div class="education-box">
|
|
<i class="icon-picture black-text"></i>
|
|
<span class="year text-large gray-text display-block margin-five">2008 - 2006</span>
|
|
<span class="university text-uppercase display-block black-text letter-spacing-2 font-weight-600">Boston State University</span>
|
|
<div class="separator-line bg-black margin-ten"></div>
|
|
</div>
|
|
<div class="namerol"><span class="text-uppercase display-block black-text letter-spacing-2 margin-five no-margin-top">Visual Art & Graphics</span>
|
|
<p>Lorem Ipsum is simply dummy text of the printing.</p>
|
|
<span class="result text-uppercase white-text font-weight-600 letter-spacing-1">Grade A++</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end education item -->
|
|
</div>
|
|
<div class="item">
|
|
<!-- education item -->
|
|
<div class="col-md-3 col-sm-6 sm-margin-bottom-ten">
|
|
<div class="education-box-main text-center">
|
|
<div class="education-box">
|
|
<i class="icon-laptop black-text"></i>
|
|
<span class="year text-large gray-text display-block margin-five">2012 - 2014</span>
|
|
<span class="university text-uppercase display-block black-text letter-spacing-2 font-weight-600">Boston State University</span>
|
|
<div class="separator-line bg-black margin-ten"></div>
|
|
</div>
|
|
<div class="namerol"><span class="text-uppercase display-block black-text letter-spacing-2 margin-five no-margin-top">Bachelor of Arts</span>
|
|
<p>Lorem Ipsum is simply dummy text of the printing.</p>
|
|
<span class="result text-uppercase white-text font-weight-600 letter-spacing-1">Grade A++</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end education item -->
|
|
<!-- education item -->
|
|
<div class="col-md-3 col-sm-6 sm-margin-bottom-ten">
|
|
<div class="education-box-main text-center">
|
|
<div class="education-box">
|
|
<i class="icon-video black-text"></i>
|
|
<span class="year text-large gray-text display-block margin-five">2010 - 2012</span>
|
|
<span class="university text-uppercase display-block black-text letter-spacing-2 font-weight-600">Boston State University</span>
|
|
<div class="separator-line bg-black margin-ten"></div>
|
|
</div>
|
|
<div class="namerol"><span class="text-uppercase display-block black-text letter-spacing-2 margin-five no-margin-top">Visual Art & Design</span>
|
|
<p>Lorem Ipsum is simply dummy text of the printing.</p>
|
|
<span class="result text-uppercase white-text font-weight-600 letter-spacing-1">Grade A++</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end education item -->
|
|
<!-- education item -->
|
|
<div class="col-md-3 col-sm-6 xs-margin-bottom-ten">
|
|
<div class="education-box-main text-center">
|
|
<div class="education-box">
|
|
<i class="icon-camera black-text"></i>
|
|
<span class="year text-large gray-text display-block margin-five">2008 - 2010</span>
|
|
<span class="university text-uppercase display-block black-text letter-spacing-2 font-weight-600">Boston State University</span>
|
|
<div class="separator-line bg-black margin-ten"></div>
|
|
</div>
|
|
<div class="namerol"><span class="text-uppercase display-block black-text letter-spacing-2 margin-five no-margin-top">Degree of Web Design</span>
|
|
<p>Lorem Ipsum is simply dummy text of the printing.</p>
|
|
<span class="result text-uppercase white-text font-weight-600 letter-spacing-1">Grade A++</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end education item -->
|
|
<!-- education item -->
|
|
<div class="col-md-3 col-sm-6">
|
|
<div class="education-box-main text-center">
|
|
<div class="education-box">
|
|
<i class="icon-picture black-text"></i>
|
|
<span class="year text-large gray-text display-block margin-five">2008 - 2006</span>
|
|
<span class="university text-uppercase display-block black-text letter-spacing-2 font-weight-600">Boston State University</span>
|
|
<div class="separator-line bg-black margin-ten"></div>
|
|
</div>
|
|
<div class="namerol"><span class="text-uppercase display-block black-text letter-spacing-2 margin-five no-margin-top">Visual Art & Graphics</span>
|
|
<p>Lorem Ipsum is simply dummy text of the printing.</p>
|
|
<span class="result text-uppercase white-text font-weight-600 letter-spacing-1">Grade A++</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end education item -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- end education section -->
|
|
<!-- awards section -->
|
|
<section class="fix-background" style="background-image:url('http://placehold.it/1920x1100');">
|
|
<div class="overlay-gray"></div>
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-5 col-sm-10 text-center center-col">
|
|
<p class="title-small black-text">Awards can give you a tremendous amount of encouragement to keep getting better, no matter how young or old you are.</p>
|
|
</div>
|
|
</div>
|
|
<div class="row margin-five no-margin-bottom">
|
|
<div class="col-md-10 col-sm-12 text-center center-col">
|
|
<!-- awards item -->
|
|
<div class="col-md-4 col-sm-4 xs-margin-bottom-ten">
|
|
<div class="award-box clearfix">
|
|
<div class="col-md-4 col-sm-12">
|
|
<i class="icon-trophy black-text"></i>
|
|
</div>
|
|
<div class="col-md-8 col-sm-12 text-left text-uppercase black-text letter-spacing-1 sm-text-center sm-margin-top-five">International Design Awards</div>
|
|
</div>
|
|
</div>
|
|
<!-- end awards item -->
|
|
<!-- awards item -->
|
|
<div class="col-md-4 col-sm-4 xs-margin-bottom-ten">
|
|
<div class="award-box clearfix">
|
|
<div class="col-md-4 col-sm-12">
|
|
<i class="icon-circle-compass black-text"></i>
|
|
</div>
|
|
<div class="col-md-8 col-sm-12 text-left text-uppercase black-text letter-spacing-1 sm-text-center sm-margin-top-five">Asian Design Fest 2014</div>
|
|
</div>
|
|
</div>
|
|
<!-- end awards item -->
|
|
<!-- awards item -->
|
|
<div class="col-md-4 col-sm-4">
|
|
<div class="award-box clearfix">
|
|
<div class="col-md-4 col-sm-12">
|
|
<i class="icon-camera black-text"></i>
|
|
</div>
|
|
<div class="col-md-8 col-sm-12 text-left text-uppercase black-text letter-spacing-1 sm-text-center sm-margin-top-five">European Design Awards</div>
|
|
</div>
|
|
</div>
|
|
<!-- end awards item -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- end awards section -->
|
|
<!-- portfolio section -->
|
|
<section id="portfolio" class="no-padding-bottom xs-onepage-section">
|
|
<div class="container">
|
|
<div class="row">
|
|
<!-- section title -->
|
|
<div class="col-md-12 text-center">
|
|
<span class="title-number">04</span><h3 class="section-title no-padding">Portfolio</h3>
|
|
</div>
|
|
<!-- end section title -->
|
|
</div>
|
|
</div>
|
|
<div class="container-fuild">
|
|
<div class="row no-margin">
|
|
<div class="col-md-12 text-center margin-five no-margin-bottom">
|
|
<div class="text-center">
|
|
<ul class="portfolio-filter nav nav-tabs margin-one no-margin-top xs-margin-bottom-seven">
|
|
<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">
|
|
<!-- portfolio item -->
|
|
<li class="photography graphics">
|
|
<figure>
|
|
<div class="gallery-img"><a href="onepage-single-project-page1.html" class="simple-ajax-popup-align-top"><img src="http://placehold.it/480x358" 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>
|
|
<!-- end portfolio item -->
|
|
<!-- portfolio item -->
|
|
<li class="graphics design lightbox-gallery">
|
|
<figure>
|
|
<div class="gallery-img"><a href="http://placehold.it/1200x800" title=""><img src="http://placehold.it/480x716" 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>
|
|
<!-- end portfolio item -->
|
|
<!-- portfolio item -->
|
|
<li class="branding graphics design">
|
|
<figure>
|
|
<div class="gallery-img"><a href="onepage-single-project-page3.html" class="simple-ajax-popup-align-top"><img src="http://placehold.it/480x358" 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>
|
|
<!-- end portfolio item -->
|
|
<!-- portfolio item -->
|
|
<li class="photography branding design graphics">
|
|
<figure>
|
|
<div class="gallery-img"><a href="onepage-single-project-page5.html" class="simple-ajax-popup-align-top"><img src="http://placehold.it/480x358" 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>
|
|
<!-- end portfolio item -->
|
|
<!-- portfolio item -->
|
|
<li class="photography design branding">
|
|
<figure>
|
|
<div class="gallery-img"><a href="onepage-single-project-page2.html" class="simple-ajax-popup-align-top"><img src="http://placehold.it/480x358" 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>
|
|
<!-- end portfolio item -->
|
|
<!-- portfolio item -->
|
|
<li class="photography branding">
|
|
<figure>
|
|
<div class="gallery-img"><a href="onepage-single-project-page4.html" class="simple-ajax-popup-align-top"><img src="http://placehold.it/480x358" 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>
|
|
<!-- end portfolio item -->
|
|
<!-- portfolio item -->
|
|
<li class="photography branding design graphics">
|
|
<figure>
|
|
<div class="gallery-img"><a href="onepage-single-project-page5.html" class="simple-ajax-popup-align-top"><img src="http://placehold.it/480x358" 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>
|
|
<!-- end portfolio item -->
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- end portfolio 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">
|
|
<span class="title-number">05</span><h3 class="section-title no-padding">Recent Blog</h3>
|
|
</div>
|
|
<!-- end section title -->
|
|
</div>
|
|
<div class="row margin-ten no-margin-bottom">
|
|
<!-- blog item -->
|
|
<div class="col-md-4 col-sm-4 wow fadeInUp">
|
|
<div class="blog-post">
|
|
<div class="blog-post-images"><a href="blog-grid-3columns.html"><img src="http://placehold.it/800x500" alt=""></a></div>
|
|
<div class="post-details">
|
|
<a href="blog-grid-3columns.html" class="post-title">Standard post with picture</a>
|
|
<span class="post-author">Posted by Michael Freemon | 10 January 2015</span>
|
|
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end blog item -->
|
|
<!-- blog item -->
|
|
<div class="col-md-4 col-sm-4 wow fadeInUp">
|
|
<div class="blog-post">
|
|
<div class="blog-post-images"><a href="blog-masonry-3columns.html"><img src="http://placehold.it/800x500" alt=""></a></div>
|
|
<div class="post-details">
|
|
<a href="blog-masonry-3columns.html" class="post-title">Post with featured picture</a>
|
|
<span class="post-author">Posted by Colin Powell | 02 January 2015</span>
|
|
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end blog item -->
|
|
<!-- blog item -->
|
|
<div class="col-md-4 col-sm-4 wow fadeInUp">
|
|
<div class="blog-post">
|
|
<div class="blog-post-images"><a href="blog-right-sidebar.html"><img src="http://placehold.it/800x500" alt=""></a></div>
|
|
<div class="post-details">
|
|
<a href="blog-right-sidebar.html" class="post-title">Standard post with slider</a>
|
|
<span class="post-author">Posted by Vince Lombardi | 02 January 2015</span>
|
|
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end blog item -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- end blog section -->
|
|
<!-- testimonial section -->
|
|
<section class="fix-background" style="background-image:url('http://placehold.it/1920x800');">
|
|
<div class="overlay-gray"></div>
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-5 col-sm-10 no-padding testimonial-style2 center-col text-center position-relative">
|
|
<i class="fa fa-quote-left medium-icon black-text margin-five no-margin-top"></i>
|
|
<h6 class="black-text col-xs-12">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.</h6>
|
|
<span class="name black-text">John Carmack - Google Inc</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- end testimonial section -->
|
|
<!-- contact us section -->
|
|
<section id="contact-us" class="xs-onepage-section">
|
|
<div class="container">
|
|
<div class="row">
|
|
<!-- section title -->
|
|
<div class="col-md-12 text-center">
|
|
<span class="title-number">06</span><h3 class="section-title no-padding">Contact us</h3>
|
|
</div>
|
|
<!-- end section title -->
|
|
</div>
|
|
<div class="row margin-ten no-margin-bottom">
|
|
<div class="col-md-9 text-center center-col">
|
|
<div class="col-md-4 col-sm-4 text-center"><i class="icon-phone medium-icon black-text"></i><h6 class="black-text margin-two no-margin-bottom">123-456-7890</h6></div>
|
|
<div class="col-md-4 col-sm-4 text-center"><i class="icon-map-pin medium-icon black-text"></i><h6 class="black-text margin-two no-margin-bottom">Victoria, United States</h6></div>
|
|
<div class="col-md-4 col-sm-4 text-center"><i class="icon-envelope medium-icon black-text"></i><h6 class="black-text margin-two no-margin-bottom"><a class="black-text" href="mailto:no-reply@domain.com">no-reply@domain.com</a></h6></div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<!-- form -->
|
|
<form id="contactusform" action="javascript:void(0)" method="post">
|
|
<div class="col-md-10 col-sm-12 center-col">
|
|
<div class="row"><div class="col-md-12 col-sm-12"><div class="wide-separator-line margin-ten"></div></div>
|
|
<div class="col-md-12 col-sm-12"><div id="success"></div></div>
|
|
</div>
|
|
<div class="col-md-6 col-sm-12">
|
|
<input name="name" type="text" placeholder="Your Name" />
|
|
<input name="email" type="text" placeholder="Your Email" />
|
|
</div>
|
|
<div class="col-md-6 col-sm-12">
|
|
<textarea name="comment" placeholder="Your Message" ></textarea>
|
|
</div>
|
|
<div class="col-md-12 col-sm-12">
|
|
<div class="col-md-6 col-sm-6 no-padding-left"><span class="required">*Please complete all fields correctly</span></div>
|
|
<div class="col-md-3 col-sm-6 f-right no-padding-right"><input id="contact-us-button" name="send message" type="button" value="send message" class="btn btn-black no-margin-top f-right no-margin-lr"></div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<!-- end form -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- end contact us section -->
|
|
<!-- footer -->
|
|
<footer>
|
|
<div class=" bg-white footer-top">
|
|
<div class="container">
|
|
<div class="row margin-four">
|
|
<!-- phone -->
|
|
<div class="col-md-4 col-sm-4 text-center"><i class="icon-phone small-icon black-text"></i><h6 class="black-text margin-two no-margin-bottom">123-456-7890</h6></div>
|
|
<!-- end phone -->
|
|
<!-- address -->
|
|
<div class="col-md-4 col-sm-4 text-center"><i class="icon-map-pin small-icon black-text"></i><h6 class="black-text margin-two no-margin-bottom">Victoria, United States</h6></div>
|
|
<!-- end address -->
|
|
<!-- email -->
|
|
<div class="col-md-4 col-sm-4 text-center"><i class="icon-envelope small-icon black-text"></i><h6 class="margin-two no-margin-bottom"><a href="mailto:no-reply@domain.com" class="black-text">no-reply@domain.com</a></h6></div>
|
|
<!-- end email -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container onepage-footer-middle">
|
|
<div class="row">
|
|
<div class="col-md-12 col-sm-12 footer-social text-right text-center">
|
|
<!-- social media link -->
|
|
<a target="_blank" href="https://www.facebook.com/"><i class="fa fa-facebook"></i></a>
|
|
<a target="_blank" href="https://twitter.com/"><i class="fa fa-twitter"></i></a>
|
|
<a target="_blank" href="https://plus.google.com"><i class="fa fa-google-plus"></i></a>
|
|
<a target="_blank" href="https://dribbble.com/"><i class="fa fa-dribbble"></i></a>
|
|
<a target="_blank" href="https://www.youtube.com/"><i class="fa fa-youtube"></i></a>
|
|
<a target="_blank" href="https://www.linkedin.com/"><i class="fa fa-linkedin"></i></a>
|
|
<!-- end social media link -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container-fluid bg-dark-gray footer-bottom">
|
|
<div class="container">
|
|
<div class="row margin-three">
|
|
<!-- copyright -->
|
|
<div class="col-md-6 col-sm-6 col-xs-12 copyright text-left letter-spacing-1 xs-text-center xs-margin-bottom-one">
|
|
© 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> |