Nature's Heart Foundation is a responsive, modern website built with HTML, CSS, and vanilla JavaScript. It showcases the foundation's mission, impact projects, team members, and provides contact information for visitors interested in supporting environmental conservation efforts.
Natures heart foundation/
├── index.html # Homepage with hero, about, thematics, impacts, testimonials, CTA
├── about-us.html # Detailed about us page
├── thematics.html # Thematic areas of focus
├── Impacts.html # Impact metrics and project showcase
├── teams.html # Team members display
├── testimony.html # Testimonials/success stories
├── contact.html # Contact form and information
├── style.css # Main stylesheet (responsive design)
├── images/ # Logo, favicon, and project images
│ └── natures heart favicon.png
└── README.md # This file
- Mobile-first approach with breakpoints at 575px, 768px, and 800px
- Single-column layout on mobile devices automatically expands to multi-column on desktop
- Prevents horizontal overflow and unwanted zoom on mobile devices
- Uses CSS Grid for flexible layout management
- Fixed navigation bar with smooth scrolling
- Logo and menu links
- Mobile hamburger menu (hidden on desktop, visible on screens ≤800px)
- Hamburger animation (bars transform into X on click)
- Backdrop blur effect on mobile menu for visual polish
- Animated gradient background with smooth color transitions
- Floating geometric shapes (circles, squares, triangles) with continuous animation
- Centered call-to-action box with semi-transparent backdrop blur
- Responsive padding and sizing using
clamp()for fluid typography
- Three subsections: About, Mission, and Vision
- Clean card-based layout
- Responsive width that adjusts for mobile
- 2x2 grid of thematic focus areas
- Hover effects with shadow transitions
- Light blue background (
#dae7ee) for visual distinction - Scales to single column on mobile
- Six project cards with gradient backgrounds
- Color-coded projects (red, blue, green, gray tones)
- Interactive links with arrow animations (→ slides on hover)
- 70% width on desktop, 100% on mobile
- Light purple background (
#f7e0f6)
- Circular cards with animated spinning gradient border
- Count-up animation triggered when cards enter viewport (IntersectionObserver)
- 3-column grid on desktop, responsive grid on tablet, 1-column on mobile
- Smooth easing function for natural count animations
- Flexible layout displaying partner logos
- White cards with shadow effects
- Responsive sizing (50% width on desktop, 80% on tablet, 30% on mobile)
- Image object-fit for proper logo scaling
- Auto-scrolling carousel (2-second interval)
- Manual navigation with next/previous buttons
- Pauses auto-scroll on hover, resumes on mouse leave
- 70% width on desktop, full-width on mobile
- Smooth translateX transition between slides
- Contact form section with input fields and submit button
- Form styling with focus states and hover effects
- Responsive width (40% on desktop, full-width on mobile)
- Dark background (#333333)
- Contact information section
- Social media links placeholder
- Copyright text
- Fixed position button (bottom-right)
- Only visible after scrolling 300px down
- Smooth scroll-to-top animation
- Visible on mobile devices
// Opens/closes mobile menu on hamburger click
// Closes menu when a link is clicked
// Animates hamburger bars// Auto-advances slides every 2 seconds
// Manual controls via next/previous buttons
// Pause on hover, resume on mouse leave
// Wraps around at end of slides// Triggers count animation when metric cards enter viewport
// Uses Intersection Observer API for performance
// Easing function for smooth animation (easeOut cubic)
// 1500ms duration for each count animation// Shows button when user scrolls past 300px
// Smooth scroll to top on click
// Toggles visibility class based on scroll position- Primary Blue:
#0288d1 - Cyan:
#4dd0e1 - Green:
#a8d5ba - Light Green:
#d8f1e2 - Dark Gray:
#333333 - Light Gray:
#f4f4f4
- Mobile Small: < 576px
- Mobile Large: 576px – 767px
- Tablet: 768px – 799px
- Desktop: ≥ 800px
- Font Family: Poppins (Google Fonts)
- Font Weights: 100–900
- Responsive Font Sizes: Uses
clamp()for fluid scaling
- Subtle shadows on cards (0px 0px 6px 0px grey)
- Elevated shadows on hover (0px 0px 20px 1px grey)
- Backdrop blur effects on hero and mobile menu
- Gradient overlays on project cards
- Single Column Layout: All sections stack vertically
- Touch-Friendly Navigation: Large hamburger button, adequate tap targets
- Optimized Forms: Full-width inputs with proper spacing
- Image Scaling: All images scale proportionally with viewport
- Reduced Motion: Respects
prefers-reduced-motionmedia query
- Navbar menu width: 80% (prevents edge cutoff)
- Hero details: 90% width with max-width for readability
- Partner cards: Scale from 50% → 80% → 30% across breakpoints
- Metrics grid: 3 columns → 2 columns → 1 column
- Testimonial slider: 70% → 100% width on smaller screens
- Modern browsers (Chrome, Firefox, Safari, Edge)
- CSS Grid support required
- JavaScript ES6+ features used (arrow functions, const/let, template literals)
- CSS custom properties (prefers-reduced-motion) supported
- Intersection Observer: Used for lazy-triggering metric animations
- CSS Animations: GPU-accelerated transforms (
translate3d,rotate) - Smooth Scrolling: CSS-based (no JS scroll listener except back-to-top toggle)
- Image Optimization: Recommended to compress images in
/imagesfolder - Font Loading: Google Fonts with preconnect links for fast loading
- Semantic HTML structure
- ARIA labels on interactive elements (
aria-label="Back to top") - Keyboard navigation support for forms and buttons
- Focus states on all interactive elements
- Color contrast suitable for readability
- Reduced motion support for animations
- Clone or download the project folder
- Open
index.htmlin a web browser (or use Live Server in VS Code) - Navigate between pages using the navbar menu
- Use Live Server in VS Code
- Find your PC IP:
cmd→ipconfig→ note IPv4 address - On mobile device, open:
http://<PC_IP>:5500/index.html - Test responsive behavior across different screen sizes
- Colors: Update color variables in
style.css - Content: Edit HTML files to add your own text and images
- Images: Replace placeholder images in
/imagesfolder - Fonts: Change Google Fonts link in
<head>of HTML files
- Mobile zoom issue resolved (prevented by
overflow-x: hiddenand box-sizing) - Some pages (teams.html, testimony.html, contact.html) have incomplete script tags
- Extract duplicate inline scripts into a shared
script.jsfile - Add image alt text across all pages
- Add meta descriptions for SEO
- Standardize filename casing (Impacts.html → impacts.html)
- Complete missing form functionality (back-end integration)
- Add loading spinners for form submission
- Optimize images with compression tools
- Consider lazy-loading images below the fold
- CSS: Single stylesheet (
style.css) for all pages - JavaScript: Inline scripts in HTML (recommend extracting to external file)
- Images: Favicon + logo + partner logos + team photos
- Fonts: Google Fonts CDN (Poppins family)
- Grid-based layout simplifies responsive adjustments
- Mobile-first media queries make desktop scaling predictable
- Intersection Observer ensures smooth animations without performance hit
- CSS custom properties (if added) would improve maintainability
- Consider adding dark mode support in future iterations
For questions or support, contact Nature's Heart Foundation through the contact form or email provided in the footer.
Last Updated: November 23, 2025
Version: 1.0