<div class='player'>
	<div class='left'>
		<div class='closeLeft'>
			<i class="fa fa-times" aria-hidden="true"></i>
		</div>
		<ul>
			<li><a href="#">Link 1</a></li>
			<li><a href="#">Link 2</a></li>
			<li><a href="#">Link 3</a></li>
			<li><a href="#">Link 4</a></li>
			<li><a href="#">Link 5</a></li>
		</ul>
	</div>
	<div class='right'>
		<div class='nav'>
			<div class='hamburger'>
				<i class="fa fa-bars" aria-hidden="true"></i>
			</div>
			<p class='logo'>Music<span>Player</span></p>
		</div>
		<div class='album'>
			<img src="https://images-na.ssl-images-amazon.com/images/I/81ni71zIxIL._SL1406_.jpg" />
		</div>
		<div class='song-meta-data'>
			<h2 class='title'>Paranoid Android</h2>
			<p>OK Computer - Radiohead</p>
		</div>
		<div class='info'>
			<div class='heart'>
				<i class="fa fa-heart-o" aria-hidden="true"></i>
			</div>
			<div class='song-played'>
				<div class='bar'>
					<div class='inner-bar' data-width="34%">
						<div class='dot'></div>
					</div>
				</div>
				<p><span class='time-played'>4:25</span><span class='time-total'>6:27<span></p>
			</div>	
			<div class='more dropDownOpener' data-dropdown="#drop1">
				<span></span>
				<span></span>
				<span></span>
			</div>
			<div class='dropDown' id="drop1">
				<ul>
					<li class='song'>Paranoid Android</li>
					<li><a href="#">Save</a></li>
					<li><a href="#">Add To Playlist</a></li>
				</ul>	
			</div>	
		</div>	
		<div class='buttons'>
			<div class='back'>
				<i class="fa fa-backward" aria-hidden="true"></i>
			</div>
			<div class='play playBtn'>
				<i class="fa fa-play" aria-hidden="true"></i>	
			</div>
			<div class='next'>
				<i class="fa fa-forward" aria-hidden="true"></i>
			</div>
		</div>	
	</div>	
