<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 class="container-fluid"> <nav class="navbar navbar-default form-inline " > <!-- 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-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!--</div>--> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse " id="navbar-collapse-1"> <ul class="nav navbar-nav list-group-horizontal navbar-right"> <li><a class="nav-item nav-link"href="#">Home</a></li> <li><a class="nav-item nav-link list-inline-item" href="#">About Us</a></li> <li><a class="nav-item nav-link list-inline-item" href="#">Features</a></li> <li><a class="nav-item nav-link list-inline-item" href="#">My Reflektion</a></li> <li><a class="nav-item nav-link list-inline-item" href="#">Contacts</a></li> <li><a class="nav-item nav-link list-inline-item" href="#">SignUp</a></li> <li><a class="nav-item nav-link list-inline-item" href="#">Login</a></li> </ul> <div> <form class="form-inline " style="margin-top:5px;"> <input class="form-control mr-sm-2" type="text" placeholder="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </div><!-- /.navbar-collapse --> </nav><!-- /.navbar --> </div><!-- /.container --> <div class="row topline text-center bg-faded"> <div class="col-md-12"> <ul class="list-inline subh"> <li class="list-inline-item subh-li"><a href="#">Home</a></li> <li class="list-inline-item subh-li"><a href="#">Trending</a></li> <li class="list-inline-item subh-li"><a href="#">Subscriptions</a></li> </ul> </div> </div> <div class="container-fluid"> <div class="row"> <div class="col-md-2 col-xs-3 collapse in bg-default" id="sidebar" > <ul class="list-unstyled"> <li> <a href="#"> <i class="fa fa-dashboard"></i> <span>My Videos</span> </a> </li> <li> <a href="#"> <i class="fa fa-list"></i> <span>My Playlist</span> </a> </li> <li> <a href="#"> <i class="fa fa-bar-chart"></i> <span>Trending</span> </a> </li> <li> <a href="#"> <i class="fa fa-list"></i> <span>Subscriptions</span> </a> </li> <li> <a href="#"> <i class="fa fa-history"></i> <span>History</span> </a> </li> <li> <a href="#"> <i class="fa fa-clock-o"></i> <span>Watch Later</span> </a> </li> <li> <a href="#"> <i class="fa fa-shopping-cart"></i> <span>Purchases</span> </a> </li> <li> <a href="#"> <i class="fa fa-line-chart"></i> <span>Earnings</span> </a> </li> <li> <a href="#"> <i class="fa fa-comments"></i> <span>Feedback</span> </a> </li> <!--<li class=""> <a href="#"> <i class="fa fa-file-text"></i> <span>Statement</span> </a> </li>--> <!--<li class=""> <a href="#"> <i class="fa fa-user"></i> <span>Buyer Activity</span> </a> </li>--> <li> <a href="#"> <i class="fa fa-user"></i> <span>Buyer Insights</span> </a> </li> <!--<li class=""> <a href="#"> <i class="fa fa-comment"></i> <span>Message</span> </a> </li>--> <!-- <li class=""> <a href="#"> <i class="fa fa-bell"></i> <span>Notification</span> </a> </li> --> <li> <a href="#"> <i class="fa fa-cogs"></i> <span>Settings</span> </a> </li> <li> <a href="#"> <i class="fa fa-list"></i> <span>Users</span> </a> </li> <li> <a href="#"> <i class="fa fa-list"></i> <span>Psyout List</span> </a> </li> <li> <a href="#"> <i class="fa fa-info-circle"></i> <span>Help</span> </a> </li> <li> <a href="#"> <i class="fa fa-sign-out"></i> <span>Logout</span> </a> </li> </ul> </div> <main class="col-md-10 col-xs-9 "> <div class="wrapper"> <div class=" content-wrapper" > <div class="content"> <section class="bg-info" > <!--watch now section start --> <div class="row" style="margin-bottom:5px;margin-left:1.7rem"> <h2 class="col-md-12" style="color:#ce964c;">Watch Now</h2><br> <div class="col-md-2 col-xs-6 vvv" > <img src="https://upload.wikimedia.org/wikipedia/en/2/27/The_Grey_Poster.jpg" height="100" width="180" style="margin-bottom:5px;" class="img-responsive "/> </div> <div class="col-md-2 col-xs-6 vvv"> <img src="https://upload.wikimedia.org/wikipedia/en/2/27/The_Grey_Poster.jpg" height="100" width="180" style="margin-bottom:5px;" class="img-responsive vvv"/> </div> <div class="col-md-2 col-xs-6 vvv"> <img src="https://upload.wikimedia.org/wikipedia/en/2/27/The_Grey_Poster.jpg" height="100" width="180" style="margin-bottom:5px;" class="img-responsive"/> </div> <div class="col-md-2 col-xs-6 vvv"> <img src="https://upload.wikimedia.org/wikipedia/en/3/37/Captain_America_The_First_Avenger_poster.jpg" height="100" width="180" style="margin-bottom:5px;" class="img-responsive"/> </div> <div class="col-md-2 col-xs-6 vvv"> <img src="https://upload.wikimedia.org/wikipedia/en/2/27/The_Grey_Poster.jpg" height="100" width="180" style="margin-bottom:5px;" class="img-responsive"/> </div> <div class="col-md-2 col-xs-6 video_left_hover"> <img src="https://upload.wikimedia.org/wikipedia/en/2/27/The_Grey_Poster.jpg" height="100" width="180" style="margin-bottom:5px;" class="img-responsive"/> </div> </div> <!--watch now section end --> <!--Recommended section start --> <div class="row " style="margin-bottom:5px;margin-left:1.7rem"> <h2 class="col-md-12" style="color:#ce964c;margin-left:1.7rem">Recommended</h2> <div class="col-md-2 col-xs-6" > <img src="https://upload.wikimedia.org/wikipedia/en/2/27/The_Grey_Poster.jpg" height="100" width="180" style="margin-bottom:5px;" class="img-responsive"/> </div> <div class="col-md-2 col-xs-6"> <img src="https://upload.wikimedia.org/wikipedia/en/2/27/The_Grey_Poster.jpg" height="100" width="180" style="margin-bottom:5px;" class="img-responsive"/> </div> <div class="col-md-2 col-xs-6"> <img src="https://upload.wikimedia.org/wikipedia/en/2/27/The_Grey_Poster.jpg" height="100" width="180" style="margin-bottom:5px;" class="img-responsive"/> </div> <div class="col-md-2 col-xs-6"> <img src="https://upload.wikimedia.org/wikipedia/en/2/27/The_Grey_Poster.jpg" height="100" width="180" style="margin-bottom:5px;" class="img-responsive"/> </div> <div class="col-md-2 col-xs-6"> <img src="https://upload.wikimedia.org/wikipedia/en/2/27/The_Grey_Poster.jpg" height="100" width="180" style="margin-bottom:5px;" class="img-responsive"/> </div> <div class="col-md-2 col-xs-6"> <img src="https://upload.wikimedia.org/wikipedia/en/2/27/The_Grey_Poster.jpg" height="100" width="180" style="margin-bottom:5px;" class="img-responsive"/> </div> </div> <!--Recommended section end --> <!--Watch it Again section start --> <div class="row" style="margin-bottom:0.5rem;margin-left:1.7rem"> <h2 class="col-md-12" style="color:#ce964c;margin-left:1.7rem">Watch it Again</h2> <div class="col-md-2 col-xs-6" > <img src="https://upload.wikimedia.org/wikipedia/en/2/27/The_Grey_Poster.jpg" height="100" width="180" style="margin-bottom:5px;" class="img-responsive"/> </div> <div class="col-md-2 col-xs-6"> <img src="https://upload.wikimedia.org/wikipedia/en/2/27/The_Grey_Poster.jpg" height="100" width="180" style="margin-bottom:5px;" class="img-responsive"/> </div> <div class="col-md-2 col-xs-6"> <img src="https://upload.wikimedia.org/wikipedia/en/2/27/The_Grey_Poster.jpg" height="100" width="180" style="margin-bottom:5px;" class="img-responsive"/> </div> <div class="col-md-2 col-xs-6"> <img src="https://upload.wikimedia.org/wikipedia/en/2/27/The_Grey_Poster.jpg" height="100" width="180" style="margin-bottom:5px;" class="img-responsive"/> </div> <div class="col-md-2 col-xs-6"> <img src="https://upload.wikimedia.org/wikipedia/en/2/27/The_Grey_Poster.jpg" height="100" width="180" style="margin-bottom:5px;" class="video_link img-responsive"/> </div> <div class="col-md-2 col-xs-6 video_link" style="cursor:pointer"> <img src="https://upload.wikimedia.org/wikipedia/en/2/27/The_Grey_Poster.jpg" height="100" width="180" style="margin-bottom:5px;" class="img-responsive"/> </div> <!--watch it Again section end --> </div> </div> </section> <!--hover finish--> </div> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#sidebar').niceScroll({ cursorcolor: '#53619d', // Changing the scrollbar color cursorwidth: 4, // Changing the scrollbar width cursorborder: 'none', // Rempving the scrollbar border }); // when opening the sidebar $('#sidebarCollapse').on('click', function () { // open sidebar $('#sidebar').addClass('active'); // fade in the overlay $('.overlay').fadeIn(); $('.collapse.in').toggleClass('in'); $('a[aria-expanded=true]').attr('aria-expanded', 'false'); }); // if dismiss or overlay was clicked $('#dismiss, .overlay').on('click', function () { // hide the sidebar $('#sidebar').removeClass('active'); // fade out the overlay $('.overlay').fadeOut(); }); }); </script> </main> </div> </div>

#sidebar { border-radius: 0; background-color: #FAFAFA; color: #ccc; border-left: 0; border-right: 0; border-color: #2c2c2c; white-space: nowrap; padding:5px 20px; } #sidebar li{ margin-bottom:15px; font-size:initial; }

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> <script type="text/javascript">