Documentation

DomainX - Domain for Sale Html Template

Thank you for purchasing DomainX - Domain for Sale Html Template on ThemeForest.

Version: 2.0
Created by: Harnish Design

If you have any questions that are beyond the scope of this help file, Please feel free to email via Item Support Page.

Installation

Follow the steps below to setup your site template:

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.
Below is the folder structure and needs to be uploaded to your website or localhost root directory:
- HTML/css - Stylesheet files
- HTML/images - Image files
- HTML/js - Javacript files
- HTML/php - PHP file for Contact form
- HTML/sass - Sass files
- HTML/vendor – All external libs.
You should upload all or specific HTML files as per your need.
You're now good to go..!

HTML Structure

DomainX follows a simple and easy to customize coding structure. Here is the sample for your reference:
The template is based on Bootstrap Framework

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Your Stylesheets, Scripts & Title
============================================= -->
</head>
<body>

<!-- Preloader -->
<div class="preloader">
  ....
</div>
<!-- Preloader End --> 

<!-- Document Wrapper
=============================== -->
<div id="main-wrapper">
  <div class="container">
    .......
  </div>
</div>
<!-- Document Wrapper End --> 

<!-- Script --> 
</body>
</html>

If you need more information, please visit bootstrap site: https://getbootstrap.com/docs/5.0/layout/grid/

Changing Fonts

DomainX template use fonts: Poppins from the Google Fonts Library. You can change the fonts from page head in HTML files (as following code).

<!-- Web Fonts
============================================= -->
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900' type='text/css'>

In order to change the Fonts, you will need to Edit the Above Links with your Chosen Google Fonts.
Then Replace the font-family CSS Property in the css/stylesheet.css File with your Newly Added Fonts.

If you want to use self hosted fonts other than Google fonts then here is an example of Self Hosted Fonts.

Icons

Font Awesome icon sets are used in this template.

<i class="fas fa-mobile-alt"></i>
<i class="fas fa-envelope"></i>
<i class="fas fa-credit-card"></i>
<i class="fas fa-phone"></i>
......

NotePlease go to their official documentation pages for a full list of icons: Font Awesome

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/sass

Open the sass/_variables.scss and Edit the values 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 stylesheet.scss File.

Color Schemes

You can change your Website's Color Scheme in an instant. We have build 9 Color css file for change template primary color.

color-cyan.css - Cyan Color
color-green.css - Green Color
color-orange.css - Orange Color
color-indigo.css - Indigo Color
color-purple.css - Purple Color
color-pink.css - Pink Color
color-red.css - Red Color
color-teal.css - Teal Color
color-yellow.css - Yellow Color

Simply add Color CSS file link it in the Document <head>.
Make sure you add the css/color-orange.css stylesheet in your head after the css/stylesheet.css file linking from above mentioned color css file.

For Example:

<head>
<!-- Stylesheet
============================================= -->
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="vendor/font-awesome/css/all.min.css" />
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />

<!-- Here goes your Colors Css -->
<link rel="stylesheet" type="text/css" href="css/color-orange.css" />
</head>

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/stylesheet.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.

<!-- Stylesheet
============================================= -->
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="vendor/font-awesome/css/all.min.css" />
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />

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

Setting up RTL

We have included all the tools to make your website completely RTL ready. Simply follow the steps below:

Code Example:

Step 1

Add the dir="rtl" to the <html> element.
Add an appropriate lang attribute, like lang="ar", on the <html> element.

Example:
```
<html dir="rtl" lang="ar">
```
Step 2

From there, you’ll need to replace an RTL version of Bootstrap CSS instead of default bootstrap css.

Example:
```

<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.rtl.min.css" />
```
Step 3

Add the .rtl Class to the <body> Tag.

Example:
```
<body class="rtl">
```

Shortcodes

Setting up components is very easy. Here is the Some of shortcodes describe.

Hero Background

The list of various Hero Background types & its descriptions are provided below for your reference:

Image Background

You can add Image as Background in Hero Background.

Code Example

<div class="hero-wrap">
  <div class="hero-mask opacity-8 bg-dark"></div>
  <div class="hero-bg hero-bg-scroll" style="background-image:url('./images/intro-bg.jpg');"></div>
  <div class="hero-content">
    <div class="container">
    	
        ...
        
    </div>
  </div>
</div>

Settings

1You can use Opacity Utility Classes as per your needs for change Mask background opacity. - List of Opacity Utility Classes
2You can use Background Color Utility Classes as per your needs for change Mask background Color. ( For Example: .bg-dark, .bg-primary, .bg-light etc... )
3You can add your image path here.
4You can add .hero-bg-scroll css class for your background image as scroll. Remove .hero-bg-scroll css class for background image as cover.

