Ailand - Modern Interior Design HTML Template + RTL preview 1

Ailand - Modern Interior Design HTML Template + RTL

bookmark

Ailand is a modern HTML template for the interior design and architecture industry, featuring multiple complete pages including homepage, portfolio, blog, shop (cart/checkout), service details, and more. It supports multiple homepage var...

HTML

Project Overview

Ailand is a modern HTML template for the interior design and architecture industry, featuring multiple complete pages including homepage, portfolio, blog, shop (cart/checkout), service details, and more. It supports multiple homepage variations and single-page scrolling navigation. The template includes both LTR and RTL versions, making it suitable for quickly building architecture/interior design company websites or portfolio showcases.

Tech Stack

  • HTML5 + CSS3 (static template)
  • Bootstrap 5 (responsive layout framework)
  • jQuery (DOM interaction and animation triggers)
  • GSAP + ScrollTrigger (page scroll animations and smooth scrolling)
  • Isotope (masonry/grid layout filtering)
  • Magnific Popup (image/video lightbox)
  • Font Awesome 6 Pro + Google Fonts (DM Sans / Syncopate)
  • PHP (mail.php provides contact form email sending)

Project Structure

text
ailandhtml-10/
├── ailand/
│   ├── index.html              # Main homepage
│   ├── index-2~5.html          # Homepage variations
│   ├── index-one-page.html     # Single-page version homepage
│   ├── about.html, service*.html, portfolio*.html, blog*.html
│   ├── shop*.html, cart.html, checkout.html, wishlist.html
│   ├── contact.html, login.html, register.html, pricing.html, faq.html
│   ├── error.html, team-details.html
│   ├── mail.php                 # Contact form backend
│   └── assets/
│       ├── css/main.css         # Core styles
│       ├── js/main.js           # All interaction logic (33 feature modules)
│       ├── fonts/               # Font Awesome fonts
│       └── img/
├── ailand-rtl/                  # RTL Arabic version (same structure as ailand/)
└── documentation/                # Official documentation pages (for reference)

Core File Description

  • ailand/assets/css/main.css — All styles, including CSS variable definitions (fonts, colors, responsive breakpoints) and 26 component/page style categories
  • ailand/assets/js/main.js — 33 JS modules: lazy-loading background images, GSAP scroll animations, masonry filtering, count-up animations, mobile menu, sidebar, lightbox, etc.
  • ailand/mail.php — Email sending script for contact form submissions (requires server-side PHP environment)
  • ailand/index-one-page.html — Single-page fullscreen homepage, ideal for portfolio-style showcase sites
  • ailand/assets/js/bootstrap-bundle.js — Bootstrap JS (includes modals, dropdowns, etc.)

Quick Start

  1. Open ailand/index.html directly in a browser to preview the full site
  2. Or deploy the entire ailand/ directory to any web server
  3. The contact form requires server-side PHP support; local testing will show a 405 error on form submission

Usage Suggestions

The template includes 5 homepage styles and complete e-commerce pages. Choose the appropriate entry file based on your actual business needs and replace the content. For multilingual support, you can copy and modify based on the existing ailand-rtl/ directory structure. All image paths need to be replaced with real assets, otherwise 404 errors will affect the display.

help_outline

FAQ