Bootstrap Snippet Home page Youtube using HTML CSS Bootstrap jQuery

"Home page Youtube"
Bootstrap 3.3.0 Snippet by ToutPax

3.3.0 jQuery

10.9K 14 Fav

Post to Facebook Tweet this

<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>  <!DOCTYPE html> <html lang="fr-FR"> <head> <meta http-equiv="Content-Type" content="text/html; 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="Youtube"> <meta name="author" content="Johan"> <link rel="icon" href="assets/images/favicon.ico" type="image/x-icon"> <title>Accueil - Youtube</title> <link rel="stylesheet" type="text/css" href="assets/css/app.css"> <link rel="stylesheet" type="text/css" href="https://bootswatch.com/3/flatly/bootstrap.css"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">  </head> <body> <nav class="navbar navbar-default navbar-fixed-top"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <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 point" id="menu-toggle"><i id="menu-toggle" class="fa fa-bars" aria-hidden="true"></i></a> <a class="navbar-brand" href="#"> Youtube </a> </div> <div class="container-fluid"> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Accueil</a></li> <li class=""><a href="#">Tendances</a></li> </ul> <div class="col-sm-3 col-md-3"> <form class="navbar-form" role="search"> <div class="input-group"> <input type="text" class="form-control" placeholder="Rechercher" name="q"> <div class="input-group-btn"> <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button> </div> </div> </form> </div> <ul class="navbar-form navbar-right"> <a href="#" class="btn btn-default">Mettre en ligne</a> <a href="#" class="btn btn-info">Connexion</a> </ul> </div> </div> <div id="wrapper"> <div id="sidebar-wrapper"> <ul class="sidebar-nav"> <li> <a class="activer" href="#"><i class="fa fa-home" aria-hidden="true"></i> Accueil</a> </li> <li> <a class="" href="#"><i class="fa fa-fire" aria-hidden="true"></i> Tendances</a> </li> <hr/> <h5 class="text-left text-danger"> LE MEILLEUR DE YOUTUBE </h5> <li> <a href="#"><img src="//i.ytimg.com/i/-9-kyTW8ZkZNDHQJ6FgpwQ/1.jpg" class="avatar-xs"> Musique</a> </li> <li> <a href="#"><img src="//i.ytimg.com/i/Egdi0XIXXZ-qJOFPf4JSKw/1.jpg" class="avatar-xs"> Sport</a> </li> <li> <a href="#"><img src="//i.ytimg.com/i/OpNcN46UbXVtpKMrmU4Abg/1.jpg" class="avatar-xs"> Jeux vidéo et autres</a> </li> <li> <a href="#"><img src="//i.ytimg.com/i/lgRkhTL3_hImCAmdLfDE4g/1.jpg" class="avatar-xs"> Films</a> </li> <li> <a href="#"><img src="https://yt3.ggpht.com/-qJOENyJEaMM/AAAAAAAAAAI/AAAAAAAAAAA/HSq_6hPBiVI/s88-c-k-no-mo-rj-c0xffffff/photo.jpg" class="avatar-xs"> Émissions télévisées</a> </li> <li> <a href="#"><img src="//i.ytimg.com/i/YfdidRxbB8Qhf0Nx7ioOYw/1.jpg" class="avatar-xs"> Actualités</a> </li> <li> <a href="#"><img src="//i.ytimg.com/i/4R8DWoMoI7CAwX8_LjQHig/1.jpg" class="avatar-xs"> En direct</a> </li> <li> <a href="#"><img src="//i.ytimg.com/i/zuqhhs6NWbgTzMuM09WKDQ/1.jpg" class="avatar-xs"> Vidéo à 360 degrés</a> </li> <hr/> <p class="container text-left"> Connectez-vous maintenant pour <br/> consulter vos chaînes et les <br/> recommandations. <br/> <br/> <a href="#" class="btn btn-info btn-xs">Connexion</a> </p> </ul> </div> </div> </nav> <div class="container"> <div class="row"> <div class="col-lg-12"> <h1 class="page-header"> <img src="//i.ytimg.com/i/-9-kyTW8ZkZNDHQJ6FgpwQ/1.jpg" class="avatar-xs"> Musique <small> <h5 class="pull-right"> Vous souhaitez avoir accès à toutes les mises à jour les plus récentes ? Abonnez-vous maintenant. <a href="#" class="btn btn-danger btn-xs"><i class="fa fa-youtube-play" aria-hidden="true"></i> S'abonner</a> </h5> </small> </h1> </div> </div>  <div class="row"> <div class="col-md-3 portfolio-item"> <a href="#"> <img class="img-responsive" src="http://placehold.it/750x450" alt=""> <h4>Vidéo de musique</h4> </a> <a href="#"><h6>Par musique de ouf</h6></a> <p> 61 286 vues il y a 1 heure </p> </div> <div class="col-md-3 portfolio-item"> <a href="#"> <img class="img-responsive" src="http://placehold.it/750x450" alt=""> <h4>Vidéo de musique</h4> </a> <a href="#"><h6>Par musique de ouf</h6></a> <p> 61 286 vues il y a 1 heure </p> </div> <div class="col-md-3 portfolio-item"> <a href="#"> <img class="img-responsive" src="http://placehold.it/750x450" alt=""> <h4>Vidéo de musique</h4> </a> <a href="#"><h6>Par musique de ouf</h6></a> <p> 61 286 vues il y a 1 heure </p> </div> <div class="col-md-3 portfolio-item"> <a href="#"> <img class="img-responsive" src="http://placehold.it/750x450" alt=""> <h4>Vidéo de musique</h4> </a> <a href="#"><h6>Par musique de ouf</h6></a> <p> 61 286 vues il y a 1 heure </p> </div> </div> <div class="row"> <div class="col-lg-12"> <h1 class="page-header"> <img src="//i.ytimg.com/i/-9-kyTW8ZkZNDHQJ6FgpwQ/1.jpg" class="avatar-xs"> Musique <small> <h5 class="pull-right"> Vous souhaitez avoir accès à toutes les mises à jour les plus récentes ? Abonnez-vous maintenant. <a href="#" class="btn btn-danger btn-xs"><i class="fa fa-youtube-play" aria-hidden="true"></i> S'abonner</a> </h5> </small> </h1> </div> </div>  <div class="row"> <div class="col-md-3 portfolio-item"> <a href="#"> <img class="img-responsive" src="http://placehold.it/750x450" alt=""> <h4>Vidéo de musique</h4> </a> <a href="#"><h6>Par musique de ouf</h6></a> <p> 61 286 vues il y a 1 heure </p> </div> <div class="col-md-3 portfolio-item"> <a href="#"> <img class="img-responsive" src="http://placehold.it/750x450" alt=""> <h4>Vidéo de musique</h4> </a> <a href="#"><h6>Par musique de ouf</h6></a> <p> 61 286 vues il y a 1 heure </p> </div> <div class="col-md-3 portfolio-item"> <a href="#"> <img class="img-responsive" src="http://placehold.it/750x450" alt=""> <h4>Vidéo de musique</h4> </a> <a href="#"><h6>Par musique de ouf</h6></a> <p> 61 286 vues il y a 1 heure </p> </div> <div class="col-md-3 portfolio-item"> <a href="#"> <img class="img-responsive" src="http://placehold.it/750x450" alt=""> <h4>Vidéo de musique</h4> </a> <a href="#"><h6>Par musique de ouf</h6></a> <p> 61 286 vues il y a 1 heure </p> </div> </div> <div class="row"> <div class="col-lg-12"> <h1 class="page-header"> <img src="//i.ytimg.com/i/-9-kyTW8ZkZNDHQJ6FgpwQ/1.jpg" class="avatar-xs"> Musique <small> <h5 class="pull-right"> Vous souhaitez avoir accès à toutes les mises à jour les plus récentes ? Abonnez-vous maintenant. <a href="#" class="btn btn-danger btn-xs"><i class="fa fa-youtube-play" aria-hidden="true"></i> S'abonner</a> </h5> </small> </h1> </div> </div>  <div class="row"> <div class="col-md-3 portfolio-item"> <a href="#"> <img class="img-responsive" src="http://placehold.it/750x450" alt=""> <h4>Vidéo de musique</h4> </a> <a href="#"><h6>Par musique de ouf</h6></a> <p> 61 286 vues il y a 1 heure </p> </div> <div class="col-md-3 portfolio-item"> <a href="#"> <img class="img-responsive" src="http://placehold.it/750x450" alt=""> <h4>Vidéo de musique</h4> </a> <a href="#"><h6>Par musique de ouf</h6></a> <p> 61 286 vues il y a 1 heure </p> </div> <div class="col-md-3 portfolio-item"> <a href="#"> <img class="img-responsive" src="http://placehold.it/750x450" alt=""> <h4>Vidéo de musique</h4> </a> <a href="#"><h6>Par musique de ouf</h6></a> <p> 61 286 vues il y a 1 heure </p> </div> <div class="col-md-3 portfolio-item"> <a href="#"> <img class="img-responsive" src="http://placehold.it/750x450" alt=""> <h4>Vidéo de musique</h4> </a> <a href="#"><h6>Par musique de ouf</h6></a> <p> 61 286 vues il y a 1 heure </p> </div> </div> </div> </body> </html>

