Edukin HTML Template

  • Version: 1.0.0
  • Last Updated: July 23 2019
  • Author: themesflat
Thank you so much for your interests. Your comments and ratings would be much appreciated. If you purchase this template, you will get support. We will update this template time by time and we want to hear your wishes for the future updates or for complete new templates. You need file PSD or images please contact via skyper:themesflat or email themesflat@gmail.com we will send this for you.

Template features:

  • HTML5 & CSS3
  • Responsive Template
  • Free icons used
  • Pixel Perfect
  • Clean & Unique Design
  • Easy to customize
  • Retina Ready
  • Font awesome
  • Font icomoon
  • 5 Home Page
  • Cross-Browser Compatibility: Chrome, FireFox, Safari, IE9+, Opera
  • & much more...

HTML Structure

Edukin HTMl Template

Below is Edukin basic structure:

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>edukin Template</title>

    <!-- Mobile Specific Metas -->

    <!-- Bootstrap  -->

    <!-- Bootstrap  -->

    <!-- Template Style -->

    <!-- Favicon and touch icons -->

</head>

<body>

    <!-- wrap-header --> 
    <header class="header flat-header lh-header header-style1"> </header>


    <!-- Section flat-slider -->
    <section class="flat-slider style1 clearfix"> </section>

    <!-- Section partner-clients-->
    <section class="partner-clients partner-clients-style1"> </section>

    <!-- Section flat-services s-->
    <section class="flat-services style1 parallax parallax1 clearfix"> </section>

    <!-- Section flat-introduce-->
    <section class="flat-introduce flat-introduce-style1 clearfix"> </section>

    <!-- Section flat-benefit-->
    <section class="flat-benefit style1 clearfix"> </section>

    <!-- Section flat-event-->
    <section class="flat-event flat-event-style1 clearfix"> </section>

    <!-- testimonial -->
    <section class="slider testimonial-flexslider testimonial-style1 equalize sm-equalize-auto clearfix"> </section>

    <!-- quick-link -->
    <section class="quick-link quick-link-style1 parallax parallax2"> </section>

    <!-- Footer -->
    <footer class="footer-type1"> </footer>

   	<!-- Bottom -->
   	<div class="bottom-type1 clearfix has-spacer"> </bottom>

   	<!-- Go Top -->
    <a class="show"> </a>
     	
   <!-- Javascript -->
   <script type="text/javascript" src="assets/js/jquery.min.js"></script>
   <script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
   <script type="text/javascript" src="assets/js/jquery-ui.js"></script>
   <script type="text/javascript" src="assets/js/jquery-fancybox.js"></script>
   <script type="text/javascript" src="assets/js/flex-slider.min.js"></script>
   <script type="text/javascript" src="assets/jsowl.carousel.min.js"></script>      
   <script type="text/javascript" src="assets/jquery.mCustomScrollbar.concat.min.js"></script>
   <script type="text/javascript" src="assets/js/jquery-isotope.js"></script>
   <script type="text/javascript" src="assets/js/parallax.js"></script>
   <script type="text/javascript" src="assets/js/jquery-countTo.js"></script>
   <script type="text/javascript" src="assets/js/equalize.min.js"></script>
  <script type="text/javascript" src="assets/js/main.js"></script>
</body>

</html>

CSS System

The edukin CSS System contains 3 parts:
  • Template style
  • Shortcodes style
  • Responsive style
  • Javascript - Fonts - Animation - Bootstrap style

Style.css ( Template style )


/**
  *
  * hover
    * button
    * mobile-button
    * mobile navigation
    * box-shadow
    * pd
    * mg
    * letter-spacing
    * bg-color
    * color
    * overlay
    * parallax
    * loading-overlay
    * header
    * top-bar
    * flat-slider
    * menu
    * sub-menu
    * blog
    * footer
    * bottom
    * blog-single
    * home1
    * home2
    * home3
    * home4
    * home5
    * about
    * course-list
    * course-grid
    * course-single
  *
**/

Shortcodes.css ( Shortcodes - Elements style )

You can easily use the shortcodes to create your own page.


/**
  *
  *container
    * title-section
    * heading
    * pd-row
    * form-sent
    * hide sidebar
    * pagination
    * courses-type1
    * carousel-hobby
    * quick link
    * testimonial
    * imagebox-courses-type2
    * flat-event
    * flat-services
    * flat-introduce
    * videobox
    * overlay hover
    * latest-blog-type2
    * flat-benefit
    * flat-process
    * client-style1
    * scroll-top
    * flat-course
    * flat-tag
    * flat-counter
    * owl-dots
    * cta-cr
  *
 **/

Javascript - Fonts - Animation - Bootstrap style

/**  
  * font-awesome.css
  * owl.carousel.min.css

  * animate.css
  * shortcodes.css

  * bootstrap.css 
  * flexslider.css
*/

Javascript Custom

Here you can modify any settings for ( Retina Logos, Animations, Testimonials, Sliders, & Progress bar and more..)

Main.js ( js/main.js )


/**
  * * flatOwl();
    * headerFixed();
    * removePreloader();
    * parallax();
    * flatIsotope();
    * tabs();
    * countDownTime();
    * FlatClient();
    * flatCounter();
    * testimonialSlider();
    * testimonialSlider2();
    * flatEqualizeHeight();
    * responsiveMenu();
    * goTop();
    * VideoPopup();
    * contentBox();
**/

Shortcodes System

You can easily use the shortcodes to create your own page.

    
/**
  *
  *container
    * title-section
    * heading
    * pd-row
    * form-sent
    * hide sidebar
    * pagination
    * courses-type1
    * carousel-hobby
    * quick link
    * testimonial
    * imagebox-courses-type2
    * flat-event
    * flat-services
    * flat-introduce
    * videobox
    * overlay hover
    * latest-blog-type2
    * flat-benefit
    * flat-process
    * client-style1
    * scroll-top
    * flat-course
    * flat-tag
    * flat-counter
    * owl-dots
    * cta-cr
  *
 **/

Credits