FRONT-END PROJECT SPOTIFY CLONE
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="icon" href="./assets/logo.png" />
<title>Spotify - Web Player: Music for everyone</title>
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:wght@300;400;500;600;700&family=Roboto&display=swap"
rel="stylesheet"
/>
</head>
<body>
<div class="main">
<div class="sidebar">
<div class="nav">
<div class="nav-option" style="opacity: 1">
<i class="fa-solid fa-house"></i>
<a href="#">Home</a>
</div>
<div class="nav-option">
<i class="fa-solid fa-magnifying-glass"></i>
<a href="#">Search</a>
</div>
</div>
<div class="library">
<div class="options">
<div class="lib-option nav-option">
<img src="./assets/library_icon.png" />
<a href="#">Your Library</a>
</div>
<div class="icons">
<i class="fa-solid fa-plus"></i>
<i class="fa-solid fa-arrow-right"></i>
</div>
</div>
<div class="lib-box">
<div class="box">
<p class="box-p1">Create your first playlist</p>
<p class="box-p2">It's easy,we'll help you</p>
<button class="badge">Create playlist</button>
</div>
<div class="box">
<p class="box-p1">Let's find some podcasts to follow</p>
<p class="box-p2">we'll keep you updated on new episodes</p>
<button class="badge">Browse podcasts</button>
</div>
</div>
</div>
</div>
<div class="main-content">
<div class="sticky-nav">
<div class="sticky-nav-icons">
<img src="./assets/backward_icon.png" />
<img src="./assets/forward_icon.png" class="hide" />
</div>
<div class="sticky-nav-options">
<button class="badge nav-item hide">Explore Premium</button>
<button class="badge nav-item dark-badge">
<i class="fa-solid fa-download" style="margin-right: 5px"></i
>Install App
</button>
<i class="fa-solid fa-user nav-item"></i>
</div>
</div>
<h2>Recently Played</h2>
<div class="card-container">
<div class="card">
<img src="./assets/card1img.jpeg" class="card-img" />
<p class="card-title">Top 50-Global</p>
<p class="card-info">Your updates of the most played</p>
</div>
</div>
<h2>Trending Now</h2>
<div class="card-container">
<div class="card">
<img
src="https://image-cdn-ak.spotifycdn.com/image/ab67706c0000da847c55c716ccab74ddefae2102"
class="card-img"
/>
<p class="card-title">Salaar: Part 1 – Ceasefire</p>
<p class="card-info">Ravi Basrur</p>
</div>
<div class="card">
<img
src="https://tse4.mm.bing.net/th?id=OIP.736XvwqDlMXM64EqNwCY3AHaHa&pid=Api&P=0&h=180"
class="card-img"
/>
<p class="card-title">Devara: Part 1</p>
<p class="card-info">Anirudh</p>
</div>
<div class="card">
<img
src="https://tse1.mm.bing.net/th?id=OIP.RFKeHBEACv_m6t_mQ-o0QAHaHa&pid=Api&P=0&h=180"
class="card-img"
/>
<p class="card-title">Pushpa 2: The Rule</p>
<p class="card-info">DSP</p>
</div>
</div>
<h2>Featured Charts</h2>
<div class="card-container">
<div class="card">
<img src="./assets/card6img.jpeg" class="card-img" />
<p class="card-title">Top 50-Global</p>
<p class="card-info">Your updates of the most played</p>
</div>
<div class="card">
<img src="./assets/card2img.jpeg" class="card-img" />
<p class="card-title">Top 50-Global</p>
<p class="card-info">Your updates of the most played</p>
</div>
<div class="card">
<img src="./assets/card5img.jpeg" class="card-img" />
<p class="card-title">Top 50-Global</p>
<p class="card-info">Your updates of the most played</p>
</div>
</div>
<div class="footer">
<div class="line"></div>
</div>
</div>
<div class="music-player">
<div class="album">
<img
src="https://image-cdn-ak.spotifycdn.com/image/ab67706c0000da847c55c716ccab74ddefae2102"
class="album-img"
/>
<div class="song-details">
<p class="song-title">Salaar: Part 1 – Ceasefire</p>
<p class="song-music-director">Ravi Basrur</p>
</div>
<img
src="./assets/add_circle_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.png"
class="symbol"
/>
</div>
<div class="player">
<div class="player-controls">
<img src="./assets/player_icon1.png" class="player-control-icon" />
<img src="./assets/player_icon2.png" class="player-control-icon" />
<img
src="./assets/player_icon3.png"
class="player-control-icon"
style="opacity: 1; height: 2rem"
/>
<img src="./assets/player_icon4.png" class="player-control-icon" />
<img src="./assets/player_icon5.png" class="player-control-icon" />
</div>
<div class="playback-bar">
<span>00:00</span>
<input type="range" class="progress-bar" />
<span>2:56</span>
</div>
</div>
<div class="controls">
<img
src="./assets/auto_read_play_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.png"
class="playing-img"
/>
<img
src="./assets/lyrics_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.png"
class="lyrics"
/>
<img
src="./assets/queue_music_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.png"
class="queue"
/>
<img
src="./assets/google_home_devices_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.png"
class="add-devices"
/>
<img
src="./assets/volume_up_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.png"
class="volume"
/>
<input type="range" class="vol" />
<img
src="./assets/tab_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.png"
class="mini"
/>
<img
src="./assets/arrows_output_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.png"
class="fit"
/>
</div>
</div>
</div>
</body>
</html>
CSS
body {
font-family: "Montserrat", sans-serif;
margin: 0;
background-color: #000;
color: #fff;
overflow: hidden;
}
.main {
display: flex;
height: 100vh;
padding: 0.5rem;
}
.sidebar {
background-color: #000;
width: 340px;
border-radius: 1rem; /* 16px*/
margin: 0.5rem;
}
.main-content {
background-color: #121212;
flex: 1;
border-radius: 1rem;
overflow: auto;
padding: 0 1.5rem 0 1.5rem;
}
.music-player {
background-color: black;
position: fixed;
bottom: 0;
width: 100%;
height: 72px;
display: flex;
justify-content: space-between;
align-items: center;
}
a {
text-decoration: none;
color: #fff;
}
.nav {
background-color: #121212;
border-radius: 1rem;
display: flex;
flex-direction: column;
justify-content: center;
height: 100px;
padding: 0.5rem, 0.75rem;
}
.nav-option {
background-color: #121212;
line-height: 2.5rem;
opacity: 0.5;
padding: 0.5rem 0.75rem;
}
.nav-option:hover {
opacity: 1;
}
.nav-option i {
font-size: 1.25rem;
}
.nav-option a {
font-size: 1rem;
margin-left: 1rem;
}
.library {
background-color: #121212;
border-radius: 1rem;
height: 100%;
margin-top: 0.5rem;
padding: 0.5rem 0.75rem;
}
.lib-option img {
height: 1.25rem;
width: 1.25rem;
}
.options {
display: flex;
justify-content: space-between;
align-items: center;
}
.icons {
font-size: 1.25rem;
display: flex;
}
.icons i {
opacity: 0.5;
margin-right: 1rem;
}
.icons i:hover {
opacity: 1;
}
.box {
background-color: #232323;
height: 8rem;
border: 0.75rem;
margin: 0.75rem 0 1.75rem 0;
padding: 0.75rem 1rem;
}
.box-p1 {
font-size: 1rem;
font-weight: 500;
}
.box-p2 {
font-size: 0.75rem;
opacity: 0.9;
}
.badge {
background-color: #fff;
border: none;
border-radius: 100px;
padding: 0.25rem 1rem;
font-weight: 700;
margin-top: 0.5rem;
height: 2rem;
width: fit-content;
}
.sticky-nav {
position: sticky;
top: 0;
background-color: #121212;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 0 1rem 0;
z-index: 10;
}
.sticky-nav-icons {
margin-left: 0.75rem;
}
.sticky-nav-options {
display: flex;
justify-content: center;
align-items: center;
}
.nav-item {
margin-right: 1rem;
}
.dark-badge {
background-color: #000;
color: #fff;
}
@media (max-width: 1000px) {
.hide {
display: none;
}
}
.card {
background-color: #232323;
width: 150px;
border-radius: 0.5rem;
padding: 1rem;
margin: 1.5rem;
}
.card-container {
display: flex;
flex-wrap: wrap;
}
.card-img {
width: 100%;
border-radius: 0.5rem;
}
.card-info {
font-size: 0.85rem;
opacity: 0.8;
}
.footer {
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
.line {
width: 30%;
height: 50%;
border-top: 1px solid white;
opacity: 0.4;
}
.album {
height: 100%;
width: 30%;
display: flex;
flex-wrap: wrap;
padding: 0px 0px 0px 16px;
}
.album-img {
height: 50px;
margin-top: 10px;
border: 1rem;
border-radius: 5px;
}
.song-title {
font-size: 13px;
font-weight: 600;
margin-top: 20px;
margin-left: 25px;
margin-bottom: 0%;
}
.song-title:hover {
text-decoration: underline;
}
.song-music-director {
font-weight: lighter;
font-size: 12px;
margin-left: 25px;
margin-top: 3px;
margin-bottom: 100%;
}
.song-music-director:hover {
text-decoration: underline;
font-weight: bold;
}
.symbol {
height: 25px;
width: 25px;
margin: 20px 0px 0px 18px;
opacity: 0.6;
}
.symbol:hover {
opacity: 1;
}
.player {
height: 100%;
width: 40%;
}
.controls {
height: 100%;
width: 25%;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top:20px;
margin-left: 25px;
}
.playing-img {
height: 20px;
opacity: 0.6;
padding:5px 5px 5px 5px;
}
.lyrics {
height: 20px;
opacity: 0.6;
padding:5px 5px 5px 5px;
}
.queue {
height: 20px;
opacity: 0.6;
padding:5px 5px 10px 5px;
}
.add-devices {
height: 20px;
opacity: 0.6;
padding:5px 5px 5px 5px;
}
.volume{
height: 20px;
opacity: 0.6;
padding: 5px 5px 5px 5px;
}
.playing-img:hover {
opacity: 1;
}
.add-devices:hover {
opacity: 1;
}
.lyrics:hover{
opacity: 1;
}
.queue:hover{
opacity: 1;
}
.volume:hover{
opacity: 1;
}
.vol{
width: 100px;
padding: 5px 5px 5px 5px;
margin-bottom: 2.75rem;}
.mini{
height: 20px;
opacity: 0.6;
padding:5px 5px 5px 15px;
}
.mini:hover{
opacity: 1;
}
.fit{
height: 20px;
opacity: 0.6;
padding:5px 5px 5px 15px;
}
.player-controls{
display: flex;
justify-content: center;
align-items: center;
}
.player-control-icon{
height: 1rem;
margin-right: 1.75rem;
opacity: 0.7;
}
.player-control-icon:hover{
opacity: 1;
}
.playback-bar{
display: flex;
justify-content: center;
align-items: center;
}
.progress-bar{
width: 70%;
appearance: none;
background-color: transparent;
cursor: pointer;
}
.progress-bar::-webkit-slider-runnable-track{
background-color: #ddd;
border-radius: 100px;
height: 0.2rem;
}
.progress-bar::-webkit-slider-thumb{
appearance: none;
height: 1rem;
width: 1rem;
background-color: #1bd760;
border-radius: 50%;
margin-top: -6px;
}
.vol{
appearance: none;
background-color: transparent;
cursor: pointer;
}
.vol::-webkit-slider-runnable-track{
background-color: #ddd;
border-radius: 100px;
height: 0.2rem;
}
.vol::-webkit-slider-thumb{
appearance: none;
height: 1rem;
width: 1rem;
background-color: #1bd760;
border-radius: 50%;
margin-top: -6px;
}
Comments
Post a Comment