forked from ironhack-labs/lab-css-spotify-clone
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
102 lines (95 loc) · 3.18 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!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>
<link rel="stylesheet" href="./styles/style.css">
</head>
<body>
<header id="nav">
<div>
<img src="./images/spotify-logo.png" id="spotify-logo">
</div>
<nav>
<ul class="nav">
<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>
<!--Image background with Text-->
<div class="hero hero-image">
<h1>Music for everyone.</h1>
<p> Spotify is now free on mobile, tablet and computer. Listen to the
right music, wherever you are.</p>
</div>
<main>
<section>
<h2>What’s on Spotify?</h2>
<br>
<!--Features Container-->
<div class="grid-container">
<div class="grid-item">
<img src="./images/music-icon.png" alt="Music icon">
<h3>Millions of Songs</h3>
<br>
<span>There are millions of songs on Spotify</span>
</div>
<div class="grid-item">
<img src="./images/high-quality-icon.png" alt="Audiowave icon">
<h3>HD Music</h3>
<br>
<span>Listen to music as if you were listening live</span>
</div>
<div class="grid-item">
<img src="./images/devices-icon.png" alt="Devices icon">
<h3>Stream Everywhere</h3>
<br>
<span>Stream music on your smartphone , tablet or computer</span>
</div>
</div>
</section>
<!--Green Section-->
<section class="green-section bg-logo">
<div class="column">
<h2> It's as yeezy as Kanye West</h2>
<br>
<div class="align-items-around">
<div>
<h3>Search</h3>
<span>Know what you want to listen to?
Just search and hit play.</span>
</div>
<br>
<div>
<h3>Browse</h3>
<span>Check out the latest charts,
brand new releases and great
playlists for right now.</span>
</div>
<br>
<div>
<h3>Discover</h3>
<span>Enjoy new music every Monday
with your own personal playlist.
Or sit back and enjoy Radio.</span>
</div>
</div>
</div>
<div class="clearfix">
<img src="./images/spotify-app.jpg" alt="Spotify app screenshot" class="screenshot">
</div>
</div>
</section>
<!-- <p>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.</p> /* -->
</main>
</body>
</html>