She Can Foundation — Official Website

"Together, we can break down barriers and empower women." — Reeta Mishra, Founder & President

A fully responsive, multi-page frontend website built for She Can Foundation — a Government-registered NGO (Indian Society Act XXI of 1860) dedicated to empowering women and girls across India through education, awareness, and community-driven programs.

🌐 Live Preview

https://she-can-foundation-mocha.vercel.app/

📸 Project Overview

This project was built as part of a Frontend Developer Internship Task at She Can Foundation. The goal was to design and develop a clean, professional, and fully functional website that reflects the NGO's mission, credibility, and impact.

📁 Project Structure

she-can-foundation/ │ ├── index.html # Home Page ├── our-story.html # About / Our Story Page ├── our-certificate.html # NGO Registration Certificate Page ├── donate.html # Donation Page with Razorpay + UPI QR ├── style.css # Global Stylesheet │ └── images/ ├── scf-logo.png ├── hero-main.jpg ├── cert-official.png └── ...

✨ Features

• Responsive Design — Fully mobile-friendly across all screen sizes (400px to 1440px+)
• Animated Hero Section — Zoom-out background effect with smooth fade-in content
• Animated Stats Counter — Intersection Observer triggered number counter (1,20,000+ girls helped, 15 states, etc.)
• Scroll Reveal Animations — Elements animate into view as the user scrolls
• Donation Page — Tiered donation options (₹500 to ₹10,000) with Razorpay payment gateway integration
• Live UPI QR Code — Auto-generated QR code using QRCode.js pointing to the Razorpay payment link
• Mobile Navigation — Smooth hamburger menu with full-screen overlay
• Multi-Page Layout — Home, Our Story, Certificate, and Donate pages
• Certificate Page — Displays official GOVT. registration details with trust indicators
• Fixed Navbar — Transparent nav with blur effect that darkens on scroll
• Footer — Comprehensive footer with navigation, contact, and social links

🛠️ Tech Stack

Technology	Usage
HTML5	Page structure and semantics
CSS3	Styling, animations, responsive layout
Vanilla JavaScript	Interactivity, counters, scroll effects
QRCode.js	Auto-generated UPI QR code
Google Fonts	Typography (Inter + Playfair Display)
Razorpay	Payment gateway integration
Intersection Observer API	Scroll-triggered animations

📄 Pages

1. index.html — Home

• Hero with animated background and CTA buttons
• Welcome banner section
• Impact stats (animated counters)
• About split-section
• Join team section
• Founder quote
• Contact info with social links

2. our-story.html — Our Story

• How She Can Foundation was founded
• Mission and identity sections
• Values grid (Education, Empowerment, Community, Equity, Global Vision, Compassion)
• Founder's mission statement

3. our-certificate.html — Certificate

• Official Society Registration Certificate display
• Registration details (Act XXI of 1860, Active status)
• Trust indicators (100% donations, GOVT. verified, Founded 2020)

4. donate.html — Donate

• Emotional impact storytelling
• Photo grid of real NGO activities
• Tiered donation cards (₹500 / ₹1,500 / ₹5,000 / ₹10,000)
• Live UPI QR Code (GPay, PhonePe, Paytm, BHIM compatible)
• Razorpay donate button
• How donations help (6-card grid)

🚀 Getting Started

Clone the Repository

git clone https://github.com/your-username/she-can-foundation.git
cd she-can-foundation

Run Locally

No build tools or dependencies required. Simply open the project in your browser:

# Option 1 — Open directly
open index.html

# Option 2 — Use VS Code Live Server (recommended)
# Install Live Server extension → Right-click index.html → Open with Live Server

📱 Responsive Breakpoints

Breakpoint	Target
< 400px	Small mobile devices
< 640px	Mobile
< 900px	Tablet
≥ 900px	Desktop

🎨 Design Decisions

• Color Palette — Deep black (#0a0a0a) background with bold red (#e30613) accent — reflects urgency, passion, and action
• Typography — Inter for body text (clean, readable), Playfair Display for headings (elegant, authoritative)
• Animations — CSS-only scroll reveals and counters for performance; no heavy animation libraries
• UX — Emotional storytelling on the donate page to drive conversions while maintaining professionalism

---

🤝 About She Can Foundation

She Can Foundation is a Government-registered NGO under the Indian Society Act XXI of 1860, working to empower women and girls across India.

• 🩸 1,20,000+ girls helped with free sanitary pads
• 💪 5,000+ women empowered
• 🗺️ 15 states reached
• 📢 300+ awareness workshops conducted

Website: shecanfoundation.org Email: president@shecanfoundation.org Phone: +91 - 8283841830 Instagram: @shecanfoundation LinkedIn: She Can Foundation

👨‍💻 Developer

Built with ❤️ as part of the She Can Foundation Frontend Internship Task

This project was developed to support a cause that matters — empowering women, one step at a time.

📜 License

This project is built for She Can Foundation and is intended for educational and non-commercial NGO use only.

She Can Foundation · GOVT. REG. NGO · Indian Society Act, 1860
"Her period shouldn't end her education."