Introduction
Aexora - Creative Agency & Portfolio Bootstrap HTML Template
Aexora - Creative Agency & Portfolio Bootstrap HTML Template, With these template formats, it's very easy to create a presence and grab someone's attention around the web page Because the template is built using HTML5, CSS3, Bootstrap 5 framework and with Sass. So please before you start working with the template take a quick look on the documentation so that you can easily built your website.
Support and Updates:
When you purchase Aexora, you gain access to free future updates to ensure your template remains up-to-date. Plus, our support team is always ready to assist with any questions.
Dependencies for Aexora
What Do You Get with the Aexora:
Aexora provides all necessary HTML, CSS, SCSS, JS files, along with detailed Documentation to help you easily customize and implement the template.
Aexora Compatibility with Popular Browsers:
Aexora is fully compatible with major browsers, ensuring a seamless user experience across Chrome, Firefox, Safari, Edge, and Opera.
Folder Structure
FAQ'S
If you don't want to use scss files,you are in no need of Esbuild and other related files & folders so please remove below shown files
You can simply use dist folder with only css, or can use by renaming it😊.
Step 1:
Go To style.scss (src/assets/scss/styles.scss )
if you want to change another font-family Go to the site Google Fonts And Select One font Family and import in to styles.scss file
How to Select font Family
Step 2:
And paste Your Selected font-family in style.scss
Step 3:
And add the Your Selected font-family in _customs.scss(src/assets/scss/custom/_customs.scss)
code
body {
font-size: 18px;
font-family: 'Space Grotesk', sans-serif;
font-weight: 400;
color: #{variables.$color};
background-color: #{variables.$background};
line-height: 1.4;
text-align: start;
overflow-x: clip;
padding: 0;
margin: 0;
}Go To "src/assets/images/brand-logos" folder and replace
your
logo with Previous Logos within in image size.
note: Please don't increase logo sizes. Replace your logo within
given
image size. otherwise the logo will not fit in particular place it
disturbs the template design.
Please follow the below steps to enable RTL Version
Step1:
To enable RTL Version you have to open
custom-switcher.js
(assets/js/custom-switcher.js) file
and remove comments for rtl as shown in below
javascript
//RTL
if (!localStorage.getItem("aexorartl")) {
// html.setAttribute("dir" , "rtl") // for rtl version
}Step2:
Remove the comments to enablertl as
shown
below
javascript
//RTL
if (!localStorage.getItem("aexorartl")) {
html.setAttribute("dir" , "rtl") // for rtl version
}Please follow the below steps to enable Boxed Version
Step1:
To enable Boxed Version you have to open
custom-switcher.js
(assets/js/custom-switcher.js) file
and remove comments for Boxed as shown in below
javascript
//Boxed styles
if (!localStorage.getItem("aexoraboxed")) {
// html.setAttribute("data-width" , "boxed") // for boxed style
}Step2:
Remove the comments to enableboxed as
shown
below
javascript
//Boxed styles
if (!localStorage.getItem("aexoraboxed")) {
html.setAttribute("data-width" , "boxed") // for boxed style
}
Please follow the below steps to enable Dark Theme
Step1:
To enable Dark Theme you have to open
custom-switcher.js
(assets/js/custom-switcher.js) file
and remove comments for dark-mode as shown in below
javascript
//Dark Theme Style
if (!localStorage.getItem("aexoradarktheme")) {
// html.setAttribute("data-theme-mode" , "dark") // for dark theme
}Step2:
Remove the comments to enable dark-modeas shown below
javascript
//Dark Theme Style
if (!localStorage.getItem("aexoradarktheme")) {
html.setAttribute("data-theme-mode" , "dark") // for dark theme
}Step1:
To clear LocalStorage loading functions you need to remove
localStorageBackup2() function in custom-switcher.min.js assets/js/custom-switcher.min.js as shown
below
javascript
function localStorageBackup() {
// if there is a value stored, update color picker and background color
// Used to retrive the data from local storage
if (localStorage.primaryRGB) {
if (document.querySelector('.theme-container-primary')) {
document.querySelector('.theme-container-primary').value = localStorage.primaryRGB;
}
document.querySelector('html').style.setProperty('--primary-rgb', localStorage.primaryRGB);
}
if (localStorage.bodyBgRGB) {
if (document.querySelector('.theme-container-background')) {
document.querySelector('.theme-container-background').value = localStorage.bodyBgRGB;
}
document.querySelector('html').style.setProperty('--body-bg-rgb', localStorage.bodyBgRGB);
let html = document.querySelector('html');
html.setAttribute('data-theme-mode', 'dark');
document.querySelector('#switcher-dark-theme').checked = true;
}
if (localStorage.Aexoradarktheme) {
let html = document.querySelector('html');
html.setAttribute('data-theme-mode', 'dark');
}
if (localStorage.Aexorartl) {
let html = document.querySelector('html');
html.setAttribute('dir', 'rtl');
rtlFn();
}
if (localStorage.Aexoraboxed) {
let html = document.querySelector('html');
html.setAttribute('data-width', 'boxed');
}
if(localStorage.Aexoraltr){
ltrFn()
}
if(localStorage.loaderEnable == "true"){
document.querySelector("#switcher-loader-enable").checked = true
}
}Step2:
To remove complete LocalStorage saving you need to remove
all localstorage related calling functions like localStorage.setItem,
localStorage.removeItem, localStorage.getItem,
localStorage.clear in
custom-switcher.js
assets/js/custom-switcher.min.jsfile.Below are the some examples to find out.
javascript
localStorage.setItem( );
localStorage.removeItem( );
localStorage.getItem( )
localStorage.clear();
localStorageBackup();Please follow the below steps to change Primary Color
Step 1 :
To change Primary Color you have to open _variables.scss file and replace what color you want as shown in below
Rootpath : _variables.scss (src/assets/scss/_variables.scss )
Please follow the below steps to change Dark body Color
Step 1 :
Make sure the theme is set completely to dark mode by adding the following attributes to the html tag data-theme-mode="dark" data-header-styles="dark" data-menu-styles="dark"
Step 2 :
To change Dark body Color you have to open _variables.scss file and replace what color you want as shown in below
Rootpath : _variables.scss (src/assets/scss/_variables.scss )
Step 3 :
Also Change the following variable colors to the desired theme background accordingly in [data-theme-mode="dark"]
--light-rgb : --form-control-bg : --input-border : --gray-3 :This guide explains how to connect the Contact Us form with PHP, MySQL, and SMTP email. After setup, the form will:
- Save contact details in the database.
- Send the message to the website owner.
- Send a confirmation email to the user.
1. Required Files
Copy these files into the project:
javascript
html/contact-us.html
assets/js/contact-us.js
assets/php/contact-handler.php
assets/php/contact-config.php
assets/php/database.php
assets/php/setup-contact.php
assets/php/contact-leads-schema.sql
2. What Each File Does
| File | Use |
|---|---|
| contact-us.html | Contains the Contact Us form. |
| contact-us.js | Sends form data to PHP without page reload. |
| contact-handler.php | Validates form data, saves it, and sends emails. |
| contact-config.php | Contains database and SMTP settings. |
| database.php | Connects to MySQL and saves leads. |
| setup-contact.php | Optional file to create database/table from command line. |
| contact-leads-schema.sql | SQL file to create the table manually. |
3. Form Requirements
If using your own contact form, make sure it has:
javascript
<form id="team-contact-form"
action="../assets/php/contact-handler.php"
method="POST">
Required Field Names
conNameconEmailconSubjectconPhoneconMessage
Hidden Spam Field
HTML
<input type="text" name="website" style="display:none;">
JavaScript File
HTML
<script src="../assets/js/contact-us.js"></script>
Update the paths if your folder structure is different.
4. Database Settings
Open:
HTML
projects/dist/assets/php/contact-config.php
For XAMPP, use:
HTML
'database' => [
'host' => 'localhost',
'name' => 'aexora',
'username' => 'root',
'password' => '',
'charset' => 'utf8mb4',
'auto_create' => true,
],
The default database name is:
aexora
The PHP code can create the database/table automatically if permission is available.
5. SMTP Settings
In the same file:
HTML
projects/dist/assets/php/contact-config.php
Update the SMTP settings:
HTML
'smtp_host' => 'smtp.gmail.com',
'smtp_port' => 587,
'smtp_encryption' => 'tls',
'smtp_username' => 'example@gmail.com',
'smtp_password' => '*************',
'from_email' => '',
'from_name' => 'Aexora Website',
'to_email' => '',
'to_name' => 'Website Leads',
'subject_prefix' => '[Website Contact]',
'confirmation_subject' => 'We received your message',
For Gmail, use a Gmail App Password, not your normal Gmail password.
If from_email and to_email are blank, the SMTP username email can be used for sending and receiving emails.
6. Manual Database Setup
If the database/table is not created automatically, open phpMyAdmin and run:
HTML
CREATE DATABASE IF NOT EXISTS aexora
CHARACTER SET utf8mb4
COLLATE utf8mb4_unicode_ci;
USE aexora;
CREATE TABLE IF NOT EXISTS contact_leads (
id INT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(150) NOT NULL,
email VARCHAR(150) NOT NULL,
phone VARCHAR(50) NOT NULL,
subject VARCHAR(200) NOT NULL,
message TEXT NOT NULL,
ip_address VARCHAR(45) NULL,
user_agent VARCHAR(255) NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
7. Test Using XAMPP
- Open XAMPP Control Panel.
- Start Apache and MySQL.
-
Place the project inside:
C:\xampp\htdocs\ -
Example path:
C:\xampp\htdocs\projects\dist -
Open the form in your browser:
http://localhost/projects/dist/html/contact-us.html - Fill the form and submit it.
- A success message should appear.
-
Open phpMyAdmin:
http://localhost/phpmyadmin - Open database:
aexora. - Open table:
contact_leads. - Click Browse and verify the submitted lead.
8. Test Using Other Local Servers
For WAMP, MAMP, Laragon, or any other local server:
- Start the PHP/Apache server.
- Start MySQL.
-
Place the project in the local server root folder:
- XAMPP:
htdocs - WAMP:
www - MAMP:
htdocs - Laragon:
www
- XAMPP:
-
Open the form using localhost:
http://localhost/your-project-folder/html/contact-us.html - Submit the form.
- Check the database and emails.
9. Success Check
The setup is working if:
- The form submits successfully.
- The data appears in the
contact_leadstable. - The website owner receives the email.
- The user receives the confirmation email.
10. Common Issues
| Error | Fix |
|---|---|
| Invalid request method | Do not open contact-handler.php directly. Submit the form instead. |
| Database connection failed | Check MySQL is running and database details are correct. |
| Mail server error | Check SMTP username, password, host, port, and encryption. |
| Contact form setup failed | Create the database manually in phpMyAdmin. |
Simple Flow
HTML
User submits form
↓
JavaScript sends data to PHP
↓
PHP saves data in MySQL
↓
PHP sends emails using SMTP
↓
Success message appears
Html Structure
General HTML structure of the Aexora-Creative Agency & Portfolio Bootstrap HTML Template Here is the Folder structure.
html
<!-- include mainhead.html"-->
</head>
<body class="main-body light-theme">
<!-- include switcher.html"-->
<!-- include switcher-icon.html"-->
<!-- include loader.html"-->
<!-- include back-to-top.html"-->
<div class="page">
<!-- include header.html"-->
<div class="main-content app-content pages-sections">
<div id="scroll-shell">
<div id="scroll-stage">
<main id="main-area" class="main-area">
<div class="section-spacer"></div>
<!-- start: section -->
<!-- end: section -->
<!-- include footer.html"-->
</main>
</div>
</div>
</div>
</div>
<!-- include menu_bar.html"-->
<!-- include headersearch_modal.html"-->
<!-- include commonjs.html"-->
<!-- include partials/customjs.html"-->
</body>
</html>
Enable switcher in any page
To enable the switcher then you must have to place below html, css, js in your html page .
Rootpath for switcher: html/partials/switcher.html
Rootpath for switcher-icon: html/partials/switcher-icon.html
If you want switcher icon in html pages then replace
below code in app header section
<!-- Start Switcher-Icon -->
<a aria-label="anchor" class="switcher-icon" data-bs-toggle="offcanvas" href="#switcher-canvas" aria-controls="switcher-canvas">
<i class="ri-settings-2-line"></i>
</a>
Aexora comes with power of Esbuild
esbuild is a blazing-fast JavaScript bundler and minifier designed for modern web development workflows. It is known for its exceptional speed, minimal configuration, and powerful features. Check here.
Prerequisites:
To install and set up all the prerequisites, follow these steps:
Ensure that Node.js is installed and running on your computer. If Node.js is already installed, you can skip this step. Otherwise, install it on your computer.
If you want to install and use the latest version of Node.js, you can find the necessary instructions on the official website.
To set up esbuild, you need to install it globally on your system. Run one of the following commands in your terminal:
code
npm install -g esbuildcode
npm install --save-dev esbuildInstallation
Please follow below steps to install and setup all pre requisites:
Make sure to have all above pre requisites installed & running in your computer
Open your terminal, go to your folder and enter below command. This would install all required dependencies in node_modules folder.
code
npm installBuild Production File
After completing the above steps, run the following command from the project root (Aexora/src) in your terminal or command prompt:
code
npm run devNote:-Ensure all required node_modules are installed to run the Esbuild tasks successfully.
The following command performs several tasks to streamline your development workflow below are some of the task it performs :
- Generates the
dist/directory - Starts the local development server
- Watches for changes in the
src/folder (HTML, JavaScript, SCSS, etc.) - Automatically reflects those changes in the
dist/output for live development
Credit's
Icons Credit
| Icons | References |
|---|---|
| Font Awesome | https://fontawesome.com/ |
| Bootstrap Icons | https://icons.getbootstrap.com/ |
| Boxicons | https://boxicons.com/ |
| Remix Icons | https://remixicon.com/ |
| Feather Icons | https://feathericons.com/ |
Images Credit
| Images | References |
|---|---|
| Vecteezy | https://www.vecteezy.com/ |
| Iconscount | https://iconscout.com/ |
| Unsplash | https://unsplash.com/ |
| freepik | https://www.freepik.com |
| Heropatterns | https://heropatterns.com/ |
Fonts Credit
| Font | References |
|---|---|
| Google Fonts | https://fonts.google.com/ |
Switcher styles
(Root:html/partials/mainhead.html)
html
<html lang="en" dir="ltr" data-nav-layout="horizontal" data-nav-style="menu-hover" data-theme-mode="light" loader="disable" data-menu-position="scrollable">html
data-theme-mode="light"html
data-theme-mode="dark" html
dir="ltr"html
dir="rtl"html
data-width="default"html
data-width="full-width"html
data-width="boxed"html
loader="enable"html
loader="disable"Choices JS :
Choices JS is very simple javascript plugin to style default select..
html
css
js
plugin link
https://choices-js.github.io/Choices/Reference Link
https://www.npmjs.com/package/choices.jsSwiper JS :
Swiper JS is very modern javascript plugin to replace bootstrap carousel..
html
css
js
Plugin Link
https://swiperjs.com/Reference Link
https://www.npmjs.com/package/swipernoui slider :
noui slider is a modern javascript plugin for alert messages..
html
css
js
<!-- noUiSlider JS -->
<script src="../assets/libs/nouislider/nouislider.min.js"></script>
<script src="../assets/libs/wnumb/wNumb.min.js"></script>
/* default slider */
var slider = document.getElementById('slidermain');
noUiSlider.create(slider, {
start: [30, 80],
connect: true,
range: {
'min': 0,
'max': 100
}
});Plugin link
https://refreshless.com/nouislider/Reference Link
https://www.npmjs.com/package/nouisliderGLightbox (Gallery) : :
GLightbox is a modern javascript gallery plugin..
html
css
js
var lightboxVideo = GLightbox({
selector: '.glightbox'
});
lightboxVideo.on('slide_changed', ({ prev, current }) => {
console.log('Prev slide', prev);
console.log('Current slide', current);
const { slideIndex, slideNode, slideConfig, player } = current;
});Plugin link
https://biati-digital.github.io/glightbox/Reference Link
https://www.npmjs.com/package/glightboxAdditional Plugins Included :
The following plugins have also been included, apart from the ones already listed in the above sections
| Plugin | Version | URL |
|---|---|---|
| Bootstrap | v5.3.3 | https://www.npmjs.com/package/bootstrap |
| Animate Css | v4.1.1 | https://animate.style/ |
| gsap | v3.14.2 | https://gsap.com/ |
| imagesloaded | v5.0.0 | https://imagesloaded.desandro.com/ |
| odometer | v0.4.8 | https://github.hubspot.com/odometer/docs/welcome/ |
| wow.js | v1.2.1 | https://wowjs.uk/ |