Spotify

In this example below you will see how to do a Spotify with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by -J0hn-, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright -J0hn- ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Spotify</title>
  
  
  <link rel='stylesheet prefetch' href='http://cdn.bootcss.com/spectre.css/0.1.27/spectre.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://cdn.rawgit.com/michalsnik/aos/2.0.4/dist/aos.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.css'>
<link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/jquery.slick/1.5.0/slick-theme.css'>
<link rel='stylesheet prefetch' href='https://cdn.rawgit.com/marvelapp/devices.css/master/assets/devices.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <nav id="nav1">
  <a href="#"><img class="logo"  src="http://findicons.com/files/icons/2779/simple_icons/256/spotify.png"></a>
  <div id="inline-links">
  <ul class="list-unstyled pull-right">
          <li><a class="white-text" href="#">Aliquam</a></li>
    <li><a class="white-text" href="#">Quisque</a></li>
    <li><a class="white-text" href="#">Tincidunt</a></li>
    <li class="grey-text">|</li>
    <li><a class="grey-text" href="#">Catsear</a></li>
    <li><a class="grey-text" href="#">Dandelion</a></li>
        </ul>
  </div>
      <button class="hamburger hamburger--collapse toggle-menu menu-left" type="button" aria-label="Menu" aria-controls="navigation">
        
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</button>
    </nav>
<nav id="nav2" class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left">
  <!--navigation goes here-->
  <a href="#" class="m-t-3">Aliquam</a>
	<a href="#">Quisque</a>
	<a href="#" class="m-b-3">Tincidunt</a>
	<a href="#" class="grey-text">Catsear</a>
	<a href="#" class="grey-text">Dandelion</a>
</nav>
<div class="jumbotron-fluid">
<!--     <div class="text">
      <h1 class="text-uppercase">Play.</h1>
    </div>
    <div class="text">
      <h1 class="text-uppercase">Listen.</h1>
    </div>
    <div class="text">
      <h1 class="text-uppercase">Enjoy.</h1>
    </div> -->
  
<div class="center">
  <div class="text-xs-center">
  <h1 class="text-capitalize">music for everyone</h1>
  <button class="btn btn-primary text-center purple-bck">Mauris nec mauris</button>
  <button class="btn btn-primary text-center no-fill">Mauris nec mauris</button>
  </div>
  
  <div class="text-xs-center">
  <h1 class="text-capitalize">Sed malesuada blandit odio at.</h1>
  <h1 class="text-capitalize">Sed id $14.99.</h1>
  <button class="btn btn-primary purple-bck text-xs-center">Cras quam</button>
  </div>
  
  <div class="text-xs-center">
  <h1 class="text-capitalize">Cras a ligula 50% felis.</h1>
  <button class="btn btn-primary purple-bck">Cras quam</button>
  </div>
  
  <div class="text-xs-center">
  <h1 class="text-capitalize">Quisque id mi in&#174;.</h1>
  <button class="btn btn-primary purple-bck">Cras quam</button>
  </div>
  
