-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
149 lines (136 loc) · 6.91 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
<!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">
<title>Pousada Secreta</title>
<!-- CSS -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<!-- Barra de navegação-->
<nav>
<p>Pousada <span>Secreta</span></p>
<ul>
<li><a href="#sobre">SOBRE</a></li>
<li><a href="#rota">ROTA</a></li>
<li><a href="#quartos">QUARTOS</a></li>
</ul>
</nav>
</header><!-- Fim barra de navegação-->
<main>
<article>
<!-- Banner-->
<img src="assets/img-fundo.jpg" alt="Imagem de uma ilha em Angra dos Reis">
<div class="texto-banner">
<h1>Pousada Secreta</h1><br>
<h2>A pousada reservada em Angra dos Reis</h2>
</div>
</article><!-- Fim banner-->
<section id="quartos">
<!-- Quartos-->
<h2>SEJA BEM-VINDO(A)</h2>
<p>Relaxe em nossas acomodações e curta o melhor de Angra dos Reis.</p><br>
<p>Temos quartos para solteiro, casal ou família.</p>
<div class="img-quarto">
<figure>
<img src="assets/quarto-solteiro3.jpg" alt="Imagem de uma quarto com duas camas de solteiro">
<figcaption>Quarto de Solteiro</figcaption>
<hr>
</figure>
<figure>
<img src="assets/quarto-casal1.jpg" alt="Imagem de um quarto com uma cama de casal">
<figcaption>Quarto de Casal</figcaption>
<hr>
</figure>
<figure>
<img src="assets/quarto-familia1.jpg"
alt="Imagem de um quarto com uma cama de casal e duas de solteiro">
<figcaption>Quarto Família</figcaption>
<hr>
</figure>
</div>
</section> <!-- Fim quartos-->
<section id="rota">
<!-- Rotas -->
<h2>ROTA</h2>
<p>Veja como chegar até a pousada</p>
<div style="width: 100%;position: relative;">
<iframe width="100%" height="400"
src="https://maps.google.com/maps?width=100%&height=400&hl=en&q=Av.%20Ayrton%20Senna%2C%20300%20-%20Barra%20da%20Tijuca%2C%20Rio%20de%20Janeiro+(T%C3%ADtulo)&ie=UTF8&t=&z=10&iwloc=B&output=embed"
frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
<div
style="position: absolute;width: 80%;bottom: 10px;left: 0;right: 0;margin-left: auto;margin-right: auto;color: #000;text-align: center;">
<small style="line-height: 1.8;font-size: 2px;background: #fff;">Powered by <a
href="http://www.googlemapsgenerator.com/en/">Googlemapsgenerator.com/en/</a> & <a
href="https://embedinstagramfeed.com">https://embedinstagramfeed.com</a></small></div>
<style>
#gmap_canvas img {
max-width: none !important;
background: none !important
}
</style>
</div><br />
</section><!-- Fim rotas -->
<section id="sobre">
<!-- Sobre-->
<h2>SOBRE A POUSADA!</h2>
<p>Conheça um pouco sobre nossa pousada.</p>
<div class="cards1">
<div class="card">
<img class="card-img" src="assets/img1.jpg" alt="Amplo espaço com uma linda piscina.">
<h4 class="card-title">A pousada</h4>
<p class="card-subtitle">A Pousada Dev dispõe de estacionamento privativo gratuito, piscina ao ar livre e bar.</p>
</div>
<div class="card">
<img class="card-img" src="assets/img2.jpg" alt="Quarto com uma cama de casal e uma de solteiro com uma TV.">
<h4 class="card-title">Nossos quartos</h4>
<p class="card-subtitle">
Os quartos possuem TV de tela plana a cabo, cozinha compactada e área para refeições.
Além disso, as unidades da Pousada Dev contam com ar-condicionado e guarda-roupa.
</p>
</div>
</div>
<div class="cards2">
<div class="card">
<img class="card-img" src="assets/img3.jpg" alt="Mesa com uma grande quantidade e variedade de comidas.>
<h4 class="card-title">Alimentação</h4>
<p class="card-subtitle">A Pousada serve café da manhã em estilo continental ou buffet. Nossos restaurantes funcionam 24hs.</p>
</div>
<div class="card">
<img class="card-img" src="assets/img5.jpg" alt="Frente da pousada com um gramado bem aparado e um caminho que leva até a entrada da pousada.">
<h4 class="card-title">Recepção</h4>
<p class="card-subtitle">Nossa recepção fica aberta 24hs.</p>
</div>
</div>
</section> <!-- Fim sobre-->
<footer> <!-- Footer -->
<div class="footer">
<div class="footer-principal">
<h3 class="title-footer">Entre em contato conosco:</h3>
<div class="footer-1">
<img class="img-footer" src="assets/icones/endereco.png" alt="Imagem de um ícone para informar o endereço">
<a href="https://goo.gl/maps/FGu7yy5NVBjsmTjW9" target="_blank">
<p>Endereço: Av. 123, 222 - Rio de Janeiro RJ</p>
</a>
</div>
<div class="footer-2">
<img class="img-footer" src="assets/icones/telefone.png" alt="Imagem de um ícone para informar o telefone">
<a href="tel:552100000000" target="_blank"><p>Cel: 5521 0000-0000</p></a>
</div>
<div class="footer-3">
<img class="img-footer" src="assets/icones/calendario.png" alt="Imagem de um ícone para informar o ao usuário para fazer uma reserva pelo site do Booking">
<a href="https://www.booking.com" target="_blank"><p>Faça sua reserva pelo Booking.com</p></a>
</div>
</div>
<hr>
</div>
<div class="copy">
<h5>© Copyright - PousadaDev - Desenvolvido por <span>Ramiro Alves</span></h5>
</div>
</footer> <!-- Fim footer -->
</main>
</body>
</html>