Senior Care - Senior Citizens & Elders Support HTML5 Template

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 http://themeforest.net/user/xenioushk

Template Overview

Senior Care is a modern looking HTML5 template designed & developed for Senior Citizens & Elders Support Websites 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, question submission form, share boxes and much more.

Features

16+ HTML5 Templates

  1. Home Page 1 (index.html)
  2. Home Page 2 (home-2.html)
  3. Home Page 3 (home-3.html)
  4. About Us (about-us.html)
  5. service(service.html)
  6. Single Service (service-details.html)
  7. 404 (404.html)
  8. Blog (blog.html)
  9. Blog single(single.html)
  10. Campaign/Events (events.html)
  11. Single Campaign (event-single.html)
  12. contact(contact.html)
  13. Gallery 01(gallery-1.html)
  14. Gallery 01(gallery-2.html)
  15. Element COUNTER(element-counter.html)
  16. Element CTA(element-cta.html)
  17. Element Logo(element-logo.html)
  18. Element Testimonials(element-feedback.html)
  19. Element Team(element-team.html)

LESS

This template built with LESS. Inside the directory css/less, you will get 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.

doc_img

Less Complier Tool:

We have used "crunch2" less compiler to generate CSS from less file. It's FREE and very easy to use. You can download it from following link- https://getcrunch.co/

Steps To Compile Less File Using Crunch:

Please follow the steps to compile template LESS file.

Step 01:

From Crunch 2 menu open project/template files and select "styles.less" file.

doc_img

Step 02:

Next, from Crunch 2 menu click "Crunch!".

doc_img

Step 03:

Compiler will compile "styles.less" to "styles.css" file and display success message bottom of Crunch 2 editor.

doc_img

Step 04:

Open and edit "css/less/variables.less" file to change font family, primary color and other options.

doc_img

Structure

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-

doc_img

HTML File Structure

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.

doc_img

Setup Custom Background In Section:

Template comes with a custom class called "section-custom-bg", which allows you to add custom background images in any section. You do not need to add image location in css file any more.

<section class="section-feat-about-us section-custom-bg" data-bg_img="images/about_us_info_bg.jpg" data-bg_color="#264676" data-bg_opacity="0.3">

// Your html code goes in here.

</section>

Data Tags:

Setup Parallax Effect In Section:

Now, you can easily add parallax effect in any of the section of template. You just need to add following lines of in section.

<section class="section-banner" data-stellar-background-ratio="0.3" data-bg_img="images/home_1_slider_1.jpg" data-bg_color="#000000" data-bg_opacity="0.6" >
    
// Your html code goes in here.

</section>

Data Tags:

Setup Custom Number In Carousel:

You can set custom item numbers in carousel layouts. Template comes with "testimonials", "service", "highlights", "gallery" in carousel mode. 


<div class="highlight-carousel owl-carousel"  data-nav="false" data-dots="true" data-items="1">
    // Your html code goes in here.
</div>

Data Tags:

CSS File Structure

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).

doc_img

Custom CSS Classes:

Button Classes:
Section Classes:
Block Classes:
Padding Classes:

JS File Structure

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- 

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/jquery.backTop.min.js "></script>
<script src="js/waypoints.min.js"></script>
<script src="js/waypoints-sticky.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.stellar.min.js"></script>
<script src="js/jquery.counterup.min.js"></script>
<script src="js/venobox.min.js"></script>
<script src="js/custom-scripts.js"></script>

doc_img

Logo Change

Hedaer Logo Screenshot

doc_img

Template Font

We have used Google font Roboto for heading font and Lato & Playfair Display for body font. Font used in the top of the file less/variables.less 

@import url('https://fonts.googleapis.com/css?family=Lato:400,400i,500i,700,900|Roboto:400,500,500i,700,900|Playfair+Display:700,700i');

doc_img

Animation

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 
fadeIn
fadeInLeft
fadeInRight
fadeInUp
fadeInDown
fadeInLeftBig
fadeInRightBig
fadeInUpBig
fadeInDownBig

doc_img

Background

We used several background images in our template. You'll find the code in the file css/less/layout.less. These 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

doc_img

In the index.html

doc_img

Google Map

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.

doc_img

Contact Form

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.

doc_img

Change Log

2023, 30 September - v 1.0.5
- Fixed: Template minor bugs.

2018, July, 17 - v 1.0.4
- Updated Stylesheet Code(styles.js).
- Updated JavaScript Code(custom.js).
- Update documentation.

2017, December, 17 - v 1.0.3
- Updated Stylesheet Code(styles.js).
- Updated JavaScript Code(custom.js).
- Update documentation.

2017, August, 07 - v 1.0.2
- Added 2 new home pages.
- Updated documentation.

2017, July, 25 - v 1.0.1
- Updated venobox.js file.
- Updated font-awesome.
- Updated functional contact form.
- Added Element Templates.
- Updated documentation.

2016, October, 15 - v 1.0.0
- Initial release

Sources and Credits

- jQuery
- Bootstrap
- BWL Searchable Accordion jQuery Plugin
- Google Fonts
- Owl Carousel
- Font Awesome
- Google Maps API
- Freepik.com
- Pexels.com