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 code editor for you to do this.
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 Main Package contains only one file (.zip). Just extract it in a folder of your choice to see the contents.
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: https://fonts.google.com
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.
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.
assets/videos
This folder is for you to keep the videos you are going to use in the template.
Image and video files are copyrighted and therefore cannot be made available with the package. Therefore, you can find them on our demo page or in the sources cited on the item page. 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 https://compressjpeg.com.
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: https://simplelineicons.github.io.
php/form.php
This file is responsible for making the template send emails. The only thing you need to do is type in your email where it says “Enter the recipient’s email address here”. And translate the texts just below that, if you wish.
This feature of sending emails pre-configured in the template is courtesy of our team. We do not support other types of applications that send email, such as PHPMailer, etc. But if you have any questions, let us know.
php/recapctha.php
This file connects with the Google API reCAPCTHA, you just have to enter your secret key where it says “Put your secret key here”, see in the next section how to configure reCAPCTHA.
reCAPTCHA helps to detect abusive traffic on your site without any user friction. It returns a score based on interactions with your site and provides more flexibility to take the appropriate actions.
Very first thing you need to do is register your website on Google reCAPTCHA. It is very simple and fast and you will do it in 2 minutes. To do this click here.
You will have to log in to a Google account, do that.
After logging in with your account and seeing the reCAPCTHA panel, just fill out the form:
Accept the terms of service and click the SEND button. Once submitted, Google will provide you with the following two information:
Site key / Secret key
Copy the Secret Key and Paste it in the file /php/recaptcha.php where it says “Put your secret key here”.
Copy the Site Key and Paste it into the HTML (and also in /assets/js/main.js) file where it says “Put your site key here”.
Done! When accessing your website, you can check if everything went well by typing F12 and inspecting the source code. Learn how to inspect the source code.
This HTML Template uses CSS Variables. We recommend that you access this article for more information.
Colors, Typography and Primary Buttons have a pattern defined in the file assets/css/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 “demo-1.html” file loads an additional CSS called “theme-orange.css”. This file changes the standard colors to the color “Orange”, and the same goes for the other colors. You can do this to customize everything your way.
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 “demo-1.html” file.
We wrote this documentation with great care to help developers like us to find the best way to build their website. We would love to hear your suggestions or complaints about our template.
If you are a connoisseur of our templates and want to contribute with this documentation, let us know.
Our email is adm.codings@gmail.com.
Thanks 🙂