Mehedi Codes Landing Page

Overview

This is a responsive landing page designed to showcase manufacturing services and solutions provided by Mehedi Codes. The website is built using HTML and CSS, with a focus on modern design, user experience, and accessibility. It highlights key features, services, pricing plans, and integrations to attract potential clients and partners.

Author

• Name: Mehedi Hasan
• LinkedIn: Mehedi Hasan

Features

• Responsive Design: Optimized for both desktop and mobile devices with a mobile-friendly navigation menu.
• Modern UI: Clean and professional design with a focus on usability and aesthetics.
• Key Sections:
  • Header: Includes a logo, navigation menu, and a "Sign Up" call-to-action.
  • Hero Section: Highlights the value proposition with engaging visuals and stats.
  • Services Section: Showcases six key manufacturing services with icons and descriptions.
  • Key Benefits: Lists the advantages of using Mehedi Codes' systems.
  • Pricing Plans: Displays tailored pricing options for different business needs.
  • Integrations: Highlights compatibility with popular platforms and technologies.
  • Call-to-Action (CTA): Encourages users to start working with Mehedi Codes.
  • Footer: Contains company information, industry links, product details, and contact information.

Technologies Used

• HTML5: For semantic structure and accessibility.
• CSS3: For styling, layout, and responsive design.
• Google Fonts: Uses the Inter font family for typography.
• External Assets: Icons and images hosted on GitHub for visual elements.

File Structure

├── index.html          # Main HTML file
├── styles.css          # CSS stylesheet for styling
└── assets/
    └── images/         # Folder containing images and icons

Setup and Installation

1. Clone the Repository:

   git clone https://github.com/mehedicodes1/html-css-landing-page.git

2. Navigate to the Project Directory:

   cd html-css-landing-page

3. Open the Website:
   • Open index.html in a web browser to view the landing page locally.
   • Alternatively, serve the project using a local server (e.g., using VS Code Live Server or python -m http.server).

Usage

• The landing page is static and does not require a backend server.
• Customize the content in index.html and styles in styles.css to fit your needs.
• Update image URLs in the assets/images/ folder or replace them with your own assets.

Accessibility

• The website includes ARIA attributes (aria-label, aria-expanded, aria-controls) for improved accessibility.
• Semantic HTML elements are used to ensure compatibility with screen readers.

Future Enhancements

• Add JavaScript for interactive features like hamburger menu functionality and smooth scrolling.
• Integrate a backend for form submissions or dynamic content.
• Expand the services and pricing sections with more detailed information.

License

© 2024 Prodmast. All rights reserved.