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 | |
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:
<!--=============== counter ==================-->
<div class="counter d-none d-sm-block">
<h5 class="timer" data-to="25" data-speed="5000">25</h5>
<label>Cool Number</label>
</div>
<!--=============== counter ==================-->
Note You Want Other Style Of Counter, Please Go In HTML Folder And Check shortcode-counter.html Page
Use the below code to display Fancy Box style:
<!--=============== fancybox-box ==================-->
<div class="pt-fancybox-box-info">
<h3 class="pt-service-title">Optimization</h3>
<div class="pt-fancy-media"><i class="flaticon-005-stationary-bike"></i></div>
<div class="pt-fancybox-description">
<p>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>
</div>
<!--=============== fancybox-box ==================-->
Note You Want Other Style Of Feature Box, Please Go In HTML Folder And Check shortcode-feature.html Page
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:
<!--=============== price-table ==================-->
<div class="pt-price-block text-center">
<div class="pt-price-detail">
<span class="pt-price-title">BASIC </span>
<h2 class="price"> $ 29.00</h2>
<p class="pt-price-duration">Per Month</p>
<div class="pt-bg-effect">
<img class="img-fluid" src="images/about/demo-7.png" alt="Gymster-image">
</div>
</div>
<ul class="pt-list-info">
<li>Five brand monitors</li>
<li><del>12-month fixed price</del></li>
<li><del>Transmission charge</del></li>
<li><del>Marketing strategy</del></li>
<li><del>Free Server Domain</del></li>
<li>Web Optimized</li>
</ul>
<a class="pt-button pt-btn-flat" href="#">
<div class="pt-button-block">
<span class="pt-button-line-left"></span>
<span class="pt-button-text">Read More</span>
<span class="pt-button-line-right"></span>
<i class="ion ion-android-arrow-dropright pt-btn-icon"></i>
</div>
</a>
</div>
<!--=============== price-table ==================-->
Note You Want Other Style Of Counter, Please Go In HTML Folder And Check shortcode-pricing-plan.html Page
Use the below code to display Progress bar style:
<!--=============== progress-bar ==================-->
<div class="progress-outer">
<div class="progress">
<div class="progress-bar progress-bar-info active" style="width:90%;"</div>
<div class="progress-value"Masonry Works and Plaster</div
</div
<div class="progress">
<div class="progress-bar progress-bar-info active" style="width:67%;"</div>
<div class="progress-value"Pre Cast Work</div>
</div
<div class="progress">
<div class="progress-bar progress-bar-info active" style="width:97%;"</div>
<div class="progress-value"Pre Engineered Structures</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info active" style="width:85%;"</div>
<div class="progress-value"Engineered Structures</div>
</div>
</div>
<!--=============== progress-bar ==================-->
Note You Want Other Style Of Progress bar, Please Go In HTML Folder And Check shortcode-progress-bar.html Page
Use the below code to display Team:
<!--=============== team ==================-->
<div class="item">
<div class="pt-team-box">
<div class="pt-team-img">
<img src="images/team/5.jpg" alt="team-image"> <span class="pt-team-designation">Marketing Manager</span>
<div class="pt-team-social">
<ul>
<li>
<a href="#"><i class="fab fa-facebook-f"></i></a>
</li>
<li>
<a href="#"><i class="fab fa-twitter"></i></a>
</li>
<li>
<a href="#"><i class="fab fa-google-plus-g"></i></a>
</li>
<li>
<a href="#"><i class="fab fa-instagram"></i></a>
</li>
</ul>
</div>
</div>
<div class="pt-team-info">
<h5><a class="pt-member-name text-center">Danial Frankie</a></h5>
</div>
</div>
</div>
<!--=============== team ==================-->
Note You Want Other Style Of Team, Please Go In HTML Folder And Check shortcode-team.html Page
Testimonials
Use the below code to display Testimonials:
<!--=============== testimonial ==================-->
<div class="item">
<div class="pt-testimonial-box pt-testimonial-box-1">
<div class="pt-testimonial-img">
<img src="images/testimonial/1.jpg" alt="testimonial-image">
<div class="pt-testimonial-meta">
<h5>Cristian Torres</h5>
<p>Developer</p>
</div>
</div>
<div class="pt-quote">
<img src="images/testimonial/quote.png" alt="quote-img">
</div>
<div class="pt-testimonial-content">
<p>Contrary to popular belief, Lorem Ipsum is not simply Random text. It has roots in iterature from 45 BC, making it over 2000 years old.
</p>
</div>
<div class="pt-testimonial-star">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
</div>
<!--=============== testimonial ==================-->
Note You Want Other Style Of Testimonial, Please Go In HTML Folder And Check shortcode-testimonial.html Page
Browser Support
ITsolve supports all major Browsers like Google Chrome, Mozilla Firefox, Mac Safari, Opera, Internet Explorer 10 and above.
Last modified 1yr ago