-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
245 lines (238 loc) · 16.2 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
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
<!DOCTYPE html>
<html lang="pt-br">
<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="./assets/css/style.css">
<link rel="stylesheet" href="./assets/css/mq.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&display=swap" rel="stylesheet">
<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=Playfair+Display:wght@500;600;700&display=swap" rel="stylesheet">
<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=Titillium+Web&display=swap" rel="stylesheet">
<title>Vison Motel</title>
</head>
<body>
<header>
<div class="container-slider"><a name = "home"></a>
<div class="slider">
<div class="frame-2">
<div class="titulo">
<h3 id="titulo-1">Bem vindo ao</h3>
<h1 id="titulo-2">Vison Motel</h1>
</div>
<div class="acoes">
<button class="btn-acao"><a href="#suites">Ver suítes</a></button>
<button class="btn-acao"><a href="#contatos">Reservas</a></button>
</div>
</div>
</div>
<div class="menu">
<nav class="navbar navbar-expand-lg sticky-bottom navbar-dark bg-transparent p-0 dropup-center dropup container-nav">
<div class="container-fluid bg-nav " >
<a class="navbar-brand logo" href="#">
<img src="./assets/img/Motel.svg" alt="Logo" >
<img src="./assets/img/Vison.svg" alt="Logo" >
</a>
<button class="btn-acao" id="btn-acao" type="submit"><a href="#contatos" id="reservas">Reservas</a></button>
<button class="navbar-toggler shadow-none border border-0" type="button" data-bs-toggle="dropdown" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon border-0 "></span>
</button>
<div class="collapse navbar-collapse p-2 dropdown-menu" id="navbarNavAltMarkup">
<div class="navbar-nav nav-collapse">
<a class="nav-link p-2 active" aria-current="page" href="#home">Inicio</a>
<a class="nav-link p-2 " href="#home">Status</a>
<a class="nav-link p-2" href="#motel">O Motel</a>
<a class="nav-link p-2" href="#cortesias">Cortesias</a>
<a class="nav-link p-2" href="#localizacao">Localização</a>
<a class="nav-link p-2" href="#contatos">Contato</a>
</div>
</div>
</nav>
</div>
</div>
</header>
<main>
<section class="suites" id="suites">
<div class="container-titulo-suites">
<h1>Nossas suítes<a name = "suites"></a></h1>
</div>
<div id="carouselExampleAutoplaying" class="carousel slide box-carousel box-carousel-mq" data-interval="3000" data-bs-ride="true" height ="440px">
<div class="carousel-inner img-carousel">
<figure class="carousel-item active">
<img src="./assets/img/image 1.svg" class="d-block w-100 imagem-carrossel-um" alt="Suite 1">
</figure>
<figure class="carousel-item">
<img src="./assets/img/image 1.svg" class="d-block w-100 imagem-carrossel-um" alt="Suite 2">
</figure>
</div>
<button class="carousel-control-prev d-flex justify-content-start" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="prev">
<span class="carousel-control seta-e" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next d-flex justify-content-end" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="next">
<span class="carousel-control seta-d" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<div class="img-suites-mq">
<div class="carousel-mq">
<img src="./assets/img/image 2.svg" id= "suite2" alt="Suite 2">
<div class="suite1">
<figure class="img-suite1">
<img src="./assets/img/image 1_d.svg" id= "suite1" alt="Suite 1">
</figure>
<div class="botao-seta">
<button class="carousel-control-prev d-flex justify-content-between" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="prev">
<span class="carousel-control seta-e" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next d-flex justify-content-end" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="next">
<span class="carousel-control seta-d" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<img src="./assets/img/image 3.svg" id= "suite3" alt="Suite 3">
</div>
</div>
<div class="card border-0 rounded-0 card-box" style=" color: #2A2A2A; height: 100px">
<div class="card-body text-center box ">
<div>
<h5 class="card-title pt-3 suite-cristal">Suíte Cristal</h5>
<p class="card-text suite-cristal-texto">A partir de R$164,00</p>
</div>
<div>
<a href="mailto:contato@motelvison.com?subject=Mais Informações sobre o Motel Vison&body=Olá! Gostaria de mais informações sobre XXXX " target="_blank" class="btn btn-primary border-0 rounded-0 px-3 py-2 saiba-mais"><small>Saiba mais</small></a>
</div>
</div>
</div>
<div class="hyperlink">
<a id= "hyperlink" href="#suites">Ver todas as suítes</a>
</div>
</section>
<section class="o-motel"><a name = "motel"></a>
<div class="motel">
<div class="container-img">
<img src="./assets/img/o-motel-m.svg" id="container-img" ></img>
</div>
<div class="card border-0 rounded-0 container-texto " style=" color: #2A2A2A">
<div class="card-body box-1 ">
<h5 class="card-title pt-3 titulo-motel">O Motel</h5>
<p class="card-text suite-cristal-texto">O Vison Motel está localizado na Zona Industrial Norte, em Joinville e conta com ambientes exclusivos e privativos, basta escolher a suíte que mais combina com você.
<br><br>Todos os quartos são equipados com TV, ar-condicionado, ducha, frigobar e garagem privativa. Enquanto outras opções, vão além: oferecem hidromassagem, pole dance, x sado e no caso da Suíte Erótika, até mesmo uma jaula ao redor da cama.
<br><br>Hospede-se e aproveite ainda nosso delicioso café da manhã, servido todos os dias para pernoites!</p>
<a href="mailto:contato@motelvison.com?subject=Mais Informações sobre o Motel Vison&body=Olá! Gostaria de mais informações sobre XXXX " target="_blank" class="btn btn-primary border-0 rounded-0 px-4 py-3 saiba-mais" id= "botaoSaibaMais">Saiba mais</a>
</div>
</div>
</div>
</section>
<section class="cortesia">
<div class="container-fluid cortesias "><a name = "cortesias"></a>
<div class="container-titulo">
<h1 class="titulo-cortesia">Cortesias</h1>
</div>
<div class="row justify-content-center p-4 box-cortesias">
<article class="card border-0 rounded-0 card-largura p-0 mt-3 col-12 col-md-3"><a name = "gastronomia"></a>
<img src="./assets/img/imgCard1.svg" class="card-img-top card-posicao-imagem border-0 rounded-0" alt="Café da manhã">
<div class="card-body card-altura border-0 rounded-0 p-4">
<h5 class="card-title text-center titulo-card "><b> Café da Manhã</b></h5>
<p class="card-text texto-card">Servido todos os dias entre 6h e 10h, somente para o pernoite.</p>
</div>
</article>
<article class="card border-0 rounded-0 card-largura p-0 mt-3 col-12 col-md-3">
<img src="./assets/img/imgCard2.svg" class="card-img-top card-posicao-imagem border-0 rounded-0" alt="Balões de festa">
<div class="card-body card-altura border-0 rounded-0 p-4" id= "card-2">
<h5 class="card-title text-center titulo-card "><b>Especial para Aniversariantes</b></h5>
<p class="card-text texto-card">A equipe do Vison Motel quer tornar o seu aniversário ainda mais especial!</p>
</div>
</article>
<article class="card border-0 rounded-0 card-largura p-0 mt-3 col-12 col-md-3">
<img src="./assets/img/imgCard3.svg" class="card-img-top card-posicao-imagem border-0 rounded-0" alt="Casal na cama">
<div class="card-body card-altura border-0 rounded-0 p-4">
<h5 class="card-title text-center titulo-card"><b>Descontos</b></h5>
<p class="card-text texto-card">Economize se hospedando com desconto no Motel Vison!</p>
</div>
</article>
</div>
<div class="hyperlink-cortesia" id="cortesia">
<a id= "cortesia" href="#cortesias">Ver todas as cortesias</a>
</div>
</div>
</section>
<section class="Mapa-Localizacao">
<div class="card d-flex align-items-center border-0 rounded-0 text-center bg-card " ><a name = "localizacao"></a>
<div class="row g-0 m-4 p-0 d-flex align-items-center card-localizacao" >
<div class="col-md-6 col-xxl-6 p-0 border-0 rounded-0 card-img-localizacao">
<img src="/assets/img/mapa-m.svg" class="img-fluid rounded-start card-posicao-imagem-m" alt="Mapa de Localização">
<img src="/assets/img/mapa-d.svg" class="img-fluid rounded-start card-posicao-imagem-d" alt="Mapa de Localização">
</div>
<div class="col-md-6 col-xxl-6 ">
<div class="card-body p-4 ">
<h1 class="card-title text-center titulo-localizacao"><b>Localização</b></h1>
<p class="card-text texto-localizacao" >Avenida Santos Dumont, 5253<br>Zona Industrial Norte - Joinville - SC</p>
<a href="https://www.google.com.br/maps/dir//Av.+Santos+Dumont,+5253+-+Distrito+Industrial,+Joinville+-+SC,+89219-730/@-26.2366155,-48.8252422,17z/data=!4m8!4m7!1m0!1m5!1m1!1s0x94deae58cfe71ce9:0xfb3e6a8cedd328d4!2m2!1d-48.8252422!2d-26.2366155?hl=pt-BR"
class="btn btn-primary border-0 rounded-0 py-3 px-4 btn-rota" target="_blank"><small>Traçar rota</small></a>
</div>
</div>
</div>
</div>
</section>
</main>
<footer><a name = "contatos"></a>
<div class="contato-m ">
<article class="card bg-transparent border-0 rounded-0 text-center card-contato" >
<figure class="img-logo">
<img src="./assets/img/Motel.svg" class="card-img-top" alt="Logo">
<img src="./assets/img/Vison.svg" class="card-img-top" alt="Logo">
</figure>
<span id="traco"><img src="./assets/img/Rectangle 4.svg" alt=""></span>
<div class="card-body pt-4 px-0 box-contato ">
<a href="#contatos" class="btn btn-primary border rounded-0 py-3 px-4 btn-contato">Reservas</a>
<a href="#suites" class="btn btn-primary border rounded-0 py-3 px-4 btn-contato">Ver suítes</a>
<a href="https://web.whatsapp.com/send?phone=556135522297" class="btn btn-primary border rounded-0 py-3 px-4 btn-contato">Whatsapp</a>
<a href="mailto:contato@motelvison.com?subject=Mais Informações sobre o Motel Vison&body=Olá! Gostaria de mais informações sobre XXXX " target="_blank" class="btn btn-primary border rounded-0 py-3 px-4 btn-contato">Contato</a>
</div>
</article>
</div>
<div class="contato-d ">
<figure class="img-logo-d">
<img src="./assets/img/Motel.svg" class="card-img-top-d" alt="Logo">
<img src="./assets/img/Vison.svg" class="card-img-top-d" alt="Logo">
<p class="endereco"><small>SPMS, Conj./Lote 175/225 - Núcleo Bandeirante - Brasília - DF</small></p>
</figure>
<div class="lista">
<ul class="lista-menu">
<p><small><a href="#home">Início</a></small></p>
<p><small><a href="#suites">Suites</a></small></p>
<p><small><a href="#motel">O Motel</a></small></p>
</ul>
</div>
<div class="lista">
<ul class="lista-menu">
<p><small><a href="#gastronomia">Gastronomia</a></small></p>
<p><small><a href="#localizacao">Localização</a></small></p>
<p><small><a href="#contatos">Reservas</a></small></p>
</ul>
</div>
<div class="lista">
<ul class="lista-contato">
<p id="texto-especial"><a href="https://web.whatsapp.com/send?phone=556135522297" target="_blank"><small>Whatsapp</small></a></p>
<p><a href="https://web.whatsapp.com/send?phone=556135522297" target="_blank"><small>(061) 3552-2297</a></small></p>
<p id="texto-especial"><a href="mailto:contato@motelvison.com?subject=Mais Informações sobre o Motel Vison&body=Olá! Gostaria de mais informações sobre XXXX " target="_blank" ><small>E-mail</small></a></p>
<p><a href="mailto:contato@motelvison.com?subject=Mais Informações sobre o Motel Vison&body=Olá! Gostaria de mais informações sobre XXXX " target="_blank"><small>contato@motelvison.com</small></a></p>
</ul>
</div>
</div>
</footer>
<p id="copyright">guia de motéis sites │ guia de motéis © </p>
</body>
</html>