Spotify

Developer
Size
6,689 Kb
Views
6,072

How do I make an spotify?

What is a spotify? How do you make a spotify? This script and codes were developed by John on 05 January 2023, Thursday.

Spotify Previews

Spotify - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<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>

Spotify - Script Codes CSS Codes

@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; }
} */

Spotify - Script Codes JS Codes

$('.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' });
Spotify - Script Codes
Spotify - Script Codes
Home Page Home
Developer John
Username -J0hn-
Uploaded January 05, 2023
Rating 3
Size 6,689 Kb
Views 6,072
Do you need developer help for Spotify?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

John (-J0hn-) Script Codes
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!