Getting Started
kitkat. is a HTML/CSS template based on Bootstrap and Materialize framework. It allows to built impressive, better & faster, mobile friendly websites.
HTML Structure
This is the base of each HTML file:
<!-- Start of nav bar
============================================= -->
<nav id="abrar-nav">
...
</nav>
<!-- End of nav bar
============================================= -->
<!-- Start of header
============================================= -->
<header id="site-header">
...
</header>
<!-- End of header
============================================= -->
<!-- Start of section name
============================================= -->
<section id="section-name-id" class="section-name-class">
...
</section>
<!-- End section name
============================================= -->
<!-- Start of footer
============================================= -->
<footer>
...
</footer>
<!-- End of footer
============================================= -->
Main Slider
<section id="slide" class="slider-section">
<div id="slider-item" class="slider-item-details">
<div class="slider-area">
<div class="slider-text">
<div class="slider-text-content">
<div class="layer-1-1">
----
</div>
</div>
</div>
</div>
<div class="slider-area">
<div class="slider-text">
<div class="slider-text-content">
<div class="layer-1-1">
----
</div>
</div>
</div>
</div>
<div class="slider-area">
<div class="slider-text">
<div class="slider-text-content">
<div class="layer-1-1">
----
</div>
</div>
</div>
</div>
<div class="slider-area">
<div class="slider-text">
<div class="slider-text-content">
<div class="layer-1-1">
----
</div>
</div>
</div>
</div>
</div>
</section>
Student Counter Up
<div class="col-md-3 col-sm-6">
<div class="counter-icon-number animation" data-animation="fadeInUp" data-animation-delay="0.6s">
<div class="counter-icon">
<i class="text-gradiant flaticon-graduation-hat"></i>
</div>
<div class="counter-number">
<span class="counter-count bold-font">-- </span><span>M+</span>
<p>---</p>
</div>
</div>
</div>
Popular Course Slider
<div id="course-slide-item" class="course-slide">
<div class="course-item-pic-text animation" data-animation="fadeInUp" data-animation-delay="0.6s">
<div class="course-pic relative-position mb25">
<img src="---" alt="">
<div class="course-price text-center gradient-bg">
<span>$--</span>
</div>
<div class="course-details-btn">
<a href="#">--- <i class="fas fa-arrow-right"></i></a>
</div>
</div>
<div class="course-item-text">
<div class="course-meta">
<span class="course-category bold-font"><a href="#">---</a></span>
<span class="course-author bold-font"><a href="#">--0</a></span>
<div class="course-rate ul-li">
<ul>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
</ul>
</div>
</div>
<div class="course-title mt10 headline pb45 relative-position">
<h3><a href="#">----.</a> <span class="trend-badge text-uppercase bold-font"><i class="fas fa-bolt"></i> TRENDING</span></h3>
</div>
<div class="course-viewer ul-li">
<ul>
<li><a href=""><i class="fas fa-user"></i> --</a></li>
<li><a href=""><i class="fas fa-comment-dots"></i> --</a></li>
<li><a href="">--</a></li>
</ul>
</div>
</div>
</div>
<!-- slide-item-1 -->
<div id="course-slide-item" class="course-slide">
<div class="course-item-pic-text animation" data-animation="fadeInUp" data-animation-delay="0.6s">
<div class="course-pic relative-position mb25">
<img src="---" alt="">
<div class="course-price text-center gradient-bg">
<span>$--</span>
</div>
<div class="course-details-btn">
<a href="#">--- <i class="fas fa-arrow-right"></i></a>
</div>
</div>
<div class="course-item-text">
<div class="course-meta">
<span class="course-category bold-font"><a href="#">---</a></span>
<span class="course-author bold-font"><a href="#">--0</a></span>
<div class="course-rate ul-li">
<ul>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
</ul>
</div>
</div>
<div class="course-title mt10 headline pb45 relative-position">
<h3><a href="#">----.</a> <span class="trend-badge text-uppercase bold-font"><i class="fas fa-bolt"></i> TRENDING</span></h3>
</div>
<div class="course-viewer ul-li">
<ul>
<li><a href=""><i class="fas fa-user"></i> --</a></li>
<li><a href=""><i class="fas fa-comment-dots"></i> --</a></li>
<li><a href="">--</a></li>
</ul>
</div>
</div>
</div>
<!-- slide-item-2 -->
<div id="course-slide-item" class="course-slide">
<div class="course-item-pic-text animation" data-animation="fadeInUp" data-animation-delay="0.6s">
<div class="course-pic relative-position mb25">
<img src="---" alt="">
<div class="course-price text-center gradient-bg">
<span>$--</span>
</div>
<div class="course-details-btn">
<a href="#">--- <i class="fas fa-arrow-right"></i></a>
</div>
</div>
<div class="course-item-text">
<div class="course-meta">
<span class="course-category bold-font"><a href="#">---</a></span>
<span class="course-author bold-font"><a href="#">--0</a></span>
<div class="course-rate ul-li">
<ul>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
</ul>
</div>
</div>
<div class="course-title mt10 headline pb45 relative-position">
<h3><a href="#">----.</a> <span class="trend-badge text-uppercase bold-font"><i class="fas fa-bolt"></i> TRENDING</span></h3>
</div>
<div class="course-viewer ul-li">
<ul>
<li><a href=""><i class="fas fa-user"></i> --</a></li>
<li><a href=""><i class="fas fa-comment-dots"></i> --</a></li>
<li><a href="">--</a></li>
</ul>
</div>
</div>
</div>
<!-- slide-item-3 -->
Service Slide
<div class="service-text-icon animation" data-animation="fadeInUp" data-animation-delay="0.5s">
<div class="service-icon float-left">
<i class="text-gradiant flaticon-maths-class-materials-cross-of-a-pencil-and-a-ruler">Your Icon</i>
</div>
<div class="service-text">
<h3 class="bold-font">Title here</h3>
<p>Text here</p>
</div>
</div>
<!-- slide-item-1 -->
<div class="service-text-icon animation" data-animation="fadeInUp" data-animation-delay="0.5s">
<div class="service-icon float-left">
<i class="text-gradiant flaticon-maths-class-materials-cross-of-a-pencil-and-a-ruler">Your Icon</i>
</div>
<div class="service-text">
<h3 class="bold-font">Title here</h3>
<p>Text here</p>
</div>
</div>
<!-- slide-item-2 -->
<div class="service-text-icon animation" data-animation="fadeInUp" data-animation-delay="0.5s">
<div class="service-icon float-left">
<i class="text-gradiant flaticon-maths-class-materials-cross-of-a-pencil-and-a-ruler">Your Icon</i>
</div>
<div class="service-text">
<h3 class="bold-font">Title here</h3>
<p>Text here</p>
</div>
</div>
<!-- slide-item-3 -->
testimonial Slide
<div id="testimonial-slide-item" class="testimonial-slide-area">
<div class="student-qoute animation" data-animation="fadeInUp" data-animation-delay="0.5s">
<p>"testimonial text here"</p>
<div class="student-name-designation">
<span class="st-name bold-font">Student name </span>
<span class="st-designation">Designation </span>
</div>
</div>
<div class="student-qoute animation" data-animation="fadeInUp" data-animation-delay="0.6s">
<p>"testimonial text here"</p>
<div class="student-name-designation">
<span class="st-name bold-font">Student name </span>
<span class="st-designation">Designation </span>
</div>
</div>
<div class="student-qoute animation" data-animation="fadeInUp" data-animation-delay="0.7s">
<p>"testimonial text here"</p>
<div class="student-name-designation">
<span class="st-name bold-font">Student name </span>
<span class="st-designation">Designation </span>
</div>
</div>
<div class="student-qoute">
<p>"testimonial text here"</p>
<div class="student-name-designation">
<span class="st-name bold-font">Student name </span>
<span class="st-designation">Designation </span>
</div>
</div>
</div>
</div>
Video Pop Up
<div class="vidoe-text animation" data-animation="fadeInUp" data-animation-delay="0.6s">
<h3 class="latest-title bold-font"><a href="Video link here">Video title</a></h3>
<p class="mb25">Video description</p>
</div>
Sponsor Slide
<div class="sponsor-item sponsor-1">
<div class="sponsor-pic text-center animation">
<img src="image path here" alt="">
</div>
<div class="sponsor-pic text-center animation">
<img src="image path here" alt="">
</div>
<div class="sponsor-pic text-center animation">
<img src="image path here" alt="">
</div>
<div class="sponsor-pic text-center animation">
<img src="image path here" alt="">
</div>
<div class="sponsor-pic text-center animation">
<img src="image path here" alt="">
</div>
<div class="sponsor-pic text-center animation">
<img src="image path here" alt="">
</div>
<div class="sponsor-pic text-center">
<img src="image path here" alt="">
</div>
<div class="sponsor-pic text-center">
<img src="image path here" alt="">
</div>
<div class="sponsor-pic text-center">
<img src="image path here" alt="">
</div>
</div>
Best Course Settings
<div class="best-course-pic-text relative-position animation">
<div class="best-course-pic relative-position">
<img src="Your Image path" alt="">
<div class="course-price text-center gradient-bg">
<span>Course Price</span>
</div>
<div class="course-rate ul-li">
<ul>
<li><i class="course-rate"></i></li>
<li><i class="course-rate"></i></li>
<li><i class="course-rate"></i></li>
<li><i class="course-rate"></i></li>
<li><i class="course-rate"></i></li>
</ul>
</div>
<div class="course-details-btn">
<a href="#">details btn <i class="fas fa-arrow-right"></i></a>
</div>
<div class="blakish-overlay"></div>
</div>
<div class="best-course-text">
<div class="course-title mb20 headline relative-position">
<h3><a href="#">Course title.</a></h3>
</div>
<div class="course-meta">
<span class="course-category"><a href="#">Course category</a></span>
<span class="course-author"><a href="#">number of student</a></span>
</div>
</div>
</div>
Teacher settings
<div class="teacher-img-content animation">
<div class="teacher-cntent">
<div class="teacher-social-name ul-li-block">
<ul>
<li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
</ul>
<div class="teacher-name">
<span>Teacher Name</span>
</div>
</div>
<div class="teacher-img-category">
<div class="teacher-img">
<img src="Teacher image path" alt="">
<div class="course-price text-uppercase text-center gradient-bg">
<span>Category</span>
</div>
</div>
<div class="teacher-category float-right">
<span class="st-name">Designation </span>
</div>
</div>
</div>
</div>
Best Product Settings
<div id="best-product-slide-item" class="best-product-slide">
<div class="product-img-text animation">
<div class="product-img text-center mb20">
<img src="Product Image path" alt="">
</div>
<div class="product-text-content relative-position">
<div class="best-title-price float-left">
<div class="course-title headline">
<h3><a href="#">Product Category</a></h3>
</div>
<div class="price-start">
Start from
<span>Product Price</span>
</div>
</div>
<div class="add-cart text-center">
<i class="fas fa-cart-plus"></i>
</div>
</div>
</div>
<div class="product-img-text animation">
<div class="product-img text-center mb20">
<img src="Product Image path" alt="">
</div>
<div class="product-text-content relative-position">
<div class="best-title-price float-left">
<div class="course-title headline">
<h3><a href="#">Product Category</a></h3>
</div>
<div class="price-start">
Start from
<span>Product Price</span>
</div>
</div>
<div class="add-cart text-center">
<i class="fas fa-cart-plus"></i>
</div>
</div>
</div>
<div class="product-img-text animation">
<div class="product-img text-center mb20">
<img src="Product Image path" alt="">
</div>
<div class="product-text-content relative-position">
<div class="best-title-price float-left">
<div class="course-title headline">
<h3><a href="#">Product Category</a></h3>
</div>
<div class="price-start">
Start from
<span>Product Price</span>
</div>
</div>
<div class="add-cart text-center">
<i class="fas fa-cart-plus"></i>
</div>
</div>
</div>
<div class="product-img-text animation">
<div class="product-img text-center mb20">
<img src="Product Image path" alt="">
</div>
<div class="product-text-content relative-position">
<div class="best-title-price float-left">
<div class="course-title headline">
<h3><a href="#">Product Category</a></h3>
</div>
<div class="price-start">
Start from
<span>Product Price</span>
</div>
</div>
<div class="add-cart text-center">
<i class="fas fa-cart-plus"></i>
</div>
</div>
</div>
<div class="product-img-text">
<div class="product-img text-center mb20">
<img src="Product Image path" alt="">
</div>
<div class="product-text-content relative-position">
<div class="best-title-price float-left">
<div class="course-title headline">
<h3><a href="#">Product Category</a></h3>
</div>
<div class="price-start">
Start from
<span>Product Price</span>
</div>
</div>
<div class="add-cart text-center">
<i class="fas fa-cart-plus"></i>
</div>
</div>
</div>
</div>
FAQ tabs and others tabs
Tab Button
<div class="faq-tab-ques ul-li">
<div class="tab-button text-center mb65">
<ul class="product-tab">
<li class="active" rel="tab1">Category </li>
<li rel="tab2"> Category </li>
<li rel="tab3"> Category </li>
<li rel="tab4"> Category </li>
<li rel="tab5"> Category </li>
</ul>
</div>
Tab Content
<div id="tab1" class="tab-content-1 pt35">
Your content here
</div>
<div id="tab2" class="tab-content-1 pt35">
Your content here
</div>
<div id="tab3" class="tab-content-1 pt35">
Your content here
</div>
<div id="tab4" class="tab-content-1 pt35">
Your content here
</div>
<div id="tab5" class="tab-content-1 pt35">
Your content here
</div>
Google Map
You put your Google Map Latitude and Longitude. Style can Change in founction file
Why Choose Settings
<div class="extra-left-content animation">
<div class="extra-icon-text text-left">
<div class="features-icon gradient-bg text-center">
<i class="flaticon-maths-class-materials-cross-of-a-pencil-and-a-ruler"></i>
</div>
<div class="features-text">
<div class="features-text-title">
<h3>Title.</h3>
</div>
<div class="features-text-dec">
<span>Choose us Content</span>
</div>
</div>
</div>
</div>
Course Advantages Slide
<div class="service-slide_3">
<div class="service-text-icon">
<div class="service-icon float-left">
<i class="text-gradiant flaticon-maths-class-materials-cross-of-a-pencil-and-a-ruler"></i>
</div>
<div class="service-text">
<h3 class="bold-font">Title.</h3>
<p>Description Content.</p>
</div>
</div>
<div class="service-text-icon">
<div class="service-icon float-left">
<i class="text-gradiant flaticon-clipboard-with-pencil"></i>
</div>
<div class="service-text">
<h3 class="bold-font">Title.</h3>
<p>Description Content.</p>
</div>
</div>
</div>
Course Settings
<table>
<tr class="list-head">
<th>COURSE NAME</th>
<th>COURSE TYPE</th>
<th>STARTS</th>
<th>LENGTH</th>
</tr>
<tr>
<td>
<div class="course-list-img-text">
<div class="course-list-img">
<img src="Course Image Path" alt="">
</div>
<div class="course-list-text">
<h3><a href="#">Course Title</a></h3>
<div class="course-meta">
<span class="course-category bold-font"><a href="#">Pricr</a></span>
<div class="course-rate ul-li">
<ul>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
</ul>
</div>
</div>
</div>
</div>
</td>
<td>
<div class="course-type-list">
<span>Category</span>
</div>
</td>
<td>date</td>
<td>lenght</td>
</tr>
</table>
Log in PopUp
<div class="modal-header backgroud-style">
<div class="gradient-bg"></div>
<div class="popup-logo">
<img src="assets/img/logo/p-logo.jpg" alt="">
</div>
<div class="popup-text text-center">
<h2> <Log in Title.</h2>
<p>Text Content></p>
</div>
</div>
<div class="modal-body">
Body content
</div>
Files & Credits
CSS & JS Files
The template uses more CSS & JS files:
Bootstrap 4- from Twitter http://getbootstrap.com/(more at credicts)Owl Carousel- from Bartosz http://www.owlgraphic.com/owlcarousel / (more at credicts)Google Map- from DEMONTE Jean-Baptiste http://gmap3.net(more at credicts)FontAwesome- from FontAwesome https://fontawesome.com/(more at credicts)Magnific Popup- from Magnific Popup http://dimsemenov.com/plugins/magnific-popup/(more at credicts)lightbox- from lightbox http://lokeshdhakar.com/projects/lightbox2/(more at credicts)jquery-ui- from jquery-ui http://lokeshdhakar.com/projects/lightbox2/(more at credicts)waypoints- from Waypoint https://github.com/imakewebthings/jquery-waypoints/blob/master/licenses.txt(more at credicts)jarallax- from Jarallax https://github.com/nk-o/jarallax(more at credicts)Counter Up- from Counter Up http://gambit.ph @bfintal(more at credicts)Meanmenu- from MeanMenu https://github.com/meanthemes/meanMenu(more at credicts)