Project Overviewlink

Rotal is an HTML template designed for resort hotels and bed & breakfasts, built on Bootstrap 5. It offers multiple homepage versions, room displays, blog posts, contact forms, and other complete pages, making it suitable for quickly building a hotel website or online booking platform.

Tech Stacklink

• HTML5 + CSS3 (SCSS modular structure)
• Bootstrap 5 (responsive layout framework)
• jQuery (interaction logic and animation control)
• Font Awesome 6 (icon library)
• Swiper (carousel component)
• Magnific Popup (image/video lightbox)
• Google Fonts (Noto Serif Display / Plus Jakarta Sans)

Project Structurelink

rotalhtml-10/
  documentation/
    index.html              # Template usage documentation
    css/
      bootstrap.css
      font-awesome.css
      scrollbar.css
      style.css
    fonts/
    images/
    js/
  download-version/
    index.html              # Default homepage
    home-2.html             # Homepage variant 2
    home-3.html             # Homepage variant 3
    home-4.html             # Homepage variant 4
    home-5.html             # Homepage variant 5
    about.html
    blog.html
    blog-details.html
    contact.html
    gallery.html
    pricing.html
    room.html
    room-details.html
    service.html
    team.html
    testimonial.html
    mail.php                # Email sending backend
    assets/
      css/
        bootstrap.min.css
        fontawesome.min.css
        style.css            # Main theme stylesheet
      js/
        main.js              # Core interaction script

Key File Descriptionslink

• download-version/assets/css/style.css — Global theme styles, including CSS variables, responsive breakpoints, and module-specific styles
• download-version/assets/js/main.js — Implements 20+ interactive features such as preloader, mobile menu, scroll-to-top, color switcher, counter, etc.
• download-version/index.html — Default homepage, references all resources and includes complete header navigation and footer
• download-version/mail.php — Contact form backend supporting email sending
• documentation/index.html — Official template documentation explaining HTML structure, CSS organization, and configuration methods
• download-version/home-2~5.html — Multiple homepage style variants, ready for reuse or replacement

Quick Startlink

1. Navigate to the download-version directory
2. Open index.html directly in a browser to preview the full template
3. For local server operation (recommended): run npx serve . in the directory or use the VS Code Live Server extension
4. Change color theme: the floating color palette on the right side of the page supports 6 preset colors and a custom color picker

Usage Suggestionslink

The template includes 5 homepage styles and over 20 business pages. Modify CSS variables (e.g., --theme-color) in assets/css/style.css to batch change the theme color. The contact form requires deploying mail.php to a PHP-supporting server, or replacing it with a third-party form service (e.g., Formspree).