Файл: web-kgvip/footer-alternate.html
Строк: 952
<?php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML5 шаблон сайта web-студии</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet" />
<!-- Primary CSS styles -->
<link href="css/style.css" rel="stylesheet" />
<!-- Masterslider CSS styles -->
<link href="css/masterslider/masterslider.css" rel="stylesheet" />
<link href="css/masterslider/skins/black-1/style.css" rel="stylesheet" />
<!-- Fontawesome CSS styles -->
<link href="css/font-awesome.min.css" rel="stylesheet" />
<!-- Aniamte CSS styles -->
<link href="css/animate.css" rel="stylesheet" />
<!-- Nivo Slider CSS Styles -->
<link href="css/nivo-slider.css" rel="stylesheet" />
<!-- Isotope CSS Styles -->
<link href="css/isotope.css" rel="stylesheet" />
<!-- Owl Carousel CSS Styles -->
<link href="css/owl.carousel.css" rel="stylesheet" />
<link href="css/owl.transitions.css" rel="stylesheet" />
</head>
<body>
<div class="slider-wrapper">
<!-- masterslider -->
<div class="master-slider" id="masterslider" data-height="fullscreen">
<!-- Slide 1 -->
<div class="ms-slide slide-1" style="z-index: 10" data-delay="8">
<!-- slide background -->
<img src="images/design/transparent.png" data-src="images/slider/image1.png" alt="lorem ipsum dolor sit" />
<h1 class="ms-layer center" style="left:0; top:25px;"
data-effect="rotatetop(-40,60,l)"
data-duration="3500"
data-delay="0"
data-ease="easeOutExpo"
>Welcome Human</h1>
<h2 class="ms-layer center" style="left:0; top:156px"
data-effect="left(short)"
data-duration="3500"
data-delay="300"
data-ease="easeOutExpo"
>The picture you paint will be the one they’ll see.</h2>
<!-- iPhone mockup -->
<img src="images/blank.gif" data-src="images/slider/iphone.png" alt="layer" class="ms-layer"
style="top:280px; left:145px; width:797px; height:595px;"
data-effect="bottom(100)"
data-duration="1200"
data-delay="600"
data-ease="easeOutQuad"
data-type="image"
/>
<!-- First iPhone Screen Layer -->
<img src="images/blank.gif" data-src="images/slider/slide-1-iphonescreen-1.png" alt="layer" class="ms-layer"
style="top:345px; left:295px; width:489px; height:303px;"
data-type="image"
data-delay="600"
data-ease="easeOutQuad"
data-effect="bottom(100)"
data-duration="1200"
data-hide-ease="easeOutExpo"
data-hide-effect="top(200)"
data-hide-duration="1200"
data-hide-time="3000"
/>
<!-- First iPhone Screen Layer -->
<img src="images/blank.gif" data-src="images/slider/slide-1-iphonescreen-1.png" alt="layer" class="ms-layer"
style="top:345px; left:295px; width:489px; height:303px;"
data-type="image"
data-delay="3000"
data-ease="easeOutQuad"
data-effect="bottom(0)"
data-duration="1200"
data-hide-ease="easeOutExpo"
data-hide-effect="top(200)"
data-hide-duration="1200"
data-hide-time="4500"
/>
<!-- First iPhone Screen Layer -->
<img src="images/blank.gif" data-src="images/slider/slide-1-iphonescreen-1.png" alt="layer" class="ms-layer"
style="top:345px; left:295px; width:489px; height:303px;"
data-type="image"
data-delay="4500"
data-ease="easeOutQuad"
data-effect="bottom(0)"
data-duration="1200"
data-hide-ease="easeOutExpo"
data-hide-effect="top(200)"
data-hide-duration="1200"
data-hide-time="6000"
/>
<!-- First iPhone Screen Layer -->
<img src="images/blank.gif" data-src="images/slider/slide-1-iphonescreen-3.png" alt="layer" class="ms-layer"
style="top:345px; left:295px; width:489px; height:303px;"
data-type="image"
data-delay="6000"
data-ease="easeOutQuad"
data-effect="bottom(0)"
data-duration="1200"
/>
</div>
<!-- end of slide -->
<!-- slide 2 -->
<div class="ms-slide slide-2" style="z-index: 11" data-delay="6">
<!-- slide background -->
<img src="images/design/transparent.png" data-src="images/slider/laptopglasses.png" alt="lorem ipsum dolor sit"/>
<h2 class="ms-layer" style="left:7px; top:215px;"
data-effect="top(100)"
data-duration="3500"
data-delay="0"
data-ease="easeOutExpo"
>A website like no other.</h2>
<h1 class="ms-layer" style="left:0; top:276px"
data-effect="bottom(short)"
data-duration="2500"
data-delay="500"
data-ease="easeOutExpo"
>Modern, Clean, Minimal</h1>
<p class="ms-layer h4" style="left:7px; top:415px; width:460px;"
data-effect="bottom(short)"
data-duration="1200"
data-delay="600"
data-ease="300"
>Rigged with over xx homepages, xx header styels, xx sliders,
xx footer styles, inifinite color options.</p>
<p class="ms-layer h4" style="left:7px; top:517px; width:460px;"
data-effect="bottom(short)"
data-duration="1000"
data-delay="650"
data-ease="300"
><a class="btn btn-bordered white anim" style="left:7px; top:460px;" role="button">Buy Dale</a></p>
</div>
<!-- end of slide -->
<!-- slide 3 -->
<div class="ms-slide slide-video" style="z-index: 9" data-delay="8">
<img src="images/design/transparent.png" data-src="images/slider/laptopglasses.png" alt="lorem ipsum dolor sit"/>
<video id="video1" class="video-js vjs-default-skin" poster="videos/CameraLens/CameraLens.jpg" muted="" autoplay="" loop="" preload="">
<source src="videos/CameraLens/CameraLens.mp4" type='video/mp4' />
<source src="videos/CameraLens/CameraLens.webm" type='video/webm' />
<source src="videos/CameraLens/CameraLens.ogv" type='video/ogg' />
</video>
<h2 class="ms-layer" style="left:390px; top:215px;"
data-effect="right(200)"
data-duration="3500"
data-delay="100"
data-ease="easeOutExpo"
>Custom Video Backgrounds</h2>
<h1 class="ms-layer center" style="left:0; top:276px"
data-effect="bottom(short)"
data-duration="2500"
data-delay="800"
data-ease="easeOutExpo"
>Perfected Every Pixel</h1>
<p class="ms-layer h4" style="left:91px; top:415px; width:460px;"
data-effect="left(short)"
data-duration="1200"
data-delay="1200"
data-ease="300"
>All videos you see in the preview are available in the
download file along with stock photos!</p>
</div>
<!-- end of slide -->
</div> <!-- end of masterslider -->
<a href="#firstSection"><i class="fa fa-chevron-down" id="go-down"></i></a>
</div><!-- end of slider-wrapper -->
<span id="nav-begins"></span><!-- place before navigation bar-->
<div class="container-wrapper navigation">
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="index.html">
<img src="images/logo.jpg" />
</a>
<ul class="mini"></ul><!-- mobile navigation -->
</div><!-- .navbar-header -->
<div class="collapse navbar-collapse">
<div class="right">
<ul class="nav navbar-nav">
<li class="active dropdown h">
<a href="#">Home</a>
<ul class="dropdown-menu">
<li><a href="#">Badass</a></li>
<li><a href="#">Dropdown</a></li>
<li><a href="#">Menu</a></li>
</ul>
</li>
<li class="dropdown h">
<a href="#">Pages</a>
<ul class="dropdown-menu">
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="single.html">Single</a></li>
<li><a href="footer-alternate.html">Footer 2</a></li>
</ul>
</li>
<li class="dropdown h full">
<a href="#">Features</a>
<section class="container dropdown-menu">
<span class="wrapper">
<div class="clear-wrapper">
<article>
<strong>PAGE STRUCTURE</strong>
<ul>
<li><a href="#"><i class="fa fa-video-camera"></i>Video Backgrounds</a></li>
<li><a href="#"><i class="fa fa-picture-o"></i>Parallax Backgrounds</a></li>
<li><a href="#"><i class="fa fa-sun-o"></i>Light Background</a></li>
<li><a href="#"><i class="fa fa-moon-o"></i>Dark Background</a></li>
</ul>
</article>
<span class="divider"></span>
<article>
<strong>PAGE ELEMENTS</strong>
<ul>
<li><a href="#"><i class="fa fa-video-camera"></i>Lorem Ipsum</a></li>
<li><a href="#"><i class="fa fa-picture-o"></i>Dolar Sit</a></li>
<li><a href="#"><i class="fa fa-sun-o"></i>Amet</a></li>
<li><a href="#"><i class="fa fa-moon-o"></i>Varun Sitrem</a></li>
</ul>
</article>
<span class="divider"></span>
<article>
<strong>SOME MORE STUFF</strong>
<ul>
<li><a href="#"><i class="fa fa-video-camera"></i>Pricing</a></li>
<li><a href="#"><i class="fa fa-picture-o"></i>Content</a></li>
<li><a href="#"><i class="fa fa-sun-o"></i>Features</a></li>
<li><a href="#"><i class="fa fa-moon-o"></i>Typography</a></li>
</ul>
</article>
</div><!-- .clear-wrapper -->
<div class="color-wrapper">
<strong>FRESH FROM THE BLOG</strong>
<div class="nivo-wrapper">
<div id="slider" class="nivoSlider">
<img src="images/citydown.jpg" alt="" name="" width="310" height="150" />
<img src="images/oceanscene.jpg" alt="" name="" width="310" height="150" />
</div>
</div>
<p><a href="#">To see more, check out our portfolio page! Prepare to be impressed.</a></p>
</div><!-- .color-wrapper -->
</span>
</section><!-- .container.dropdown-menu -->
</li><!-- .dropdown.full -->
<li><a href="portfolio-1.html">Portfolio</a></li>
<li><a href="blog.html">Blog</a></li>
</ul>
<div class="navbar-form navbar-left">
<i class="fa fa-times"></i>
<i class="fa fa-search"></i>
</div>
</div>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
<div class="search-field">
<div class="container">
<form method="get" role="search">
<input type="text" name="s" placeholder="Type then press enter..." />
<button type="submit" class="hidden btn btn-default">Submit</button>
</form>
</div>
</div><!-- search-field -->
</nav>
</div><!-- .navigation -->
<section class="content-section" id="firstSection">
<div class="container">
<h1 class="anim fadeInDown"><i class="fa fa-gear"></i>OUR <span>SERVICES</span></h1>
<p class="anim fadeInUp">
We offer many various services at Dale! We will list a few right here,
right now just to show you how incredibly awesome we are at our company!
</p>
</div>
</section>
<section class="feature-list">
<div class="container">
<div class="col-lg-4 feature anim fadeInLeft" data-wow-delay="0.25s">
<i class="fa fa-trophy"></i>
<div class="content">
<h4>Award-Winning Designs</h4>
<p>Accusantium quam, ultricies eget id, aliquam eget nibh et. Maecen risus at semper ullamcorp.</p>
</div>
</div>
<div class="col-lg-4 feature anim fadeInDown" data-wow-delay="0.25s">
<i class="fa fa-eye"></i>
<div class="content">
<h4>Retina-Ready</h4>
<p>Accusantium quam, ultricies eget id, aliquam eget nibh et. Maecen risus at semper ullamcorp.</p>
</div>
</div>
<div class="col-lg-4 feature anim fadeInRight" data-wow-delay="0.25s">
<i class="fa fa-flask"></i>
<div class="content">
<h4>Creative Colors</h4>
<p>Accusantium quam, ultricies eget id, aliquam eget nibh et. Maecen risus at semper ullamcorp.
Appreicate the </p>
</div>
</div>
<!-- Second Row -->
<div class="col-lg-4 feature anim fadeInLeft" data-wow-delay="0.5s">
<i class="fa fa-expand"></i>
<div class="content">
<h4>Responsive Design</h4>
<p>Accusantium quam, ultricies eget id, aliquam eget nibh et. Maecen risus at semper ullamcorp.</p>
</div>
</div>
<div class="col-lg-4 feature anim fadeInUp" data-wow-delay="0.5s">
<i class="fa fa-bug"></i>
<div class="content">
<h4>SEO Optimized</h4>
<p>Accusantium quam, ultricies eget id, aliquam eget nibh et. Maecen risus at semper ullamcorp.</p>
</div>
</div>
<div class="col-lg-4 feature anim fadeInRight" data-wow-delay="0.5s">
<i class="fa fa-coffee"></i>
<div class="content">
<h4>Beautiful Code</h4>
<p>Accusantium quam, ultricies eget id, aliquam eget nibh et. Maecen risus at semper ullamcorp.</p>
</div>
</div>
<!-- End of second row -->
</div>
</section><!-- .feature-list -->
<section class="content-section fixed video blur">
<span class="shadows"></span>
<div class="video-wrapper">
<video id="video1" class="video-js vjs-default-skin" poster="videos/RecordPlayer/poster.jpg" width="1600" height="901" muted="" autoplay="" loop="" preload="">
<source src="videos/RecordPlayer/RecordPlayer.mp4" type='video/mp4' />
<source src="videos/RecordPlayer/RecordPlayer.webm" type='video/webm' />
<source src="videos/RecordPlayer/RecordPlayer.ogv" type='video/ogg' />
</video>
</div><!-- .video-wrapper -->
<div class="container anim fadeInUp">
<i class="fa fa-quote-left"></i>
<ul class="testimonials" id="testimonials">
<li class="ms-slide">
<img src="images/design/transparent.png" data-src="images/design/transparent.png" />
<h3>Dream more than others think practical. Expect more than others think possible.</h3>
<cite><strong>Howard Schultz</strong> - Starbucks CEO</cite>
</li>
<li class="ms-slide">
<img src="images/design/transparent.png" data-src="images/design/transparent.png" />
<h3>I love to compete. To me, business is the ultimate sport. It's always on.</h3>
<cite><strong>Mark Cuban</strong> - Businessman</cite>
</li>
<li class="ms-slide">
<img src="images/design/transparent.png" data-src="images/design/transparent.png" />
<h3>Business is a sprint until you find an opportunity, then it's the patience of a marathon runner.</h3>
<cite><strong>Robert Herjavec</strong> - Businessman</cite>
</li>
</ul><!-- .testimonials -->
<i class="fa fa-quote-right"></i>
</div><!-- .container -->
<!-- Optional Nav
<div class="ms-nav-prev" id="tPrev"></div>
<div class="ms-nav-next" id="tNext"></div>
-->
</section><!-- .content-section -->
<section class="content-section anim fadeInDown" data-wow-delay="0.25s">
<div class="container">
<h1><i class="fa fa-pencil"></i>OUR <span>WORK</span></h1>
<p>We offer many various services at Dale! We will list a few right here, right now just to show you how incredibly awesome we are at our company!</p>
</div>
</section>
<section class="portfolio">
<div class="container">
<div class="filter anim fadeInDown" data-wow-delay="0.55s">
<ul id="filters">
<li><a class="btn btn-bordered hot btn-sm" role="button" data-filter="*">All</a></li>
<li><a class="btn btn-bordered btn-sm" role="button" data-filter=".work">Work</a></li>
<li><a class="btn btn-bordered btn-sm" role="button" data-filter=".projects">Projects</a></li>
</ul>
</div>
<!-- Standard button -->
</div><!-- container -->
<div class="gallary">
<div class="preview">
<i class="fa fa-spinner fa-spin"></i>
</div>
<ul>
<li class="work">
<a href="#" id="desc" data-title="Optional Title">
<img src="images/gallary1.jpg" />
</a>
</li>
<li class="work projects">
<a href="#" id="desc">
<img src="images/gallary2.jpg" />
</a>
</li>
<li class="projects">
<a href="#" id="desc">
<img src="images/gallary3.jpg" />
</a>
</li>
<li class="work">
<a href="#" id="desc">
<img src="images/gallary4.jpg" />
</a>
</li>
<!-- End of row -->
<li class="work">
<a href="#" id="desc">
<img src="images/gallary5.jpg" />
</a>
</li>
<li class="projects">
<a href="#" id="desc">
<img src="images/gallary6.jpg" />
</a>
</li>
<li class="projects">
<a href="#" id="desc">
<img src="images/gallary7.jpg" />
</a>
</li>
<li>
<a href="#" id="desc">
<img src="images/gallary8.jpg" />
</a>
</li>
</ul>
<div class="clearfix"></div>
</div>
</section><!-- portfolio -->
<section class="content-section anim fadeInDown" data-wow-delay="0.25s">
<div class="container">
<h1><i class="fa fa-rocket"></i>OUR BADASS <span>TEAM</span></h1>
<p>
The great services would not have been remotley possible if it was not for the effort exerted
by our amazing and talented team, check them out.
</p>
</div>
</section><!-- .content-section -->
<section class="content-section parallax-bg-2 team" data-stellar-background-ratio="0.15">
<div class="container">
<div class="col-lg-12 anim fadeInDown">
<div class="relative">
<!-- masterslider -->
<div class="master-slider wrapper" id="teamslider">
<div class="ms-slide" data-member-id="1" data-title="Optional Title">
<img src="images/design/blank.jpg" data-src="images/team4.jpg" alt="lorem ipsum dolor sit"/>
<div class="ms-info">
<span class="name">ELLEN JOHN</span>
<span class="position">Public Relations</span>
</div><!-- .ms-info -->
</div>
<div class="ms-slide" data-member-id="2">
<img src="images/design/blank.jpg" data-src="images/team3.jpg" alt="lorem ipsum dolor sit"/>
<div class="ms-info">
<span class="name">PAUL HOLDER</span>
<span class="position">Team Motivator</span>
</div><!-- .ms-info -->
</div>
<div class="ms-slide" data-member-id="3">
<img src="images/design/blank.jpg" data-src="images/team1.jpg" alt="lorem ipsum dolor sit"/>
<div class="ms-info">
<span class="name">SARAH SMITH</span>
<span class="position">Marketing Director</span>
</div><!-- .ms-info -->
</div>
<div class="ms-slide" data-member-id="4">
<img src="images/design/blank.jpg" data-src="images/team2.jpg" alt="lorem ipsum dolor sit"/>
<div class="ms-info">
<span class="name">MARK DOE</span>
<span class="position">Company CEO</span>
</div><!-- .ms-info -->
</div>
</div>
<div class="ms-info" id="staff-info"></div>
<div class="ms-nav-prev"></div>
<div class="ms-nav-next"></div>
</div><!-- .relative -->
</div><!-- .col-lg-12 -->
<div class="member-box-wrapper">
<!-- Person 1 Box -->
<div class="member-box" id="1">
<div class="color-wrapper">
<a href="#" id="close"><i class="fa fa-times"></i></a>
<img src="images/team4.jpg" alt="Team Member Girl" />
<strong>Ellen John</strong>
<span>Public Relations</span>
<ul class="social-media">
<li><a href="#twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="#facebook"><i class="fa fa-facebook"></i></a></li>
<li><a href="#linkedin"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#github"><i class="fa fa-github"></i></a></li>
<li><a href="#pintrest"><i class="fa fa-pinterest"></i></a></li>
<li><a href="#email"><i class="fa fa-envelope"></i></a></li>
</ul>
</div><!-- .color-wrapper -->
<div class="clear-wrapper">
<h3>About Me</h3>
<p>Phasellus condimentum sed diam vel vulputate. Pellentesque <a href="#">external link</a> nunc.
Nullam volutpat dapibus orci, a porttitor dolor dignissim id. Nulla turpis
tellus, sodales nec tincidunt in, auctor ac lacus.</p>
<h3>Skills</h3>
<ul class="bars">
<li>
<strong>Speaking</strong>
<span>90%</span>
<div class="progress"><div class="progress-bar" role="progressbar" data-value="90"></div></div>
</li>
<li>
<strong>People</strong>
<span>88%</span>
<div class="progress"><div class="progress-bar" role="progressbar" data-value="80"></div></div>
</li>
<li>
<strong>Marketing</strong>
<span>86%</span>
<div class="progress"><div class="progress-bar" role="progressbar" data-value="86"></div></div>
</li>
<li>
<strong>Campaigning</strong>
<span>82%</span>
<div class="progress"><div class="progress-bar" role="progressbar" data-value="82"></div></div>
</li>
</ul>
</div><!-- .clear-wrapper -->
<div class="shadow-lg"></div><!-- Remove this to remove the bottom shadow -->
</div><!-- .member-box -->
<!-- Person 2 Box -->
<div class="member-box" id="2">
<div class="color-wrapper">
<a href="#" id="close"><i class="fa fa-times"></i></a>
<img src="images/team3.jpg" alt="Team Memember Business Person" />
<strong>Paul Holder</strong>
<span>Team Motivator</span>
<ul class="social-media">
<li><a href="#twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="#facebook"><i class="fa fa-facebook"></i></a></li>
<li><a href="#linkedin"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#github"><i class="fa fa-github"></i></a></li>
<li><a href="#pintrest"><i class="fa fa-pinterest"></i></a></li>
<li><a href="#email"><i class="fa fa-envelope"></i></a></li>
</ul>
</div><!-- .color-wrapper -->
<div class="clear-wrapper">
<h3>About Me</h3>
<p>Lorem ipsum dolor sit amet, <a href="#">external link</a> consectetur adipiscing elit. Ut urna velit,
laoreet a tincidunt non, ullamcorper vitae mauris. Ut id dui nec enim
volutpat vehicula ut eget nunc.</p>
<h3>Skills</h3>
<ul class="bars">
<li>
<strong>Communication</strong>
<span>95%</span>
<div class="progress"><div class="progress-bar" role="progressbar" data-value="95"></div></div>
</li>
<li>
<strong>Public Relations</strong>
<span>90%</span>
<div class="progress"><div class="progress-bar" role="progressbar" data-value="90"></div></div>
</li>
<li>
<strong>Marketing</strong>
<span>86%</span>
<div class="progress"><div class="progress-bar" role="progressbar" data-value="86"></div></div>
</li>
<li>
<strong>Campaigning</strong>
<span>82%</span>
<div class="progress"><div class="progress-bar" role="progressbar" data-value="82"></div></div>
</li>
</ul>
</div><!-- .clear-wrapper -->
<div class="shadow-lg"></div><!-- Remove this to remove the bottom shadow -->
</div><!-- .member-box -->
<!-- Person 3 Box -->
<div class="member-box" id="3">
<div class="color-wrapper">
<a href="#" id="close"><i class="fa fa-times"></i></a>
<img src="images/team1.jpg" alt="Team Memember Business Person" />
<strong>Sarah Smith</strong>
<span>Marketing Director</span>
<ul class="social-media">
<li><a href="#twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="#facebook"><i class="fa fa-facebook"></i></a></li>
<li><a href="#linkedin"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#github"><i class="fa fa-github"></i></a></li>
<li><a href="#pintrest"><i class="fa fa-pinterest"></i></a></li>
<li><a href="#email"><i class="fa fa-envelope"></i></a></li>
</ul>
</div><!-- .color-wrapper -->
<div class="clear-wrapper">
<h3>About Me</h3>
<p>Phasellus condimentum sed diam vel vulputate. Pellentesque nec lorem nunc.
Nullam volutpat dapibus orci, a <a href="#">external link</a> id. Nulla turpis
tellus, sodales nec tincidunt in, auctor ac lacus.</p>
<h3>Skills</h3>
<ul class="bars">
<li>
<strong>Speaking</strong>
<span>90%</span>
<div class="progress"><div class="progress-bar" role="progressbar" data-value="90"></div></div>
</li>
<li>
<strong>People</strong>
<span>88%</span>
<div class="progress"><div class="progress-bar" role="progressbar" data-value="80"></div></div>
</li>
<li>
<strong>Marketing</strong>
<span>86%</span>
<div class="progress"><div class="progress-bar" role="progressbar" data-value="86"></div></div>
</li>
<li>
<strong>Campaigning</strong>
<span>82%</span>
<div class="progress"><div class="progress-bar" role="progressbar" data-value="82"></div></div>
</li>
</ul>
</div><!-- .clear-wrapper -->
<div class="shadow-lg"></div><!-- Remove this to remove the bottom shadow -->
</div><!-- .member-box -->
<!-- Person 3 Box -->
<div class="member-box" id="4">
<div class="color-wrapper">
<a href="#" id="close"><i class="fa fa-times"></i></a>
<img src="images/team2.jpg" alt="Team Memember Business Person" />
<strong>Mark Doe</strong>
<span>Company Ceo</span>
<ul class="social-media">
<li><a href="#twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="#facebook"><i class="fa fa-facebook"></i></a></li>
<li><a href="#linkedin"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#github"><i class="fa fa-github"></i></a></li>
<li><a href="#pintrest"><i class="fa fa-pinterest"></i></a></li>
<li><a href="#email"><i class="fa fa-envelope"></i></a></li>
</ul>
</div><!-- .color-wrapper -->
<div class="clear-wrapper">
<h3>About Me</h3>
<p>Phasellus condimentum sed diam vel vulputate. Pellentesque nec lorem nunc.
Nullam volutpat dapibus orci, a <a href="#">external link</a> id. Nulla turpis
tellus, sodales nec tincidunt in, auctor ac lacus.</p>
<h3>Skills</h3>
<ul class="bars">
<li>
<strong>Speaking</strong>
<span>90%</span>
<div class="progress"><div class="progress-bar" role="progressbar" data-value="90"></div></div>
</li>
<li>
<strong>People</strong>
<span>88%</span>
<div class="progress"><div class="progress-bar" role="progressbar" data-value="80"></div></div>
</li>
<li>
<strong>Marketing</strong>
<span>86%</span>
<div class="progress"><div class="progress-bar" role="progressbar" data-value="86"></div></div>
</li>
<li>
<strong>Campaigning</strong>
<span>82%</span>
<div class="progress"><div class="progress-bar" role="progressbar" data-value="82"></div></div>
</li>
</ul>
</div><!-- .clear-wrapper -->
<div class="shadow-lg"></div><!-- Remove this to remove the bottom shadow -->
</div><!-- .member-box -->
</div><!-- .member-box-wrapper -->
</div><!-- .container -->
</section><!-- .team -->
<section class="content-section anim fadeInDown">
<div class="container">
<h1><i class="fa fa-pencil-square-o"></i>CONTACT <span>US</span></h1>
<p>
Our primary concern is dealing with our customers and making sure that they are satisfied.
Any questions, comments, or concerns you may have are very important to us.
</p>
</div>
</section><!-- .content-section -->
<section class="content-section form contact light">
<div class="container">
<span id="message"></span><!-- remove #message to stop floating jQuery messages -->
<form target="#" name="contact">
<div class="col-lg-5 anim fadeInLeft">
<span class="input-group">
<i class="fa fa-user"></i>
<input type="text" name="contactName" id="contactName" class="lg" placeholder="Name" />
</span><!-- .input-group -->
<span class="input-group">
<i class="fa fa-envelope"></i>
<input type="text" name="contactEmail" id="contactAddress" class="lg" placeholder="Email Address" />
</span><!-- .input-group -->
<span class="input-group">
<i class="fa fa-book"></i>
<input type="text" name="contactSubject" id="contactSubject" class="lg" placeholder="Subject" />
</span><!-- .input-group -->
</div><!-- .col-5 -->
<div class="col-lg-7 anim fadeInRight">
<span class="input-group">
<textarea name="contactMessage" id="contactMessage" class="lg" placeholder="What's on your mind?"></textarea>
</span><!-- .input-group -->
<span class="input-group">
<button class="submit" id="submit_contact" data-loading-text="SENDING...">SEND</button>
</span><!-- .input-group -->
</div>
</form>
</div><!-- .container -->
<span id="message_sent"><i class="fa-check fa"></i></span><!-- jQuery display of giant checkmark -->
</section><!-- .content-section .form -->
<footer>
<section class="content-section parallax-bg-3" data-stellar-background-ratio=".15">
<div class="container">
<div class="col-lg-12">
<h1 class="anim fadeInDown">Convinced?</h1>
<div class="center-buttons">
<p>
<a class="btn btn-primary btn-lg anim fadeInLeft" role="button">BUY DALE</a>
<a class="btn btn-bordered white rhs btn-lg anim fadeInRight" role="button">NOT QUITE YET</a>
</p>
</div><!-- .center-buttons -->
</div>
</div><!-- .container -->
<div class="foot-wrapper">
<div class="container">
<div class="col-lg-12">
<div class="logo anim fadeInDown">
<center><img src="images/foot-logo.png" alt="Footer logo awesomeness." /></center>
</div><!-- .logo -->
<p class="liner anim fadeInUp">Together, we will rule the world.</p>
<ul class="social-media anim fadeInUp" data-wow-delay="0.25s">
<li><a href="#twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="#facebook"><i class="fa fa-facebook"></i></a></li>
<li><a href="#linkedin"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#github"><i class="fa fa-github"></i></a></li>
<li><a href="#pintrest"><i class="fa fa-pinterest"></i></a></li>
</ul><!-- .social-media -->
<p class="copyright anim fadeIn" data-wow-delay="0.35s">
Copyright 2014 - All Rights Reserved
</p><!-- .copyright -->
</div><!-- .col-lg-12 -->
</div><!-- .container -->
</div><!-- .foot-wrapper -->
</section><!-- .content-section -->
</footer>
<script language="javascript" src="js/jquery-1.11.0.min.js"></script>
<!-- Easing core JavaScript -->
<script language="javascript" src="js/jquery.easing.1.3.js"></script>
<!-- Bootstrap core JavaScript -->
<script language="javascript" src="js/bootstrap.min.js"></script>
<!-- Master slider core JavaScript -->
<script language="javascript" src="js/masterslider.min.js"></script>
<!-- Master slider staff core JavaScript -->
<script language="javascript" src="js/masterslider.staff.carousel.dev.js"></script>
<!-- WOW core JavaScript -->
<script language="javascript" src="js/wow.min.js"></script>
<!-- Waypoints core JavaScript -->
<script language="javascript" src="js/waypoints.min.js"></script>
<!-- Underscore core JavaScript -->
<script language="javascript" src="js/underscore-min.js"></script>
<!-- jQuery Backstretch core -->
<script language="javascript" src="js/jquery.backstretch.min.js"></script>
<!-- jQuery color core JavaScript -->
<script language="javascript" src="js/jquery.animation.js"></script>
<!-- Isotope core JavaScript -->
<script language="javascript" src="js/jquery.isotope.min.js"></script>
<!-- Stellar core JavaScript -->
<script language="javascript" src="js/jquery.stellar.min.js"></script>
<!-- Contact core JavaScript -->
<script language="javascript" src="js/jquery.contact.min.js"></script>
<!-- NiceScroll core Javascript -->
<script language="javascript" src="js/jquery.nicescroll.min.js"></script>
<!-- Retina core JavaScript -->
<script language="javascript" src="js/retina-1.1.0.min.js"></script>
<!-- Nivo Slider JavaScript -->
<script language="javascript" src="js/jquery.nivo.slider.pack.js"></script>
<!-- Video core JavaScript -->
<script language="javascript" src="js/video.js"></script>
<!-- OWL Carousel core JavaScript -->
<script language="javascript" src="js/owl.carousel.min.js"></script>
<!-- twitterfeed core JavaScript -->
<script language="javascript" src="js/jquery.twitterfeed.js"></script>
<!-- Everything else -->
<script language="javascript" src="js/custom.js"></script>
<script type="text/javascript" language="javascript">
<!--
jQuery(document).ready(function($) {
/************************
****** MasterSlider *****
*************************/
// Calibrate slider's height
var sliderHeight = 790; // Smallest hieght allowed (default height)
if ( $('#masterslider').data('height') == 'fullscreen' ) {
var winHeight = $(window).height();
sliderHeight = winHeight > sliderHeight ? winHeight : sliderHeight;
}
// Initialize the main slider
var slider = new MasterSlider();
slider.setup('masterslider', {
space:0,
fullwidth:true,
autoplay:true,
overPause:false,
width:1024,
height:sliderHeight
});
// adds Arrows navigation control to the slider.
slider.control('bullets',{autohide:false , dir:"h"});
var teamslider = new MasterSlider();
teamslider.setup('teamslider' , {
loop:true,
width:300,
height:290,
speed:20,
view:'stffade',
grabCursor:false,
preload:0,
space:29
});
teamslider.control('slideinfo',{insertTo:'#staff-info'});
$(".team .ms-nav-next").click(function() {
teamslider.api.next();
});
$(".team .ms-nav-prev").click(function() {
teamslider.api.previous();
});
});
// -->
</script>
</body>
</html>
?>