/*! * Start Bootstrap - Simple Sidebar (http://startbootstrap.com/) * Copyright 2013-2016 Start Bootstrap * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE) */ body { overflow-x: hidden; padding-top: 70px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */ } /* Toggle Styles */ #wrapper { padding-left: 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #wrapper.toggled { padding-left: 250px; } #sidebar-wrapper { z-index: 1000; position: fixed; left: 250px; width: 0; height: 100%; margin-left: -250px; overflow-y: auto; background: #2c3e50; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #wrapper.toggled #sidebar-wrapper { width: 250px; } #page-content-wrapper { width: 100%; position: absolute; padding: 15px; } #wrapper.toggled #page-content-wrapper { position: absolute; margin-right: -250px; } /* Sidebar Styles */ .sidebar-nav { position: absolute; top: 0; width: 250px; margin: 0; padding: 0; list-style: none; } .sidebar-nav p, h1, h2, h3, h4, h5, h6 { color: #fff; } .sidebar-nav li { text-indent: 20px; line-height: 40px; } .sidebar-nav li a { display: block; text-decoration: none; color: #fff; } .sidebar-nav li a:hover { text-decoration: none; color: #18bc9c; } li a.activer { color: #18bc9c; } .sidebar-nav li a:active,.sidebar-nav li a:focus { text-decoration: none; } .sidebar-nav > .sidebar-brand { height: 65px; font-size: 18px; line-height: 60px; } .sidebar-nav > .sidebar-brand a { color: #fff; } .sidebar-nav > .sidebar-brand a:hover { color: #fff; background: none; } @media(min-width:768px) { #wrapper { padding-left: 250px; } #wrapper.toggled { padding-left: 0; } #sidebar-wrapper { width: 250px; } #wrapper.toggled #sidebar-wrapper { width: 0; } #page-content-wrapper { padding: 20px; position: relative; } #wrapper.toggled #page-content-wrapper { position: relative; margin-right: 0; } } .point { cursor: pointer; } .text-decoration { text-decoration: none; } .avatar-md { border-radius: 100%; height: 100px; width: 100px; } .avatar-xs { border-radius: 100%; height: 25px; width: 25px; } .slide-image { width: 100%; } .carousel-holder { margin-bottom: 30px; } .carousel-control,.item { border-radius: 4px; } .caption { height: 130px; overflow: hidden; } .caption h4 { white-space: nowrap; } .thumbnail img { width: 100%; } .ratings { padding-right: 10px; padding-left: 10px; color: #d17581; } .thumbnail { padding: 0; } .thumbnail .caption-full { padding: 9px; color: #333; } footer { margin: 50px 0; } .portfolio-item { margin-bottom: 25px; }

$(function() { $("#menu-toggle").click(function(e) { e.preventDefault(); $("#wrapper").toggleClass("toggled"); }); });

Related: See More

Navbar With Icons

Navbar With Icons

Elegant Login Page

Elegant Login Page

My Awesome Login Page

My Awesome Login Page

Simple & Clean 404 Error Page style

Simple & Clean 404 Error Page style

Questions / Comments:

Posting GuidelinesFormatting