LearnHub - Online Learning Platform 🎓

A modern, responsive online learning platform built with HTML and CSS. LearnHub connects students with expert instructors offering various courses across multiple domains.

📋 Table of Contents

• Features
• Demo
• Technologies Used
• Project Structure
• Getting Started
• Sections
• Courses Available
• Responsive Design
• Contributing
• License

✨ Features

• Responsive Design: Fully responsive layout that works on desktop, tablet, and mobile devices
• Modern UI: Clean and intuitive user interface with smooth animations and transitions
• Course Catalog: Display of multiple courses with detailed information
• Sticky Navigation: Easy navigation with a fixed header bar
• Contact Form: Built-in contact form for user inquiries
• Statistics Section: Showcase platform achievements and metrics
• Social Media Integration: Links to social media platforms

🎯 Demo

Open index.html in your browser to view the website locally.

🛠️ Technologies Used

• HTML5: Semantic markup for better structure and SEO
• CSS3: Modern styling with Flexbox and Grid layouts
• Gradient Backgrounds: Beautiful gradient designs for visual appeal
• Responsive Design: Media queries for mobile-first approach

📁 Project Structure

SCM/
│
├── index.html          # Main HTML file with all sections
├── styles.css          # Complete stylesheet with responsive design
└── README.md           # Project documentation

🚀 Getting Started

Prerequisites

• A modern web browser (Chrome, Firefox, Safari, Edge)
• A text editor (VS Code, Sublime Text, etc.) for editing

Installation

1. Clone the repository:

   git clone https://github.com/P1yushgarg/SCM.git

2. Navigate to the project directory:

   cd SCM

3. Open index.html in your browser:

   • Double-click the file, or
   • Right-click and select "Open with" your preferred browser, or
   • Use a local development server

📖 Sections

1. Navigation Bar

• Fixed navigation with smooth scrolling
• Links to all major sections
• LearnHub branding logo

2. Hero Section

• Eye-catching gradient background
• Call-to-action button
• Compelling tagline

3. Courses Section

• Grid layout showcasing 6 featured courses:
  • Web Development Fundamentals
  • Python for Beginners
  • Data Science Essentials
  • UI/UX Design Masterclass
  • Digital Marketing 101
  • Business Strategy Fundamentals
• Each course card includes:
  • Course title and instructor
  • Brief description
  • Duration and difficulty level
  • Enroll button

4. About Section

• Platform mission statement
• Key statistics:
  • 10,000+ Courses
  • 500K+ Students
  • 1,000+ Instructors

5. Contact Section

• Contact form with fields for:
  • Name
  • Email
  • Message
• Form validation

6. Footer

• Copyright information
• Social media links

📚 Courses Available

Course	Instructor	Duration	Level
Web Development Fundamentals	John Doe	8 hours	Beginner
Python for Beginners	Jane Smith	10 hours	Beginner
Data Science Essentials	Dr. Emily Brown	12 hours	Intermediate
UI/UX Design Masterclass	Michael Chen	15 hours	Advanced
Digital Marketing 101	Sarah Johnson	6 hours	Beginner
Business Strategy Fundamentals	Robert Williams	9 hours	Intermediate

📱 Responsive Design

The website is fully responsive and optimized for:

• Desktop: Full-width layout with multi-column grid
• Tablet: Adaptive grid layout
• Mobile: Single-column layout with optimized navigation

Breakpoints

• Mobile: max-width: 768px

🤝 Contributing

Contributions are welcome! This project is part of Hacktoberfest 2025.

How to Contribute

1. Fork the repository
2. Create a new branch (git checkout -b feature/AmazingFeature)
3. Make your changes
4. Commit your changes (git commit -m 'Add some AmazingFeature')
5. Push to the branch (git push origin feature/AmazingFeature)
6. Open a Pull Request

Contribution Ideas

• Add JavaScript functionality for form validation
• Implement course filtering and search
• Add more courses to the catalog
• Create a dark mode toggle
• Add animations on scroll
• Integrate with a backend API
• Add user authentication
• Create course detail pages

📄 License

This project is open source and available under the MIT License.

👨‍💻 Author

P1yushgarg

• GitHub: @P1yushgarg

🌟 Show your support

Give a ⭐️ if you like this project!

📞 Contact

For any queries or suggestions, please use the contact form on the website or reach out through GitHub issues.

---

Happy Learning! 📚✨