Documentation

Tikka - Portfolio Bootstrap 5 HTML Template

Thank you so much for purchasing our item from themeforest.

  • Created: 12 March, 2024
  • Update: 12 March, 2024

If you have any questions that are beyond the scope of this help file, Please feel free to email via support@devollic.com.

Installation

Follow the steps below to setup your site template:

  1. Unzip the downloaded package and open the /tikka-html-template folder to find all the template files. You will need to upload these files to your hosting web server using FTP or localhost in order to use it on your website.
  2. Below is the folder structure and needs to be uploaded to your website or localhost root directory:
    • tikka-html-template/assets - Contains all of the assets referenced
      • tikka-html-template/css - Stylesheet files
      • tikka-html-template/images - Images files
      • tikka-html-template/js - Javacript files
    • tikka-html-template/index.html - Homepage
    • tikka-html-template/index-2.html - Homepage version 2
  3. You should upload all or specific HTML files as per your need.
  4. You are good to go for adding your content now!

HTML Structure

Tikka follows a simple and easy to customize coding structure. Here is the sample for your reference:
The template is based on Bootstrap Framework 

<!DOCTYPE html>
<html lang="en">
<head>

<!-- Your Title, Description, Stylesheets
============================================= -->

</head>

<body> 
  
  <!-- Mobile Navigation start
  ============================ -->
  <nav>
   ......
  </nav>
  <!-- Mobile Navigation end --> 
  
  <section> 
    <!-- Desktop Navigation start
    ============================ -->
    <div>
     .....
    </div>
    <!-- Desktop Navigation end;
    ============================ -->

    <!-- Banner start
    ============================ -->
  </section>

  <!-- Other sections
  
  <!-- Footer -->
  <footer>
    <div class="container"> ...... </div>
  </footer>
  <!-- Footer end --> 

<!-- JavaScript -->
</body>
</html>

If you need more information, please visit bootstrap site: https://getbootstrap.com

Tikka template pages list:

  • Home 1 - Main home page of tikka template
  • Home 2 - Second home page of tikka template
  • About Us - About page for tikka template
  • Projects - Projects page of tikka template
  • Blog - Blog page in tikka template
  • Blog Details - Blog details page
  • Project Details - Project Details page
  • Contact - Contact page of tikka project

Color Schemes

You can change your Website's Color Scheme in an instant. We used 5 colors in our template. You can edit this colors from tikka/assets/css/custom.css line no. 47 

  :root {
    --primary: #c8f31d;
    --secondary: #131313;
    --sectionBg: #191919;
    --fontColor: #bfbfbf;
    --body-text-color: #bebebe;
  }

Theme Customization

We have include a Custom CSS File in the css folder so that you can better handle your customizations. Simply add all your custom CSS codes in the assets/css/custom.css file. 

<head>
<!-- Stylesheet
============================== -->
<!----->
<!-- Here goes your custom.css
============================================= -->
<link rel="stylesheet" type="text/css" href="assets/css/custom.css" />
</head>

Logo Settings

The Logo can be found in Hero section

                <a href="/index.html">
               <div class="d-flex align-items-center text-white m-0 text-uppercase gap-2">
                   <img src="./assets/images/home/logo.svg" alt="Logo" >
                   <h3>Tikka</h3>
               </div>
               </a>

Fonts use in Tikka template

We use free Alata and Montserrat font from google fonts.

              <!-- Fonts: Montserrat & Alata -->
             <link rel="stylesheet" href="./assets/fonts/fonts.css" >

Typography

Documentation and examples for typography, headings, body text, lists, and more.

Headings

Heading Example
<h1></h1>

h1. Heading
<h2></h2>

h2. Heading
<h3></h3>

h3. Heading
<h4></h4>

h4. Heading
<h5></h5>
h5. Heading
<h6></h6>
h6. Heading

Icons

Font Awesome icon sets are used in Tikka.

<i class="fa-solid fa-plus"></i>
               <i class="fa-regular fa-circle-check"></i>
               <i class="fa-solid fa-angle-down"></i>
               <i class="fa-solid fa-play"></i>
               <i class="fa-solid fa-angles-right"></i>
               <i class="fa-solid fa-arrow-right"></i>
               <i class="fa-solid fa-quote-right"></i>
               <i class="fa-solid fa-calendar-days"></i>
               <i class="fa-solid fa-envelope"></i>
               <i class="fa-solid fa-location-dot"></i>
               <i class="fa-brands fa-facebook-f"></i>
               <i class="fa-brands fa-x-twitter"></i>
               <i class="fa-brands fa-linkedin"></i>
               <i class="fa-brands fa-pinterest-p"></i>

NotePlease go to their official documentation pages for a full list of icons: Font Awesome

Source & Credits

Images:

Fonts:

Scripts:

Support

If this documentation doesn't answer your questions, So, please send us email support@devollic.com

We are located in GMT +6:00 time zone and we answer all questions within 12-24 hours in weekdays. In some rare cases the waiting time can be to 48 hours. (except holiday seasons which might take longer).

Note: While we aim to provide the best support possible, please keep in mind that it only extends to verified buyers and only to issues related to our template like bugs and errors. Custom modifications or third party module implementations are not included.

Don’t forget to rate this template

Please add your review (opinion) for our template. It would be a great support for us. Thank you.

Changelog

See what's new added, changed, fixed, improved or updated in the latest versions.

For Future Updates Follow Us @themeforest / @facebook / @linkedin / @twitter @youtube

Version 1.0 (12 March, 2024)

Initial Release