body
div.col-xs-1.col-md-2
div.col-xs-10.col-md-8.base
	div.row
		div.col-xs-8.left
			div.row.info
				div.col-xs-1.pause
					i.glyphicon.glyphicon-pause
				div.col-xs-6.songname
					p City of Angels<br>
						span Thirty Seconds to Mars
				div.col-xs-1.comment
					i.glyphicon.glyphicon-comment
					span 9
				div.col-xs-1.favourite
					i.glyphicon.glyphicon-heart-empty
					span 8
				div.col-md-1.repeat
					i.glyphicon.glyphicon-repeat
				div.col-md-2.time
					p 3:56
			hr.one
			hr.two
			div.track
			div.row.info
				div.col-xs-1.pause
					i.glyphicon.glyphicon-play
				div.col-xs-9.songname
					p Up In The Air<br>
						span Thirty Seconds to Mars
				div.col-xs-2.time
					p 2:59
			hr.one
			div.row.info
				div.col-xs-1.pause
					i.glyphicon.glyphicon-play
				div.col-xs-9.songname
					p Night of the Hunter<br>
						span Thirty Seconds to Mars
				div.col-xs-2.time
					p 3:34
			hr.one
			div.row.info
				div.col-xs-1.pause
					a(href="https://youtu.be/GC63HGcsfEg" target="_blank")
						i.glyphicon.glyphicon-play
				div.col-xs-9.songname
					p Do or Die<br>
						span Thirty Seconds to Mars
				div.col-xs-2.time
					p 4:25
			hr.one
			div.row.controls.text-center
				div.col-xs-2.back
					i.glyphicon.glyphicon-step-backward
				div.col-xs-2.bigpause
					i.glyphicon.glyphicon-pause
				div.col-xs-5.forward
					i.glyphicon.glyphicon-step-forward
				div.col-xs-1.random
					i.glyphicon.glyphicon-random
				div.col-xs-1.volume
					i.glyphicon.glyphicon-volume-up
				div.col-xs-1.fullscreen
					i.glyphicon.glyphicon-fullscreen
		div.col-xs-4.right
View Compiled
@import 'https://fonts.googleapis.com/css?family=Mada'

body
	height: 100vh
	width: 100vw
	overflow-x: hidden
	background: linear-gradient( rgba(150,150,150, 0.5), rgba(150,150,150, 0.5)), url(https://goo.gl/vIdGAQ)
	background-size: 100% 100%
	font-family: 'Mada', sans-serif

.base
	height: 550px
	margin: 100px 0 100px 0
	background-color: rgba(0, 0, 0, 0.8)
	color: lighten(black, 65%)
	-webkit-box-shadow: 0px 0px 30px 6px rgba(0,0,0,0.8)
	-moz-box-shadow: 0px 0px 30px 6px rgba(0,0,0,0.8)
	box-shadow: 0px 0px 30px 6px rgba(0,0,0,0.8)
	
.info
	margin-top: 30px

.pause i
	border: 2px solid
	border-radius: 100%
	padding: 10px
	margin: 5px 5px 0 15px
	cursor: pointer
	transition: ease-in-out .2s
	&:hover
		color: #e0e0e0
		border: 2px solid #e0e0e0
		transition: ease-in-out .2s

.songname 
	p
		font-size: 18px
		margin-left: 20px
	span
		font-style: italic
		font-size: 14px

.comment i
	margin: 10px 8px 0 -8px
	color: #24CEDB

.favourite i
	margin: 10px 8px 0 -8px
	color: #24CEDB

.repeat i
	margin: 10px 8px 0 0

.time p
	margin-top: 10px 

.one
	border: 1px solid #a6a6a6
	width: 89%
	margin: 7px 0 0 15px

.two
	border: 1px solid #24CEDB
	width: 65%
	margin: -2px 0 0 15px

.track
	height: 10px
	width: 10px
	background-color: #24CEDB
	border-radius: 100%
	position: absolute
	cursor: pointer
	margin: -1% 0 0 64%
	-webkit-box-shadow: 0px 0px 10px 2px rgba(36,206,219,1)
	-moz-box-shadow: 0px 0px 10px 2px rgba(36,206,219,1)
	box-shadow: 0px 0px 10px 2px rgba(36,206,219,1)

.back
	i
		font-size: 25px
		padding: 10px
		border: 2px solid #6a6a6a
		border-radius: 100%
		margin: 60px 0 0 30px
		cursor: pointer
		transition: ease-in-out .2s
		&:hover
			color: #e0e0e0
			border: 2px solid #e0e0e0
			transition: ease-in-out .2s

.bigpause
	i
		font-size: 60px
		padding: 12px 10px 12px 14px
		border: 2px solid #e0e0e0
		border-radius: 100%
		margin: 40px 0 0 0
		color: #e0e0e0
		cursor: pointer
		transition: ease-in-out .2s
		&:hover
			color: #24CEDB
			border: 2px solid #24CEDB
			transition: ease-in-out .2s

.forward
	i
		font-size: 25px
		padding: 10px
		border: 2px solid #6a6a6a
		border-radius: 100%
		margin: 60px 0 0 -170px
		cursor: pointer
		transition: ease-in-out .2s
		&:hover
			color: #e0e0e0
			border: 2px solid #e0e0e0
			transition: ease-in-out .2s

.random
	i
		font-size: 18px
		color: #24CEDB
		margin: 75px 0 0 -90px
		cursor: pointer
.volume
	i
		font-size: 23px
		margin: 72px 0 0 -90px
		cursor: pointer
		transition: ease-in-out .2s
		&:hover
			color: #24CEDB
			transition: ease-in-out .2s

.fullscreen
	i
		font-size: 16px
		margin: 76px 0 0 -110px
		cursor: pointer
		transition: ease-in-out .2s
		&:hover
			color: #24CEDB
			transition: ease-in-out .2s

a
	color: #a6a6a6
	&:visited
		color: #a6a6a6

.right
	background-image: url("https://goo.gl/xuJecQ")
	background-size: contain
	background-color: white
	background-repeat: no-repeat
	height: 550px
View Compiled

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.