Project Overviewlink

Al-Quran is a responsive business website template built with HTML5 and Bootstrap 5, designed for Islamic cultural institutions, religious education platforms, Quran learning centers, and similar scenarios. The template includes 6 homepage styles, dark/light layout switching, and a contact form with email sending functionality.

Tech Stacklink

• Bootstrap 5 (responsive layout framework)
• HTML5 + CSS3
• jQuery (interactions and animations)
• mCustomScrollbar (sidebar scrollbar)
• PHP (used only for sendemail.php contact form)

Project Structurelink

alquran-package/
├── alquran/                  # Template main directory
│   ├── index.html            # Homepage 01
│   ├── index-1.html          # Dark homepage 04
│   ├── index-2~6.html        # Other homepage variants
│   ├── about.html            # About page
│   ├── courses.html          # Course list
│   ├── scholars.html         # Scholars list
│   ├── contact.html          # Contact page
│   ├── blog.html             # Blog
│   ├── events.html           # Events
│   ├── faq.html              # FAQ
│   ├── price.html            # Pricing
│   ├── prayer-time.html      # Prayer times
│   └── assets/               # Static resources (CSS/JS/images/fonts)
└── documentation/            # Official documentation
    ├── index.html            # Documentation homepage
    ├── css/                  # Documentation styles
    └── js/                   # Documentation scripts

Core File Descriptionlink

• alquran/index.html — Main homepage entry, includes top navigation, mega menu, and full-width banner
• alquran/assets/css/style.css — Global styles, defines theme color (#ffd050), typography, and components
• alquran/sendemail.php — Contact form backend, sends user messages to a specified email address
• documentation/index.html — Template official documentation, includes HTML structure, stylesheet, and map configuration instructions
• alquran/contact.html — Contact page, integrates form and map sections

Quick Startlink

1. Open alquran/index.html directly in a browser to preview the homepage
2. To use the contact form, deploy the project to a PHP-enabled web server and modify the recipient email address in sendemail.php
3. Navigate to documentation/index.html for complete customization documentation

Usage Suggestionslink

The template offers a rich variety of page variants. It is recommended to select the appropriate homepage style based on actual business needs and use the Bootstrap grid system to quickly adjust content layout. When deploying the contact form, ensure the server environment is configured to execute PHP.