LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

  • Listen Now
  • Top Charts
  • New Releases
  • Music Library
  • Podcasts
  • Browse Stations
  • Shop
  • Lorem Ipsum...
  • Lorem Ipsum...
  • Lorem Ipsum...
  • Lorem Ipsum...
  • Lorem Ipsum...
  • Lorem Ipsum...
  • Lorem Ipsum...
  • Lorem Ipsum...
  • Lorem Ipsum...
  • Lorem Ipsum...

Music library

  • Playlists
  • Stations
  • Artists
  • Albums
  • Songs
  • Genres
CSS
*,
:before,
:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

body {
  background: #F5F5F5;
  font-family: "Roboto", "Helvetica", "sans-serif";
}

header,
main {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  min-width: 300px;
  top: 0;
  right: 0;
  will-change: width;
  transform: translateZ(0);
  transition: .3s;
}

button,
input {
  background: transparent;
  border: none;
  outline: none;
  font-family: "Roboto", "Helvetica", "sans-serif";
  -webkit-appearance: none;
}

.menu {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: 12px;
  cursor: pointer;
  transition: background-color .2s;
}

.mobile-only {
  display: none;
}

.ripple {
  overflow: hidden;
  position: relative;
  -webkit-transform: translateZ(0);
}
.ripple .rippling {
  position: absolute;
  border-radius: 50%;
  background-color: #FFF;
  pointer-events: none;
  opacity: .4;
  transform: translate3d(-50%, -50%, 0);
}

