-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
241 lines (169 loc) · 14.5 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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gamefica Ai</title>
<link rel="shortcut icon" href="img/favicon.png" type="image/png">
<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=Abel&family=Anta&family=Anton&family=Bebas+Neue&family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Comfortaa:[email protected]&family=Kdam+Thmor+Pro&family=Major+Mono+Display&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Protest+Guerrilla&family=Rajdhani:wght@300;400;500;600;700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<!---->
<body onload="carregarCases()">
<div class="banner">
<header>
<div class="container-grid">
<img src="img/logo.svg" alt="Logo da empresa Gamifica Ai">
<nav id="menu" class="menu">
<a href="#sobre">Sobre</a>
<a href="#cases">Cases de sucesso</a>
<a href="#portifolio">Portifólio</a>
<a href="#contato">Contate-nos</a>
</nav>
<button onclick="abrirFecharMenu()">
<svg id="icone-barras" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path
d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z" />
</svg>
<svg id="icone-x" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path fill="#ffffff"
d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z" />
</svg>
</button>
</div>
</header>
<div class="container-grid conteudo-banner">
<p>
Gamifica Ai: <span>Inovação através da diversão!</span>
</p>
<button id="botao-anterior" onclick="mostrarSlideAnterior()">
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path
d="M9.4 278.6c-12.5-12.5-12.5-32.8 0-45.3l128-128c9.2-9.2 22.9-11.9 34.9-6.9s19.8 16.6 19.8 29.6l0 256c0 12.9-7.8 24.6-19.8 29.6s-25.7 2.2-34.9-6.9l-128-128z" />
</svg>
</button>
<button id="botao-proximo" onclick="mostrarProximoSlide()">
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path
d="M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z" />
</svg>
</button>
<div class="botoes">
<button onclick="selecionarSlide(0)">
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" />
</svg>
</button>
<button onclick="selecionarSlide(1)">
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" />
</svg>
</button>
<button onclick="selecionarSlide(2)">
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z" />
</svg>
</button>
</div>
</div>
</div>
<section id="sobre">
<h2>Sobre nossa empresa</h2>
<p>
Lorem ipsum dolor sit amet. Sed laboriosam amet qui necessitatibus eveniet id illo quod ea reiciendis quam
non similique quis a illum galisum est voluptas eaque. Et dolorem saepe aut velit autem et tempora totam non
inventore corrupti? Vel dolores numquam et praesentium reiciendis aut pariatur nostrum qui fugit iure.
</p>
<p>
Eum neque quaerat aut fugit sunt qui voluptatem ducimus id rerum voluptas est voluptatum facere est nisi
accusamus ut cumque voluptas. Id rerum molestiae est expedita maxime est corporis voluptas aut optio eius ad
esse itaque non molestiae soluta! Quia non sequi accusamus ut debitis accusamus aut natus dolor ad vero
quisquam nam ullam quas ab nulla eveniet. Ut nemo quia et quos molestiae ea quidem quasi et quidem quam et
laborum dolor ut pariatur nihil ea rerum error.
</p>
<p>
Eum neque quaerat aut fugit sunt qui voluptatem ducimus id rerum voluptas est voluptatum facere est nisi
accusamus ut cumque voluptas. Id rerum molestiae est expedita maxime est corporis voluptas aut optio eius ad
esse itaque non molestiae soluta! Quia non sequi accusamus ut debitis accusamus aut natus dolor ad vero
quisquam nam ullam quas ab nulla eveniet. Ut nemo quia et quos molestiae ea quidem quasi et quidem quam et
laborum dolor ut pariatur nihil ea rerum error.
</p>
</section>
<section class="container-grid" id="cases">
<h2>Cases de sucesso</h2>
<div id="lista-cards" class="container-cards">
</div>
</section>
<section id="portifolio">
<div class="filtro"></div>
<div class="container-grid">
<a href="#">Conheça nosso portifólio gamificado</a>
</div>
</section>
<section id="contato">
<h2>Contate-nos</h2>
<form onsubmit="solicitarOrcamento(event)">
<div class="campo">
<label for="campo-nome">Qual é o seu nome?</label>
<input required id="campo-nome" type="text" placeholder="Digite seu nome.">
</div>
<div class="campo">
<label for="campo-email">Em qual e-mail podemos te responder?</label>
<input required type="email" name="" id="campo-email" placeholder="Digite seu e-mal.">
</div>
<div class="campo-textarea">
<Label for="campo-descricao">Descreva um pouco da sua empresa e também o problema que enfrenta.</Label>
<textarea required name="" id="campo-descricao" cols="30" rows="10"
placeholder="Descreva um pouco da sua empresa e também o problema que enfrenta."></textarea>
</div>
<button type="submit">Enviar</button>
</form>
</section>
<footer>
<div class="container-grid">
<img src="img/logo.svg" alt="Logo da empresa Gamefica Ai">
<div class="redes-sociais">
<p>Estamos também nas redes sociais</p>
<div class="icones-redes">
<a href="#"><svg width="50" height="50" viewBox="0 0 50 50" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M24.9999 38.6364C32.531 38.6364 38.6363 32.5311 38.6363 25C38.6363 17.4689 32.531 11.3636 24.9999 11.3636C17.4687 11.3636 11.3635 17.4689 11.3635 25C11.3635 32.5311 17.4687 38.6364 24.9999 38.6364ZM24.9999 34.0909C30.0206 34.0909 34.0908 30.0207 34.0908 25C34.0908 19.9792 30.0206 15.9091 24.9999 15.9091C19.9791 15.9091 15.909 19.9792 15.909 25C15.909 30.0207 19.9791 34.0909 24.9999 34.0909Z"
fill="currentcolor" />
<path
d="M38.6363 9.09082C37.381 9.09082 36.3635 10.1084 36.3635 11.3635C36.3635 12.6187 37.381 13.6363 38.6363 13.6363C39.8915 13.6363 40.909 12.6187 40.909 11.3635C40.909 10.1084 39.8915 9.09082 38.6363 9.09082Z"
fill="currentcolor" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M1.48627 7.44559C0 10.3626 0 14.1811 0 21.8182V28.1818C0 35.8189 0 39.6375 1.48627 42.5543C2.79364 45.1202 4.87973 47.2064 7.44559 48.5136C10.3626 50 14.1811 50 21.8182 50H28.1818C35.8189 50 39.6375 50 42.5543 48.5136C45.1202 47.2064 47.2064 45.1202 48.5136 42.5543C50 39.6375 50 35.8189 50 28.1818V21.8182C50 14.1811 50 10.3626 48.5136 7.44559C47.2064 4.87973 45.1202 2.79364 42.5543 1.48627C39.6375 0 35.8189 0 28.1818 0H21.8182C14.1811 0 10.3626 0 7.44559 1.48627C4.87973 2.79364 2.79364 4.87973 1.48627 7.44559ZM28.1818 4.54545H21.8182C17.9246 4.54545 15.2778 4.549 13.232 4.71614C11.2392 4.87895 10.2201 5.17407 9.50918 5.5363C7.79861 6.40789 6.40789 7.79861 5.5363 9.50918C5.17407 10.2201 4.87895 11.2392 4.71614 13.232C4.549 15.2778 4.54545 17.9246 4.54545 21.8182V28.1818C4.54545 32.0755 4.549 34.722 4.71614 36.768C4.87895 38.7609 5.17407 39.78 5.5363 40.4909C6.40789 42.2014 7.79861 43.592 9.50918 44.4636C10.2201 44.8259 11.2392 45.1211 13.232 45.2839C15.2778 45.4509 17.9246 45.4545 21.8182 45.4545H28.1818C32.0755 45.4545 34.722 45.4509 36.768 45.2839C38.7609 45.1211 39.78 44.8259 40.4909 44.4636C42.2014 43.592 43.592 42.2014 44.4636 40.4909C44.8259 39.78 45.1211 38.7609 45.2839 36.768C45.4509 34.722 45.4545 32.0755 45.4545 28.1818V21.8182C45.4545 17.9246 45.4509 15.2778 45.2839 13.232C45.1211 11.2392 44.8259 10.2201 44.4636 9.50918C43.592 7.79861 42.2014 6.40789 40.4909 5.5363C39.78 5.17407 38.7609 4.87895 36.768 4.71614C34.722 4.549 32.0755 4.54545 28.1818 4.54545Z"
fill="currentcolor" />
</svg></a>
<a href="#"><svg width="50" height="50" viewBox="0 0 50 50" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M50 50H40V32.5024C40 27.7024 37.8825 25.0244 34.085 25.0244C29.9525 25.0244 27.5 27.8149 27.5 32.5024V50H17.5V17.5H27.5V21.1548C27.5 21.1548 30.6375 15.6494 37.7075 15.6494C44.78 15.6494 50 19.9653 50 28.8953V50ZM6.105 12.3022C2.7325 12.3022 0 9.5474 0 6.1499C0 2.7549 2.7325 0 6.105 0C9.475 0 12.2075 2.7549 12.2075 6.1499C12.21 9.5474 9.475 12.3022 6.105 12.3022ZM0 50H12.5V17.5H0V50Z"
fill="currentcolor" />
</svg></a>
<a href="#"><svg width="50" height="50" viewBox="0 0 50 50" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M42.4998 7.25013C40.2089 4.94208 37.482 3.11256 34.478 1.8679C31.4736 0.623253 28.2518 -0.0116202 24.9999 0.000161007C20.6527 0.00441099 16.3827 1.15078 12.6178 3.32446C8.85291 5.49814 5.72523 8.62285 3.54792 12.3856C1.37062 16.1484 0.220187 20.4173 0.211749 24.7645C0.203343 29.112 1.33728 33.3851 3.49999 37.1563L0 50L13.125 46.5625C16.7492 48.5788 20.8215 49.6534 24.9687 49.6875C31.5614 49.6878 37.8874 47.0838 42.5692 42.4425C47.2514 37.8016 49.9108 31.4988 49.9686 24.9063C49.9467 21.6167 49.2754 18.3637 47.9939 15.3339C46.7123 12.3041 44.8451 9.557 42.4998 7.25013ZM24.9999 45.4063C21.3052 45.4088 17.6781 44.4156 14.4999 42.5313L13.7499 42.0625L5.96873 44.125L8.03122 36.5313L7.53122 35.7501C4.87264 31.4585 3.88042 26.3407 4.74255 21.3664C5.60467 16.3922 8.26125 11.9069 12.209 8.76022C16.1568 5.61354 21.1215 4.02408 26.1627 4.29293C31.2039 4.56174 35.9717 6.6702 39.5624 10.2189C43.4873 14.057 45.7342 19.2923 45.8123 24.7813C45.763 30.2685 43.5483 35.5141 39.6505 39.3769C35.753 43.2394 30.4874 45.4066 24.9999 45.4063ZM36.2811 29.9688C35.6561 29.6563 32.6249 28.1563 32.0624 27.9688C31.4999 27.7813 31.0624 27.6563 30.6561 28.2813C30.0449 29.1191 29.3874 29.9223 28.6874 30.6876C28.3436 31.1251 27.9686 31.1563 27.3436 30.6876C23.7802 29.2795 20.8115 26.6857 18.9374 23.3439C18.2812 22.2501 19.5624 22.3126 20.7499 19.9689C20.8377 19.7998 20.8834 19.6123 20.8834 19.422C20.8834 19.2317 20.8377 19.0442 20.7499 18.8751C20.7499 18.5626 19.3437 15.5001 18.8437 14.2814C18.3437 13.0626 17.8437 13.2501 17.4374 13.2189H16.2187C15.9029 13.2237 15.5918 13.2959 15.3062 13.4306C15.0206 13.5654 14.767 13.7595 14.5624 14.0001C13.8613 14.6819 13.3144 15.5061 12.9586 16.4171C12.6028 17.3281 12.4464 18.3048 12.5 19.2814C12.6959 21.6192 13.5763 23.8473 15.0312 25.6876C17.6943 29.6745 21.344 32.9041 25.6249 35.0626C27.8702 36.3732 30.4796 36.9213 33.0624 36.6251C33.9224 36.4544 34.7371 36.1047 35.453 35.5985C36.1692 35.0926 36.7708 34.4413 37.2186 33.6876C37.6336 32.7676 37.7642 31.7448 37.5936 30.7501C37.3124 30.4376 36.9061 30.2813 36.2811 29.9688Z"
fill="currentcolor" />
</svg></a>
</div>
</div>
</div>
</footer>
</body>
</html>