</div>	
$darkblue: #008c9e
$blue: #00dffc
$dark: #343838
$green: lighten(#8CD790, 12.5%)

*
	box-sizing: border-box

body
	font-family: 'Catamaran', sans-serif
	min-height: 100vh
	display: flex
	justify-content: center
	align-items: center
	background: linear-gradient(45deg, $blue, $green)

.player
	width: 360px
	height: 640px
	display: flex
	flex-direction: column
	align-items: center
	color: white
	overflow: hidden
	position: relative
	background: red
	margin: 10px
	box-shadow: 0px 1px 10px rgba(black, 0.35)
	.left
		background: $dark
		position: absolute
		widtH: 100%
		height: 100%
		top: 0
		left: 0
		transform: translate(-100%, 0)
		transition: 0.35s ease-in-out
		z-index: 100
		display: flex
		justify-content: center
		align-items: center
		ul
			list-style: none
			padding: 0
			height: 100%
			display: flex
			flex-direction: column
			width: 100%
			li
				dispaly: block
				height: 100%
				display: flex
				text-align: center
				justify-content: center
				align-items: center
				border-bottom: 2px solid white
				transition: 0.15s ease-in-out
				cursor: pointer
				&:last-child
					border-bottom: none
				&:hover
					background: $green
					a
						color: $dark
				a
					color: white
					text-decoration: none
					font-size: 25px
					transition: 0.15s ease-in-out
		&.open
			transform: translate(-0%, 0)
		.closeLeft
			font-size: 35px
			position: absolute
			right: 20px
			top: 9px
			cursor: pointer
	.right
		width: 100%
		height: 100%
		position: absolute
		padding: 20px
		top: 0
		left: 0
		background: linear-gradient(-45deg, $darkblue, darken($blue, 10%))
		transform: translate(0%, 0)
		transition: 0.35s ease-in-out
		display: flex
		flex-direction: column
		justify-content: flex-end
		align-items: center
		.nav
			position: absolute
			top: 0
			left: 0
			display: flex
			justify-content: space-between
			align-items: center
			dispaly: block
			height: 62px
			padding: 0 20px
			width: 100%
			.logo
				font-weight: bold
				span
					color: $green
			.hamburger
				font-size: 35px
				cursor: pointer
		&.closed
			transform: translate(100%, 0)
			transition: 0.75s ease-in-out
		img
			max-widtH: 100%
		.album
			width: 320px
		.song-meta-data
			text-align: center
			.title
				margin-bottom: 0
			p
				font-size: 12.5px
				margin: 0
		.buttons
			padding: 40px 0
			padding-bottom: 20px
			display: flex
			justify-content: space-between
			width: 100%
			align-items: center
			font-size: 25px
			.back, .play, .next
				cursor: pointer
				transition: 0.15s ease-in-out
				&:hover
					border-color: $green
					color: $green
			.play
				width: 50px
				heighT: 50px
				display: block
				border-radius: 50px
				border: 2px solid white
				text-align: center
				display: flex
				justify-content: center
				align-items: center
				.fa
					margin-right: -3px
					&.fa-pause
						margin-right: 0
		.info
			width: 100%
			display: flex
			align-items: center
			justify-content: space-between
			padding: 20px 0
			position: relative
			.dropDown
				position: absolute
				width: 100%
				background: $dark
				top: 0
				transform: translate(-0%, -100%)
				color: white
				padding: 20px
				transition: 0.15s ease-in-out
				opacity: 0
				pointer-events: none
				&.open
					opacity: 1
					pointer-events: inherit
				ul
					list-style: none
					padding: 0
					margin: 0
					li
						padding: 10px 0
						&.song
							color: $green
						a
							color: white
							text-decoration: none
							transition: 0.15s ease-in-out
							&:hover
								color: $green
			.song-played
				width: 100%
				padding: 0 10px
				position: relative
				.bar
					width: 100%
					height: 20px
					background: $dark
					border-radius: 10px
					.inner-bar
						height: 20px
						background: darken($green, 10%)
						position: relative
						border-radius: 10px
						width: 34%
						.dot
							position: absolute
							width: 20px
							height: 20px
							border-radius: 15px
							background: white
							right: 0
							&:before
								content: ''
								position: absolute
								left: 50%
								top: 50%
								transform: translate(-50%, -50%)
								width: 10px
								height: 10px
								border-radius: 10px
								border: 1px solid #999
				p
					position: absolute
					display: flex
					justify-content: space-between
					width: 235px
					font-size: 12.5px
					span
						display: block
			.more
				display: flex
				cursor: pointer
				&:hover, &.active
					span
						background: $green
						border: 2px solid $green
				span
					display: block
					width: 10px
					height: 10px
					border-radius: 5px
					border: 2px solid white
					margin: 2.5px
					transition: 0.15s
			.heart
				font-size: 20px
				cursor: pointer
				.fa-heart-o
					transition: .15s ease-in-out
				&.hearted
					color: $green
					.fa-heart-o
						&:before
							content: '\f004'
View Compiled
$(".playBtn").on('click', function(){
	var fa = $(this).find(".fa")
	
	if( $(fa).hasClass("fa-play")){
		$(fa).fadeOut(150, function(){
			$(this).removeClass("fa-play").addClass("fa-pause").fadeIn(150)
		});
	}else if($(fa).hasClass("fa-pause")){
		$(fa).fadeOut(150, function(){
			$(this).removeClass("fa-pause").addClass("fa-play").fadeIn(150)
		});
	}
	
});

$(".heart").on('click', function(){
	$(this).toggleClass("hearted")
});

$(".hamburger").on('click', function(){
	$(".right").removeClass("closed").addClass("closed")
	$(".left").removeClass("open").addClass("open")
});

$(".closeLeft").on('click', function(){
	$(".right").removeClass("closed")
	$(".left").removeClass("open")
});

$(".dropDownOpener").on('click', function(){
	var dropSelect = $(this).data("dropdown");
	
	$(this).toggleClass("active");
	$(dropSelect).toggleClass("open");
	
});

$("a").on('click', function(e){
	var href = $(this).attr("href");
	
	if (href = "#"){
		e.preventDefault();
	}
	
});


Rerun