<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");
});
