Project Overviewlink

AutoDetail is a professional HTML template for auto detailing, repair, and parts e-commerce, suitable for car washes, auto repair shops, and auto parts retailers to build their official websites. The template includes 5 homepage layouts and complete pages for services, products, blog, appointment booking, and contact. It is fully static and can be deployed without a backend.

Tech Stacklink

• HTML5 + CSS3 (Static Pages)
• Bootstrap 5 (Layout & Grid System)
• Swiper (Carousel & Slider Components)
• jQuery (Interactions & Form Validation)
• Google Fonts (Oxanium + Manrope)

Project Structurelink

AutoDetail HTML/
├── index.html                  # Homepage (Layout 1)
├── homepage-2~5.html          # Other Homepage Variants
├── services.html               # Services List
├── service-single.html         # Single Service Detail
├── shop.html                   # Shop List
├── shop-product-single.html    # Product Detail
├── blog.html                   # Blog List
├── blog-single.html            # Blog Post
├── about.html                  # About Us
├── contact.html                # Contact
├── contact.php                 # Contact Form Handler
├── appointment.html            # Appointment Page
├── faq.html                    # FAQ
├── gallery.html                # Gallery
├── team.html                   # Team Members
├── testimonials.html          # Testimonials
├── css/
│   ├── bootstrap.min.css      # Bootstrap Core Styles
│   ├── style.css              # Theme Main Styles (Includes Color Scheme)
│   ├── swiper.css             # Swiper Carousel Styles
│   ├── plugins.css           # Third-Party Plugin Styles
│   └── custom-swiper-*.css    # Custom Swiper Styles
├── js/
│   ├── swiper.js              # Swiper Core Library
│   ├── plugins.js             # Plugin Initialization Scripts
│   ├── designesia.js          # Theme Common Logic
│   └── validation-*.js        # Form Validation Scripts
├── images/                     # Image Assets
└── documentation/
    └── DOCUMENTATION.html      # Documentation Redirect Page

Core File Descriptionlink

• index.html — Homepage entry point, showcasing the template's overall style and modules
• css/style.css — Theme core styles, defining color scheme and typography variables
• js/designesia.js — Theme common interaction logic (navigation, scrolling, etc.)
• contact.php / booking.php — PHP form processing files for receiving user submissions
• css/swiper.css + js/swiper.js — Carousel component for image/content sliding effects
• css/colors/scheme-*.css — Alternative color schemes for quick overall tone switching

Quick Startlink

This project is a pure static template, no npm or build tools required:

1. Open index.html directly in a browser to preview the homepage
2. To simulate PHP form submission with a local server, run:
   bashcontent_copyCopy

   php -S localhost:8000
   

   Then visit http://localhost:8000/contact.html

Usage Suggestionslink

The template comes with a dark theme preset (dark-scheme). To switch to a light theme, simply remove the dark-scheme class from the body element. All colors are managed through CSS variables in style.css. It is recommended to modify the variable values at the top of style.css to uniformly adjust brand colors, avoiding line-by-line changes.