-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
219 lines (206 loc) · 11.5 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
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/media-query.css"/>
<script src="https://kit.fontawesome.com/35178af9c4.js" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300;400&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<title>Document</title>
</head>
<body>
<header class="userMenu">
<div id="logo"><img src="img/logo.png" width="148px"></div>
<ul id="desktop">
<li><i class="fa-solid fa-passport"></i><p>Passaporte</p></li>
<li><i class="fa-solid fa-user"></i><p>Iniciar Sessão</p></li>
<li><i class="fa-solid fa-plane-departure"></i><p>Minhas Viagens</p></li>
<li><i class="fa-solid fa-circle-info"></i><p>Ajuda</p></li>
</ul>
<nav class="mobile right">
<div class="botao-menu-mobile">
<i class="fas fa-bars"></i>
</div><!--botao-menu-mobile-->
<ul>
<li><a href="">Passaporte</a></li>
<li><a href="">Iniciar Sessão</a></li>
<li><a href="">Minhas Viagens</a></li>
<li><a href="">Ajuda</a></li>
</ul>
</nav>
<div class="clear"></div>
</header>
<header class="navigation">
<nav>
<ul>
<li><i class="fa-solid fa-bed"></i><p>Hospedagens</p></li>
<li><i class="fa-solid fa-person-walking-luggage"></i><p>Passagens</p></li>
<li><i class="fa-solid fa-suitcase"></i><p>Pacotes</p></li>
<li><i class="fa-brands fa-gripfire"></i><p>Ofertas</p></li>
<li><i class="fa-solid fa-ticket"></i><p>Passeios</p></li>
<li><i class="fa-solid fa-shield-heart"></i><p>Seguros</p></li>
</ul>
</nav>
</header>
<div class="box-search-ticket" style="background-image: url(img/background.png);">
<div class="inside-box">
<div class="ticket-type">
<h1>Passagens aéreas</h1>
<label class="check">
<input type="checkbox">Ida e volta</input>
<span></span>
</label>
<label class="check">
<input type="checkbox" id="ida" value="ativo">Ida</input>
<span></span>
</label>
</div>
<div class="info-passagem">
<div>
<h5>Escolha a cidade de origem</h5>
<select name="CidadeOrigem" id="">
<option value="saoPaulo">São Paulo</option>
<option value="patoBranco">Pato Branco</option>
<option value="rioDeJaneiro">Rio de Janeiro</option>
<option value="curitiba">Curitiba</option>
</select>
</div>
<div>
<h5>Escolha a cidade de destino</h5>
<select name="CidadeDestino" id="">
<option value="saoPaulo">São Paulo</option>
<option value="patoBranco">Pato Branco</option>
<option value="rioDeJaneiro">Rio de Janeiro</option>
<option value="curitiba">Curitiba</option>
</select>
</div>
<div>
<h5 class="ida">Escolha a data de ida</h5>
<input type="date" class="ida">
<h5 class="volta">Escolha a data de volta</h5>
<input type="date" class="volta">
</div>
<div>
<h5>Passageiros e classe</h5>
<Select>
<optgroup label="Economica">
<option value="">1 passagem economica</option>
<option value="">2 passagens economica</option>
<option value="">3 passagens economica</option>
</optgroup>
<optgroup label="Primeira classe">
<option value="">1 passagem primeira classe</option>
<option value="">2 passagens primeira classe</option>
<option value="">3 passagens primeira classe</option>
</optgroup>
</Select>
</div>
<div>
<button>Buscar</button>
</div>
</div>
</div>
</div>
<div class="slide">
<h2>Top destinos mais buscados hoje no Brasil</h2>
<div id="container">
<img src="img/curitiba.jpg" class="ativa">
<img src="img/patobranco.jpg">
<img src="img/riodejaneiro.jpg">
</div>
<div id="container2">
<h2>Ofertas que não podem esperar</h2>
<div><p>Se você ainda não definiu o seu destino, talvez te interesse ver a nossa seção de ofertas.</p><button>Ver mais</button></div>
<img src="img/mulherComNot.jpg">
</div>
</div>
<section class="ofertas">
<div class="banner-de-ofertas">
<img src="img/bannercenter.png" height="250px">
<img src="img/bannerRight.png" height="250px">
<img src="img/bannerleft.png" height="250px">
</div>
</section>
<section class="copa-do-mundo">
<div class="box">
<img src="img/promoCopa.png" width="200px">
<div class="info">
<h1>Com o Cartão Decolar Santander Visa <br>
<span style="color: red;"> você concorre a 600mil pontos toda <br> semana.</span></h1><br>
<h3>Veja a <span style="color: black;"> Copa do Mundo FIFA 2022ᵀᴹ</span> de onde quiser.</h3><br><br>
<div class="benefits">
<p>
<i class="fa-solid fa-earth-americas fa-2x"></i><br>
Você ganha pontos <br> Passaporte Decolar por todas <br> as suas compras.</p>
<p>
<i class="fa-regular fa-clock fa-2x"></i><br>
6x mais chances de ganhar <br> com o Cartão Decolar <br> Santander Visa.</p>
<p>
<i class="fa-solid fa-plane-departure fa-2x"></i><br>
e continue acumulando as <br> milhas das companhias <br> aéreas.</p>
</div>
<button>Peça já o seu!</button>
</div>
<p style="font-size: 10px; padding: 10px; text-align: center;">Consulte condições, períodos de participação, descrição dos Prêmios e limites de despesas dos pacotes, no Regulamento. Para mais informações, dúvidas ou consultar certificado SEAE/ME, acesse o Regulamento em visa.com.br/decoleparaocatar.</p>
</div>
</section>
<section class="receberOfertas">
<h2>Receba ofertas dos melhores destinos</h2>
<div>
<img src="img/baixarApp.png" width="45%" alt="">
<img src="img/inscrever.png" width="45%" alt="">
</div>
</section>
<div style="width: 100%; background-color: #eeeeee;"><h2 style="text-align: center; margin-top: 5%;">Compre tudo para a sua viagem na Decolar</h2></div>
<section class="infos-uteis">
<div>
<h3>Como comprar na Decolar?</h3>
<p>
Na Decolar você pode comprar tudo o que precisa para as suas férias. Primeiro, insira a informação da sua viagem no buscador. Compare entre centenas de opções e escolha a que melhor se adapta aos seus planos, clicando em Comprar. Cadastre os dados dos passageiros, selecione o meio de pagamento e insira demais informações necessárias. Aproveite as ofertas e promoções da Decolar! Por último, clique novamente em Comprar e receba os vouchers no seu e-mail para começar a desfrutar da sua viagem.
</p>
</div>
<div>
<h3>Documentação necessária para comprar e viajar</h3>
<p>
Para comprar a sua viagem na Decolar, você deve ter os números dos documentos de identidade, os nomes, os sobrenomes e as datas de nascimento dos passageiros. Antes de viajar, revise o detalhe da sua reserva em Minha Conta e saiba quais são os vistos e vacinas obrigatórios no país de destino. Isso inclui as escalas nas viagens de avião e os tours que você realizar durante a sua viagem. Se uma criança precisar viajar sozinha ou acompanhada, deverá contar com uma autorização especial para sair do país.
</p>
</div>
<div>
<h3>É possível alterar ou cancelar uma compra?</h3>
<p>
Na Decolar você pode fazer a alteração ou o cancelamento de uma reserva, mas leve em consideração que alguns provedores ou tarifas não permitem ou cobram um custo adicional para isso. Em voos, hotéis e carros, você só pode fazer alterações no mesmo provedor. Você também pode cancelar uma reserva para todos ou para alguns dos passageiros. O que você não pode fazer é alterar o titular da reserva. Lembre-se de revisar as políticas de alteração e cancelamento da sua reserva em Minha Conta.
</p>
</div>
<div>
<h3>Por que devo escolher a Decolar para a minha viagem?</h3>
<p>
A Decolar é uma das agências de viagens online com maior trajetória na América Latina e recomendada por milhares de viajantes. Aproveite as ofertas e promoções no nosso site e conheça o mundo todo. Compre sua viagem na Decolar através da web ou da app. Se você tem alguma dúvida ou quer mudar algo sobre a sua viagem, você pode fazê-lo em Minhas Viagens. Viaje com a confiança de que você pode contar conosco para o que precisar.
</p>
</div>
</section>
<footer>
<div class="inscreva-se">
<div id="ins" style="width: 20%;">
<img src="img/envelope.png" alt="">
</div>
<div style="width: 30%;">
<p>
<h3>Inscreva-se para receber ofertas exclusivas</h3><br>
Receba em primeira mão nossas ofertas e benefícios exclusivos.
</p>
</div>
<div style="width: 40%;">
<input type="email" name="email" id="email" size="45px" placeholder="Insira seu email">
<input type="submit" value="Quero recebê-las"/>
</div>
</div>
<div style="text-align: center; width: 100%; height: 90px; background-color: #eeeeee; padding: 30px;"><h4>Feito com ❤ por Willian P. Chagas</h4></div>
</footer>
<script src="js/script.js"></script>
</body>
</html>