Get Started

Thank you for choosing the Leverage HTML Template. The purpose of this documentation is to help you make the most of what this product offers. If you have not yet purchased your license or need more licenses, click on the "Buy Now" button above.

First Steps

This is an HTML Template, so it is important that you have some basic knowledge to change the source code. Do not use the notepad to edit the template files. There are many more appropriate publishers for you to do this.

Below we have separated some useful links for you:

  • W3Schools
    W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding.

  • MDN Web Docs
    This source has many useful tutorials for those just starting out. With a little reading you can easily work with coding.

  • Visual Studio Code
    Free Code Editor and developed in open source. Integrated git, debugging and extensions.


The Master Package contains only one file (.zip). Just extract it in a folder of your choice to see the contents. If you purchased the Full Version, in the "Template File" folder will have several HTML files. In "Landing Page" and "Form Wizard" versions only 1 HTML file. The name of each HTML file represents what segment it is for, but you can customize it your way.

Example: The "_business-1.html" file was created for a business company, but you can use it for a Creative Agency or even for a Personal Portfolio. Understand the elements of the template and you will see that it is possible to create many things.


  • assets/css:

    In this folder are all files that give style to HTML pages. Note that everything is organized and separated by function. The third party files are in the "vendor" folder and the support files in the "support" folder, while the main files are loose at the root of the css folder.

    If you need to change the font families, just change the default invocation in the "main.css" file. Search for "@import". Google provides many free fonts and installation is very easy, see more at this link:

    If you need to create your own styles, we recommend that you create a new file called "custom.css" and relate it to your HTML file.

  • assets/js:

    In this folder are the JavaScript files. They are responsible for all the interaction of the HTML pages. Here it is also organized by function but you can change some things in the "main.js" file if you need to.

  • assets/fonts:

    In this folder are the source files, these are only responsible for formatting the icons. Looking for how to choose your own icons, see the Changing Icons section.

  • assets/images:
  • In this folder are all the images of the template, but they are not the same as the ones you saw in the demo. We leave the size of each image in the art so you can easily include your own images.

    Tip: Search for "Unsplash" or "Pexels" on Google. They have many professional-grade images for free. But never include a very heavy image, try to make them smaller using an editing program or try

  • assets/php:
  • In this folder you find 2 files. "form.php" and "subscribe.php". As the name says, they are responsible for the sections that contain a form. They do the job of asking your server to send you emails. Open these files with your code editor and enter the email you want to be the recipient. We left a lot of comments there to help you, and of course, you can make your own implementations if you need to.

Design & Color

This HTML Template uses CSS Variables. We recommend that you access this link for more information.


Colors, Typography and Primary Buttons have a pattern defined in the file "default.css". You can change the colors directly in this file. However, some Demo Pages included have a personalized style. You can identify this by looking at the "Theme Settings" area between the head tags in the HTML files.

Also note that some Demo Pages have additional CSS files.

Example: The "_creative-agency-1.html" file loads an additional CSS called "theme-pink.css". This file changes the standard colors to the color "Pink", and the same goes for the other colors. You can do this to customize everything your way.

Background Color

In the HTML files, you will find something like "--section-1-bg-color" between the head tags in the "Theme Settings" area. This helps a lot in personalizing your page, as the name of this variable already says, it is responsible for the background color of each section of the page.


All buttons in the template are styled by the "primary-button" class. To obtain a dark button with colored outlines, just use the "dark-button" class, just as it is done in the "_creative-agency-1.html" file.


This template uses icon fonts. In particular we use a library of font icons that we think contain all the essential icons with an incredibly simple and beautiful design. You can find more details here:


We are working hard to create something that will help developers and web technology enthusiasts. We are very grateful that you entrust your creative work to our product. So, if you need help with something or find a problem, we will be ready to resolve and help you as soon as possible. You can count on us and let's go ahead.

© 2020 Leverage is Proudly Powered by Codings.