Helgen-Website/html/home-slider-bootstrap.html
2024-11-04 11:54:48 -06:00

1531 lines
117 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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 panel -->
<nav class="navbar navbar-default navbar-fixed-top nav-transparent overlay-nav sticky-nav nav-border-bottom" role="navigation">
<div class="container">
<div class="row">
<!-- logo -->
<div class="col-md-2 pull-left"><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>
<!-- end logo -->
<!-- search and cart -->
<div class="col-md-2 no-padding-left search-cart-header pull-right">
<div id="top-search">
<!-- nav search -->
<a href="#search-header" class="header-search-form"><i class="fa fa-search search-button"></i></a>
<!-- end nav search -->
</div>
<!-- search input-->
<form id="search-header" method="post" action="#" name="search-header" class="mfp-hide search-form-result">
<div class="search-form position-relative">
<button type="submit" class="fa fa-search close-search search-button"></button>
<input type="text" name="search" class="search-input" placeholder="Enter your keywords..." autocomplete="off">
</div>
</form>
<!-- end search input -->
<div class="top-cart">
<!-- nav shopping bag -->
<a href="#" class="shopping-cart">
<i class="fa fa-shopping-cart"></i>
<div class="subtitle">(1) Items</div>
</a>
<!-- end nav shopping bag -->
<!-- shopping bag content -->
<div class="cart-content">
<ul class="cart-list">
<li>
<a title="Remove item" class="remove" href="#">×</a>
<a href="#">
<img width="90" height="90" alt="" src="http://placehold.it/90x90">Leather Craft
</a>
<span class="quantity">1 × <span class="amount">$160</span></span>
<a href="#">Edit</a>
</li>
</ul>
<p class="total">Subtotal: <span class="amount">$160</span></p>
<p class="buttons">
<a href="shop-cart.html" class="btn btn-very-small-white no-margin-bottom margin-seven pull-left no-margin-lr">View Cart</a>
<a href="shop-checkout.html" class="btn btn-very-small-white no-margin-bottom margin-seven no-margin-right pull-right">Checkout</a>
</p>
</div>
<!-- end shopping bag content -->
</div>
</div>
<!-- end search and cart -->
<!-- toggle navigation -->
<div class="navbar-header col-sm-8 col-xs-2 pull-right">
<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>
<!-- toggle navigation end -->
<!-- main menu -->
<div class="col-md-8 no-padding-right accordion-menu text-right">
<div class="navbar-collapse collapse">
<ul id="accordion" class="nav navbar-nav navbar-right panel-group">
<!-- menu item -->
<li class="dropdown panel">
<a href="#collapse1" class="dropdown-toggle collapsed" data-toggle="collapse" data-parent="#accordion" data-hover="dropdown">Home <i class="fa fa-angle-down"></i></a>
<!-- sub menu -->
<ul id="collapse1" class="dropdown-menu mega-menu panel-collapse collapse mega-menu-full">
<!-- sub menu column -->
<li class="mega-menu-column col-sm-3">
<!-- sub menu item -->
<ul>
<li class="dropdown-header">Pre Made Homepage</li>
<li><a href="index.html">Home main</a></li>
<li><a href="home-fashion.html">Home fashion</a></li>
<li><a href="home-architecture.html">Home architecture</a></li>
<li><a href="home-spa.html">Home spa</a></li>
<li><a href="home-agency.html">Home agency</a></li>
<li><a href="home-restaurant.html">Home restaurant</a></li>
<li><a href="home-travel-agency.html">Home travel agency</a></li>
<li><a href="home-corporate.html">Home corporate</a></li>
<li><a href="home-photography.html">Home photography</a></li>
<li><a href="home-shop.html">Home shop</a></li>
<li><a href="home-blog.html">Home blog</a></li>
<li><a href="home-blog-grid.html">Home blog grid</a></li>
</ul>
<!-- end sub menu item -->
</li>
<!-- sub menu column end -->
<!-- sub menu column -->
<li class="mega-menu-column col-sm-3">
<!-- sub menu item -->
<ul>
<li class="dropdown-header">Other</li>
<li><a href="home-masonry-portfolio.html">Home - masonry portfolio</a></li>
<li><a href="home-background-slider.html">Home - background slider</a></li>
<li><a href="home-full-screen-video.html">Home - full screen video</a></li>
<li><a href="home-half-screen-video.html">Home - half screen video</a></li>
<li><a href="home-text-rotator.html">Home - text rotator</a></li>
<li><a href="home-countdown-timer.html">Home - coming soon</a></li>
<li><a href="home-countdown-timer-animation.html">Home - coming soon (Animation) <span class="menu-new">new</span></a></li>
<li><a href="home-countdown-timer-video.html">Home - coming soon (video)</a></li>
<li><a href="home-full-width-image.html">Home - full width image</a></li>
<li><a href="home-gradient-with-image.html">Home - gradient with image</a></li>
</ul>
<!-- end sub menu item -->
</li>
<!-- end sub menu column -->
<!-- sub menu column -->
<li class="mega-menu-column col-sm-3">
<!-- sub menu item -->
<ul>
<li class="dropdown-header">Parallax Image / Typography</li>
<li><a href="home-parallax1.html">Parallax Image - option 1 </a></li>
<li><a href="home-parallax2.html">Parallax Image - option 2</a></li>
<li><a href="home-parallax3.html">Parallax Image - option 3 </a></li>
<li><a href="home-parallax4.html">Parallax Image - option 4</a></li>
<li><a href="home-parallax5.html">Parallax Image - option 5</a></li>
<li><a href="home-parallax.html">Full parallax home page</a></li>
</ul>
<!-- end sub menu item -->
<!-- sub menu item -->
<ul>
<li class="dropdown-header">Carousel slider</li>
<li><a href="home-slider-bootstrap.html">Bootstrap slider - full screen</a></li>
<li><a href="home-slider-revolution1.html">Revolution slider - full screen</a></li>
<li><a href="home-slider-revolution2.html">Revolution slider - half screen</a></li>
<li><a href="home-slider-owl1.html">owl slider - full screen</a></li>
<li><a href="home-slider-owl2.html">owl slider - half screen</a></li>
</ul>
<!-- end sub menu item -->
</li>
<!-- end sub menu column -->
<!-- sub menu column -->
<li class="mega-menu-column col-sm-3">
<!-- sub menu item -->
<ul>
<li class="dropdown-header">Creative Intro Pages</li>
<li><a href="intro-fashion.html">Fashion Intro</a></li>
<li><a href="intro-restaurant.html">Restaurant Intro</a></li>
<li><a href="intro-travel.html">Travel Intro</a></li>
<li><a href="intro-travel2.html">Travel Intro - V2</a></li>
<li><a href="intro-agency.html">Agency Intro</a></li>
<li><a href="intro-agency2.html">Agency Intro - V2</a></li>
<li><a href="intro-product.html">Product Intro</a></li>
</ul>
<!-- end sub menu item -->
</li>
<!-- end sub menu column -->
</ul>
<!-- end sub menu -->
</li>
<!-- end menu item -->
<!-- menu item -->
<li class="dropdown panel">
<a href="#collapse2" class="dropdown-toggle collapsed" data-toggle="collapse" data-parent="#accordion" data-hover="dropdown">One Page <i class="fa fa-angle-down"></i></a>
<!-- sub menu -->
<ul id="collapse2" class="dropdown-menu mega-menu panel-collapse collapse mega-menu-full">
<li class="mega-menu-column col-sm-3">
<!-- sub menu item -->
<ul>
<li class="dropdown-header">Pre Made Homepage</li>
<li><a href="onepage-bootstrap-slider.html">Home main</a></li>
<li><a href="onepage-fashion.html">Home fashion</a></li>
<li><a href="onepage-architecture.html">Home architecture</a></li>
<li><a href="onepage-spa.html">Home spa</a></li>
<li><a href="onepage-agency.html">Home agency</a></li>
<li><a href="onepage-agency-option2.html">Home agency - option 2 <span class="menu-new">new</span></a></li>
<li><a href="onepage-restaurant.html">Home restaurant</a></li>
<li><a href="onepage-travel-agency.html">Home travel agency</a></li>
<li><a href="onepage-corporate.html">Home corporate</a></li>
<li><a href="onepage-personal.html">Home personal</a></li>
<li><a href="onepage-wedding.html">Home wedding</a></li>
<li><a href="onepage-landing.html">Landing page</a></li>
</ul>
<!-- end sub menu item -->
</li>
<li class="mega-menu-column col-sm-3">
<!-- sub menu item -->
<ul>
<li class="dropdown-header">Parallax Image / Typography</li>
<li><a href="onepage-parallax1.html">Parallax Image - option 1 </a></li>
<li><a href="onepage-parallax2.html">Parallax Image - option 2</a></li>
<li><a href="onepage-parallax3.html">Parallax Image - option 3 </a></li>
<li><a href="onepage-parallax4.html">Parallax Image - option 4</a></li>
<li><a href="onepage-parallax5.html">Parallax Image - option 5</a></li>
</ul>
<!-- end sub menu item -->
</li>
<li class="mega-menu-column col-sm-3">
<!-- sub menu item -->
<ul>
<li class="dropdown-header">Other</li>
<li><a href="onepage-masonry-portfolio.html">Home - masonry portfolio</a></li>
<li><a href="onepage-background-slider.html">Home - background slider</a></li>
<li><a href="onepage-full-screen-video.html">Home - full screen video</a></li>
<li><a href="onepage-text-rotator.html">Home - text rotator</a></li>
<li><a href="onepage-full-width-image.html">Home - full width image</a></li>
</ul>
<!-- end sub menu item -->
</li>
<li class="mega-menu-column col-sm-3">
<!-- sub menu item -->
<ul>
<li class="dropdown-header">Carousel slider</li>
<li><a href="onepage-bootstrap-slider.html">Bootstrap slider - full screen</a></li>
<li><a href="onepage-slider-revolution1.html">Revolution slider - full screen</a></li>
<li><a href="onepage-slider-revolution2.html">Revolution slider - half screen</a></li>
<li><a href="onepage-slider-owl1.html">owl slider - full screen</a></li>
<li><a href="onepage-slider-owl2.html">owl slider - half screen</a></li>
</ul>
<!-- end sub menu item -->
</li>
</ul>
<!-- end sub menu -->
</li>
<!-- end menu item -->
<!-- menu item -->
<li class="dropdown panel">
<a href="#collapse5" class="dropdown-toggle collapsed" data-toggle="collapse" data-parent="#accordion" data-hover="dropdown">Portfolio <i class="fa fa-angle-down"></i></a>
<!-- sub menu -->
<ul id="collapse5" class="dropdown-menu mega-menu panel-collapse collapse mega-menu-full">
<li class="mega-menu-column col-sm-3">
<!-- sub menu item -->
<ul>
<li class="dropdown-header">Grid</li>
<li><a href="portfolio-grid-2columns.html">2 Columns</a></li>
<li><a href="portfolio-grid-3columns.html">3 Columns</a></li>
<li><a href="portfolio-grid-4columns.html">4 Columns</a></li>
<li><a href="portfolio-grid-5columns.html">5 Columns</a></li>
</ul>
<!-- end sub menu item -->
<!-- sub menu item -->
<ul>
<li class="dropdown-header">Grid - Gutter</li>
<li><a href="portfolio-grid-gutter-2columns.html">2 Columns</a></li>
<li><a href="portfolio-grid-gutter-3columns.html">3 Columns</a></li>
<li><a href="portfolio-grid-gutter-4columns.html">4 Columns</a></li>
<li><a href="portfolio-grid-gutter-5columns.html">5 Columns</a></li>
</ul>
<!-- end sub menu item -->
<!-- sub menu item -->
<ul>
<li class="dropdown-header">Grid with Title</li>
<li><a href="portfolio-grid-with-title-2columns.html">2 Columns</a></li>
<li><a href="portfolio-grid-with-title-3columns.html">3 Columns</a></li>
<li><a href="portfolio-grid-with-title-4columns.html">4 Columns</a></li>
<li><a href="portfolio-grid-with-title-5columns.html">5 Columns</a></li>
</ul>
<!-- end sub menu item -->
</li>
<li class="mega-menu-column col-sm-3">
<!-- sub menu item -->
<ul>
<li class="dropdown-header">Wide</li>
<li><a href="portfolio-wide-2columns.html">2 Columns</a></li>
<li><a href="portfolio-wide-3columns.html">3 Columns</a></li>
<li><a href="portfolio-wide-4columns.html">4 Columns</a></li>
<li><a href="portfolio-wide-5columns.html">5 Columns</a></li>
</ul>
<!-- end sub menu item -->
<!-- sub menu item -->
<ul>
<li class="dropdown-header">Wide - Gutter</li>
<li><a href="portfolio-wide-gutter-2columns.html">2 Columns</a></li>
<li><a href="portfolio-wide-gutter-3columns.html">3 Columns</a></li>
<li><a href="portfolio-wide-gutter-4columns.html">4 Columns</a></li>
<li><a href="portfolio-wide-gutter-5columns.html">5 Columns</a></li>
</ul>
<!-- end sub menu item -->
<!-- sub menu item -->
<ul>
<li class="dropdown-header">Wide with Title</li>
<li><a href="portfolio-wide-with-title-2columns.html">2 Columns</a></li>
<li><a href="portfolio-wide-with-title-gutter-3columns.html">3 Columns</a></li>
<li><a href="portfolio-wide-with-title-gutter-4columns.html">4 Columns</a></li>
<li><a href="portfolio-wide-with-title-gutter-5columns.html">5 Columns</a></li>
</ul>
<!-- sub menu item -->
</li>
<li class="mega-menu-column col-sm-3">
<!-- sub menu item -->
<ul>
<li class="dropdown-header">Masonry</li>
<li><a href="portfolio-masonry-2columns.html">2 Columns</a></li>
<li><a href="portfolio-masonry-3columns.html">3 Columns</a></li>
<li><a href="portfolio-masonry-4columns.html">4 Columns</a></li>
<li><a href="portfolio-masonry-5columns.html">5 Columns</a></li>
</ul>
<!-- end sub menu item -->
<!-- sub menu item -->
<ul>
<li class="dropdown-header">Other</li>
<li><a href="portfolio-parallax.html">Parallax</a></li>
<li><a href="portfolio-short-description.html">With Short Description</a></li>
<li><a href="portfolio-lightbox.html">Portfolio lightbox</a></li>
</ul>
<!-- end sub menu item -->
</li>
<li class="mega-menu-column col-sm-3">
<!-- sub menu item -->
<ul>
<li class="dropdown-header">Single Project Page</li>
<li><a href="single-project-page1.html">Single Project Page 1</a></li>
<li><a href="single-project-page2.html">Single Project Page 2</a></li>
<li><a href="single-project-page3.html">Single Project Page 3</a></li>
<li><a href="single-project-page4.html">Single Project Page 4</a></li>
<li><a href="single-project-page5.html">Single Project Page 5</a></li>
</ul>
<!-- end sub menu item -->
<!-- sub menu item -->
<ul>
<li class="dropdown-header">Ajax - Project Page</li>
<li><a href="onepage-single-project-page1.html" class="simple-ajax-popup-align-top">Single Project Page 1</a></li>
<li><a href="onepage-single-project-page2.html" class="simple-ajax-popup-align-top">Single Project Page 2</a></li>
<li><a href="onepage-single-project-page3.html" class="simple-ajax-popup-align-top">Single Project Page 3</a></li>
<li><a href="onepage-single-project-page4.html" class="simple-ajax-popup-align-top">Single Project Page 4</a></li>
<li><a href="onepage-single-project-page5.html" class="simple-ajax-popup-align-top">Single Project Page 5</a></li>
</ul>
<!-- end sub menu item -->
</li>
</ul>
<!-- end sub menu -->
</li>
<!-- end menu item -->
<!-- menu item -->
<li class="dropdown panel">
<a href="#collapse4" class="dropdown-toggle collapsed" data-toggle="collapse" data-parent="#accordion" data-hover="dropdown">Pages <i class="fa fa-angle-down"></i></a>
<!-- sub menu -->
<ul id="collapse4" class="dropdown-menu mega-menu panel-collapse collapse mega-menu-full">
<!-- sub menu column -->
<li class="mega-menu-column col-sm-3">
<!-- sub menu item -->
<ul>
<li class="dropdown-header">Introduction</li>
<li><a href="about-us.html">About Us</a></li>
<li><a href="about-us-option2.html">About Us - Option 2 <span class="menu-new">new</span></a></li>
<li><a href="team-members.html">Team Members</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="our-clients.html">Our Clients</a></li>
<li><a href="careers.html">Careers</a></li>
<li><a href="contact-us.html">Contact Us</a></li>
<li><a href="sitemap.html">Sitemap</a></li>
</ul>
<!-- end sub menu item -->
</li>
<!-- end sub menu column -->
<!-- sub menu column -->
<li class="mega-menu-column col-sm-3">
<!-- sub menu item -->
<ul>
<li class="dropdown-header">Utility</li>
<li><a href="services.html">Services</a></li>
<li><a href="faq.html">FAQ'S</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="register.html">Register</a></li>
<li><a href="404.html">Not Found (404)</a></li>
<li><a href="maintenance.html">Maintenance Page</a></li>
<li><a href="home-countdown-timer.html">Under Construction</a></li>
</ul>
<!-- end sub menu item -->
</li>
<!-- end sub menu column -->
<!-- sub menu column -->
<li class="mega-menu-column col-sm-3">
<!-- sub menu item -->
<ul>
<li class="dropdown-header">Page Layout</li>
<li><a href="page-full-width.html">Full Width</a></li>
<li><a href="page-full-width-wide.html">Full Width - Wide</a></li>
<li><a href="page-left-sidebar.html">Left Sidebar</a></li>
<li><a href="page-right-sidebar.html">Right Sidebar</a></li>
<li><a href="page-both-sidebar.html">Both Sidebar</a></li>
</ul>
<!-- end sub menu item -->
</li>
<!-- end sub menu column -->
<!-- sub menu column -->
<li class="mega-menu-column col-sm-3">
<!-- sub menu item -->
<ul>
<li class="dropdown-header">Gallery</li>
<li><a href="gallery-1columns.html">1 Columns</a></li>
<li><a href="gallery-2columns.html">2 Columns</a></li>
<li><a href="gallery-3columns.html">3 Columns</a></li>
<li><a href="gallery-4columns.html">4 Columns</a></li>
<li><a href="gallery-6columns.html">6 Columns</a></li>
</ul>
<!-- end sub menu item -->
</li>
<!-- end sub menu column -->
</ul>
<!-- end sub menu -->
</li>
<!-- end menu item -->
<!-- menu item -->
<li class="dropdown panel">
<a href="#collapse3" class="dropdown-toggle collapsed" data-toggle="collapse" data-parent="#accordion" data-hover="dropdown">Elements<i class="fa fa-angle-down"></i></a>
<!-- sub menu -->
<ul id="collapse3" class="dropdown-menu mega-menu panel-collapse collapse mega-menu-full">
<li class="mega-menu-column col-sm-3">
<!-- sub menu item -->
<ul>
<li class="dropdown-header">Slider</li>
<li><a href="slider-bootstrap.html">Bootstrap</a></li>
<li><a href="slider-revolution.html">Revolution</a></li>
<li><a href="slider-owl.html">Owl</a></li>
</ul>
<!-- end sub menu item -->
<!-- sub menu item -->
<ul>
<li class="dropdown-header">Header</li>
<li><a href="header-light.html">Light Version</a></li>
<li><a href="header-light-without-cart-search.html">Light Version - Option 2 <span class="menu-new">new</span></a></li>
<li><a href="header-dark.html">Dark Version</a></li>
<li><a href="header-transparent-dark.html">Transparent Version - Dark</a></li>
<li><a href="header-transparent-light.html">Transparent Version - Light</a></li>
<li><a href="header-static-sticky.html">Static Sticky</a></li>
<li><a href="onepage-hamburger.html">Hamburger Menu <span class="menu-new">new</span></a></li>
<li><a href="onepage-hamburger-option2.html">Hamburger Menu - Option 2 <span class="menu-new">new</span></a></li>
<li><a href="onepage-agency-option2.html">Hamburger Menu - Option 3 <span class="menu-new">new</span></a></li>
</ul>
<!-- end sub menu item -->
</li>
<li class="mega-menu-column col-sm-3">
<!-- sub menu item -->
<ul>
<li class="dropdown-header">Page Titles</li>
<li><a href="page-title-white.html">Title white</a></li>
<li><a href="page-title-gray.html">Title gray</a></li>
<li><a href="page-title-dark-gray.html">Title dark gray</a></li>
<li><a href="page-title-black.html">Title black</a></li>
<li><a href="page-title-with-image.html">Title with image</a></li>
<li><a href="page-title-large.html">Title large</a></li>
<li><a href="page-title-small-white.html">Title small white</a></li>
<li><a href="page-title-small-gray.html">Title small gray</a></li>
<li><a href="page-title-small-dark-gary.html">Title small dark gray</a></li>
<li><a href="page-title-small-black.html">Title small black</a></li>
<li><a href="page-title-center-align.html">Title center align</a></li>
</ul>
<!-- end sub menu item -->
</li>
<li class="mega-menu-column col-sm-3">
<!-- sub menu item -->
<ul>
<li class="dropdown-header">Other</li>
<li><a href="accordions.html"><i class="fa fa-plus-square"></i>Accordions</a></li>
<li><a href="progress-bar.html"><i class="fa fa-tasks"></i>Progress Bar</a></li>
<li><a href="buttons.html"><i class="fa fa-link"></i>Buttons</a></li>
<li><a href="features-box.html"><i class="fa fa-th-large"></i>Features Box</a></li>
<li><a href="form.html"><i class="fa fa-align-justify"></i>Form</a></li>
<li><a href="grid.html"><i class="fa fa-th"></i>Grid</a></li>
<li><a href="icons-et-line.html"><i class="fa fa-star-o"></i>Icons Et-line</a></li>
<li><a href="icons-font-awesome.html"><i class="fa fa-star"></i>Icons Font Awesome</a></li>
<li><a href="alert-massage.html"><i class="fa fa-comment"></i>Alert massage</a></li>
<li><a href="tabs.html"><i class="fa fa-outdent"></i>Tabs</a></li>
<li><a href="typography.html"><i class="fa fa-font"></i>Typography</a></li>
<li><a href="video-sound.html"><i class="fa fa-video-camera"></i>Video / Sound</a></li>
<li><a href="counter-and-skills.html"><i class="fa fa-circle-o-notch"></i>Counter and Skills</a></li>
</ul>
<!-- end sub menu item -->
</li>
<li class="mega-menu-column col-sm-3">
<!-- sub menu item -->
<ul>
<li class="dropdown-header">Image Gallery</li>
<li><a href="single-image-lightbox.html">Single Image Lightbox</a></li>
<li><a href="lightbox-gallery.html">Lightbox Gallery</a></li>
<li><a href="zoom-gallery.html">Zoom gallery</a></li>
<li><a href="popup-with-form.html">Popup with Form</a></li>
<li><a href="modal-popup.html">Modal Popup</a></li>
<li><a href="open-youtube-video.html">Open YouTube Video</a></li>
<li><a href="open-vimeo-video.html">Open Vimeo Video</a></li>
<li><a href="open-google-map.html">Open Google Map</a></li>
</ul>
<!-- end sub menu item -->
</li>
</ul>
<!-- end sub menu -->
</li>
<!-- end menu item -->
<!-- menu item -->
<li class="dropdown panel">
<a href="#collapse6" class="dropdown-toggle collapsed" data-toggle="collapse" data-parent="#accordion" data-hover="dropdown">Blog <i class="fa fa-angle-down"></i></a>
<!-- sub menu -->
<ul id="collapse6" class="dropdown-menu panel-collapse collapse mega-menu-full" role="menu">
<li class="mega-menu-column col-sm-3">
<!-- sub menu item -->
<ul>
<li class="dropdown-header">Grid</li>
<li><a href="blog-grid-2columns.html">2 Columns</a></li>
<li><a href="blog-grid-3columns.html">3 Columns</a></li>
<li><a href="blog-grid-4columns.html">4 Columns</a></li>
<li><a href="blog-grid-full-width.html">Full width</a></li>
</ul>
<!-- end sub menu item -->
</li>
<li class="mega-menu-column col-sm-3">
<!-- sub menu item -->
<ul>
<li class="dropdown-header">Masonry</li>
<li><a href="blog-masonry-2columns.html">2 Columns</a></li>
<li><a href="blog-masonry-3columns.html">3 Columns</a></li>
<li><a href="blog-masonry-4columns.html">4 Columns</a></li>
<li><a href="blog-masonry-full-width.html">Full width</a></li>
</ul>
<!-- end sub menu item -->
</li>
<li class="mega-menu-column col-sm-3">
<!-- sub menu item -->
<ul>
<li class="dropdown-header">Default</li>
<li><a href="blog-right-sidebar.html">Right sidebar</a></li>
<li><a href="blog-left-sidebar.html">Left sidebar</a></li>
<li><a href="blog-full-width.html">Full width</a></li>
</ul>
<!-- end sub menu item -->
</li>
<li class="mega-menu-column col-sm-3">
<!-- sub menu item -->
<ul>
<li class="dropdown-header">Single</li>
<li><a href="blog-single-right-sidebar.html">Right sidebar</a></li>
<li><a href="blog-single-left-sidebar.html">Left sidebar</a></li>
<li><a href="blog-single-full-width.html">Full width</a></li>
<li><a href="blog-single-full-width-with-image-slider.html">Full width with image slider</a></li>
<li><a href="blog-single-full-width-with-lightbox-gallery.html">Full width with lightbox gallery</a></li>
</ul>
<!-- end sub menu item -->
</li>
</ul>
<!-- end sub menu -->
</li>
<!-- end menu item -->
<!-- menu item -->
<li class="dropdown panel simple-dropdown">
<a href="#collapse7" class="dropdown-toggle collapsed" data-toggle="collapse" data-parent="#accordion" data-hover="dropdown">Shop <i class="fa fa-angle-down"></i></a>
<!-- sub menu single -->
<!-- sub menu item -->
<ul id="collapse7" class="dropdown-menu panel-collapse collapse" role="menu">
<li class="dropdown-header">For Shopping Cart</li>
<li><a href="home-shop.html">Shop homepage</a></li>
<li><a href="shop-with-sidebar.html">Shop with sidebar - grid</a></li><li><a href="shop-with-sidebar-list.html">Shop with sidebar - list</a></li>
<li><a href="shop-full-width.html">Shop full width</a></li>
<li><a href="shop-single-product.html">Single product</a></li>
<li><a href="shop-cart.html">Cart</a></li>
<li><a href="shop-checkout.html">Checkout</a></li>
</ul>
<!-- end sub menu item -->
<!-- end sub menu single -->
</li>
<!-- end menu item -->
</ul>
</div>
</div>
<!-- end main menu -->
</div>
</div>
</nav>
<!-- end navigation panel -->
<!-- slider -->
<section id="myCarousel" class="carousel slide carousel-slide">
<!-- slider indicators -->
<ol class="carousel-indicators xs-indicators-black">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- end slider indicators -->
<!-- slider images -->
<div class="carousel-inner">
<!-- slider item -->
<div class="item active full-screen">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url('http://placehold.it/1920x1080');"></div>
<div class="opacity-full bg-white display-none xs-display-block"></div>
<div class="container">
<div class="row">
<div class="container full-screen position-relative">
<div class="slider-typography">
<div class="slider-text-middle-main">
<div class="slider-text-middle slider-text-middle6 padding-left-right-px wow fadeInUp slider-text">
<div class="col-md-3 col-sm-5 col-xs-6 text-left animated fadeInUp no-padding">
<h1>Innovation Through </h1>
<div class="separator-line bg-yellow no-margin-lr"></div>
<span>We consult on digital strategy & craft meaningful connections with your customers across web.</span>
<a class="highlight-button btn inner-link no-margin-lr no-margin-bottom" href="#portfolio">Digital Marketing</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end slider item -->
<!-- slider item -->
<div class="item full-screen">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url('http://placehold.it/1920x1080');"></div>
<div class="opacity-full bg-white display-none xs-display-block"></div>
<div class="container">
<div class="row">
<div class="container full-screen position-relative">
<div class="slider-typography">
<div class="slider-text-middle-main">
<div class="slider-text-middle slider-text-middle6 padding-left-right-px wow fadeInUp slider-text">
<div class="col-md-3 col-sm-5 col-xs-6 text-left animated fadeInUp no-padding">
<h1>Digital Trend Challenges</h1>
<div class="separator-line bg-yellow no-margin-lr"></div>
<span>We believe in design, strategy and the ability of technology to transform organizations and lives.</span>
<a class="highlight-button btn inner-link no-margin-lr no-margin-bottom" href="#portfolio">Digital Marketing</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end slider item -->
<!-- slider item -->
<div class="item full-screen">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url('http://placehold.it/1920x1080');"></div>
<div class="opacity-full bg-white display-none xs-display-block"></div>
<div class="container">
<div class="row">
<div class="container full-screen position-relative">
<div class="slider-typography">
<div class="slider-text-middle-main">
<div class="slider-text-middle slider-text-middle6 padding-left-right-px wow fadeInUp slider-text">
<div class="col-md-3 col-sm-5 col-xs-6 text-left animated fadeInUp no-padding">
<h1>Innovative Businesses</h1>
<div class="separator-line bg-yellow no-margin-lr"></div>
<span>We create premium designs, technology, ecommerce, mobile & digital campaigns.</span>
<a class="highlight-button btn inner-link no-margin-lr no-margin-bottom" href="#blog">Go Emotions!</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end slider item -->
</div>
<!-- slider controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev"> <img src="images/arrow-pre.png" alt="" /> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <img src="images/arrow-next.png" alt="" /> </a>
<!-- end slider controls -->
</section>
<!-- end slider -->
<!-- about section -->
<section class="no-padding-bottom wow fadeIn">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-10 text-center center-col">
<span class="margin-five no-margin-top display-block letter-spacing-2">EST. 2011</span>
<h1>A digital studio crafting beautiful experiences.</h1>
<p class="text-med width-90 center-col margin-seven no-margin-bottom"> We've been crafting beautiful websites, launching stunning brands and making clients happy for years. With our prestigious craftsmanship, remarkable client care and passion for design.</p>
</div>
</div>
</div>
<div class="container-fluid margin-five no-margin-bottom">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12 bg-fast-yellow padding-three text-center">
<span class="text-small text-uppercase font-weight-600 black-text letter-spacing-2">Web Design &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Graphics &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Magento &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; WordPress &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Applications</span>
</div>
</div>
</div>
</section>
<!-- end about section -->
<!-- features section -->
<section id="features" class="features wow fadeIn">
<div class="container">
<div class="row">
<!-- section title -->
<div class="col-md-12 text-center">
<h3 class="section-title">Why Choose Us?</h3>
</div>
<!-- end section title -->
</div>
<div class="row">
<div class="col-md-4 col-sm-12">
<!-- features item -->
<div class="features-section col-md-12 col-sm-6 no-padding wow fadeInUp">
<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>Elegant / Unique design</h5>
<div class="separator-line bg-yellow"></div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the standard dummy text.</p>
</div>
</div>
<!-- end features item -->
<!-- features item -->
<div class="features-section no-margin col-md-12 col-sm-6 no-padding wow fadeInUp">
<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>True Responsiveness</h5>
<div class="separator-line bg-yellow"></div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the standard dummy text.</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 wow fadeInUp">
<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>Parallax Slider</h5>
<div class="separator-line bg-yellow"></div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the standard dummy text.</p>
</div>
</div>
<!-- end features item -->
<!-- features item -->
<div class="features-section col-md-12 col-sm-6 no-padding wow fadeInUp">
<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>Lightbox photo Gallery</h5>
<div class="separator-line bg-yellow"></div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the standard dummy text.</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 wow fadeInUp">
<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>Different Layout Type</h5>
<div class="separator-line bg-yellow"></div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the standard dummy text.</p>
</div>
</div>
<!-- end features item -->
<!-- features item -->
<div class="features-section col-md-12 col-sm-6 no-padding wow fadeInUp">
<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>Skills and Accordians</h5>
<div class="separator-line bg-yellow"></div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the standard dummy text.</p>
</div>
</div>
<!-- end features item -->
</div>
</div>
</div>
</section>
<!-- end features section -->
<!-- counter section -->
<section id="counter" class="fix-background" style="background-image:url('http://placehold.it/1920x1100');">
<div class="opacity-full bg-dark-gray"></div>
<div class="container position-relative">
<div class="row">
<!-- counter item -->
<div class="col-md-3 col-sm-6 bottom-margin text-center counter-section wow fadeInUp sm-margin-bottom-ten" data-wow-duration="300ms">
<i class="icon-heart medium-icon"></i>
<span class="timer counter-number white-text main-font font-weight-600" data-to="516" data-speed="7000"></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 wow fadeInUp sm-margin-bottom-ten" data-wow-duration="600ms">
<i class="icon-happy medium-icon"></i>
<span class="timer counter-number white-text main-font font-weight-600" data-to="478" data-speed="7000"></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 wow fadeInUp xs-margin-bottom-ten" data-wow-duration="900ms">
<i class="icon-anchor medium-icon"></i>
<span class="timer counter-number white-text main-font font-weight-600" data-to="652" data-speed="7000"></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 wow fadeInUp" data-wow-duration="1200ms">
<i class="icon-chat medium-icon"></i>
<span class="timer counter-number white-text main-font font-weight-600" data-to="458" data-speed="7000"></span>
<span class="counter-title light-gray-text">Comments Reserved</span>
</div>
<!-- end counter item -->
</div>
</div>
</section>
<!-- end counter section -->
<!-- portfolio section -->
<section id="portfolio" class="grid-wrap work-4col margin-top-section no-margin-top no-padding-bottom wow fadeIn">
<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">Latest Work</h3>
</div>
<!-- end section title -->
<div class="col-md-3 col-sm-10 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>
<div class="col-md-12 text-center">
<div class="text-center">
<!-- filter navigation -->
<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>
<!-- end filter navigation -->
</div>
</div>
<div class="grid-gallery overflow-hidden">
<div class="tab-content">
<ul class="masonry-items grid">
<!-- portfolio item -->
<li class="html jquery wordpress">
<figure>
<div class="gallery-img"><a href="single-project-page1.html"><img src="http://placehold.it/800x600" alt=""></a></div>
<figcaption>
<h3><a href="single-project-page1.html">Herbal Beauty Salon</a></h3>
<p>Branding &amp; Identity</p>
</figcaption>
</figure>
</li>
<!-- end portfolio item -->
<!-- portfolio item -->
<li class="html magento wordpress">
<figure>
<div class="gallery-img"><a href="single-project-page2.html"><img src="http://placehold.it/800x1200" alt=""></a></div>
<figcaption>
<h3><a href="single-project-page2.html">Tailoring Interior </a></h3>
<p>Branding &amp; Identity</p>
</figcaption>
</figure>
</li>
<!-- end portfolio item -->
<!-- portfolio item -->
<li class="jquery magento wordpress">
<figure>
<div class="gallery-img"><a href="single-project-page3.html"><img src="http://placehold.it/800x600" alt=""></a></div>
<figcaption>
<h3><a href="single-project-page3.html">Pixflow Studio</a></h3>
<p>Web &amp; Branding</p>
</figcaption>
</figure>
</li>
<!-- end portfolio item -->
<!-- portfolio item -->
<li class="wordpress magento jquery">
<figure>
<div class="gallery-img"><a href="single-project-page4.html"><img src="http://placehold.it/800x1200" alt=""></a></div>
<figcaption>
<h3><a href="single-project-page4.html">Kaya Skin Care</a></h3>
<p>UI Design &amp; Identity</p>
</figcaption>
</figure>
</li>
<!-- end portfolio item -->
<!-- portfolio item -->
<li class="html jquery">
<figure>
<div class="gallery-img"><a href="single-project-page5.html"><img src="http://placehold.it/800x600" alt=""></a></div>
<figcaption>
<h3><a href="single-project-page5.html">Third Eye Glasses</a></h3>
<p>Logo &amp; Brochure</p>
</figcaption>
</figure>
</li>
<!-- end portfolio item -->
<!-- portfolio item -->
<li class="html magento">
<figure>
<div class="gallery-img"><a href="single-project-page1.html"><img src="http://placehold.it/800x600" alt=""></a></div>
<figcaption>
<h3><a href="standard-with-slider.html">Rubber Studio</a></h3>
<p>Branding &amp; Identity</p>
</figcaption>
</figure>
</li>
<!-- end portfolio item -->
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- end portfolio section -->
<!-- work process 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>
<!-- end work process section -->
<!-- highlight section -->
<section class="bg-fast-yellow no-padding wow fadeInUp">
<div class="container">
<div class="row padding-five sm-text-center">
<div class="col-md-1">
<i class="medium-icon black-text no-margin icon-toolbox"></i>
</div>
<div class="col-md-6 no-padding">
<span class="text-med text-uppercase letter-spacing-2 margin-two black-text font-weight-600 xs-margin-top-six xs-margin-bottom-six display-block">Want to see more amazing works?</span>
</div>
<div class="col-md-5 no-padding">
<a class="highlight-button-dark btn btn-medium button xs-margin-bottom-five xs-no-margin-right" href="portfolio-wide-with-title-gutter-4columns.html">View Portfolio</a>
<a class="highlight-button btn btn-medium button xs-margin-bottom-five xs-no-margin-right" href="#">Subscribe Us</a>
</div>
</div>
</div>
</section>
<!-- end highlight section -->
<!-- services section -->
<section class="corporate-standards no-padding-bottom wow fadeIn">
<div class="container">
<div class="row">
<!-- section title -->
<div class="col-md-12 text-center">
<h3 class="section-title no-padding-bottom">Our Services</h3>
</div>
<!-- end section title -->
</div>
</div>
<div class="container-fluid margin-five no-margin-bottom no-padding">
<div class="row no-margin">
<!-- tab -->
<div class="col-md-12 col-sm-12 center-col text-center no-padding" id="animated-tab">
<!-- tab navigation -->
<ul class="nav nav-tabs margin-five no-margin-top xs-margin-bottom-seven">
<li class="nav active"><a href="#tab6_sec1" data-toggle="tab" class="xs-min-height-inherit xs-no-padding"><span><i class="icon-picture"></i></span></a><br><span class="text-small text-uppercase letter-spacing-3 margin-five font-weight-600 xs-letter-spacing-none xs-display-none">Branding</span></li>
<li class="nav"><a href="#tab6_sec2" data-toggle="tab" class="xs-min-height-inherit xs-no-padding"><span><i class="icon-tools"></i></span></a><br><span class="text-small text-uppercase letter-spacing-3 margin-five font-weight-600 xs-letter-spacing-none xs-display-none">Design</span></li>
<li class="nav"><a href="#tab6_sec3" data-toggle="tab" class="xs-min-height-inherit xs-no-padding"><span><i class="icon-mobile"></i></span></a><br><span class="text-small text-uppercase letter-spacing-3 margin-five font-weight-600 xs-letter-spacing-none xs-display-none">Development</span></li>
<li class="nav"><a href="#tab6_sec4" data-toggle="tab" class="xs-min-height-inherit xs-no-padding"><span><i class="icon-camera"></i></span></a><br><span class="text-small text-uppercase letter-spacing-3 margin-five font-weight-600 xs-letter-spacing-none xs-display-none">Photography</span></li>
</ul>
<!-- end tab navigation -->
<!-- tab content section -->
<div class="tab-content">
<!-- tab content -->
<div id="tab6_sec1" class="text-center center-col tab-pane fade in active">
<div class="tab-pane fade in">
<div class="col-lg-6 col-md-6 no-padding corporate-standards-img cover-background position-relative" style="background-image:url('http://placehold.it/1200x756');">
<div class="opacity-medium bg-dark-gray"></div>
<p class="title-small text-uppercase corporate-standards-title white-text letter-spacing-7"><span class="title-extra-large no-letter-spacing yellow-text">01</span><br>Branding</p>
</div>
<div class="col-lg-6 col-md-6 corporate-standards-text sm-margin-lr-four sm-margin-top-four xs-padding-tb-ten">
<div class="img-border-small-fix border-gray"></div>
<i class="icon-picture large-icon yellow-text"></i>
<h1 class="margin-ten no-margin-bottom">Intelligence is nothing without ambition.</h1>
<p class="text-med margin-ten width-80 center-col xs-width-100">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>
<a class="text-small highlight-link text-uppercase bg-black white-text" href="services.html">Read More <i class="fa fa-long-arrow-right extra-small-icon white-text"></i></a>
</div>
</div>
</div>
<!-- end tab content -->
<!-- tab content -->
<div id="tab6_sec2" class="text-center center-col tab-pane fade in">
<div class="tab-pane fade in">
<div class="col-lg-6 col-md-6 no-padding corporate-standards-img cover-background position-relative" style="background-image:url('http://placehold.it/1200x756');">
<div class="opacity-medium bg-dark-gray"></div>
<p class="title-small text-uppercase corporate-standards-title white-text letter-spacing-7"><span class="title-extra-large no-letter-spacing yellow-text">02</span><br>Design</p>
</div>
<div class="col-lg-6 col-md-6 corporate-standards-text sm-margin-lr-four sm-margin-top-four xs-padding-tb-ten">
<div class="img-border-small-fix border-gray"></div>
<i class="icon-tools large-icon yellow-text"></i>
<h1 class="margin-ten no-margin-bottom">We specialise in creating success brands.</h1>
<p class="text-med margin-ten width-80 center-col">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>
<a class="text-small highlight-link text-uppercase bg-black white-text" href="services.html">Read More <i class="fa fa-long-arrow-right extra-small-icon white-text"></i></a>
</div>
</div>
</div>
<!-- end tab content -->
<!-- tab content -->
<div id="tab6_sec3" class="text-center center-col tab-pane fade in">
<div class="tab-pane fade in">
<div class="col-lg-6 col-md-6 no-padding corporate-standards-img cover-background position-relative" style="background-image:url('http://placehold.it/1200x756');">
<div class="opacity-medium bg-dark-gray"></div>
<p class="title-small text-uppercase corporate-standards-title white-text letter-spacing-7"><span class="title-extra-large no-letter-spacing yellow-text">03</span><br>Development</p>
</div>
<div class="col-lg-6 col-md-6 corporate-standards-text sm-margin-lr-four sm-margin-top-four xs-padding-tb-ten">
<div class="img-border-small-fix border-gray"></div>
<i class="icon-mobile large-icon yellow-text"></i>
<h1 class="margin-ten no-margin-bottom">Intelligence is nothing without ambition.</h1>
<p class="text-med margin-ten width-80 center-col">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>
<a class="text-small highlight-link text-uppercase bg-black white-text" href="services.html">Read More <i class="fa fa-long-arrow-right extra-small-icon white-text"></i></a>
</div>
</div>
</div>
<!-- end tab content -->
<!-- tab content -->
<div id="tab6_sec4" class="text-center center-col tab-pane fade in">
<div class="tab-pane fade in">
<div class="col-lg-6 col-md-6 no-padding corporate-standards-img cover-background position-relative" style="background-image:url('http://placehold.it/1200x756');">
<div class="opacity-medium bg-dark-gray"></div>
<p class="title-small text-uppercase corporate-standards-title white-text letter-spacing-7"><span class="title-extra-large no-letter-spacing yellow-text">04</span><br>Photography</p>
</div>
<div class="col-lg-6 col-md-6 corporate-standards-text sm-margin-lr-four sm-margin-top-four xs-padding-tb-ten">
<div class="img-border-small-fix border-gray"></div>
<i class="icon-camera large-icon yellow-text"></i>
<h1 class="margin-ten no-margin-bottom">We specialise in creating success brands.</h1>
<p class="text-med margin-ten width-80 center-col">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>
<a class="text-small highlight-link text-uppercase bg-black white-text" href="services.html">Read More <i class="fa fa-long-arrow-right extra-small-icon white-text"></i></a>
</div>
</div>
</div>
<!-- end tab content -->
</div>
<!-- end tab content section -->
</div>
<!-- end tab -->
</div>
</div>
</section>
<!-- end services section -->
<!-- key person section -->
<section id="key-person" class="wow fadeIn">
<div class="container">
<div class="row">
<!-- section title -->
<div class="col-md-12 text-center">
<h3 class="section-title no-padding-bottom">Key Person</h3>
</div>
<!-- end section title -->
<div class="col-md-5 col-sm-10 center-col text-center margin-six wow fadeIn">
<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">
<!-- key person item -->
<div class="col-md-4 col-xs-4 bottom-margin text-center wow fadeInUp" data-wow-duration="300ms">
<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>
<!-- end key person item -->
<!-- key person item -->
<div class="col-md-4 col-xs-4 bottom-margin text-center wow fadeInUp" data-wow-duration="600ms">
<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>
<!-- end key person item -->
<!-- key person item -->
<div class="col-md-4 col-xs-4 text-center wow fadeInUp" data-wow-duration="900ms">
<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>
<!-- end key person item -->
</div>
</div>
</section>
<!-- end key person section -->
<!-- case study section -->
<section class="no-padding case-study bg-gray wow fadeIn">
<div class="container-fluid">
<div class="row">
<div id="owl-demo-small" class="owl-carousel owl-theme dark-pagination dark-pagination-without-next-prev-arrow">
<!-- case study item -->
<div class="item">
<div class="col-lg-6 col-md-6 case-study-img cover-background" style="background-image:url('http://placehold.it/1000x600');"></div>
<div class="col-lg-6 col-md-6 case-study-details">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<span class="about-number black-text font-weight-400 letter-spacing-2 xs-no-border xs-no-padding-left xs-display-none">01</span>
</div>
<div class="col-lg-8 col-md-9 col-sm-9 col-xs-12 about-text position-relative xs-text-center">
<p class="title-small text-uppercase letter-spacing-3 black-text font-weight-600 no-margin-bottom">Corinne Product</p>
<span class="case-study-work letter-spacing-3">Brand Strategy | Graphic Design</span>
<p class="width-90 xs-width-100">Lorem Ipsum is simply dummy text of the printing &amp; typesetting industry. Lorem Ipsum has been the industry's standard dummy. Lorem Ipsum is simply dummy text of the printing &amp; typesetting industry.</p>
<a href="single-project-page1.html" class="highlight-button-black-border btn btn-small no-margin-bottom sm-no-margin">View Case Study</a>
</div>
</div>
</div>
<!-- end case study item -->
<!-- case study item -->
<div class="item">
<div class="col-lg-6 col-md-6 case-study-img cover-background" style="background-image:url('http://placehold.it/1000x600');"></div>
<div class="col-lg-6 col-md-6 case-study-details">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<span class="about-number black-text font-weight-400 letter-spacing-2 xs-no-border xs-no-padding-left xs-display-none">02</span>
</div>
<div class="col-lg-8 col-md-9 col-sm-9 col-xs-12 about-text position-relative xs-text-center">
<p class="title-small text-uppercase letter-spacing-3 black-text font-weight-600 no-margin-bottom">Rebrand Coffee</p>
<span class="case-study-work letter-spacing-3">Web Design | Brand Strategy</span>
<p class="width-90 xs-width-100">Lorem Ipsum is simply dummy text of the printing &amp; typesetting industry. Lorem Ipsum has been the industry's standard dummy. Lorem Ipsum is simply dummy text of the printing &amp; typesetting industry.</p>
<a href="single-project-page1.html" class="highlight-button-black-border btn btn-small no-margin-bottom sm-no-margin">View Case Study</a>
</div>
</div>
</div>
<!-- end case study item -->
<!-- case study item -->
<div class="item">
<div class="col-lg-6 col-md-6 case-study-img cover-background" style="background-image:url('http://placehold.it/1000x600');"></div>
<div class="col-lg-6 col-md-6 case-study-details">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<span class="about-number black-text font-weight-400 letter-spacing-2 xs-no-border xs-no-padding-left xs-display-none">03</span>
</div>
<div class="col-lg-8 col-md-9 col-sm-9 col-xs-12 about-text position-relative xs-text-center">
<p class="title-small text-uppercase letter-spacing-3 black-text font-weight-600 no-margin-bottom">William Stormdal</p>
<span class="case-study-work letter-spacing-3">Brand Strategy | Graphic Design</span>
<p class="width-90 xs-width-100">Lorem Ipsum is simply dummy text of the printing &amp; typesetting industry. Lorem Ipsum has been the industry's standard dummy. Lorem Ipsum is simply dummy text of the printing &amp; typesetting industry.</p>
<a href="single-project-page1.html" class="highlight-button-black-border btn btn-small no-margin-bottom sm-no-margin">View Case Study</a>
</div>
</div>
</div>
<!-- end case study item -->
</div>
</div>
</div>
</section>
<!-- case study section -->
<!-- testimonial section -->
<section class="border-bottom">
<div class="container">
<div class="row">
<!-- testimonials item -->
<div class="col-md-4 col-sm-4 testimonial-style2 text-center wow zoomInUp xs-margin-bottom-ten">
<img src="http://placehold.it/300x300" alt=""/>
<p class="center-col width-90">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley.</p>
<span class="name black-text">Alexander Smith - Google</span>
<i class="fa fa-quote-left small-icon yellow-text display-block margin-five no-margin-bottom"></i>
</div>
<!-- end testimonials item -->
<!-- testimonials item -->
<div class="col-md-4 col-sm-4 testimonial-style2 text-center wow zoomInUp xs-margin-bottom-ten">
<img src="http://placehold.it/300x300" alt=""/>
<p class="center-col width-90">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley.</p>
<span class="name black-text">Herman Miller - Apple</span>
<i class="fa fa-quote-left small-icon yellow-text display-block margin-five no-margin-bottom"></i>
</div>
<!-- end testimonials item -->
<!-- testimonials item -->
<div class="col-md-4 col-sm-4 testimonial-style2 text-center wow zoomInUp no-margin-top">
<img src="http://placehold.it/300x300" alt=""/>
<p class="center-col width-90">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley.</p>
<span class="name black-text">Bryan Jonhson - Yahoo</span>
<i class="fa fa-quote-left small-icon yellow-text display-block margin-five no-margin-bottom"></i>
</div>
<!-- end testimonials item -->
</div>
</div>
</section>
<!-- end testimonial section -->
<!-- blog section -->
<section id="blog" class="wow fadeIn">
<div class="container">
<div class="row">
<!-- section title -->
<div class="col-md-12 text-center">
<h3 class="section-title">Latest Blogs</h3>
</div>
<!-- end section title -->
</div>
<div class="row">
<!-- blog item -->
<div class="col-md-4 col-sm-4 wow fadeInUp" data-wow-duration="300ms">
<div class="blog-post">
<div class="blog-post-images"><a href="blog-single-full-width-with-image-slider.html"><img src="http://placehold.it/800x500" 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 sm-margin-bottom-three sm-margin-top-three">Posted by <a href="blog-single-full-width-with-image-slider.html">Michael Freemon</a> | 10 January 2015</span>
<p class="width-90">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
</div>
</div>
</div>
<!-- end blog item -->
<!-- blog item -->
<div class="col-md-4 col-sm-4 wow fadeInUp" data-wow-duration="600ms">
<div class="blog-post">
<div class="blog-post-images"><a href="blog-single-right-sidebar.html"><img src="http://placehold.it/800x500" alt=""></a></div>
<div class="post-details">
<a href="blog-single-right-sidebar.html" class="post-title">Post with featured picture</a>
<span class="post-author sm-margin-bottom-three sm-margin-top-three">Posted by <a href="blog-single-right-sidebar.html">Colin Powell</a> | 02 January 2015</span>
<p class="width-90">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
</div>
</div>
</div>
<!-- end blog item -->
<div class="col-md-4 col-sm-4 wow fadeInUp" data-wow-duration="900ms">
<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 sm-margin-bottom-three sm-margin-top-three">Posted by <a href="blog-single-full-width.html">Vince Lombardi</a> | 02 January 2015</span>
<p class="width-90">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
</div>
</div>
</div>
</div>
<!-- end blog item -->
<div class="row">
<div class="col-md-12 text-center wow fadeInUp" data-wow-duration="1200ms">
<a class="btn btn-black btn-small margin-four no-margin-bottom" href="blog-grid-3columns.html">View All Blog</a>
</div>
</div>
</div>
</section>
<!-- end blog section -->
<!-- approach section -->
<section id="approach" class="approach bg-black wow fadeIn">
<div class="container">
<div class="row">
<div id="approach-slider" class="owl-carousel owl-theme light-pagination bottom-pagination">
<!-- slider item -->
<div class="item margin-ten no-margin-top">
<div class="text-center margin-four wow fadeIn sm-margin-bottom-ten" data-wow-duration="300ms"> <i class="icon-camera medium-icon white-text"></i><h5 class="white-text margin-ten no-margin-bottom xs-margin-top-five">Considered Design</h5><span class="approach-details">We respond directly to a<br>project's objectives.</span></div>
</div>
<!-- end slider item -->
<!-- slider item -->
<div class="item margin-ten no-margin-top">
<div class="text-center margin-four wow fadeIn sm-margin-bottom-ten" data-wow-duration="600ms"> <i class="icon-target medium-icon white-text"></i><h5 class="white-text margin-ten no-margin-bottom xs-margin-top-five">Creative Collaboration</h5><span class="approach-details">We love working with people<br>who embrace the design.</span></div>
</div>
<!-- end slider item -->
<!-- slider item -->
<div class="item margin-ten no-margin-top">
<div class="text-center margin-four wow fadeIn xs-margin-bottom-ten" data-wow-duration="900ms"> <i class="icon-megaphone medium-icon white-text"></i><h5 class="white-text margin-ten no-margin-bottom xs-margin-top-five">Impeccable Service</h5><span class="approach-details">Great service is achieved<br>through professionalism.</span></div>
</div>
<!-- end slider item -->
<!-- slider item -->
<div class="item margin-ten no-margin-top">
<div class="text-center margin-four wow fadeIn" data-wow-duration="1200ms"> <i class="icon-envelope medium-icon white-text"></i><h5 class="white-text margin-ten no-margin-bottom xs-margin-top-five">Enhance Amplify</h5><span class="approach-details">Working with the latest<br> technology we design.</span></div>
</div>
<!-- end slider item -->
<!-- slider item -->
<div class="item margin-ten no-margin-top">
<div class="text-center margin-four sm-margin-bottom-ten"><i class="icon-laptop medium-icon white-text"></i><h5 class="white-text margin-ten no-margin-bottom xs-margin-top-five">Considered Design</h5><span class="approach-details">We respond directly to a<br>project's objectives.</span></div>
</div>
<!-- end slider item -->
<!-- slider item -->
<div class="item margin-ten no-margin-top">
<div class="text-center margin-four sm-margin-bottom-ten"><i class="icon-tools medium-icon white-text"></i><h5 class="white-text margin-ten no-margin-bottom xs-margin-top-five">Creative Collaboration</h5><span class="approach-details">We love working with people<br>who embrace the design.</span></div>
</div>
<!-- end slider item -->
<!-- slider item -->
<div class="item margin-ten no-margin-top">
<div class="text-center margin-four xs-margin-bottom-ten"><i class="icon-hotairballoon medium-icon white-text"></i><h5 class="white-text margin-ten no-margin-bottom xs-margin-top-five">Impeccable Service</h5><span class="approach-details">Great service is achieved<br>through professionalism.</span></div>
</div>
<!-- end slider item -->
<!-- slider item -->
<div class="item margin-ten no-margin-top">
<div class="text-center margin-four"> <i class="icon-map medium-icon white-text"></i><h5 class="white-text margin-ten no-margin-bottom xs-margin-top-five">Understand situation</h5><span class="approach-details">Working with the latest<br> technology we design.</span></div>
</div>
<!-- end slider item -->
</div>
</div>
</div>
</section>
<!-- end approach section -->
<!-- new project section -->
<section id="new-project" class="new-project wow fadeIn">
<div class="container">
<div class="row center-col text-center">
<h5 class="wow fadeInDown">We'd love to hear about your project.</h5>
<a class="btn highlight-button-black-border margin-four no-margin-bottom wow fadeInUp" href="contact-us.html">Start Now</a>
</div>
</div>
</section>
<!-- end new project 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 footer-middle">
<div class="row">
<div class="col-md-3 col-sm-3 footer-link1 xs-display-none">
<!-- headline -->
<h5>About Us</h5>
<!-- end headline -->
<!-- text -->
<p class="footer-text">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>
<!-- end text -->
</div>
<div class="col-md-2 col-sm-3 col-xs-4 footer-link2 col-md-offset-3">
<!-- headline -->
<h5>Company</h5>
<!-- end headline -->
<!-- link -->
<ul>
<li><a href="about-us.html">About Company</a></li>
<li><a href="about-us.html">What We Do</a></li>
<li><a href="about-us.html">What We Think</a></li>
<li><a href="careers.html">Careers</a></li>
</ul>
<!-- end link -->
</div>
<div class="col-md-2 col-sm-3 col-xs-4 footer-link3">
<!-- headline -->
<h5>Services</h5>
<!-- end headline -->
<!-- link -->
<ul>
<li><a href="services.html">Web Development</a></li>
<li><a href="services.html">Graphic Design</a></li>
<li><a href="services.html">Copywriting</a></li>
<li><a href="services.html">Online Marketing</a></li>
</ul>
<!-- end link -->
</div>
<div class="col-md-2 col-sm-3 col-xs-4 footer-link4">
<!-- headline -->
<h5>Introduction</h5>
<!-- end headline -->
<!-- link -->
<ul>
<li><a href="team-members.html">Team Members</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="our-clients.html">Our Clients</a></li>
<li><a href="careers.html">Careers With Us</a></li>
</ul>
<!-- end link -->
</div>
</div>
<div class="wide-separator-line bg-mid-gray no-margin-lr margin-three no-margin-bottom"></div>
<div class="row margin-four no-margin-bottom">
<div class="col-md-6 col-sm-12 sm-text-center sm-margin-bottom-four">
<!-- link -->
<ul class="list-inline footer-link text-uppercase">
<li><a href="about-us.html">About</a></li>
<li><a href="blog-masonry-3columns.html">Blog</a></li>
<li><a href="careers.html">Careers</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="contact-us.html">Contact</a></li>
</ul>
<!-- end link -->
</div>
<div class="col-md-6 col-sm-12 footer-social text-right sm-text-center">
<!-- social media link -->
<a target="_blank" href="https://www.facebook.com/"><i class="fa fa-facebook"></i></a>
<a target="_blank" href="https://twitter.com/"><i class="fa fa-twitter"></i></a>
<a target="_blank" href="https://plus.google.com"><i class="fa fa-google-plus"></i></a>
<a target="_blank" href="https://dribbble.com/"><i class="fa fa-dribbble"></i></a>
<a target="_blank" href="https://www.youtube.com/"><i class="fa fa-youtube"></i></a>
<a target="_blank" href="https://www.linkedin.com/"><i class="fa fa-linkedin"></i></a>
<!-- end social media link -->
</div>
</div>
</div>
<div class="container-fluid bg-dark-gray footer-bottom">
<div class="container">
<div class="row margin-three">
<!-- copyright -->
<div class="col-md-6 col-sm-6 col-xs-12 copyright text-left letter-spacing-1 xs-text-center xs-margin-bottom-one">
&copy; 2015 H-Code is proudly powered by ThemeZaa.
</div>
<!-- end copyright -->
<!-- logo -->
<div class="col-md-6 col-sm-6 col-xs-12 footer-logo text-right xs-text-center">
<a href="index.html"><img src="images/logo-light-gray.png" alt="" /></a>
</div>
<!-- end logo -->
</div>
</div>
</div>
<!-- scroll to top -->
<a href="javascript:;" class="scrollToTop"><i class="fa fa-angle-up"></i></a>
<!-- scroll to top End... -->
</footer>
<!-- end footer -->
<!-- javascript libraries / javascript files set #1 -->
<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/bootstrap-hover-dropdown.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/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>
<!-- setting -->
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>