Project Overviewlink

Appal is a set of HTML5/CSS3 multi-page templates based on Bootstrap 4, designed for mobile app landing pages, SaaS product showcases, and corporate websites. It offers 12 homepage variants along with complete inner pages including blog, about, team, pricing, and contact, making it suitable for quickly building professional-grade product sites.

Tech Stacklink

• Bootstrap 4 (responsive layout framework)
• Static HTML / CSS / SCSS
• jQuery
• Owl Carousel (carousel component)
• Google Fonts (Roboto font)
• PHP (contact_form.php form processing)

Project Structurelink

appalhtml-10/
├── appal-documentation/          # Online documentation
│   ├── index.html
│   └── assets/css/styles.css
├── appal-main/                  # Template main body
│   ├── index-*.html             # 12 homepage variants
│   ├── about.html               # About page
│   ├── blog*.html                # Blog list/details
│   ├── contact.html             # Contact page
│   ├── pricing.html             # Pricing page
│   ├── team.html                # Team page
│   ├── testimonial.html         # Testimonials
│   ├── register.html            # Registration/Login
│   └── assets/
│       ├── css/                 # Style files
│       └── scss/                # SCSS source files

Core File Descriptionlink

• appal-main/index-1.html — Homepage variant 1, classic mobile app showcase layout
• appal-main/contact.html — Contact page with form entry
• appal-main/contact_form.php — PHP email form handler
• appal-main/assets/css/style.css — Main stylesheet containing all page styles
• appal-main/assets/scss/ — SCSS source file directory for easy theme variable customization
• appal-documentation/index.html — Official template documentation page

Quick Startlink

This template is a pure static site with no build tools required:

1. Open appal-main/index-1.html directly in your browser to preview the homepage;
2. For PHP form functionality, deploy the appal-main/ directory to a PHP-enabled web server (e.g., XAMPP/Nginx) and modify the recipient email address in contact_form.php.

Usage Recommendationslink

• Prioritize adjusting theme colors and fonts by modifying variables in assets/scss/_variable.css to maintain style consistency;
• The 12 homepage variants differ significantly in style; select the appropriate variant based on your actual product type, then proceed with content replacement and customization.