红色大气广告设计公司响应式静态页面模板

模板描述：红色 广告设计公司 html5响应式模板，这是一个多功能模板适用于企业建站、产品展示、企业博客、广告设计等类型网站模板，公共70多个html页面、10个不同的首页布局，更多强大的功能请浏览演示页面模板

代码部署教程

1. 引入CSS

<link href=’http://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400,400italic,500,500italic,700,700italic’ rel=’stylesheet’ type=’text/css’>
<link rel=”stylesheet” type=”text/css” href=”css/rev-settings.css” media=”screen” />

<link rel=”stylesheet” type=”text/css” href=”css/bootstrap.css”>

<link rel=”stylesheet” type=”text/css” href=”css/switcher.css”>

<link rel=”stylesheet” type=”text/css” href=”css/icons-styles.css”>

<link rel=”stylesheet” type=”text/css” href=”css/template.css”>

<link rel=”stylesheet” type=”text/css” href=”css/responsive-devices.css” />

<link rel=”stylesheet” type=”text/css” href=”css/updates.css”>

<link rel=”stylesheet” type=”text/css” href=”css/custom.css”>

<link rel=”alternate stylesheet” type=”text/css” href=”css/blue.css” title=”blue” media=”all”>

<link rel=”alternate stylesheet” type=”text/css” href=”css/green.css” title=”green” media=”all”>

<link rel=”alternate stylesheet” type=”text/css” href=”css/orange.css” title=”orange” media=”all”>

<link rel=”alternate stylesheet” type=”text/css” href=”css/lynch.css” title=”lynch” media=”all”>

<link rel=”alternate stylesheet” type=”text/css” href=”css/wisteria.css” title=”wisteria” media=”all”>

<link rel=”alternate stylesheet” type=”text/css” href=”css/dark-cyan.css” title=”cyan” media=”all”>

<link href=’http://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400,400italic,500,500italic,700,700italic’ rel=’stylesheet’ type=’text/css’>

<link rel=”stylesheet” type=”text/css” href=”css/rev-settings.css” media=”screen” />

<link rel=”stylesheet” type=”text/css” href=”css/bootstrap.css”>

<link rel=”stylesheet” type=”text/css” href=”css/switcher.css”>

<link rel=”stylesheet” type=”text/css” href=”css/icons-styles.css”>

<link rel=”stylesheet” type=”text/css” href=”css/template.css”>

<link rel=”stylesheet” type=”text/css” href=”css/responsive-devices.css” />

<link rel=”stylesheet” type=”text/css” href=”css/updates.css”>

<link rel=”stylesheet” type=”text/css” href=”css/custom.css”>

<link rel=”alternate stylesheet” type=”text/css” href=”css/blue.css” title=”blue” media=”all”>

<link rel=”alternate stylesheet” type=”text/css” href=”css/green.css” title=”green” media=”all”>

<link rel=”alternate stylesheet” type=”text/css” href=”css/orange.css” title=”orange” media=”all”>

<link rel=”alternate stylesheet” type=”text/css” href=”css/lynch.css” title=”lynch” media=”all”>

<link rel=”alternate stylesheet” type=”text/css” href=”css/wisteria.css” title=”wisteria” media=”all”>

<link rel=”alternate stylesheet” type=”text/css” href=”css/dark-cyan.css” title=”cyan” media=”all”>

2. 引入JS

<script type=”text/javascript” src=”js/jquery-2.1.0.min.js”>
</script>

<script type=”text/javascript” src=”js/modernizr.custom.js”>

</script>

<script type=”text/javascript” src=”js/bootstrap.js”>

</script>

<script type=”text/javascript” src=”js/clean-js-plugins.js”>

</script>

<script type=”text/javascript” src=”js/cleanlab_script.js”>

</script>

<script type=”text/javascript” src=”js/bootstrap-select.js”>

</script>

<script type=”text/javascript” src=”js/evol.colorpicker.min.js”>

</script>

<script type=”text/javascript” src=”js/dmss.js”>

</script>

<script type=”text/javascript” src=”js/jquery.themepunch.plugins.min.js”>

</script>

<script type=”text/javascript” src=”js/jquery.themepunch.revolution.min.js”>

</script>

<script type=”text/javascript” src=”js/jquery-2.1.0.min.js”>

</script>

<script type=”text/javascript” src=”js/modernizr.custom.js”>

</script>

<script type=”text/javascript” src=”js/bootstrap.js”>

</script>

<script type=”text/javascript” src=”js/clean-js-plugins.js”>

</script>

<script type=”text/javascript” src=”js/cleanlab_script.js”>

</script>

<script type=”text/javascript” src=”js/bootstrap-select.js”>

</script>

<script type=”text/javascript” src=”js/evol.colorpicker.min.js”>

</script>

<script type=”text/javascript” src=”js/dmss.js”>

</script>

<script type=”text/javascript” src=”js/jquery.themepunch.plugins.min.js”>

</script>

<script type=”text/javascript” src=”js/jquery.themepunch.revolution.min.js”>

</script>

3. HTML代码

<!doctype html>
<html lang=”en-gb” class=”no-js”>

<head>

<title>

HOME | CleanLab Template</title>

<!– ***** meta ***** –>

<meta charset=”utf-8″>

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=yes”>

<meta name=”keywords” content=”pmium html template, unique pmium template, multipurpose” />

<meta name=”description” content=”Welcome to CleanLab Template, a wonderful and pmium product for multipurpose websites” />

<!– ***** Favicons ***** –>

<link rel=”shortcut icon” href=”images/favicon.png”>

<link rel=”apple-touch-icon” href=”images/favicons/apple-touch-icon-57×57.png”>

<link rel=”apple-touch-icon” sizes=”44×72″ href=”images/favicons/apple-touch-icon-72×72.png”>

<link rel=”apple-touch-icon” sizes=”70×114″ href=”images/favicons/apple-touch-icon-114×114.png”>

<!– ***** Google Fonts ***** –>

<link href=’http://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400,400italic,500,500italic,700,700italic’ rel=’stylesheet’ type=’text/css’>

<!– ***** Addons Stylesheet ***** –>

<link rel=”stylesheet” type=”text/css” href=”css/rev-settings.css” media=”screen” />

<!– ***** Bootstrap CSS Stylesheet ***** –>

<link rel=”stylesheet” type=”text/css” href=”css/bootstrap.css”>

<!– ***** DemoPane CSS Stylesheet ***** –>

<link rel=”stylesheet” type=”text/css” href=”css/switcher.css”>

<!– ***** Main + Responsive CSS Stylesheet ***** –>

<link rel=”stylesheet” type=”text/css” href=”css/icons-styles.css”>

<link rel=”stylesheet” type=”text/css” href=”css/template.css”>

<link rel=”stylesheet” type=”text/css” href=”css/responsive-devices.css” />

