Documentation

Masco - Multipurpose HTML Template

Thank you so much for purchasing our item from Theme Forest.

  • Created: 5 June 2023

Installation

Follow the steps below to setup your site template:

  1. Unzip the downloaded package and open the /HTML folder to find all the template files. You will need to upload these files to your hosting web server using FTP or localhost in order to use it on your website.
  2. Below is the folder structure and needs to be uploaded to your website or localhost root directory:
    • HTML/css - Stylesheet files
    • HTML/images - Images files
    • HTML/js - Javacript files
    • HTML/scss - Sass files
    • HTML/plugins – All external libs.
    • HTML/index.html - Homepage
  3. You should upload all or specific HTML files as per your need.
  4. You are good to go for adding your content now!

HTML Structure

masco follows a simple and easy to customize coding structure. Here is the sample for your reference: 

<!DOCTYPE html>
<html lang="en">
<head>

<!-- Your Title, Description, Stylesheets
============================================= -->

</head>

<body>

<!-- Document Wrapper   
=============================== -->
<div class="page-wrapper overflow-hidden"> 
  
  <!-- Header
  ============================ -->
  <header class="site-header">
    <div class="container"> ...... </div>
  </header>
  <!-- Header End --> 
  
    <!-- Your Page Content goes here  -->
 
  <!-- Footer -->
  <footer  class="footer-section">
    <div class="container"> ...... </div>
  </footer>
  <!-- Footer end --> 
  
</div>
<!-- Document Wrapper end --> 

<!-- JavaScript -->
</body>
</html>

Sass

We have added SASS .scss files in template. If you know how to use SASS you can change sass files and compile the css as well. You can find sass file here - HTML/scss

Open the sass/abstract and Edit any file according to your needs. If you need more Advanced Setup then you can Edit the Respective Files yourself which have been branched inside the same Folder. It is completely at your discretion only to include the Required .scss Files you need to minimize the amount of CSS & including only the Styles of the Blocks you need. This can be setup in your main.scss File.

Color Customization

You can change your Website's Colors by modifying following variable inside HTML/scss/abstract/_colors.scss

Available Variables: 

$primary-hex: #3147FF;
$l2-primary-hex: #A259FF;
$l2-secondary-hex: #0A102F;
$l3-primary-hex: #FFC900;
$l4-primary-hex: #4B2AAD;
$l5-primary-hex: #FF9966;
$l5-secondary-hex: #1B1C1D;
$l6-primary-hex: #3147FF;
$l7-primary-hex: #191919;
$l7-secondary-hex: #A259FF;
$l8-primary-hex: #C1FF00;
$l9-primary-hex: #324438;
$l9-secondary-hex: #F4B905;
$l10-primary-hex: #2D2B92;
$l10-secondary-hex: #FFD874;
$black: #0A102F;
$white: #FFFFFF;
$offwhite-hex: #FAF9F5;

Logo Settings

The Logo can be found in the Header Section and Footer Section

Header logo:

<!-- Logo --> 
  <a class="navbar-brand" href="#">
    <img class="w-100" src="./image/png/logo-light.png" alt="logo" />
  </a>
<!-- Logo End -->

Footer logo:

<!-- Footer Logo --> 
  <a class="footer-brand" href="/">
    <img src="./image/png/logo-light.png" alt="footer"/>
  </a>
<!-- Footer Logo End -->

Theme Customization

We have include a Custom CSS File in the css Folder so that you can better handle your Customizations for New Styles or Overwriting Default Theme Styles. Simply add all your Custom CSS Codes in the css/custom.css File and link it in the Document <head> after the css/main.css Linking. Also make sure that this is the Last Linked CSS File in the Document <head> so that your Custom CSS Styles are Overwritten properly.

<head>

<!-- Bootstrap , fonts & icons  -->
<link rel="stylesheet" href="./css/bootstrap.css">
<link rel="stylesheet" href="./fonts/fontawesome-5/css/all.css">

<!-- Plugin'stylesheets  -->
<link rel="stylesheet" type="text/css"href="./plugins/aos/aos.min.css">
<link rel="stylesheet" type="text/css" href="./plugins/fancybox-4/fancybox.min.css">
<link rel="stylesheet" type="text/css" href="./plugins/nice-select/nice-select.min.css">
<link rel="stylesheet" type="text/css" href="./plugins/slick/slick.min.css">
<link rel="stylesheet" type="text/css" href="./plugins/slick/slick-theme.css" />
<link rel="stylesheet" type="text/css" href="./fonts/masco-icon-font/style.css" />

<!-- Vendor stylesheets  -->
<link rel="stylesheet" type="text/css" href="./css/main.css">

<!-- Here goes your custom.css
============================================= -->
<link rel="stylesheet" type="text/css" href="./css/custom.css" />
</head>

FAQ

A FAQ is a list of frequently asked questions (FAQs) and answers on a particular topic.

Yes. You can customize our items to fit the needs of your end product
Royalty free means you just need to pay for rights to use the item once per end product. You don't need to pay additional or ongoing fees for each person who sees or uses it.

Please note that there may be some limits placed on uses under the different license types available on the marketplaces.
The item is what you purchase from Envato Market. The end product is what you build with that item.
- You can buy a web template, add your text and images, and use it as your website.
- You can buy an HTML site template, convert it to WordPress, and use it as your website (but not as a stock template for sale).
Contact Theme Forest through Support (https://help.market.envato.com/).

Source & Credits

Images:

  • Freepik
  • Unsplash
  • Pexels

Fonts:

  • Icons Font Face
  • Custom Icon Font
  • Typography Font

Scripts:

  • jQuery
  • Bootstrap 5
  • Nice select Js
  • jQuery Fancybox
  • Slick
  • Aos

Support

We provide Basic Support for:
  • Responding to questions or problems regarding the theme item and it's features.
  • Fixing bugs and reported issues.
  • Providing updates to ensure compatibility with new software.
Our Basic support doesn't but Premium Support includes:
  • Customization and installation services.
  • Support for third party software and plug-ins.
Contact Us

Changelog

See what's new added, changed, fixed, improved or updated in the latest versions.

Version 1.0

Initial Release