Slider Background

You can add Image Slider as Background in Hero Background. You will need to use Owl-Carousel slider code in Hero background for that.

Code Example

<div class="hero-wrap">
  <div class="hero-mask opacity-8 bg-dark"></div>
  <!-- Image Slider Background code -->
  <div class="hero-bg-slideshow owl-carousel owl-theme single-slideshow" data-animateout="fadeOut" data-animatein="fadeIn" data-autoplay="true" data-loop="true" data-dots="false" data-nav="false" data-items="1">
    <div class="item intro-bg-3"></div>
    <div class="item intro-bg-4"></div>
    <div class="item intro-bg-5"></div>
  </div>
  <div class="hero-content">
    <div class="container">
    	
        ...
        
    </div>
  </div>
</div>

Slider Image Settings:

First You will need to add your images in images folder. (with name intro-bg.jpg, intro-bg-1.jpg .... intro-bg-10.jpg etc...,).
Then, Use .intro-bg, .intro-bg-1 .... .intro-bg-10 css class as per your need to show image in Item code.
For Example:
<div class="item intro-bg-3"></div>

Owl-Carousel Settings:

data-items - No. of Items to display in the Carousel. Eg. 1
data-items-lg - No. of Items to display in the Carousel on Desktops/Laptops. Eg. 5
data-items-md - No. of Items to display in the Carousel on Netbooks. Eg. 5
data-items-sm - No. of Items to display in the Carousel on iPads/Tablets. Eg. 4
data-items-xs - No. of Items to display in the Carousel on Mobile. Eg. 3
data-loop - Enable/Disable Loop. Eg. true/false
data-autoplay - Enable/Disable autoplay. Eg. true/false
data-autoplaytimeout - Autoplay timer in milliseconds. Eg. 5000
data-autoplayhoverpause - Enable/Disable autoplayHoverPause Eg. true/false
data-speed - Speed of the Carousel Animation in millisconds. Eg. 700
data-nav - Enable/Disable Navigation Arrows. Eg. true/false
data-dots - Enable/Disable Pagination Dots. Eg. true/false
data-margin - Margin between Carousel Items in pixels. Eg. 15
data-stagepadding Padding on the Edges of the Carousel Container in pixels. - Eg. 20
data-slideby - No. of Items to Slide at once. Eg. 2
data-lazyload - Enable/Disable Lazyload. Eg. true/false
data-autoheight - Enable/Disable autoHeight. Eg. true/false
data-autowidth - Enable/Disable autoWidth. Eg. true/false
data-animateOut - Enable/Disable animateOut. Eg. fadeOut/fadeIn
data-animateIn - Enable/Disable animateIn. Eg. fadeOut/fadeIn

Youtube Background Video

You can add Youtube Video as Background in Hero Background.

Code Example

<div class="hero-wrap">
  <div class="hero-mask opacity-5 bg-dark"></div>
  <!-- Youtube Video Background code -->
  <div class="player" data-property="{videoURL:'https://youtu.be/fG_X-cx5Szg',containment:'.hero-wrap', showControls:false, addRaster: false, autoPlay:true, loop:true, mute:true, startAt:0, opacity:1}"></div>	
  <div class="hero-content">
    <div class="container">
    	
        ...
        
    </div>
  </div>
</div>

Note You can see all the available options from here: jQuery.mb.YTPlayer

Particles

You can add Particles in Background in Hero Background.

Code Example

<div class="hero-wrap"> 
  <div id="particles-js" class="hero-particles"></div> <!-- Particles code -->
  <div class="hero-mask opacity-8 bg-dark"></div>
  <div class="hero-bg hero-bg-scroll" style="background-image:url('./images/intro-bg.jpg');"></div>
  <div class="hero-content">
    <div class="container">
    	
        ...
        
    </div>
  </div>
</div>

Note You can see all the available options from here: Particles.js

Particles Snow

You will need to use #particles-snow id in above particles code for show Snow Particles.
For Example:
```
<div id="particles-snow" class="hero-particles"></div> 
```

also, Copy-paste the JavaScript <script> into your bottom of the page before </body>.

<script src="vendor/particles/particles.min.js"></script>
<script src="vendor/particles/particles-snow.js" type="text/javascript"></script>

Helper Classes

We have created some really useful helper classes for you. Here are a few of them. also, You can refer other default bootstrap helper classes here: Bootstrap Documentation

