<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<a href="#" class="btn btn-block btn-lg btn-success">Upload Your Video <span class="glyphicon glyphicon-hand-up"></span></a>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-megadropdown-tabs">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-megadropdown-tabs">
<ul class="nav navbar-nav">
<li><a href="#">About us</a></li>
<li><a href="#">FAQ</a></li>
<li class="dropdown mega-dropdown active">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Categories <span class="caret"></span></a>
<div class="dropdown-menu mega-dropdown-menu">
<div class="container-fluid">
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="men">
<ul class="nav-list list-inline">
<li><a href="#"><img src="http://iccforum.com/sites/default/files/imagecache/user_image_default/sites/all/themes/ucla/images/Avatar_Generic_150x150.png"><span>Politics</span></a></li>
<li><a href="#"><img src="http://www.digitaltveurope.net/wp-content/uploads/2014/09/cloudio-tv-2-85x85.png"><span>Media</span></a></li>
<li><a href="#"><img src="http://cf.ltkcdn.net/movies/images/thumb/58335-85x85-Dancing_Film.jpg"><span>Movie</span></a></li>
<li><a href="#"><img src="http://www.smilytango.com/music_files/music.png"><span>Music</span></a></li>
<li><a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_MensTraining.png"><span>Art</span></a></li>
<li><a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_WomensTraining.png"><span>Sport</span></a></li>
</ul>
</div>
<div class="tab-pane" id="women">
<ul class="nav-list list-inline">
<li><a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Running.png"><span>ELECTIONS</span></a></li>
<li><a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Basketball.png"><span>OLIMPIADA</span></a></li>
<li><a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Football.png"><span>CHAMPIONSHIOl</span></a></li>
<li><a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Soccer.png"><span>HELTH</span></a></li>
</ul>
</div>
<div class="tab-pane" id="kids">
<ul class="nav-list list-inline">
<li><a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Running.png"><span>PEOPLE</span></a></li>
<li><a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Basketball.png"><span>WORLD</span></a></li>
<li><a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Football.png"><span>EVENTS</span></a></li>
<li><a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Soccer.png"><span>SPECIAL</span></a></li>
<li><a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_MensTraining.png"><span>SHOCKING</span></a></li>
<li><a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_WomensTraining.png"><span>PAPARAZZO</span></a></li>
</ul>
</div>
<div class="tab-pane" id="sports">
<ul class="nav-list list-inline">
<li><a href="#"><img src="http://sdwc.org/wp-content/uploads/wpstorecart/music-sdwc-dues.jpg"><span>Music</span></a></li>
<li><a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Football.png"><span>Film</span></a></li>
<li><a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Soccer.png"><span>Paparaci</span></a></li>
<li><a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_MensTraining.png"><span>Women</span></a></li>
<li><a href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_WomensTraining.png"><span>Women's Training</span></a></li>
</ul>
</div>
</div>
</div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#men" role="tab" data-toggle="tab">Politics</a></li>
<li><a href="#women" role="tab" data-toggle="tab">Entertejmt</a></li>
<li><a href="#kids" role="tab" data-toggle="tab">Kids</a></li>
<li><a href="#sports" role="tab" data-toggle="tab">Sports</a></li>
</ul>
</div>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/1200x400/16a085/ffffff&text=About Us">
<div class="carousel-caption">
<h3>
NEWS FROM ME</h3>
<p>
If you make interesting video ,you can place it here and we can try to sell it to the bigest world media houses.</p>
</div>
</div>
<!-- End Item -->
<div class="item">
<img src="http://placehold.it/1200x400/e67e22/ffffff&text=Projects">
<div class="carousel-caption">
<h3>
EARN MONEY FOR DOING SAME STUFF AS EVER </h3>
<p>
WE CARE ! WE will give our best to sell.</p>
</div>
</div>
<!-- End Item -->
<div class="item">
<img src="http://placehold.it/1200x400/2980b9/ffffff&text=Portfolio">
<div class="carousel-caption">
<h3>
JOIN NOW</h3>
<p>
START EARNING AS SOON AS POSIBILE.</p>
</div>
</div>
<!-- End Item -->
<div class="item">
<img src="http://placehold.it/1200x400/8e44ad/ffffff&text=Services">
<div class="carousel-caption">
<h3>
ASK HOW?? GO TO YOUR VIDEO ARCHIVE. SELECT BEST INTERESTING SHOCKING VIDEO</h3>
<p>
REgister here simple with fb or tw account and upload your videos.</p>
</div>
</div>
<!-- End Item -->
</div>
<!-- End Carousel Inner -->
<ul class="nav nav-pills nav-justified">
<li data-target="#myCarousel" data-slide-to="0" class="active"><a href="#">About<small>Lorem
ipsum </small></a></li>
<li data-target="#myCarousel" data-slide-to="1"><a href="#">Projects<small>some text </small></a></li>
<li data-target="#myCarousel" data-slide-to="2"><a href="#">Portfolio<small>Lorem ipsum
</small></a></li>
<li data-target="#myCarousel" data-slide-to="3"><a href="#">Services<small>Lorem ipsum
sit</small></a></li>
</ul>
</div>
<!-- End Carousel -->
</div>
<div class="container" id="tourpackages-carousel">
<div class="row">
<div class="col-xs-18 col-sm-6 col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/500x300" alt="">
<div class="caption">
<h4>Thumbnail label</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p>
<p><a href="#" class="btn btn-info btn-xs" role="button">Button</a> <a href="#" class="btn btn-default btn-xs" role="button">Button</a></p>
</div>
</div>
</div>
<div class="col-xs-18 col-sm-6 col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/500x300" alt="">
<div class="caption">
<h4>Thumbnail label</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p>
<p><a href="#" class="btn btn-info btn-xs" role="button">Button</a> <a href="#" class="btn btn-default btn-xs" role="button">Button</a></p>
</div>
</div>
</div>
<div class="col-xs-18 col-sm-6 col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/500x300" alt="">
<div class="caption">
<h4>Thumbnail label</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p>
<p><a href="#" class="btn btn-info btn-xs" role="button">Button</a> <a href="#" class="btn btn-default btn-xs" role="button">Button</a></p>
</div>
</div>
</div>
<div class="col-xs-18 col-sm-6 col-md-3">
<div class="thumbnail">
<img src="http://placehold.it/500x300" alt="">
<div class="caption">
<h4>Thumbnail label</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p>
<p><a href="#" class="btn btn-info btn-xs" role="button">Button</a> <a href="#" class="btn btn-default btn-xs" role="button">Button</a></p>
</div>
</div>
</div>
</div><!-- End row -->
</div><!-- End container -->
<ul class="list-unstyled video-list-thumbs row">
<li class="col-lg-3 col-sm-4 col-xs-6">
<a href="#" title="Claudio Bravo, antes su debut con el Barça en la Liga">
<img src="http://i.ytimg.com/vi/ZKOtE9DOwGE/mqdefault.jpg" alt="Barca" class="img-responsive" height="130px" />
<h2>Claudio Bravo, antes su debut con el Barça en la Liga</h2>
<span class="glyphicon glyphicon-play-circle"></span>
<span class="duration">03:15</span>
</a>
</li>
<li class="col-lg-3 col-sm-4 col-xs-6">
<a href="#" title="Claudio Bravo, antes su debut con el Barça en la Liga">
<img src="http://i.ytimg.com/vi/ZKOtE9DOwGE/mqdefault.jpg" alt="Barca" class="img-responsive" height="130px" />
<h2>Claudio Bravo, antes su debut con el Barça en la Liga</h2>
<span class="glyphicon glyphicon-play-circle"></span>
<span class="duration">03:15</span>
</a>
</li>
<li class="col-lg-3 col-sm-4 col-xs-6">
<a href="#" title="Claudio Bravo, antes su debut con el Barça en la Liga">
<img src="http://i.ytimg.com/vi/ZKOtE9DOwGE/mqdefault.jpg" alt="Barca" class="img-responsive" height="130px" />
<h2>Claudio Bravo, antes su debut con el Barça en la Liga</h2>
<span class="glyphicon glyphicon-play-circle"></span>
<span class="duration">03:15</span>
</a>
</li>
<li class="col-lg-3 col-md-4 col-sm-4 col-xs-6">
<a href="#" title="Claudio Bravo, antes su debut con el Barça en la Liga">
<img src="http://i.ytimg.com/vi/ZKOtE9DOwGE/mqdefault.jpg" alt="Barca" class="img-responsive" height="130px" />
<h2>Claudio Bravo, antes su debut con el Barça en la Liga</h2>
<span class="glyphicon glyphicon-play-circle"></span>
<span class="duration">03:15</span>
</a>
</li>
</ul>
<div id="footer">
<div class="container">
<div class="row">
<h3 class="footertext">About Us:</h3>
<br>
<div class="col-md-4">
<center>
<img src="http://oi60.tinypic.com/w8lycl.jpg" class="img-circle" alt="the-brains">
<br>
<h4 class="footertext">Programmer</h4>
<p class="footertext">You can thank all the crazy programming here to this guy.<br>
</center>
</div>
<div class="col-md-4">
<center>
<img src="http://oi60.tinypic.com/2z7enpc.jpg" class="img-circle" alt="...">
<br>
<h4 class="footertext">Artist</h4>
<p class="footertext">All the images here are hand drawn by this man.<br>
</center>
</div>
<div class="col-md-4">
<center>
<img src="http://oi61.tinypic.com/307n6ux.jpg" class="img-circle" alt="...">
<br>
<h4 class="footertext">Designer</h4>
<p class="footertext">This pretty site and the copy it holds are all thanks to this guy.<br>
</center>
</div>
</div>
<div class="row">
<p><center><a href="#">Contact Stuff Here</a> <p class="footertext">Copyright 2014</p></center></p>
</div>
</div>
</div>
body
{
padding-top: 20px;
}
#myCarousel .nav a bigg
{
display: block;
}
#myCarousel .nav
{
background: #eee;
}
.nav-justified > li > a
{
border-radius: 0px;
}
.nav-pills>li[data-slide-to="0"].active a { background-color: #16a085; }
.nav-pills>li[data-slide-to="1"].active a { background-color: #e67e22; }
.nav-pills>li[data-slide-to="2"].active a { background-color: #2980b9; }
.nav-pills>li[data-slide-to="3"].active a { background-color: #8e44ad; }
/*
Credits:
Code snippet by @maridlcrmn (Follow me on Twitter)
Images by Nike.com (http://www.nike.com/us/en_us/)
Logo by Sneaker-mission.com (http://www.sneaker-mission.com/)
*/
.navbar-brand {
width: 70px;
height: 50px;
background: url('http://www.sneaker-mission.com/uploads/3/1/2/7/31279819/5617441.png') no-repeat center center;
background-size: 50px;
}
.nav-tabs {
display: inline-block;
border-bottom: none;
padding-top: 15px;
font-weight: bold;
}
.nav-tabs > li > a,
.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus,
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
border: none;
border-radius: 0;
}
.nav-list { border-bottom: 1px solid #eee; }
.nav-list > li {
padding: 20px 15px 15px;
border-left: 1px solid #eee;
}
.nav-list > li:last-child { border-right: 1px solid #eee; }
.nav-list > li > a:hover { text-decoration: none; }
.nav-list > li > a > span {
display: block;
font-weight: bold;
text-transform: uppercase;
}
.mega-dropdown { position: static !important; }
.mega-dropdown-menu {
padding: 20px 15px 15px;
text-align: center;
width: 100%;
}
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,700,400italic);
font-family: 'Open Sans', sans-serif;
html {
font-family: 'Open Sans', sans-serif;
}
body {
min-height: 3000px;
padding-top: 70px;
font-family: 'Open Sans', sans-serif;
}
.thumbnail {
position: relative;
padding: 0px;
margin-bottom: 20px;
}
.thumbnail img {
width: 100%;
}
/* Footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 280px;
background:
/* color overlay */
linear-gradient(
rgba(240, 212, 0, 0.45),
rgba(0, 0, 0, 0.45)
),
/* image to overlay */
url(http://images.cdn.fotopedia.com/_avPIZmqM3w-7z161LH_268-hd.jpg);
}
.video-list-thumbs{}
.video-list-thumbs > li{
margin-bottom:12px
}
.video-list-thumbs > li:last-child{}
.video-list-thumbs > li > a{
display:block;
position:relative;
background-color: #212121;
color: #fff;
padding: 8px;
border-radius:3px
}
.video-list-thumbs > li > a:hover{
background-color:#000;
transition:all 500ms ease;
box-shadow:0 2px 4px rgba(0,0,0,.3);
text-decoration:none
}
.video-list-thumbs h2{
bottom: 0;
font-size: 14px;
height: 33px;
margin: 8px 0 0;
}
.video-list-thumbs .glyphicon-play-circle{
font-size: 60px;
opacity: 0.6;
position: absolute;
right: 39%;
top: 31%;
text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.video-list-thumbs > li > a:hover .glyphicon-play-circle{
color:#fff;
opacity:1;
text-shadow:0 1px 3px rgba(0,0,0,.8);
transition:all 500ms ease;
}
.video-list-thumbs .duration{
background-color: rgba(0, 0, 0, 0.4);
border-radius: 2px;
color: #fff;
font-size: 11px;
font-weight: bold;
left: 12px;
line-height: 13px;
padding: 2px 3px 1px;
position: absolute;
top: 12px;
}
.video-list-thumbs > li > a:hover .duration{
background-color:#000;
transition:all 500ms ease;
}
@media (min-width:320px) and (max-width: 480px) {
.video-list-thumbs .glyphicon-play-circle{
font-size: 35px;
right: 36%;
top: 27%;
}
.video-list-thumbs h2{
bottom: 0;
font-size: 12px;
height: 22px;
margin: 8px 0 0;
}
}
/* Custom footer CSS
-------------------------------------------------- */
.container {
width: auto;
max-width: 3000px;
padding: 0 15px;
}
.container .text-muted {
margin: 20px 0;
}
.footertext {
color: #ffffff;
}
$(document).ready(function(){
$(".dropdown").hover(
function() {
$('.dropdown-menu', this).stop( true, true ).slideDown("fast");
$(this).toggleClass('open');
},
function() {
$('.dropdown-menu', this).stop( true, true ).slideUp("fast");
$(this).toggleClass('open');
}
);
});
