KADIROV is a beautiful easy to use template. The template is responsive, so you can view it also in the mobile/tablets devices and it looks very nice in thoose devices. TASTY is retina ready that means it looks great and very sharp in high resolution devices.
The template have :
When you download the main download file you will find several folder :
To install the template in your server you need to upload all HTML files along with all directories (css,js,assets) in the structure that they appear in your download package. That is, all HTML files should reside in the root directory, and all other files should reside inside their associated folder.
The files that you will need to upload to your server are located in the main download file in the HTML folder.
Make sure that you make all the css style changes inside a custom.css file and leave all the main.css and the bootstrap.css file without making any changes. This will make template update very easy, you will only need to preserve your custom.css file.
In this section a guide to understanding how KADIROV is structured.
This folder contain all the files needed to setup the template and upload it to your server including sub folder that contains the core of the template setup css files, js files, webfonts files and assets files.
This folder contain all the css files that are required by the template those files are :
app.css
plugins.min.css
This folder contain all the js files required by the template those files are :
This subfolder contain other subfolders : the img subfolder and the svg subfolder, evenif those are not included in the main download files and replaced with placeholders, but you can replace theme easly with your own assets.
/assets/img./assets/svg.
This folder contain all the webfonts from fontawsome used in this template, you can use a wide range of icons that suits your need and the . For more info on how to setup and use fontawsome please visit this link below :
https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=web-fonts-with-css
An overview of the plugins supplied with KADIROV
jQuery is a JavaScript library designed to simplify the client-side scripting of HTML. It is free, open-source software using the permissive MIT License.
Touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider.
Web's most easy to integrate lightbox gallery library. Super-lightweight, outstanding performance, no dependencies.
Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.
Instafeed is a dead-simple way to add Instagram photos to your website. No jQuery required, just plain 'ol javascript.
Contains additional scripts required by KADIROV.
KADIROV uses fontawsome icons, the template come with a set of icons that you can use as you want, and change the default icons to fit your needs.You can find the list of the icons in the plugins.min.css in the css folder then you can choose the icon that you want and change it in the html code.
The images used in this template are not included with the main purchased files, but there are freebies and you can download them from the links below :
The svg icons used in this template are scalable Vector Graphics and are easy to use and customize.
The svg used in this template are from fontawesome and undraw illustration
To customize the svg and use theme in your project just go to this links below and download the icons and the svg illustration that you want to use and you can open them in your prefered graphic tool progam
Below the markups that setup the navbar of the template. You can changes the html markup to customize the navigation of the site very easy.
<div class="main-nav">
<div class="main-nav__nav">
<ul>
<li class="js-nav-to-anchor"><a href="#home">HOME</a></li>
<li class="js-nav-to-anchor"><a href="#projects">PROJECTS</a></li>
<li class="js-nav-to-anchor"><a href="#contact">CONTACT</a></li>
</ul>
</div>
</div>
<!-- main-nav -->
Touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider.
The setup of the review slider like below :
Html setup
<div data-aos="zoom-in" data-aos-duration="1000" class="main-slider">
<div class="main-slider__section">
<div class="main-slider__inner">
<div class="main-slider__items js-main-slider owl-carousel">
<div style="background-image: url('assets/img/11.jpg');" class="main-slider__item">
<div class="main-slider__body contain">
<h1 class="main-slider__title">
WE MAKE YOUR
<br>
<strong>DREAM come TRUE</strong>
</h1>
<div class="main-slider__desc">Lorem ipsum dolor sit amet, consectetur</div>
<div class="main-slider__bot">
<button class="main-slider__btn-consultation btn-general" type="button">FREE CONSULTATION</button>
<a class="main-slider__btn-about-us btn-general" data-remodal-target="about_us" href="#">LEARN MORE ABOUT US</a>
</div>
</div>
</div>
<div style="background-image: url('assets/img/11.jpg');" class="main-slider__item">
<div class="main-slider__body contain">
<h1 class="main-slider__title">
WE MAKE YOUR
<br>
<strong>DREAM come TRUE</strong>
</h1>
<div class="main-slider__desc">Lorem ipsum dolor sit amet, consectetur</div>
<div class="main-slider__bot">
<button class="main-slider__btn-consultation btn-general" type="button">FREE CONSULTATION</button>
<a class="main-slider__btn-about-us btn-general" data-remodal-target="about_us" href="#">LEARN MORE ABOUT US</a>
</div>
</div>
</div>
<div style="background-image: url('assets/img/11.jpg');" class="main-slider__item">
<div class="main-slider__body contain">
<h1 class="main-slider__title">
WE MAKE YOUR
<br>
<strong>DREAM come TRUE</strong>
</h1>
<div class="main-slider__desc">Lorem ipsum dolor sit amet, consectetur</div>
<div class="main-slider__bot">
<button class="main-slider__btn-consultation btn-general" type="button">FREE CONSULTATION</button>
<a class="main-slider__btn-about-us btn-general" data-remodal-target="about_us" href="#">LEARN MORE ABOUT US</a>
</div>
</div>
</div>
<div style="background-image: url('assets/img/11.jpg');" class="main-slider__item">
<div class="main-slider__body contain">
<h1 class="main-slider__title">
WE MAKE YOUR
<br>
<strong>DREAM come TRUE</strong>
</h1>
<div class="main-slider__desc">Lorem ipsum dolor sit amet, consectetur</div>
<div class="main-slider__bot">
<button class="main-slider__btn-consultation btn-general" type="button">FREE CONSULTATION</button>
<a class="main-slider__btn-about-us btn-general" data-remodal-target="about_us" href="#">LEARN MORE ABOUT US</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- main-slider -->
Javascript setup
$('.js-main-slider').owlCarousel({
items: 1,
loop: true,
nav: true,
dots: true,
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: true,
mouseDrag: false,
animateOut: 'fadeOut',
animateIn: 'slideOutin',
navText: [svgArrowSlider, svgArrowSlider]
});
Block with your video in a popup window
You can embed a link to your video in code e.g. yuotube
href="{link to your video}"
<a class="presentation__btn-play btn-general" data-remodal-target="video" href="{link to your video}"></a>
<div class="presentation">
<div class="presentation__section full-contain light-bg" style="background-image: url('assets/img/background/22.jpg');">
<div class="v-lines">
<div class="v-lines__inner"></div>
</div>
<div class="presentation__inner contain" data-aos="fade-up" data-aos-duration="1000">
<h2 class="presentation__title title-general title-general--colors">WE ARE MORE <strong>THAN
YOU THINK</strong></h2>
<div class="presentation__body">
<div style="background-image: url('assets/img/22.jpg');" class="presentation__video-preview">
<a class="presentation__btn-play btn-general" data-remodal-target="video" href="{link to your video}"></a>
</div>
<div class="presentation__text text-general">For us, making quality accessible means developing a unique kind of quality, achievable thanks to reliable, robust and durable design materials, so that the price of the product reflects its true value
</div>
</div>
<div class="popup-video">
<div class="popup-video__section">
<div class="popup-video__video remodal" data-remodal-id="video">
<button data-remodal-action="close" class="remodal-close"></button>
<iframe width="100%" height="700" src="" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</div>
</div>
</div>
<!-- b:popup-video -->
</div>
</div>
</div>
<!-- presentation -->
KADIROV come with instagram feed section to display user, popular or tags photo feeds inside your site, by default this area in the footer display a default set of images for demo purposes, but od cours you can display your own instagram fee, popular or tags photo feeds....
To change the instafeed widget located in the footer to display the images that want(your user feed, popular or tags photo feeds), simply open index.html file located in HTML folder main HTML folder then locate the instagram feed section id="instafeed" and in the special data-attributs ( data-userID="" data-accessToken="") paste the data of your instagram.
more details how to get the necessary data in instagram documentation https://www.instagram.com/developer/authentication/
More info about instgram feed option can be found here :
KADIROV is very easy to customize because it's a block based design template so you can move sections arround , and put them the order you want.
Because KADIROV is built using bootstrap, you can cutomize the element and the display of the element by simply modifying class names.
Updates will be released periodically to add new features, provide fixes where necessary and maintain compatibility.
Manly the updated files are javascript or CSS and your project should need little adjustment in order to stay up to date.
You will be notified by the author once some updates are made to the template.