Файл: web-kgvip/portfolio-1.html
Строк: 411
<?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" />
<title>HTML5 шаблон сайта web-студии</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet" />
<!-- Primary CSS styles -->
<link href="css/style.css" rel="stylesheet" />
<!-- Fontawesome CSS styles -->
<link href="css/font-awesome.min.css" rel="stylesheet" />
<!-- Isotope CSS Styles -->
<link href="css/isotope.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" />
<!-- Owl Carousel CSS Styles -->
<link href="css/owl.carousel.css" rel="stylesheet" />
<link href="css/owl.transitions.css" rel="stylesheet" />
<!-- Lightbox CSS Styles -->
<link href="css/lightbox.css" rel="stylesheet" />
</head>
<body>
<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 -->
<div id="nav-ends"></div>
<section class="slug parallax-slug-5" data-stellar-background-ratio="0">
<div class="overlay">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="anim fadeInDown">Portfolio</h1>
<p class="anim fadeInDown" data-wow-delay=".32s">A badass compnay can only produce baddass work.</p>
<span class="anim fadeInDown" data-wow-delay=".42s"><a href="index.html">Home</a> <i class="fa fa-angle-right"></i> About</span>
</div><!-- .col-lg-12 -->
</div><!-- .row -->
</div>
</div><!-- .overlay -->
</section>
<section class="portfolio shift">
<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="images/blog-image-2.jpg" id="desc" data-icon="fa-search" data-lightbox="image1">
<img src="http://placehold.it/400x300g/f8c2c5/ffffff" />
</a>
</li>
<li class="work projects">
<a href="images/blog-image-2.jpg" id="desc" data-icon="fa-search" data-lightbox="image1">
<img src="http://placehold.it/400x300g/f8c2c5/ffffff" />
</a>
</li>
<li class="projects">
<a href="images/blog-image-2.jpg" id="desc" data-icon="fa-search" data-lightbox="image1">
<img src="http://placehold.it/400x300g/f8c2c5/ffffff" />
</a>
</li>
<li class="work">
<a href="images/blog-image-2.jpg" id="desc" data-icon="fa-search" data-lightbox="image1">
<img src="http://placehold.it/400x300g/f8c2c5/ffffff" />
</a>
</li>
<!-- End of row -->
<li class="work">
<a href="images/blog-image-2.jpg" id="desc" data-icon="fa-search" data-lightbox="image1">
<img src="http://placehold.it/400x300g/f8c2c5/ffffff" />
</a>
</li>
<li class="projects">
<a href="images/blog-image-2.jpg" id="desc" data-icon="fa-search" data-lightbox="image1">
<img src="http://placehold.it/400x300g/f8c2c5/ffffff" />
</a>
</li>
<li class="projects">
<a href="images/blog-image-2.jpg" id="desc" data-icon="fa-search" data-lightbox="image1">
<img src="http://placehold.it/400x300g/f8c2c5/ffffff" />
</a>
</li>
<li>
<a href="images/blog-image-2.jpg" id="desc" data-icon="fa-search" data-lightbox="image1">
<img src="http://placehold.it/400x300g/f8c2c5/ffffff" />
</a>
</li>
<li class="work">
<a href="images/blog-image-2.jpg" id="desc" data-icon="fa-search" data-lightbox="image1">
<img src="http://placehold.it/400x300g/f8c2c5/ffffff" />
</a>
</li>
<li class="projects">
<a href="images/blog-image-2.jpg" id="desc" data-icon="fa-search" data-lightbox="image1">
<img src="http://placehold.it/400x300g/f8c2c5/ffffff" />
</a>
</li>
<li class="projects">
<a href="images/blog-image-2.jpg" id="desc" data-icon="fa-search" data-lightbox="image1">
<img src="http://placehold.it/400x300g/f8c2c5/ffffff" />
</a>
</li>
<li>
<a href="images/blog-image-2.jpg" id="desc" data-icon="fa-search" data-lightbox="image1">
<img src="http://placehold.it/400x300g/f8c2c5/ffffff" />
</a>
</li>
</ul>
<div class="clearfix"></div>
</div>
</section><!-- portfolio -->
<section class="content-section callout">
<div class="container">
<div class="row">
<div class="col-lg-8 anim fadeInLeft">
<p> Aenean fermentum libero eu lectus tristique, quis ornare tortor tristique pretium. </p>
</div><!-- .col-lg-8 -->
<div class="col-lg-4 anim fadeInRight">
<a class="btn btn-bordered white btn-sm anim fadeInRight" role="button">Action 2</a>
<a class="btn btn-bordered white btn-sm anim fadeInRight" role="button">Buy Dale</a>
</div><!-- .col-lg-4 -->
</div><!-- .row -->
</div><!-- .container -->
</section><!-- .content-section -->
<footer class="classic">
<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-bordered white anim fadeInRight" role="button">Buy Dale</a>
</p>
</div><!-- .center-buttons -->
</div>
</div><!-- .container -->
<div class="foot-wrapper">
<div class="container">
<div class="row">
<div class="col-md-3 anim fadeInLeft">
<span class="logo">
<img src="images/logo-light.png" alt="Light logo" />
</span><!-- .logo -->
<p>
Aenean lacinia bibendum nulla sed leo erat a ante venenatis dapibus posuere velit aliquet.
Donec ullamcorper metus auctor fringi. Nillam quis risus.
</p>
</div><!-- .col-lg-3 -->
<div class="col-md-3 anim fadeInLeft">
<h5><i class="fa fa-twitter-square"></i>TWITTERSPHERE</h5>
<div class="twitter-feed-wrapper">
<div id="twitter-feed"></div>
</div>
</div><!-- .col-lg-3 -->
<div class="col-md-3">
<h5 class="anim fadeInRight"><i class="fa fa-rocket"></i>PAGES TO VISIT</h5>
<ul class="pages">
<li class="anim fadeInRight" data-wow-delay="0.35s"><a class="btn btn-bordered white" role="button" href="#">Home</a></li>
<li class="anim fadeInRight" data-wow-delay="0.37s"><a class="btn btn-bordered white" role="button" href="#">Portfolio</a></li>
<li class="anim fadeInRight" data-wow-delay="0.39s"><a class="btn btn-bordered white" role="button" href="#">About</a></li>
<li class="anim fadeInRight" data-wow-delay="0.42s"><a class="btn btn-bordered white" role="button" href="#">Blog</a></li>
<li class="anim fadeInRight" data-wow-delay="0.45s"><a class="btn btn-bordered white" role="button" href="#">Contact</a></li>
<li class="anim fadeInRight" data-wow-delay="0.49s"><a class="btn btn-bordered white" role="button" href="#">About</a></li>
<li class="anim fadeInRight" data-wow-delay="0.51s"><a class="btn btn-bordered white" role="button" href="#">Single Post</a></li>
<li class="anim fadeInRight" data-wow-delay="0.54s"><a class="btn btn-bordered white" role="button" href="#">Contact</a></li>
</ul><!-- .pages -->
</div><!-- .col-lg-3 -->
<div class="col-md-3 anim fadeInRight">
<h5><i class="fa fa-rss"></i>STAY CONNECTED</h5>
<div class="contact-info">
<p>
Feel free to call us any time, we have a staff
dedicated to taking your calls.
</p>
<span>
<i class="fa fa-phone"></i>
+1 (313) 123 - 4321
</span>
<span>
<i class="fa fa-envelope"></i>
support@example.com
</span>
<ul class="social-media" 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 -->
</div>
</div><!-- .col-lg-3 -->
</div><!-- .row -->
<div class="row">
<div class="col-lg-12">
<span class="copyright">Copyright 2014 Empirical Themes LLC - All RIghts Reserved</span>
</div><!-- .col-lg-12 -->
</div><!-- .row -->
</div><!-- .container -->
</div><!-- .foot-wrapper -->
</div><!-- .container -->
</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>
<!-- 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>
<!-- Isotope core JavaScript -->
<script language="javascript" src="js/jquery.isotope.min.js"></script>
<!-- jQuery color core JavaScript -->
<script language="javascript" src="js/jquery.animation.js"></script>
<!-- Stellar core JavaScript -->
<script language="javascript" src="js/jquery.stellar.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>
<!-- CountUp core JavaScript -->
<script language="javascript" src="js/countUp.min.js"></script>
<!-- EasypieChart core JavaScript -->
<script language="javascript" src="js/jquery.easypiechart.min.js"></script>
<!-- twitterfeed core JavaScript -->
<script language="javascript" src="js/jquery.twitterfeed.js"></script>
<!-- Lightbox core JavaScript -->
<script language="javascript" src="js/lightbox.min.js"></script>
<!-- Everything else -->
<script language="javascript" src="js/custom.js"></script>
<script type="text/javascript" language="javascript">
<!--
$(window).load(function() {
$("#about_slider").nivoSlider({
slices: 4,
boxCols: 8,
boxRows: 4,
animSpeed: 200,
controlNav: false,
prevText: '<i class="fa fa-chevron-left"></i>',
nextText: '<i class="fa fa-chevron-right"></i>',
});
});
$(document).ready(function() {
$("#carousel,#carousel-2").owlCarousel({
autoPlay:true,
singleItem:true,
transitionStyle:"goDown",
slideSpeed : 400,
touchDrag:false,
mouseDrag:false
});
$("#testimonials").owlCarousel({
singleItem:true,
autoPlay:true,
slideSpeed : 800
});
});
// -->
</script>
</body>
</html>
?>