Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Instituto Mulher - Empoderando Mulheres</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --primary-color: #2563eb; | |
| --secondary-color: #1d4ed8; | |
| --accent-color: #f59e0b; | |
| --text-color: #333; | |
| --light-color: #f8fafc; | |
| --dark-color: #1e293b; | |
| --success-color: #10b981; | |
| --warning-color: #f59e0b; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Roboto', sans-serif; | |
| line-height: 1.6; | |
| color: var(--text-color); | |
| overflow-x: hidden; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 20px; | |
| } | |
| /* Header Styles */ | |
| header { | |
| background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); | |
| color: white; | |
| padding: 1rem 0; | |
| position: fixed; | |
| width: 100%; | |
| top: 0; | |
| z-index: 1000; | |
| box-shadow: 0 2px 10px rgba(0,0,0,0.1); | |
| } | |
| .header-content { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo { | |
| font-family: 'Playfair Display', serif; | |
| font-size: 1.8rem; | |
| font-weight: 700; | |
| letter-spacing: 1px; | |
| } | |
| .logo span { | |
| color: var(--accent-color); | |
| } | |
| .built-with { | |
| font-size: 0.8rem; | |
| opacity: 0.8; | |
| margin-top: 0.5rem; | |
| } | |
| .built-with a { | |
| color: white; | |
| text-decoration: none; | |
| border-bottom: 1px solid rgba(255,255,255,0.5); | |
| transition: all 0.3s ease; | |
| } | |
| .built-with a:hover { | |
| border-bottom: 1px solid white; | |
| } | |
| /* Navigation */ | |
| nav ul { | |
| display: flex; | |
| list-style: none; | |
| gap: 1.5rem; | |
| } | |
| nav a { | |
| color: white; | |
| text-decoration: none; | |
| font-weight: 500; | |
| transition: color 0.3s ease; | |
| position: relative; | |
| } | |
| nav a:hover { | |
| color: var(--accent-color); | |
| } | |
| nav a::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -5px; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background-color: var(--accent-color); | |
| transition: width 0.3s ease; | |
| } | |
| nav a:hover::after { | |
| width: 100%; | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://picsum.photos/seed/womenempowerment/1920/1080.jpg'); | |
| background-size: cover; | |
| background-position: center; | |
| height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| text-align: center; | |
| color: white; | |
| margin-top: 60px; | |
| } | |
| .hero-content { | |
| max-width: 800px; | |
| padding: 2rem; | |
| } | |
| .hero h1 { | |
| font-family: 'Playfair Display', serif; | |
| font-size: 3.5rem; | |
| margin-bottom: 1rem; | |
| line-height: 1.2; | |
| } | |
| .hero p { | |
| font-size: 1.2rem; | |
| margin-bottom: 2rem; | |
| opacity: 0.9; | |
| } | |
| .btn { | |
| display: inline-block; | |
| padding: 12px 30px; | |
| background-color: var(--accent-color); | |
| color: white; | |
| text-decoration: none; | |
| border-radius: 50px; | |
| font-weight: 500; | |
| transition: all 0.3s ease; | |
| border: none; | |
| cursor: pointer; | |
| font-size: 1rem; | |
| } | |
| .btn:hover { | |
| background-color: #d97706; | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(245, 158, 11, 0.3); | |
| } | |
| .btn-secondary { | |
| background-color: transparent; | |
| border: 2px solid white; | |
| margin-left: 15px; | |
| } | |
| .btn-secondary:hover { | |
| background-color: white; | |
| color: var(--primary-color); | |
| } | |
| /* About Section */ | |
| .about { | |
| padding: 80px 0; | |
| background-color: var(--light-color); | |
| } | |
| .section-title { | |
| text-align: center; | |
| margin-bottom: 50px; | |
| } | |
| .section-title h2 { | |
| font-family: 'Playfair Display', serif; | |
| font-size: 2.5rem; | |
| color: var(--dark-color); | |
| margin-bottom: 1rem; | |
| } | |
| .section-title p { | |
| font-size: 1.1rem; | |
| color: #666; | |
| max-width: 600px; | |
| margin: 0 auto; | |
| } | |
| .about-content { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 40px; | |
| align-items: center; | |
| } | |
| .about-text p { | |
| font-size: 1.1rem; | |
| margin-bottom: 1.5rem; | |
| line-height: 1.8; | |
| } | |
| .about-image { | |
| border-radius: 10px; | |
| overflow: hidden; | |
| box-shadow: 0 10px 30px rgba(0,0,0,0.1); | |
| } | |
| .about-image img { | |
| width: 100%; | |
| height: auto; | |
| transition: transform 0.5s ease; | |
| } | |
| .about-image:hover img { | |
| transform: scale(1.05); | |
| } | |
| /* Programs Section */ | |
| .programs { | |
| padding: 80px 0; | |
| } | |
| .programs-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 30px; | |
| } | |
| .program-card { | |
| background: white; | |
| border-radius: 10px; | |
| overflow: hidden; | |
| box-shadow: 0 5px 15px rgba(0,0,0,0.08); | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .program-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 15px 30px rgba(0,0,0,0.15); | |
| } | |
| .program-image { | |
| height: 200px; | |
| overflow: hidden; | |
| } | |
| .program-image img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| transition: transform 0.5s ease; | |
| } | |
| .program-card:hover .program-image img { | |
| transform: scale(1.1); | |
| } | |
| .program-content { | |
| padding: 25px; | |
| } | |
| .program-content h3 { | |
| font-size: 1.3rem; | |
| margin-bottom: 10px; | |
| color: var(--primary-color); | |
| } | |
| .program-content p { | |
| color: #666; | |
| margin-bottom: 15px; | |
| } | |
| .program-content .btn { | |
| font-size: 0.9rem; | |
| padding: 8px 20px; | |
| } | |
| /* Testimonials Section */ | |
| .testimonials { | |
| padding: 80px 0; | |
| background-color: var(--light-color); | |
| } | |
| .testimonial-slider { | |
| position: relative; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| } | |
| .testimonial { | |
| text-align: center; | |
| padding: 40px; | |
| display: none; | |
| } | |
| .testimonial.active { | |
| display: block; | |
| animation: fadeIn 0.5s ease; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .testimonial-icon { | |
| font-size: 3rem; | |
| color: var(--accent-color); | |
| margin-bottom: 20px; | |
| } | |
| .testimonial-text { | |
| font-size: 1.1rem; | |
| margin-bottom: 20px; | |
| font-style: italic; | |
| color: #555; | |
| } | |
| .testimonial-author { | |
| font-weight: 500; | |
| color: var(--dark-color); | |
| } | |
| .testimonial-nav { | |
| display: flex; | |
| justify-content: center; | |
| gap: 10px; | |
| margin-top: 30px; | |
| } | |
| .testimonial-dot { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| background-color: #ddd; | |
| cursor: pointer; | |
| transition: background-color 0.3s ease; | |
| } | |
| .testimonial-dot.active { | |
| background-color: var(--primary-color); | |
| } | |
| /* Contact Section */ | |
| .contact { | |
| padding: 80px 0; | |
| background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); | |
| color: white; | |
| } | |
| .contact-content { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 40px; | |
| align-items: center; | |
| } | |
| .contact-info h2 { | |
| font-size: 2.2rem; | |
| margin-bottom: 20px; | |
| } | |
| .contact-info p { | |
| margin-bottom: 30px; | |
| opacity: 0.9; | |
| } | |
| .contact-details { | |
| display: flex; | |
| align-items: center; | |
| margin-bottom: 15px; | |
| } | |
| .contact-details i { | |
| font-size: 1.5rem; | |
| margin-right: 15px; | |
| color: var(--accent-color); | |
| } | |
| .contact-form { | |
| background: white; | |
| padding: 30px; | |
| border-radius: 10px; | |
| box-shadow: 0 10px 30px rgba(0,0,0,0.1); | |
| } | |
| .contact-form h3 { | |
| color: var(--dark-color); | |
| margin-bottom: 20px; | |
| font-size: 1.5rem; | |
| } | |
| .form-group { | |
| margin-bottom: 20px; | |
| } | |
| .form-group label { | |
| display: block; | |
| margin-bottom: 8px; | |
| color: var(--dark-color); | |
| font-weight: 500; | |
| } | |
| .form-group input, | |
| .form-group textarea { | |
| width: 100%; | |
| padding: 12px; | |
| border: 1px solid #ddd; | |
| border-radius: 5px; | |
| font-size: 1rem; | |
| transition: border-color 0.3s ease; | |
| } | |
| .form-group input:focus, | |
| .form-group textarea:focus { | |
| outline: none; | |
| border-color: var(--primary-color); | |
| } | |
| .form-group textarea { | |
| resize: vertical; | |
| min-height: 120px; | |
| } | |
| /* Footer */ | |
| footer { | |
| background-color: var(--dark-color); | |
| color: white; | |
| padding: 40px 0; | |
| } | |
| .footer-content { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 30px; | |
| } | |
| .footer-logo { | |
| font-family: 'Playfair Display', serif; | |
| font-size: 1.5rem; | |
| margin-bottom: 20px; | |
| } | |
| .footer-logo span { | |
| color: var(--accent-color); | |
| } | |
| .footer-about { | |
| opacity: 0.8; | |
| line-height: 1.8; | |
| } | |
| .footer-links h3 { | |
| font-size: 1.2rem; | |
| margin-bottom: 15px; | |
| } | |
| .footer-links ul { | |
| list-style: none; | |
| } | |
| .footer-links ul li { | |
| margin-bottom: 10px; | |
| } | |
| .footer-links a { | |
| color: #aaa; | |
| text-decoration: none; | |
| transition: color 0.3s ease; | |
| } | |
| .footer-links a:hover { | |
| color: white; | |
| } | |
| .social-links { | |
| display: flex; | |
| gap: 15px; | |
| margin-top: 20px; | |
| } | |
| .social-links a { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 40px; | |
| height: 40px; | |
| background-color: rgba(255,255,255,0.1); | |
| border-radius: 50%; | |
| transition: background-color 0.3s ease; | |
| } | |
| .social-links a:hover { | |
| background-color: var(--accent-color); | |
| } | |
| .copyright { | |
| text-align: center; | |
| padding-top: 30px; | |
| margin-top: 30px; | |
| border-top: 1px solid rgba(255,255,255,0.1); | |
| opacity: 0.7; | |
| font-size: 0.9rem; | |
| } | |
| /* Mobile Menu */ | |
| .mobile-menu-toggle { | |
| display: none; | |
| background: none; | |
| border: none; | |
| color: white; | |
| font-size: 1.5rem; | |
| cursor: pointer; | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 992px) { | |
| .about-content { | |
| grid-template-columns: 1fr; | |
| } | |
| .contact-content { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .hero h1 { | |
| font-size: 2.5rem; | |
| } | |
| .hero p { | |
| font-size: 1rem; | |
| } | |
| .programs-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| nav { | |
| position: fixed; | |
| top: 60px; | |
| left: 0; | |
| width: 100%; | |
| background: var(--primary-color); | |
| padding: 1rem; | |
| transform: translateY(-100%); | |
| transition: transform 0.3s ease; | |
| z-index: 999; | |
| } | |
| nav.active { | |
| transform: translateY(0); | |
| } | |
| nav ul { | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| .mobile-menu-toggle { | |
| display: block; | |
| } | |
| .btn { | |
| display: block; | |
| margin: 1rem auto; | |
| } | |
| .btn-secondary { | |
| margin-left: 0; | |
| margin-top: 1rem; | |
| } | |
| } | |
| @media (max-width: 576px) { | |
| .hero h1 { | |
| font-size: 2rem; | |
| } | |
| .section-title h2 { | |
| font-size: 2rem; | |
| } | |
| } | |
| /* Animations */ | |
| .fade-in { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| transition: opacity 0.6s ease, transform 0.6s ease; | |
| } | |
| .fade-in.visible { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| /* Scroll to top button */ | |
| .scroll-top { | |
| position: fixed; | |
| bottom: 30px; | |
| right: 30px; | |
| width: 50px; | |
| height: 50px; | |
| background-color: var(--primary-color); | |
| color: white; | |
| border: none; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| z-index: 999; | |
| } | |
| .scroll-top.visible { | |
| opacity: 1; | |
| } | |
| .scroll-top:hover { | |
| background-color: var(--secondary-color); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="container header-content"> | |
| <div> | |
| <div class="logo">Instituto <span>Mulher</span></div> | |
| <div class="built-with"> | |
| Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a> | |
| </div> | |
| </div> | |
| <nav> | |
| <ul> | |
| <li><a href="#home">Início</a></li> | |
| <li><a href="#about">Sobre</a></li> | |
| <li><a href="#programs">Programas</a></li> | |
| <li><a href="#testimonials">Depoimentos</a></li> | |
| <li><a href="#contact">Contato</a></li> | |
| </ul> | |
| </nav> | |
| <button class="mobile-menu-toggle" id="mobileMenuToggle"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </header> | |
| <section id="home" class="hero"> | |
| <div class="hero-content"> | |
| <h1>Empoderando Mulheres, Transformando Futuros</h1> | |
| <p>Juntos, construímos um mundo onde todas as mulheres têm oportunidades iguais para prosperar e realizar seus sonhos.</p> | |
| <div> | |
| <a href="#contact" class="btn">Saiba Mais</a> | |
| <a href="#programs" class="btn btn-secondary">Nossos Programas</a> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="about" class="about"> | |
| <div class="container"> | |
| <div class="section-title"> | |
| <h2>Nossa Missão</h2> | |
| <p>Conheça nosso compromisso com o empoderamento feminino e a promoção da igualdade de gênero.</p> | |
| </div> | |
| <div class="about-content fade-in"> | |
| <div class="about-text"> | |
| <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> | |
| <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> | |
| </div> | |
| <div class="about-image"> | |
| <img src="https://picsum.photos/seed/womengroup/600/400.jpg" alt="Mulheres em grupo"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="programs" class="programs"> | |
| <div class="container"> | |
| <div class="section-title"> | |
| <h2>Nossos Programas</h2> | |
| <p>Descubra como estamos fazendo a diferença na vida das mulheres através de nossos programas inovadores.</p> | |
| </div> | |
| <div class="programs-grid"> | |
| <div class="program-card fade-in"> | |
| <div class="program-image"> | |
| <img src="https://picsum.photos/seed/education/400/200.jpg" alt="Educação"> | |
| </div> | |
| <div class="program-content"> | |
| <h3>Educação e Capacitação</h3> | |
| <p>Oferecemos cursos e workshops que capacitam mulheres em diversas áreas, desde tecnologia até empreendedorismo, preparando-as para o mercado de trabalho.</p> | |
| <a href="#" class="btn">Saiba Mais</a> | |
| </div> | |
| </div> | |
| <div class="program-card fade-in"> | |
| <div class="program-image"> | |
| <img src="https://picsum.photos/seed/health/400/200.jpg" alt="Saúde"> | |
| </div> | |
| <div class="program-content"> | |
| <h3>Saúde e Bem-Estar</h3> | |
| <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> | |
| <a href="#" class="btn">Saiba Mais</a> | |
| </div> | |
| </div> | |
| <div class="program-card fade-in"> | |
| <div class="program-image"> | |
| <img src="https://picsum.photos/seed/leadership/400/200.jpg" alt="Liderança"> | |
| </div> | |
| <div class="program-content"> | |
| <h3>Liderança e Empreendedorismo</h3> | |
| <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> | |
| <a href="#" class="btn">Saiba Mais</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="testimonials" class="testimonials"> | |
| <div class="container"> | |
| <div class="section-title"> | |
| <h2>Depoimentos</h2> | |
| <p>O que nossas beneficiárias dizem sobre nosso trabalho.</p> | |
| </div> | |
| <div class="testimonial-slider"> | |
| <div class="testimonial active"> | |
| <div class="testimonial-icon"> | |
| <i class="fas fa-quote-left"></i> | |
| </div> | |
| <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> | |
| <p class="testimonial-author">- Maria Silva, 32 anos</p> | |
| </div> | |
| <div class="testimonial"> | |
| <div class="testimonial-icon"> | |
| <i class="fas fa-quote-left"></i> | |
| </div> | |
| <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> | |
| <p class="testimonial-author">- Ana Pereira, 28 anos</p> | |
| </div> | |
| <div class="testimonial"> | |
| <div class="testimonial-icon"> | |
| <i class="fas fa-quote-left"></i> | |
| </div> | |
| <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> | |
| <p class="testimonial-author">- Carla Souza, 35 anos</p> | |
| </div> | |
| <div class="testimonial-nav"> | |
| <span class="testimonial-dot active" data-slide="0"></span> | |
| <span class="testimonial-dot" data-slide="1"></span> | |
| <span class="testimonial-dot" data-slide="2"></span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="contact" class="contact"> | |
| <div class="container"> | |
| <div class="contact-content"> | |
| <div class="contact-info"> | |
| <h2>Entre em Contato</h2> | |
| <p>Fale conosco e saiba como podemos ajudar você ou como você pode nos ajudar a continuar nosso trabalho.</p> | |
| <div class="contact-details"> | |
| <i class="fas fa-map-marker-alt"></i> | |
| <span>Rua das Flores, 123 - São Paulo, SP</span> | |
| </div> | |
| <div class="contact-details"> | |
| <i class="fas fa-phone"></i> | |
| <span>(11) 1234-5678</span> | |
| </div> | |
| <div class="contact-details"> | |
| <i class="fas fa-envelope"></i> | |
| <span>contato@institutomulher.org.br</span> | |
| </div> | |
| <div class="social-links"> | |
| <a href="#"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#"><i class="fab fa-instagram"></i></a> | |
| <a href="#"><i class="fab fa-twitter"></i></a> | |
| <a href="#"><i class="fab fa-linkedin-in"></i></a> | |
| </div> | |
| </div> | |
| <div class="contact-form"> | |
| <h3>Envie-nos uma Mensagem</h3> | |
| <form id="contactForm"> | |
| <div class="form-group"> | |
| <label for="name">Nome Completo</label> | |
| <input type="text" id="name" name="name" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="email">E-mail</label> | |
| <input type="email" id="email" name="email" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="subject">Assunto</label> | |
| <input type="text" id="subject" name="subject" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="message">Mensagem</label> | |
| <textarea id="message" name="message" required></textarea> | |
| </div> | |
| <button type="submit" class="btn">Enviar Mensagem</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <footer> | |
| <div class="container"> | |
| <div class="footer-content"> | |
| <div> | |
| <div class="footer-logo">Instituto <span>Mulher</span></div> | |
| <p class="footer-about">Empoderando mulheres, transformando futuros. Juntos, construímos um mundo mais igualitário.</p> | |
| </div> | |
| <div class="footer-links"> | |
| <h3>Links Rápidos</h3> | |
| <ul> | |
| <li><a href="#home">Início</a></li> | |
| <li><a href="#about">Sobre Nós</a></li> | |
| <li><a href="#programs">Programas</a></li> | |
| <li><a href="#contact">Contato</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-links"> | |
| <h3>Recursos</h3> | |
| <ul> | |
| <li><a href="#">Blog</a></li> | |
| <li><a href="#">Eventos</a></li> | |
| <li><a href="#">Parceiros</a></li> | |
| <li><a href="#">Doações</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3>Redes Sociais</h3> | |
| <div class="social-links"> | |
| <a href="#"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#"><i class="fab fa-instagram"></i></a> | |
| <a href="#"><i class="fab fa-twitter"></i></a> | |
| <a href="#"><i class="fab fa-linkedin-in"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="copyright"> | |
| <p>© 2023 Instituto Mulher. Todos os direitos reservados.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <button class="scroll-top" id="scrollTop"> | |
| <i class="fas fa-arrow-up"></i> | |
| </button> | |
| <script> | |
| // Mobile menu toggle | |
| const mobileMenuToggle = document.getElementById('mobileMenuToggle'); | |
| const nav = document.querySelector('nav'); | |
| mobileMenuToggle.addEventListener('click', () => { | |
| nav.classList.toggle('active'); | |
| mobileMenuToggle.innerHTML = nav.classList.contains('active') | |
| ? '<i class="fas fa-times"></i>' | |
| : '<i class="fas fa-bars"></i>'; | |
| }); | |
| // Smooth scrolling for navigation links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const target = document.querySelector(this.getAttribute('href')); | |
| if (target) { | |
| target.scrollIntoView({ | |
| behavior: 'smooth', | |
| block: 'start' | |
| }); | |
| // Close mobile menu if open | |
| nav.classList.remove('active'); | |
| mobileMenuToggle.innerHTML = '<i class="fas fa-bars"></i>'; | |
| } | |
| }); | |
| }); | |
| // Testimonial slider | |
| const testimonials = document.querySelectorAll('.testimonial'); | |
| const dots = document.querySelectorAll('.testimonial-dot'); | |
| let currentSlide = 0; | |
| function showSlide(index) { | |
| testimonials.forEach(testimonial => testimonial.classList.remove('active')); | |
| dots.forEach(dot => dot.classList.remove('active')); | |
| testimonials[index].classList.add('active'); | |
| dots[index].classList.add('active'); | |
| currentSlide = index; | |
| } | |
| dots.forEach((dot, index) => { | |
| dot.addEventListener('click', () => showSlide(index)); | |
| }); | |
| // Auto-rotate testimonials | |
| setInterval(() => { | |
| const nextSlide = (currentSlide + 1) % testimonials.length; | |
| showSlide(nextSlide); | |
| }, 5000); | |
| // Fade in animation on scroll | |
| const fadeElements = document.querySelectorAll('.fade-in'); | |
| function checkFade() { | |
| fadeElements.forEach(element => { | |
| const elementTop = element.getBoundingClientRect().top; | |
| const elementBottom = element.getBoundingClientRect().bottom; | |
| if (elementTop < window.innerHeight - 100 && elementBottom > 0) { | |
| element.classList.add('visible'); | |
| } | |
| }); | |
| } | |
| window.addEventListener('scroll', checkSlide); | |
| window.addEventListener('load', checkSlide); | |
| // Scroll to top button | |
| const scrollTopBtn = document.getElementById('scrollTop'); | |
| window.addEventListener('scroll', () => { | |
| if (window.pageYOffset > 300) { | |
| scrollTopBtn.classList.add('visible'); | |
| } else { | |
| scrollTopBtn.classList.remove('visible'); | |
| } | |
| }); | |
| scrollTopBtn.addEventListener('click', () => { | |
| window.scrollTo({ | |
| top: 0, | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| // Contact form submission | |
| const contactForm = document.getElementById('contactForm'); | |
| contactForm.addEventListener('submit', (e) => { | |
| e.preventDefault(); | |
| // Simulate form submission | |
| const formData = new FormData(contactForm); | |
| const formObject = Object.fromEntries(formData); | |
| // Show success message (in a real app, you'd send this to a server) | |
| alert(`Obrigado pelo seu contato, ${formObject.name}! Entraremos em contato em breve.`); | |
| // Reset form | |
| contactForm.reset(); | |
| }); | |
| // Add intersection observer for fade animations | |
| const observerOptions = { | |
| threshold: 0.1, | |
| rootMargin: '0px 0px -50px 0px' | |
| }; | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('visible'); | |
| } | |
| }); | |
| }, observerOptions); | |
| fadeElements.forEach(element => { | |
| observer.observe(element); | |
| }); | |
| </script> | |
| </body> | |
| </html> |