Project Introduction
Luxivo is a modern HTML5 template designed for hotels, resorts, villas, and various accommodation booking websites. The template includes multiple homepage layouts, room displays, service introductions, team introductions, and other functional pages. It features a fully responsive design, suitable for quickly building hotel websites or online booking platforms.
Tech Stack
- HTML5 + CSS3 (Responsive Layout)
- JavaScript / jQuery
- Bootstrap 5 (Grid & Components)
- Slick (Carousel Plugin)
- Magnific Popup (Lightbox)
- Nice Select (Custom Dropdown)
- AOS (Scroll Animation)
- FontAwesome (Icon Font)
Project Structure
luxivohtml-10/
├── Documentation/ # Official documentation and demo
│ └── index.html
├── luxivo/ # Template main directory
│ ├── index.html # Homepage (multiple skins)
│ ├── index-2.html # Homepage variant 2
│ ├── index-3.html # Homepage variant 3
│ ├── rooms.html # Room list
│ ├── room-details.html # Room details
│ ├── about.html # About us
│ ├── blog-*.html # Blog pages
│ ├── contact.html # Contact page
│ ├── pricing.html # Pricing page
│ ├── team.html # Team page
│ └── assets/ # Static assets
│ ├── css/style.css # Main stylesheet
│ ├── js/theme.js # Theme script
│ └── scss/ # SCSS source files
Core File Description
luxivo/index.html— Main homepage entry, includes navigation, carousel, room display, and other core modulesluxivo/assets/css/style.css— Main stylesheet, contains 45+ CSS modules (header, footer, rooms, pricing, etc.)luxivo/assets/js/theme.js— Theme interaction logic, navigation, animations, etc.luxivo/assets/scss/style.scss— SCSS source files, convenient for customizing theme colorsluxivo/rooms.html— Room list page, displays room type grid layoutluxivo/pricing.html— Room rates and package pricing page
Quick Start
Simply open luxivo/index.html in your browser to preview. For local server with hot reload, use VS Code's Live Server plugin or run:
npx serve luxivo
Usage Suggestions
This template is static HTML. For quick skin changes, directly modify CSS variables (such as --primary-color) in style.css. For deeper customization, edit scss/style.scss and recompile. The template includes multiple homepage options (index, index-2, index-3) — choose one as your starting point based on your brand style.
