<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 ---------->
<div id="navbar-wrapper" class="container-fluid">
<div id="menu-wrapper" class="container-fluid">
<div class="row" id="menu-inner">
<div class="container">
<p class="pull-right">Investors | Mutual Non-Disclosure Agreement | Master Agreement | All Forms</p>
</div>
</div>
</div>
<!-- Second navbar for profile settings -->
<nav class="navbar navbar-inverse navbar-spclops">
<div class="container">
<!-- 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="#navbar-collapse-4">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a id="brand" class="navbar-brand" href="#">VMLaunch</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-4">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Home</a></li>
<li><a href="#">Leased Dedicated</a></li>
<li><a href="#">Leased Shared</a></li>
<li><a href="#">Co-Location</a></li>
<li><a href="#">Rack and Stack </a></li>
<li>
<a class="btn btn-default btn-outline btn-circle" data-toggle="collapse" href="#nav-collapse4" aria-expanded="false" aria-controls="nav-collapse4">Profile <i class="img-user"></i> </a>
</li>
</ul>
<ul class="collapse nav navbar-nav nav-collapse" role="search" id="nav-collapse4">
<li><a href="#">Matt Kaufman</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><img class="img-circle" src="https://pbs.twimg.com/profile_images/569263504935243776/gRWHjP_7.jpeg" alt="maridlcrmn" width="20" /> Maridlcrmn <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">My Profile</a></li>
<li><a href="#">Agreements</a></li>
<li><a href="#">Request for Quotes</a></li>
<li><a href="#">Purchase Orders</a></li>
<li class="divider"></li>
<li><a href="#">Logout</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav><!-- /.navbar -->
</div><!-- /.container-fluid -->
<div class="container-fluid">
<div class="page-header2">
<h2>Videos</h2>
</div>
<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>
<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>
<div class="container-fluid">
<div class="row carousel-row">
<div class="col-xs-8 col-xs-offset-2 slide-row">
<div id="carousel-1" class="carousel slide slide-carousel" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-1" data-slide-to="0" class="active"></li>
<li data-target="#carousel-1" data-slide-to="1"></li>
<li data-target="#carousel-1" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://i.ebayimg.com/00/s/NzQ2WDEwMDA=/z/syIAAOSwrklVHLDF/$_57.JPG?rt=nc" alt="Image">
</div>
<div class="item">
<img src="http://i.ebayimg.com/00/s/NzQ2WDEwMDA=/z/WJ8AAOSwBahVHLDQ/$_57.JPG?rt=nc" alt="Image">
</div>
<div class="item">
<img src="http://i.ebayimg.com/00/s/NzQ2WDEwMDA=/z/ptgAAOSw-7RVHLC1/$_57.JPG" alt="Image">
</div>
</div>
</div>
<div class="slide-content">
<h4>Example product</h4>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat
</p>
</div>
<div class="slide-footer">
<span class="pull-right buttons">
<button class="btn btn-sm btn-default"><i class="fa fa-fw fa-eye"></i> Show</button>
<button class="btn btn-sm btn-primary"><i class="fa fa-fw fa-shopping-cart"></i> Buy</button>
</span>
</div>
</div>
</div>
<div class="row carousel-row">
<div class="col-xs-8 col-xs-offset-2 slide-row">
<div id="carousel-2" class="carousel slide slide-carousel" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-2" data-slide-to="0" class="active"></li>
<li data-target="#carousel-2" data-slide-to="1"></li>
<li data-target="#carousel-2" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://i.ebayimg.com/00/s/OTE4WDE0Njg=/z/gDAAAOSwcwhVMZXF/$_57.JPG" alt="Image">
</div>
<div class="item">
<img src="http://i.ebayimg.com/00/s/OTE4WDE0Njg=/z/tXkAAOSwEeFVMZYS/$_57.JPG?rt=nc" alt="Image">
</div>
<div class="item">
<img src="http://i.ebayimg.com/00/s/MTA5NFg5MTg=/z/k4UAAOSwymxVMZXp/$_57.JPG?rt=nc" alt="Image">
</div>
</div>
</div>
<div class="slide-content">
<h4>Nike Air Max Tailwind III</h4>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</p>
</div>
<div class="slide-footer">
<span class="pull-right buttons">
<button class="btn btn-sm btn-default"><i class="fa fa-fw fa-eye"></i> Show</button>
<button class="btn btn-sm btn-primary"><i class="fa fa-fw fa-shopping-cart"></i> Buy</button>
</span>
</div>
</div>
</div>
<div class="row carousel-row">
<div class="col-xs-8 col-xs-offset-2 slide-row">
<div id="carousel-3" class="carousel slide slide-carousel" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-3" data-slide-to="0" class="active"></li>
<li data-target="#carousel-3" data-slide-to="1"></li>
<li data-target="#carousel-3" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://lorempixel.com/150/150?rand=7" alt="Image">
</div>
<div class="item">
<img src="http://lorempixel.com/150/150?rand=8" alt="Image">
</div>
<div class="item">
<img src="http://lorempixel.com/150/150?rand=9" alt="Image">
</div>
</div>
</div>
<div class="slide-content">
<h4>Example product</h4>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
</p>
</div>
<div class="slide-footer">
<span class="pull-right buttons">
<button class="btn btn-sm btn-default"><i class="fa fa-fw fa-eye"></i> Show</button>
<button class="btn btn-sm btn-primary"><i class="fa fa-fw fa-shopping-cart"></i> Buy</button>
</span>
</div>
</div>
</div>
</div>
<style>
/*REQUIRED*/
.carousel-row {
margin-bottom: 10px;
}
.slide-row {
padding: 0;
background-color: #ffffff;
min-height: 150px;
border: 1px solid #e7e7e7;
overflow: hidden;
height: auto;
position: relative;
}
.slide-carousel {
width: 20%;
float: left;
display: inline-block;
}
.slide-carousel .carousel-indicators {
margin-bottom: 0;
bottom: 0;
background: rgba(0, 0, 0, .5);
}
.slide-carousel .carousel-indicators li {
border-radius: 0;
width: 20px;
height: 6px;
}
.slide-carousel .carousel-indicators .active {
margin: 1px;
}
.slide-content {
position: absolute;
top: 0;
left: 20%;
display: block;
float: left;
width: 80%;
max-height: 76%;
padding: 1.5% 2% 2% 2%;
overflow-y: auto;
}
.slide-content h4 {
margin-bottom: 3px;
margin-top: 0;
}
.slide-footer {
position: absolute;
bottom: 0;
left: 20%;
width: 78%;
height: 20%;
margin: 1%;
}
/* Scrollbars */
.slide-content::-webkit-scrollbar {
width: 5px;
}
.slide-content::-webkit-scrollbar-thumb:vertical {
margin: 5px;
background-color: #999;
-webkit-border-radius: 5px;
}
.slide-content::-webkit-scrollbar-button:start:decrement,
.slide-content::-webkit-scrollbar-button:end:increment {
height: 5px;
display: block;
}
</style>
.navbar-brand { position: relative; z-index: 2; color: #fff; font-weight: bold; font-size: 30px; }
#brand { color: #fff; }
.navbar-nav.navbar-right .btn { position: relative; z-index: 2; padding: 4px 20px; margin: 10px auto; }
.navbar .navbar-collapse { position: relative; }
.navbar .navbar-collapse .navbar-right > li:last-child { padding-left: 22px; }
.navbar .nav-collapse { position: absolute; z-index: 1; top: 0; left: 0; right: 0; bottom: 0; margin: 0; padding-right: 120px; padding-left: 80px; width: 100%; }
.navbar.navbar-default .nav-collapse { background-color: #f8f8f8; }
.navbar.navbar-inverse .nav-collapse { background-color: red; }
.navbar .nav-collapse .navbar-form { border-width: 0; box-shadow: none; }
.nav-collapse>li { float: right; }
.btn.btn-circle { border-radius: 50px; }
.btn.btn-outline { background-color: transparent; }
.navbar-spclops {
background: red;
border: 0;
border-radius: 0;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
#menu-wrapper {
height:26px;
background: #333;
}
#menu-wrapper p {
font-size: 10px;
color: #999;
padding-top:6px;
@media screen and (max-width: 767px) {
.navbar .navbar-collapse .navbar-right > li:last-child { padding-left: 15px; padding-right: 15px; }
.navbar .nav-collapse { margin: 7.5px auto; padding: 0; }
.navbar .nav-collapse .navbar-form { margin: 0; }
.nav-collapse>li { float: none; }
}