</div><!--center end-->  
  
  </div><!--jumbotron-fluid end-->
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-5 hidden-xs-down">
      <img src="https://upload.wikimedia.org/wikipedia/en/thumb/1/19/OBTN.jpg/220px-OBTN.jpg" height="200" />
        <img src="https://upload.wikimedia.org/wikipedia/en/c/c1/Wolfmother_album_cover.jpg" width="200" height="200" />
        <img class="hidden-md-down" src="http://www.billboard.com/files/styles/900_wide/public/media/05-The-Weeknd-Beauty-Behind-the-Madness-best-album-art-2015-billboard-1500.jpg" width="200" height="200" />
   <img src="https://67.media.tumblr.com/baa71e41e53564826fdc25a6d7df5599/tumblr_n4rfhh04gE1s8uu30o1_500.jpg" height="200" width="200" />
    </div><!--col-sm-6 end-->
   <div class="col-sm-7 col-xs-12 m-t-1">
     <div class="m-b-3">
     <h1 class="purple-text">Sed efficitur quis?</h1>
  </div>
     <div class="m-b-2" data-aos="fade-up">
     <h3 class="purple-text">Quisque nec</h3>
     <p>Fusce congue, felis ac cursus commodo, massa velit ullamcorper urna, id vehicula mauris tortor vitae nunc.</p>
     </div>
     <div class="m-b-2" data-aos="fade-up">
     <h3 class="purple-text">Praesent nisi</h3>
     <p>Donec venenatis, sapien id dignissim rutrum, ex nunc ornare ligula, sit amet dictum nibh nisl.</p>
     </div>
     <div class="m-b-2" data-aos="fade-up">
     <h3 class="purple-text">Suspendisse dapibus</h3>
     <p>Aenean nulla ipsum, egestas quis felis id, eleifend viverra orci. Nam vel libero.</p>
     </div>
    </div><!--col-sm-6 end-->
  </div><!--row end-->
  <div class="row row-2">
    <div class="col-sm-6 col-xs-12">
      <div>
        <h2 class="white-text p-b-3" data-aos="fade-up">Curabitur ut.</h2>
      </div>
      <div data-aos="fade-up">
        <h2 class="lightblue-text p-b-1">Donec pretium</h2>
        <p class="white-text">Aenean mi odio, sollicitudin vel volutpat non, dictum quis eros. Sed eu lorem viverra, scelerisque.</p>
      </div>
      <div data-aos="fade-up">
        <h2 class="lightblue-text p-b-1">Quisque bibendum</h2>
        <p class="white-text">Maecenas varius varius tristique. Curabitur sed nulla semper, dapibus tortor vel, lobortis sem. Aenean at massa.</p>
      </div>
      <div data-aos="fade-up">
        <h2 class="lightblue-text p-b-1">Donec non</h2>
        <p class="white-text">Nam varius vel lectus id viverra. Nam id tortor lacus. Donec ultricies leo quis.</p>
      </div>
    </div><!--col-sm-6-->
    
    <div class="marvel-device iphone5c blue">
    <div class="top-bar"></div>
    <div class="sleep"></div>
    <div class="volume"></div>
    <div class="camera"></div>
    <div class="sensor"></div>
    <div class="speaker"></div>
    <div class="screen">
        <!-- Content goes here -->
      <img class="img-fluid" src="https://www.imore.com/sites/imore.com/files/styles/xlarge/public/field/image/2016/03/Spotify-iPhone-screenshot-01.jpg?itok=YsS8p3ib">
    </div>
    <div class="home"></div>
    <div class="bottom-bar"></div>
</div>
    
  </div><!--row end-->
  <div class="row">
    <div class="col-xs-12">
      <h1 class="white-text text-xs-center" data-aos="zoom-in">Ut mattis auctor diam nec</h1>
    </div><!--col-sm-12 end-->
  </div><!--row end-->
  <div class="row row-4">
    <div class="col-sm-8 col-xs-12">
      <div data-aos="fade-up">
        <h1 class="white-text m-b-2">Proin consectetur nisl nec</h1>
      </div>
      <div data-aos="fade-up"><p class="white-text m-b-2"><strong>Maecenas venenatis<br> Eget nibh id laoreet. Duis sagittis quam dui.</strong></p></div>
      <div data-aos="fade-up">
      <div class="border-bottom flex"><h2 class="lightblue-text p-r-3">Proin eu</h2><h2 class="white-text">$0.00<span class="p-l-1 lightblue-text small-font">/month</span></h2></div>
      <div class="border-bottom p-t-2"><p class="white-text"><strong>Proin turpis neque, tristique at faucibus ut, lacinia at metus.</strong></p></div>
      <div class="p-t-2 p-b-3">
        <button class="btn btn-primary purple-bck">Ut lacus velit</button>
      </div>
      </div>
      <div data-aos="fade-up">
      <div class="border-bottom flex"><h2 class="lightblue-text p-r-1">Aenean dapibus</h2><h2 class="white-text">$9.00<span class="p-l-1 lightblue-text small-font">/month</span></h2></div>
      <div class="p-t-2 border-bottom">
        <p class="white-text"><strong>Donec porttitor.</strong></p>
        <p class="white-text"><strong>Etiam blandit.</strong></p>
        <p class="white-text"><strong>Ut condimentum.</strong></p>
        <p class="white-text"><strong>Nulla vehicula.</strong></p>
      </div>
      <div class="p-t-2 p-b-3">
        <button class="btn btn-primary purple-bck">Ut lacus velit</button>
      </div>
      </div>
    </div><!--col-sm-8 end-->
    <div class="marvel-device s5 white" data-aos="slide-up" data-aos-duration="100000" data-aos-delay="500">
    <div class="top-bar"></div>
    <div class="sleep"></div>
    <div class="camera"></div>
    <div class="sensor"></div>
    <div class="speaker"></div>
    <div class="screen">
        <!-- Content goes here -->
      <img class="img-fluid" src="https://lh3.googleusercontent.com/0A2Xd5l_bHkvyzYva1e7ZYO7NjLx16W-u1-_9Fot4ifbWOQOwiAPJoOnJHNUsQjkyew=h900">
    </div>
    <div class="home"></div>
