Размер файла: 23.94Kb
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Free Bootstrap Themes by 365Bootstrap dot com - Free Responsive Html5 Templates">
<meta name="author" content="http://www.365bootstrap.com">
<title>KoolTube | Free Bootstrap Themes by 365Bootstrap.com</title>
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/style.css">
<!-- Owl Carousel Assets -->
<link href="owl-carousel/owl.carousel.css" rel="stylesheet">
<link href="owl-carousel/owl.theme.css" rel="stylesheet">
<!-- Custom Fonts -->
<link rel="stylesheet" href="font-awesome-4.4.0/css/font-awesome.min.css" type="text/css">
<!-- jQuery and Modernizr-->
<script src="js/jquery-2.1.1.js"></script>
<!-- Core JavaScript Files -->
<script src="js/bootstrap.min.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<header>
<!--Top-->
<nav id="top">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6">
<strong>Welcome to KOOLTUBE!</strong>
</div>
<div class="col-md-6 col-sm-6">
<ul class="list-inline top-link link">
<li><a href="index.html"><i class="fa fa-home"></i> Home</a></li>
<li><a href="contact.html"><i class="fa fa-comments"></i> Contact</a></li>
<li><a href="#"><i class="fa fa-question-circle"></i> FAQ</a></li>
</ul>
</div>
</div>
</div>
</nav>
<!--Navigation-->
<nav id="menu" class="navbar">
<div class="container">
<div class="navbar-header"><span id="heading" class="visible-xs">Categories</span>
<button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li><a href="index.html"><i class="fa fa-home"></i> Home</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> Account</a>
<div class="dropdown-menu">
<div class="dropdown-inner">
<ul class="list-unstyled">
<li><a href="archive.html">Login</a></li>
<li><a href="archive.html">Register</a></li>
</ul>
</div>
</div>
</li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-play-circle-o"></i> Video</a>
<div class="dropdown-menu">
<div class="dropdown-inner">
<ul class="list-unstyled">
<li><a href="archive.html">Text 201</a></li>
<li><a href="archive.html">Text 202</a></li>
<li><a href="archive.html">Text 203</a></li>
<li><a href="archive.html">Text 204</a></li>
<li><a href="archive.html">Text 205</a></li>
</ul>
</div>
</div>
</li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-list"></i> Category</a>
<div class="dropdown-menu" style="margin-left: -203.625px;">
<div class="dropdown-inner">
<ul class="list-unstyled">
<li><a href="archive.html">Text 301</a></li>
<li><a href="archive.html">Text 302</a></li>
<li><a href="archive.html">Text 303</a></li>
<li><a href="archive.html">Text 304</a></li>
<li><a href="archive.html">Text 305</a></li>
</ul>
<ul class="list-unstyled">
<li><a href="archive.html">Text 306</a></li>
<li><a href="archive.html">Text 307</a></li>
<li><a href="archive.html">Text 308</a></li>
<li><a href="archive.html">Text 309</a></li>
<li><a href="archive.html">Text 310</a></li>
</ul>
<ul class="list-unstyled">
<li><a href="archive.html">Text 311</a></li>
<li><a href="archive.html">Text 312</a></li>
<li><a href="archive.html#">Text 313</a></li>
<li><a href="archive.html#">Text 314</a></li>
<li><a href="archive.html">Text 315</a></li>
</ul>
</div>
</div>
</li>
<li><a href="archive.html"><i class="fa fa-cubes"></i> Blocks</a></li>
<li><a href="contact.html"><i class="fa fa-envelope"></i> Contact</a></li>
</ul>
</div>
</div>
</nav>
<div class="header-slide">
<div id="owl-demo" class="owl-carousel">
<div class="item">
<div class="zoom-container">
<div class="zoom-caption">
<span>Video's Tag</span>
<a href="single.html">
<i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
</a>
<p>Video's Name</p>
</div>
<img src="images/2.jpg" />
</div>
</div>
<div class="item">
<div class="zoom-container">
<div class="zoom-caption">
<span>Video's Tag</span>
<a href="single.html">
<i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
</a>
<p>Video's Name</p>
</div>
<img src="images/3.jpg" />
</div>
</div>
<div class="item">
<div class="zoom-container">
<div class="zoom-caption">
<span>Video's Tag</span>
<a href="single.html">
<i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
</a>
<p>Video's Name</p>
</div>
<img src="images/4.jpg" />
</div>
</div>
<div class="item">
<div class="zoom-container">
<div class="zoom-caption">
<span>Video's Tag</span>
<a href="single.html">
<i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
</a>
<p>Video's Name</p>
</div>
<img src="images/5.jpg" />
</div>
</div>
<div class="item">
<div class="zoom-container">
<div class="zoom-caption">
<span>Video's Tag</span>
<a href="single.html">
<i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
</a>
<p>Video's Name</p>
</div>
<img src="images/6.jpg" />
</div>
</div>
<div class="item">
<div class="zoom-container">
<div class="zoom-caption">
<span>Video's Tag</span>
<a href="single.html">
<i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
</a>
<p>Video's Name</p>
</div>
<img src="images/7.jpg" />
</div>
</div>
<div class="item">
<div class="zoom-container">
<div class="zoom-caption">
<span>Video's Tag</span>
<a href="single.html">
<i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
</a>
<p>Video's Name</p>
</div>
<img src="images/8.jpg" />
</div>
</div>
<div class="item">
<div class="zoom-container">
<div class="zoom-caption">
<span>Video's Tag</span>
<a href="single.html">
<i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
</a>
<p>Video's Name</p>
</div>
<img src="images/9.jpg" />
</div>
</div>
</div>
</div>
</header>
<!-- Header -->
<!-- /////////////////////////////////////////Content -->
<div id="page-content" class="single-page">
<div class="container">
<div class="row">
<div id="main-content" class="col-md-8">
<div class="wrap-vid">
<iframe width="100%" height="400" src="https://www.youtube.com/embed/ImMw_5byGmA" frameborder="0" allowfullscreen></iframe>
</div>
<div class="share">
<ul class="list-inline center">
<li><a href="#" class="btn btn-facebook"><i class="fa fa-facebook"></i> Share</a></li>
<li><a href="#" class="btn btn-twitter"><i class="fa fa-twitter"></i> Tweet</a></li>
<li><a href="#" class="btn btn-pinterest"><i class="fa fa-pinterest"></i> Tweet</a></li>
<li><a href="#" class="btn btn-google"><i class="fa fa-google-plus-square"></i> Google+</a></li>
<li><a href="#" class="btn btn-mail"><i class="fa fa-envelope-o"></i> E-mail</a></li>
</ul>
</div>
<div class="line"></div>
<h1 class="vid-name"><a href="#">Video's Name</a></h1>
<div class="info">
<h5>By <a href="#">Kelvin</a></h5>
<span><i class="fa fa-calendar"></i>25/3/2015</span>
<span><i class="fa fa-heart"></i>1,200</span>
</div>
<p style="margin-top: 20px">Aenean feugiat in ante et blandit. Vestibulum posuere molestie risus, ac interdum magna porta non. Pellentesque rutrum fringilla elementum. Curabitur tincidunt porta lorem vitae accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ac euismod turpis.Aenean feugiat in ante et blandit. Vestibulum posuere molestie risus, ac interdum magna porta non. Pellentesque rutrum fringilla elementum. Curabitur tincidunt porta lorem vitae accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ac euismod turpis.</p>
<h4>Heading</h4>
<p style="margin-top: 20px">Aenean feugiat in ante et blandit. Vestibulum posuere molestie risus, ac interdum magna porta non. Pellentesque rutrum fringilla elementum. Curabitur tincidunt porta lorem vitae accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ac euismod turpis.</p>
<div class="vid-tags">
<a href="#">Animal</a>
<a href="#">Aenean</a>
<a href="#">Feugiat</a>
<a href="#">Risus</a>
<a href="#">Magna</a>
</div>
<div class="line"></div>
<div class="comment">
<h3>Leave A Comment</h3>
<form name="form1" method="post" action="">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control input-lg" name="name" id="name" placeholder="Enter name" required="required" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="email" class="form-control input-lg" name="email" id="email" placeholder="Enter email" required="required" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<textarea name="message" id="message" class="form-control" rows="4" cols="25" required="required"
placeholder="Message"></textarea>
</div>
<button type="submit" class="btn btn-4 btn-block" name="btnSend" id="btnSend">
Send</button>
</div>
</div>
</form>
</div>
<div class="line"></div>
<div class="box">
<div class="box-header">
<h2><i class="fa fa-globe"></i> RELATED VIDEOS</h2>
</div>
<div class="box-content">
<div class="row">
<div class="col-md-4">
<div class="wrap-vid">
<div class="zoom-container">
<div class="zoom-caption">
<span>Video's Tag</span>
<a href="single.html">
<i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
</a>
<p>Video's Name</p>
</div>
<img src="images/7.jpg" />
</div>
<h3 class="vid-name"><a href="#">Video's Name</a></h3>
<div class="info">
<h5>By <a href="#">Kelvin</a></h5>
<span><i class="fa fa-calendar"></i>25/3/2015</span>
<span><i class="fa fa-heart"></i>1,200</span>
</div>
</div>
</div>
<div class="col-md-4">
<div class="wrap-vid">
<div class="zoom-container">
<div class="zoom-caption">
<span>Video's Tag</span>
<a href="single.html">
<i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
</a>
<p>Video's Name</p>
</div>
<img src="images/8.jpg" />
</div>
<h3 class="vid-name"><a href="#">Video's Name</a></h3>
<div class="info">
<h5>By <a href="#">Kelvin</a></h5>
<span><i class="fa fa-calendar"></i>25/3/2015</span>
<span><i class="fa fa-heart"></i>1,200</span>
</div>
</div>
</div>
<div class="col-md-4">
<div class="wrap-vid">
<div class="zoom-container">
<div class="zoom-caption">
<span>Video's Tag</span>
<a href="single.html">
<i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
</a>
<p>Video's Name</p>
</div>
<img src="images/9.jpg" />
</div>
<h3 class="vid-name"><a href="#">Video's Name</a></h3>
<div class="info">
<h5>By <a href="#">Kelvin</a></h5>
<span><i class="fa fa-calendar"></i>25/3/2015</span>
<span><i class="fa fa-heart"></i>1,200</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="sidebar" class="col-md-4">
<!---- Start Widget ---->
<div class="widget wid-follow">
<div class="heading"><h4><i class="fa fa-users"></i> Follow Us</h4></div>
<div class="content">
<ul class="list-inline">
<li>
<a href="facebook.com/">
<div class="box-facebook">
<span class="fa fa-facebook fa-2x icon"></span>
<span>1250</span>
<span>Fans</span>
</div>
</a>
</li>
<li>
<a href="facebook.com/">
<div class="box-twitter">
<span class="fa fa-twitter fa-2x icon"></span>
<span>1250</span>
<span>Fans</span>
</div>
</a>
</li>
<li>
<a href="facebook.com/">
<div class="box-google">
<span class="fa fa-google-plus fa-2x icon"></span>
<span>1250</span>
<span>Fans</span>
</div>
</a>
</li>
</ul>
<img src="images/banner.jpg" />
</div>
<div class="line"></div>
</div>
<!---- Start Widget ---->
<div class="widget wid-post">
<div class="heading"><h4><i class="fa fa-globe"></i> Category</h4></div>
<div class="content">
<div class="post wrap-vid">
<div class="zoom-container">
<div class="zoom-caption">
<span>Video's Tag</span>
<a href="single.html">
<i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
</a>
<p>Video's Name</p>
</div>
<img src="images/7.jpg" />
</div>
<div class="wrapper">
<h5 class="vid-name"><a href="#">Video's Name</a></h5>
<div class="info">
<h6>By <a href="#">Kelvin</a></h6>
<span><i class="fa fa-calendar"></i>25/3/2015</span>
<span><i class="fa fa-heart"></i>1,200</span>
</div>
</div>
</div>
<div class="post wrap-vid">
<div class="zoom-container">
<div class="zoom-caption">
<span>Video's Tag</span>
<a href="single.html">
<i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
</a>
<p>Video's Name</p>
</div>
<img src="images/8.jpg" />
</div>
<div class="wrapper">
<h5 class="vid-name"><a href="#">Video's Name</a></h5>
<div class="info">
<h6>By <a href="#">Kelvin</a></h6>
<span><i class="fa fa-calendar"></i>25/3/2015</span>
<span><i class="fa fa-heart"></i>1,200</span>
</div>
</div>
</div>
<div class="post wrap-vid">
<div class="zoom-container">
<div class="zoom-caption">
<span>Video's Tag</span>
<a href="single.html">
<i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
</a>
<p>Video's Name</p>
</div>
<img src="images/9.jpg" />
</div>
<div class="wrapper">
<h5 class="vid-name"><a href="#">Video's Name</a></h5>
<div class="info">
<h6>By <a href="#">Kelvin</a></h6>
<span><i class="fa fa-calendar"></i>25/3/2015</span>
<span><i class="fa fa-heart"></i>1,200</span>
</div>
</div>
</div>
</div>
<div class="line"></div>
</div>
<!---- Start Widget ---->
<div class="widget wid-news">
<div class="heading"><h4><i class="fa fa-clock-o"></i> Top News</h4></div>
<div class="content">
<div class="wrap-vid">
<div class="zoom-container">
<div class="zoom-caption">
<span>Video's Tag</span>
<a href="single.html">
<i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
</a>
<p>Video's Name</p>
</div>
<img src="images/3.jpg" />
</div>
<h3 class="vid-name"><a href="#">Video's Name</a></h3>
<div class="info">
<h5>By <a href="#">Kelvin</a></h5>
<span><i class="fa fa-calendar"></i>25/3/2015</span>
<span><i class="fa fa-heart"></i>1,200</span>
</div>
</div>
<div class="wrap-vid">
<div class="zoom-container">
<div class="zoom-caption">
<span>Video's Tag</span>
<a href="single.html">
<i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
</a>
<p>Video's Name</p>
</div>
<img src="images/4.jpg" />
</div>
<h3 class="vid-name"><a href="#">Video's Name</a></h3>
<div class="info">
<h5>By <a href="#">Kelvin</a></h5>
<span><i class="fa fa-calendar"></i>25/3/2015</span>
<span><i class="fa fa-heart"></i>1,200</span>
</div>
</div>
<div class="wrap-vid">
<div class="zoom-container">
<div class="zoom-caption">
<span>Video's Tag</span>
<a href="single.html">
<i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
</a>
<p>Video's Name</p>
</div>
<img src="images/5.jpg" />
</div>
<h3 class="vid-name"><a href="#">Video's Name</a></h3>
<div class="info">
<h5>By <a href="#">Kelvin</a></h5>
<span><i class="fa fa-calendar"></i>25/3/2015</span>
<span><i class="fa fa-heart"></i>1,200</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="top-footer">
<ul class="footer-social list-inline">
<li><a href="#"><i class="fa fa-twitter"></i> <span>Twitter</span></a></li>
<li><a href="#"><i class="fa fa-facebook"></i> <span>Facebook</span></a></li>
<li><a href="#"><i class="fa fa-google-plus"></i> <span>Google+</span></a></li>
<li><a href="#"><i class="fa fa-youtube"></i> <span>Video's Tag</span></a></li>
<li><a href="#"><i class="fa fa-vimeo-square"></i> <span>Vimeo</span></a></li>
<li><a href="#"><i class="fa fa-pinterest"></i> <span>Pinterest</span></a></li>
<li><a href="#"><i class="fa fa-rss"></i> <span>Rss</span></a></li>
</ul>
</div>
<div class="wrap-footer">
<div class="container">
<div class="row">
<aside class="col-footer col-md-3">
<h2 class="footer-title">About Us</h2>
<div class="textwidget">Aenean feugiat in ante et blandit. Vestibulum posuere molestie risus, ac interdum magna porta non. Pellentesque rutrum fringilla elementum. Curabitur tincidunt porta lorem vitae accumsan. <br> <br>
Aenean feugiat in ante et blandit. Vestibulum posuere molestie risus, ac interdum magna porta non. Pellentesque rutrum fringilla elementum. Curabitur tincidunt porta lorem vitae accumsan.</div>
</aside>
<aside class="col-footer col-md-3 widget_recent_entries">
<h2 class="footer-title">Recent Posts</h2>
<ul>
<li><a href="#">MOST VISITED COUNTRIES</a></li>
<li><a href="#">5 PLACES THAT MAKE A GREAT HOLIDAY</a></li>
<li><a href="#">PEBBLE TIME STEEL IS ON TRACK TO SHIP IN JULY</a></li>
<li><a href="#">STARTUP COMPANY’S CO-FOUNDER TALKS ON HIS NEW PRODUCT</a></li>
</ul>
</aside>
<aside class="col-footer col-md-3">
<h2 class="footer-title">NEWS LETTER</h2>
If you want to receive our latest news send directly to your email, please leave your email address bellow. Subscription is free and you can cancel anytime.
<form action="#" method="post">
<input type="text" name="your-name" value="" size="40" placeholder="Your Email" />
<input type="submit" value="SUBSCRIBE" class="btn btn-3" />
</form>
</aside>
<aside class="col-footer col-md-3 wptt_TwitterTweets">
<h2 class="footer-title">Twitter</h2>
<ul class="fetched_tweets light">
<li class="tweets_avatar">
<div class="tweet_wrap">
<div class="wdtf-user-card ltr">
<div class="clear"></div>
</div>
<div class="tweet_data"> Check out 'NewsTube - Magazine Blog & Video' on <a href="#" target="_blank" rel="nofollow">#EnvatoMarket</a> <a href="#" target="_blank" rel="nofollow">#themeforest</a> <a href="http://t.co/jQV1MrQQKY" target="_blank" rel="nofollow">http://t.co/jQV1MrQQKY</a></div> <br/>
<div class="clear"></div>
<div class="times"> <em> <a href="#" target="_blank" title="Follow cactusthemes on Twitter [Opens new window]"> 2 months ago </a> </em></div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</li>
<li class="tweets_avatar">
<div class="tweet_wrap">
<div class="wdtf-user-card ltr"><div class="clear"></div></div>
<div class="tweet_data"> Our latest theme 'Nano - Simple Magazine WordPress Theme' on <a href="#" target="_blank" rel="nofollow">#EnvatoMarket</a> <a href="http://twitter.com/search?q=%23themeforest" target="_blank" rel="nofollow">#themeforest</a> <a href="http://t.co/IfZTbJTk06" target="_blank" rel="nofollow">http://t.co/IfZTbJTk06</a></div> <br/>
<div class="clear"></div>
<div class="times"> <em> <a href="#" target="_blank" title="Follow cactusthemes on Twitter [Opens new window]"> 5 months ago </a> </em></div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</li>
</ul>
</aside>
</div>
</div>
</div>
<div class="bottom-footer">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 copyright">
<span>Copyright © 20xx - <a href="http://www.365bootstrap.com" target="_blank">Bootstrap Themes</a> by 365bootstrap</span>
</div>
<div class="col-md-6 col-sm-6 link">
<div class="menu-footer-menu-container">
<ul id="menu-footer-menu" class="menu list-inline">
<li><a href="#"><i class="fa fa-home"></i> Home</a></li>
<li><a href="#"><i class="fa fa-comments"></i> Contact</a></li>
<li><a href="#"><i class="fa fa-question-circle"></i> FAQ</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- Footer -->
<!-- JS -->
<script src="owl-carousel/owl.carousel.js"></script>
<script>
$(document).ready(function() {
$("#owl-demo").owlCarousel({
autoPlay: 3000,
items : 5,
itemsDesktop : [1199,4],
itemsDesktopSmall : [979,4]
});
});
</script>
</body>
</html>