/* Reset and Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; line-height: 1.6; color: #333; background-color: #fff; } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* Navigation */ .navbar { background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.1); position: fixed; top: 0; width: 100%; z-index: 1000; } .nav-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; height: 70px; } .nav-logo h2 { color: #2563eb; font-weight: 700; font-size: 1.5rem; } .nav-menu { display: flex; list-style: none; gap: 2rem; } .nav-link { text-decoration: none; color: #333; font-weight: 500; transition: color 0.3s ease; position: relative; } .nav-link:hover, .nav-link.active { color: #2563eb; } .nav-link.active::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 100%; height: 2px; background: #2563eb; } .hamburger { display: none; flex-direction: column; cursor: pointer; } .bar { width: 25px; height: 3px; background: #333; margin: 3px 0; transition: 0.3s; } /* Hero Section */ .hero { padding: 120px 0 80px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; min-height: 100vh; display: flex; align-items: center; } .hero-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .hero-content h1 { font-size: 3.5rem; font-weight: 700; margin-bottom: 1.5rem; line-height: 1.2; } .hero-content p { font-size: 1.2rem; margin-bottom: 2rem; opacity: 0.9; } .hero-buttons { display: flex; gap: 1rem; flex-wrap: wrap; } .hero-image { display: flex; justify-content: center; align-items: center; } .placeholder-image { background: rgba(255,255,255,0.1); border: 2px dashed rgba(255,255,255,0.3); border-radius: 20px; padding: 4rem; text-align: center; width: 100%; max-width: 400px; } .placeholder-image i { font-size: 4rem; margin-bottom: 1rem; opacity: 0.7; } .placeholder-image p { font-size: 1.1rem; opacity: 0.8; } /* Buttons */ .btn { display: inline-block; padding: 12px 30px; border-radius: 50px; text-decoration: none; font-weight: 600; transition: all 0.3s ease; border: none; cursor: pointer; font-size: 1rem; } .btn-primary { background: #2563eb; color: white; } .btn-primary:hover { background: #1d4ed8; transform: translateY(-2px); box-shadow: 0 10px 20px rgba(37, 99, 235, 0.3); } .btn-secondary { background: transparent; color: white; border: 2px solid white; } .btn-secondary:hover { background: white; color: #2563eb; transform: translateY(-2px); } .btn-outline { background: transparent; color: #2563eb; border: 2px solid #2563eb; } .btn-outline:hover { background: #2563eb; color: white; transform: translateY(-2px); } /* Features Section */ .features { padding: 80px 0; background: #f8fafc; } .features h2 { text-align: center; font-size: 2.5rem; margin-bottom: 3rem; color: #1e293b; } .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; } .feature-card { background: white; padding: 2rem; border-radius: 15px; text-align: center; box-shadow: 0 5px 15px rgba(0,0,0,0.1); transition: transform 0.3s ease; } .feature-card:hover { transform: translateY(-5px); } .feature-icon { width: 80px; height: 80px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; } .feature-icon i { font-size: 2rem; color: white; } .feature-card h3 { font-size: 1.3rem; margin-bottom: 1rem; color: #1e293b; } .feature-card p { color: #64748b; line-height: 1.6; } /* About Section */ .about { padding: 80px 0; } .about-content { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .about-text h2 { font-size: 2.5rem; margin-bottom: 1.5rem; color: #1e293b; } .about-text p { font-size: 1.1rem; color: #64748b; margin-bottom: 1.5rem; line-height: 1.7; } .about-image { display: flex; justify-content: center; } /* CTA Section */ .cta { padding: 80px 0; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; text-align: center; } .cta h2 { font-size: 2.5rem; margin-bottom: 1rem; } .cta p { font-size: 1.2rem; margin-bottom: 2rem; opacity: 0.9; } .cta-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } /* Footer */ .footer { background: #1e293b; color: white; padding: 60px 0 20px; } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-bottom: 2rem; } .footer-section h3, .footer-section h4 { margin-bottom: 1rem; color: #f1f5f9; } .footer-section p { color: #94a3b8; line-height: 1.6; } .footer-section ul { list-style: none; } .footer-section ul li { margin-bottom: 0.5rem; } .footer-section ul li a { color: #94a3b8; text-decoration: none; transition: color 0.3s ease; } .footer-section ul li a:hover { color: #2563eb; } .social-links { display: flex; gap: 1rem; } .social-links a { width: 40px; height: 40px; background: #334155; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; text-decoration: none; transition: all 0.3s ease; } .social-links a:hover { background: #2563eb; transform: translateY(-2px); } .footer-bottom { border-top: 1px solid #334155; padding-top: 2rem; text-align: center; color: #94a3b8; } /* Responsive Design */ @media (max-width: 768px) { .hamburger { display: flex; } .nav-menu { position: fixed; left: -100%; top: 70px; flex-direction: column; background-color: white; width: 100%; text-align: center; transition: 0.3s; box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05); padding: 2rem 0; } .nav-menu.active { left: 0; } .hero-container { grid-template-columns: 1fr; text-align: center; } .hero-content h1 { font-size: 2.5rem; } .about-content { grid-template-columns: 1fr; text-align: center; } .features-grid { grid-template-columns: 1fr; } .hero-buttons, .cta-buttons { flex-direction: column; align-items: center; } .btn { width: 100%; max-width: 300px; text-align: center; } } @media (max-width: 480px) { .hero-content h1 { font-size: 2rem; } .features h2, .about-text h2, .cta h2 { font-size: 2rem; } .container { padding: 0 15px; } }
top of page

WE WANT YOU TO BE A FAN!

JOIN OUR COMMUNITY OF PARENTS

MEMBERSHIP IN FAMILY AUTISM NETWORK IS FREE!
th-2.jpeg

​​

​

As we all know as parents of children and young adults with autism, opportunities for socialization are few and far between. Our children have a hard time or lack of interest in socializing. Our goal is to provide these opportunities and as parents is our job to facilitate and take advantage of what is available as our children are often reluctant to participate

SOCIALIZATION
th-6.jpeg
EVENTS AND PROGRAMS

We run social events geared towards varying age groups to help create social opportunities for all children and young adults on the autism spectrum. 

We have community socials as well as targeted events for our moms, dad's FAN CLUB and our PEN PAL PROGRAM participants. We also do community outreach to educate and advocate for the special needs community. To help us bring programs and low cost events to these children and their families please click on "our goal" at the header of the page to find out how you can contribute. Every little bit helps!

th-5.jpeg
FRIENDSHIPS

Friendship is an essential part of mental well being, for children and adults. FAN gives both the population of those with autism as well as their parents the opportunity to connect with others that are part of their "tribe". There is a true comfort in being with those who understand you. Take the opportunity to join our community of parents and start new friendships today!

bottom of page
// Mobile Navigation Toggle const hamburger = document.querySelector('.hamburger'); const navMenu = document.querySelector('.nav-menu'); hamburger.addEventListener('click', () => { hamburger.classList.toggle('active'); navMenu.classList.toggle('active'); }); // Close mobile menu when clicking on a link document.querySelectorAll('.nav-link').forEach(n => n.addEventListener('click', () => { hamburger.classList.remove('active'); navMenu.classList.remove('active'); })); // Smooth scrolling for anchor 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' }); } }); }); // Navbar background change on scroll window.addEventListener('scroll', () => { const navbar = document.querySelector('.navbar'); if (window.scrollY > 100) { navbar.style.background = 'rgba(255, 255, 255, 0.95)'; navbar.style.backdropFilter = 'blur(10px)'; } else { navbar.style.background = '#fff'; navbar.style.backdropFilter = 'none'; } }); // Add active class to current page in navigation const currentPage = window.location.pathname.split('/').pop() || 'index.html'; document.querySelectorAll('.nav-link').forEach(link => { if (link.getAttribute('href') === currentPage) { link.classList.add('active'); } }); // Animate elements on scroll const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.style.opacity = '1'; entry.target.style.transform = 'translateY(0)'; } }); }, observerOptions); // Observe elements for animation document.addEventListener('DOMContentLoaded', () => { const animateElements = document.querySelectorAll('.feature-card, .about-content, .cta'); animateElements.forEach(el => { el.style.opacity = '0'; el.style.transform = 'translateY(30px)'; el.style.transition = 'opacity 0.6s ease, transform 0.6s ease'; observer.observe(el); }); }); // Form validation for contact form (if exists) const contactForm = document.querySelector('#contact-form'); if (contactForm) { contactForm.addEventListener('submit', function(e) { e.preventDefault(); // Basic form validation const name = document.querySelector('#name').value.trim(); const email = document.querySelector('#email').value.trim(); const message = document.querySelector('#message').value.trim(); if (!name || !email || !message) { alert('Please fill in all fields'); return; } if (!isValidEmail(email)) { alert('Please enter a valid email address'); return; } // Here you would typically send the form data to your server alert('Thank you for your message! We will get back to you soon.'); contactForm.reset(); }); } // Email validation helper function isValidEmail(email) { const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; return emailRegex.test(email); } // Event registration functionality (for events page) const eventButtons = document.querySelectorAll('.event-register-btn'); eventButtons.forEach(button => { button.addEventListener('click', function(e) { e.preventDefault(); const eventName = this.getAttribute('data-event'); const eventUrl = this.getAttribute('data-url'); if (eventUrl) { window.open(eventUrl, '_blank'); } else { alert(`Registration for ${eventName} will be available soon!`); } }); }); // Donation amount selection (for support page) const donationButtons = document.querySelectorAll('.donation-amount'); donationButtons.forEach(button => { button.addEventListener('click', function() { // Remove active class from all buttons donationButtons.forEach(btn => btn.classList.remove('active')); // Add active class to clicked button this.classList.add('active'); // Update hidden input field const amountInput = document.querySelector('#donation-amount'); if (amountInput) { amountInput.value = this.getAttribute('data-amount'); } }); }); // Loading animation window.addEventListener('load', () => { document.body.classList.add('loaded'); }); // Add loading class to body document.body.classList.add('loading');