</div>
  </div><!--row end-->
  <footer id="bck-clr">
    <div class="row text-xs-center">
      
      
      <div class="col-xs-12">
        <ul class="list-unstyled">
          <li><i class="fa fa-instagram"></i></li>
          <li><i class="fa fa-twitter"></i></li>
          <li><i class="fa fa-facebook"></i></li>
        </ul>
      </div><!--col-sm-6 end-->
    </div><!--row end-->
  </footer>
</div><!--container-fluid end-->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://www.stampede-design.com/demo/bootstrap-pushnav/js/jPushMenu.js'></script>
<script src='https://cdn.rawgit.com/michalsnik/aos/2.0.4/dist/aos.js'></script>
<script src='http://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/-J0hn-/spotify-BLOEkr */
@import url('https://fonts.googleapis.com/css?family=Oswald');
@import url('https://fonts.googleapis.com/css?family=Dosis:700');
*{
  margin:0;
  padding:0;
}
.row h1, h2, h3 ,#nav2 a, #inline-links{
  font-family: 'Dosis', sans-serif;
}
body{
  box-sizing:border-box;
  background:white;
  background:url("http://orig08.deviantart.net/33cc/f/2013/223/0/8/gradients_by_drugi-d6hne3n.png") no-repeat center center;
  background-size:cover;
  background-attachment:fixed;
  overflow-x:hidden;
}
/***** NAV *****/
body{
  position:relative;
}
 #nav1{
  position:fixed;
  top:0;
   width:100%;
  z-index:1;
   background:rgba(0,0,0,.6);
}
#nav1 .logo{
  position:absolute;
  top:0;
  left:0;
  width:45px;
}
.hamburger:focus{
    outline: none;
}
.hamburger {
  float:right;
  padding: 12px 30px 15px 15px;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, -webkit-filter;
  transition-property: opacity, filter;
  transition-property: opacity, filter, -webkit-filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible; }
  .hamburger:hover {
    opacity: 0.9; }

.hamburger-box {
  width: 20px;
  height: 5px;
  display: inline-block;
  position: relative; }

.hamburger-inner {
  
  display: block;
  top: 50%;
  margin-top: -2px;}

  .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 30px;
    height: 3px;
    background-color: rgb(250,250,250);
    border-radius: 4px;
    position: absolute;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    transition-duration: 0.15s;
    transition-timing-function: ease; }
  .hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block; }
  .hamburger-inner::before {
    top: -8px; }
  .hamburger-inner::after {
    bottom: -6px; }


