1. Start
  2. Folder Structure
  3. HTML Structure
  4. CSS Files and Structure
  5. JavaScript
  6. elements
  7. Images information
  8. Sources and Credits

Happy Seniors

Senior Care HTML Template


Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email us via our user page contact form here. Thank you very much!

Happy Seniors is Html5 + CSS3 Senior Care template and works fine in all major browsers and IE from version 9. It's powered by jQuery and you'll find nice and discreet interactivity. The code is clearly written and you will find comments for each section parts.

Lets take a closer look at the structure of Html, Css, JavaScript...

Folder Structure


When you unpack downloaded archive from ThemeForest.net you'll get folder containing 3 folders.

Here they are, sorted alphabetically:

  1. happy-seniors - Main folder for template
  2. Documentation - Documentation for Convertible site template

HTML Structure


This template contains 26 html pages. These pages are


Body part of the Html file contains a main div tag container, and this is divided in four main sections and each of these sections is further divided into smaller parts:

  1. CONTAINER

    Main building blocks of Container looks like in the photo



  2. Header

    Header with logo in the left

  3. Slider
  4. CONTENT
    • Different section
    • In content we have included different sections, such as slider, content-sections



  5. Footer

    Different widgets, and copyright line





Grid:

Based on Bootstrap, a sleek, intuitive, and powerful front-end framework.

Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.

The default Bootstrap grid system utilizes 12 columns, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns stack Happy Seniorsly.

For a simple two column layout, create a .row and add the appropriate number of .col-md-* columns. As this is a 12-column grid, each .col-md-* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).




Given this example, we have two div tags with class .col-md-6, making for 12 total columns and a complete row.

Move columns to the right using .col-md-offset-* classes. Each class increases the left margin of a column by a whole column. For example, .col-md-offset-4 moves .col-md-4 over four columns.

CSS Files and Structure


In folder "css" you will find 10 CSS files

  1. bootstrap.css
  2. flexslider.css
  3. animate.css
  4. jquery.bxslider.css
  5. magnific-popup.css
  6. font-awesome.css
  7. settings.css
  8. owl.carousel.css
  9. owl.theme.css
  10. style.css

Description:

  1. In style.css which is main style sheet for "Happy Seniors" site template. This file contains all of the specific stylings for the page.

    To edit a specific part of the page, simply scroll down, every section is well commented and you can find easy the appropriate style that needs to be edited. In example:




  2. bootstrap.css - grid structure based on Bootstrap Framework.

  3. Styles for bxslider. i have used this slider in testimonials section

  4. Styles for Flex Slider to work properly. Flex Slider is used on blog-post. you can find for flexslider more here.

  5. Also we have a unique file animate.css for animation during scroll

  6. Also we have a unique file settings.css for revolution slider

  7. two owl files are for carosells we used in the page. If you need to know more about this carousell you can find here

  8. Also we have a file for magnific popup called magnific-popup.css . If you want to know more about this popup you can read more here

  9. Also we have a file for font awesome font-awesome.css . If you want to know more about the awesome fonts you can read more here



Less files

we have included also two files in folder less

  1. variables.less
  2. style.less


if you want to use less files first you should install less (see here how to install), or you have the second option to use less.js script

If you use less.js first you have to work in localhost or in your server and after that you should replace style.css with style.less




In variables.less file you have all commands well commented where you can place your color scheme, font-family etc




JavaScript


In folder js you will find 23 javascript files, but all adjustments are in just one file: "script.js".

All JavaScript files:

Description:

elements


I have used many elements, i will show the some of these elements, it's very easy to implement in which part of your template you want. every section is well comented, just grab that section and plase where ever you want in your page

Description

Images information


