Techni - Saas & Software HTML Template

• READ FIRST
• Installation
• HTML Structure
• Favicon Settings
• Logo Settings
• Fonts Settings
• CSS Structure
• JavaScripts
• Credits
• Changelog^**

Techni In A Brief

Techni is a multi-purpose, powerful, beautiful and high-performance website template which is Designed for Saas & Software websites.
In download folder you will find Three folder:

• Documentation (Documentation for main template)
• Template (Main Template)
• Figma file (Free Figma File Download link)

Remember, when you want to use the shortcode/element in any pages you need to adjust the section spacing by giving margin or padding. Don't get panic if you messed up anything when you edit the template. We are always available to support our customer.
You can contact our developer directly by email

1Installation

Follow the steps below to setup your site template:

1. Unzip the downloaded package and open the Template folder to find all the template files. You wil get Techni folder in there. You need to upload this folder to your hosting web server using FTP or cPanel in order to use it on your website.
2. Below is the folder structure you will see in your website root directory:
   • Techni/css - Stylesheet files
   • Techni/fonts - Icon/fonts files
   • Techni/images - Image files
   • Techni/js - js files
   • Techni/vendor - plugins files
3. You need to upload all or specific HTML files as per your need.
4. And now you are ready to go to generate your webiste with this awesome template.

2HTML Structure

We are used Bootstrapv5.1.3 framework in this template.
The general template structure is the same throughout the template. Here is the general structure.

The code block above is powered by SyntaxHighlighter.

3Favicon Settings

Favicon Will be found in head section.

        
        <link rel="icon" type="image/png" sizes="32x32" href="images/fav-icon/fabicon.png">
        

4Logo Settings

The Logo will be found in the Theme Main Menu section.

        <div class="d-flex logo order-lg-0"><a href="index.html" class="d-block"><img src="images/logo/logo.png" alt=""></a></div>
        

You can replace any .jpg .png .svg logo. And set the width according to your logo size.

5Fonts Settings

In Khuj we use Proxima Nova and Karla font.
You can change both fonts form css/style.css file:

            @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap");
            @import url('../fonts/custom-font/stylesheet.css');
        

7CSS Structure

The style.css file contains all of the specific stylings for the page. The file is separated into sections using:

• bootstrap.min.css

  This file includes core bootstrap styles

  Source

• bootstrap-icons.css

  This file contains bootstrap icon library

  Source

  Example

  <i class="bi bi-person"></i>

• font-awesome.css

  This file contains styles about Fontawesome icon library

  Source

  Example

  <i class="fab fa-facebook-square"></i>

• jquery.fancybox.min.css

  This file contains styles about fancybox

• animate.min.css

  animate.css is a bunch of cool, fun, and cross-browser animations for you to use in projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

  Source

  Example

  <div data-aos="fade-down-right"> ... </div>

• swiper.css

  This file contains styles about slick carousel plugin

  Source

• style.css

  All styles about template

8JavaScripts

• jQuery 3.5.0

  jQuery is a fast, small, and feature-rich JavaScript library.

  Source

• bootstrap.min.js

  Core bootstrap js file

  Source

• swiper-bundle.min

  jQuery carousel plugin from Slick

  Source

• aos.js

  A lightweight script to animate scrolling.Reveal Animations When You Scroll.

  Source

• theme.js

  This file contains all script about site.

9Credits

• Bootstrap

• Stock Image Unsplash

• Fontawesome

• Animate.css

10Changelog:

Dates are formated in dd/mm/yy

                ________________________________
                ----- (15/11/2023) ------
                First Published