.hamburger--collapse .hamburger-inner {
  top: auto;
  bottom: 0;
  transition-duration: 0.15s;
  transition-delay: 0.15s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .hamburger--collapse .hamburger-inner::after {
    top: -15px;
    transition: top 0.3s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; }
  .hamburger--collapse .hamburger-inner::before {
    transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--collapse.is-active .hamburger-inner {
  -webkit-transform: translate3d(0, -10px, 0) rotate(-45deg);
          transform: translate3d(0, -10px, 0) rotate(-45deg);
  transition-delay: 0.30s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  .hamburger--collapse.is-active .hamburger-inner::after {
    top: 0;
    opacity: 0;
    transition: top 0.3s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.27s linear; }
  .hamburger--collapse.is-active .hamburger-inner::before {
    top: 0;
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
    transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.15s 0.42s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.15s 0.42s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.15s 0.42s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.15s 0.42s cubic-bezier(0.215, 0.61, 0.355, 1); }

.cbp-spmenu {
	background: rgb(0,0,0);
	position: fixed;
}

.cbp-spmenu a {
	display: block;
	color: #fff;
	font-size: 1.4em;
	font-weight: bold;
  text-decoration:none;
  transition:color .5s;
}
.cbp-spmenu .grey-text{
  color:rgb(150,150,150);
}
.cbp-spmenu a:hover {
	color:rgb(102, 204, 255);
}
.cbp-spmenu-vertical {
	width: 240px;
	height: 100%;
	top: 0;
	z-index: 1;
}
.cbp-spmenu-vertical a {
/* 	border-bottom: 1px solid #258ecd; */
	padding: 1.2em;
}
.cbp-spmenu-left {
	left: -240px;
}
.cbp-spmenu-left.cbp-spmenu-open {
	left: 0px;
}
.cbp-spmenu {
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	transition: all .5s ease;
}

@media(min-width:769px){
  #nav1{
    height:46px;
  }
  #nav1 button{
    display:none;
  }
}
@media(max-width:769px){
  #nav1 #inline-links{
    display:none;
  }
}
#nav1 #inline-links ul{
  margin-right:1em;
  margin-bottom:.15em;
  margin-top:-6px;
  padding:0;
  display:flex;
  flex-direction:row;
  flex-wrap:no-wrap;
}
#nav1 #inline-links ul li a{
  margin: .90em .70em;
  padding:.10em .35em;
  transition:color .3s;
}
#nav1 #inline-links ul li a:hover{
  text-decoration:none;
  color:rgb(102, 204, 255);
}
.white-text{
  color:rgb(250,250,250);
}
.grey-text{
  color:rgb(166, 166, 166);
}

/***** JUMBOTRON *****/
.jumbotron-fluid{
  position:relative;
  font-family: 'Oswald', sans-serif;
  background:url("http://orig08.deviantart.net/33cc/f/2013/223/0/8/gradients_by_drugi-d6hne3n.png");
  z-index:0;
  background-size:cover;
  background-attachment:fixed;
}
.jumbotron-fluid .container-fluid, .purple-bck{
  background:rgb(102, 26, 255);
  border:none;
/*   border-color:rgb(102, 26, 255); */
  transition:all .5s ease;
}
.purple-bck:hover{
  background:rgb(76, 0, 230);
  border-color:rgb(76, 0, 230);
}
.center .no-fill{
  background:none;
  border:solid 2px rgb(250,250,250);
  transition:all .5s ease;
}
.center .no-fill:hover{
  background:rgb(250,250,250);
  color:rgb(0,0,0);
  border-color:rgb(250,250,250);
}
.center {
  position:absolute;
  padding-top:2.5em;
  top:0;
  left:0;
  right:0;
  bottom:10%;
  z-index:100;
  display:flex;
  flex-direction:row;
  flex-wrap:no-wrap;
  justify-content:center;
}


