Skip to content

done #93

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Rahul-Jena-2002 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

done #93

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
97 changes: 82 additions & 15 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,85 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Spotify Clone</title>
<!-- don't forget to link your styles -->
</head>
<body>
Premium Discover Help Download Music for everyone. Spotify is now free on mobile, tablet and computer. Listen to the
right music, wherever you are. What’s on Spotify? Millions of Songs There are millions of songs on Spotify HD Music
Listen to music as if you were listening live Stream Everywhere Stream music on your smartphone, tablet or computer
It’s as yeezy as Kanye West. Search Know what you want to listen to? Just search and hit play. Browse Check out the
latest charts, brand new releases and great playlists for right now. Discover Enjoy new music every Monday with your
own personal playlist. Or sit back and enjoy Radio.
</body>
<head>
<meta charset="UTF-8"> <!-- Specifies the character encoding for the HTML document -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Ensures the page is responsive to different screen sizes -->
<title>Spotify Clone</title> <!-- Title of the webpage displayed in the browser tab -->
<link rel="stylesheet" href="styles/style.css"> <!-- Link to the external CSS file for styling the webpage -->
</head>

<body>
<!-- Navbar -->
<nav>
<div class="logo">
<img src="images/spotify-logo.png" alt="Spotify Logo"> <!-- Displays the Spotify logo in the navbar -->
</div>
<ul class="nav-links">
<li><a href="#">Premium</a></li> <!-- Navbar link for "Premium" section -->
<li><a href="#">Discover</a></li> <!-- Navbar link for "Discover" section -->
<li><a href="#">Help</a></li> <!-- Navbar link for "Help" section -->
<li><a href="#">Download</a></li> <!-- Navbar link for "Download" section -->
</ul>
</nav>

<!-- Hero Section -->
<section class="hero-section">
<div class="hero-text">
<h1>Music for everyone</h1> <!-- Main heading in the hero section -->
<p>Spotify is now free on mobile, tablet and computer. <br> <!-- Subtext in the hero section -->
Listen to the right music, wherever you are.
</p>
<!-- <button>GET SPOTIFY FREE</button> --> <!-- Commented out button for the hero section -->
</div>
</section>

<!-- What is on Spotify Section -->
<section class="spotify-features">
<h2 class="header">What's on Spotify?</h2> <!-- Heading for the "What's on Spotify?" section -->
<div class="features-container">
<div class="feature">
<img src="./images/music-icon.png" alt="Feature 1"> <!-- Image icon for the first feature -->
<h2> Millions of Songs</h2> <!-- Title of the first feature -->
<p> There are millions of <br> songs on Spotify</p> <!-- Description of the first feature -->
</div>
<div class="feature">
<img src="./images/high-quality-icon.png" alt="Feature 2"> <!-- Image icon for the second feature -->
<h2>HD Music</h2> <!-- Title of the second feature -->
<p>Listen to music as if you <br> were listening live</p> <!-- Description of the second feature -->
</div>
<div class="feature">
<img src="./images/devices-icon.png" alt="Feature 3"> <!-- Image icon for the third feature -->
<h2> Stream Everywhere</h2> <!-- Title of the third feature -->
<p> Stream music on your <br> smartphone, tablet or <br> computer</p> <!-- Description of the third feature -->
</div>
</div>
</section>

<!-- Green Section -->
<section class="green-section">
<div class="content">
<div class="text">
<h2>It’s as yeezy as Kanye West.</h2> <!-- Heading for the green section -->
<div class="features">
<div class="feature-item">
<h3>Search</h3> <!-- Title for the "Search" feature -->
<p>Know what you want to listen to? Just search and hit play.</p> <!-- Description for the "Search" feature -->
</div>
<div class="feature-item">
<h3>Browse</h3> <!-- Title for the "Browse" feature -->
<p>Check out the latest charts, brand new releases, and great playlists for right now.</p> <!-- Description for the "Browse" feature -->
</div>
<div class="feature-item">
<h3>Discover</h3> <!-- Title for the "Discover" feature -->
<p>Enjoy new music every Monday with your own personal playlist. Or sit back and enjoy Radio.</p> <!-- Description for the "Discover" feature -->
</div>
</div>
</div>
<div class="image">
<img src="./images/spotify-app.jpg" alt="Spotify Player"> <!-- Image of the Spotify app/player -->
<img class="spotify-logo" src="./images/spotify-icon-white.png" alt="Spotify Logo"> <!-- Overlayed Spotify logo -->
</div>
</div>
</section>

</body>
</html>
199 changes: 193 additions & 6 deletions styles/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,195 @@
/*
Colors:
* {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
/* font-weight: lighter; */
}

Text: 1A1A1A
Green: #00B172
White: #FFF
/* Navbar Styles */
nav {
display: flex; /* Enables flexible box layout for the navigation bar */
align-items: center; /* Vertically centers items within the navigation bar */
justify-content: space-between; /* Distributes space between items, with the first item aligned to the start and the last item to the end */
padding: 20px 40px; /* Added padding to the navbar */
background-color: white; /* Background color of the navbar */
}

*/
.nav-links {
list-style: none; /* Remove default list styling */
display: flex; /* Display list items in a row */
gap: 20px; /* Space between the list items */
margin: 0; /* Ensure no margin around the list */
padding: 0; /* Ensure no padding around the list */
}

.nav-links li {
padding: 10px 15px; /* Added padding to individual items */
}

.nav-links li a {
color: black; /* Text color for links */
text-decoration: none; /* Remove underline from links */
font-weight: bold; /* Make text bold */
display: block; /* Ensures the anchor tag takes up the full li space */
}

.nav-links li a:hover {
color: #000; /* Change text color on hover */
}

.logo img {
width: 120px; /* Logo size */
height: auto; /* Maintain aspect ratio of the logo */
}

/* Hero Section Styles */
.hero-section {
background-image: url("../images/landing.jpg"); /* Background image for the hero section */
background-size: contain; /* Image scaling */
background-position: center; /* Center the background image */
height: 100vh; /* Full viewport height */
display: flex; /* Flexbox for centering content */
justify-content: center; /* Center content horizontally */
align-items: center; /* Center content vertically */
color: white; /* Text color */
text-align: center; /* Center-align text */
flex-direction: column; /* Stack content vertically */
}

.hero-section h1 {
font-size: 4em; /* Heading font size */
margin-bottom: 20px; /* Space below the heading */
}

.hero-section p {
font-size: 1.5em; /* Paragraph font size */
margin-bottom: 30px; /* Space below the paragraph */
}

.hero-section button {
padding: 15px 30px; /* Button padding */
background-color: #1db954; /* Button background color */
color: white; /* Button text color */
border: none; /* Remove button border */
border-radius: 30px; /* Rounded corners */
cursor: pointer; /* Pointer cursor on hover */
font-size: 1em; /* Button font size */
font-weight: bold; /* Bold text */
}

/* Spotify Features Section */
.spotify-features {
text-align: center; /* Center the header and the container */
padding: 50px 0; /* Padding for the section */
background-color: #f7f7f7; /* Background color */
}

.header {
display: inline-block; /* Ensure the header is only as wide as its content */
position: relative; /* Create a positioning context for the pseudo-element */
margin-bottom: 50px; /* Add spacing below the header */
padding-bottom: 5px; /* Add space between the text and the line */
text-align: center; /* Center-align header text */
}

.header::after {
content: ""; /* Empty content for the underline */
position: absolute; /* Position relative to the header */
left: 0; /* Start from the left */
bottom: 0; /* Place at the bottom of the header */
width: 100%; /* Full width underline */
height: 2px; /* Adjust the thickness of the underline */
background-color: #1db954; /* Underline color */
transform: translateY(5px); /* Space between text and underline */
}

.features-container {
display: flex; /* Display features in a row */
justify-content: space-around; /* Space features evenly */
flex-wrap: wrap; /* Allow wrapping if necessary */
}

.feature {
text-align: center; /* Center-align feature content */
flex: 1 1 30%; /* Flex items take up 30% of container width */
padding: 0 20px; /* Horizontal padding */
box-sizing: border-box; /* Include padding in width calculation */
}

.feature img {
width: 80px; /* Icon size */
margin-bottom: 20px; /* Space below the icon */
}

.feature h2 {
font-size: 1.5em; /* Heading font size */
margin-bottom: 10px; /* Space below the heading */
color: #1db954; /* Heading color */
}

.feature p {
color: #666; /* Paragraph text color */
}

/* Green Section */
.green-section {
background-color: #1db954; /* Section background color */
color: white; /* Text color */
display: flex; /* Flexbox for alignment */
align-items: center; /* Center content vertically */
justify-content: center; /* Center content horizontally */
padding: 50px; /* Padding for the section */
}

.green-section .content {
display: flex; /* Flexbox for content */
width: 100%; /* Full width */
max-width: 1200px; /* Maximum width of the content */
align-items: center; /* Center content vertically */
justify-content: space-between; /* Space content evenly */
}

.green-section .text {
flex: 1; /* Text takes up equal space */
padding-right: 50px; /* Space between text and image */
}

.green-section h2 {
font-size: 2em; /* Heading font size */
margin-bottom: 20px; /* Space below the heading */
}

.green-section .features {
margin-top: 20px; /* Space above the features list */
}

.green-section .feature-item {
margin-bottom: 20px; /* Space below each feature item */
}

.green-section .feature-item h3 {
font-size: 1.5em; /* Feature item heading size */
margin-bottom: 10px; /* Space below the feature item heading */
}

.green-section .feature-item p {
font-size: 1.2em; /* Feature item paragraph size */
margin: 0; /* Remove margin */
}

.green-section .image {
flex: 1; /* Image takes up equal space */
position: relative; /* Position context for child elements */
max-width: 400px; /* Maximum width of the image container */
}

.green-section .image img {
max-width: 100%; /* Image scales to fit container */
height: auto; /* Maintain aspect ratio */
display: block; /* Block-level image */
}

.green-section .spotify-logo {
position: absolute; /* Position relative to the image container */
top: 20px; /* Distance from the top */
left: 20px; /* Distance from the left */
width: 60px; /* Logo size */
}