-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
374 lines (363 loc) · 21.1 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
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" content="pt-br">
<meta content="width=device-width, initial-scale=1" name="viewport" />
<title>FabLab IMT</title>
<link rel="icon" href="img/favicon.png">
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/all.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark container-fluid px-5">
<a class="navbar-brand m-0 m-md-2">
<img src="img/fablab-logo.png" class="home logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item home">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item sobre">
<a class="nav-link" href="#">Sobre</a>
</li>
<li class="nav-item projetos">
<a class="nav-link" href="#">Projetos</a>
</li>
<li class="nav-item maquinas">
<a class="nav-link" href="#">Máquinas</a>
</li>
<li class="nav-item agendamento">
<a class="nav-link" href="#">Agendamento</a>
</li>
</ul>
</div>
</nav>
<div class="row bg-welcome m-0" id="particles-js">
<div class="col-12 col-md-8 col-lg-4 position-absolute px-5 p-0" id="div-welcome">
<h1 class="h2 text-white mb-3" id="p-welcome">O primeiro Fab Lab do ABC está no Instituto Mauá de Tecnologia</h1>
<button type="button" class="btn btn-primary mb-5 btn-welcome px-3 py-2 agendamento" data-toggle="modal" data-target="#exampleModalLong">Faça um agendamento</button>
</div>
<div class="scroll-downs position-absolute mb-5 mr-5 pr-5 d-none d-lg-block">
<div class="mousey">
<div class="scroller"></div>
</div>
</div>
</div>
<div class="container-fluid sobre-scroll my-5">
<div class="row px-5">
<div class="col-12 p-0">
<h2 class="pt-4 text-primary"><i class="fas fa-lightbulb"></i> Fab Lab Mauá</h2>
<hr class="divisoria">
</div>
<div class="col-12 col-md-4 lax" data-lax-translate-x_large="250 0, -100 -40" data-lax-anchor="self">
<div class="row">
<div class="col-4 p-0 div-hr-sobre invisible d-none d-md-flex">
<hr class="separa-icone">
</div>
<div class="col-4">
<i class="fas fa-quote-right icone-sobre"></i>
</div>
<div class="col-4 p-0 div-hr-sobre d-none d-md-flex">
<hr class="separa-icone">
</div>
</div>
<div class="row">
<div class="col-12">
<p class="d-block descricao">O Fab Lab Mauá é um laboratório de experimentação e inovação. Nossa missão é difundir conhecimento sobre fabricação digital e oferecer um ambiente onde o usuário pode implementar de forma prática o conceito do tripé da inovação.</p>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="row">
<div class="col-4 p-0 div-hr-sobre d-none d-md-flex">
<hr class="separa-icone">
</div>
<div class="col-4 text-center">
<i class="fas fa-cogs icone-sobre"></i>
</div>
<div class="col-4 p-0 div-hr-sobre d-none d-md-flex">
<hr class="separa-icone">
</div>
</div>
<div class="row">
<div class="col-12">
<p class="d-block descricao">Para atender aos requisitos do IMT, o laboratório foi projetado com equipamentos de última geração, indo muito além do especificado pela Fab Lab Foundation como o mínimo que se pode esperar de um Fab Lab. Veja os equipamentos que temos disponíveis.</p>
</div>
</div>
</div>
<div class="col-12 col-md-4 lax" data-lax-translate-x_large="250 0, -100 40" data-lax-anchor="self">
<div class="row">
<div class="col-4 p-0 div-hr-sobre d-none d-md-flex">
<hr class="separa-icone">
</div>
<div class="col-4">
<i class="fas fa-stopwatch icone-sobre"></i>
</div>
<div class="col-4 p-0 div-hr-sobre invisible d-none d-md-flex">
<hr class="separa-icone">
</div>
</div>
<div class="row">
<div class="col-12">
<p class="d-block descricao">Fazemos parte da rede mundial de Fab Labs. Isso significa que estamos abertos não só apenas às demandas internas do Instituto Mauá de Tecnologia, mas também aos pedidos da comunidade que o cerca. Caso queira utilizar nosso espaço, faça um agendamento.</p>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid px-5 projetos-scroll mt-5">
<div class="row">
<div class="col-12">
<h2 class="pt-4 text-primary"><i class="fas fa-tools"></i> Projetos desenvolvidos</h2>
<hr class="divisoria">
</div>
</div>
</div>
<section class="posts-grid px-5">
<article class="post lax" data-lax-scale="50 1, -300 0" data-lax-opacity="50 1, -200 0" data-lax-anchor="self">
<img src="img/posts/1.jpg">
<h3>Soldas verdes</h3>
<p>Bacon ipsum dolor amet pork brisket nostrud dolore, adipisicing spare ribs magna pancetta ea prosciutto sed picanha ullamco kevin chuck. Sint pork chop tail sausage, tongue leberkas in ut meatball.</p>
<a href="">Download projeto 3D</a>
</article>
<article class="post lax" data-lax-scale="50 1, -300 0" data-lax-opacity="50 1, -200 0" data-lax-anchor="self">
<img src="img/posts/2.jpg">
<h3>Parafusos mágicos</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus.</p>
</article>
<article class="post lax" data-lax-scale="50 1, -300 0" data-lax-opacity="50 1, -200 0" data-lax-anchor="self">
<img src="img/posts/3.jpg">
<h3>O torque pode mudar tudo!</h3>
<p>Bacon ipsum dolor amet pork brisket nostrud dolore, adipisicing spare ribs magna pancetta ea prosciutto sed picanha ullamco kevin chuck. Sint pork chop.</p>
</article>
<article class="post lax" data-lax-scale="50 1, -300 0" data-lax-opacity="50 1, -200 0" data-lax-anchor="self">
<img src="img/posts/4.jpg">
<h3>Treinamentos de corte</h3>
<p>Bacon ipsum dolor amet pork brisket nostrud dolore, adipisicing spare ribs Sint pork chop tail sausage, tongue leberkas in ut meatball.</p>
</article>
<article class="post lax" data-lax-scale="50 1, -300 0" data-lax-opacity="50 1, -200 0" data-lax-anchor="self">
<img src="img/posts/5.jpg">
<h3>Eletrônica avançada para iniciantes</h3>
<p>Bacon ipsum dolor amet pork brisket nostrud dolore in ut meatball.</p>
<a href="">Download projeto 3D</a>
</article>
<article class="post lax" data-lax-scale="50 1, -300 0" data-lax-opacity="50 1, -200 0" data-lax-anchor="self">
<img src="img/posts/6.jpg">
<h3>Projeto de mão biônica do filme "Eu Robô"</h3>
<p>Bacon ipsum dolor amet pork brisket nostrud dolore, sed picanha ullamco kevin chuck. Sint pork chop tail sausage, tongue leberkas in ut meatball.</p>
<a href="">Download projeto 3D</a>
</article>
<article class="post lax" data-lax-scale="50 1, -300 0" data-lax-opacity="50 1, -200 0" data-lax-anchor="self">
<img src="img/posts/7.jpg">
<h3>Benefícios da solda verde</h3>
<p>Bacon ipsum dolor amet pork brisket kevin chuck. Sint pork chop tail sausage, tongue leberkas in ut meatball.</p>
<a href="">Download projeto 3D</a>
</article>
<article class="post lax" data-lax-scale="50 1, -300 0" data-lax-opacity="50 1, -200 0" data-lax-anchor="self">
<img src="img/posts/8.jpg">
<h3>Réplicas do Homem de Ferro</h3>
<p>Bacon ipsum dolor amet pork ullamco kevin chuck. Sint pork chop tail sausage, tongue leberkas in ut meatball.</p>
</article>
<article class="post lax" data-lax-scale="50 1, -300 0" data-lax-opacity="50 1, -200 0" data-lax-anchor="self">
<img src="img/posts/9.jpg">
<h3>Aprenda a utilizar a impressora 3D</h3>
<p>Bacon ipsum dolor picanha ullamco kevin chuck. Sint pork chop tail sausage, tongue leberkas in ut meatball.</p>
</article>
<article class="post lax" data-lax-scale="50 1, -300 0" data-lax-opacity="50 1, -200 0" data-lax-anchor="self">
<img src="img/posts/10.jpg">
<h3>Cursos de parafusagem avançada</h3>
<p>Bacon ipsum dolor amet pork brisket nostrud dolore, adipisicing spare ribs magna pancetta ea prosciutto sed picanha ullamco kevin chuck.</p>
</article>
<article class="post lax" data-lax-scale="50 1, -300 0" data-lax-opacity="50 1, -200 0" data-lax-anchor="self">
<img src="img/posts/11.jpg">
<h3>A arte do corte a laser</h3>
<p>Bacon ipsum dolor amet pork brisket nostrud dolore. Sint pork chop tail sausage, tongue leberkas in ut meatball.</p>
<a href="">Download projeto 3D</a>
</article>
<article class="post lax" data-lax-scale="50 1, -300 0" data-lax-opacity="50 1, -200 0" data-lax-anchor="self">
<img src="img/posts/12.jpg">
<h3>Pequenos parafusos, grandes projetos</h3>
<p>Bacon ipsum dolor amet pork brisket nostrud dolore, adipisicing spare ribs magna pancetta ea prosciutto sed picanha ullamco kevin chuck.</p>
</article>
</section>
<div class="container-fluid px-5 maquinas-scroll">
<div class="row">
<div class="col-12">
<h2 class="pt-4 text-primary"><i class="fas fa-wrench"></i> Máquinas disponíveis</h2>
<hr class="divisoria">
</div>
</div>
<div class="row align-items-center">
<ul class="ch-grid my-5">
<li>
<div class="ch-item ch-img-1">
<div class="ch-info">
<h3>LASER DSL 16.25</h3>
<p>Máquina Laser CO2 multifuncional para corte e gravação em diferentes materiais não metálicos como: madeira, MDF, acrílico, EVA e outros.</p>
</div>
</div>
</li>
<li>
<div class="ch-item ch-img-2">
<div class="ch-info">
<h3>MODELA MDX-40A</h3>
<p>Lida com uma ampla variedade de materiais, incluindo ABS, nylon, acrílico, madeira química. Ajuda você a transformar conceitos em objetos funcionais, desde esculturas lisas de arte até peças de alta precisão e protótipos.</p>
</div>
</div>
</li>
<li>
<div class="ch-item ch-img-3">
<div class="ch-info">
<h3>AE3D Plus</h3>
<p>Imprime até 52cm de altura, ambiente de impressão fechado, estrutura mais robusta e estável proporcionando o mais alto nível de impressão.</p>
</div>
</div>
</li>
<li>
<div class="ch-item ch-img-4">
<div class="ch-info">
<h3>VersaUV LEF-12i</h3>
<p>Oferece inúmeras customizações de produtos e possibilidades de substrato, incluindo imprimir diretamente em objetos tridimensionais de até 10cm de espessura.</p>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="container-fluid px-5 mb-3">
<section class="row justify-content-center">
<div class="col-12 agendamento-scroll">
<h2 class="pt-4 text-primary"><i class="fas fa-comments"></i> Agende um horário</h2>
<hr class="divisoria">
</div>
<div class="row container-fluid align-items-top mb-5 px-0 justify-content-center">
<div class="col-12 col-lg-6">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text bg-primary text-white border-0" id="basic-addon1"><i class="fas fa-user"></i></span>
</div>
<input type="text" class="form-control" placeholder="Nome Completo" aria-label="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group mb-3">
<div class="input-group-append">
<span class="input-group-text bg-primary text-white border-0" id="basic-addon2"><i class="fas fa-envelope"></i></span>
</div>
<input type="text" class="form-control" placeholder="Email" aria-label="Recipient's username" aria-describedby="basic-addon2">
</div>
<div class="input-group mb-3">
<div class="input-group-append">
<span class="input-group-text bg-primary text-white border-0" id="basic-addon3"><i class="fas fa-keyboard"></i></span>
</div>
<textarea class="form-control" placeholder="Sua mensagem" aria-describedby="basic-addon3" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<button type="button" class="btn btn-primary mt-2 px-5 py-2 mx-auto mb-5" data-toggle="modal" data-target="#modalExemplo">Enviar</button>
<!-- Modal -->
<div class="modal fade" id="modalExemplo" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Termos de uso</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-left">
<ol>
<li>É obrigatório a utilização de EPIs dentro do Fab Lab.</li>
<li>É obrigarótio a utilização de calças nos recintos do Fab Lab.</li>
<li>É proibido comer ou beber.</li>
<li>Cabelos longos devem estar presos durante a operação de máquinas.</li>
<li>Fique atento com mangas compridas durante a operação de máquinas.</li>
</ol>
</div>
<div class="modal-footer">
<div class="form-check mr-3">
<input type="checkbox" class="form-check-input" id="exampleCheck1" onchange="document.getElementById('enviar-email').disabled = !this.checked;">
<label class="form-check-label" for="exampleCheck1">Li e concordo os termos</label>
</div>
<button type="button" class="btn btn-primary" data-dismiss="modal" id="enviar-email" disabled>Enviar email</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-4 mb-5">
<iframe width="100%"
height="250px"
frameborder="0" style="border:0; display:block; margin: 0 auto;"
src="https://www.google.com/maps/embed/v1/place?key=AIzaSyAH3N3CrD207eeAEONwVzhY-jIP9HnqoZU
&q=Instituto+Maua+de+Tecnologia,São+Caetano+do+Sul" allowfullscreen></iframe>
</div>
<div class="col-12 col-lg-2">
<h3 class="text-primary">Horário de funcionamento:</h3>
<ul>
<li class="horario-li">Segunda a Sexta: 8h às 22h</li>
<li class="horario-li">Sábado: 8h às 13h</li>
</ul>
</div>
</div>
</section>
</div>
<footer class="bg-black pt-4 text-white px-5">
<div class="container-fluid text-center text-md-left">
<div class="row">
<div class="col-12 col-md-6 mt-md-0 mt-3 p-0">
<h5 class="text-uppercase text-secondary mb-3">Fab Lab - Instituto Mauá de Tecnologia</h5>
<p class="mb-0">Campus São Caetano do Sul</p>
<p>Praça Mauá 1 São Caetano do Sul - SP</p>
<a href="https://www.instagram.com/fablabmaua/" class="mb-0 my-2 text-white d-flex align-items-center justify-content-center justify-content-md-start mx-auto"><i class="fab fa-instagram h3 m-0"></i><span class="text-center ml-2">fablabmaua</span></a>
</div>
<div class="col-12 col-md-3 mb-md-0 mb-3 d-none d-lg-block">
<h5 class="text-uppercase text-secondary">Navegação</h5>
<ul class="list-unstyled footer-ul">
<li>
<a href="#!" class="home">Home</a>
</li>
<li>
<a href="#!" class="sobre">Sobre</a>
</li>
<li>
<a href="#!" class="projetos">Projetos</a>
</li>
<li>
<a href="#!" class="maquinas">Máquinas</a>
</li>
<li>
<a href="#!" class="agendamento">Agendamento</a>
</li>
</ul>
</div>
<div class="col-12 col-md-3 mb-md-0 mb-3 p-0">
<h5 class="text-uppercase text-secondary">Acompanhe o Instituto Mauá de Tecnologia</h5>
<ul class="list-unstyled footer-ul">
<li>
<a href="#!">Instagram</a>
</li>
<li>
<a href="#!">Facebook</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
<div class="row container-fluid m-0 py-2 bg-dark text-white">
<div class="col-12 col-md-6">
<a href="https://maua.br" class="text-white mr-auto pl-3">© 2019 Instituto Mauá de Tecnologia</a>
</div>
<div class="col-12 col-md-6 ml-auto">
<a href="https://maua.br" class="text-white mr-2"><i class="fab fa-github"></i> Arthur Novello</a>
<a href="https://maua.br" class="text-white mr-2"><i class="fab fa-github"></i> Luca Miraglia</a>
<a href="https://maua.br" class="text-white"><i class="fab fa-github"></i> Lucas Marques</a>
</div>
</div>
<script type="text/javascript" src="dist/jquery.min.js"></script>
<script src="dist/app.js"></script>
</body>
</html>