Get Started
Thank you for choosing the Brilio - Personal Portfolio 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. If you have questions and need help, send us a message using the contact form here.
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 code editor 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.
Package
Download Template files from ThemeForest by going to the downloads tab and finding the Brilio.
Check the files contained in the package:
Assets
assets/css
In this folder these 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 “style.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 these 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 these are the source files, these are only responsible for formatting the icons.
assets/img
In this folder these 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
Icons
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
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.
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:
- Label: Use a bookmark to make it easier to identify the site in the future.
- reCAPCTHA type: Select the v3 option (v2 will not work).
- Domains: Enter your website address (Example: yoursite.com)
- Owners: Keep your email address.
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.
Design & Color
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/style.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 “index.html” file loads an additional CSS. This file changes the standard colors to the another, 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 “btn-bordered-white” class. To obtain a filled button with filled outlines, just use the “btn-bordered-white active” class, just as it is done in the “index.html” file.
Considerations
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.
If you are a connoisseur of our templates and want to contribute with this documentation, let us know.
Our email is hridoy1272@gmail.com
If you can help us with a rating, just go to your downloads page and choose Brilio.
© 2024 Brilio is proudly powered by Themeland.