cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              .container
	| Try the share button
	.player
		.player__cover
			.player__cover-bottom
				.player__info
					.song Gooey
					.artist ZABA | Glass Animals
				.share
					.share__services
						i.fa.fa-facebook.player__symbol.share__service-item
						i.fa.fa-twitter.player__symbol.share__service-item
						i.fa.fa-envelope.player__symbol.share__service-item
					i.fa.fa-share-alt.player__symbol
			.player__cover-shadow
			.player__cover-bg
		.player__timeline
			.line
				.line__progress
		.player__body
			.player__body-inner
				.player__time
					.player__time-item 3:21
					.player__time-item 4:49
				.player-nav
					img(height="40", src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAACyklEQVR4Xu2a/XEUMQzFpQpIB6EDdBWQDgIVcFRAOkg6SDpIOqAEoAOXQAeUYObd+DLOsudPWcPs2v9lcneSftZ70l7CtPPDO6+fJoDZATsnMCWw8waYJjglMCWwcwJTAjtvgDkFpgQsJSAiN0R0T0RCRJ+dcz8t4yOWiLxHDsx89N5/NekAEUHBj8wMAKfjvf/lnHv9eTQIEbkKORzjWEMBxLSXBVoBCIV/I6I7ZgaEN2cIgEu048gWAEQEclst/JyLKoAcbSsAIvKFiB6YGXpPHjUAIejTWputZTCiA4LJPpcUrtYBNbRHdcB5usQmm7v5bgA9QbWmQMpkhwEIQdFmXSOsRwLBazDL70oLvfS6Yg/QoN0rgRqTLQWTBTAiaIsEWr0mByIJoNbZc8FaOiB4DbZIbJPqZxVAyzipzSznAVpek8vrDQCroCkJaBpcrnj8/gTAOuglACKCnR0b3D87e0kxLa/h8KT2vWZ7agm0fE8sgXABP0bpPJUvAPyxJH5OZgHghZmxv5sfPhwOv4no2jryfwMAEmDmFyL6YAlhRQLoglvLHF5NMBjhkZkfrLphbQyG8QsT/GgFYjkG4b74AgE79ruRSaT2ABExu4xLixBA4Nl+mDHlFqHQleiGoZeRW4XxjQq0qd6SJQCiHQUgsCOon+zDUEgCj76q2iwFcK44bKnoSlWjLAIQJaGmzVoAUQ6ql1EFIEqiW5utALQvowmAhjZ7AUQgMLUwvpumVjOAXm1qAYguAyDwd4Cq0w2gVZuaABaXAXkWj281ALXaHAGg5TLUAZQa5UgAUQ6fmPkptd4PA5AzSgsAJUY5FEBKm5YAUkZpAmBFm+K9v3HOuSrLVnhx2ChPRmn2DxIKeQ/7CNMOGFZFxwdPAB3wNvHW2QGbuMaOImYHdMDbxFtnB2ziGjuKmB3QAW8Tb50dsIlr7Chi9x3wF1Y/SXA6gpLTAAAAAElFTkSuQmCC').player-nav__item
					img(height="90", src='data:image/png;base64,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').player-nav__item.player-nav__item--big
					img(height="40", src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAC7ElEQVR4Xu2a/XHbMAzFiQnSDZpsQE/QjpBskGzQTlBng3aDdoK0GzgTCJmgzQbJBOghJ+UQxbT4AZCnE/WPzz7r8Ph7jyIkEdzGD9j4+F0H0BOwcQJ9Cmw8AP0i2KdAnwIbJ/AyBbz3HgDOhmG4b8GjZX3w3u8B4BsPnIj+OeduEPFQC4T3/hIA7kT9r4j4u1Z9BvAXAM5lQSL67py7RcQnayHe+wMAfJrVZwBshHl92O12dGyQRISjCP40O07U58EzBNM0BAFMIyaiPSLeWhEIARD1TdOwCGCcm2ZpWAIw1jdLQxQAIYLT8EMzDTEALNMQDUCI4BWC5yavGMVHCgCLNCQD0E5DKgDtNGQB0BSRC0ArDUUANESUANAwohhAqQgNACVGqAEQrWxSK60FINcIVQBCRHQrrQ0gNQ0mAEQarhDxZCttAWCWBr65Ci7ZZgBiW2lLADFLtjmApVbaGsBSA1cFgBDxZd5K1wIQSkNVAKOIN610TQDH0lAdgHCCL5CHFgCkhiYAplUCES9aAZg0NAPgnHschuG8JQDW0ArAMxF95h6hIYAXDdUBEBE/er+empMWAKSGmgCYOD9R4jb59agM4J2GWgAeiIhdf9cW1wIwT97kgDkAIuL3C3vpeuUEsOsM/+jjdUsAQddrASCiP+P1JviCxQQAEfGTY57vi292jKbASdelAdoAHse4Rb9b1AYQ47oJACL65Zzjm51F142mQLTr2gCyCk8iNBKQ6roagJLCSgCK4LOG3GsAF+a4/wwtb7G/5yZAA34WgFBDETvg+f8yABS7njsFjrayuQPPmQJarucAiGpqcmBEJkDV9SQAS61szqBTlkEL12MBmLkeCcDM9TkAfmnwUf6Y0sqWJiCwSWqxhy+t+3o3KLfJ8SOi1Fa2VIjcJjfW5+XVdGPUmwTwF96o6Jz7UHN/oBTRsn7fLF0a4bWf3xOwdgdL9fcElBJc+/k9AWt3sFR/T0ApwbWfv/kE/AeYPsXRQhHl9QAAAABJRU5ErkJggg==').player-nav__item
			.player__footer
				i.fa.fa-random.player__symbol.player__symbol--active
				i.fa.fa-repeat.player__symbol
				i.fa.fa-heart.player__symbol.player__symbol--active
				i.fa.fa-list.player__symbol
            
          
!
            
              @import url(https://fonts.googleapis.com/css?family=Ubuntu:400,300,500);

// MASSE
$player-body-width: 375px;

// COLORS
$color-basic: #2dcd67;
$color-second-dark: #313131;
$color-second-light: #dadada;



*{
	box-sizing: border-box;
}

body{
	background: #2ab65e;
	padding-top: 60px;
	font-family: 'Ubuntu', sans-serif;
}
.container{
	width: 425px;
	margin: 0 auto;
}

.shadow{
	box-shadow: 0 0 60px rgba(0,0,0,0.2);
}

.song{
	font-size: 25px;
	font-weight: 500;
	color: white;
}
.artist{
	font-size: 15px;
	font-weight: 400;
	color: $color-second-light;
}

.share{
	color: white;
	display: flex;
	flex-direction: column;
	
	.fa-share-alt{
		align-self: flex-end;
	}
	&__service-item{
		margin-top: 30px;
		opacity: 0;
		pointer-events: none;
		
		&:hover{
			color: $color-second-light;
		}
	}
	&__services{
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 30px;
		
		&--open{
			.share__service-item{
				pointer-events: auto;
				opacity: 1;
				animation: share-item 0.2s ease-in-out;
			}
		}
		&--close{
			.share__service-item{
				opacity: 0;
				margin-top: 0px;
				animation: share-item-close 0.2s ease-in-out;
			}
		}
	}
	
}

@keyframes share-item{
	from {
		opacity: 0;
		margin-top: 0;
		margin-bottom: -20px;
	}
	to {
		opacity: 1;
		margin-top: 30px;
		margin-bottom: 0;
	}
}
@keyframes share-item-close{
	from {
		opacity: 1;
		margin-top: 30px;
		margin-bottom: 0;
	}
	to {
		opacity: 0;
		margin-top: 0;
		margin-bottom: -20px;
	}
	
}

.line{
	height: 5px;
	background: darkgrey;
	
	&__progress{
		background: $color-basic;
		width: 70%;
		height: 100%;
		float: left;
		
		&:after{
			content: "";
			display: inline-block;
			width: 15px;
			height: 15px;
			background: $color-basic;
			float: right;
			border-radius: 100%;
			position: relative;
			top: -5px;
			box-shadow: 0 0 0 8px rgba($color-basic, 0.4);
		}
	}
}

.player{
	width: 425px;
	
	&__cover{
		@extend .shadow;
		position: relative;
		overflow: hidden;
		background-color: grey;
		height: 425px;
		padding: 30px;
		display: flex;
		align-items: flex-end;
	}
	&__cover-bottom{
		height: 100%;
		width: 100%;
		z-index: 2;
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
	}
	&__cover-shadow{
		position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
		width: 100%;
		height: 200px;
		background: linear-gradient(to bottom, transparent 0%,rgba(0,0,0,0.7) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007db9e8', endColorstr='#000000',GradientType=0 );
	}
	&__cover-bg{
		position: absolute;
		z-index: 0;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-image: url('http://ecx.images-amazon.com/images/I/81v7i2aTxUL._SL1400_.jpg');
		background-size: cover;
		transition: filter 0.3s ease-in-out;
		
		&--blur{
			filter: blur(5px)/* brightness(1.2)*/ contrast(0.8);
		}
	}
	&__timeline{
		position: relative;
		z-index: 2;
	}
	&__body{
		@extend .shadow;
		position: relative;
		margin: 0 auto;
		min-height: 200px; // PLACEHOLDER
		width: $player-body-width;
		background: white;
	}
	&__body-inner{
		height: 100%;
		padding: 0 15px;
	}
	&__symbol{
		font-size: 25px;
		&:hover{
			cursor: pointer;
		}
		&--active{
			color: $color-basic;
		}
	}
	&__time{
		display: flex;
		justify-content: space-between;
		padding-top: 5px;
		margin-bottom: 30px;
	}
	&__time-item{
		font-size: 12px;
		font-weight: 300;
		color: #313131;
	}
	&__footer{
		position: relative;
		bottom: 0;
		margin: 0 auto;
		width: $player-body-width;
		background: $color-second-dark;
		padding: 15px;
		color: $color-second-light;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
}

.player-nav{
	width: 100%;
	margin-bottom: 50px;
	display: flex;
	align-items: center;
	justify-content: space-around;
	
	&__item{
		font-size: 30px;
		
		&--big{
			font-size: 120px;
		}
	}
}

            
          
!
            
              $(document).ready(function () {
	// normal buttons/icons
	$(".player__symbol").on('click', function() {
		$(this).toggleClass("player__symbol--active");
	});
	
	// share button functionality
	$(".fa-share-alt").on('click', function() {
		if($(".share__services").hasClass("share__services--open")){
			$(".player__cover-bg").toggleClass("player__cover-bg--blur");
			$(".share__services").toggleClass("share__services--open");
			$(".share__services").toggleClass("share__services--close");
			setTimeout(function() {
				$(".share__services").toggleClass("share__services--close");
			}, 200);
			
		}else {
			$(".share__services").removeClass("share__services--close");
			$(".player__cover-bg").toggleClass("player__cover-bg--blur");
			$(".share__services").toggleClass("share__services--open");
		}
	});
	
	
	
	
	
})
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console