InsoAi - AI writing, Video, and Image Generator HTML5 Template.
InsoAi - AI writing, Video, and Image Generator HTML5 Template.
Thank you for choosing our Template! Your support is greatly appreciated.
This document provides comprehensive instructions for installing and utilizing this Template. It
also addresses common problems and issues that you may encounter. If you have any questions or
concerns beyond what is covered in this document, please don't hesitate to reach out to us at
contact@insomniacafe.org Thank you for your continued support!
Template Features
Specialy Designed for AI wirting , Video , Image Generator and Sass Website
Clean & Simple Design
HTML5 & CSS3
Bootstrap Latest
23+ Html Pages
3 different types of homepage
Fully Responsive Design
PHP/Ajax Powered Working Contact Form
Easily Convert to any cms like Wordpress, Joomla and other popular cms.
All files are well commented
Cross Browser Compatible with IE11+, Firefox, Safari, Opera, Chrome
Animated Mouse Cursor Effect
Extensive Documentation
InsoAi - AI wirting, Video and Image Generator HTML5 Template.
Installing Template.
After unzip the download pack, you'll found a Template Folder with all the files.
You can view this Template in any browser, you can display or edit the Template without an
internet connection.(May not wotrk fonts).
The only section that will not work is the Contact Section which contains PHP code and
requires a server environment for send messages.
Now go to your cpanel or open your FTP Client (like Filezilla) and upload the content of the Template on your server root.
Once the files are done uploading go to www.yourdomainname.com/index.html
Template Structure
All information within the main content area is nested within a body tag. The general
template structure is pretty the
same throughout the template. Here is the general structure of main page (index.html).
CSS Files and Structure
These are the css files that are loaded into templates in
Head Section.
Google Web Fonts
By default, the template loads this font from Google Web Font Services, you can change the font with
the one that suits
you best.
These are the list of Javascript files that are loaded into templates in end of the
Body Section.
Install Sass
If you want to use Sass with Node.js, you'll typically use a package manager like npm (Node Package
Manager) to install the necessary Sass packages. Here's a step-by-step process to set up Sass using
Node.js
1. Install Node.js:
Ensure you have Node.js installed on your system. You can download it from the official website:
https://nodejs.org/ 2. Create a New Node.js Project:
Open a terminal and navigate to the directory where you want to set up your project. Then, run the
following command to initialize a new Node.js project:
npm init -y
3. Install Sass as a Dependency:
Install Sass as a dependency in your project using npm:
npm install --save-dev sass
4. Compile Sass to Css
Create a script in your package.json to compile your Sass files to CSS. Open your package.json file
and add a script like this:
Please use this code in your package.json
5. Compile Sass to CSS using npm script:
Run the script to compile Sass to CSS using the following command:
npm run dev
Contact Form
This is a PHP Script for sending messages to your email, you should replace
youremail@gmail.com to your email to start receive messages.
if ($_SERVER["REQUEST_METHOD"] == "POST") {
# FIX: Replace this email with recipient email
$mail_to = "contact@insomniacafe.org";
How can i Change Logo?
1. Please open (index.html) file.
First you change your mobile menu offcanvase-menu logo.
Please go to line number 63. please add your own logo link. thanks
2. Please goto Line Header Line No114 please add your own logo link.
How can i Change Video?
1. Please open (index.html) file and go to Hero area.
Go to line line number 368 and find a attribute name data-video-id="" Please put your youtube video link. I mentioned and arrow symbol indicate in screenshot below.
How can i Change Slider?
1. Please open (index.html) file and go to Hero Slider and finds slider images link the code mentioned by the arrow symbol in screenshot below.
How can i Change Section Title?
Please open (index.html) file and go to any section area and you can find two html block label elements one is h6 and one is h4.
Please Remember: H6 used for sub-title of sub-heading of any section, and h3 used for section title.
Please See the screenshot Below.
How can i Change Team?
Please open (index.html) file and go to Team Section col-xl-3 col-lg-6 col-md-6 area and you can
find to change team image and team member name and her designation. follow screenshot below:
How can i Change Breadcrumb?
Please open Any sub-pages without (index.html) file and go to breadcrumb area and you can find your solutions.
or follow screenshot below:
How can i Change Footer Logo?
Please open (index.html) file and go to footer area and go to line Number 541. and find your footer-logo change code. or follow screenshot below: