Documentation
Tikka - Portfolio Bootstrap 5 HTML Template
Thank you so much for purchasing our item from themeforest.
- Version: 1.0
- Author: Devollic
- 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:
- 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.
-
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 referencedtikka-html-template/css
- Stylesheet filestikka-html-template/images
- Images filestikka-html-template/js
- Javacript files
tikka-html-template/index.html
- Homepage-
tikka-html-template/index-2.html
- Homepage version 2
-
- You should upload all or specific HTML files as per your need.
- 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:
- Unsplash - https://unsplash.com/
- Freepik - https://www.freepik.com/
Fonts:
- FontAwesome Icons - https://fontawesome.com/
- Google Fonts - https://fonts.google.com/
Scripts:
- jQuery - http://www.jquery.com/
- Bootstrap 5 - http://getbootstrap.com/
- Popper Js - https://popper.js.org/
- Counter Js - https://www.jqueryscript.net/animation/count-up-me.html
- Magnific Popup - https://dimsemenov.com/plugins/magnific-popup/
- Owl Carousel - https://owlcarousel2.github.io/OwlCarousel2/
- AOS - https://michalsnik.github.io/aos/
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).
Don’t forget to rate this template
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