Product Landing Page

A modern, fully responsive product landing page designed to showcase product features, demo videos, pricing plans, and email subscription functionality.

Live Demo

Features

• Fixed navigation header for easy access
• Responsive layout that adapts to all devices
• Features section highlighting product benefits
• Embedded product demo video
• Pricing plans with multiple tiers
• Email subscription form
• Clean cyan and dark color scheme
• Smooth scrolling navigation

Sections

1. Header - Fixed navigation bar with logo and links
2. Features - Showcases product key features
3. Video Section - Embedded product demonstration video
4. Pricing - Multiple pricing plans (Basic, Pro, Premium)
5. Subscribe - Email newsletter subscription form

Technologies Used

• HTML5
• CSS3 (Flexbox, Media Queries)

Installation

1. Create a new folder on your computer
2. Save the following files in that folder:
   • index.html (the HTML structure)
   • styles.css (the styling)
3. Open index.html in any modern web browser

File Structure

product-landing-page/
├── index.html
├── styles.css
├── README.md
├── LICENSE
└── .gitignore

Navigation Links

• Features - Scrolls to product features section
• Watch - Scrolls to video demonstration section
• Pricing - Scrolls to pricing plans section

Browser Support

Works on all modern browsers including:

• Google Chrome
• Mozilla Firefox
• Safari
• Microsoft Edge

Customization

You can modify:

• Logo image URL
• Video embed URL
• Pricing plans and amounts
• Feature descriptions
• Color scheme in CSS
• Form action URL

License

MIT License - see the LICENSE file for details

Acknowledgements

This project was built as part of my learning journey with freeCodeCamp. The requirements and concept are based on their Responsive Web Design certification.