Comment on page
Documentation!
Thank you for choosing our theme. We hope you enjoy building your project with us. It is a powerhouse of great features and powerful functionalities that would take months to develop. The theme is fully responsive and be rest assured your project looks absolutely stunning on any types of screens.
Follow the steps below to get started with your Site Template:
- 1.Open ... /Template/html/frontend/ Folder to find all the Templates Files
- 2.You'll have to upload these file using a FTP on your server
- 3.Make sure you maintain the structure while uploading the required files/folders:
- 1.
HTML/css - Stylesheets Folder
- 2.
HTML/fonts - Fonts Folder
- 3.
HTML/images - Images Folder
- 4.
HTML/js - Javacripts Folder
- 5.
HTML/index.html - Index File/Homepage
Other files can be used according to your convenience. - 4.Now that you have followed these steps your basic installation is complete and ready to flaunt your site to the world.
The template has a responsive layout and is based on the Bootstrap V4 Framework . Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. Click Here to know more about Bootstrap.
The general HTML structure is the same throughout the template. Here is the general HTML structure of the template:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<!-- pt-loader -->
<div id="pt-loading">
[LOADER CONTENT]
</div>
<!-- pt-loader-->
<!--header -->
<header id="pt-header">
[HEADER CONTENT]
<header>
<!--header -->
<!--Banner--->
<section id="home" class="pt-main-home p-0">
[BANNER CONTENT]
</section>
<!--Banner-->
<!--pt-content--->
<div class="main-content">
[MAIN CONTENT]
</div>
<!--pt-content -->
<!--Section 1 -->
<section class="pt-section1">
[SECTION CONTENT]
</section>
<!--Section 1 -->
<!--Section 2 -->
<section class="pt-section2">
[SECTION CONTENT]
</section>
<!--Section 2 -->
</div>
<!--pt-content -->
<!--footer -->
<footer class="pt-footer">
[FOOTER_CONTENT]
</footer>
<!--footer -->
<!--back-to-top -->
<div id="back-to-top">
[BACK TO TOP CONTENT]
</div>
<!--back-to-top -->
<!--footer -->
<!--java-scripts-->
[PAGE JAVASCRIPTS HERE]
<!--java-scripts -->
</body>
</html>
The general CSS structure is the same throughout the template. Here is the general CSS structure of the template:
<!-- CSS bootstrap-->
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<!-- REVOLUTION STYLE SHEETS -->
<link rel="stylesheet" type="text/css" href="rev-slider/css/rs6.css">
<!-- Style -->
<link rel="stylesheet" href="css/style.css" />
<!-- Responsive -->
<link rel="stylesheet" href="css/responsive.css" />
The general CSS structure is the same throughout the template. Here is the general Javascript structure of the template:
<!-- JS jquery-3.4.1.min -->
<script src="js/jquery-3.4.1.min.js"></script>
<!-- JS popper -->
<script src="js/popper/popper.min.js"></script>
<!-- JS bootstrap -->
<script src="js/bootstrap/bootstrap.min.js"></script>
<!-- JS owl-carousel-->
<script src="js/owl-carousel/owl.carousel.min.js"></script>
<!-- JS anime.min-->
<script src="js/anime.min.js"></script>
<!-- JS circle-progress.min-->
<script src="js/circle-progress.min.js"></script>
<!-- JS imagesloaded.pkgd.min-->
<script src="js/imagesloaded.pkgd.min.js"></script>
<!-- JS isotope.pkgd.min-->
<script src="js/isotope.pkgd.min.js"></script>
<!-- JS jquery.countTo-->
<script src="js/jquery.countTo.js"></script>
<!-- JS jquery.magnific-popup.min-->
<script src="js/jquery.magnific-popup.min.js"></script>
<!-- JS tox-progress-->
<script src="js/tox-progress.js"></script>
<!-- WOW JS FILES -->
<script src="js/wow.min.js"></script>
<!-- REVOLUTION JS FILES -->
<script src="rev-slider/js/rbtools.min.js"></script>
<script src="rev-slider/js/rs6.min.js"></script>
<script src="js/rev-custom.js"></script>
<!-- js custom-->
<script src="js/custom.js"></script>
Favicon is an icon associated with the URL that is displayed at various places, such as in a browser’s address bar or next to the site name in a bookmark list.
You can add a Favicon to your Website using the following code:
<!-- Favicon -->
<link rel="shortcut icon" href="images/favicon.ico" />
Page Loading Transitions are enabled by default. If you wish to disable the page loading transitions you can simply delete the below section.
<!--=============== Loader ==================-->
<div id="pt-loading">
<div id="pt-loading-center">
<img src="images/loder.gif" alt="loading">
</div>
</div>
<!--=============== Loader ==================-->
Page Loading Transitions are enabled by default. If you wish to disable the page loading transitions you can simply delete the below section.
<!--=============== Navbar-brand ==================-->
<a class="navbar-brand" href="#">
<img class="img-fluid logo" src="images/logo-white.png" alt="architeck">
</a>
<!--=============== Navbar-brand ==================-->
You can add/change the site font, from all fonts used from Google Web Font Services, with the one that suits you the best. You can find the font link in top of the HTML in all HTML file. See example below:
<link href='https://fonts.googleapis.com/css2?family=Jost:[email protected];400;500;600;700;800;900&display=swap'/>
In order to change the fonts, you will need to edit the above links with your custom font, You can easily use Google Web Font Services if you plan to use a Google Font or remove it completely. If you plan to use a self hosted font, here is an Example of using Self Hosted Fonts
We have created some really useful helper classes for you. These classes help you to quick position elements without writing new CSS rules. These classes are generic helper classes predefined in the CSS pages, here is quick view what they can do
You can use this code for your page section title to maintain title style.
<!--=============== section-title ==================-->
<div class="pt-section-title-1 text-center">
<h2 class="pt-section-title">Provide Best <span class="imp-word">Services.</span></h2>
<p class="pt-section-description">Lorem Ipsum is simply dummy It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
</p>
</div>
<!--=============== section-title ==================-->
You can use color in the Text. simply add .pt-text-white ( or any color you want) class where you want to use. See example below:
<!--=============== text-white ==================-->
<div class="pt-text-white">
<span class="pt-section-sub-title"> Services </span>
<!--=============== text-white ==================-->
</div>
You can use color in the background. simply add .pt-bg-primary (or any color you want) class where you want to use. See example below:
<!--=============== bg-primary ==================-->
<div class="pt-bg-primary">
<h2 class="pt-section-title"> Provide Best </h2>
</div>
<!--=============== bg-primary ==================-->
Note We include 5 background color helper class in our template pt-bg-primary, pt-bg-primary-2, pt-bg-white, pt-bg-dark and pt-bg-light You can add unlimited background color class according to your needs
You can use an image in the background simply add InlineStyle in div tag and by use of this you can create your own bg. See example below:
<!--=============== bg-overley ==================-->
<div class="pt-bg-overley pt-opacity1"
style="background-image:url(Path);">
</div>
<!--=============== bg-overley ==================-->
You can use an image in the background simply add InlineStyle in div tag and by use of this you can create your own bg. See example below:
<!--=============== parallax ==================-->
<div class="parallax"
style="background-image:url(Path);">
</div>
<!--=============== parallax ==================-->
You can use an image in the background simply add InlineStyle in div tag and by use of this you can create your own bg. See example below:
Class | Description |
---|---|
.text-left | which means text-align: left; |
.text-center | which means text-align: center; |
.text-right | which means text-align: right; |
You can use an image in the background simply add InlineStyle in div tag and by use of this you can create your own bg. See example below:
- Buttons
- Counter
- Fancy Box
- Price Table
- Progress Bar
- Team
- Testimonials
You can use an image in the background simply add InlineStyle in div tag and by use of this you can create your own bg. See example below:
Class | Code | Description | Result |
---|---|---|---|
.pt-button | <a class="pt-button" href="#"><span>pt-button</span></a> | pt button | |
.pt-button .pt-btn-link | <a class="pt-btn-link" href="#"><span>pt-btn-link</span></a> | pt btn link |