lab-css-spotify-clone/index.html at master · Karthik7123/lab-css-spotify-clone · GitHub

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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!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>
      <img
        class="logo-spotify"
        src="images/spotify-logo.png"
        alt="logo-spotify"
      />
      <nav>
        <a href="#">Premium</a>
        <a href="#">Discover</a>
        <a href="#">Help</a>
        <a href="#">Download</a>
      </nav>
    </header>
    <div class="start">
      <h1 class="start-texts-Music">Music for everyone.</h1>
      <p class="start-texts-Para">
        Spotify is now free on mobile, tablet and computer.
      </p>
      <p class="start-texts-Para">
        Listen to the right music, wherever you are.
      </p>
    </div>
    <h2>What’s on Spotify?</h2>
    <div class="ads">
      <div class="ads-block">
        <img src="images/music-icon.png" alt="" height="auto" width="150px" />
        <p class="ads-text">Millions of Songs</p>
        <p class="ads-desc">There are millions of songs on Spotify</p>
      </div>
      <div class="ads-block">
        <img
          src="images/high-quality-icon.png"
          alt=""
          height="auto"
          width="150px"
        />
        <p class="ads-text">HD Music</p>
        <p class="ads-desc">Listen to music as if you were listening live</p>
      </div>
      <div class="ads-block">
        <img src="images/devices-icon.png" alt="" height="auto" width="150px" />
        <p class="ads-text">Stream Everywhere</p>
        <p class="ads-desc">
          Stream music on your smartphone, tablet or computer
        </p>
      </div>
    </div>
    <div class="bottom">
      <h3>It’s as yeezy as Kanye West.</h3>
      <div class="bottom-search">
        <div class="bottom-search">
          <div class="title-search">search</div>
          <p class="desc-search">
            Know what you want to listen to? <br />
            Just search and hit play.
          </p>
        </div>
        <div class="bottom-search">
          <div class="title-search">Browse</div>
          <p class="desc-search">
            Check out the latest charts, <br />
            brand new releases and great <br />
            playlists for right now.
          </p>
        </div>
        <div class="bottom-search">
          <div class="title-search">Discover</div>
          <p class="desc-search">
            Enjoy new music every Monday <br />
            with your own personal playlist. <br />
            Or sit back and enjoy Radio.
          </p>
        </div>
      </div>
      <div class="center-bottom">
        <div class="middle">
          <img
            class="icon-white"
            src="images/spotify-icon-white.png"
            alt=""
            height="auto"
            width="100px"
          />
        </div>
      </div>
      <div class="app">
        <img
          class="app-pic"
          src="images/spotify-app.jpg"
          alt=""
          width="auto"
          height="700px"
        />
      </div>
    </div>
    <!-- <p>
      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.
    </p> -->
  </body>
</html>