City General Hospital - Company Profile Website

A modern, interactive hospital company profile website featuring advanced UI effects including blur navigation, dropdown menus, parallax scrolling, and animated doctor profiles with a comprehensive dark footer.

Features

✅ Interactive Navigation with Blur Effects

• Glassmorphism navigation with backdrop-filter blur
• Smooth hover transitions and mobile hamburger menu
• Responsive design across all devices

✅ Enhanced Dropdown Menus

• Rich content dropdowns with images and descriptions
• Smooth animations and proper accessibility support
• Click-outside-to-close functionality

✅ Parallax Scrolling Effects

• Hardware-accelerated parallax using transform3d
• Mobile fallbacks and reduced-motion support
• Performance optimized with Intersection Observer

✅ Animated Doctor Profile Cards

• Staggered slide-in animations from the left
• Interactive hover effects and expandable cards
• Professional doctor information display

✅ Comprehensive Dark Footer

• Dark background with high contrast design
• Multi-column responsive layout
• Contact information, quick links, and social media
• Emergency contact section with prominent styling
• Newsletter signup with email validation
• Hospital accreditations display

✅ Accessibility Features

• ARIA labels and semantic markup
• Keyboard navigation support
• Screen reader compatibility
• Reduced motion preferences respected
• High contrast mode support

How to Run

Option 1: Simple File Opening

1. Open index.html in any modern web browser
2. The website will load with all features working

Option 2: Local Server (Recommended)

For better performance and to avoid CORS issues:

Using Python:

# Python 3
python -m http.server 8000

# Python 2
python -M SimpleHTTPServer 8000

Using Node.js:

# Install serve globally
npm install -g serve

# Run server
serve .

Using PHP:

php -S localhost:8000

Then open http://localhost:8000 in your browser.

File Structure

hospital-company-profile/
├── index.html              # Main HTML file
├── styles/
│   ├── main.css            # Base styles and layout
│   ├── navigation.css      # Navigation blur effects
│   ├── parallax.css        # Parallax scrolling styles
│   ├── doctors.css         # Doctor profile animations
│   └── footer.css          # Dark footer styling
├── scripts/
│   ├── main.js             # Core functionality
│   ├── navigation.js       # Navigation interactions
│   ├── parallax.js         # Parallax scroll engine
│   ├── doctors.js          # Doctor profile data and animations
│   └── animations.js       # Comprehensive animation system
├── images/
│   └── placeholder.txt     # Image requirements and placeholders
└── README.md              # This file

Browser Support

• Modern Browsers: Full feature support including backdrop-filter blur effects
• Older Browsers: Graceful degradation with fallback styles
• Mobile Devices: Optimized touch interactions and responsive design
• Accessibility: Screen reader compatible with keyboard navigation

Performance Features

• Hardware-accelerated animations using transform3d
• Intersection Observer for efficient scroll animations
• Throttled scroll events for smooth performance
• Lazy loading for images
• Reduced motion support for accessibility
• Mobile-specific optimizations

Customization

Colors

Main colors can be customized in styles/main.css:

• Primary: #3498db (Blue)
• Emergency: #e74c3c (Red)
• Dark: #2c3e50 (Dark Blue)
• Footer: #1a1a1a (Dark Gray)

Content

• Hospital information: Update in scripts/main.js
• Doctor profiles: Modify doctorsData array in scripts/doctors.js
• Services: Edit the services section in index.html

Images

Replace placeholder images in the images/ folder:

• Doctor photos: 400x400px professional headshots
• Service images: 300x200px high quality
• Background images: High resolution for parallax sections

Development Notes

• Built with vanilla HTML5, CSS3, and JavaScript
• No external dependencies except Font Awesome icons
• Modular CSS and JavaScript architecture
• Comprehensive accessibility implementation
• Performance optimized for all devices

Production Deployment

1. Replace all placeholder images with actual hospital photos
2. Update contact information and hospital details
3. Configure newsletter signup form backend
4. Add Google Analytics or tracking code if needed
5. Optimize images for web (compress while maintaining quality)
6. Test across all target browsers and devices

License

This website template is created for City General Hospital. All rights reserved.