Kinter
Kinter — Kids Kindergarten & School HTML Template
- Created: 25/08/2020
- Latest Update: 07/02/2022
- by: XpressBuddy
- email: wasimmia.info@gmail.com
Installation
Follow the steps below to get started with Kinter - Kids Kindergarten & School HTML5 Template :
-
Open the
Package/KinterFolder to find all the Templates Files - You will need to Upload these files to your Web Server using FTP or cPanle in order to use it on your Website.
-
Make sure you have upload the required files and folders listed below:
-
Kinter HTML/css, js, fonts- Stylesheets, JavaScript, Fonts etc Folder -
Kinter HTML/img- Images Folder -
Kinter HTML/index.html- Index File/Homepage
-
- You're now ready to go..! Start adding your Content and show off your Brand New Website.
Features At A Glance
- HTML5 & CSS3 & jQuery
- Modern And Creative Design
- Universal menu
- 100% Responsive
- Well documented
- Bootstrap 4.x
- Fontawesome Used
- Google Font Used
- Fixed Menu
- Google Map
- Eye Catching Design
- W3C Validate Code
HTML Structure
Kinter has follows a simple coding structure. here is the sample:
<!doctype html> <html class="no-js" lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>Kinter - Kids Kindergarten & School HTML Template</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="manifest" href="site.webmanifest"> <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico"> <!-- Place favicon.ico in the root directory --> <!-- CSS here --> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/owl.carousel.min.css"> <link rel="stylesheet" href="css/fontawesome-all.min.css"> <link rel="stylesheet" href="css/themify-icons.css"> <link rel="stylesheet" href="css/animate.css"> <link rel="stylesheet" href="css/magnific-popup.css"> <link rel="stylesheet" href="css/meanmenu.css"> <link rel="stylesheet" href="css/default.css"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/responsive.css"> </head> <body> <!-- preloader start --> <div id="preloader"> <div class="preloader"> <span></span> <span></span> </div> </div> <!-- preloader end --> <!-- header start --> <header> <div class="header-top d-none d-lg-block"> <div class="container"> <div class="row"> <div class="col-12"> <ul class="left"> <li><span><i class="far fa-clock"></i></span> 9:30am - 6:30pm Mon - Sun</li> <li><span><i class="fas fa-phone-alt"></i></span> +800-123-4567 6587</li> <li><span><i class="fas fa-map-marker-alt"></i></span> Anmoore Road Brooklyn, NY 230</li> </ul> <ul class="right"> <li><a href="#"><i class="fab fa-facebook-messenger"></i></a></li> <li><a href="#"><i class="fab fa-twitter"></i></a></li> <li><a href="#"><i class="fab fa-vimeo-v"></i></a></li> <li><a href="#"><i class="fab fa-skype"></i></a></li> <li><a href="#"><i class="fas fa-rss"></i></a></li> </ul> </div> </div> </div> </div> <div id="sticky-header" class="header-bottom-area"> <div class="container"> <div class="row align-items-center"> <div class="col-xl-2 col-lg-1"> <div class="logo"> <a href="index.html"><img src="img/logo/logo.png" alt=""></a> </div> </div> <div class="col-xl-10 col-lg-11"> <div class="header-button d-none d-lg-block f-right"> <a class="thm-btn" href="#">Admissaion Now</a> </div> <div class="main-menu f-right"> <nav id="mobile-menu"> <ul> <li><a href="#">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="classes.html">Classes</a></li> <li><a href="teachers.html">Teachers</a></li> <li><a href="#">Pages</a> <ul class="submenu"> <li><a href="about.html">About</a></li> <li><a href="classes.html">Classes</a></li> <li><a href="teachers.html">Teachers</a></li> <li><a href="blog.html">Blog</a></li> <li><a href="blog-details.html">Blog Details</a></li> <li><a href="contact.html">Contact</a></li> </ul> </li> <li><a href="#">Blog</a> <ul class="submenu"> <li><a href="blog.html">Blog</a></li> <li><a href="blog-details.html">Blog Details</a></li> </ul> </li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </div> <div class="mobile-menu"></div> </div> </div> </div> </div> </header> <!-- header end --> <main> <!-- banner area start --> <section class="banner-area section-notch"> <div class="hero-bg-img slider-height d-flex align-items-center" data-background="img/bg/banner-bg.jpg"> <div class="banner-overlay"></div> <div class="container"> <div class="row"> <div class="col-xl-6 col-lg-8 col-md-10"> <div class="banner-content"> <h3>A New Approach to</h3> <h2>Kids Education</h2> <p>We provide best solutions for a Clean Environment If you need any help in cleaning or maintenance.</p> <div class="banner-btn"> <a class="thm-btn thm-btn-2" href="#">Admissaion Now</a> <a class="thm-btn" href="#">Our Classes</a> </div> </div> </div> </div> </div> </div> </section> <!-- banner area end --> <!-- footer start --> <footer> <div class="footer-area" data-background="img/bg/footer-bg.jpg"> <div class="footer-top"> <div class="container"> <div class="footer-top-wrapper"> <div class="row"> <div class="col-xl-4 col-lg-4 col-md-4"> <div class="footer-top-single"> <div class="footer-top-icon"> <img src="img/icon/ft01.png" alt=""> </div> <div class="footer-top-content"> <h5>Give us a Call</h5> <span>+962-478-123-4567</span> </div> </div> </div> <div class="col-xl-4 col-lg-4 col-md-4"> <div class="footer-top-single"> <div class="footer-top-icon"> <img src="img/icon/ft02.png" alt=""> </div> <div class="footer-top-content"> <h5>Send us a Message</h5> <span>kinterschoo07@gmail.com</span> </div> </div> </div> <div class="col-xl-4 col-lg-4 col-md-4"> <div class="footer-top-single footer-top-single-2"> <div class="footer-top-icon"> <img src="img/icon/ft03.png" alt=""> </div> <div class="footer-top-content"> <h5>Visit our Location</h5> <span>07 Suitland Street 120 USA</span> </div> </div> </div> </div> </div> </div> </div> <div class="footer-bottom pt-110 pb-60"> <div class="container"> <div class="row"> <div class="col-xl-4 col-lg-4 col-md-6"> <div class="footer-widget mb-40"> <h3>About Kinter</h3> <p>Monotne deplos copertve chanva andng crorate Qhanin Unique Qnderwhe Premum Convere With Uheng Mutmed Nquel</p> <div class="footer-social"> <h4>Follow us :</h4> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fas fa-rss"></i></a> <a href="#"><i class="fab fa-dribbble"></i></a> <a href="#"><i class="fab fa-behance"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> </div> </div> </div> <div class="col-xl-4 col-lg-4 col-md-6"> <div class="footer-widget mb-40"> <h3>Recent Blog Posts</h3> <ul> <li> <div class="footer-blog-img"> <a href="blog-details.html"><img src="img/blog/footer-post/footer-post01.jpg" alt="post image"></a> </div> <div class="footer-blog-content"> <span>09 December 2020</span> <p><a href="blog-details.html">Remo Suppor Center What For Semicon ductor Provider</a></p> </div> </li> <li> <div class="footer-blog-img"> <a href="blog-details.html"><img src="img/blog/footer-post/footer-post02.jpg" alt="post image"></a> </div> <div class="footer-blog-content"> <span>09 December 2020</span> <p><a href="blog-details.html">Remo Suppor Center What For Semicon ductor Provider</a></p> </div> </li> </ul> </div> </div> <div class="col-xl-4 col-lg-4 col-md-6"> <div class="footer-widget mb-40"> <h3>Newsletter Subscription</h3> <p>Enter your email and get latest updates and offers subscribe us</p> <form action="#"> <input type="text" placeholder="Enter your email"> <button class="thm-btn">Subscribe Now!</button> </form> </div> </div> </div> </div> </div> </div> <div class="copyright-area pt-30 pb-30"> <div class="container"> <div class="row align-items-center"> <div class="col-xl-4 col-lg-4"> <div class="copyright-text text-center text-lg-right"> <p> © 2020 kinter Designed by <a href="https://themeforest.net/user/xpressbuddy" target="_blank">xpressbuddy</a></p> </div> </div> <div class="col-xl-8 col-lg-8"> <div class="copyright-social text-center text-lg-right d-none d-md-block"> <ul> <li> <a href="#"><i class="fab fa-facebook-f"></i></a> <span>Facebook</span> </li> <li> <a href="#"><i class="fab fa-google-plus-g"></i></a> <span>Google Plus</span> </li> <li> <a href="#"><i class="fab fa-twitter"></i></a> <span>Twitter</span> </li> <li> <a href="#"><i class="fab fa-pinterest-p"></i></a> <span>Pinterest</span> </li> <li> <a href="#"><i class="fab fa-linkedin-in"></i></a> <span>Linkedin</span> </li> </ul> </div> </div> </div> </div> </div> </footer> <!-- footer end --> <!-- All js here --> <script src="js/vendor/modernizr-3.5.0.min.js"></script> <script src="js/vendor/jquery-1.12.4.min.js"></script> <script src="js/popper.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/owl.carousel.min.js"></script> <script src="js/waypoints.min.js"></script> <script src="js/jquery.counterup.min.js"></script> <script src="js/isotope.pkgd.min.js"></script> <script src="js/jquery.scrollUp.min.js"></script> <script src="js/jquery.meanmenu.min.js"></script> <script src="js/imagesloaded.pkgd.min.js"></script> <script src="js/jquery.magnific-popup.min.js"></script> <script src="js/plugins.js"></script> <script src="js/main.js"></script> </body> </html>
CSS Structure
We are using several CSS files in this Template. XpressBuddy Always follow the latest trends of coding standard. Many browser interpret the default behavior of HTML elements differently. By using a general reset CSS file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.
CSS Fiile Included
- Animate css used
- Bootstrap css used
- Lightcase used
- Owl Carousel used
- isotope used
- Favicon used
- Fontawesome used
- Style.css used
- and some other necessary css files
style.css situated on kinter/css/ contain the the all necessary custom style which is well organized and following are the style.css file structure :
Project Name: Kinter - Kids Kindergarten & School HTML Template Author: spressbuddy -->> (https://themeforest.net/user/xpressbuddy) Support: wasimmia.info@gmail.com Description: Kids Kindergarten & School HTML Template. Developer: Wasim Mia Version: 1.0 /* CSS Index ----------------------------------- 1. Theme default css 2. header 3. banner 4. feature 5. about 6. classes 7. counter 8. team 9. school fecilities 10. portfolio 11. blog 12. brand 13. footer 14. page title 15. contact 16. Preloader */
/* 2. header */ .header-top{ background-color: #23cc88; } .header-top ul{ overflow: hidden; margin: 0px; } header .header-top .left { float: left; } .header-top .left li { list-style: none; display: inline-block; float: left; color: #fff; margin-right: 15px; padding: 13px 0px; border-left: 1px solid #4fd6a0; padding-left: 15px; } .header-top .left li:first-child { border: 0; padding-left: 0; } .header-top .left li span{ color: #fff; margin-right: 5px; } .header-top .right { float: right; } .header-top .right li{ list-style: none; display: inline-block; padding: 11px 14px; border-right: 1px solid #4fd6a0; } .header-top .right li:first-child { border-left: 1px solid #4fd6a0; } .header-top .right li a{ color: #fff; font-size: 18px; } .main-menu ul li { display: inline-block; margin-left: 32px; position: relative; } .main-menu ul li a { display: block; padding: 42px 0; color: #00394f; font-size: 14px; font-weight: 700; text-transform: uppercase; } .main-menu ul li:hover > a { color: #23cc88; } .header-button { margin-top: 19px; margin-left: 25px; } .main-menu ul li ul.submenu { position: absolute; top: 110%; left: 0; min-width: 220px; opacity: 0; visibility: hidden; background: #fff; padding: 15px 0; box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.05); transition: all 0.3s ease-out 0s; border-radius: 3px; z-index: 99; border-top: 3px solid #23cc88; } .main-menu ul li:hover > ul.submenu { top: 100%; opacity: 1; visibility: visible; } .main-menu ul li ul.submenu li{ margin: 0; display: block; } .main-menu ul li ul.submenu li a { font-size: 15px; padding: 9px 25px; text-transform: capitalize; } .sticky { background: #fff; left: 0; margin: auto; position: fixed; top: 0; width: 100%; box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.07); -webkit-box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.07); z-index: 9999; -webkit-animation: 300ms ease-in-out 0s normal none 1 running fadeInDown; animation: 300ms ease-in-out 0s normal none 1 running fadeInDown; } .sticky .main-menu ul li > a { padding: 35px 0; } .sticky .header-button { margin-top: 16px; } /* 3. banner */ .banner-area{ position: relative; } .slider-height{ min-height: 700px; } .banner-area .hero-bg-img { position: relative; background-size: cover; background-position: center; } .banner-overlay { position: absolute; height: 100%; width: 100%; left: 0; top: 0; background-color: rgba(0,0,0,.2); } .section-notch{ position: relative; } .section-notch::before { content: ""; position: absolute; background-image: url(../img/shape/section-notch-top.png); background-repeat: repeat-x; display: block; top: 0; width: 100%; height: 20px; z-index: 24; } .section-notch::after { content: ""; position: absolute; background-image: url(../img/shape/section-notch-bottom.png); background-repeat: repeat-x; bottom: 0; width: 100%; height: 20px; z-index: 2; } .banner-content h3 { font-family: 'Roboto', sans-serif; font-size: 36px; font-weight: 100; line-height: 48px; text-transform: uppercase; color: #fff; margin-bottom: 13px; } .banner-content h2 { font-size: 80px; line-height: 1; text-transform: capitalize; color: #fff; margin-bottom: 20px; } .banner-content p { font-size: 18px; line-height: 30px; color: #fff; margin-bottom: 25px; } .banner-btn a { margin-right: 20px; margin-top: 20px; } .single-slider.slick-slide { background-size: cover; } /* 4. feature */ .section-title { max-width: 680px; margin: 0px auto 62px; } .section-title h2 { font-size: 36px; line-height: 1; margin-bottom: 25px; } .section-title p { font-size: 16px; line-height: 26px; margin: 0; } .feature-item { padding: 35px 15px; box-shadow: 0px 0px 10px 0px rgba(136, 136, 136, 0.1); } .feature-item .feature-shape { width: 100px; height: 100px; display: inline-block; line-height: 100px; margin-bottom: 38px; border-radius: 50%; background-image: linear-gradient( 145deg, rgb(35,204,136) 0%, rgb(142,207,53) 100%); box-shadow: 0px 18px 30px 0px rgba(38, 204, 133, 0.36); } .feature-item .feature-shape-2 { background-image: linear-gradient( 145deg, rgb(255,79,88) 0%, rgb(255,180,0) 100%); box-shadow: 0px 18px 24px 0px rgba(255, 114, 58, 0.36); } .feature-item .feature-shape-3 { background-image: linear-gradient( 145deg, rgb(1,203,173) 0%, rgb(71,161,242) 100%); box-shadow: 0px 18px 24px 0px rgba(1, 203, 173, 0.36); } .feature-item .feature-shape-4 { background-image: linear-gradient( 145deg, rgb(232,90,202) 0%, rgb(252,78,101) 100%); box-shadow: 0px 18px 24px 0px rgba(233, 89, 197, 0.36); } .feature-content .feature-title h3 { position: relative; font-size: 20px; font-family: 'Roboto', sans-serif; font-weight: bold; margin-bottom: 50px; line-height: 36px; color: #00394f; } .feature-item .feature-content .feature-title h3::after { position: absolute; content: ""; left: 0; right: 0; width: 80px; height: 4px; background-image: linear-gradient( 145deg, rgb(35,204,136) 0%, rgb(142,207,53) 100%); margin: auto; bottom: -22px; box-shadow: 0px 18px 30px 0px rgba(38, 204, 133, 0.36); } .feature-item .feature-content .feature-title-2 h3::after { background-image: linear-gradient( 145deg, rgb(255,79,88) 0%, rgb(255,180,0) 100%); box-shadow: 0px 18px 24px 0px rgba(255, 114, 58, 0.36); } .feature-item .feature-content .feature-title-3 h3::after { background-image: linear-gradient( 145deg, rgb(1,203,173) 0%, rgb(71,161,242) 100%); box-shadow: 0px 18px 24px 0px rgba(1, 203, 173, 0.36); } .feature-content .feature-title-4 h3::after { background-image: linear-gradient( 145deg, rgb(232,90,202) 0%, rgb(252,78,101) 100%); box-shadow: 0px 18px 24px 0px rgba(233, 89, 197, 0.36); } .feature-content p { margin: 0; font-size: 16px; color: #555555; padding: 0px 8px; }
Js Structure
We are using several Js files in this Template. XpressBuddy Always follow the latest trends of coding standard. Many browser interpret the default behavior of HTML elements differently. By using a general reset Js file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.
Js Fiile Included
- jquery.js used
- fontawesome.js used
- jquery-ui.js used
- bootstrap.min.js used
- isotope.js used
- scrollUp.min.js used
- owl.carousel.min.js used
- counterup.min.js used
- active.js used
- and some other necessary css files
main.js situated on js/ contain the the all necessary custom style which is well organized and following are the main.js file structure :
(function ($) { "use strict"; // preloader $(window).on('load', function () { $('#preloader').delay(350).fadeOut('slow'); $('body').delay(350).css({ 'overflow': 'visible' }); }) // meanmenu jQuery('#mobile-menu').meanmenu({ meanMenuContainer: '.mobile-menu', meanScreenWidth: "991" }); // sticky var wind = $(window); var sticky = $('#sticky-header'); wind.on('scroll', function () { var scroll = wind.scrollTop(); if (scroll < 100) { sticky.removeClass('sticky'); } else { sticky.addClass('sticky'); } }); //data background $("[data-background]").each(function () { $(this).css("background-image", "url(" + $(this).attr("data-background") + ") ") }) //counterUp $('.counter').counterUp({ delay: 10, time: 1000 }); // brand-active $('.brand-active').owlCarousel({ loop:true, margin:0, items:1, dots:false, autoplay:true, autoplayTimeout:5000, autoplayHoverPause:true, responsive:{ 0:{ items:1 }, 767:{ items:3 }, 992:{ items:4 }, 1200:{ items:5 } } }) // blog-post-active $('.gallery-post-active').owlCarousel({ loop:true, margin:0, items:1, navText:['<i> class="fa fa-angle-left"></i>','<i> class="fa fa-angle-right"></i>'], nav:true, dots:false, responsive:{ 0:{ items:1 } } }) /* magnificPopup img view */ $('.popup-image').magnificPopup({ type: 'image', gallery: { enabled: true } }); /* magnificPopup video view */ $('.popup-video').magnificPopup({ type: 'iframe' }); // isotop $('.grid').imagesLoaded( function() { // init Isotope var $grid = $('.grid').isotope({ itemSelector: '.grid-item', percentPosition: true, masonry: { // use outer width of grid-sizer for columnWidth columnWidth: '.grid-item', } }); // filter items on button click $('.portfolio-menu').on( 'click', 'li', function() { var filterValue = $(this).attr('data-filter'); $grid.isotope({ filter: filterValue }); }); }); //for menu active class $('.portfolio-menu li').on('click', function(event) { $(this).siblings('.active').removeClass('active'); $(this).addClass('active'); event.preventDefault(); }); })(jQuery);
Customization
How to Change Logo
How to Change Copyright
How to Change Google Map
