Insoand - Startup and Technology Website HTML5 Template.

Insoand - Startup and Technology Website 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 Agency and Sass Website
  • Clean & Simple Design
  • HTML5 & CSS3
  • Bootstrap Latest
  • 26+ Html Pages
  • 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

Insoand - Startup and Technology Website 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=Inter:wght@400;500;600&family=Playfair+Display:ital,wght@0,600;1,600&family=Sora:wght@400;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 node-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": "Insoand - Startup and Technology Website HTML5 Template",
						"version": "1.0.0",
						"description": "Insoand - Startup and Technology Website HTML5 Template",
						"main": "index.js",
						"scripts": {
						  "dev": "node-sass assets/scss/main.scss style.css -w"
						},
						"author": "Insomniacafe.org",
						"license": "ISC",
						"devDependencies": {
						  "node-sass": "^9.0.0"
						}
					  }
					  
				

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 62. please add your own logo link. thanks

#

For Homepage One

2. Please goto Line Header Line No113 please add your own logo link.

For Homepage Two

2.1. Please goto Line Header Line No110 please add your own logo link.

For Hompage Three

2.2. Please goto Line Header Line No110 please add your own logo link.

For Hompage Four

2.2. Please goto Line Header Line No62 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 205 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 h3.
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 Project?

Please open (index.html) file and go to any col-lg-4 col-md-4 area and you can find project image link and Project Title. Please follow the 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.