-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
263 lines (218 loc) · 12.3 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
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>LOCALIZA AÍ - ALUGUEL DE AUTOMOVEIS</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="Free HTML Templates" name="keywords">
<meta content="Free HTML Templates" name="description">
<!-- Favicon -->
<link href="img/favicon.ico" rel="icon">
<!-- Google Web Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Rubik&display=swap" rel="stylesheet">
<!-- Font Awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/all.min.css" rel="stylesheet">
<!-- Libraries Stylesheet -->
<link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
<link href="lib/tempusdominus/css/tempusdominus-bootstrap-4.min.css" rel="stylesheet" />
<!-- Customized Bootstrap Stylesheet -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Template Stylesheet -->
<link href="css/style.css" rel="stylesheet">
</head>
<body
<!-- Navbar Start -->
<div class="container-fluid position-relative nav-bar p-0">
<div class="position-relative px-lg-5" style="z-index: 9;">
<nav class="navbar navbar-expand-lg bg-secondary navbar-dark py-3 py-lg-0 pl-3 pl-lg-5">
<a href="" class="navbar-brand">
<h1 class="text-uppercase text-primary mb-1">Localiza aí</h1>
</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-between px-3" id="navbarCollapse">
<div class="navbar-nav ml-auto py-0">
<a href="index.html" class="nav-item nav-link active">Início</a>
<a href="contact.html" class="nav-item nav-link">Contato</a>
<a href="login.html" class="nav-item nav-link">Entrar/Cadastra-se</a>
</div>
</div>
</nav>
</div>
</div>
<!-- Navbar End -->
<!-- Search Start -->
<div class="container-fluid bg-white pt-3 px-lg-5">
<div class="row mx-n2">
<div class="col-xl-2 col-lg-4 col-md-6 px-2 al">
Selecione sua cidade
<select class="custom-select px-4 mb-3" style="height: 50px;">
<option selected>Clique aqui</option>
<option value="1">Imperatriz</option>
</select>
</div>
<div class="col-xl-2 col-lg-4 col-md-6 px-2">
Local da retirada
<select class="custom-select px-4 mb-3" style="height: 50px;">
<option selected>Clique aqui</option>
<option value="1">Imperatriz</option>
</select>
</div>
<div class="col-xl-2 col-lg-4 col-md-6 px-2">
<div class="date" id="date" data-target-input="nearest">
Data e hora da retirada
<input type="datetime-local" class="form-control p-4 datetimepicker-input" style="width: 200px;" placeholder="Data da retirada"
data-target="#date" data-toggle="datetimepicker" />
</div>
</div>
<div class="col-xl-2 col-lg-4 col-md-6 px-2">
<div class="date" id="date" data-target-input="nearest">
Data e hora da entrega
<input type="datetime-local" class="form-control p-4 datetimepicker-input" style="width: 200px;" placeholder="Data da retirada"
data-target="#date" data-toggle="datetimepicker" />
</div>
</div>
<div>
</div>
<div class="col-xl-2 col-lg-4 col-md-6 px-2">
Procurar veículos
<a href="car.html"><button class="btn btn-primary btn-block mb-3" type="submit" style="height: 50px;">Clique aqui</button></a>
</div>
</div>
</div>
<!-- Search End -->
<!-- Carousel Start -->
<div class="container-fluid p-0" style="margin-bottom: 90px;">
<div id="header-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="w-100" src="img/carousel-1.jpg" alt="Image">
<div class="carousel-caption d-flex flex-column align-items-center justify-content-center">
<div class="p-3" style="max-width: 900px;">
<h4 class="text-white text-uppercase mb-md-3">Alugue seu carro</h4>
<h1 class="display-1 text-white mb-md-4">Temos o melhores carros!</h1>
</div>
</div>
</div>
<div class="carousel-item">
<img class="w-100" src="img/carousel-2.jpg" alt="Image">
<div class="carousel-caption d-flex flex-column align-items-center justify-content-center">
<div class="p-3" style="max-width: 900px;">
<h4 class="text-white text-uppercase mb-md-3">Rent A Car</h4>
<h1 class="display-1 text-white mb-md-4">Carros com a melhor qualidade do mercado!</h1>
<a href="car.html" class="btn btn-primary py-md-3 px-md-5 mt-2">Reserve agpra</a>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#header-carousel" data-slide="prev">
<div class="btn btn-dark" style="width: 45px; height: 45px;">
<span class="carousel-control-prev-icon mb-n2"></span>
</div>
</a>
<a class="carousel-control-next" href="#header-carousel" data-slide="next">
<div class="btn btn-dark" style="width: 45px; height: 45px;">
<span class="carousel-control-next-icon mb-n2"></span>
</div>
</a>
</div>
</div>
<!-- Carousel End -->
<!-- About Start -->
<div class="container-fluid py-5">
<div class="container pt-5 pb-3">
<h1 class="display-1 text-primary text-center"></h1>
<h1 class="display-4 text-uppercase text-center mb-5">Bem-vindo A <span class="text-primary">Localiza Aí</span></h1>
<div class="row justify-content-center">
<div class="col-lg-10 text-center">
<img class="w-75 mb-4" src="img/about.png" alt="">
<p>Justo et eos et ut takimata sed sadipscing dolore lorem, et elitr labore labore voluptua no rebum sed, stet voluptua amet sed elitr ea dolor dolores no clita. Dolores diam magna clita ea eos amet, amet rebum voluptua vero vero sed clita accusam takimata. Nonumy labore ipsum sea voluptua sea eos sit justo, no ipsum sanctus sanctus no et no ipsum amet, tempor labore est labore no. Eos diam eirmod lorem ut eirmod, ipsum diam sadipscing stet dolores elitr elitr eirmod dolore. Magna elitr accusam takimata labore, et at erat eirmod consetetur tempor eirmod invidunt est, ipsum nonumy at et.</p>
</div>
</div>
<!-- About End -->
<!-- Rent A Car Start -->
<!-- Rent A Car End -->
<!-- Banner Start -->
<!-- Banner End -->
<!-- Contact Start -->
<div class="container-fluid py-5">
<div class="container pt-5 pb-3">
<h1 class="display-1 text-primary text-center"></h1>
<h1 class="display-4 text-uppercase text-center mb-5">Entre em contato</h1>
<div class="row">
<div class="col-lg-7 mb-2">
<div class="contact-form bg-light mb-4" style="padding: 30px;">
<form>
<div class="row">
<div class="col-6 form-group">
<input type="text" class="form-control p-4" placeholder="Seu nome" required="required">
</div>
<div class="col-6 form-group">
<input type="email" class="form-control p-4" placeholder="Seu e-mail" required="required">
</div>
</div>
<div class="form-group">
<input type="text" class="form-control p-4" placeholder="Assunto" required="required">
</div>
<div class="form-group">
<textarea class="form-control py-3 px-4" rows="5" placeholder="Messagem" required="required"></textarea>
</div>
<div>
<button class="btn btn-primary py-3 px-5" type="submit">Enviar</button>
</div>
</form>
</div>
</div>
<div class="col-lg-5 mb-2">
<div class="bg-secondary d-flex flex-column justify-content-center px-5 mb-4" style="height: 435px;">
<div class="d-flex mb-3">
<i class="fa fa-2x fa-map-marker-alt text-primary flex-shrink-0 mr-3"></i>
<div class="mt-n1">
<h5 class="text-light">Localiza Aí</h5>
<p>Imperatriz, Brasil</p>
</div>
</div>
<!-- <div class="d-flex mb-3">
<i class="fa fa-2x fa-map-marker-alt text-primary flex-shrink-0 mr-3"></i>
<div class="mt-n1">
<h5 class="text-light">Branch Office</h5>
<p>123 Street, New York, USA</p>
</div>
</div> -->
<div class="d-flex mb-3">
<i class="fa fa-2x fa-envelope-open text-primary flex-shrink-0 mr-3"></i>
<div class="mt-n1">
<h5 class="text-light">Serviço Customizado</h5>
<p>[email protected]</p>
</div>
</div>
<div class="d-flex">
<i class="fa fa-2x fa-envelope-open text-primary flex-shrink-0 mr-3"></i>
<div class="mt-n1">
<h5 class="text-light">Retorno</h5>
<p class="m-0">[email protected]</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Contact End -->
<!-- Back to Top -->
<a href="#" class="btn btn-lg btn-primary btn-lg-square back-to-top"><i class="fa fa-angle-double-up"></i></a>
<!-- JavaScript Libraries -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<script src="lib/easing/easing.min.js"></script>
<script src="lib/waypoints/waypoints.min.js"></script>
<script src="lib/owlcarousel/owl.carousel.min.js"></script>
<script src="lib/tempusdominus/js/moment.min.js"></script>
<script src="lib/tempusdominus/js/moment-timezone.min.js"></script>
<script src="lib/tempusdominus/js/tempusdominus-bootstrap-4.min.js"></script>
<!-- Template Javascript -->
<script src="js/main.js"></script>
</body>
</html>