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.

  1. After unzip the download pack, you'll found a Template Folder with all the files.
  2. You can view this Template in any browser, you can display or edit the Template without an internet connection.(May not wotrk fonts).
  3. The only section that will not work is the Contact Section which contains PHP code and requires a server environment for send messages.
  4. Now go to your cpanel or open your FTP Client (like Filezilla) and upload the content of the Template on your server root.
  5. 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.

						
						@import url("https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&display=swap");

		            

Remember to change the font into style.css

Javascript Files and Structure

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

					{
					  "name": "InsoAi - AI writing, Video, and Image Generator HTML5 Template",
					  "version": "1.0.0",
					  "description": "InsoAi - AI writing, Video, and Image Generator HTML5 Template",
					  "main": "index.js",
					  "scripts": {
					    "dev": "sass assets/scss/main.scss style.css -w"
					  },
					  "author": "insomniacafe.org",
					  "license": "ISC",
					  "devDependencies": {
					    "node-sass": "^9.0.0",
					    "sass": "^1.69.4"
					  }
					}
				

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:

Source and Credit

Please Rating Our Item.

if you satisfy to buying our product. Please give a review.