Skip to content

Not perfect but done #94

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
BulbLighter wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Not perfect but done #94

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
15f4f00
HTML CSS is very time taking
BulbLighter Aug 29, 2024
620474b
done
BulbLighter Aug 29, 2024
5c85b9e
done
BulbLighter Aug 29, 2024
aa589c9
done
BulbLighter Aug 29, 2024
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
124 changes: 1 addition & 123 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,132 +3,10 @@

# LAB | HTML & CSS - Spotify Clone



## Introduction



Everybody likes music, right? Odds are, if you do, you have heard of **Spotify**.



In this lab, we will be building a simplified version of the Spotify landing page:



![Spotify image](https://i.imgur.com/xVD0bm6.jpg)



<br>



All of the necessary assets and images are already provided. You might also find it useful to resort to the **[full-length PDF version of the website](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/spotify-prototype.pdf)** as reference.



## Requirements



- Fork this repo

- Clone this repo



## Submission



Upon completion, run the following commands:



```shell

$ git add .

$ git commit -m "done"

$ git push origin master

```



Create Pull Request so we can check up your work.



## Instructions



You are provided with some assets - in the `images` folder, you will find the necessary images, and the text is ready for you in the `index.html` file. Write your HTML and CSS code in the `index.html` and `styles/style.css` files, respectively. Remember to follow the best practices.



The page is split into 4 sections, and we have generously cut it down into pieces!



In general, website designs don't just come out the wild, so you will most likely be having mockups/sketches that you will have to integrate. It is a good practice to help you out before coding to cut the website into pieces in order to help you out _**structuring**_ your HTML.



_**The last section isn't as detailed as the others ones, good luck**_ :smile:



:muscle: :muscle: :muscle:
Created this static Spotify Webpage using HTML and CSS for

<br>

![](https://res.cloudinary.com/ihwebdeb/image/upload/v1571085836/Ironhack/spotify-prototype_1x_ahk8ep.jpg)



Let's do this!



### Iteration 1: Navbar



- The navbar should be `position: fixed`.

- Align the logo to the left and the `ul` with the links to the right, either using `float` or `flex`.



### Iteration 2: Large image background with text



- Check out [this guide](https://css-tricks.com/centering-css-complete-guide/) on centering things.



### Iteration 3: What is on Spotify section



- It looks like the `div`s take up about a third of the container each. How can you represent this in code?



### Iteration 4: The green section



- It looks like we have 2 main sections, a containing element with the text flowing from top to bottom, and the image of the Spotify player on the right.

- Position the Spotify logo absolutely according to the _green_ `div`.



Happy coding! :heart:
79 changes: 64 additions & 15 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,67 @@
<!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">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spotify - Music for everyone</title>
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<header>
<nav>
<img src="images/spotify-logo.png" alt="Spotify Logo" class="logo">
<ul>
<li><a href="#premium">Premium</a></li>
<li><a href="#discover">Discover</a></li>
<li><a href="#help">Help</a></li>
<li><a href="#download">Download</a></li>
</ul>
</nav>
</header>

<main>
<section class="hero" style="background-image: url('images/landing.jpg');">
<h1>Music for everyone.</h1>
<p>Spotify is now free on mobile, tablet and computer.<br>Listen to the right music, wherever you are.</p>
</section>

<section class="features">
<h2>What's on Spotify?</h2>
<div class="feature-container">
<div class="feature">
<img src="images/music-icon.png" alt="Music Icon">
<h3>Millions of Songs</h3>
<p>There are millions of songs on Spotify</p>
</div>
<div class="feature">
<img src="images/high-quality-icon.png" alt="HD Music Icon">
<h3>HD Music</h3>
<p>Listen to music as if you were listening live</p>
</div>
<div class="feature">
<img src="images/devices-icon.png" alt="Devices Icon">
<h3>Stream Everywhere</h3>
<p>Stream music on your smartphone, tablet or computer</p>
</div>
</div>
</section>

<section class="kanye">
<div class="kanye-text">
<h2>It's as yeezy as Kanye West.</h2>
<h3>Search</h3>
<p>Know what you want to listen to?<br> Just search and hit play.</p>
<h3>Browse</h3>
<p>Check out the latest charts,<br> brand new releases and great<br> playlists for right now.</p>
<h3>Discover</h3>
<p>Enjoy new music every Monday<br> with your own personal playlist.<br> Or sit back and enjoy Radio.</p>
</div>
<div class="kanye-image">
<img src="images/spotify-icon-white.png" alt="Spotify Icon" class="spotify-icon-white">
<img src="images/spotify-app.jpg" alt="Spotify App">
</div>
</section>
</main>
</body>
</html>

161 changes: 155 additions & 6 deletions styles/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,157 @@
/*
Colors:

Text: 1A1A1A
Green: #00B172
White: #FFF
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
line-height: 1.6;
}


header {
background-color:white;
padding: 20px 50px;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
}

nav {
display: flex;
justify-content: space-between;
align-items: center;
}

.logo {
height: 40px;
}

nav ul {
display: flex;
list-style-type: none;
}

nav ul li {
margin-left: 20px;
}

nav ul li a {
color: black;
text-decoration: none;
font-size: 2rem;
}


.hero {
background-size: cover;
background-position: center;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
color: #fff;
padding-top: 80px;
}

.hero h1 {
font-size: 3rem;
margin-bottom: 20px;
}

.features h2 {
font-size: 3rem;
margin-bottom: 20px;
}
.features {
padding: 50px 0;
text-align: center;
}

.feature-container {
display: flex;
justify-content: space-around;
margin-top: 50px;
}
.feature-container h3 {
font-size: 4rem;
color: #00B172;
margin-bottom: 20px;
}
.feature-container p {
font-size: 2rem;
margin-bottom: 20px;
}
.hero h1 {
font-size: 10rem;
margin-bottom: 20px;
}
.hero p {
font-size: 3rem;
margin-bottom: 20px;
}

.feature {
flex-basis: 30%;
}

.feature img {
width: 100px;
margin-bottom: 20px;
}


.kanye {
background-color: #00B172;
color: #fff;
padding: 50px;
display: flex;
justify-content: space-between;
position: relative;
}

.kanye-text {
flex-basis: 50%;

}

.kanye-text h2 {
font-size: 4rem;
margin-bottom: 30px;
}

.kanye-text h3 {
font-size: 3rem;
margin-top: 20px;
}
.kanye-text p {
font-size: 2rem;
margin-top: 20px;
}

.kanye-image {
flex-basis: 40%;
position: relative;

}

.kanye-image img {
max-width: 100%;
float: right;

}

.spotify-icon-white {
position: absolute;
bottom: 50%;
right: 130%;
transform: translate(50%, 50%);
width: 200px;
height: 200px;
}

*/