<!– ***** Updates CSS Stylesheet (for future templates updates ***** –>

<link rel=”stylesheet” type=”text/css” href=”css/updates.css”>

<!– ***** Custom CSS Stylesheet (where you should add your own css rules) ***** –>

<link rel=”stylesheet” type=”text/css” href=”css/custom.css”>

<link rel=”alternate stylesheet” type=”text/css” href=”css/blue.css” title=”blue” media=”all”>

<link rel=”alternate stylesheet” type=”text/css” href=”css/green.css” title=”green” media=”all”>

<link rel=”alternate stylesheet” type=”text/css” href=”css/orange.css” title=”orange” media=”all”>

<link rel=”alternate stylesheet” type=”text/css” href=”css/lynch.css” title=”lynch” media=”all”>

<link rel=”alternate stylesheet” type=”text/css” href=”css/wisteria.css” title=”wisteria” media=”all”>

<link rel=”alternate stylesheet” type=”text/css” href=”css/dark-cyan.css” title=”cyan” media=”all”>

</head>

<body class=””>

<!– start ploader –>

<div id=”ploader”>

<div id=”status”>

&nbsp;</div>

</div>

<!– end ploader –>

<!– Start Switcher –>

<div class=”demo_changer”>

<div class=”demo-icon”>

<i class=”fa icon-cog spin”>

</i>

</div>

<!– end opener icon –>

<div class=”form_holder”>

<div class=”row”>

<h4 class=”text-center”>

Style Switcher</h4>

<div class=”col-sm-6″>

<form>

<select id=”headers” class=”show-menu-arrow selectpicker” value=”GO”>

<option value=””>

Change Header</option>

<option value=”header1″>

Style 1</option>

<option value=”header2″>

Style 2</option>

<option value=”header3″>

Style 3</option>

<option value=”header4″>

Style 4</option>

<option value=”header5″>

Style 5</option>

<option value=”header6″>

Style 6 (New)</option>

</select>

</form>

</div>

<div class=”col-sm-6″>

<form>

<select id=”footers” class=”show-menu-arrow selectpicker” value=”GO”>

<option value=””>

Change Footer</option>

<option value=”footer-style1″>

Style 1</option>

<option value=”footer-style2″>

Style 2</option>

<option value=”footer-style3″>

Style 3</option>

</select>

</form>

</div>

</div>

<hr>

<div class=”row”>

<h4 class=”text-center”>

Boxed or Full Width</h4>

<div class=”col-sm-12″>

<div class=”layoutswitcher”>

<a href=”#” rel=”boxed” class=”styleswitch”>

<img class=”img-thumbnail” src=”images/boxed.png” width=”154″ height=”93″ alt=””>

</a>

<a href=”#” rel=”full” class=”styleswitch”>

<img class=”img-thumbnail” src=”images/fullwidth.png” width=”154″ height=”93″ alt=””>

</a>

</div>

<!– /.layoutswitcher –>

</div>

</div>

<hr>

<div class=”row”>

<h4 class=”text-center”>

Backgrounds</h4>

<div class=”col-sm-12 center”>

<div class=”PatternChanger”>

<a href=”images/bg1.jpg” class=”bg_t”>

<img src=”images/bg-t1.jpg” alt=”” width=”32″ height=”32″ />

</a>

<a href=”images/bg2.jpg” class=”bg_t”>

<img src=”images/bg-t2.jpg” alt=”” width=”32″ height=”32″ />

</a>

<a href=”images/bg3.jpg” class=”bg_t”>

<img src=”images/bg-t3.jpg” alt=”” width=”32″ height=”32″ />

</a>

<a href=”images/bg4.jpg” class=”bg_t”>

<img src=”images/bg-t4.jpg” alt=”” width=”32″ height=”32″ />

</a>

</div>

</div>

</div>

<hr>

<div class=”row”>

<h4 class=”text-center”>

Color Skins</h4>

<div class=”col-sm-12 center”>

<a href=”css/template.css” class=”styleswitch”>

<span class=”color-skin default”>

</span>

</a>

<a href=”css/blue.css” rel=”blue” class=”styleswitch”>

<span class=”color-skin blue”>

</span>

</a>

<a href=”css/green.css” rel=”green” class=”styleswitch”>

<span class=”color-skin green”>

</span>

</a>

<a href=”css/orange.css” rel=”orange” class=”styleswitch”>

<span class=”color-skin orange”>

</span>

</a>

<a href=”css/lynch.css” rel=”lynch” class=”styleswitch”>

<span class=”color-skin lynch”>

</span>

</a>

<a href=”css/wisteria.css” rel=”wisteria” class=”styleswitch”>

<span class=”color-skin wisteria”>

</span>

</a>

<a href=”css/dark-cyan.css” rel=”cyan” class=”styleswitch”>

<span class=”color-skin dark-cyan”>

</span>

</a>

</div>

</div>

<hr>

<div class=”row”>

<div class=”col-sm-12″>

<h4 class=”text-center”>

Background Picker</h4>

<!– MODULE #5 –>

<div class=”demoPanel”>

<input class=”form-control” id=”cp1″>

<div id=”tests” class=”demo-links”>

</div>

</div>

</div>

</div>

<hr>

<div class=”row”>

<div class=”col-sm-12″>

<p class=”text-center”>

This tools is just for demo site.</p>

</div>

</div>

</div>

<!– end form_holder –>

</div>

<!– end demo_changer –>

<!– End Switcher –>

<div id=”page-wrapper”>

<header id=”header” class=”nav-down header3″>

<div id=”panel”>

<div class=”container”>

<div class=”row”>

<div class=”col-sm-9″>

<ul class=”info-left reset-list”>

<li>

<span class=”icon-location”>

</span>

<p>

102580 Santa Monica BLVD Los Angeles</p>

</li>

<li>

<span class=”icon-phone”>

</span>

<p>

1 (800) 456 – 6789</p>

</li>

<li>

<span class=”icon-envelope2″>

</span>

<p>

info@yourwebsite.com</p>

</li>

<li>

<span class=”icon-skype”>

</span>

<p>

YourSkype</p>

</li>

</ul>

</div>

<div class=”col-sm-3″>

<ul class=”info-right reset-list”>

<li class=”ico-twitter animation”>

<a href=”#”>

<span class=”icon-twitter”>

</span>

</a>

</li>

<li class=”ico-facebook animation”>

<a href=”#”>

<span class=”icon-facebook”>

</span>

</a>

</li>

<li class=”ico-pinterest animation”>

<a href=”#”>

<span class=”icon-pinterest”>

</span>

</a>

</li>

<li class=”ico-instagram animation”>

<a href=”#”>

<span class=”icon-instagram”>

</span>

</a>

</li>

<li class=”ico-dribbble animation”>

<a href=”#”>

<span class=”icon-dribbble”>

</span>

</a>

</li>

</ul>

</div>

</div>

</div>

</div>

<div class=”slide”>

<div class=”container relative”>

<a href=”#” class=”btn-slide”>

<span class=”icon-angle-up”>

</span>

</a>

</div>

</div>

<!– end sliding panel –>

<div class=”container”>

<div class=”row”>

<div class=”col-sm-12″>

<div class=”relative onlyh2″>

<div class=”logo-container hasinfocard”>

<h1 id=”logo”>

<a href=”index.html”>

<div class=”logo-default”>

<img src=”images/logo.png” alt=”CleanLab HTML Template” title=”Click to return to CleanLab Template’s homepage” class=”img-responsive” width=”184″ height=”41″ />

</div>

<div class=”logo-white”>

<img src=”images/logo-white.png” alt=”CleanLab HTML Template” title=”Click to return to CleanLab Template’s homepage” class=”img-responsive” width=”184″ height=”41″ />

</div>

</a>

</h1>

<!– end logo –>

<div id=”infocard”>

<div class=”row”>

<div class=”col-sm-5 center”>

<img src=”images/info-logo.png” alt=”” class=”mbottom20″ width=”43″ height=”70″ />

<h2>

CleanLab is Multi Purpose & Responsive It’s Suitable for Corporate, Creative, Personal, Noncommercial Needs</h2>

</div>

<div class=”col-sm-7″>

<p>

<span class=”icon-phone”>

</span>

1 (800) 456 – 6789</p>

<p class=”mbottom10″>

<span class=”icon-envelope2 mright5″>

</span>

Email: office@yourwebsite.com</p>

<p>

Your Company LTD</p>

<p class=”mbottom30″>

102580 Santa Monica BLVD Los Angeles</p>

<ul class=”info-social center reset-list”>

<li class=”width100 mbottom10″>

<p>

Get Social</p>

</li>

<li>

<a href=”#”>

<span class=”icon-facebook”>

</span>

</a>

</li>

<li>

<a href=”#”>

<span class=”icon-twitter”>

</span>

</a>

</li>

<li>

<a href=”#”>

<span class=”icon-dribbble”>

</span>

</a>

</li>

<li>

<a href=”#”>

<span class=”icon-pinterest”>

</span>

</a>

</li>

</ul>

</div>

</div>

</div>

<!– end infocard –>

</div>

<!– end logo-container –>

<div id=”cart”>

<span class=”icon-cart”>

</span>

<div class=”cart-container”>

<ul class=”reset-list”>

<li>

<div class=”cart-item”>

<img src=”images/cart-item.jpg” alt=”” width=”62″ height=”65″ />

<h4>

At vero eos</h4>

<span class=”tcolor”>

$45.00</span>

<a href=”#” class=”remove-item icon-close”>

</a>

</div>

</li>

<li>

<div class=”cart-item”>

<img src=”images/cart-item2.jpg” alt=”” width=”62″ height=”65″ />

<h4>

Et quidem</h4>

<span class=”tcolor”>

$85.00</span>

<a href=”#” class=”remove-item icon-close”>

</a>

</div>

</li>

<li>

<div class=”cart-item”>

<img src=”images/cart-item3.jpg” alt=”” width=”62″ height=”65″ />

<h4>

Temporibus</h4>

<span class=”tcolor”>

$45.00</span>

<a href=”#” class=”remove-item icon-close”>

</a>

</div>

</li>

<li class=”total clearfix”>

<p class=”fleft”>

Total</p>

<p class=”fright”>

$175.00</p>

</li>

<li class=”checkout”>

<a href=”#”>

Checkout</a>

</li>

</ul>

</div>

</div>

<!– end cart –>

<div class=”searchPanel”>

<span class=”icon-search2″>

</span>

<form action=”http://www.google.com/search” method=”get” onsubmit=”Gsitesearch(this)” target=”_blank” class=”searchForm”>

<input name=”q” type=”text” placeholder=”just type in here…” class=”searchBox”>

</form>

</div>

<!– end searchPanel –>

<div class=”dropdown language”>

<span class=””>

</span>

<div class=”dropdown”>

<span class=”globe icon-earth” type=”button” id=”dropdownMenu1″ data-toggle=”dropdown” aria-expanded=”true”>

</span>

<ul class=”dropdown-menu” role=”menu” aria-labelledby=”dropdownMenu1″>

<li role=”psentation”>

<a role=”menuitem” tabindex=”-1″ href=”#”>

English</a>

<img src=”images/flags/us.png” alt=”English” class=”flag-img”>

</li>

<li role=”psentation”>

<a role=”menuitem” tabindex=”-1″ href=”#”>

Spanish</a>

<img src=”images/flags/es.png” alt=”Spanish” class=”flag-img”>

</li>

<li role=”psentation”>

<a role=”menuitem” tabindex=”-1″ href=”#”>

French</a>

<img src=”images/flags/fr.png” alt=”French” class=”flag-img”>

</li>

</ul>

</div>

</div>

<!– end language –>

<!– Responsive Menu –>

<div class=”zn-res-menuwrapper”>

<a class=”zn-res-trigger” href=”#”>

</a>

</div>

<div id=”main-menu”>

<ul>

<li class=”has-sub mega active”>

<a href=”index.html”>

Home</a>

<ul class=”mega-menu container clearfix”>

<li class=”col-sm-3″>

<a href=”http://#” class=”mega-title”>

Homepages examples 1</a>

<ul class=”sub-menu clearfix”>

<li class=”active”>

<a href=”home-layout-1.html”>

Home Layout 1</a>

</li>

<li>

<a href=”home-layout-2.html”>

Home Layout 2</a>

<span class=”new-item4″>

New</span>

</li>

<li>

<a href=”home-layout-3.html”>

Home Layout 3</a>

</li>

</ul>

</li>

<li class=”col-sm-3″>

<a href=”http://#” class=”mega-title”>

Homepages examples 2</a>

<ul class=”sub-menu clearfix”>

<li>

<a href=”home-layout-4.html”>

Home Layout 4</a>

</li>

<li>

<a href=”home-layout-5.html”>

Home Layout 5</a>

</li>

<li>

<a href=”home-layout-6.html”>

Home Layout 6</a>

</li>

</ul>

</li>

<li class=”col-sm-3″>

<a href=”http://#” class=”mega-title”>

Homepages examples 3</a>

<ul class=”sub-menu clearfix”>

<li>

<a href=”home-layout-7.html”>

Home Layout 7</a>

</li>

<li>

<a href=”home-layout-8.html”>

Home Layout 8</a>

</li>

<li>

<a href=”home-layout-9.html”>

Home Layout 9</a>

</li>

</ul>

</li>

<li class=”col-sm-3″>

<a href=”http://#” class=”mega-title”>

Homepages examples 4</a>

<ul class=”sub-menu clearfix”>

<li>

<a href=”home-layout-10.html”>

Home Layout 10</a>

</li>

<li>

<a href=”one-page.html”>

One Page</a>

</li>

<li>

<a href=”full-page.html”>

Full Page</a>

</li>

</ul>

</li>

</ul>

</li>

<li class=”has-sub”>

<a href=”#”>

Sliders</a>

<ul>

<li>

<a href=”full-screen.html”>

Full Screen Slider</a>

</li>

<li>

<a href=”boxed-slideshow.html”>

Boxed Slider</a>

</li>

<li>

<a href=”video-bg.html”>

Video Background</a>

</li>

</ul>

</li>

<li class=”has-sub”>

<a href=”#”>

Portfolio</a>

<ul>

<li>

<a href=”portfolio.html”>

Portfolio</a>

</li>

<li>

<a href=”portfolio-simple.html”>

Portfolio Simple Layout</a>

</li>

<li>

<a href=”portfolio-full-width.html”>

Portfolio – Full Width</a>

</li>

<li>

<a href=”single-project.html”>

Single Project</a>

</li>

</ul>

</li>

<li>

<a href=”#”>

Blog</a>

<ul>

<li>

<a href=”blog.html”>

Blog Style 1</a>

</li>

<li>

<a href=”blog-2.html”>

Blog Style 2</a>

</li>

<li>

<a href=”blog-3.html”>

Blog Style 3</a>

</li>

<li>

<a href=”blog-4.html”>

Blog Style 4</a>

</li>

<li>

<a href=”blog-timeline.html”>

Timeline Blog</a>

</li>

<li>

<a href=”blog-masonry.html”>

Masonry Blog</a>

</li>

<li>

<a href=”blog-masonry-full.html”>

Masonry Blog Full</a>

</li>

<li>

<a href=”blog-post.html”>

Blog Post Style 1</a>

</li>

<li>

<a href=”blog-post-2.html”>

Blog Post Style 2</a>

</li>

</ul>

</li>

<li class=”has-sub mega”>

<a href=”#”>

Pages</a>

<ul class=”mega-menu container clearfix”>

<li class=”col-sm-3″>

<a href=”http://#” class=”mega-title”>

Pages examples 1</a>

<ul class=”sub-menu clearfix”>

<li>

<a href=”full-width-page.html”>

Full Width</a>

</li>

<li>

<a href=”left-sidebar-page.html”>

Left Sidebar</a>

</li>

<li>

<a href=”right-sidebar-page.html”>

Right Sidebar</a>

</li>

<li>

<a href=”text-page.html”>

Text Page</a>

</li>

<li>

<a href=”product-launch.html”>

Product Launch</a>

</li>

</ul>

</li>

<li class=”col-sm-3″>

<a href=”http://#” class=”mega-title”>

Pages examples 2</a>

<ul class=”sub-menu clearfix”>

<li>

<a href=”faq.html”>

FAQ</a>

</li>

<li>

<a href=”testimonials.html”>

Testimonials</a>

</li>

<li>

<a href=”features.html”>

Features</a>

</li>

<li>

<a href=”our-office.html”>

Our Office</a>

</li>

<li>

<a href=”pricing.html”>

Pricing</a>

</li>

</ul>

</li>

<li class=”col-sm-3″>

<a href=”http://#” class=”mega-title”>

Pages examples 3</a>

<ul class=”sub-menu clearfix”>

<li>

<a href=”timeline-page.html”>

Timeline Page</a>

</li>

<li>

<a href=”clients.html”>

Clients</a>

</li>

<li>

<a href=”team.html”>

Our Team</a>

</li>

<li>

<a href=”team-member.html”>

Team Member</a>

</li>

<li>

<a href=”about-us.html”>

About us</a>

</li>

</ul>

</li>

<li class=”col-sm-3″>

<a href=”http://#” class=”mega-title”>

Pages examples 4</a>

<ul class=”sub-menu clearfix”>

<li>

<a href=”coming-soon.html”>

Coming Soon</a>

</li>

<li>

<a href=”maintenance-mode.html”>

Maintenance Mode</a>

</li>

<li>

<a href=”contact.html”>

Contact Page</a>

</li>

<li>

<a href=”sitemap.html”>

Sitemap</a>

</li>

<li>

<a href=”404.html”>

404 Error Page</a>

</li>

</ul>

</li>

</ul>

</li>

<li class=”has-sub”>

<a href=”#”>

Shop</a>

<ul>

<li>

<a href=”shop-home.html”>

Home Page</a>

<li>

<li>

<a href=”product.html”>

Product Item</a>

</li>

<li>

<a href=”shopping-cart.html”>

Shopping Cart</a>

</li>

<li>

<a href=”shop-order-recieved.html”>

Order Confirmation</a>

</li>

<li>

<a href=”shop-account-login.html”>

My Account – Login</a>

</li>

</ul>

</li>

<li>

<a href=”bootstrap.html”>

Features</a>

<ul>

<li>

<a href=”builder/index.html”>

Page Builder</a>

</li>

<li>

<a href=”gallery-1.html”>

Gallery 1 column</a>

</li>

<li>

<a href=”gallery-2.html”>

Gallery 2 column</a>

</li>

<li>

<a href=”gallery-3.html”>

Gallery 3 column</a>

</li>

<li>

<a href=”gallery-4.html”>

Gallery 4 column</a>

</li>

<li>

<a href=”gallery-masonry.html”>

Gallery – Masonry</a>

</li>

<li>

<a href=”gallery-masonry-full.html”>

Gallery Full – Masonry</a>

</li>

</ul>

</li>

<li>

<a href=”#”>

Shortcodes</a>

<ul>

<li>

<a href=”typography.html”>

Typography</a>

</li>

<li>

<a href=”page-header.html”>

Page Header</a>

</li>

<li>

<a href=”media-player.html”>

Media Player</a>

</li>

<li>

<a href=”gallery.html”>

Gallery</a>

</li>

<li>

<a href=”services-box.html”>

Services Box</a>

</li>

<li>

<a href=”buttons.html”>

Buttons</a>

</li>

<li>

<a href=”progress-bars.html”>

Progress Bars & Skill Meter</a>

</li>

<li>

<a href=”tabs.html”>

Tabs</a>

</li>

<li>

<a href=”google-maps.html”>

Google Maps</a>

</li>

<li>

<a href=”accordion.html”>

Accordion & Toggles</a>

</li>

<li>

<a href=”callout-box.html”>

Custom Callout Box</a>

</li>

<li>

<a href=”laptop-slider.html”>

Laptop Slider</a>

<span class=”new-item2″>

New</span>

</li>

<li>

<a href=”image-shadows.html”>

Image Shadows</a>

<span class=”new-item2″>

New</span>

</li>

</ul>

</li>

</ul>

</div>

<!– end main menu –>

</div>

</div>

</div>

</div>

</header>

<div id=”slideshow” class=”mbottom90″>

<div class=”tp-banner-container”>

<div class=”tp-banner” id=”revslider1″>

<ul>

<!– SLIDE 1 –>

<li data-transition=”fade” data-slotamount=”7″ data-masterspeed=”1500″ >

<!– MAIN IMAGE –>

<img src=”images/slideshow/slide1.jpg” alt=”slidebg1″ data-bgfit=”cover” data-bgposition=”left top” data-bgrepeat=”no-repeat”>

<!– LAYERS –>

<!– LAYER NR. 1 –>

<div class=”tp-caption sfb firstslide”
data-x=”0″
data-y=”150″
data-customin=”x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;”
data-speed=”1000″
data-start=”1000″
data-easing=”Power3.easeInOut”
data-endspeed=”300″
style=”z-index: 2″>

<img src=”images/slideshow/layer1.png” alt=”” width=”435″ height=”411″>

</div>

<!– LAYER NR. 2 –>

<div class=”tp-caption lfr firstslide”
data-x=”right”
data-y=”150″
data-customin=”x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;”
data-speed=”1000″
data-start=”1000″
data-easing=”Power3.easeInOut”
data-endspeed=”300″
style=”z-index: 2″>

<span class=”first-span”>

1/</span>

<h2>

SEO Optimised <span class=”second-span”>

&</span>

<br>

Valid Code</h2>

</div>

<!– LAYER NR. 3 –>

<div class=”tp-caption lfr firstslide”
data-x=”630″
data-y=”300″
data-customin=”x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;”
data-speed=”1000″
data-start=”1500″
data-easing=”Power3.easeInOut”
data-endspeed=”300″
style=”z-index: 2″>

<h5>

Themes valid HTML5 code meets the best SEO practices. <br>

100% compatible with industry-leading SEO plugins.</h5>

</div>

</li>

<!– SLIDE 2 –>

<li data-transition=”fade” data-slotamount=”7″ data-masterspeed=”1500″ >

<!– MAIN IMAGE –>

<img src=”images/slideshow/slide2.jpg” alt=”slidebg2″ data-bgfit=”cover” data-bgposition=”left top” data-bgrepeat=”no-repeat”/>

<!– LAYERS –>

<!– LAYER NR. 1 –>

<div class=”tp-caption sfl secondslide”
data-x=”left”
data-y=”150″
data-customin=”x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;”
data-speed=”1000″
data-start=”1000″
data-easing=”Power3.easeInOut”
data-endspeed=”300″
style=”z-index: 2″>

<span class=”first-span”>

2/</span>

<h2>

The New Directict <span class=”second-span”>

for</span>

<br>

Your Succes</h2>

</div>

<!– LAYER NR. 2 –>

<div class=”tp-caption sfl secondslide”
data-x=”left”
data-y=”300″
data-customin=”x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;”
data-speed=”1000″
data-start=”1500″
data-easing=”Power3.easeInOut”
data-endspeed=”300″
style=”z-index: 2″>

<h5>

Themes valid HTML5 code meets the best SEO practices. <br>

100% compatible with industry-leading SEO plugins.</h5>

</div>

</li>

<!– SLIDE 3 –>

<li data-transition=”fade” data-slotamount=”7″ data-masterspeed=”1500″ >

<!– MAIN IMAGE –>

<img src=”images/slideshow/slide3.jpg” alt=”slidebg2″ data-bgfit=”cover” data-bgposition=”left top” data-bgrepeat=”no-repeat”/>

<!– LAYERS –>

<!– LAYER NR. 1 –>

<div class=”tp-caption sft thirdslide”
data-x=”center”
data-y=”100″
data-customin=”x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;”
data-speed=”1000″
data-start=”1000″
data-easing=”Power3.easeInOut”
data-endspeed=”300″
style=”z-index: 2″>

<span class=”first-span”>

3/</span>

<h2>

Fluid, Responsive Retina-Ready</h2>

</div>

<!– LAYER NR. 2 –>

<div class=”tp-caption sft thirdslide”
data-x=”center”
data-y=”200″
data-customin=”x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;”
data-speed=”1000″
data-start=”1000″
data-easing=”Power3.easeInOut”
data-endspeed=”300″
style=”z-index: 2″>

<h5>

Your site will always look sharp and utilize 100% of</h5>

<h5>

screen estate of every device.</h5>

</div>

<!– LAYER NR. 3 –>

<div class=”tp-caption sfb thirdslide”
data-x=”center”
data-y=”300″
data-customin=”x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;”
data-speed=”1000″
data-start=”1000″
data-easing=”Power3.easeInOut”
data-endspeed=”300″
style=”z-index: 2″>

<img src=”images/slideshow/layer2.png” alt=”” width=”1089″ height=”149″ />

</div>

</li>

<!– SLIDE 4 –>

<li data-transition=”fade” data-slotamount=”7″ data-masterspeed=”1500″ >

<!– MAIN IMAGE –>

<img src=”images/slideshow/slide4.jpg” alt=”slidebg2″ data-bgfit=”cover” data-bgposition=”left top” data-bgrepeat=”no-repeat”/>

<!– LAYERS –>

<!– LAYER NR. 1 –>

<div class=”tp-caption sfl fourthslide”
data-x=”left”
data-y=”center”
data-customin=”x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;”
data-speed=”1000″
data-start=”1000″
data-easing=”Power3.easeInOut”
data-endspeed=”300″
style=”z-index: 2″>

<img src=”images/slideshow/layer3.png” alt=”” width=”581″ height=”447″ />

</div>

<!– LAYER NR. 2 –>

<div class=”tp-caption sfr fourthslide”
data-x=”right”
data-y=”150″
data-customin=”x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;”
data-speed=”1000″
data-start=”1000″
data-easing=”Power3.easeInOut”
data-endspeed=”300″
style=”z-index: 2″>

<span class=”first-span”>

4/</span>

<h2>

The Most Flexible <br>

& Light Theme <br>

ever</h2>

</div>

</li>

</ul>

</div>

</div>

<div id=”swappers”>

<div class=”container”>

<div class=”row”>

<div class=”col-sm-4″>

<div class=”swappers-table”>

<div class=”helper”>

<div class=”swappers-content”>

<h2>

CORPORATE</h2>

<p>

Cras at aliquet turpis. Donec vulputate dui eu magna luctus gravida. Phasellus dictum tincidunt euismod.</p>

<p>

Mauris condimentum metus eu nulla iaculis scelerisque. Nullam dignissim tempus dapibus. Morbi viverra eros vitae velit semper, quis gravida lorem placerat. Suspendisse quis molestie dui, vitae dignissim sapien.</p>

</div>

</div>

</div>

</div>

<div class=”col-sm-4″>

<div class=”swappers-table”>

<div class=”helper”>

<div class=”swappers-content”>

<h2>

CREATIVE</h2>

<p>

Cras at aliquet turpis. Donec vulputate dui eu magna luctus gravida. Phasellus dictum tincidunt euismod.</p>

<p>

Mauris condimentum metus eu nulla iaculis scelerisque. Nullam dignissim tempus dapibus. Morbi viverra eros vitae velit semper, quis gravida lorem placerat. Suspendisse quis molestie dui, vitae dignissim sapien.</p>

</div>

</div>

</div>

</div>

<div class=”col-sm-4″>

<div class=”swappers-table”>

<div class=”helper”>

<div class=”swappers-content”>

<h2>

BUSINESS</h2>

<p>

Cras at aliquet turpis. Donec vulputate dui eu magna luctus gravida. Phasellus dictum tincidunt euismod.</p>

<p>

Mauris condimentum metus eu nulla iaculis scelerisque. Nullam dignissim tempus dapibus. Morbi viverra eros vitae velit semper, quis gravida lorem placerat. Suspendisse quis molestie dui, vitae dignissim sapien.</p>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<!– end swappers –>

</div>

<!– end slideshow–>

<div id=”content”>

<div class=”container mbottom100″>

<div class=”row center mbottom20″>

<div class=”col-sm-4″>

<div class=”services-section”>

<div class=”hi-icon-wrap hi-icon-effect-3 hi-icon-effect-3b”>

<span class=”services-span hi-icon icon-rocket”>

</span>

</div>

<h6 class=”size20″>

Optimized for speed</h6>

<p>

Nulla non ms ac is mollis, est non commodo luctus, nisi ula, eget lacinia odio sem nec elit. Aene ndum nulla sed. Donec ullamcorper nulla non metus.</p>

<a href=”#” class=”btn2 btn-2 mbottom30″>

More info</a>

</div>

</div>

<div class=”col-sm-4″>

<div class=”services-section”>

<div class=”hi-icon-wrap hi-icon-effect-3 hi-icon-effect-3b”>

<span class=”services-span hi-icon icon-pencil”>

</span>

</div>

<h6 class=”size20″>

Unlimited Design</h6>

<p>

Nulla non ms ac is mollis, est non commodo luctus, nisi ula, eget lacinia odio sem nec elit. Aene ndum nulla sed. Donec ullamcorper nulla non metus.</p>

<a href=”#” class=”btn2 btn-2 mbottom30″>

More info</a>

</div>

</div>

<div class=”col-sm-4″>

<div class=”services-section”>

<div class=”hi-icon-wrap hi-icon-effect-3 hi-icon-effect-3b”>

<span class=”services-span hi-icon icon-bubble-check”>

</span>

</div>

<h6 class=”size20″>

Incredible Support</h6>

<p>

Nulla non ms ac is mollis, est non commodo luctus, nisi ula, eget lacinia odio sem nec elit. Aene ndum nulla sed. Donec ullamcorper nulla non metus.</p>

<a href=”#” class=”btn2 btn-2 mbottom30″>

More info</a>

</div>

</div>

</div>

</div>

<!– end services –>

<div id=”featured-projects” class=”ptop50″>

<div class=”portfolio-header”>

<div class=”container”>

<div class=”row”>

<div class=”col-sm-6″>

<h2 class=”section-title”>

Featured Projects</h2>

<h4 class=”section-subtitle”>

It’s Suitable for Corporate, Creative, Personal, Noncommercial Needs</h4>

</div>

<div class=”col-sm-6″>

<div id=”portfolio-filters” class=”filters-nav”>

<ul class=”reset-list”>

<li class=”filter-item is-active” data-filter=”*”>

All</li>

<li class=”filter-item” data-filter=”.illustration”>

Illustration</li>

<li class=”filter-item” data-filter=”.photography”>

Photography</li>

<li class=”filter-item” data-filter=”.web”>

Web</li>

<li class=”filter-item” data-filter=”.3d”>

3D</li>

</ul>

</div>

</div>

</div>

</div>

</div>

<div class=”portfolio-wrapper”>

<div class=”portfolio-item illustration”>

<div class=”item-image overlay overlay-effect”>

<figure>

<a href=”single-project.html”>

<img src=”images/projects/img1.jpg” alt=”” width=”535″ height=”335″ />

</a>

<figcaption>

<h2>

Illustration</h2>

<h5>

3D Illustration</h5>

<span class=”icon-heart2″>

17</span>

</figcaption>

</figure>

</div>

</div>

<div class=”portfolio-item photography”>

<div class=”item-image overlay overlay-effect”>

<figure>

<a href=”single-project.html”>

<img src=”images/projects/img2.jpg” alt=”” width=”535″ height=”335″ />

</a>

<figcaption>

<h2>

Photography</h2>

<h5>

Photo, Video</h5>

<span class=”icon-heart2″>

5</span>

</figcaption>

</figure>

</div>

</div>

<div class=”portfolio-item web “>

<div class=”item-image overlay overlay-effect”>

<figure>

<a href=”single-project.html”>

<img src=”images/projects/img3.jpg” alt=”” width=”535″ height=”335″ />

</a>

<figcaption>

<h2>

Web</h2>

<h5>

Web Design</h5>

<span class=”icon-heart2″>

35</span>

</figcaption>

</figure>

</div>

</div>

<div class=”portfolio-item 3d”>

<div class=”item-image overlay overlay-effect”>

<figure>

<a href=”single-project.html”>

<img src=”images/projects/img4.jpg” alt=”” width=”535″ height=”335″ />

</a>

<figcaption>

<h2>

3D</h2>

<h5>

3D Illustration</h5>

<span class=”icon-heart2″>

9</span>

</figcaption>

</figure>

</div>

</div>

<div class=”portfolio-item photography”>

<div class=”item-image overlay overlay-effect”>

<figure>

<a href=”single-project.html”>

<img src=”images/projects/img5.jpg” alt=”” width=”535″ height=”335″ />

</a>

<figcaption>

<h2>

Photography</h2>

<h5>

3D Illustration</h5>

<span class=”icon-heart2″>

20</span>

</figcaption>

</figure>

</div>

</div>

<div class=”portfolio-item 3d”>

<div class=”item-image overlay overlay-effect”>

<figure>

<a href=”single-project.html”>

<img src=”images/projects/img6.jpg” alt=”” width=”535″ height=”335″ />

</a>

<figcaption>

<h2>

3D</h2>

<h5>

3D Illustration</h5>

<span class=”icon-heart2″>

17</span>

</figcaption>

</figure>

</div>

</div>

<div class=”portfolio-item web”>

<div class=”item-image overlay overlay-effect”>

<figure>

<a href=”single-project.html”>

<img src=”images/projects/img7.jpg” alt=”” width=”535″ height=”335″ />

</a>

<figcaption>

<h2>

Illustration</h2>

<h5>

3D Illustration</h5>

<span class=”icon-heart2″>

17</span>

</figcaption>

</figure>

</div>

</div>

<div class=”portfolio-item illustration”>

<div class=”item-image overlay overlay-effect”>

<figure>

<a href=”single-project.html”>

<img src=”images/projects/img8.jpg” alt=”” width=”535″ height=”335″ />

</a>

<figcaption>

<h2>

Illustration</h2>

<h5>

3D Illustration</h5>

<span class=”icon-heart2″>

17</span>

</figcaption>

</figure>

</div>

</div>

</div>

</div>

<!– end #featured-projects –>

<div id=”produce” class=”bg-white”>

<div class=”container”>

<div class=”row”>

<div class=”col-sm-5 left”>

<h2>

We conceive, design and produce digital content and integrated experiences for web</h2>

<p>

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem.</p>

<a href=”http://www.jqueryfuns.com” rel=”nofollow” target=”_blank” class=”btn2 btn-2″>

get started</a>

</div>

<div class=”col-sm-7″>

<img src=”images/mac.png” alt=”” class=”img-responsive”>

</div>

</div>

</div>

</div>

<div id=”services”>

<div class=”container”>

<div class=”row”>

<div class=”col-sm-4 col-xs-12″>

<ul class=”services-left mtop40 reset-list”>

<li>

<div class=”icon-container-left”>

<span class=”icon-pen”>

</span>

</div>

<h2>

Carefully Crafted Design</h2>

<p>

Donec ullamcorper nulla non ms ac is mollis, est non commodo luctus, nisi ula, eget lacinia</p>

</li>

<li>

<div class=”icon-container-left”>

<span class=”icon-power”>

</span>

</div>

<h2>

Powerful Admin</h2>

<p>

Donec ullamcorper nulla non ms ac is mollis, est non commodo luctus, nisi ula, eget lacinia</p>

</li>

</ul>

</div>

<div class=”col-sm-4 col-xs-12″>

<img src=”images/phone.png” alt=”” class=”img-responsive”>

</div>

<div class=”col-sm-4 col-xs-12″>

<ul class=”services-right mtop40 reset-list”>

<li>

<div class=”icon-container-right”>

<span class=”icon-leaf”>

</span>

</div>

<h2>

Fast &amp; Light Weight</h2>

<p>

Donec ullamcorper nulla non ms ac is mollis, est non commodo luctus, nisi ula, eget lacinia</p>

</li>

<li>

<div class=”icon-container-right”>

<span class=”icon-gift”>

</span>

</div>

<h2>

WooCommerce Installed</h2>

<p>

Donec ullamcorper nulla non ms ac is mollis, est non commodo luctus, nisi ula, eget lacinia</p>

</li>

</ul>

</div>

</div>

</div>

</div>

<div id=”feedbacks”>

<div class=”container”>

<div class=”row”>

<div class=”col-sm-12 center feedbacks-header mbottom30″>

<span>

100%</span>

<h2 class=”section-title”>

Positive feedbacks from our customers</h2>

<p>

Made for the Company Presentation</p>

</div>

</div>

<div class=”row”>

<div class=”col-sm-4″>

<div class=”feedback-box clearfix”>

<img src=”images/feedbacks/feedback1.jpg” alt=””>

<blockquote>

Things are made to happen.</blockquote>

</div>

<h5 class=”mtop20″>

Zoi Dawson</h5>

<p>

Co-founder, Company Name</p>

</div>

<div class=”col-sm-4″>

<div class=”feedback-box clearfix”>

<img src=”images/feedbacks/feedback2.jpg” alt=””>

<blockquote>

The secret of getting ahead is getting started.</blockquote>

</div>

<h5 class=”mtop20″>

Sam Dawson</h5>

<p>

Marketing, Company Name</p>

</div>

<div class=”col-sm-4″>

<div class=”feedback-box clearfix”>

<img src=”images/feedbacks/feedback3.jpg” alt=””>

<blockquote>

By failing to ppare, you are pparing to fail.</blockquote>

</div>

<h5 class=”mtop20″>

Elena White</h5>

<p>

Development, Company Name</p>

</div>

</div>

</div>

</div>

<div id=”from-blog”>

<div class=”container”>

<h2 class=”section-title center mbottom50″>

From the Blog</h2>

<div class=”row”>

<div class=”col-sm-4″>

<span class=”blog-date”>

10/07</span>

<div class=”blog-boxes”>

<h2>

Elit non mi porta gravida at eget metus. Fusce dapibus.</h2>

<p class=”mbottom15″>

Posted by <a href=”#”>

Admin</a>

</p>

<p class=”mbottom15″>

Donec ullamcorper nulla non ms ac is mollis, est non commodo luctus, nisi ula, eget lacinia odio sem nec elit. Aene ndum nulla sed. Donec ullamcorper nulla non metus.</p>

<a href=”#”>

More info</a>

<span class=”icon-heart2 tcolor fright”>

<b>

17</b>

</span>

</div>

</div>

<div class=”col-sm-4″>

<span class=”blog-date”>

12/07</span>

<div class=”blog-boxes”>

<h2>

Elit non mi porta gravida at eget metus. Fusce dapibus.</h2>

<p class=”mbottom15″>

Posted by <a href=”#”>

Admin</a>

</p>

<p class=”mbottom15″>

Donec ullamcorper nulla non ms ac is mollis, est non commodo luctus, nisi ula, eget lacinia odio sem nec elit. Aene ndum nulla sed. Donec ullamcorper nulla non metus.</p>

<a href=”#”>

More info</a>

<span class=”icon-heart2 tcolor fright”>

<b>

17</b>

</span>

</div>

</div>

<div class=”col-sm-4″>

<span class=”blog-date”>

15/07</span>

<div class=”blog-boxes”>

<h2>

Elit non mi porta gravida at eget metus. Fusce dapibus.</h2>

<p class=”mbottom15″>

Posted by <a href=”#”>

Admin</a>

</p>

<p class=”mbottom15″>

Donec ullamcorper nulla non ms ac is mollis, est non commodo luctus, nisi ula, eget lacinia odio sem nec elit. Aene ndum nulla sed. Donec ullamcorper nulla non metus.</p>

<a href=”#”>

More info</a>

<span class=”icon-heart2 tcolor fright”>

<b>

17</b>

</span>

</div>

</div>

</div>

</div>

</div>

<div id=”team” class=”ptop50 pbottom80″>

<div class=”container”>

<div class=”row”>

<div class=”col-sm-12 relative”>

<h2 class=”section-title”>

Meet Our Team of Best Professionals</h2>

<div id=”our-team”>

<div class=”item overlay overlay-effect”>

<figure>

<a href=”team-member.html”>

<img src=”images/team/img1.jpg” alt=”” class=”img-responsive” width=”364″ height=”463″ />

</a>

<figcaption>

<h2>

Mark Anthony</h2>

<h5>

UI/UX Designer</h5>

<ul class=”reset-list”>

<li class=”ico-twitter animation”>

<a href=”#”>

<span class=”icon-twitter”>

</span>

</a>

</li>

<li class=”ico-facebook animation”>

<a href=”#”>

<span class=”icon-facebook”>

</span>

</a>

</li>

<li class=”ico-pinterest animation”>

<a href=”#”>

<span class=”icon-pinterest”>

</span>

</a>

</li>

<li class=”ico-instagram animation”>

<a href=”#”>

<span class=”icon-instagram”>

</span>

</a>

</li>

<li class=”ico-dribbble animation”>

<a href=”#”>

<span class=”icon-dribbble”>

</span>

</a>

</li>

</ul>

</figcaption>

</figure>

</div>

<div class=”item overlay overlay-effect”>

<figure>

<a href=”team-member.html”>

<img src=”images/team/img2.jpg” alt=”” class=”img-responsive” width=”364″ height=”463″ />

</a>

<figcaption>

<h2>

Mark Anthony</h2>

<h5>

UI/UX Designer</h5>

<ul class=”reset-list”>

<li class=”ico-twitter animation”>

<a href=”#”>

<span class=”icon-twitter”>

</span>

</a>

</li>

<li class=”ico-facebook animation”>

<a href=”#”>

<span class=”icon-facebook”>

</span>

</a>

</li>

<li class=”ico-pinterest animation”>

<a href=”#”>

<span class=”icon-pinterest”>

</span>

</a>

</li>

<li class=”ico-instagram animation”>

<a href=”#”>

<span class=”icon-instagram”>

</span>

</a>

</li>

<li class=”ico-dribbble animation”>

<a href=”#”>

<span class=”icon-dribbble”>

</span>

</a>

</li>

</ul>

</figcaption>

</figure>

</div>

<div class=”item overlay overlay-effect”>

<figure>

<a href=”team-member.html”>

<img src=”images/team/img3.jpg” alt=”” class=”img-responsive” width=”364″ height=”463″ />

</a>

<figcaption>

<h2>

Mark Anthony</h2>

<h5>

UI/UX Designer</h5>

<ul class=”reset-list”>

<li class=”ico-twitter animation”>

<a href=”#”>

<span class=”icon-twitter”>

</span>

</a>

</li>

<li class=”ico-facebook animation”>

<a href=”#”>

<span class=”icon-facebook”>

</span>

</a>

</li>

<li class=”ico-pinterest animation”>

<a href=”#”>

<span class=”icon-pinterest”>

</span>

</a>

</li>

<li class=”ico-instagram animation”>

<a href=”#”>

<span class=”icon-instagram”>

</span>

</a>

</li>

<li class=”ico-dribbble animation”>

<a href=”#”>

<span class=”icon-dribbble”>

</span>

</a>

</li>

</ul>

</figcaption>

</figure>

</div>

<div class=”item overlay overlay-effect”>

<figure>

<a href=”team-member.html”>

<img src=”images/team/img4.jpg” alt=”” class=”img-responsive” width=”364″ height=”463″ />

</a>

<figcaption>

<h2>

Mark Anthony</h2>

<h5>

UI/UX Designer</h5>

<ul class=”reset-list”>

<li class=”ico-twitter animation”>

<a href=”#”>

<span class=”icon-twitter”>

</span>

</a>

</li>

<li class=”ico-facebook animation”>

<a href=”#”>

<span class=”icon-facebook”>

</span>

</a>

</li>

<li class=”ico-pinterest animation”>

<a href=”#”>

<span class=”icon-pinterest”>

</span>

</a>

</li>

<li class=”ico-instagram animation”>

<a href=”#”>

<span class=”icon-instagram”>

</span>

</a>

</li>

<li class=”ico-dribbble animation”>

<a href=”#”>

<span class=”icon-dribbble”>

</span>

</a>

</li>

</ul>

</figcaption>

</figure>

</div>

<div class=”item overlay overlay-effect”>

<figure>

<a href=”team-member.html”>

<img src=”images/team/img1.jpg” alt=”” class=”img-responsive” width=”364″ height=”463″ />

</a>

<figcaption>

<h2>

Mark Anthony</h2>

<h5>

UI/UX Designer</h5>

<ul class=”reset-list”>

<li class=”ico-twitter animation”>

<a href=”#”>

<span class=”icon-twitter”>

</span>

</a>

</li>

<li class=”ico-facebook animation”>

<a href=”#”>

<span class=”icon-facebook”>

</span>

</a>

</li>

<li class=”ico-pinterest animation”>

<a href=”#”>

<span class=”icon-pinterest”>

</span>

</a>

</li>

<li class=”ico-instagram animation”>

<a href=”#”>

<span class=”icon-instagram”>

</span>

</a>

</li>

<li class=”ico-dribbble animation”>

<a href=”#”>

<span class=”icon-dribbble”>

</span>

</a>

</li>

</ul>

</figcaption>

</figure>

</div>

<div class=”item overlay overlay-effect”>

<figure>

<a href=”team-member.html”>

<img src=”images/team/img2.jpg” alt=”” class=”img-responsive” width=”364″ height=”463″ />

</a>

<figcaption>

<h2>

Mark Anthony</h2>

<h5>

UI/UX Designer</h5>

<ul class=”reset-list”>

<li class=”ico-twitter animation”>

<a href=”#”>

<span class=”icon-twitter”>

</span>

</a>

</li>

<li class=”ico-facebook animation”>

<a href=”#”>

<span class=”icon-facebook”>

</span>

</a>

</li>

<li class=”ico-pinterest animation”>

<a href=”#”>

<span class=”icon-pinterest”>

</span>

</a>

</li>

<li class=”ico-instagram animation”>

<a href=”#”>

<span class=”icon-instagram”>

</span>

</a>

</li>

<li class=”ico-dribbble animation”>

<a href=”#”>

<span class=”icon-dribbble”>

</span>

</a>

</li>

</ul>

</figcaption>

</figure>

</div>

</div>

<!– end our-team –>

</div>

</div>

</div>

</div>

<!– end team carousel –>

<div class=”buy”>

<div class=”container”>

<div class=”row”>

<div class=”col-sm-9″>

<h2>

This is <span>

The Best</span>

Multi Purpose Wordpss Theme</h2>

<h5>

It’s Suitable for Corporate, Creative, Personal, Noncommercial Needs</h5>

</div>

<div class=”col-sm-3 center”>

<a href=”http://www.jqueryfuns.com” rel=”nofollow” target=”_blank” class=”btn btn-default btn-default2″>

buy now</a>

</div>

</div>

</div>

</div>

<!– end buy section–>

</div>

<!– end content –>

<footer class=”footer-style2″>

<div class=”container”>

<div class=”row”>

<div class=”col-sm-3 mbottom30″>

<a href=”index.html”>

<img src=”images/footer-logo.png” alt=”” class=”default” width=”146″ height=”30″ />

<img src=”images/footer-logo2.png” alt=”” class=”only3″ width=”146″ height=”30″ />

</a>

<p class=”mtop30 f300″>

Etiam accumsan tristique diam, nec mollis nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>

<div class=”social mtop25 mbottom30 clearfix”>

<ul class=”reset-list”>

<li class=”ico-twitter animation”>

<a href=”#”>

<span class=”icon-twitter”>

</span>

</a>

</li>

<li class=”ico-facebook animation”>

<a href=”#”>

<span class=”icon-facebook”>

</span>

</a>

</li>

<li class=”ico-google animation”>

<a href=”#”>

<span class=”icon-googleplus”>

</span>

</a>

</li>

<li class=”ico-pinterest animation”>

<a href=”#”>

<span class=”icon-pinterest”>

</span>

</a>

</li>

<li class=”ico-dribbble animation”>

<a href=”#”>

<span class=”icon-dribbble”>

</span>

</a>

</li>

</ul>

</div>

</div>

<div class=”col-sm-3 mbottom30″>

<h2>

From the Blog</h2>

<ul class=”footer-blog reset-list”>

<li>

<a href=”blog-post.html”>

<img src=”images/footer-img.jpg” alt=”” width=”68″ height=”68″/>

</a>

<p>

Donec ullamcorper nulla non ms ac is</p>

<p class=”tcolor”>

June 22, 2015</p>

<div class=”clearfix mbottom20″>

</div>

</li>

<li>

<a href=”blog-post.html”>

<img src=”images/footer-img2.jpg” alt=”” width=”68″ height=”68″/>

</a>

<p>

Donec ullamcorper nulla non ms ac is </p>

<p class=”tcolor”>

June 22, 2015</p>

<div class=”clearfix”>

</div>

</li>

</ul>

</div>

<div class=”col-sm-3 mbottom30″>

<h2>

Company</h2>

<ul class=”menu-list reset-list”>

<li>

<a href=”#”>

About Us</a>

</li>

<li>

<a href=”faq.html”>

FAQs</a>

</li>

<li>

<a href=”contact.html”>

Contact</a>

</li>

<li>

<a href=”#”>

Terms</a>

</li>

<li>

<a href=”#”>

Privacy</a>

</li>

<li>

<a href=”testimonials.html”>

Testimonials</a>

</li>

</ul>

</div>

<div class=”col-sm-3″>

<h2>

Newsletter Singup</h2>

<div id=”subscribe” class=”footer-subscribe center mbottom10″>

<form action=”” method=”post” id=”mc-embedded-subscribe-form” name=”mc-embedded-subscribe-form” class=”validate” target=”_blank” novalidate>

<input type=”email” value=”” name=”EMAIL” class=”email” id=”mce-EMAIL” placeholder=”Enter your email to subscribe” required>

<div style=”position: absolute; left: -5000px;”>

<input type=”text” name=”b_9ed253451c5b914e9c34e388b_6e3ba686ba” value=””>

</div>

<button class=” btn-sm btn-small” type=”submit” name=”subscribe” id=”mc-embedded-subscribe”>

<span class=”icon-envelope”>

</span>

</button>

</form>

<div id=”notification_container”>

</div>

</div>

<p class=”f300″>

By subscribing to our mailing list you will always be update with the latest news from us.</p>

</div>

</div>

</div>

<div class=”bottom-footer”>

<div class=”container”>

<div class=”row”>

<div class=”col-sm-12 center”>

<p class=”copyright”>

©2015 developed by <strong>

LorThemes</strong>

. All Rights Reserved</p>

</div>

</div>

</div>

</div>

<!– end bottom-footer –>

</footer>

<!– end footer –>

</div>

<p id=”back-top”>

<a href=”#top”>

<span class=”icon-angle-up”>

</span>

</a>

</p>

<!– JavaScript at the bottom for faster page loading –>

<script type=”text/javascript” src=”js/jquery-2.1.0.min.js”>

</script>

<script type=”text/javascript” src=”js/modernizr.custom.js”>

</script>

<script type=”text/javascript” src=”js/bootstrap.js”>

</script>

<script type=”text/javascript” src=”js/clean-js-plugins.js”>

</script>

<!– CleanLab Scrips File –>

<script type=”text/javascript” src=”js/cleanlab_script.js”>

</script>

<!– DemoPanel –>

<script type=”text/javascript” src=”js/bootstrap-select.js”>

</script>

<script type=”text/javascript” src=”js/evol.colorpicker.min.js”>

</script>

<script type=”text/javascript” src=”js/dmss.js”>

</script>

<!– Custom Scrips loaded on this page –>

<script type=”text/javascript” src=”js/jquery.themepunch.plugins.min.js”>

</script>

<script type=”text/javascript” src=”js/jquery.themepunch.revolution.min.js”>

</script>

<script type=”text/javascript”>

jQuery(document).ready(function() {
/* Revolution Slider */
jQuery(‘#revslider1′).show().revolution(
{
delay:9000,
startwidth:1170,
startheight:500,
hideThumbs:10,
fullWidth:”on”,
forceFullWidth:”off”
});
/* Owl Carousel */
$(“#our-team”).owlCarousel({
autoPlay: 3000, //Set AutoPlay to 3 seconds
items : 4,
itemsDesktop : [1199,3],
itemsDesktopSmall : [979,3],
autoPlay : false,
navigation : true,
pagination : false,
navigationText: [
“<i class=’icon-angle-left animation’>

</i>

“,
“<i class=’icon-angle-right animation’>

</i>

”
],
});
});
</script>

</body>

</html>

下载地址

立即下载