Thank you for purchasing  this Template. Within this manual we will show you how to install, edit and update the template.

We did our best to simplify this instruction and make it clear and easy to use.

After you extract the zip file you get a folder with all files used in this template.

You can see an edit these files to customize them.

When all files are ready you have to upload the files on your server root.

Use your favourite FTP client or the CMS if you using one in your server.

After template extracting you'll see the following files & folders structure:

• site
  • css: style and font files
  • js: javascript files
  • imgs:  images files
  • index.html: the index page 
  • post.php: php script for the contact and subscribe forms action
• documentacion
  • readme.html:  the file you are reading

You can edit .html .css .js .php files with any text editor  or with an specific editor for this kind of file like Virtual Studio Code

The lorem ipsum text you'll see in  index.html file is a placeholder for the text you have to add for your site.

The images elements use the attribute alt for seo and accesibility, update this value as you need:

There is just  one page, index.html. In this page you'll find coments <!-- name area --> to help you to find any area you want to modify.

The page layout is based on a grid with 3 columns and 1 row for wide screens. Por narrow screens the grid is 1 column and 3 rows.

The first column in wid screen (second row in narrow one) contains the logo and the navigatin items. Every link show a block: about, info, subscription, addres data and contact form.

The menu is responsive and contains an icon and a text in wide screens, the text is hidden in narrow screens.

The central column in wide screen (third row in narrow one) is the place where blocks of indo are shown. They appears with a animated effect. This animation is build with CSS rules.

The last column or firs row in narrow screens contains the counter block. Here the bloc with id= 'count' must be set with the target date:

<div id="count" data-date-end="01/18/22">

This date has to be in the future.

There is a background animated using with CSS rules. The image presents a litle zooming and translate movement.

The pack contains three images for background. The image are obtained from https://pxhere.com/, public domain.

If you change the sizes of the images try to keep the aspet ratio in order to maintain the aspect of the template.

The images are used for baclground are set in a div named overlay. The opacity of this layer is used to dark the baclground and improve the text contrast.

Icons are free awesome 5.15

This template use only one css file. It's is documented, so it's easy if you need custom the aspect of the page.

The @keyframes rules describe every animation effect. 

This template use just one javascript file: main.js

The code is documented.

This template use the an only php file post.php. It is the program that manages the data sent from contact and subscribe forms.

It's is a very simple code. It read the data form contact form and sent them to your email.  

You have to set your own email.  Look for the line containing 

Images

• https://pxhere.com/es/photo/22957
• https://pxhere.com/es/photo/780811
• https://pxhere.com/es/photo/1288184

Javascript: https://javascript.espaciolatino.com

Fonts

• Fontawesome 5
• Google