-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
136 lines (127 loc) · 3.84 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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flex Turismos</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<header>
<div class="flex-container menu">
<div>
<h1>FlexTurismos</h1>
</div>
<ul class="list-items">
<li><a href="https://www.linkedin.com/in/codebuenozy">Quem Somos</a></li>
<li><a href="#servicos">Serviços</a></li>
<li><a href="#planos">Planos</a></li>
</ul>
</div>
</header>
<div class="flex-container apresentacao">
<div class="texto-apresentacao">
<h1>Flex <br />Turismos</h1>
<p>O melhor serviço para você!</p>
<a href="#" class="btn">Saiba Mais!</a>
</div>
<div>
<div>
<img src="./images/0-main.png" alt="banner de apresentação" />
</div>
</div>
</div>
<div class="flex-container" id="quem-somos">
<div>
<h2>Quem somos</h2>
<p>
It is a long established fact that a reader will be distracted by the
readable content of a page when looking at its layout.
</p>
<p>
The point of using Lorem Ipsum is that it has a more-or-less normal
distribution of letters, as opposed to using 'Content here, content
here', making it look like readable English.
</p>
</div>
<div>
<img src="./images/1-quem-somos.png" alt="balcão de atendimento" />
</div>
</div>
<div class="container-externo">
<div class="flex-container" id="servicos">
<div>
<h2>Serviços</h2>
</div>
<div class="list-servicos">
<div class="item-servicos">
<div><img src="./images/icon-2.png" alt="hospedagens" /></div>
<p>Hospedagens</p>
<a href="#">Comprar Agora</a>
</div>
<div class="item-servicos">
<div><img src="./images/icon-1.png" alt="pacote de viagens" /></div>
<p>Pacotes de viagens</p>
<a href="#">Comprar Agora</a>
</div>
<div class="item-servicos">
<div>
<img src="./images/icon-3.png" alt="roteiros personalizados" />
</div>
<p>Roteiros personalizados</p>
<a href="#">Comprar Agora</a>
</div>
</div>
</div>
</div>
<div class="flex-container" id="planos">
<div><h2>Planos</h2></div>
<div class="list-planos">
<div class="item-plano">
<h3>Plano 1</h3>
<ul>
<li>Suporte 24h</li>
<li>Serviços de quarto</li>
<li>Guia turístico</li>
</ul>
<a href="#" class="btn">Saiba Mais!</a>
</div>
<div class="item-plano">
<h3>Plano 2</h3>
<br />
<ul>
<li>Suporte 24h</li>
<li>Serviços de quarto</li>
<li>Guia turístico</li>
<li>Roteiro de trilhas</li>
</ul>
<a href="#" class="btn">Saiba Mais!</a>
</div>
<div class="item-plano">
<h3>Plano 3</h3>
<br />
<ul>
<li>Suporte 24h</li>
<li>Serviços de quarto</li>
<li>Guia turístico</li>
<li>Roteiro de trilhas</li>
<li>Serviço personalizado</li>
<li>Área Vip</li>
</ul>
<a href="#" class="btn">Saiba Mais!</a>
</div>
</div>
</div>
<footer>
<div class="flex-container footer">
<p>© 2022 CSS Flexbox</p>
<p>
Desenvolvido por:
<a href="https://www.linkedin.com/in/codebuenozy">
Fernando Bueno</a
>
</p>
</div>
</footer>
</body>
</html>