Zoyot - Sports and Fitness HTML Template

  • Version: 1.0.0
  • Last Updated: December 27 22
  • 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
Email: helpdeskthemesflat@gmail.com
Skype id: helpdeskthemesflat
Create ticket id : https://themesflat.ticksy.com/ticket

Template features:

  • HTML5 & CSS3
  • Responsive Template
  • XD files included
  • Animate everything you want
  • Free icons used
  • Pixel Perfect
  • Clean & Unique Design
  • Easy to customize
  • Retina Ready
  • Unlimited Colors
  • Home Page
  • Services Page
  • Service Detail
  • Price List
  • Parallax Effect
  • & much more...

HTML Structure

Zoyot - Sports and Fitness HTML Template

Below is Zoyot basic structure:

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>Zoyot - Sports and Fitness HTML Template</title>

    <!-- Mobile Specific Metas -->

    <!-- Bootstrap  -->

    <!-- Theme Style -->

    <!-- Responsive -->

    <!-- colors -->    
   
    <!-- Animation Style -->    

    <!-- Favicon and touch icons  -->
</head>

<body>
	<!-- Header -->	

	<!-- Slider -->

    <!-- Section -->
    <section class="flat-row"> </section>

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

   	<!-- Bottom -->
   	<div class="bottom"> </bottom>

   	<!-- Go Top -->
    <a class="go-top">
     	<i class="fa fa-angle-up"></a>
    </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.easing.js"></script>
   <script type="text/javascript" src="assets/js/jquery-waypoints.js"></script>
   <script type="text/javascript" src="assets/js/owl.carousel.js"></script>
   <script type="text/javascript" src="assets/js/parallax.js"></script>
   <script type="text/javascript" src="assets/js/jquery.cookie.js"></script>   
   <script type="text/javascript" src="assets/js/switcher.js"></script>      
   <script type="text/javascript" src="assets/js/main.js"></script>
</body>

</html>

CSS System

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

Your_template/app/scss/style.scss ( Template style )


/* 

    Reset
    Header
    Page tile
    Main content
    Partner
    Footer
    Blog list page
    Blog standard page
    Blog single
    Page title home
    Home 1
    Home 2
    Home 3
    About us
    Service 1
    Service 2
    Service detail page
    Portfolio 1 page
    Portfolio 2 page
    Portfolio detail page
    Team page
    Faq page
    Contact us page

*/

Your_template/app/scss/shortcodes.scss ( Shortcodes - Elements style )

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


/* 

    Button
    Preloading
    Gotop button
    Widget gallery
    Widget title block
    Widget blog wrap item
    Widget comment wrap
    Right sidebar
    Widget service 1
    Widget service post
    Widget service 2
    Widget about us
    Widget brandor service
    Widget fitness sports
    Widget blog slide
    Widget wrap team
    Widget portfolio wrap 1
    Widget portfolio wrap 2
    Widget portfolio wrap 3
    Widget counter
    Widget video 2
    Widget pricing table
    Widget testimonials
    Widget adv video
    Widget filter isotope
    Widget accordion
    Widget gg map
    Widget tfimage box

*/

Javascript - Fonts - Animation - Bootstrap style


/**
  *	animate.css
  *	bootstrap.css
  * Font Awesome
  *	jquery.fancybox.css
  *	responsive.css
  *	style.css
  * magnific-popup.css
  * icomoon.css
  * swiper-bundle.min.css
*/

Javascript Custom

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

Main.js ( js/main.js )


/*

  headerFixed
  showsearch
  btnmenu
  dropdown
  swiper1
  swiper2
  swiper3
  swiper4
  swiper5
  gallery
  accordion
  goTop
  counter
  filter
  preload

*/

Shortcodes System

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

    
/**
  * isMobile
  * Parallax
  * flatContentBox
  * flatCounter
  * flatIsotopeCase
  * flatAccordion
  * swClick
  * buttonHeart
  * goTop
  * WOW
  * toggleMenu
  * topSearch
  * flatProgressBar
  * popUpLightBox
  * Preloader
  * no_link
  * flcustominput
  * popupGallery
  * donatProgress
  * tabs
  * tfcountDown
  * activeMenuAndSmoothScroll
  * btnQuantity
  * dropdown 
*/

Credits