-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
506 lines (444 loc) · 29.8 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
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
<!DOCTYPE html>
<html lang="PT-BR">
<head>
<meta charset="UTF-8" dir="ltr"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"/>
<meta name="description" content="Raphael Laurentino"/>
<title>Apeperia - aplicativos sob medida</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700|Open+Sans:300,400,700" rel="stylesheet">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/tema-padrao.css">
<link rel="stylesheet" href="css/secaoDestaque.css">
<link rel="stylesheet" href="css/cabecalho.css">
<link rel="stylesheet" href="css/diferenciais.css">
<link rel="stylesheet" href="css/secaoSobre.css">
<link rel="stylesheet" href="css/secaoPlanos.css">
<link rel="stylesheet" href="css/secaoBlog.css">
<link rel="stylesheet" href="css/listaDeArtigos.css">
<link rel="stylesheet" href="css/secaoDestaques.css">
<link rel="stylesheet" href="css/secaoContato.css">
<link rel="stylesheet" href="css/contatoCampo.css">
<link rel="stylesheet" href="css/secaoInstitucional.css">
<link rel="stylesheet" href="css/rodape.css">
<link rel="stylesheet" href="css/dialogNewsletter.css">
</head>
<body>
<a href="#conteudoPrincipal" class="pularNavegacao">Pular para conteúdo principal</a>
<header class="cabecalho container">
<a href="https://www.google.com" class="cabecalho-logo" title="Home Apeperia">
<svg width="205" height="59" viewBox="0 0 205 59" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Logotipo da Apeperia</title>
<!-- <desc>Created using Figma</desc>-->
<g id="Canvas" transform="translate(-2230 1001)">
<g id="Logo do Apeperia">
<g id="Oval 1">
<use xlink:href="#path0_fill" transform="translate(2230 -988.755)" fill="#B72E2E"/>
</g>
<g id="a">
<use xlink:href="#path1_fill" transform="translate(2239 -1001)" fill="#333333"/>
</g>
<g id="apeperia">
<use xlink:href="#path2_fill" transform="translate(2287.13 -993.208)" fill="#FFFFFF"/>
</g>
</g>
</g>
<defs>
<path id="path0_fill" fill-rule="evenodd"
d="M 22.4044 44.5283C 34.778 44.5283 44.8087 34.5603 44.8087 22.2642C 44.8087 9.968 34.778 0 22.4044 0C 10.0308 0 0 9.968 0 22.2642C 0 34.5603 10.0308 44.5283 22.4044 44.5283Z"/>
<path id="path1_fill"
d="M 16.8684 47C 16.6944 46.6086 16.5422 46.21 16.4118 45.8042C 16.2813 45.3838 16.1799 44.9635 16.1074 44.5431C 15.3537 45.4128 14.4332 46.1158 13.3461 46.6521C 12.2735 47.1884 11.0414 47.4566 9.64991 47.4566C 7.34522 47.4566 5.51162 46.8333 4.1491 45.5867C 2.80108 44.3257 2.12706 42.6153 2.12706 40.4556C 2.12706 38.2523 3.01125 36.5492 4.77963 35.3461C 6.54801 34.143 9.14259 33.5415 12.5634 33.5415L 15.803 33.5415L 15.803 31.2368C 15.803 30.1062 15.4769 29.2293 14.8246 28.606C 14.1723 27.9827 13.2084 27.6711 11.9329 27.6711C 11.2081 27.6711 10.5631 27.758 9.99779 27.932C 9.43249 28.0914 8.9759 28.2871 8.62802 28.519L 8.21492 31.0411L 3.4316 31.0411L 3.45335 25.823C 4.61294 25.0402 5.93922 24.3807 7.43219 23.8444C 8.93966 23.3081 10.5776 23.0399 12.346 23.0399C 15.2594 23.0399 17.6221 23.7574 19.434 25.1924C 21.2603 26.6129 22.1735 28.6422 22.1735 31.2803L 22.1735 40.9991C 22.1735 41.3615 22.1735 41.7021 22.1735 42.021C 22.188 42.3399 22.217 42.6443 22.2605 42.9342L 24.1955 43.1951L 24.1955 47L 16.8684 47ZM 11.3676 42.7602C 12.3242 42.7602 13.1939 42.5573 13.9766 42.1515C 14.7594 41.7311 15.3681 41.2093 15.803 40.586L 15.803 36.9985L 12.5634 36.9985C 11.2154 36.9985 10.1935 37.3174 9.49772 37.9552C 8.80196 38.5785 8.45408 39.3322 8.45408 40.2164C 8.45408 41.0136 8.70774 41.6369 9.21507 42.0862C 9.73688 42.5356 10.4544 42.7602 11.3676 42.7602Z"/>
<path id="path2_fill"
d="M 13.0802 37C 12.941 36.6869 12.8193 36.368 12.7149 36.0433C 12.6106 35.7071 12.5294 35.3708 12.4714 35.0345C 11.8684 35.7302 11.1321 36.2926 10.2624 36.7217C 9.40429 37.1507 8.41863 37.3653 7.30542 37.3653C 5.46167 37.3653 3.99479 36.8666 2.90478 35.8694C 1.82636 34.8606 1.28715 33.4922 1.28715 31.7644C 1.28715 30.0019 1.9945 28.6393 3.4092 27.6769C 4.8239 26.7144 6.89957 26.2332 9.6362 26.2332L 12.2279 26.2332L 12.2279 24.3894C 12.2279 23.485 11.967 22.7834 11.4452 22.2848C 10.9233 21.7862 10.1522 21.5369 9.13178 21.5369C 8.55199 21.5369 8.03597 21.6064 7.58373 21.7456C 7.13149 21.8731 6.76621 22.0297 6.48791 22.2152L 6.15743 24.2329L 2.33078 24.2329L 2.34817 20.0584C 3.27585 19.4322 4.33687 18.9046 5.53125 18.4755C 6.73723 18.0465 8.04756 17.832 9.46226 17.832C 11.793 17.832 13.6832 18.406 15.1327 19.5539C 16.5938 20.6903 17.3243 22.3138 17.3243 24.4242L 17.3243 32.1993C 17.3243 32.4892 17.3243 32.7617 17.3243 33.0168C 17.3359 33.2719 17.3591 33.5154 17.3939 33.7473L 18.9419 33.9561L 18.9419 37L 13.0802 37ZM 8.67954 33.6082C 9.44487 33.6082 10.1406 33.4459 10.7668 33.1212C 11.393 32.7849 11.88 32.3674 12.2279 31.8688L 12.2279 28.9988L 9.6362 28.9988C 8.55778 28.9988 7.74027 29.2539 7.18367 29.7642C 6.62706 30.2628 6.34876 30.8658 6.34876 31.5731C 6.34876 32.2109 6.55169 32.7095 6.95755 33.069C 7.375 33.4285 7.949 33.6082 8.67954 33.6082ZM 20.2986 21.2412L 20.2986 18.1798L 27.6736 18.1798L 27.9172 20.3715C 28.4738 19.5597 29.1405 18.9336 29.9175 18.4929C 30.6944 18.0523 31.5989 17.832 32.6309 17.832C 34.9617 17.832 36.7706 18.7422 38.0578 20.5628C 39.3449 22.3834 39.9885 24.7779 39.9885 27.7465L 39.9885 28.1117C 39.9885 30.8948 39.3449 33.1328 38.0578 34.8258C 36.7706 36.5188 34.9733 37.3653 32.6657 37.3653C 31.68 37.3653 30.8045 37.1855 30.0392 36.8261C 29.2739 36.455 28.6187 35.9158 28.0737 35.2084L 28.0737 40.6527L 30.5262 41.1745L 30.5262 44.2358L 20.5596 44.2358L 20.5596 41.1745L 23.0121 40.6527L 23.0121 21.763L 20.2986 21.2412ZM 34.9095 27.7465C 34.9095 25.9723 34.6138 24.5344 34.0224 23.4328C 33.431 22.3312 32.5265 21.7804 31.309 21.7804C 30.5436 21.7804 29.8885 21.9369 29.3435 22.25C 28.81 22.5631 28.3868 23.0095 28.0737 23.5893L 28.0737 31.834C 28.3868 32.3674 28.81 32.7733 29.3435 33.0516C 29.8885 33.3299 30.5552 33.469 31.3438 33.469C 32.5729 33.469 33.4716 32.9878 34.0398 32.0254C 34.6196 31.0629 34.9095 29.7584 34.9095 28.1117L 34.9095 27.7465ZM 51.2597 37.3653C 48.5463 37.3653 46.3779 36.4956 44.7544 34.7562C 43.131 33.0168 42.3193 30.8078 42.3193 28.1291L 42.3193 27.4334C 42.3193 24.6388 43.0846 22.337 44.6153 20.528C 46.1575 18.719 48.2216 17.8204 50.8075 17.832C 53.347 17.832 55.3183 18.5973 56.7214 20.1279C 58.1245 21.6586 58.8261 23.7285 58.8261 26.3376L 58.8261 29.1032L 47.5896 29.1032L 47.5548 29.2075C 47.6476 30.4483 48.0593 31.4687 48.7898 32.2689C 49.5319 33.069 50.535 33.469 51.7989 33.469C 52.9237 33.469 53.8572 33.3589 54.5994 33.1386C 55.3415 32.9066 56.1532 32.5472 57.0345 32.0601L 58.4086 35.191C 57.6317 35.8056 56.6228 36.3216 55.3821 36.7391C 54.1529 37.1565 52.7788 37.3653 51.2597 37.3653ZM 50.8075 21.7456C 49.8682 21.7456 49.1261 22.1051 48.5811 22.824C 48.0361 23.5429 47.6998 24.488 47.5722 25.6592L 47.6244 25.7462L 53.8514 25.7462L 53.8514 25.2939C 53.8514 24.2155 53.5963 23.3574 53.0861 22.7196C 52.5875 22.0703 51.8279 21.7456 50.8075 21.7456ZM 60.8611 21.2412L 60.8611 18.1798L 68.2361 18.1798L 68.4797 20.3715C 69.0363 19.5597 69.703 18.9336 70.48 18.4929C 71.2569 18.0523 72.1614 17.832 73.1934 17.832C 75.5242 17.832 77.3331 18.7422 78.6203 20.5628C 79.9074 22.3834 80.551 24.7779 80.551 27.7465L 80.551 28.1117C 80.551 30.8948 79.9074 33.1328 78.6203 34.8258C 77.3331 36.5188 75.5358 37.3653 73.2282 37.3653C 72.2425 37.3653 71.367 37.1855 70.6017 36.8261C 69.8364 36.455 69.1812 35.9158 68.6362 35.2084L 68.6362 40.6527L 71.0887 41.1745L 71.0887 44.2358L 61.1221 44.2358L 61.1221 41.1745L 63.5746 40.6527L 63.5746 21.763L 60.8611 21.2412ZM 75.472 27.7465C 75.472 25.9723 75.1763 24.5344 74.5849 23.4328C 73.9935 22.3312 73.089 21.7804 71.8715 21.7804C 71.1061 21.7804 70.451 21.9369 69.906 22.25C 69.3725 22.5631 68.9493 23.0095 68.6362 23.5893L 68.6362 31.834C 68.9493 32.3674 69.3725 32.7733 69.906 33.0516C 70.451 33.3299 71.1177 33.469 71.9063 33.469C 73.1354 33.469 74.0341 32.9878 74.6023 32.0254C 75.1821 31.0629 75.472 29.7584 75.472 28.1117L 75.472 27.7465ZM 91.8222 37.3653C 89.1088 37.3653 86.9404 36.4956 85.3169 34.7562C 83.6935 33.0168 82.8818 30.8078 82.8818 28.1291L 82.8818 27.4334C 82.8818 24.6388 83.6471 22.337 85.1778 20.528C 86.72 18.719 88.7841 17.8204 91.37 17.832C 93.9095 17.832 95.8808 18.5973 97.2839 20.1279C 98.687 21.6586 99.3886 23.7285 99.3886 26.3376L 99.3886 29.1032L 88.1521 29.1032L 88.1173 29.2075C 88.2101 30.4483 88.6218 31.4687 89.3523 32.2689C 90.0944 33.069 91.0975 33.469 92.3614 33.469C 93.4862 33.469 94.4197 33.3589 95.1619 33.1386C 95.904 32.9066 96.7157 32.5472 97.597 32.0601L 98.9711 35.191C 98.1942 35.8056 97.1853 36.3216 95.9446 36.7391C 94.7154 37.1565 93.3413 37.3653 91.8222 37.3653ZM 91.37 21.7456C 90.4307 21.7456 89.6886 22.1051 89.1436 22.824C 88.5986 23.5429 88.2623 24.488 88.1347 25.6592L 88.1869 25.7462L 94.4139 25.7462L 94.4139 25.2939C 94.4139 24.2155 94.1588 23.3574 93.6486 22.7196C 93.15 22.0703 92.3904 21.7456 91.37 21.7456ZM 102.189 33.9561L 104.624 33.4343L 104.624 21.763L 101.928 21.2412L 101.928 18.1798L 109.355 18.1798L 109.581 20.9281C 110.022 19.954 110.59 19.1945 111.286 18.6495C 111.982 18.1045 112.788 17.832 113.704 17.832C 113.97 17.832 114.249 17.8551 114.539 17.9015C 114.84 17.9363 115.089 17.9827 115.287 18.0407L 114.747 22.6675L 112.66 22.6153C 111.918 22.6153 111.303 22.7602 110.816 23.0501C 110.329 23.34 109.958 23.7517 109.703 24.2851L 109.703 33.4343L 112.138 33.9561L 112.138 37L 102.189 37L 102.189 33.9561ZM 116.643 33.9561L 119.096 33.4343L 119.096 21.763L 116.382 21.2412L 116.382 18.1798L 124.175 18.1798L 124.175 33.4343L 126.61 33.9561L 126.61 37L 116.643 37L 116.643 33.9561ZM 124.175 13.6748L 119.096 13.6748L 119.096 9.86557L 124.175 9.86557L 124.175 13.6748ZM 140.264 37C 140.125 36.6869 140.003 36.368 139.899 36.0433C 139.795 35.7071 139.713 35.3708 139.655 35.0345C 139.052 35.7302 138.316 36.2926 137.446 36.7217C 136.588 37.1507 135.603 37.3653 134.489 37.3653C 132.646 37.3653 131.179 36.8666 130.089 35.8694C 129.01 34.8606 128.471 33.4922 128.471 31.7644C 128.471 30.0019 129.178 28.6393 130.593 27.6769C 132.008 26.7144 134.084 26.2332 136.82 26.2332L 139.412 26.2332L 139.412 24.3894C 139.412 23.485 139.151 22.7834 138.629 22.2848C 138.107 21.7862 137.336 21.5369 136.316 21.5369C 135.736 21.5369 135.22 21.6064 134.768 21.7456C 134.315 21.8731 133.95 22.0297 133.672 22.2152L 133.341 24.2329L 129.515 24.2329L 129.532 20.0584C 130.46 19.4322 131.521 18.9046 132.715 18.4755C 133.921 18.0465 135.232 17.832 136.646 17.832C 138.977 17.832 140.867 18.406 142.317 19.5539C 143.778 20.6903 144.508 22.3138 144.508 24.4242L 144.508 32.1993C 144.508 32.4892 144.508 32.7617 144.508 33.0168C 144.52 33.2719 144.543 33.5154 144.578 33.7473L 146.126 33.9561L 146.126 37L 140.264 37ZM 135.864 33.6082C 136.629 33.6082 137.325 33.4459 137.951 33.1212C 138.577 32.7849 139.064 32.3674 139.412 31.8688L 139.412 28.9988L 136.82 28.9988C 135.742 28.9988 134.924 29.2539 134.368 29.7642C 133.811 30.2628 133.533 30.8658 133.533 31.5731C 133.533 32.2109 133.736 32.7095 134.142 33.069C 134.559 33.4285 135.133 33.6082 135.864 33.6082Z"/>
</defs>
</svg>
</a>
<nav class="cabecalho-nav">
<ul>
<li class="cabecalho-nav-item"><a href="#">Sobre</a></li>
<li class="cabecalho-nav-item"><a href="#">Planos</a></li>
<li class="cabecalho-nav-item"><a href="#">Blog</a></li>
<li class="cabecalho-nav-item"><a href="#">Destaques</a></li>
<li class="cabecalho-nav-item"><a href="#">Institucional</a></li>
<li class="cabecalho-nav-item"><a href="#">Contato</a></li>
</ul>
</nav>
</header>
<main class="conteudo" role="main">
<section class="secaoDestaque">
<h1 class="secaoDestaque-titulo" id="conteudoPrincipal">
APLICATIVOS NA MEDIDA
</h1>
<h2 class="secaoDestaque-texto">
A Apeperia é uma startup com um jeito inovador de comprar e montar aplicativos mobile e web para pequenas e
médias empresas
</h2>
<button class="secaoDestaque-cta btnPadrao">
Conheça os planos
</button>
</section>
<section class="secaoDiferenciais">
<div class="container">
<ul class="diferenciais">
<li class="diferenciais-diferencial">
<h2 class="diferenciais-diferencial-titulo diferenciais-diferencial-titulo--tempo">
Tempo
</h2>
<p class="diferenciais-diferencial-texto">
Tempo é importante! Trabalhamos em ritmo acelerado, atendendo rigorosamente os prazos.
</p>
</li>
<li class="diferenciais-diferencial">
<h2 class="diferenciais-diferencial-titulo diferenciais-diferencial-titulo--foco">
Foco
</h2>
<p class="diferenciais-diferencial-texto">
Focado no empreendedor, oferecemos serviços de qualidade com preços acessíveis.
</p>
</li>
<li class="diferenciais-diferencial">
<h2 class="diferenciais-diferencial-titulo diferenciais-diferencial-titulo--especialistas">
Especialistas
</h2>
<p class="diferenciais-diferencial-texto">
Equipe especializada, com experiência profissionais. Testamos todos os produtos antes do
lançamento.
</p>
</li>
</ul>
</div>
</section> <!--fim .secaoDiferenciais-->
<section class="secaoSobre clearfix">
<div class="container">
<img src="img/sobre-apeperia.png" class="secaoSobre-imgDestaque" alt>
<h2 class="secaoSobre-titulo tituloPadrao">
SOBRE
</h2>
<p class="secaoSobre-texto">
Criamos aplicativos personalizados de maneira diferente e para <b>todas as pessoas</b>!
</p>
<p class="secaoSobre-texto">
Preocupados com o modelo atual em que um aplicativo é criado entregue e a manutenção é vista como um
custo extra para o cliente, decidimos criar um novo modelo de negócio, em que você assina nosso serviço,
nós criamos o aplicativo e a manutenção já é inclusa no serviço. Dessa maneira você não se preocupa com
atualização, é tudo por nossa conta.
</p>
<p class="secaoSobre-texto">
<b>
Contamos com uma equipe especializada e exclusiva para projetos incríveis!
</b>
</p>
<ul class="secaoSobre-plataformas">
<li><img src="img/android.png" alt="Android"></li>
<li><img src="img/blackberry.png" alt="Blackberry"></li>
<li><img src="img/apple.png" alt="iOS"></li>
<li><img src="img/windowsphone.png" alt="Windows Phone"></li>
</ul>
<p>
Desenvolvemos aplicativos para todas as plataformas
</p>
</div>
</section> <!--fim .secaoSobre-->
<section class="secaoPlanos">
<div class="container">
<h2 class="secaoPlanos-titulo tituloPadrao">
PLANOS
</h2>
<div class="secaoPlanos-plano secaoPlanos-plano--start">
<h3 class="secaoPlanos-plano-titulo">Start</h3>
<h4 class="secaoPlanos-plano-preco">
R$ 500
</h4>
<ul class="secaoPlanos-plano-itens">
<li>5 manutenções mensais</li>
<li>App SEO</li>
<li>1 sistema operacional</li>
</ul>
<a href="#" class="btnPadrao secaoPlanos-plano-btn">
Assinar plano
</a>
</div>
<div class="secaoPlanos-plano secaoPlanos-plano--ultra">
<h3 class="secaoPlanos-plano-titulo">Ultra</h3>
<h4 class="secaoPlanos-plano-preco">
R$ 1500
</h4>
<ul class="secaoPlanos-plano-itens">
<li>20 manutenções mensais</li>
<li>App SEO</li>
<li>4 sistemas operacionais</li>
<li>24h de atendimento</li>
</ul>
<a href="#" class="btnPadrao secaoPlanos-plano-btn">
Assinar plano
</a>
</div>
<div class="secaoPlanos-plano secaoPlanos-plano--mega">
<h3 class="secaoPlanos-plano-titulo">Mega</h3>
<h4 class="secaoPlanos-plano-preco">
R$ 1000
</h4>
<ul class="secaoPlanos-plano-itens">
<li>10 manutenções mensais</li>
<li>App SEO</li>
<li>2 sistemas operacionais</li>
</ul>
<a href="#" class="btnPadrao secaoPlanos-plano-btn">
Assinar plano
</a>
</div>
</div> <!--fim .container da .secaoPlanos-->
</section> <!--fim .secaoPlanos-->
<section class="secaoBlog container">
<h2 class="secaoBlog-titulo tituloPadrao">
BLOG
</h2>
<ul class="listaDeArtigos">
<li id="new0" class="listaDeArtigos-item">
<article class="listaDeArtigos-artigo">
<img src="img/10-aplicativos-mais-baixados.png" class="listaDeArtigos-artigo-img"
alt="Teclado da Apple e um celular Android">
<h2 class="listaDeArtigos-artigo-titulo">
Conheça os 10 aplicativos mais badalados do momento
</h2>
<p>
Listamos nesta semana alguns aplicativos que estão se destacando no mundo inteiro e merecem a
sua atenção. Agora, mostramos os 10 apps mais badalados do momento e por que eles estão ganhando
destaque.
<a href="#" class="listaDeArtigos-artigo-link">
Continuar lendo o post 1
</a>
</p>
</article>
</li>
<li id="new1" class="listaDeArtigos-item">
<article class="listaDeArtigos-artigo">
<img src="img/ux-usabilidade.jpg" class="listaDeArtigos-artigo-img"
alt="Pessoa segurando um celular">
<h2 class="listaDeArtigos-artigo-titulo">
Usabilidade: Entenda os benefícios de treinar sua equipe em UX
</h2>
<p>
Vamos imaginar a seguinte situação: o time de desenvolvedores da sua empresa dedicou bastante
tempo à criação de um novo software, e agora ele está tecnicamente perfeito, pronto para ser
vendido.
<a href="#" class="listaDeArtigos-artigo-link">
Continuar lendo o post 2
</a>
</p>
</article>
</li>
<li id="new2" class="listaDeArtigos-item">
<article class="listaDeArtigos-artigo">
<img src="img/dicas-acessibilidade.jpg" class="listaDeArtigos-artigo-img"
alt="Pessoas levantando um senhor para ver melhor um show">
<h2 class="listaDeArtigos-artigo-titulo">
5 dicas para melhorar a acessibilidade em sua interface
</h2>
<p>
Será que acessibilidade é algo tão complicado que vale a pena eu abrir mão de 25% dos meus
usuários? Acessibilidade normalmente é um algo não muito aplicado por aí, falta de informação
talvez?
<a href="#" class="listaDeArtigos-artigo-link">
Continuar lendo o post 3
</a>
</p>
</article>
</li>
</ul>
<nav>
<ul class="listaDeArtigos-slider">
<li>
<a href="#new0" data-sliderItem="0"
class="listaDeArtigos-slider-item listaDeArtigos-slider-item--ativo">
Notícia 1
</a>
</li>
<li>
<a href="#new1" data-sliderItem="1" class="listaDeArtigos-slider-item">
Notícia 2
</a>
</li>
<li>
<a href="#new2" data-sliderItem="2" class="listaDeArtigos-slider-item">
Notícia 3
</a>
</li>
</ul>
</nav>
</section> <!--fim .secaoBlog-->
<section class="secaoDestaques">
<div class="container">
<h2 class="secaoDestaques-titulo tituloPadrao">DESTAQUES</h2>
<a href="http://blog.apeperia.com.br/design/conheca-primeiras-etapas-criacao-logotipo-teste-teste"
class="secaoDestaques-link" aria-labelledby="tituloDestaque1">
<figure class="secaoDestaques-destaque">
<img src="img/comecando-criar-logotipo.png" class="secaoDestaques-destaque-img"
alt="Ferramentas de designer. Ilustração">
<figpcation class="secaoDestaques-destaque-titulo" id="tituloDestaque1">
Conheça as primeiras etapas na criação de um logotipo
</figpcation>
</figure>
</a>
<a href="http://blog.apeperia.com.br/design/dicas-como-fotografar-com-celular" class="secaoDestaques-link"
aria-labelledby="tituloDestaque2">
<figure class="secaoDestaques-destaque">
<img src="img/dicas-fotografia.png" class="secaoDestaques-destaque-img"
alt="Moça mostrando câmera para rapaz">
<figcaption class="secaoDestaques-destaque-titulo" id="tituloDestaque2">
Veja dicas de como fotografar usando seu celular
</figcaption>
</figure>
</a>
<button class="secaoDestaques-form-botao btnPadrao btnPadrao--pequeno" id="abreDialog">
Receber destaques por email
</button>
</div>
<div class="dialogNewsletter" id="dialogNewsletter">
<div class="dialogNewsletter-body">
<h2 class="dialogNewsletter-titulo">News sem spam</h2>
<h3 class="dialogNewsletter-texto">
Assine nossa newsletter para receber notícias técnicas sem spam!
</h3>
<form class="dialogNewsletter-form">
<label class="dialogNewsletter-label">
Email:
</label>
<input type="text" class="dialogNewsletter-campo" placeholder="Digite seu e-mail...">
<button class="dialogNewsletter-btn">
Assinar newsletter
</button>
<button class="dialogNewsletter-fechar">
X
</button>
</form>
</div>
<div class="dialogNewsletter-overlay"></div>
</div> <!--fim .dialogNewsletter-->
</section> <!--fim .secaoDestaques-->
<section class="secaoContato">
<div class="container">
<h2 class="tituloPadrao">
CONTATO
</h2>
<form class="secaoContato-form">
<p class="secaoContato-form-legend">
Oi, tudo bem? Fale com a gente!
Preencha seus dados e sua mensagem:
</p>
<div class="contatoCampo contatoCampo--sucesso">
<label for="nome">Nome: </label>
<input type="text" id="nome" class="contatoCampo--validouFoi" placeholder="Nome..." required>
</div>
<div class="contatoCampo contatoCampo--erro">
<label for="email">Email: </label>
<input type="email" id="email" class="contatoCampo--validouErro" placeholder="Email.." required>
<span class="contatoCampo-msg contatoCampo-msg--erro">
Você quis dizer <a href="#">gmail.com?</a>
</span>
</div>
<div class="contatoCampo contatoCampo--erro">
<label>Telefone: </label>
<input type="text" class="contatoCampo--validouErro" placeholder="(11) 5571-2751">
<span class="contatoCampo-msg contatoCampo-msg--erro">Faltou o DDD</span>
</div>
<div class="contatoCampo">
<label>CEP: </label>
<input type="text" maxlength="8" placeholder="Exemplo: 04101-300" required>
</div>
<div class="contatoCampo">
<label>Endereço: </label>
<input type="text" class="contatoCampo-campoDesabilitado" readonly value="Rua Vergueiro">
</div>
<div class="contatoCampo">
<label>Bairro: </label>
<input type="text" class="contatoCampo-campoDesabilitado" readonly value="Vila Mariana">
</div>
<div class="contatoCampo">
<label>Cidade: </label>
<input type="text" class="contatoCampo-campoDesabilitado" readonly value="São Paulo">
</div>
<div class="contatoCampo">
<label>Estado: </label>
<input type="text" class="contatoCampo-campoDesabilitado" readonly value="SP">
</div>
<div class="contatoCampo">
<label>Mensagem: </label>
<textarea name="" cols="30" rows="10" required></textarea>
</div>
<div class="contatoCampo">
<input type="checkbox" checked value="receberDestaques" class="contatoCampo-checkbox"
id="receberEmail">
<label class="contatoCampo-label" for="receberEmail">Receber destaques por email</label>
</div>
<div class="contatoCampo">
<button class="secaoContato-form-cta btnPadrao" type="submit">
Enviar mensagem
</button>
<span class="contatoCampo-msg contatoCampo-msg--erro secaoContatoForm-validacao">
Verifique os erros acima
</span>
</div>
</form>
</div> <!--fim .container da .secaoContato-->
</section> <!--fim .secaoContato-->
<section class="secaoInstitucional">
<div class="container">
<h2 class="tituloPadrao">
INSTITUCIONAL
</h2>
<div class="secaoInstitucional-coluna">
<p>
Um pouco mais sobre a Apeperia
</p>
<address class="secaoInstitucional-endereco">
Rua Vergueiro, 3185 <br> Vila Mariana, São Paulo
</address>
<p class="secaoInstitucional-telefone">
(11) 5571-2751 ou <a href="#"> [email protected]</a>
</p>
</div>
<video src="img/formacao-java.mp4" class="secaoInstitucional-video" controls>
<track src="img/legenda-portugues-brasil.vtt" kind="subtitles" srclang="pt-br"
label="Português (Brasil)">
</video>
</div>
</section> <!--fim .secaoInstitucional-->
</main>
<footer class="rodape">
<div class="container">
<img src="img/logo-apeperia.svg" class="rodape-logo" alt="Logotipo apeperia">
<ul class="rodape-social">
<li>
<a href="#" class="rodape-social-link rodape-social-link--facebook">
Facebook da Apeperia
</a>
</li>
<li>
<a href="#" class="rodape-social-link rodape-social-link--twitter">
Twitter da Apeperia
</a>
</li>
<li>
<a href="#" class="rodape-social-link rodape-social-link--instagram">
Instagram da Apeperia
</a>
</li>
</ul>
<nav class="rodape-nav">
<ul>
<li class="rodape-nav-item"><a href="#" class="rodape-nav-link">Sobre</a></li>
<li class="rodape-nav-item"><a href="#" class="rodape-nav-link">Planos</a></li>
<li class="rodape-nav-item"><a href="#" class="rodape-nav-link">Blog</a></li>
<li class="rodape-nav-item"><a href="#" class="rodape-nav-link">Destaques</a></li>
<li class="rodape-nav-item"><a href="#" class="rodape-nav-link">Institucional</a></li>
<li class="rodape-nav-item"><a href="#" class="rodape-nav-link">Contato</a></li>
</ul>
</nav>
</div>
</footer>
<script src="js/carousel.js"></script>
<script src="js/dialog.js"></script>
</body>
</html>