A modern, responsive website platform designed to empower African communities through education, innovation, and leadership development.
The AFSN website showcases success stories, impact statistics, and provides opportunities for users to join the movement of transforming African communities through education and leadership programs.
- Dynamic Loading Animation: Engaging loading screen with progress bar and animated phrases
- Responsive Navigation: Modern navbar with theme toggle and mobile-friendly design
- Hero Section: Animated text, call-to-action buttons, and video background
- Success Stories: Inspiring scholar stories with images, locations, and tags
- Impact Statistics: Animated counters showcasing AFSN's achievements
- Interactive Elements: Scroll animations and smooth transitions
- Enhanced Video Background: Improved visibility with optimized overlays
- Interactive Leadership Section: Animated dots with wave effects on hover
- Professional Color Scheme: Dark blue (#00008B) and orange (#D2691E) theme
- Improved Contact Page: Fixed styling and consistent footer design
- Enhanced Registration: Better form design with glassmorphism effects
- Donation Page: Coming soon notice with professional design
AFSN001/
├── Africa/ # Main project folder
│ ├── index.html # Homepage
│ ├── about.html # About page
│ ├── contact.html # Contact page
│ ├── register.html # Registration page
│ ├── donation.html # Donation page
│ ├── sections.html # Spotlight page
│ ├── speak-Africa.html # Speak Africa page
│ ├── impact.css # Main stylesheet
│ ├── animations.css # Animation styles
│ ├── contact.css # Contact page styles
│ ├── donation.css # Donation page styles
│ ├── script.js # Main JavaScript
│ ├── interactive-dots.js # Interactive animations
│ ├── theme.js # Theme switching
│ ├── images/ # Image assets
│ └── backend/ # Backend services (Node.js)
└── README.md # This file
- Frontend: HTML5, CSS3, JavaScript (ES6+)
- Styling: Custom CSS with CSS Variables, Glassmorphism effects
- Icons: Font Awesome 6.0
- Animations: AOS (Animate On Scroll), Custom CSS animations
- Backend: Node.js, Express.js (for future payment processing)
- Deployment: Netlify ready with configuration
-
Clone the repository
git clone https://github.com/KhotKeys/AFSN001.git cd AFSN001/Africa -
Open with Live Server
- Use VS Code with Live Server extension
- Or serve with any local server
- Open
http://localhost:5500
-
View the website
- Navigate through different pages
- Test responsive design on various devices
The project is ready for deployment on:
- Netlify: Configuration included (
netlify.toml) - Vercel: Zero-config deployment
- GitHub Pages: Static hosting ready
- Primary: Dark Blue (#00008B)
- Secondary: Orange (#D2691E)
- Accent: Light variations of primary colors
- Background: Dynamic gradients and glassmorphism
- Font Family: Segoe UI, system fonts
- Headings: Bold, gradient text effects
- Body: Clean, readable typography
- Loading: Custom phrases with progress bar
- Scroll: AOS library integration
- Interactive: Hover effects and micro-interactions
- Leadership Section: Interactive dots with wave animations
- Mobile First: Optimized for all screen sizes
- Breakpoints: 480px, 768px, 992px, 1200px
- Touch Friendly: Large tap targets and smooth interactions
- Performance: Optimized images and efficient CSS
- Enhanced video background visibility
- Professional color scheme implementation
- Interactive leadership section with animated dots
- Improved glassmorphism effects throughout
- Better mobile navigation experience
- Fixed file path issues for local development
- Consistent footer across all pages
- Optimized CSS structure and organization
- Enhanced form designs with better validation
- Improved loading animations and transitions
- Index: Enhanced hero section and interactive elements
- Contact: Fixed styling issues and improved form design
- Register: Professional glassmorphism design with better UX
- Donation: Clean design with "Coming Soon" payment notice
- Email: africanfoundationsn@gmail.com
- Phone: +211 977 123 456
- Location: Juba, South Sudan
- Website: AFSN Official
- Facebook: AFSN Facebook
- LinkedIn: AFSN LinkedIn
- WhatsApp: Join Community
This project is licensed under the MIT License - see the LICENSE file for details.
We welcome contributions! Please feel free to submit a Pull Request or open an Issue for any improvements or bug fixes.
Built with ❤️ for African communities by the AFSN team