.text-0 - Changes the Font size to 11px.
.text-1 - Changes the Font size to 12px.
.text-2 - Changes the Font size to 14px.
.text-3 - Changes the Font size to 16px.
.text-4 - Changes the Font size to 18px.
.text-5 - Changes the Font size to 21px.
.text-6 - Changes the Font size to 24px.
.text-7 - Changes the Font size to 28px.
.text-8 - Changes the Font size to 32px.
.text-9 - Changes the Font size to 36px.
.text-10 - Changes the Font size to 40px.
.text-11 - Changes the Font size to 44px.
.text-12 - Changes the Font size to 48px.
.text-13 - Changes the Font size to 52px.
.text-14 - Changes the Font size to 56px.
.text-15 - Changes the Font size to 60px.
.text-16 - Changes the Font size to 64px.
.text-17 - Changes the Font size to 72px.
.text-18 - Changes the Font size to 80px.
.text-19 - Changes the Font size to 84px.
.text-20 - Changes the Font size to 92px.
.text-21 - Changes the Font size to 104px.
.text-22 - Changes the Font size to 112px.
.text-23 - Changes the Font size to 124px.
.text-24 - Changes the Font size to 132px.
.text-25 - Changes the Font size to 144px.

Font Weight:

.fw-100 - For font weight of 100.
.fw-200 - For font weight of 200.
.fw-300 - For font weight of 300.
.fw-400 - For font weight of 400.
.fw-500 - For font weight of 500.
.fw-600 - For font weight of 600.
.fw-700 - For font weight of 700.
.fw-800 - For font weight of 800.
.fw-900 - For font weight of 900.

Background Color:

.bg-transparent - For background color of transparent
.bg-light - For background color of light gray
.bg-light-1 - For background color of more light gray
.bg-light-2 - For background color of more light gray
.bg-light-3 - For background color of more light gray
.bg-light-4 - For background color of more light gray
.bg-dark - For background color of dark
.bg-dark-1 - For background color of dark gray
.bg-dark-2 - For background color of more dark gray
.bg-dark-3 - For background color of more dark gray
.bg-dark-4 - For background color of more dark gray

Box Shadow

.shadow-none - For No shadow to elements with box-shadow utilities.
.shadow-sm - For Small shadow to elements with box-shadow utilities.
.shadow - For Regular shadow to elements with box-shadow utilities.
.shadow-md - For medium light shadows to elements with box-shadow utilities.
.shadow-lg - For Larger shadows to elements with box-shadow utilities.

Opacity

.opacity-1 - For 10% opacity.
.opacity-2 - For 20% opacity.
.opacity-3 - For 30% opacity.
.opacity-4 - For 40% opacity.
.opacity-5 - For 50% opacity.
.opacity-6 - For 60% opacity.
.opacity-7 - For 70% opacity.
.opacity-8 - For 80% opacity.
.opacity-9 - For 90% opacity.

Border Radius

.rounded-top-0 - No Border Radius for top.
.rounded-bottom-0 - No Border Radius for bottom.
.rounded-left-0 - No Border Radius for left.
.rounded-right-0 - No Border Radius for right.

Borders, Sizing, Spacing (margin & padding) and also much more....

NoteYou can refer for use other default bootstrap helper classes here - https://getbootstrap.com/docs/5.0/utilities/

Contact Form

Contact us form will not work unless you have your files running on a hosting server with PHP / JS. When you have your files ready on your hosting server, you need to edit the settings to make the email function work.

Open the php/mail.php File to make the following changes:

Receiving Form Responses

Add your Email Address to receive Email Responses by using the following code below:

/*--------------------------------------------
	// Receiver's Email
---------------------------------------------*/

$toEmail = "your-email@website.com"; // Replace Your Email Address

Sender/Company Email to send Emails

Add a Sender Email by using the following code below:

/*--------------------------------------------
	// Sender's Email
---------------------------------------------*/

$fromEmail = "no-reply@website.com";  // Replace Company's Email Address (preferably currently used Domain Name)
$fromName = "Company Name"; // Replace Company Name

NoteSome Web Hosting services enforce you to use the same Domain Name in your Email Address as your Hosting Account, to prevent SPAM. So make sure that @website.com above is same as your Domain’s Hosting Account.

Add Your Domain Name

Find the following code in the php/mail.php File and Replace YourSite.com with your Domain Name:

Using SMTP

Some Hosting Servers disable the use of PHP mail() Function to prevent SPAM. So you can use the SMTP Functionality to Send Emails. Simply add the following code after the $mail = new PHPMailer(true); Line of Code:

$mail->isSMTP();
$mail->SMTPDebug = 0;
$mail->Host = 'mail.yourdomain.com';
$mail->SMTPAuth = true;
$mail->Username = "yourname@yourdomain.com";
$mail->Password = "yourpassword";
$mail->SMTPSecure = 'tls';
$mail->Port = 587;

Google reCaptcha

if you want to use Google reCaptcha for Contact Form Protection. then follow below details.

