Project Introductionlink

Hadiman is an HTML template designed for repair and decoration service businesses, offering homepage variants, case studies, product pages, blogs, appointment forms, and other complete business pages. Built with Tailwind CSS and supporting SCSS custom styles, it is ideal for quickly building websites for renovation companies or artisan services.

Tech Stacklink

• Tailwind CSS 3.4.x (CSS framework)
• SCSS/SASS (style preprocessor)
• jQuery (document navigation scripts)
• npm (project dependency management)

Project Structurelink

hadiman-html/
├── index.html
├── home2.html / home3.html / home4.html
├── about-us.html
├── our-services.html / services-detail.html
├── our-projects1.html / our-projects2.html
├── our-products.html / product-detail.html
├── our-pricing.html / faqs.html
├── blog-*.html (list and detail pages)
├── contact.html / book-appointment.html
├── cart.html / checkout.html
├── tailwind.config.js
├── package.json
├── dist/
│   ├── output-tailwind.css
│   └── output-scss.css
└── assets/
    ├── images/
    ├── css/
    └── scss/

Core File Descriptionlink

• index.html — Homepage entry, integrates Tailwind and SCSS output styles
• tailwind.config.js — Tailwind build configuration, extensible theme colors and components
• package.json — Defines tailwindcss and sass dependencies and build scripts
• book-appointment.html — Appointment form page with service selection and submission logic
• contact.html — Contact page with map area and contact information
• our-projects1.html — Project case showcase with multi-image grid layout

Quick Startlink

# 1. Navigate to project directory
cd hadiman-html

# 2. Install dependencies
npm install

# 3. Start Tailwind watch compilation
npm run tailwindcss

# 4. In a separate terminal, start SCSS watch compilation
npm run sass

# 5. Open index.html with Live Server or directly in browser

Usage Suggestionslink

The template defines color and typography variables through tailwind.config.js. To modify theme colors or fonts, it is recommended to adjust this configuration file first. Shared headers and footers across multiple pages need to be manually synchronized and maintained, making it suitable for users with basic HTML knowledge for secondary development.