Perfect Match - Matrimony Website

A modern, responsive matrimony website for finding life partners with profile browsing, interest management, and contact functionality.

🌟 Features

• Profile Showcase: Beautiful grid layout displaying detailed profiles
• Advanced Filters: Search by gender, age, profession, and location
• Interest Management: Add profiles to your interests list
• Contact System: Send interest requests with personal messages
• Responsive Design: Mobile-optimized layout for all devices
• Modern UI: Attractive design with smooth animations
• Statistics Dashboard: Display platform statistics

🛠️ Technologies Used

• HTML5: Semantic markup structure
• CSS3: Modern styling with flexbox, grid, and gradients
• JavaScript (Vanilla): Interactive filtering and interest management
• No dependencies: Pure HTML, CSS, and JS implementation

📂 Project Structure

matrimony-website/ ├── index.html # Main HTML file ├── style.css # Styling and responsive design ├── script.js # Profile filtering and contact logic └── README.md # Project documentation

🎯 Key Functionalities

Profile Browsing

• View detailed profiles with photos, education, profession
• See age, height, location, and bio
• Add profiles to interests list
• Contact profiles directly

Search & Filters

• Filter by gender (Bride/Groom)
• Age range filtering
• Profession-based search
• Location-based filtering
• Real-time filter application

Interest Management

• Add/remove profiles from interests
• View all interested profiles in sidebar
• Contact multiple profiles
• Interest counter in navigation

Contact System

• Send personalized interest requests
• Fill contact form with your details
• Success confirmation messages
• Continue browsing after sending

🎨 Design Features

• Color Scheme: Pink/Red gradient theme (#e91e63)
• Typography: Clean Segoe UI font family
• Layout: CSS Grid for profiles, Flexbox for components
• Animations: Smooth transitions, hover effects, fade-ins
• Icons: Emoji-based profile images and icons

📱 Responsive Breakpoints

• Desktop: 1200px and above
• Tablet: 768px - 1199px
• Mobile: Below 768px

🚀 Getting Started

1. Clone or download the repository
2. Open index.html in your web browser
3. No build process or dependencies required!

💡 Usage

Browsing Profiles

Browse featured profiles on the home page. Each profile shows name, age, education, profession, location, and bio.

Adding Interests

Click "Add Interest" button on any profile to add them to your interests list. View all interests by clicking the 💝 icon in navigation.

Filtering Profiles

Use the search box in hero section or filter bar to narrow down profiles by:

• Gender
• Age range
• Profession
• Location

Contacting Profiles

1. Click "Contact" button on a profile
2. Fill in your details and optional message
3. Click "Send Interest" to submit
4. Receive confirmation message

   🌐 Live Demo

View Live Demo

🔧 Customization

Adding New Profiles

Edit the profiles array in script.js:

{
    id: 9,
    name: 'Profile Name',
    age: 28,
    gender: 'Male/Female',
    height: '5\'10"',
    education: 'Degree',
    profession: 'Job Title',
    location: 'City',
    bio: 'Profile description',
    icon: '👤'
}

Changing Colors
Modify theme colors in style.css:

Primary: #e91e63 (Pink/Red)
Secondary: #ff6b9d (Light Pink)
Success: #4caf50 (Green)
Background: #f8f9fa (Light Gray)
Adding More Filters
Add new filter options in the HTML select elements and update the filterProfiles() function in script.js.

📊 Profile Data Structure
Each profile contains:

id: Unique identifier
name: Full name
age: Age in years
gender: Male/Female
height: Height in feet/inches
education: Educational qualification
profession: Current profession
location: City/Location
bio: Short description
icon: Emoji representation
🌐 Sections
Hero Section
Eye-catching gradient background
Search functionality
Call-to-action button
Statistics Section
Platform statistics display
Active profiles count
Success stories count
Profiles Section
Grid layout of profiles
Filter controls
Profile cards with details
About Section
How the platform works
Step-by-step process
Platform benefits
Contact Section
Contact information
Inquiry form
Support details
📄 License
This project is open source and available for educational purposes.

👤 Author
Pavan Kumar

Email: pavansatyawada456789@gmail.com
Location: Somarajuillindalaparru, India
GitHub: https://github.com/PavanKumar14331
🙏 Acknowledgments
Icons: Emoji-based icons for simplicity
Design inspiration: Modern matrimony platforms
Built with ❤️ for connecting hearts
🔐 Privacy & Security
This is a demo project. In production:

Implement proper authentication
Secure user data storage
Privacy controls for profiles
Verified profile badges
Report/block functionality
📞 Support
For questions or support, contact:

Email: support@perfectmatch.com
Phone: +91 98765 43210

---

**✅ Complete! Matrimony website ready!** 💒💕

**All 4 files included:**
1. ✅ `index.html` - Complete structure
2. ✅ `style.css` - Beautiful pink theme styling
3. ✅ `script.js` - Filter & interest functionality
4. ✅ `README.md` - Detailed documentation

**Features:**
- 8 sample profiles
- Gender & age filters
- Profession & location filters
- Interest management sidebar
- Contact modal system
- Fully responsive