header {
  align-items: center;
  background: #FF5722;
  color: #FFF;
  position: fixed;
  z-index: 5;
}
header.shadow {
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16);
}
header .menu {
  background: url(https://cbwconline.com/IMG/Codepen/Menu.svg) center no-repeat;
}
header .menu:hover {
  background-color: #f83c00;
}
header h1 {
  font-weight: 400;
  font-size: 20px;
}
header input {
  background: rgba(255, 255, 255, 0.3);
  width: 50vw;
  max-width: 800px;
  height: 48px;
  padding: 12px;
  border-radius: 3px;
  margin: 5px auto;
  color: #FFF;
  transition: .3s, width .01s;
}
header input:focus, header input:active {
  background: #FFF;
  color: #000;
  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.1);
}
header label {
  width: 36px;
  height: 36px;
  background: url(https://cbwconline.com/IMG/Codepen/Search-White.svg) center no-repeat;
  border-radius: 50%;
}
header label.close {
  background: url(https://cbwconline.com/IMG/Codepen/Close-White.svg) center no-repeat;
}
header label {
  margin-left: auto;
}
header .profile {
  width: 36px;
  height: 36px;
  background: url("https://lh3.googleusercontent.com/-UOuFk3MaIyE/AAAAAAAAAAI/AAAAAAAAAAA/AOtt-yEtASpZiUmh0TBq1JxqceBZswmVVg/s32-c-mo/photo.jpg") center/contain no-repeat;
  border-radius: 50%;
  margin: 0 15px;
}
header ul {
  display: flex;
  width: 100%;
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
header li {
  flex-shrink: 0;
  list-style: none;
  padding: 15px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  user-select: none;
  cursor: pointer;
}
header li.active {
  color: #FFF;
}
header .slider {
  height: 3px;
  background: #FFF;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: .3s;
}

main {
  justify-content: center;
  position: absolute;
}

.card {
  background-size: contain;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.35);
  flex: 1 1 180px;
  margin: 10px;
  position: relative;
  transition: box-shadow .2s;
  cursor: pointer;
}
.card:nth-child(1) {
  background-image: url(https://lh3.googleusercontent.com/f9fTwo3eV8nwjrjGtp52cOdjtfImjnSG-AmaLqmhx74G1hRD-40HtLZJ7Zt-Ig6ZZX4QYcr8hQ);
}
.card:nth-child(2) {
  background-image: url(https://lh3.googleusercontent.com/X9_1hqQ64YB2nUj8DaQ8Cq0gfTxV-8M5olNz4KZeBRyuP_xARFGq_txPoZ036JHb3zmtBNjYyw);
}
.card:nth-child(3) {
  background-image: url(https://lh3.googleusercontent.com/EReUo1F8zEmcs-zBgFVq1HqGdND8eLEMXbyFSDKTS5GD3T9pprprFbXsOJSaUXFo_L8b8w6xmKE);
}
.card:nth-child(4) {
  background-image: url(https://lh3.googleusercontent.com/ngZFFNzbUYWxfBBieWVbe1s2zqLbppu-cUA8tjWCztqlWtfFm3sHXymOchrJi2rfGVORBfSBlVs);
}
.card:nth-child(5) {
  background-image: url(https://lh3.googleusercontent.com/fUgD06Kz-yTZl-9UnTxBks6dOLwdp3tTEEhvYrT9WtN9Jaf25TklMTfNXFUSWXiz04PBdiKHoA);
}
.card:nth-child(6) {
  background-image: url(https://lh3.googleusercontent.com/ImqVw-h_GF1R26AjTr8kPwXH5cK8gYk5fFZJ6p7hFD17Cpd-BsiZudWWS-aVU2ws3wU5DiQZxg);
}
.card:nth-child(7) {
  background-image: url(https://lh3.googleusercontent.com/Vdf53IqQIkNUvq4I7B1FamSywJSjckktikYlCf1YgZb2sy9cMc8sZeBV6pbYIiyJj3iqcg5EWw);
}
.card:nth-child(8) {
  background-image: url(https://lh3.googleusercontent.com/PONxOYTAVFLbcjN41cNGN_BI6bCFFHNjOSzmCcOMrEsvqjfqR8akF4J0riKQIl89BqBWkHJThg);
}
.card:nth-child(9) {
  background-image: url(https://lh3.googleusercontent.com/3chpS1Utl_rH49pwob25TQiiafz8yFg8NMb2KWTU4PFhT7ip0wzq-YM4EuNRgClMXGdno-jAj18);
}
.card:nth-child(10) {
  background-image: url(https://lh3.googleusercontent.com/NuxebnbEsrFnHzihs_7_BPkzu-cGy1KBUqew51Srj0hqHkbuQVfB95o21kg5y2ZRD1AYF_nD);
}
.card:nth-child(11) {
  background-image: url(https://lh3.googleusercontent.com/oOBpMMGjy6DvWCs7ouK8e3gY8-UhHqvEZy5k6o49uTgjn2Xdxf_y8sBj-ey1WxNorA5yqvYFhw);
}
.card:nth-child(12) {
  background-image: url(https://lh3.googleusercontent.com/YIrKm7ypJgjquG9bPCpEUcYpGScuoIZ5J5fiqlU5VK5Ko6NamWCnyaH0ydo21Wx63q0L-6C0);
}
.card:nth-child(13) {
  background-image: url(https://lh3.googleusercontent.com/egm4NgIK-Cmh84GjVgHoATP6DYyCS0_zMvJ8DStQ_io6TPb75NKWtbIBaWPkOJ570-7ra7UKwPw);
}
.card:nth-child(14) {
  background-image: url(https://lh3.googleusercontent.com/kLRVb3qkSFvnd29cYLZWX47kXTVqVrv2rEO7j9Ogl27vwZwZKGsTnPVN-sit46tWq6i19Ri_PEc);
}
.card:nth-child(15) {
  background-image: url(https://lh3.googleusercontent.com/CZRaaeCItNnBbKLcos4zEO4EpTpxDRtPldLJ3waQB6wkz36eaIRBJh58VHeOXIj1wx--RMT5);
}
.card:nth-child(16) {
  background-image: url(https://lh3.googleusercontent.com/DGW6KDjPbsjfOmc2r-9oNfwPwvP3NB-AUv19UPzu5zGs27XEeK-q50lh0i0C1YllpAERaQNF);
}
.card:nth-child(17) {
  background-image: url(https://lh3.googleusercontent.com/YNyTvjNR26p_tgfkTEHnxj-z1SsdeP44vNzAkJ3eGgSKlQJjCs-lIEmYMv7_B1sxhp2HtpCuwog);
}
.card:nth-child(18) {
  background-image: url(https://lh3.googleusercontent.com/XKAtazwLKNM6u0--WGkZNBV6uOKZTLaZp0TV8XkIBTz0jNccHl8xOYkftW4s8PrtDlxqDmlrZmI);
}
.card:nth-child(19) {
  background-image: url(https://lh3.googleusercontent.com/LMKahLP_T6kr88DtYnpFK7IkJArbsuZNAZo6xd4WvVDBMhwXxATBUYfX6wWUYvzYwHWwxFU9Sw);
}
.card:nth-child(20) {
  background-image: url(https://lh3.googleusercontent.com/DbxZFMU64VjJdHPXFIN-ESMOUl4nmJr488scL6MftIAw2__MCPT_6R_xQnwlVNl0R2eL1__q2_Q);
}
.card:nth-child(21) {
  background-image: url(https://lh3.googleusercontent.com/uASJMQyWGjpbZ8yb6Is-8odp5oOGlfsrlB1hL5IhIfZTpz7g3yrz56X_NEmuKRKsAkXkTixMdw);
}
.card:nth-child(22) {
  background-image: url(https://lh3.googleusercontent.com/Cd8WRMaG_pDwjTC_dSPIIuf5EJEHUwPOLDreeXPx8wEZgZIZ7yhKBUBeTKsDCMcmJHgW0w7a5Q);
}
.card:nth-child(23) {
  background-image: url(https://lh3.googleusercontent.com/TFsXkyvcwPtlcBYmyl7Mae8C7DjKbsbSmr4rgIotGPyY-m56SLwC-3qZGPZGpNzETZHhxVqJ);
}
.card:nth-child(24) {
  background-image: url(https://lh3.googleusercontent.com/3MgcwzgSJ32oIbxgquneCvu3oJKVC6Pae-Saho7jfbCcRoA6KlU7qn8EUsqaTT6dsy5jbNuJ);
}
.card:nth-child(25) {
  background-image: url(https://lh3.googleusercontent.com/BbYJotljs9GKwGiepqF8nmYDQXPCr2hE0c3RmEN7SDJdtEnXVYLJb6XX0wjC9n1Plq-0VChaWWA);
}
.card:nth-child(26) {
  background-image: url(https://lh3.googleusercontent.com/JP1KT3xUA-MFA8tLRHC3CvX6nphBYLpCzxB6eIthMYXvF0dXX7I7NITpBT0E3B07CiqRzCqkPQ);
}
.card:nth-child(27) {
  background-image: url(https://lh3.googleusercontent.com/IreFr66xedOo8t8IPGfAoo2BsTZl3ZslJKQFVIePoVitbFOZgIZhvFKMrCuWoWXi2n2zjTxp);
}
.card:nth-child(28) {
  background-image: url(https://lh3.googleusercontent.com/1LASHQy0shPSJDGINtkZU6Tb6N1IJOL-GzaUEvOEM0zncK_0JvqZrC-YFvGmPBQEpLanHrft8g);
}
.card:nth-child(29) {
  background-image: url(https://lh3.googleusercontent.com/FGek_ecdpTCLFbprT7rpADyclgFOgytCXz8z29qT1NpndYfHGfBbJAtwu5TpHtD3u6tB7tHCXA);
}
.card:nth-child(30) {
  background-image: url(https://lh3.googleusercontent.com/iZ4R5KkC2FSarH6J5nr6FvjmEphjckn0jV1fYLCi3L0Mmr2cUHpDHd5m7gokYKCISxOXDXPLvA);
}
.card:nth-child(31) {
  background-image: url(https://lh3.googleusercontent.com/s0o3GbvRKoEA3hBKTooThA45XtL7WpcuZ6SOYHB54vhu-Nj6TYDgiakW20O4VPwRcsjzOVsI2g);
}
.card:nth-child(32) {
  background-image: url(https://lh3.googleusercontent.com/daoWdc25TW5w3DR-GaFuU7KKnQxXgYuP9BIShuOExSfs0Hj_83ahdOq2o3S09TVMq9uHKtZ-tsU);
}
.card:nth-child(33) {
  background-image: url(https://lh3.googleusercontent.com/E4yy2RMMtXGxVCOW7mhRpyNW3FLnSuMQziDXNgsBfDSQMxRUY8rKr4phBL29Sbx1lBKzTwLbHQ);
}
.card:nth-child(34) {
  background-image: url(https://lh3.googleusercontent.com/Usv4XpVgsaxemkOG-Na0ba8b2Mqd7houicvj1jY7l6HMOb8uuE_EPLPpzjIDUvNbAa1xD7F9GQ);
}
.card:hover {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.3);
}
.card:after {
  content: 'Lorem Ipsum...';
  background: #FFF;
  height: 56px;
  width: 100%;
  padding: 10px;
  position: absolute;
  bottom: 0;
  left: 0;
}
.card.ghost {
  height: 0 !important;
  margin: 0 10px;
}
.card.ghost:after {
  display: none;
}

.side-menu {
  justify-content: center;
  flex-wrap: wrap;
  background: #FFF;
  height: 100%;
  width: 225px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  transform: translateX(-100%) translateZ(0);
  transition: .3s;
  overflow-y: auto;
  will-change: transform;
  -webkit-overflow-scrolling: touch;
}
.side-menu.active {
  transform: translateX(0) translateZ(0);
}
.side-menu.active ~ header .menu {
  width: 0px;
  margin: 12px 8px;
}
.side-menu .menu-holder {
  display: flex;
  align-items: center;
}
.side-menu .menu-holder span {
  color: #FF5722;
}
.side-menu .menu {
  background: url(https://cbwconline.com/IMG/Codepen/Menu-Black.svg) center no-repeat;
}
.side-menu .menu:hover {
  background-color: #EEE;
}
.side-menu li {
  list-style: none;
  color: #212121;
  font-size: 13px;
  font-weight: 500;
  padding: 10px 0 10px 18px;
  cursor: pointer;
  white-space: nowrap;
  line-height: 24px;
  transition: .2s;
}
.side-menu li:hover {
  background: #EEE;
}
.side-menu li.active {
  color: #FF5722;
  background: #F5F5F5;
}
.side-menu .cta {
  display: block;
  background: #536DFE;
  color: #FFF;
  font-size: 16px;
  text-transform: uppercase;
  padding: 5px 8px;
  border-radius: 3px;
  cursor: pointer;
  margin: 20px auto;
}

.side-menu-overlay {
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
  visibility: hidden;
  opacity: 0;
  transition: .3s;
}

.account {
  background: #EEE;
  position: fixed;
  top: 62px;
  right: 15px;
  z-index: 6;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.5);
  transform-origin: top right;
  transition: .15s;
  box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
}
.account:after {
  content: '';
  width: 15px;
  height: 15px;
  background: inherit;
  position: absolute;
  top: -6px;
  right: 8px;
  opacity: 0;
  visibility: hidden;
  transform: rotate(45deg) scale(0.5);
  transition: .15s;
}
.account.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.account.active:after {
  opacity: 1;
  visibility: visible;
  transform: rotate(45deg) scale(1);
}
.account li {
  padding: 12px 16px;
  list-style: none;
  font: 300 16px Roboto;
  cursor: pointer;
  transition: .3s;
}
.account li:hover {
  background: #e1e1e1;
}

::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
}

::-moz-placeholder {
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
}

:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
}

@media (max-width: 1000px) {
  .side-menu.active ~ header input {
    width: calc(50vw - 100px);
  }
}
@media (max-width: 767px) {
  .side-menu.active ~ header .menu {
    margin: 12px;
    width: 40px;
  }
  .side-menu.active ~ header,
  .side-menu.active ~ main {
    width: 100% !important;
  }
  .side-menu.active ~ header input {
    width: 50vw;
  }
  .side-menu.active ~ .side-menu-overlay {
    visibility: visible;
    opacity: 1;
  }

  .card {
    flex-basis: 165px;
  }
}
@media (max-width: 599px) {
  .desktop-only {
    display: none;
  }

  .mobile-only {
    display: inherit;
  }

  .profile {
    margin: 16px !important;
  }

  header input {
    display: none;
    padding: 0px 12px;
    font: 400 16px/18px Roboto !important;
    width: calc(100vw - 130px);
  }

  .mobile-input header h1,
  .mobile-input header .menu {
    display: none;
  }
  .mobile-input input {
    display: initial;
  }
}
@media (max-width: 480px) {
  .card {
    flex-basis: 140px;
  }
}
.ios * {
  cursor: pointer;
}
JS
function tabSlider() {
	var $li1 = $('header li:nth-child(1)').outerWidth(),
		$li2 = $('header li:nth-child(2)').outerWidth(),
		$li3 = $('header li:nth-child(3)').outerWidth(),
		$li4 = $('header li:nth-child(4)').outerWidth(),
		$li5 = $('header li:nth-child(5)').outerWidth(),
		$li6 = $('header li:nth-child(6)').outerWidth();

	if ($('header li:nth-child(1)').hasClass('active')) {
		$('.slider').css({
			'transform': 'translate(0, 0)',
			'width': $li1
		});
	} else if ($('header li:nth-child(2)').hasClass('active')) {
		$('.slider').css({
			'transform': 'translate(' + $li1 + 'px, 0)',
			'width': $li2
		});
	} else if ($('header li:nth-child(3)').hasClass('active')) {
		$('.slider').css({
			'transform': 'translate(' + ($li1 + $li2) + 'px, 0)',
			'width': $li3
		});
	} else if ($('header li:nth-child(4)').hasClass('active')) {
		$('.slider').css({
			'transform': 'translate(' + ($li1 + $li2 + $li3) + 'px, 0)',
			'width': $li4
		});
	} else if ($('header li:nth-child(5)').hasClass('active')) {
		$('.slider').css({
			'transform': 'translate(' + ($li1 + $li2 + $li3 + $li4) + 'px, 0)',
			'width': $li5
		});
	} else if ($('header li:nth-child(6)').hasClass('active')) {
		$('.slider').css({
			'transform': 'translate(' + ($li1 + $li2 + $li3 + $li4 + $li5) + 'px, 0)',
			'width': $li6
		});
	}
};

function cardHeight() {
	$('.card').each(function() {
		$(this).height($(this).width() + 56);
	});
};

function headerPadding() {
	var $headerHeight = $('header').outerHeight();
	$('main').css('padding-top', $headerHeight);
};

$(function() {
	"use strict";

	tabSlider();
	cardHeight();

	// TABS

	$('header li').on('click', function() {
		$('header li').removeClass('active');
		$(this).addClass('active');
		tabSlider();
	});

	// CARD HEIGHT & 'MAIN' PADDING

	$(window, 'main').resize(function() {
		cardHeight();
		headerPadding();
	}).resize();

	// HEADER SHADOW

	$(window).scroll(function() {
		if ($(this).scrollTop() >= 10) {
			$("header").addClass("shadow");
		} else {
			$("header").removeClass("shadow");
		}
	});

	// MENU

	$('.menu, .side-menu-overlay').on('click', function() {
		var $sidebarWidth = $('.side-menu').width();
		$('.side-menu').toggleClass('active');
		if ($('.side-menu').hasClass('active')) {
			$('header, main').css('width', 'calc(100% - ' + $sidebarWidth + 'px)');
		} else {
			$('header, main').css('width', '100%');
		}
	});

	// PROFILE MENU

	$('.profile').on('click', function() {
		$('.account').toggleClass('active');
	});

	$(document).on("click", function(e) {
		if (($(".account").hasClass("active")) && (!$(".account, .account *, .profile").is(e.target))) {
			$(".account").toggleClass("active");
		}
	});

	$(window).scroll(function() {
		$('.account').removeClass('active');
	});
	
	// MOBILE SEARCH BUTTON

	$('label.mobile-only').on('click', function() {
		$(this).toggleClass('close');
		$('body').toggleClass('mobile-input');
	})
	
	// RIPPLE
  // CODE FROM HENDRY SADRAK'S PEN - https://codepen.io/hendrysadrak/pen/yNKZWO

	$(document).on('click', '.ripple', function(e) {

		var $ripple = $(''),
			$button = $(this),
			btnOffset = $button.offset(),
			xPos = e.pageX - btnOffset.left,
			yPos = e.pageY - btnOffset.top,
			size = 0,
			animateSize = parseInt(Math.max($button.width(), $button.height()) * Math.PI);

		$ripple.css({
				top: yPos,
				left: xPos,
				width: size,
				height: size,
				backgroundColor: $button.attr("ripple-color"),
				opacity: $button.attr("ripple-opacity")
			})
			.appendTo($button)
			.animate({
				width: animateSize,
				height: animateSize,
				opacity: 0
			}, 500, function() {
				$(this).remove();
			});
	});

	// IOS STUFF

	if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
		$('body').addClass('ios');
	}
	
});
Host Instantly Drag and Drop Website Builder

 

Description

I needed to brush up on my flexbox skills, so I created this little pen. The tabs aren't functional (yet), but the menu, input, and profile have some cool interactions.
Term
Mon, 11/27/2017 - 22:01

Related Codes

Pen ID
Pen ID
Pen ID