This documentation is to help you regarding each step of customization. Please go through the documentation carefully to understand how this template is made and how to edit this properly. Basic HTML and CSS knowledge is required to customize this template. You may learn basics here,

There are 5 different font options included in the these templates and their CSS files can be found in css/style.css. To use one of the included fonts, make sure the font css link points to the correct font css file you wish to use in all HTML files as shown below.

HTML

	
< link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
< link rel="stylesheet" href="css/owl.carousel.min.css" />

To use a custom font, copy the font link from its Google Fonts page and paste it before closing head tag in your HTML files.Make sure to include font css link along with the font link, as shown below.

CSS

Then add the font name to your CSS styles in css/style.css

We have written css for beaultiful color for text and link for each template already but if you want to change it with a new color scheme can be defined very easily just open css file in css/style.css folder and change its color hex code in the file to your liking. You can check example below as mentioned.

HTML

 < link rel="stylesheet" href="css/style.css" /> 

CSS

For Text

For Link

We have already code for btn style in css if you need changes in btn style you have to make changes in css file as mentioned blow. Just open style.css file in CSS folder and change its hex code as per your requirements.

HTML

 < link rel="stylesheet" href="css/style.css" /> 

the below mention code is the sample for changing the required color, size and hover effect..

CSS

An example of a header menu item without dropdown can be seen as below.

Html

								
< nav>
   < div class="nav-menu">
    < ul class="nav-links">
        < li>< a href="#how-works" class="nav-link ">How It Works< /a>< /li>
        < li>< a href="#features" class="nav-link">Features< /a>< /li>
        < li>< a href="#pricing" class="nav-link">Pricing< /a>< /li>
        < li>< a href="blog.html" class="nav-link">Blog< /a>< /li>
        < li>< a href="contact.html" class="nav-link">Contact< /a>< /li>
        < li>< a href="about.html" class="nav-link">About< /a>< /li>
        < li>< a href="#" class="nav-link login" data-bs-toggle="modal"data-bs-target="#login">Login< /a>< /li>
        < li class="btn-sign-up">< a href=" " data-bs-toggle="modal"data-bs-target="#existingUser">Sign Up< /a>< /li>
    < /ul>
            
< /div>
    < div class="nav-mobile-menu">
        < span class="line line1">< /span>
        < span class="line line2">< /span>
        < span class="line line3">< /span>
    < /div>
< /nav>

These templates doesn't come with images that you see in demo and in the downloaded files all images except the logo and some other graphics all images are replace with custom size place holders.

You can easily repace these place holders images with your real images by just putting the same size image that you find in the live demo of the placeholder or replace the image in the folder "images/imagename.jpg" in the HTML.

It just replace the image in the image folder with the current name and size

Example

  < img src="images/feature-ss-1.png" alt="screenshots"> 

Fevicon Icon Image

In order to display a high resolution image on devices for fevicon icon image, we have created a different sizes for different devices or browser like andriod, apple etc. here are example of images as mentioned below. you need to replace with your images using photoshop or any online image editor.

HTML

 
  < link rel="shortcut icon" type="image/x-icon" href="images/icons/favicon.ico" />
  < link rel="apple-touch-icon" sizes="180x180" href="images/icons/apple-touch-icon.png">
  < link rel="icon" href="images/icons/favicon-16x16.png" sizes="16x16" />
  < link rel="icon" href="images/icons/favicon-32x32.png" sizes="32x32" />
  < link rel="icon" href="images/icons/android-chrome-192x192.png" sizes="192x192" />
  < link rel="icon" href="images/icons/android-chrome-512x512.png" sizes="512x512" />
  < link rel="manifest" href="site.webmanifest">
								

Example

These are the primary CSS files used for general front-end styling. Use these to customize your theme even further. All included CSS codes under rootfolder/css/

• 1. style.css - Primary stylesheet
• 2. bootstrap.min.css - Bootstrap stylesheet
• 3. owl.carousel.min.css - OWL Carousel
• 4. media.css - styles for different media types/devices

These are the various attribution inks to the Javascript files included or modified to work with in this theme. All included JavaScript codes under rootfolder/js/

• 1. bootstrap.bundle.min.js - Bootstrap JavaScript
• 2. main.js - All JavaScript Plugins
• 3. jquery-3.6.0.min.js - Base JavaScript
• 4. owl.carousel.min.js - Lightbox JavaScript

Our life is made much easier we have special thanks to the following.

Please be aware the we do not provide customer support through the comments section on themeforest and will redirect all questions to our support team. Please email us if you have any concern regarding template or support we make sure that it is dealt with in a timely manner.

Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions relating to this template. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

These Template are designed and Developed by Webduck.

It is Exclusively available on Envato for purchase.