-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
159 lines (155 loc) · 7.57 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
<!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 -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<!-- HTML5Shiv -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->
<!-- Estilo customizado -->
<link rel="stylesheet" type="text/css" href="css/estilo.css">
<title>Música para todos - Spotify</title>
<link rel="icon" href="imagens/favicon.png">
</head>
<body>
<header> <!-- Cabeçalho Topo -->
<nav class="navbar navbar-expand-md navbar-light fixed-top navbar-transparente"> <!-- Essa Classe serve para indicar uma barra de forma responsiva somente em dispositivos Median -->
<div class="container"> <!-- Começo de Container da Barra de navegação-->
<a href="index.html" class="navbar-brand"> <!-- Logo -->
<img src="imagens/spotify.svg" width="142"></a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#nav-principal"><i class="fas fa-bars text-white"></i></button>
<div class="collapse navbar-collapse" id="nav-principal">
<ul class="navbar-nav ml-auto"> <!-- ml-auto -> Margin Left -->
<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> <!-- Divisor-->
<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>
</div>
</div>
</nav> <!-- Fim Container da Barra de navegação--->
</header> <!-- Fim Topo -->
<section id="home" class="d-flex"> <!-- Começo de Sessão d-felx para fixar no centro colocando align-self-center no container -->
<div class="container align-self-center"> <!-- Container -->
<div class="row"> <!-- Row -->
<div class="col-md-12 capa"> <!-- Colunas - > 12 Colunas -->
<h1>Música para todos</h1>
<a href="" class="btn btn-success btn-lg btn-custom btn-pink">Seja Premium</a>
<a href="" class="btn btn-success btn-lg btn-custom btn-verde">Saiba Mais</a>
</div>
</div>
</div>
</section> <!-- Fim de Sessão -->
<section id="servicos"> <!-- Começo de conteúdo-->
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row albuns">
<div class="col-md-6">
<img src="imagens/img1.jpg" class="img-fluid d-none d-md-block">
</div>
<div class="col-md-6">
<img src="imagens/img2.jpg" class="img-fluid d-none d-md-block">
</div>
</div>
<div class="row albuns">
<div class="col-md-6">
<img src="imagens/img3.jpg" class="img-fluid d-none d-md-block">
</div>
<div class="col-md-6">
<img src="imagens/img4.jpg" class="img-fluid d-none d-md-block">
</div>
</div>
</div>
<div class="col-md-6">
<h2>O que o Spotify tem? </h2>
<h3>Músicas</h3>
<p> O Spotify é um serviço de streaming de áudio que permite ao usuário ouvir músicas, criar playlists, usar seleções de terceiros, ouvir podcasts, ver vídeos, descobrir novos estilos e artistas, tudo isso com planos gratuitos e de assinatura. </p>
<h3>Playlists</h3>
<p>O Spotify cria várias playlists só para você com base nos seus hábitos (o que você curte, compartilha, salva e até o que você pula) e nos hábitos de pessoas com gostos similares. </p>
<h3>Novos lançamentos</h3>
<p> O Spotify é o serviço de streaming de música mais atualizado do mundo, sempre indicamos músicas que achamos que você vai adorar através de seus gostos. </p>
</div>
</div>
</div>
</section>
<section id="recursos">
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>Fácil</h2>
<h3>Buscar</h3>
<p>Já sabe o que gostaria de escutar? É só produrar e apertar play! </p>
<h3>Navegar</h3>
<p>Veja os novos lançamentos, o que está bombando nas paradas e as melhores playlists para o seu momento</p>
<h3>Descobrir</h3>
<p>Curta músicas novas toda segunda-feira com uma playlist personalizada pra você. Ou relaxe e curta uma das rádios</p>
</div>
<div class="col-md-8">
<div class="row rotacionar">
<div class="col-md-6">
<img src="imagens/iphone1.png" class="img-fluid">
</div>
<div class="col-md-6">
<img src="imagens/iphone2.png" class="img-fluid">
</div>
</div>
</div>
</div>
</section>
<footer> <!-- Começo de Footer-->
<div class="container">
<div class="row">
<div class="col-md-2">
<img src="imagens/spotify.svg" width="142">
</div>
<div class="col-md-2">
<h4>Company</h4>
<ul class="navbar-nav">
<li><a href="">Sobre</a></li>
<li><a href="">Empregos</a></li>
<li><a href="">Imprensa</a></li>
<li><a href="">Novidades</a></li>
</ul>
</div>
<div class="col-md-2">
<h4>Comunidade</h4>
<ul class="navbar-nav">
<li><a href="">Artistas</a></li>
<li><a href="">Desenvolvedores</a></li>
<li><a href="">Marcas</a></li>
</ul>
</div>
<div class="col-md-2">
<h4>Links utéis</h4>
<ul class="navbar-nav">
<li><a href="">Ajuda</a></li>
<li><a href="">Presentes</a></li>
<li><a href="">Player</a></li>
</ul>
</div>
<div class="col-md-4">
<ul>
<li><a href=""><img src="imagens/facebook.png"></a></li>
<li><a href=""><img src="imagens/twitter.png"></a></li>
<li><a href=""><img src="imagens/instagram.png"></a></li>
</ul>
</div>
</div>
</div>
</footer> <!-- Fim de 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>