/***** CONTAINER-FLUID *****/
.row:nth-of-type(1){
  background:rgb(250,250,250);
  padding:3em 0;
  height:100%;
}
.row:nth-of-type(2){
  padding:3em 0;
  height:100%;
}
.row:nth-of-type(3){
  background:linear-gradient(0deg,rgb(38, 38, 38),rgb(0,0,0));
  padding:8em 0;
  height:50%;
}
.col-sm-12{
  display:flex;
  flex-wrap:wrap;
  justify-content: space-between;
}
.row:nth-of-type(4){
  height:100%;
  padding:3em 0;
}
.small-font{
  font-size:.60em;
}
.flex{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
}
.col-sm-8 .btn{
  border-radius:50px;
  padding:.90em 3.5em;
}
.border-bottom{
  border-bottom:solid 1px rgb(250,250,250);
}
.purple-text{
  color:rgb(102, 0, 204);
}
.white-text{
  color:rgb(250,250,250);
}
.lightblue-text{
  color:rgb(102, 204, 255);
}


/****** FOOTER *****/
#bck-clr .row{
  background:black;
}

footer .row ul li:hover{
  color:rgb(102, 204, 255);
}
footer .row  ul li{
  cursor:pointer;
  display:inline-block;
  font-size:1.3em;
  color:rgb(250,250,250);
  padding:.60em;
  margin: 0 .10em;
}



@media(min-width:768px){
  .jumbotron-fluid{
    height:380px;
  }
  .center{
    bottom:0;
    top:0;
    left:0;
    right:0;
  }
  .row{
    height:100vh;
  }
  .row-2{
  position:relative;
}
.blue{
  position:absolute;
  top:-30px;
  right:0;
  -webkit-transform:rotate(15deg);
  z-index:-1;
}
  .row-4{
    position:relative;
  }
  .white{
    position:absolute;
    top:2%;
    right:-10%;
    z-index:-1;
  }
}
@media(max-width:768px){
  .jumbotron-fluid{
    height:350px;
  }
    
}
@media(max-width:744px){
  .marvel-device{
    display:none;
  }
}



@media(max-width:500px){
  .center{
    bottom:0;
    top:5%;
  }
}
@media(min-width:500px){
  .center .btn{
    margin-top:1em;
  }
  .center{
    top:10%;
  }
}
@media(max-width:449px){
  .center{
    bottom:10%;
    top:5%;
  }
  .center .btn{
    margin-top:.50em;
  }
}
.center h1{
  color:white;
  text-shadow:1px 1px 2px black;
}
.center .btn{
  padding: .40em 3em;
  
  border-radius:50px;
}

 .slick-dots li button:before
    {
        font-size: 10px;
        opacity:1;
        color:rgb(179, 179, 179);
      margin-left:-30px;
    }
.slick-dots li.slick-active button:before 
 { color: rgb(250,250,250); opacity: 1; }




/* .jumbotron-fluid .text{
  position:absolute;
  bottom:0;
  right:20%;
  font-weight:bold;
  color:rgb(250,250,250);
  text-shadow:2px 2px 2px black;
  -webkit-animation:textanimation 30s linear infinite 0s;
}

.text:nth-of-type(1){
  -webkit-animation-delay:14s;
}
.text:nth-of-type(2){
  -webkit-animation-delay:21s;
}
.text:nth-of-type(3){
  -webkit-animation-delay:28s;
}
@-webkit-keyframes textanimation{
  0% {
    opacity:0;
  }
  8%{
    opacity:1;
  }
  17% {
    opacity:1;
  }
  19%{
    opacity:0;
  }
  100%{
    opacity:0;
  }
} */

/*Downloaded from https://www.codeseek.co/-J0hn-/spotify-BLOEkr */
$('.center').slick({
  centerMode: true,
  centerPadding: '0px',
  dots:true,
  slidesToShow: 1,
  responsive: [
    {
      breakpoint: 1440,
      settings: {
        mobileFirst: true,
        centerMode: true,
        arrows: false,
        centerPadding: '0px',
        slidesToShow: 1
      }
    }
    ]
});

var $hamburger = $(".hamburger");
  $hamburger.on("click", function(e) {
    $hamburger.toggleClass("is-active");
    
      
  });

jQuery(document).ready(function($) {
    $('.toggle-menu').jPushMenu({
      closeOnClickOutside:false
    });
});

AOS.init({      
      duration: 1800,
  easing: 'ease'
    });

Comments