Aqua Shatar - Professional Swim Academy HTML5 Template

• Template Version: 1.0.0
• Template Last Update: 16/07/2018
• Template Create Date: 16/07/2018
• Web Site: http://bluewindlab.net
• Email Us: hkhan.cse@gmail.com
• Developed By: bluewindlab
• Skype: bluewindlab

If you like this template please spare a minute to rate it.
If you want any support, Please feel free to contact me via my profile page https://themeforest.net/user/xenioushk.

Template Overview

Aqua Shatar is a modern looking HTML5 template designed & developed for Swim Training Academy in mind. It works smoothly on your Computer, or on your tablet and mobile devices. It’s comes with eye catching features, such as animates boxes, contact form section, testimonial box, counter block and much more.

Features

• Bootstrap 3 Framework.
• Unique Home Page Layout.
• Modern and Very Clean looking Design
• Unique & Creative design
• HTML5 & CSS3
• Responsive Template
• Font-awesome icon font.
• Free Fonts used
• Contact Form
• 404 Page
• Coming Soon Page
• Multi-Pages
• Latest jQuery Version
• Developer Friendly Code
• Well Documented.
• & much more…

20+ HTML5 Templates

1. Home Page 1 (index.html)
   
2. Home Page 2 (home-2.html)
   
3. About Us (about-us.html)
   
4. Service (service.html)
   
5. Single Service (service-details.html)
   
6. Team Page (team.html)
   
7. Single Team Page (single-team.html)
   
8. Blog (blog.html)
   
9. Blog single(single.html)
   
10. FAQ (faq.html)
    
11. Appointment (appointment.html)
    
12. Coming Soon (coming-soon.html)
    
13. 404 (404.html)
    
14. Contact(contact.html)
    
15. Gallery 01(gallery-1.html)
    
16. Gallery 01(gallery-2.html)
    
17. Element Highlights (element-highlights.html)
    
18. Element Counter (element-counters.html)
    
19. Element CTA (element-cta.html)
    
20. Element Sponsors (element-sponsors.html)
    
21. Element Testimonials (element-testimonial.html)
    
22. Element Newsletter (element-newsletter.html)
    

This template built with LESS. Inside the directory css/less you will find all less files where variables.less declares all colors and variables and layout.less mainly contain all necessary declaration for css. style.less should be compiled to css/style.css. Other two less files mixins.less and reset.less are for common CSS behaviour.

All the directories and files are well organized as it shown on the image bellow. Same file tree has been applicable for all HTML files

This template is a mobile friendly (responsive) layout which is designed based on Twitter Bootstrap v3.*. See our HTML file structure which is in index.html. Your contents go inside container.

We are using 7 CSS files in this template and we separated styles for improving convenience to edit this template. If you're going to use this template in production we recommend you to merge all stylesheets into one file (for decreasing HTTP queries).

There are 11 jQuery files including necessary plugins, all of them be found in jsfolder of home directory. custom-scripts.js This file must go all the way down to other files and plugins for app landing page. This file contains custom codes

Top Navigation Bar Screenshot

Enable Sticky Header:
To enable sticky header we just need to add sticky-header class after "main-header" class in "header" tag. Example-

Footer Navigation Bar Screenshot

Hedaer Logo Screenshot

We have used google font Lora. Font used in the top of the file less/variables.less

We used WOW plugin to trigger animations on scroll. Here are some animation classes we used in this Template. To learn more about WOW please read their Documentation

                        1. fadeIn
                        2. fadeInLeft
                        3. fadeInRight
                        4. fadeInUp
                        5. fadeInDown
                        6. fadeInLeftBig
                        7. fadeInRightBig
                        8. fadeInUpBig
                        9. fadeInDownBig
                                    

We used several background images in our template. You'll find the code in the file css/less/layout.less. Thess code will be available after the compilation of the layout.less and written in the css/layout.css in the. Examples are given in the screenshot

In the layout.less

In the index.html

For contact page Google Map, open the file js/custom-scripts.js and look for the line 442/443 and change the lat, lng value according to your map location

Template comes with Ajax powered functional contact form feature. You just need to set your email address in 'contact_email.php' file and user will be able to send email to your address.

- jQuery
- Bootstrap
- Google Fonts
- Owl Carousel
- Font Awesome
- Google Maps API
- Freepik.com
- Pexels.com