To setup reCaptcha Form Protection, you will need to obtain a Set of Site/Secret Keys from the Google reCaptcha Website. Then follow the Steps below to Setup the Keys for your Form:

Google reCaptcha v2

Add the following code to your Form and replace YOUR-RECAPTCHA-SITE-KEY-HERE with your reCaptcha site key:

<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<div id="recaptcha-v2" data-sitekey="YOUR-RECAPTCHA-SITE-KEY-HERE" class="g-recaptcha" ></div>

Like the image below:

Find the following code in the php/mail.php File and add your Secret Key:

/* --------------------------------------------
  // reCaptcha Secret
  --------------------------------------------- */

// Add this only if you want to use Google reCaptcha with your Contact Forms.
$recaptcha_secret = 'YOUR_RECAPTCHA_SECRET_KEY'; // Your Google reCaptcha Secret

Google reCaptcha v3

Add the script of Google Recaptcha v3 on footer of document and replace YOUR-RECAPTCHA-SITE-KEY-HERE with your reCaptcha site key.
```
<script id="google-recaptcha-v3" src="https://www.google.com/recaptcha/api.js?render=YOUR-RECAPTCHA-SITE-KEY-HERE"></script>
```
Like the image below:

Find the following code in the php/mail.php File and add your Secret Key:

/* --------------------------------------------
  // reCaptcha Secret
  --------------------------------------------- */

// Add this only if you want to use Google reCaptcha with your Contact Forms.
$recaptcha_secret = 'YOUR_RECAPTCHA_SECRET_KEY'; // Your Google reCaptcha Secret

Source & Credits

Support

If this documentation doesn't answer your questions, So, Please send us Email via Item Support Page

We are located in GMT +5:30 time zone and we answer all questions within 12-24 hours in weekdays. In some rare cases the waiting time can be to 48 hours. (except holiday seasons which might take longer).

Note: While we aim to provide the best support possible, please keep in mind that it only extends to verified buyers and only to issues related to our template like bugs and errors. Custom modifications or third party module implementations are not included.

Don’t forget to Rate this template

Please Add your Review (Opinion) for Our template. It would be a great support for us.
Go to your Themeforest Profile > Downloads Tab > & then You can Rate & Review for our template.
Thank You.

Changelog

For Future Updates Follow Us @themeforest / @facebook / @twitter / @Dribbble

The best way is to use a compare tool for update template, like this one: http://kdiff3.sourceforge.net/ – and use it to compare the folders (your current website and the new version). Updating HTML templates requires manual work.

v2.0

Added RTL Support
Updated Bootstrap to Latest Version (v5.0.2)
Fixed Some minor issues and improvement.

v1.3

Added New 15 Variants Demos.
Updated Bootstrap latest version 4.6.0.
Updated Font-awesome latest version 5.15.1
Updated Documentation Details.

v1.2

Added Google reCaptcha v2 and v3 for Contact form.
Updated Contact form updated with PHPMailer.
Updated Documentation Information with New Docs Design

v1.1

Fixed Fix Some minor php Mail Issue.
Updated Improvement in Documentation

v1.0

Initial Release

Other Templates

Please Checkout Our Below Other Premium Templates

Documentation

DomainX - Domain for Sale Html Template

Installation

HTML Structure

Changing Fonts

Icons

Sass

Color Schemes

Theme Customization

Setting up RTL

Code Example:

Step 1

Step 2

Step 3

Shortcodes

Hero Background

Image Background

Code Example

Settings

Slider Background

Code Example

Slider Image Settings:

Owl-Carousel Settings:

Youtube Background Video

Code Example

Particles

Code Example

Particles Snow

Helper Classes

Text Size:

Font Weight:

Background Color:

Box Shadow

Opacity

Border Radius

Borders, Sizing, Spacing (margin & padding) and also much more....

Contact Form

Receiving Form Responses

Sender/Company Email to send Emails

Add Your Domain Name

Using SMTP

Google reCaptcha

Google reCaptcha v2

Google reCaptcha v3

Source & Credits

Fonts:

Scripts:

PHP:

Support

Don’t forget to Rate this template

Changelog

v2.0

v1.3

v1.2

v1.1

v1.0

Other Templates

MXapp - App Landing Page

Callum - Personal Portfolio Template

Simone - Personal Portfolio Template

Kenil - Responsive Bootstrap 4 One Page Portfolio Template

Doon - One Page Parallax HTML Template

Oxyy - Login and Register Form HTML Templates

Koice - Invoice HTML Template

Zoon - Coming Soon Template

Payyed - Money Transfer and Online Payments HTML Template

Quickai - Recharge & Bill Payment, Booking HTML5 Template