"bootstrap-youtube-template"
Bootstrap 3.3.0 Snippet by raywhitekyo

<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <!--[if IE 8]> <html lang="en" class="ie8"> <![endif]--> <!--[if !IE]><!--> <html lang="en"> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>YouTube</title> <!-- Main Styling --> <link href="css/main.css" rel="stylesheet"> <!-- Font Awesome Icons --> <link href="css/font-awesome.min.css" rel="stylesheet"> <!-- Open Sans Font --> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,500,600,700,900' rel='stylesheet' type='text/css'> <!-- HTML5 shim and Respond.js for 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="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <nav id="sidebar-wrapper"> <ul class="sidebar"> <a href="#" id="menu-close" class="pull-right toggle"><img src="https://raw.githubusercontent.com/xaganic/bootstrap-youtube-template/master/bootstrap-youtube-template/images/X.png"></a> <ul> <li class="title">Menu</li> <li><a href="#"><i class="fa fa-eye"></i> What to watch</a></li> <li><a href="#"><i class="fa fa-user"></i> My Channel</a></li> <li><a href="#"><i class="fa fa-clock-o"></i> History</a></li> <li><a href="#"><i class="fa fa-repeat"></i> Watch Later</a></li> </ul> <ul id="playlist"> <li class="title">Playlists</li> <li><a href="#"><i class="fa fa-headphones"></i> Best of David Guetta <p>David Guetta</p></a></li> <li><a href="#"><i class="fa fa-film"></i> Favourite Videos <p>Check your favourite videos</p></a></li> <li><a href="#"><i class="fa fa-thumbs-o-up"></i> Liked Videos <p>Reach all the videos you like</p></a></li> </ul> <ul id="subs"> <li class="title">Subscriptions</li> <li><a href="#"><img src="https://raw.githubusercontent.com/xaganic/bootstrap-youtube-template/master/bootstrap-youtube-template/images/shoes.png"> NikeShoes</a></li> <li><a href="#"><img src="https://raw.githubusercontent.com/xaganic/bootstrap-youtube-template/master/bootstrap-youtube-template/images/shakira.png"> ShakiraVEVO</a></li> <li><a href="#"><img src="https://raw.githubusercontent.com/xaganic/bootstrap-youtube-template/master/bootstrap-youtube-template/images/nike.png"> NikeFootball</a></li> </ul> </ul> <!-- End Sidebar --> </nav> <!-- End Sidebar-wrapper --> <header> <div class="container-fluid"> <div class="row"> <div class="col-md-2"> <a href="#"><img src="https://raw.githubusercontent.com/xaganic/bootstrap-youtube-template/master/bootstrap-youtube-template/images/logo.png" class="logo"></a> <a href="#" id="menu-toggle"> <img src="https://raw.githubusercontent.com/xaganic/bootstrap-youtube-template/master/bootstrap-youtube-template/images/menu.png"> </a> </div> <!-- End Logo & Menu-Toggle --> <div class="col-md-5"> <form><input placeholder="Type to search..." type="text"></form> </div><!-- End Search-Bar --> <div class="col-md-5"> <ul id="user-info"> <li><a href="#" class="button">Upload</a></li> <li> <ul class="notifications"> <li><i class="fa fa-envelope"></i><span>1</span></li> <li><i class="fa fa-bell"></i><span>3</span></li> </ul> </li> <li> <img src="https://raw.githubusercontent.com/xaganic/bootstrap-youtube-template/master/bootstrap-youtube-template/images/profile.png"> <div> <p class="username">John Doe</p> <p>9 Subscribers</p> <a href="#">Log out</a> </div> </li> </ul> <!-- End Ul --> </div> <!-- End User Information --> </div> <!-- End Row --> </div> <!-- End Container-Fluid --> </header> <!-- End Header --> <hr> <div class="container-fluid"> <div class="row"> <ul class="tab"> <li class="active">Home</li> <li>Trending</li> <li>Subscriptions</li> </ul> <!-- End Tabs --> <hr> <div class="main-videos"> <div class="col-md-4 video"> <div class="area"> <div class="mask"> <div class="vertical-align"> <i class="fa fa-play-circle"></i> <p>Play Now</p> </div> <!-- End Vertical Align --> </div> <!-- End Mask / Hover --> <img src="https://raw.githubusercontent.com/xaganic/bootstrap-youtube-template/master/bootstrap-youtube-template/images/video.png" alt="video" class="img-responsive"> <span class="duration">44:03</span> </div> <!-- End Area --> <h2>West Super Bowl 2015</h2> <p><span>9 Days Ago</span> By <a href="#">WestSuperBowl</a> - 10 123 123 Views</p> </div> <!-- End Col-md-4 --> <div class="col-md-4"> <div class="area"> <div class="mask"> <div class="vertical-align"> <i class="fa fa-play-circle"></i> <p>Play Now</p> </div> <!-- End Vertical Align --> </div> <!-- End Mask / Hover --> <img src="https://raw.githubusercontent.com/xaganic/bootstrap-youtube-template/master/bootstrap-youtube-template/images/video2.png" alt="video" class="img-responsive"> <span class="duration">44:03</span> </div> <!-- End Area --> <h2>Daft Punk - Get Lucky</h2> <p><span>6 Days Ago</span> By <a href="#">DaftPunkVEVO</a> - 83 238 234 Views</p> </div> <!-- End Col-md-4 --> <ul class="mini"> <li class="col-md-2 video mini"> <div class="area"> <div class="mask"> <div class="vertical-align"> <i class="fa fa-play-circle"></i> <p>Play Now</p> </div> <!-- End Vertical Align --> </div> <!-- End Mask / Hover --> <img src="https://raw.githubusercontent.com/xaganic/bootstrap-youtube-template/master/bootstrap-youtube-template/images/video3.png" alt="video" class="img-responsive"> <span class="duration">4:03</span> </div> <!-- End Area --> <h4>Shakira - Waka Waka</h4> <p><span>2 Weeks Ago</span> By <a href="#">ShakiraVEVO</a></p> <p class="views">21 938 743</p> </li> <li class="col-md-2 video mini"> <div class="area"> <div class="mask"> <div class="vertical-align"> <i class="fa fa-play-circle"></i> <p>Play Now</p> </div> <!-- End Vertical Align --> </div> <!-- End Mask / Hover --> <img src="https://raw.githubusercontent.com/xaganic/bootstrap-youtube-template/master/bootstrap-youtube-template/images/video4.png" alt="video" class="img-responsive"> <span class="duration">4:03</span> </div> <!-- End Area --> <h4>Nike Air Mag Replicas</h4> <p><span>2 Weeks Ago</span> By <a href="#">NikeShoes</a></p> <p class="views">21 938 743</p> </li> <li class="col-md-2 video mini"> <div class="area"> <div class="mask"> <div class="vertical-align"> <i class="fa fa-play-circle"></i> <p>Play Now</p> </div> <!-- End Vertical Align --> </div> <!-- End Mask / Hover --> <img src="https://raw.githubusercontent.com/xaganic/bootstrap-youtube-template/master/bootstrap-youtube-template/images/video5.png" alt="video" class="img-responsive"> <span class="duration">4:03</span> </div> <!-- End Area --> <h4>Ibrahimović Risks Every...</h4> <p><span>2 Weeks Ago</span> By <a href="#">NikeFootball</a></p> <p class="views">21 938 743</p> </li> <li class="col-md-2 video mini"> <div class="area"> <div class="mask"> <div class="vertical-align"> <i class="fa fa-play-circle"></i> <p>Play Now</p> </div> <!-- End Vertical Align --> </div> <!-- End Mask / Hover --> <img src="https://raw.githubusercontent.com/xaganic/bootstrap-youtube-template/master/bootstrap-youtube-template/images/video6.png" alt="video" class="img-responsive"> <span class="duration">4:03</span> </div> <!-- End Area --> <h4>Rihanna Interview</h4> <p><span>2 Weeks Ago</span> By <a href="#">RihannaVEVO</a></p> <p class="views">21 938 743</p> </li> </ul> </div> <!-- End Main Videos --> </div> <!-- End Row --> </div> <!-- End Container-Fluid --> <hr> <div class="container-fluid"> <div class="row"> <div class="single-channel"> <div class="col-md-3 channel-bio"> <div class="channel-name"><img src="https://raw.githubusercontent.com/xaganic/bootstrap-youtube-template/master/bootstrap-youtube-template/images/shoes.png"> NikeShoes</div> <hr> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at risus molestie, porttitor sapien sed, hendrerit mauris. Nam et turpis sed lectus venenatis tristique sed scelerisque nisl. </p> <a href="#" class="button">More Videos</a> </div><!-- End Channel-Bio --> <div class="col-md-3 video"> <div class="area"> <div class="mask"> <div class="vertical-align"> <i class="fa fa-play-circle"></i> <p>Play Now</p> </div> <!-- End Vertical Align --> </div> <!-- End Mask / Hover --> <img src="https://raw.githubusercontent.com/xaganic/bootstrap-youtube-template/master/bootstrap-youtube-template/images/channel1.png" alt="video" class="img-responsive"> <span class="duration">4:03</span> </div> <!-- End Area --> <h4>Nike Air Max Review</h4> <p><span>3 Days Ago</span> By <a href="#">NikeShoes</a></p> <p class="views">429 384 Views</p> </div> <!-- End Video --> <div class="col-md-3 video"> <div class="area"> <div class="mask"> <div class="vertical-align"> <i class="fa fa-play-circle"></i> <p>Play Now</p> </div> <!-- End Vertical Align --> </div> <!-- End Mask / Hover --> <img src="https://raw.githubusercontent.com/xaganic/bootstrap-youtube-template/master/bootstrap-youtube-template/images/channel2.png" alt="video" class="img-responsive"> <span class="duration">4:03</span> </div> <!-- End Area --> <h4>Nike Air Max Review</h4> <p><span>3 Days Ago</span> By <a href="#">NikeShoes</a></p> <p class="views">429 384 Views</p> </div> <!-- End Video --> <div class="col-md-3 video"> <div class="area"> <div class="mask"> <div class="vertical-align"> <i class="fa fa-play-circle"></i> <p>Play Now</p> </div> <!-- End Vertical Align --> </div> <!-- End Mask / Hover --> <img src="https://raw.githubusercontent.com/xaganic/bootstrap-youtube-template/master/bootstrap-youtube-template/images/channel3.png" alt="video" class="img-responsive"> <span class="duration">4:03</span> </div> <!-- End Area --> <h4>Nike Air Max Review</h4> <p><span>3 Days Ago</span> By <a href="#">NikeShoes</a></p> <p class="views">429 384 Views</p> </div> <!-- End Video --> </div> <!-- End Single Channel --> </div> <!-- End Row --> </div> <!-- End Container-Fluid --> <hr> <div class="container-fluid"> <div class="row"> <div class="single-channel"> <div class="col-md-3 channel-bio"> <div class="channel-name"><img src="https://raw.githubusercontent.com/xaganic/bootstrap-youtube-template/master/bootstrap-youtube-template/images/shakira.png"> ShakiraVEVO</div> <hr> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at risus molestie, porttitor sapien sed, hendrerit mauris. Nam et turpis sed lectus venenatis tristique sed scelerisque nisl. </p> <a href="#" class="button">More Videos</a> </div><!-- End Channel-Bio --> <div class="col-md-3 video"> <div class="area"> <div class="mask"> <div class="vertical-align"> <i class="fa fa-play-circle"></i> <p>Play Now</p> </div> <!-- End Vertical Align --> </div> <!-- End Mask / Hover --> <img src="https://raw.githubusercontent.com/xaganic/bootstrap-youtube-template/master/bootstrap-youtube-template/images/shakira1.png" alt="video" class="img-responsive"> <span class="duration">4:03</span> </div> <!-- End Area --> <h4>Nike Air Max Review</h4> <p><span>3 Days Ago</span> By <a href="#">NikeShoes</a></p> <p class="views">429 384 Views</p> </div> <!-- End Video --> <div class="col-md-3 video"> <div class="area"> <div class="mask"> <div class="vertical-align"> <i class="fa fa-play-circle"></i> <p>Play Now</p> </div> <!-- End Vertical Align --> </div> <!-- End Mask / Hover --> <img src="https://raw.githubusercontent.com/xaganic/bootstrap-youtube-template/master/bootstrap-youtube-template/images/shakira2.png" alt="video" class="img-responsive"> <span class="duration">4:03</span> </div> <!-- End Area --> <h4>Nike Air Max Review</h4> <p><span>3 Days Ago</span> By <a href="#">NikeShoes</a></p> <p class="views">429 384 Views</p> </div> <!-- End Video --> <div class="col-md-3 video"> <div class="area"> <div class="mask"> <div class="vertical-align"> <i class="fa fa-play-circle"></i> <p>Play Now</p> </div> <!-- End Vertical Align --> </div> <!-- End Mask / Hover --> <img src="https://raw.githubusercontent.com/xaganic/bootstrap-youtube-template/master/bootstrap-youtube-template/images/shakira3.png" alt="video" class="img-responsive"> <span class="duration">4:03</span> </div> <!-- End Area --> <h4>Nike Air Max Review</h4> <p><span>3 Days Ago</span> By <a href="#">NikeShoes</a></p> <p class="views">429 384 Views</p> </div> <!-- End Video --> </div> <!-- End Single Channel --> </div> <!-- End Row --> </div> <!-- End Container-Fluid --> <hr> <div class="container-fluid"> <div class="row"> <div class="single-channel"> <div class="col-md-3 channel-bio"> <div class="channel-name"><img src="https://raw.githubusercontent.com/xaganic/bootstrap-youtube-template/master/bootstrap-youtube-template/images/nike.png"> NikeFootball</div> <hr> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at risus molestie, porttitor sapien sed, hendrerit mauris. Nam et turpis sed lectus venenatis tristique sed scelerisque nisl. </p> <a href="#" class="button">More Videos</a> </div><!-- End Channel-Bio --> <div class="col-md-3 video"> <div class="area"> <div class="mask"> <div class="vertical-align"> <i class="fa fa-play-circle"></i> <p>Play Now</p> </div> <!-- End Vertical Align --> </div> <!-- End Mask / Hover --> <img src="https://raw.githubusercontent.com/xaganic/bootstrap-youtube-template/master/bootstrap-youtube-template/images/football1.png" alt="video" class="img-responsive"> <span class="duration">4:03</span> </div> <!-- End Area --> <h4>Nike Air Max Review</h4> <p><span>3 Days Ago</span> By <a href="#">NikeShoes</a></p> <p class="views">429 384 Views</p> </div> <!-- End Video --> <div class="col-md-3 video"> <div class="area"> <div class="mask"> <div class="vertical-align"> <i class="fa fa-play-circle"></i> <p>Play Now</p> </div> <!-- End Vertical Align --> </div> <!-- End Mask / Hover --> <img src="https://raw.githubusercontent.com/xaganic/bootstrap-youtube-template/master/bootstrap-youtube-template/images/football2.png" alt="video" class="img-responsive"> <span class="duration">4:03</span> </div> <!-- End Area --> <h4>Nike Air Max Review</h4> <p><span>3 Days Ago</span> By <a href="#">NikeShoes</a></p> <p class="views">429 384 Views</p> </div> <!-- End Video --> <div class="col-md-3 video"> <div class="area"> <div class="mask"> <div class="vertical-align"> <i class="fa fa-play-circle"></i> <p>Play Now</p> </div> <!-- End Vertical Align --> </div> <!-- End Mask / Hover --> <img src="https://github.com/xaganic/bootstrap-youtube-template/blob/master/bootstrap-youtube-template/images/football3.png?raw=true" alt="video" class="img-responsive"> <span class="duration">4:03</span> </div> <!-- End Area --> <h4>Nike Air Max Review</h4> <p><span>3 Days Ago</span> By <a href="#">NikeShoes</a></p> <p class="views">429 384 Views</p> </div> <!-- End Video --> </div> <!-- End Single Channel --> </div> <!-- End Row --> </div> <!-- End Container-Fluid --> <hr> <footer> <ul> <li><a href="#">About</a></li> <li><a href="#">Press & Blog</a></li> <li><a href="#">Copyrights</a></li> <li><a href="#">Creators & Partners</a></li> <li><a href="#">Advertising</a></li> <li><a href="#">Developers</a></li> </ul> <ul> <li><a href="#">Terms</a></li> <li><a href="#">Privacy</a></li> <li><a href="#">Policy & Safety</a></li> <li><a href="#">Send Feedback</a></li> <li><a href="#">Try Something New</a></li> </ul> <h4>Copyright © 2015 Youtube Inc.</h4> </footer> <!-- End Footer --> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="js/menu.js"></script> </body> </html>
/* General Styling */ body { font-family: 'Open Sans'; color: #000; overflow-x: hidden; } p { line-height: 24px; font-weight: 300; } a { text-decoration: none; color: #e00918; } a:hover { color: #e00918; text-decoration: none; transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } span { color: #e00918; } ul { padding: 0; } hr { width: 100%; height: 1px; background-color: #d9dcdf; border: none; margin: 30px 0; } h1,h2,h3,h4,h5,h6 { margin: 0; padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .button { background-color: #e21725; color: #fff; padding: 17px 25px; text-transform: uppercase; font-weight: 700; font-size: 12px; border: 2px solid #e21725; float: left; border-radius: 999px; } .button:hover { background-color: #fff; color: #e21725; border: 2px solid #e21725; text-decoration: none; transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } .clear{ clear:both; } /* Header */ header { padding: 30px 0 0 0; } .logo { max-width: 60%; } #menu-toggle { position: absolute; top: 30%; left: 78%; } #menu-toggle img { width: 20px; } input { border: 1px solid #d9dcdf; color: #66747f; font-size: 12px; padding: 17px 25px; width: 100%; background: url(../images/search.png) #f7f8fa no-repeat right 35px center; background-size: 3%; outline: none; } .notifications { position: absolute; right: 240px; top: 20px; } .notifications li:hover { cursor: pointer; } .notifications i { color: #bbc3ca; font-size: 20px; } .notifications span { border-radius: 50px; background-color: #e21725; color: #fff; font-weight: 700; padding: 4px 9px; font-size: 11px; position: relative; top: -12px; left: -12px; } #user-info li { display: inline-block; } #user-info li:nth-child(3) { float: right; } #user-info li:nth-child(3) img { float: left; margin-right: 20px; width: 60px; } #user-info li:nth-child(3) div { display: inline-block; } #user-info li:nth-child(3) p { margin: 0; } #user-info li:nth-child(3) a { font-weight: 700; color: #e21725; } #user-info li:nth-child(3) a:hover { text-decoration: none; } .username { color: #000; font-weight: 700; } /* Tabs */ .tab { text-align: center; margin: -10px 0; } .tab li { display: inline-block; text-transform: uppercase; color: #808791; font-weight: 700; font-size: 12px; margin: 0 20px; } .tab li:hover { color: #000; cursor: pointer; transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } .tab .active { border-bottom: 3px solid #e00918; padding-bottom: 20px; margin-bottom: -20px; color: #000; } /* Main Content */ .main-videos h2 { margin: 20px 0; font-weight: 900; } .area { position: relative; } .duration { background-color: #e00918; color: #fff; padding: 10px 30px; text-transform: uppercase; font-weight: 700; font-size: 12px; position: absolute; right: 0; bottom: 0; } p.views { color: #343434; } .video p { margin: 0; padding: 0; color: #757a80; line-height: inherit; } .area:hover .mask { display: block; cursor: pointer; opacity: 100; transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } .vertical-align { position: relative; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); } .mask { position: absolute; background-color: rgba(226, 23, 37,0.9); width: 100%; height: 100%; text-align: center; opacity: 0; } .mask p { color: #fff; font-weight: 700; } .mask i { font-size: 80px; color: #fff; } .mini { list-style: none; } .mini h4 { margin-top: 13px; font-weight: 700; } .mini p { font-size: 12px; margin-top: 6px; } .mini i { font-size: 50px; } .mini .duration { padding: 8px 20px; } .mini .mask p { display: none; } li.mini:nth-child(2) { margin-bottom: 30px; } .video h4 { margin-top: 15px; font-weight: 400; } .single-channel .video p { margin-top: 7px; } /* Channel Information Section */ .channel-bio hr { margin: 20px 0; } .channel-bio p { text-align: justify; } .channel-bio .button { margin-top: 10px; } .channel-name { font-weight: 500; font-size: 16px; } .channel-name img { margin-right: 10px; } /* Footer */ footer { text-align: center; padding: 0 0 30px; } footer li { display: inline; margin: 0 15px; } footer ul:nth-child(1) a { font-size: 16px; font-weight: 600; color: #000; } footer ul:nth-child(2) { margin: 20px 0; } footer ul:nth-child(2) a { color: #282626; } footer li a:hover { color: #e00918; text-decoration: none; transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } footer h4 { color: #aaa7a7; font-weight: 300; } /* Sidebar */ .title { color: #e21725; text-transform: uppercase; font-weight: 700; } .sidebar ul { margin-bottom: 5px; list-style: none; } .sidebar li { line-height: 40px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar a { color: #828c95; font-weight: 500; } .sidebar a:hover { color: #e00918; text-decoration: none; } .sidebar i { font-size: 20px; margin-right: 15px; } .sidebar #subs img { margin-right: 15px; width: 25px; } #playlist p { font-size: 12px; font-weight: 300; margin-left: 35px; margin-top: -15px; } #playlist i { float: left; margin-top: 15px; } #sidebar-wrapper { padding-top: 10px; padding-left: 30px; padding-right: 30px; margin-bottom: -10px; font-weight: 600; font-size: 14px; background-color: #f7f8fa; border-right: 1px solid #dbdee0; top: 0; bottom: 0; z-index: 1000; left: 0; position: fixed; width: 300px; margin-left: -300px; overflow-x: hidden; overflow-y: hidden; transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } #sidebar-wrapper.active { left: 300px; width: 300px; } #menu-close { padding: 7px 0; } #menu-close img { width: 10px }
// Closes the sidebar menu $("#menu-close").click(function(e) { e.preventDefault(); $("#sidebar-wrapper").toggleClass("active"); }); // Opens the sidebar menu $("#menu-toggle").click(function(e) { e.preventDefault(); $("#sidebar-wrapper").toggleClass("active"); });

Related: See More


Questions / Comments:

Can i use this theme in my web site??

whitout problem?

i just change the name of YOUTUBE

EduardoCardoza () - 6 years ago - Reply 0