/M_Thouse-Alternate

Primary LanguageCSS

Mainthouse Cleaners Website

This project is a website for Mainthouse Cleaners, a professional cleaning company specializing in residential, industrial cleaning, and fumigation services. The site is built using HTML, CSS, and JavaScript, with a responsive design to ensure it works well on different screen sizes, from mobile devices to desktops.

Table of Contents

Features

  • Responsive Design: The website adapts to different screen sizes, ensuring a good user experience on mobile, tablet, and desktop devices.
  • Navigation Bar: A fixed navigation bar that includes a logo, links to different sections of the site, and a toggle menu for mobile devices.
  • Hero Section: A full-width hero section with a background image, overlay, and a call-to-action button.
  • About Us Section: A section that provides information about the company, featuring an image slider for showcasing various services.
  • Services Section: A detailed list of services offered by Mainthouse Cleaners, each with a description and a hover effect.
  • Customer Satisfaction Section: Displays a dynamic count of satisfied customers, which animates from 0 to 160.
  • Our Work Section: A slider showcasing images of the company's work, with a background image and a text overlay.
  • Blog Section: Includes articles related to cleaning and maintenance, with space for future content.
  • Contact Section: A form that allows users to send messages to the company.
  • Pop-Up Modal: A modal window for requesting a quote, which appears when the user clicks the "Contact Us" button in the hero section.

Technologies Used

  • HTML5: For structuring the content of the website.
  • CSS3: For styling the website and ensuring a responsive design.
  • JavaScript: For adding interactivity, including smooth scrolling, the image slider, the customer satisfaction count animation, and the pop-up modal.

Setup and Installation

  1. Clone the repository:

    git clone https://github.com/your-username/mainthouse-cleaners.git

  2. Navigate to the project directory:

    cd mainthouse-cleaners

  3. Open index.html in your browser: Simply double-click the index.html file, or right-click and select "Open with" followed by your preferred browser.

Usage

  • Navigation Bar:** Click on the menu links to smoothly scroll to the respective sections of the page.
  • Hero Section:** Click on the "Contact Us" button to open the quote request modal.
  • About Us Section:** Use the left and right arrows to navigate through the images.
  • Our Work Section:** Images will automatically slide every 4 seconds, showcasing the company’s work.
  • Contact Form:** Fill in your details and click "Send Message" to submit an inquiry or message to Mainthouse Cleaners.

Project Structure

Mainthouse-Cleaners/
│
├── index.html               # The main HTML file
├── index.css                # Main CSS file for styling
├── index.js                 # Main JavaScript file for interactivity
├── images/                  # Folder for images used on the site
│   ├── logo.jpg
│   ├── hero-background.jpg
│   ├── about-bg.jpg
│   ├── ...                  # Additional images used in various sections
└── README.md                # This README file

Customization

  • Images: Replace images in the images/ folder with your own to customize the website's appearance.
  • Text: Update the text content in the index.html file to reflect your own company's information and services.
  • Styles: Modify the index.css file to change the look and feel of the website, such as colors, fonts, and layouts.

Credits

This project was developed by Udeme. The design and code are based on the requirements provided for Mainthouse Cleaners.

Feel free to modify and use this code for your own projects. If you have any questions or need further assistance, please contact me at Udemx100@gmail.com