Sport stuff
# Link License
https://images.pexels.com/photos/339620/pexels-photo-339620.jpeg?w=940&h=650&auto=compress&cs=tinysrgb CC0 License
https://cdn.pixabay.com/photo/2017/08/20/16/33/bank-2662347_960_720.jpg CC0 Creative Commons
https://images.pexels.com/photos/339619/pexels-photo-339619.jpeg?w=940&h=650&auto=compress&cs=tinysrgb CC0 License
https://www.flickr.com/photos/myfuturedotcom/6052491503 Derivs 2.0 Generic (CC BY-ND 2.
https://cdn.pixabay.com/photo/2016/06/16/14/49/elderly-1461424_960_720.jpg CC0 Creative Commons
https://www.flickr.com/photos/68716695@N06/29609193412 Public Domain Mark 1.0
https://www.flickr.com/photos/68716695@N06/29609199652/in/album-72157672797436312/ Public Domain Mark 1.0
https://www.flickr.com/photos/68716695@N06/29609195382/in/album-72157672797436312/ Public Domain Mark 1.0
https://www.flickr.com/photos/68716695@N06/29095583293/in/album-72157672797436312/ Public Domain Mark 1.0
https://www.flickr.com/photos/68716695@N06/29720269125/in/album-72157672797436312/ Public Domain Mark 1.0
https://www.flickr.com/photos/68716695@N06/29720264655/in/album-72157672797436312/ Public Domain Mark 1.0
https://www.flickr.com/photos/68716695@N06/29095571713/in/album-72157672797436312/ Public Domain Mark 1.0
https://www.flickr.com/photos/68716695@N06/29609189672/in/album-72157672797436312/ Public Domain Mark 1.0
http://www.publicdomainpictures.net/pictures/210000/velka/nurse-1490637016UL5.jpg CC0 Public Domain
http://www.publicdomainpictures.net/pictures/210000/velka/nurse-1490637024QFY.jpg CC0 Public Domain
http://www.publicdomainpictures.net/pictures/210000/velka/nurse-1490637057I5D.jpg CC0 Public Domain
http://www.publicdomainpictures.net/pictures/210000/velka/nurse-14906370995JP.jpg CC0 Public Domain
http://www.publicdomainpictures.net/pictures/210000/velka/nurse-1490637080Ikl.jpg CC0 Public Domain
http://www.publicdomainpictures.net/pictures/210000/velka/nurse-1490637073qUu.jpg CC0 Public Domain
http://www.publicdomainpictures.net/pictures/210000/velka/doctor-1490804634m40.jpg CC0 Public Domain
http://www.publicdomainpictures.net/pictures/210000/velka/doctor-1490804651WwZ.jpg CC0 Public Domain
http://www.publicdomainpictures.net/pictures/210000/velka/doctor-1490804659thN.jpg CC0 Public Domain
http://www.publicdomainpictures.net/pictures/210000/velka/doctor-1490804711KcE.jpg CC0 Public Domain
http://www.publicdomainpictures.net/pictures/210000/velka/doctor-1490804718D0I.jpg CC0 Public Domain
http://www.publicdomainpictures.net/pictures/60000/velka/woman-13786411050IE.jpg CC0 Public Domain
http://maxpixel.freegreatpicture.com/static/photo/1x/Nursing-Nurse-Health-1476765.jpg CC0 Public Domain
https://cdn.pixabay.com/photo/2016/08/26/05/19/dr-1621296_960_720.jpg CC0 Creative Commons
http://res.freestockphotos.biz/pictures/17/17068-a-woman-and-older-man-sitting-at-a-table-pv.jpg Public Domain
https://unsplash.com/search/photos/old-woman?photo=y0I85D5QKvs Unsplash License
https://unsplash.com/search/photos/newspaper?photo=UCoaJKrM808 Unsplash License
https://unsplash.com/search/photos/interior?photo=Qe_dS4-jO6E Unsplash License
https://unsplash.com/search/photos/interior?photo=-NNyXVQH9Ho Unsplash License
https://unsplash.com/search/photos/interior?photo=y_jDYDXopI0 Unsplash License
https://unsplash.com/search/photos/chopped?photo=osQ_M52Mttk Unsplash License
https://unsplash.com/search/photos/chopped?photo=xTVs-A-n_Dg Unsplash License
https://unsplash.com/search/photos/old-man?photo=das6NrjLoM0 Unsplash License
https://unsplash.com/search/photos/elderly?photo=UJm8kDbE57Y Unsplash License
https://unsplash.com/collections/889528/elders?photo=66QEF_ZmzKY Unsplash License
https://unsplash.com/search/photos/interior-kitchen?photo=ZMIrSYeDEsc Unsplash License
https://unsplash.com/photos/7za57BRJpJ8 Unsplash License
https://unsplash.com/photos/pwMds57bapI Unsplash License
https://unsplash.com/@zanecrtr?photo=tpPMsHIKaxs Unsplash License
https://unsplash.com/@breather?photo=lHTQjAZuprQ Unsplash License
https://unsplash.com/photos/rKikGpkSi_g Unsplash License
https://www.pexels.com/photo/friends-enjoying-in-corridor-248149/ CC0 Creative Commons
https://cdn.pixabay.com/photo/2014/08/07/15/20/newspaper-412452_960_720.jpg CC0 Creative Commons
https://unsplash.com/photos/tUyYnO_VdP0 Unsplash License
https://www.pexels.com/photo/man-hands-waiting-senior-33786/ CC0 License

 

 

 

Sources and Credits


I've used the following images, icons or other files as listed.


note: demo skins are not included here, if you want our demo skins contact us and we will send you via skype or gmail.

Once again, thank you for purchasing this Template. As mentioned at the beginning of this documentation, we would be glad to help you if you have any questions related to this Template. Here is to be honest a simple documentation because we think there is no problem to implement your elements in this template because the code is clean and well commented. For more general question related to this Template on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

If you are satisfied with "Happy Seniors - site template" please go to your downloads section on ThemeForest.net and rate Happy Seniors with 5 stars. Otherwise, send an Email and I will try to find nice and easy solution for you :)

Hope that you will enjoy Happy Seniors as much as I've enjoyed designing this template.

Kind Regards,
newskythemes Team