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.phpprovides contact form email sending)
Project Structure
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 categoriesailand/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 sitesailand/assets/js/bootstrap-bundle.js— Bootstrap JS (includes modals, dropdowns, etc.)
Quick Start
- Open
ailand/index.htmldirectly in a browser to preview the full site - Or deploy the entire
ailand/directory to any web server - 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.
