Hugging Face's logo

Spaces:
rogernogueira
/
anycoder-677902c5
Running

App Files Community
rogernogueira commited on
Commit
aa9407c
·
verified ·
1 Parent(s): 0cb6538

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +997 -19
index.html CHANGED
@@ -1,19 +1,997 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="pt-BR">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Instituto Mulher - Empoderando Mulheres</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
9
+ <style>
10
+ :root {
11
+ --primary-color: #2563eb;
12
+ --secondary-color: #1d4ed8;
13
+ --accent-color: #f59e0b;
14
+ --text-color: #333;
15
+ --light-color: #f8fafc;
16
+ --dark-color: #1e293b;
17
+ --success-color: #10b981;
18
+ --warning-color: #f59e0b;
19
+ }
20
+
21
+ * {
22
+ margin: 0;
23
+ padding: 0;
24
+ box-sizing: border-box;
25
+ }
26
+
27
+ body {
28
+ font-family: 'Roboto', sans-serif;
29
+ line-height: 1.6;
30
+ color: var(--text-color);
31
+ overflow-x: hidden;
32
+ }
33
+
34
+ .container {
35
+ max-width: 1200px;
36
+ margin: 0 auto;
37
+ padding: 0 20px;
38
+ }
39
+
40
+ /* Header Styles */
41
+ header {
42
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
43
+ color: white;
44
+ padding: 1rem 0;
45
+ position: fixed;
46
+ width: 100%;
47
+ top: 0;
48
+ z-index: 1000;
49
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
50
+ }
51
+
52
+ .header-content {
53
+ display: flex;
54
+ justify-content: space-between;
55
+ align-items: center;
56
+ }
57
+
58
+ .logo {
59
+ font-family: 'Playfair Display', serif;
60
+ font-size: 1.8rem;
61
+ font-weight: 700;
62
+ letter-spacing: 1px;
63
+ }
64
+
65
+ .logo span {
66
+ color: var(--accent-color);
67
+ }
68
+
69
+ .built-with {
70
+ font-size: 0.8rem;
71
+ opacity: 0.8;
72
+ margin-top: 0.5rem;
73
+ }
74
+
75
+ .built-with a {
76
+ color: white;
77
+ text-decoration: none;
78
+ border-bottom: 1px solid rgba(255,255,255,0.5);
79
+ transition: all 0.3s ease;
80
+ }
81
+
82
+ .built-with a:hover {
83
+ border-bottom: 1px solid white;
84
+ }
85
+
86
+ /* Navigation */
87
+ nav ul {
88
+ display: flex;
89
+ list-style: none;
90
+ gap: 1.5rem;
91
+ }
92
+
93
+ nav a {
94
+ color: white;
95
+ text-decoration: none;
96
+ font-weight: 500;
97
+ transition: color 0.3s ease;
98
+ position: relative;
99
+ }
100
+
101
+ nav a:hover {
102
+ color: var(--accent-color);
103
+ }
104
+
105
+ nav a::after {
106
+ content: '';
107
+ position: absolute;
108
+ bottom: -5px;
109
+ left: 0;
110
+ width: 0;
111
+ height: 2px;
112
+ background-color: var(--accent-color);
113
+ transition: width 0.3s ease;
114
+ }
115
+
116
+ nav a:hover::after {
117
+ width: 100%;
118
+ }
119
+
120
+ /* Hero Section */
121
+ .hero {
122
+ background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://picsum.photos/seed/womenempowerment/1920/1080.jpg');
123
+ background-size: cover;
124
+ background-position: center;
125
+ height: 100vh;
126
+ display: flex;
127
+ align-items: center;
128
+ justify-content: center;
129
+ text-align: center;
130
+ color: white;
131
+ margin-top: 60px;
132
+ }
133
+
134
+ .hero-content {
135
+ max-width: 800px;
136
+ padding: 2rem;
137
+ }
138
+
139
+ .hero h1 {
140
+ font-family: 'Playfair Display', serif;
141
+ font-size: 3.5rem;
142
+ margin-bottom: 1rem;
143
+ line-height: 1.2;
144
+ }
145
+
146
+ .hero p {
147
+ font-size: 1.2rem;
148
+ margin-bottom: 2rem;
149
+ opacity: 0.9;
150
+ }
151
+
152
+ .btn {
153
+ display: inline-block;
154
+ padding: 12px 30px;
155
+ background-color: var(--accent-color);
156
+ color: white;
157
+ text-decoration: none;
158
+ border-radius: 50px;
159
+ font-weight: 500;
160
+ transition: all 0.3s ease;
161
+ border: none;
162
+ cursor: pointer;
163
+ font-size: 1rem;
164
+ }
165
+
166
+ .btn:hover {
167
+ background-color: #d97706;
168
+ transform: translateY(-2px);
169
+ box-shadow: 0 5px 15px rgba(245, 158, 11, 0.3);
170
+ }
171
+
172
+ .btn-secondary {
173
+ background-color: transparent;
174
+ border: 2px solid white;
175
+ margin-left: 15px;
176
+ }
177
+
178
+ .btn-secondary:hover {
179
+ background-color: white;
180
+ color: var(--primary-color);
181
+ }
182
+
183
+ /* About Section */
184
+ .about {
185
+ padding: 80px 0;
186
+ background-color: var(--light-color);
187
+ }
188
+
189
+ .section-title {
190
+ text-align: center;
191
+ margin-bottom: 50px;
192
+ }
193
+
194
+ .section-title h2 {
195
+ font-family: 'Playfair Display', serif;
196
+ font-size: 2.5rem;
197
+ color: var(--dark-color);
198
+ margin-bottom: 1rem;
199
+ }
200
+
201
+ .section-title p {
202
+ font-size: 1.1rem;
203
+ color: #666;
204
+ max-width: 600px;
205
+ margin: 0 auto;
206
+ }
207
+
208
+ .about-content {
209
+ display: grid;
210
+ grid-template-columns: 1fr 1fr;
211
+ gap: 40px;
212
+ align-items: center;
213
+ }
214
+
215
+ .about-text p {
216
+ font-size: 1.1rem;
217
+ margin-bottom: 1.5rem;
218
+ line-height: 1.8;
219
+ }
220
+
221
+ .about-image {
222
+ border-radius: 10px;
223
+ overflow: hidden;
224
+ box-shadow: 0 10px 30px rgba(0,0,0,0.1);
225
+ }
226
+
227
+ .about-image img {
228
+ width: 100%;
229
+ height: auto;
230
+ transition: transform 0.5s ease;
231
+ }
232
+
233
+ .about-image:hover img {
234
+ transform: scale(1.05);
235
+ }
236
+
237
+ /* Programs Section */
238
+ .programs {
239
+ padding: 80px 0;
240
+ }
241
+
242
+ .programs-grid {
243
+ display: grid;
244
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
245
+ gap: 30px;
246
+ }
247
+
248
+ .program-card {
249
+ background: white;
250
+ border-radius: 10px;
251
+ overflow: hidden;
252
+ box-shadow: 0 5px 15px rgba(0,0,0,0.08);
253
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
254
+ }
255
+
256
+ .program-card:hover {
257
+ transform: translateY(-10px);
258
+ box-shadow: 0 15px 30px rgba(0,0,0,0.15);
259
+ }
260
+
261
+ .program-image {
262
+ height: 200px;
263
+ overflow: hidden;
264
+ }
265
+
266
+ .program-image img {
267
+ width: 100%;
268
+ height: 100%;
269
+ object-fit: cover;
270
+ transition: transform 0.5s ease;
271
+ }
272
+
273
+ .program-card:hover .program-image img {
274
+ transform: scale(1.1);
275
+ }
276
+
277
+ .program-content {
278
+ padding: 25px;
279
+ }
280
+
281
+ .program-content h3 {
282
+ font-size: 1.3rem;
283
+ margin-bottom: 10px;
284
+ color: var(--primary-color);
285
+ }
286
+
287
+ .program-content p {
288
+ color: #666;
289
+ margin-bottom: 15px;
290
+ }
291
+
292
+ .program-content .btn {
293
+ font-size: 0.9rem;
294
+ padding: 8px 20px;
295
+ }
296
+
297
+ /* Testimonials Section */
298
+ .testimonials {
299
+ padding: 80px 0;
300
+ background-color: var(--light-color);
301
+ }
302
+
303
+ .testimonial-slider {
304
+ position: relative;
305
+ max-width: 800px;
306
+ margin: 0 auto;
307
+ }
308
+
309
+ .testimonial {
310
+ text-align: center;
311
+ padding: 40px;
312
+ display: none;
313
+ }
314
+
315
+ .testimonial.active {
316
+ display: block;
317
+ animation: fadeIn 0.5s ease;
318
+ }
319
+
320
+ @keyframes fadeIn {
321
+ from { opacity: 0; transform: translateY(20px); }
322
+ to { opacity: 1; transform: translateY(0); }
323
+ }
324
+
325
+ .testimonial-icon {
326
+ font-size: 3rem;
327
+ color: var(--accent-color);
328
+ margin-bottom: 20px;
329
+ }
330
+
331
+ .testimonial-text {
332
+ font-size: 1.1rem;
333
+ margin-bottom: 20px;
334
+ font-style: italic;
335
+ color: #555;
336
+ }
337
+
338
+ .testimonial-author {
339
+ font-weight: 500;
340
+ color: var(--dark-color);
341
+ }
342
+
343
+ .testimonial-nav {
344
+ display: flex;
345
+ justify-content: center;
346
+ gap: 10px;
347
+ margin-top: 30px;
348
+ }
349
+
350
+ .testimonial-dot {
351
+ width: 12px;
352
+ height: 12px;
353
+ border-radius: 50%;
354
+ background-color: #ddd;
355
+ cursor: pointer;
356
+ transition: background-color 0.3s ease;
357
+ }
358
+
359
+ .testimonial-dot.active {
360
+ background-color: var(--primary-color);
361
+ }
362
+
363
+ /* Contact Section */
364
+ .contact {
365
+ padding: 80px 0;
366
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
367
+ color: white;
368
+ }
369
+
370
+ .contact-content {
371
+ display: grid;
372
+ grid-template-columns: 1fr 1fr;
373
+ gap: 40px;
374
+ align-items: center;
375
+ }
376
+
377
+ .contact-info h2 {
378
+ font-size: 2.2rem;
379
+ margin-bottom: 20px;
380
+ }
381
+
382
+ .contact-info p {
383
+ margin-bottom: 30px;
384
+ opacity: 0.9;
385
+ }
386
+
387
+ .contact-details {
388
+ display: flex;
389
+ align-items: center;
390
+ margin-bottom: 15px;
391
+ }
392
+
393
+ .contact-details i {
394
+ font-size: 1.5rem;
395
+ margin-right: 15px;
396
+ color: var(--accent-color);
397
+ }
398
+
399
+ .contact-form {
400
+ background: white;
401
+ padding: 30px;
402
+ border-radius: 10px;
403
+ box-shadow: 0 10px 30px rgba(0,0,0,0.1);
404
+ }
405
+
406
+ .contact-form h3 {
407
+ color: var(--dark-color);
408
+ margin-bottom: 20px;
409
+ font-size: 1.5rem;
410
+ }
411
+
412
+ .form-group {
413
+ margin-bottom: 20px;
414
+ }
415
+
416
+ .form-group label {
417
+ display: block;
418
+ margin-bottom: 8px;
419
+ color: var(--dark-color);
420
+ font-weight: 500;
421
+ }
422
+
423
+ .form-group input,
424
+ .form-group textarea {
425
+ width: 100%;
426
+ padding: 12px;
427
+ border: 1px solid #ddd;
428
+ border-radius: 5px;
429
+ font-size: 1rem;
430
+ transition: border-color 0.3s ease;
431
+ }
432
+
433
+ .form-group input:focus,
434
+ .form-group textarea:focus {
435
+ outline: none;
436
+ border-color: var(--primary-color);
437
+ }
438
+
439
+ .form-group textarea {
440
+ resize: vertical;
441
+ min-height: 120px;
442
+ }
443
+
444
+ /* Footer */
445
+ footer {
446
+ background-color: var(--dark-color);
447
+ color: white;
448
+ padding: 40px 0;
449
+ }
450
+
451
+ .footer-content {
452
+ display: grid;
453
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
454
+ gap: 30px;
455
+ }
456
+
457
+ .footer-logo {
458
+ font-family: 'Playfair Display', serif;
459
+ font-size: 1.5rem;
460
+ margin-bottom: 20px;
461
+ }
462
+
463
+ .footer-logo span {
464
+ color: var(--accent-color);
465
+ }
466
+
467
+ .footer-about {
468
+ opacity: 0.8;
469
+ line-height: 1.8;
470
+ }
471
+
472
+ .footer-links h3 {
473
+ font-size: 1.2rem;
474
+ margin-bottom: 15px;
475
+ }
476
+
477
+ .footer-links ul {
478
+ list-style: none;
479
+ }
480
+
481
+ .footer-links ul li {
482
+ margin-bottom: 10px;
483
+ }
484
+
485
+ .footer-links a {
486
+ color: #aaa;
487
+ text-decoration: none;
488
+ transition: color 0.3s ease;
489
+ }
490
+
491
+ .footer-links a:hover {
492
+ color: white;
493
+ }
494
+
495
+ .social-links {
496
+ display: flex;
497
+ gap: 15px;
498
+ margin-top: 20px;
499
+ }
500
+
501
+ .social-links a {
502
+ display: flex;
503
+ align-items: center;
504
+ justify-content: center;
505
+ width: 40px;
506
+ height: 40px;
507
+ background-color: rgba(255,255,255,0.1);
508
+ border-radius: 50%;
509
+ transition: background-color 0.3s ease;
510
+ }
511
+
512
+ .social-links a:hover {
513
+ background-color: var(--accent-color);
514
+ }
515
+
516
+ .copyright {
517
+ text-align: center;
518
+ padding-top: 30px;
519
+ margin-top: 30px;
520
+ border-top: 1px solid rgba(255,255,255,0.1);
521
+ opacity: 0.7;
522
+ font-size: 0.9rem;
523
+ }
524
+
525
+ /* Mobile Menu */
526
+ .mobile-menu-toggle {
527
+ display: none;
528
+ background: none;
529
+ border: none;
530
+ color: white;
531
+ font-size: 1.5rem;
532
+ cursor: pointer;
533
+ }
534
+
535
+ /* Responsive Design */
536
+ @media (max-width: 992px) {
537
+ .about-content {
538
+ grid-template-columns: 1fr;
539
+ }
540
+
541
+ .contact-content {
542
+ grid-template-columns: 1fr;
543
+ }
544
+ }
545
+
546
+ @media (max-width: 768px) {
547
+ .hero h1 {
548
+ font-size: 2.5rem;
549
+ }
550
+
551
+ .hero p {
552
+ font-size: 1rem;
553
+ }
554
+
555
+ .programs-grid {
556
+ grid-template-columns: 1fr;
557
+ }
558
+
559
+ nav {
560
+ position: fixed;
561
+ top: 60px;
562
+ left: 0;
563
+ width: 100%;
564
+ background: var(--primary-color);
565
+ padding: 1rem;
566
+ transform: translateY(-100%);
567
+ transition: transform 0.3s ease;
568
+ z-index: 999;
569
+ }
570
+
571
+ nav.active {
572
+ transform: translateY(0);
573
+ }
574
+
575
+ nav ul {
576
+ flex-direction: column;
577
+ gap: 1rem;
578
+ }
579
+
580
+ .mobile-menu-toggle {
581
+ display: block;
582
+ }
583
+
584
+ .btn {
585
+ display: block;
586
+ margin: 1rem auto;
587
+ }
588
+
589
+ .btn-secondary {
590
+ margin-left: 0;
591
+ margin-top: 1rem;
592
+ }
593
+ }
594
+
595
+ @media (max-width: 576px) {
596
+ .hero h1 {
597
+ font-size: 2rem;
598
+ }
599
+
600
+ .section-title h2 {
601
+ font-size: 2rem;
602
+ }
603
+ }
604
+
605
+ /* Animations */
606
+ .fade-in {
607
+ opacity: 0;
608
+ transform: translateY(30px);
609
+ transition: opacity 0.6s ease, transform 0.6s ease;
610
+ }
611
+
612
+ .fade-in.visible {
613
+ opacity: 1;
614
+ transform: translateY(0);
615
+ }
616
+
617
+ /* Scroll to top button */
618
+ .scroll-top {
619
+ position: fixed;
620
+ bottom: 30px;
621
+ right: 30px;
622
+ width: 50px;
623
+ height: 50px;
624
+ background-color: var(--primary-color);
625
+ color: white;
626
+ border: none;
627
+ border-radius: 50%;
628
+ cursor: pointer;
629
+ display: flex;
630
+ align-items: center;
631
+ justify-content: center;
632
+ opacity: 0;
633
+ transition: opacity 0.3s ease;
634
+ z-index: 999;
635
+ }
636
+
637
+ .scroll-top.visible {
638
+ opacity: 1;
639
+ }
640
+
641
+ .scroll-top:hover {
642
+ background-color: var(--secondary-color);
643
+ }
644
+ </style>
645
+ </head>
646
+ <body>
647
+ <header>
648
+ <div class="container header-content">
649
+ <div>
650
+ <div class="logo">Instituto <span>Mulher</span></div>
651
+ <div class="built-with">
652
+ Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a>
653
+ </div>
654
+ </div>
655
+ <nav>
656
+ <ul>
657
+ <li><a href="#home">Início</a></li>
658
+ <li><a href="#about">Sobre</a></li>
659
+ <li><a href="#programs">Programas</a></li>
660
+ <li><a href="#testimonials">Depoimentos</a></li>
661
+ <li><a href="#contact">Contato</a></li>
662
+ </ul>
663
+ </nav>
664
+ <button class="mobile-menu-toggle" id="mobileMenuToggle">
665
+ <i class="fas fa-bars"></i>
666
+ </button>
667
+ </div>
668
+ </header>
669
+
670
+ <section id="home" class="hero">
671
+ <div class="hero-content">
672
+ <h1>Empoderando Mulheres, Transformando Futuros</h1>
673
+ <p>Juntos, construímos um mundo onde todas as mulheres têm oportunidades iguais para prosperar e realizar seus sonhos.</p>
674
+ <div>
675
+ <a href="#contact" class="btn">Saiba Mais</a>
676
+ <a href="#programs" class="btn btn-secondary">Nossos Programas</a>
677
+ </div>
678
+ </div>
679
+ </section>
680
+
681
+ <section id="about" class="about">
682
+ <div class="container">
683
+ <div class="section-title">
684
+ <h2>Nossa Missão</h2>
685
+ <p>Conheça nosso compromisso com o empoderamento feminino e a promoção da igualdade de gênero.</p>
686
+ </div>
687
+ <div class="about-content fade-in">
688
+ <div class="about-text">
689
+ <p>O Instituto Mulher é uma organização dedicada a promover o desenvolvimento e o empoderamento das mulheres em todas as esferas da sociedade. Fundada em 2010, temos como missão criar oportunidades, fornecer educação e capacitação, e apoiar mulheres em suas jornadas pessoais e profissionais.</p>
690
+ <p>Nosso trabalho abrange desde programas de educação e capacitação profissional até iniciativas de saúde e bem-estar, sempre com o objetivo de fortalecer a autonomia feminina e promover a igualdade de gênero.</p>
691
+ </div>
692
+ <div class="about-image">
693
+ <img src="https://picsum.photos/seed/womengroup/600/400.jpg" alt="Mulheres em grupo">
694
+ </div>
695
+ </div>
696
+ </div>
697
+ </section>
698
+
699
+ <section id="programs" class="programs">
700
+ <div class="container">
701
+ <div class="section-title">
702
+ <h2>Nossos Programas</h2>
703
+ <p>Descubra como estamos fazendo a diferença na vida das mulheres através de nossos programas inovadores.</p>
704
+ </div>
705
+ <div class="programs-grid">
706
+ <div class="program-card fade-in">
707
+ <div class="program-image">
708
+ <img src="https://picsum.photos/seed/education/400/200.jpg" alt="Educação">
709
+ </div>
710
+ <div class="program-content">
711
+ <h3>Educação e Capacitação</h3>
712
+ <p>Oferecemos cursos e workshops que capacitam mulheres em diversas áreas, desde tecnologia até empreendedorismo, preparando-as para o mercado de trabalho.</p>
713
+ <a href="#" class="btn">Saiba Mais</a>
714
+ </div>
715
+ </div>
716
+ <div class="program-card fade-in">
717
+ <div class="program-image">
718
+ <img src="https://picsum.photos/seed/health/400/200.jpg" alt="Saúde">
719
+ </div>
720
+ <div class="program-content">
721
+ <h3>Saúde e Bem-Estar</h3>
722
+ <p>Programas de saúde preventiva, apoio psicológico e bem-estar, promovendo a saúde integral das mulheres em todas as fases da vida.</p>
723
+ <a href="#" class="btn">Saiba Mais</a>
724
+ </div>
725
+ </div>
726
+ <div class="program-card fade-in">
727
+ <div class="program-image">
728
+ <img src="https://picsum.photos/seed/leadership/400/200.jpg" alt="Liderança">
729
+ </div>
730
+ <div class="program-content">
731
+ <h3>Liderança e Empreendedorismo</h3>
732
+ <p>Desenvolvemos programas que capacitam mulheres a assumirem posições de liderança e a criarem seus próprios negócios, fomentando o empreendedorismo feminino.</p>
733
+ <a href="#" class="btn">Saiba Mais</a>
734
+ </div>
735
+ </div>
736
+ </div>
737
+ </div>
738
+ </section>
739
+
740
+ <section id="testimonials" class="testimonials">
741
+ <div class="container">
742
+ <div class="section-title">
743
+ <h2>Depoimentos</h2>
744
+ <p>O que nossas beneficiárias dizem sobre nosso trabalho.</p>
745
+ </div>
746
+ <div class="testimonial-slider">
747
+ <div class="testimonial active">
748
+ <div class="testimonial-icon">
749
+ <i class="fas fa-quote-left"></i>
750
+ </div>
751
+ <p class="testimonial-text">"O Instituto Mulher mudou minha vida. Através dos cursos de capacitação, consegui um emprego melhor e agora sou independente financeiramente."</p>
752
+ <p class="testimonial-author">- Maria Silva, 32 anos</p>
753
+ </div>
754
+ <div class="testimonial">
755
+ <div class="testimonial-icon">
756
+ <i class="fas fa-quote-left"></i>
757
+ </div>
758
+ <p class="testimonial-text">"Nunca pensei que seria capaz de liderar meu próprio negócio. O apoio e as orientações recebidas foram fundamentais para meu sucesso."</p>
759
+ <p class="testimonial-author">- Ana Pereira, 28 anos</p>
760
+ </div>
761
+ <div class="testimonial">
762
+ <div class="testimonial-icon">
763
+ <i class="fas fa-quote-left"></i>
764
+ </div>
765
+ <p class="testimonial-text">"Agradeço por me dar a oportunidade de aprender e crescer. Hoje sou uma mulher mais forte e confiante graças ao Instituto Mulher."</p>
766
+ <p class="testimonial-author">- Carla Souza, 35 anos</p>
767
+ </div>
768
+ <div class="testimonial-nav">
769
+ <span class="testimonial-dot active" data-slide="0"></span>
770
+ <span class="testimonial-dot" data-slide="1"></span>
771
+ <span class="testimonial-dot" data-slide="2"></span>
772
+ </div>
773
+ </div>
774
+ </div>
775
+ </section>
776
+
777
+ <section id="contact" class="contact">
778
+ <div class="container">
779
+ <div class="contact-content">
780
+ <div class="contact-info">
781
+ <h2>Entre em Contato</h2>
782
+ <p>Fale conosco e saiba como podemos ajudar você ou como você pode nos ajudar a continuar nosso trabalho.</p>
783
+ <div class="contact-details">
784
+ <i class="fas fa-map-marker-alt"></i>
785
+ <span>Rua das Flores, 123 - São Paulo, SP</span>
786
+ </div>
787
+ <div class="contact-details">
788
+ <i class="fas fa-phone"></i>
789
+ <span>(11) 1234-5678</span>
790
+ </div>
791
+ <div class="contact-details">
792
+ <i class="fas fa-envelope"></i>
793
+ <span>contato@institutomulher.org.br</span>
794
+ </div>
795
+ <div class="social-links">
796
+ <a href="#"><i class="fab fa-facebook-f"></i></a>
797
+ <a href="#"><i class="fab fa-instagram"></i></a>
798
+ <a href="#"><i class="fab fa-twitter"></i></a>
799
+ <a href="#"><i class="fab fa-linkedin-in"></i></a>
800
+ </div>
801
+ </div>
802
+ <div class="contact-form">
803
+ <h3>Envie-nos uma Mensagem</h3>
804
+ <form id="contactForm">
805
+ <div class="form-group">
806
+ <label for="name">Nome Completo</label>
807
+ <input type="text" id="name" name="name" required>
808
+ </div>
809
+ <div class="form-group">
810
+ <label for="email">E-mail</label>
811
+ <input type="email" id="email" name="email" required>
812
+ </div>
813
+ <div class="form-group">
814
+ <label for="subject">Assunto</label>
815
+ <input type="text" id="subject" name="subject" required>
816
+ </div>
817
+ <div class="form-group">
818
+ <label for="message">Mensagem</label>
819
+ <textarea id="message" name="message" required></textarea>
820
+ </div>
821
+ <button type="submit" class="btn">Enviar Mensagem</button>
822
+ </form>
823
+ </div>
824
+ </div>
825
+ </div>
826
+ </section>
827
+
828
+ <footer>
829
+ <div class="container">
830
+ <div class="footer-content">
831
+ <div>
832
+ <div class="footer-logo">Instituto <span>Mulher</span></div>
833
+ <p class="footer-about">Empoderando mulheres, transformando futuros. Juntos, construímos um mundo mais igualitário.</p>
834
+ </div>
835
+ <div class="footer-links">
836
+ <h3>Links Rápidos</h3>
837
+ <ul>
838
+ <li><a href="#home">Início</a></li>
839
+ <li><a href="#about">Sobre Nós</a></li>
840
+ <li><a href="#programs">Programas</a></li>
841
+ <li><a href="#contact">Contato</a></li>
842
+ </ul>
843
+ </div>
844
+ <div class="footer-links">
845
+ <h3>Recursos</h3>
846
+ <ul>
847
+ <li><a href="#">Blog</a></li>
848
+ <li><a href="#">Eventos</a></li>
849
+ <li><a href="#">Parceiros</a></li>
850
+ <li><a href="#">Doações</a></li>
851
+ </ul>
852
+ </div>
853
+ <div>
854
+ <h3>Redes Sociais</h3>
855
+ <div class="social-links">
856
+ <a href="#"><i class="fab fa-facebook-f"></i></a>
857
+ <a href="#"><i class="fab fa-instagram"></i></a>
858
+ <a href="#"><i class="fab fa-twitter"></i></a>
859
+ <a href="#"><i class="fab fa-linkedin-in"></i></a>
860
+ </div>
861
+ </div>
862
+ </div>
863
+ <div class="copyright">
864
+ <p>&copy; 2023 Instituto Mulher. Todos os direitos reservados.</p>
865
+ </div>
866
+ </div>
867
+ </footer>
868
+
869
+ <button class="scroll-top" id="scrollTop">
870
+ <i class="fas fa-arrow-up"></i>
871
+ </button>
872
+
873
+ <script>
874
+ // Mobile menu toggle
875
+ const mobileMenuToggle = document.getElementById('mobileMenuToggle');
876
+ const nav = document.querySelector('nav');
877
+
878
+ mobileMenuToggle.addEventListener('click', () => {
879
+ nav.classList.toggle('active');
880
+ mobileMenuToggle.innerHTML = nav.classList.contains('active')
881
+ ? '<i class="fas fa-times"></i>'
882
+ : '<i class="fas fa-bars"></i>';
883
+ });
884
+
885
+ // Smooth scrolling for navigation links
886
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
887
+ anchor.addEventListener('click', function (e) {
888
+ e.preventDefault();
889
+ const target = document.querySelector(this.getAttribute('href'));
890
+ if (target) {
891
+ target.scrollIntoView({
892
+ behavior: 'smooth',
893
+ block: 'start'
894
+ });
895
+ // Close mobile menu if open
896
+ nav.classList.remove('active');
897
+ mobileMenuToggle.innerHTML = '<i class="fas fa-bars"></i>';
898
+ }
899
+ });
900
+ });
901
+
902
+ // Testimonial slider
903
+ const testimonials = document.querySelectorAll('.testimonial');
904
+ const dots = document.querySelectorAll('.testimonial-dot');
905
+ let currentSlide = 0;
906
+
907
+ function showSlide(index) {
908
+ testimonials.forEach(testimonial => testimonial.classList.remove('active'));
909
+ dots.forEach(dot => dot.classList.remove('active'));
910
+
911
+ testimonials[index].classList.add('active');
912
+ dots[index].classList.add('active');
913
+ currentSlide = index;
914
+ }
915
+
916
+ dots.forEach((dot, index) => {
917
+ dot.addEventListener('click', () => showSlide(index));
918
+ });
919
+
920
+ // Auto-rotate testimonials
921
+ setInterval(() => {
922
+ const nextSlide = (currentSlide + 1) % testimonials.length;
923
+ showSlide(nextSlide);
924
+ }, 5000);
925
+
926
+ // Fade in animation on scroll
927
+ const fadeElements = document.querySelectorAll('.fade-in');
928
+
929
+ function checkFade() {
930
+ fadeElements.forEach(element => {
931
+ const elementTop = element.getBoundingClientRect().top;
932
+ const elementBottom = element.getBoundingClientRect().bottom;
933
+
934
+ if (elementTop < window.innerHeight - 100 && elementBottom > 0) {
935
+ element.classList.add('visible');
936
+ }
937
+ });
938
+ }
939
+
940
+ window.addEventListener('scroll', checkSlide);
941
+ window.addEventListener('load', checkSlide);
942
+
943
+ // Scroll to top button
944
+ const scrollTopBtn = document.getElementById('scrollTop');
945
+
946
+ window.addEventListener('scroll', () => {
947
+ if (window.pageYOffset > 300) {
948
+ scrollTopBtn.classList.add('visible');
949
+ } else {
950
+ scrollTopBtn.classList.remove('visible');
951
+ }
952
+ });
953
+
954
+ scrollTopBtn.addEventListener('click', () => {
955
+ window.scrollTo({
956
+ top: 0,
957
+ behavior: 'smooth'
958
+ });
959
+ });
960
+
961
+ // Contact form submission
962
+ const contactForm = document.getElementById('contactForm');
963
+
964
+ contactForm.addEventListener('submit', (e) => {
965
+ e.preventDefault();
966
+
967
+ // Simulate form submission
968
+ const formData = new FormData(contactForm);
969
+ const formObject = Object.fromEntries(formData);
970
+
971
+ // Show success message (in a real app, you'd send this to a server)
972
+ alert(`Obrigado pelo seu contato, ${formObject.name}! Entraremos em contato em breve.`);
973
+
974
+ // Reset form
975
+ contactForm.reset();
976
+ });
977
+
978
+ // Add intersection observer for fade animations
979
+ const observerOptions = {
980
+ threshold: 0.1,
981
+ rootMargin: '0px 0px -50px 0px'
982
+ };
983
+
984
+ const observer = new IntersectionObserver((entries) => {
985
+ entries.forEach(entry => {
986
+ if (entry.isIntersecting) {
987
+ entry.target.classList.add('visible');
988
+ }
989
+ });
990
+ }, observerOptions);
991
+
992
+ fadeElements.forEach(element => {
993
+ observer.observe(element);
994
+ });
995
+ </script>
996
+ </body>
997
+ </html>