css_clone_practice/index.html at main · IsraelHV/css_clone_practice · 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
<!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 -->
    <link href="./styles/style.css" rel="stylesheet"/>
  </head>
  <body>

    <section class="cajaGrande1">

      <header class="header">
        <img src="./images/spotify-logo.png" atl="Icono Spotify"/>
        <nav class="header--menu">
            <ul>
                <li><a href="#"></a>Premium</li>
                <li><a href="#"></a>Discover</li>
                <li><a href="#"></a>Help</li>
                <li><a href="#"></a>Download</li>
            </ul>
        </nav>
      </header>

      <div class="Fondo">
        <img src="./images/landing.jpg" alt="Imagen de Fondo">

        <div class="texto1">
          <h1>Music for everyone.</h1>
          <br>
          <br>
          <h3>Spotify is now free on mobile, tablet and computer.</h3>
          <h3>Listen to the right music, wherever you are.</h3>
        </div>

      </div>

    </section>

    <section class=cajaGrande2>

      <h1 class="titulo">What’s on Spotify?</h1>

      <div class="contenedor">

        <div class="caja1">
          <img src="./images/music-icon.png" atl="Icono Music"/>
          <h1>Millions of Songs</h1>
          <br>
          <h3>There are millions of songs on Spotify</h3>
        </div>

        <div class="caja2">
          <img src="./images/high-quality-icon.png" atl="Icon Quality"/>
          <h1>HD Music</h1>
          <br>
          <h3>Listen to music as if you were listening live</h3>
        </div>

        <div class="caja3">
          <img src="./images/devices-icon.png" atl="Icon Devices"/>
          <h1>Stream Everywhere</h1>
          <br>
          <h3>Stream music on your smartphone, tablet or computer</h3>
        </div>

      </div>

    </section>

    <section class="cajaGrande3">

      <div class="Text-1">
        <h1 class="titulo">It’s as yeezy as Kanye West.</h1>
        <br>
        <h1>Search</h1>
        <br>
        <h3>Know what you want to listen to?</h3>
        <h3>Just search and hit play.</h3>

        <br>
        <h1>Browse</h1>
        <br>
        <h3>Check out the latest charts,</h3>
        <h3>brand new releases and great
        <h3>playlists for right now.</h3>

        <br>
        <h1>Discover</h1>
        <h3>Enjoy new music every Monday</h3>
        <h3>with your own personal playlist. </h3>
        <h3>Or sit back and enjoy Radio.</h3>
      </div>

      <div class="img-1">
        <img src="./images/spotify-icon-white.png" atl="Icon Spotify White"/>
      </div>

      <div class="img-2">
        <img src="./images/spotify-app.jpg" atl="Spoty App"/>
      </div>

    </section>

  </body>
</html>