License
When purchasing a template from ThemeForest, you have two licensing options: Regular License and Extended License. If your end product, including the item, will be free to the end user, then a Regular License is what you need. An Extended License is required if the end user must pay to use the end product.
The billing, licensing terms, and process are handled by Envato, and we have no control over these aspects. Click here to learn more about what each license is for and which one to purchase.
Note
One license is valid for one domain only. If you want to use the template on another domain, then you have to purchase another license.
License FAQ
If I need to use the template on a second site, do I need a second license?
Yes. One template purchase allows you to use it on one finished site. If you need to use it on a second site, you must purchase a second license.
Can I use the template on a test site and then move it to a live site when finished?
Yes, you can. You can keep the template on a test site to build it, then move it to the live site once you’re finished.
Can I keep a test and live sites with one Regular License purchase?
You can keep one test/staging website and one live website with one Regular License. Keep in mind that you must use the same domain.
- Local Installation (for testing)
- Install XAMPP or WAMP on your computer.
- Copy all files from the
html folder.
- Paste them into the
htdocs (XAMPP) or www (WAMP) directory.
- Open your browser and visit:
http://localhost/your-folder-name/
- Live Server Installation
- Log in to your hosting control panel (cPanel).
- Open File Manager and navigate to
public_html.
- Upload all files from the
html folder.
- Open your domain in the browser to verify installation.
Important: Contact form will not work on file:// protocol. A server is required.
Each HTML file follows a clean and well-organized structure:
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<!-- Stylesheets & Title -->
...
</head>
<body>
<!-- Header -->
<header id="header">
...
</header>
<!-- Hero Section -->
<div class="hero dark-section">
...
</div>
<!-- About Us Section -->
<div class="about-us">
...
</div>
<!-- Footer -->
<footer class="main-footer dark-section">
</footer>
<!-- Scripts -->
</body>
</html>
The Logo Container can be found in the Header Container
Code Example
<!-- Logo Start -->
<a class="navbar-brand" href="./">
<img src="images/logo.svg" alt="Logo">
</a>
<!-- Logo End -->
Open any .html file in a code editor and replace the text between HTML tags.
Code Example
<h2>Our Services</h2>
- Replace images inside the
images/ folder.
- Keep the same file name or update the image path in HTML.
<img src="images/about.jpg" alt="About">
You can change your Website’s Color Scheme in an instant. You simply need to set the your Color Code in the css/custom.css file using the following code:
Code Example
:root{
--primary-color : #000000;
--secondary-color : #FFFFFF;
--bg-color : #F5F4F4;
--text-color : #5C5C5C;
--accent-color : #C3242D;
--white-color : #FFFFFF;
--divider-color : #0000001A;
--dark-divider-color : #FFFFFF1A;
--error-color : rgb(230, 87, 87);
}
By default, Aasha uses Fonts namely: DM Sans from the Google Fonts Library You can change the fonts from css/custom.css file in below lines..
Code Example
:root{
--default-font : "DM Sans", sans-serif;
--accent-font : "Boldonse", system-ui;
}
Adding New Fonts
-
Using Google Fonts
<link href="https://fonts.googleapis.com/css2?family=Boldonse&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap" rel="stylesheet">
In order to change the Fonts, you will need to Edit the Above Links with your Chosen Google Fonts.
-
Using Self-Hosted Fonts
@font-face {
font-family: 'MyWebFont';
src: url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
More Examples for using Self Hosted Fonts.
To create a sticky header, add the active-sticky-header class to the <header> tag.
Code Example
<header class="main-header active-sticky-header">
...
</header>
Twitter Bootstrap framework: http://getbootstrap.com/
Images in preview are used from: http://www.freepik.com/
Google fonts: https://www.google.com/fonts