css_clone_practice/index.html at main · AbigailMRod/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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!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" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <title>Spotify Clone</title>
    <!-- don't forget to link your styles -->
    <link rel="stylesheet" href="./styles/style.css">
  </head>

  <body>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

    <header class=container-flex>

      <nav class=navbar>
        <div>
          <img src="./images/spotify-logo.png" alt="image spotify" >
        </div><!--img spoti-->
        <div>
          <ul class="nav justify-content-end">
            <li class="nav-item">
              Premium
            </li>
            <li class="nav-item">
              Discover
            </li>
            <li class="nav-item">
              Help
            </li>
            <li class="nav-item">
              Download
            </li>
          </ul><!--lista navbar-->
        </div><!--list navbar-->
        </nav><!--nav bar-->

        <section class="intro">
          <div class="text-s">
            <h1>
              Music for everyone
            </h1>
            <h5>
              Spotify is now free on mobile, tablet and computer.
            </h5>
            <h5>
              Listen to the right music, wherever you are.
            </h5>
          </div><!--text-->
        </section><!--intro-->

        <section class="whats">
          <div>
            <h2>
              What's on Spotify?
            </h2>
          </div>
          <div class="container">
            <div class="row">
              <div class="col-sm">
                <img src="./images/music-icon.png" alt="music icoon">
                <h5>
                  Millions of songs
                </h5>
                <p>
                  There are millions of songs on Spotify
                </p>
              </div><!--col 1-->
              <div class="col-sm">
                <img src="./images/high-quality-icon.png" alt="high quality icon">
                <h5>
                  HD music
                </h5>
                <p>
                  Listen to music as if you were listening live
                </p>
              </div><!--col 2-->
              <div class="col-sm">
                <img src="./images/devices-icon.png" alt="devices icon">
                <h5>
                  Stream Everywhere
                </h5>
                <p>
                  Stream music on your smartphone, tablet or computer
                </p>
              </div> <!--col 3-->
            </div><!--row-->
          </div> <!--container-->
        </section><!--what's on-->

        <section style="background-color: #00B172;">
          <div class="container">
            <div class="tit">
              It’s as yeezy as Kanye West.
            </div>
            <div class="row">
              <div class="col">
                <h2>
                  Search
                </h2>
                <p>
                  Know what you want to listen to?
                  Search  Just search and hit play.
                </p>
                <h2>
                  Browse
                </h2>
                <p>
                  Check out the latest charts, brand new releases and great playlists for right now
                </p>
                <h2>
                  Discover
                </h2>
                <p>
                  Enjoy new music every Monday with your own personal playlist. Or sit back and enjoy Radio.
                </p>
              </div><!--col 1-->
              <div class="col" id="icon">
                <img src="./images/spotify-icon-white.png" alt="spotify icon" width="70" height="70">
              </div> <!--col 2-->
              <div class="col" id="app">
                <img src="./images/spotify-app.jpg" alt="spotify app" width="250" height="410">
              </div> <!--col 3-->
            </div><!--rows-->
        </section><!--example-->
    </head><!--container -->
  </body>
</html>