-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
163 lines (151 loc) · 7.55 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
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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!DOCTYPE html>
<html lang="pt-br">
<head>
<!-- Meta tags Obrigatórias -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!--Font awesome-->
<script src="https://kit.fontawesome.com/84fec5590e.js" crossorigin="anonymous"></script>
<!--Estilo css-->
<link rel="stylesheet" href="css/estilo.css">
<title>Spotify</title>
<link rel="shortcut icon" href="img/favicon.png">
</head>
<body>
<header><!--Inicio do cabeçalho-->
<nav class="navbar navbar-expand-md navbar-light fixed-top ">
<section class="container">
<a href="index.html" class="navbar-brand"><img src="img/spotify.svg" width="142" class="" alt=""></a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#nav-principal"><i class="fa-solid fa-bars text-white"></i></button>
<section class="collapse navbar-collapse" id="nav-principal">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a href="" class="nav-link">Premium</a></li>
<li class="nav-item"><a href="" class="nav-link">Ajuda</a></li>
<li class="nav-item"><a href="" class="nav-link">Baixar</a></li>
<li class="nav-item divisor"></li>
<li class="nav-item"><a href="" class="nav-link">Inscrever-se</a></li>
<li class="nav-item"><a href="" class="nav-link">Entrar</a></li>
</ul>
</section>
</section>
</nav>
</header><!--fim do cabeçalho-->
<article id="home" class="d-flex"><!--Home-->
<section class="container align-self-center"><!--Container-->
<section class="row">
<section class="col-md-12 capa">
<h1>Música para todos</h1>
<a href="" class="btn btn-lg custom roxo">Aproveite o Spotify Free</a>
<a href="" class="btn btn-lg custom branco">Obter o spotify premium</a>
</section>
</section>
</section><!--Fim do Container-->
</article><!--Fim do Home-->
<article id="servicos"><!--Serviços-->
<section class="container">
<section class="row">
<section class="col-md-6">
<section class="row albuns">
<section class="col-md-6">
<img src="img/img1.jpg" class="img-fluid d-none d-md-block" alt="">
</section>
<section class="col-md-6">
<img src="img/img2.jpg" class="img-fluid d-none d-md-block" alt="">
</section>
</section>
<section class="row albuns">
<section class="col-md-6">
<img src="img/img3.jpg" class="img-fluid d-none d-md-block" alt="">
</section>
<section class="col-md-6">
<img src="img/img4.jpg" class="img-fluid d-none d-md-block" alt="">
</section>
</section>
</section>
<section class="col-md-6">
<h2>Oque o spotify tem ?</h2>
<h3>Músicas</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit perferendis beatae obcaecati debitis labore aliquam, veritatis ipsam accusamus minus ullam explicabo dignissimos quisquam vel quasi praesentium amet, aspernatur nemo omnis?</p>
<h3>Playlists</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro optio, sequi nemo, accusantium alias tempore voluptatem natus mollitia quod, quaerat commodi earum quos ab at dolorem laborum ipsum magni eos.</p>
<h3>Novos lançamentos</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque, rerum? Expedita, quo vero? A ea doloribus ex fugiat, officia, ipsum magnam amet reiciendis rem quo unde laboriosam natus hic suscipit!</p>
</section>
</section>
</section>
</article><!--Fim de serviços-->
<article id="recursos"><!--Recursos-->
<section class="container">
<section class="row">
<section class="col-md-4">
<h2>Fácil</h2>
<h3>Buscar</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, iste suscipit voluptate, similique odio quo harum numquam laboriosam molestiae accusantium totam, velit adipisci. Totam</p>
<h3>Navegar</h3>
<p>Lorem ipsum dolor sit atot repellendus sequi eius ipsam corrupti commodi! Quae excepturi officia facilis!</p>
<h3>Descobrir</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem tenetur ratione optio possimus fugiat dolore quaerat reiciendis. Dolore</p>
</section>
<section class="col-md-8">
<section class="row rota">
<section class="col-md-6">
<img src="img/iphone1.png" class="img-fluid d-none d-md-block" alt="">
</section>
<section class="col-md-6">
<img src="img/iphone2.png" class="img-fluid d-none d-md-block" alt="">
</section>
</section>
</section>
</section>
</section>
</article><!--Fim do recurso-->
<footer>
<section class="container">
<section class="row">
<section class="col-md-2">
<img src="img/spotify.svg" width="142" alt="">
</section>
<section class="col-md-2">
<h4>Company</h4>
<ul class="navbar-nav">
<li><a href="">Sobre</a></li>
<li><a href="">Emprensa</a></li>
<li><a href="">Empregos</a></li>
<li><a href="">Novidades</a></li>
</ul>
</section>
<section class="col-md-2">
<h4>Comunidades</h4>
<ul class="navbar-nav">
<li><a href="">Sobre</a></li>
<li><a href="">Emprensa</a></li>
<li><a href="">Empregos</a></li>
</ul>
</section>
<section class="col-md-2">
<h4>Links úteis</h4>
<ul class="navbar-nav">
<li><a href="">Sobre</a></li>
<li><a href="">Emprensa</a></li>
<li><a href="">Empregos</a></li>
</ul>
</section>
<section class="col-md-4">
<ul>
<li><a href=""><img src="img/facebook.png" alt=""></a></li>
<li><a href=""><img src="img/instagram.png" alt=""></a></li>
<li><a href=""><img src="img/twitter.png" alt=""></a></li>
</ul>
</section>
</section>
</section>
</footer>
<!-- JavaScript (Opcional) -->
<!-- jQuery primeiro, depois Popper.js, depois Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>