Xamin - Html - Documentation

Installation

Basic Installation

Steps to be follow for getting started with the template:

Open ... /Template Folder to find all the Templates Files
You'll have to upload these file using a FTP on your server
Make sure you maintain the structure while uploading the required files/folders:
- HTML/css - Stylesheets Folder
- HTML/fonts - Fonts Folder
- HTML/images - Images Folder
- HTML/js - Javacripts Folder
- HTML/index.html - Index File/Homepage
Other files can be used according to your convenience.
Now that you have followed these steps your basic installation is complete and ready to flaunt your site to the world.

HTML Structure

Here is the general HTML structure of the template:


<!DOCTYPE html>
<html lang="en">
<head>
[Page meta, page css, page js files, page title etc...]
</head>
 <body>

   <!-- preloader -->
   <div  id="loading" > [LOADER CONTENT] </div>
   <!--preloader -->

   <!--header -->
   <header>

   </header>
   <!--header -->

   <div class="iq-banner">
     <!--Slider- -->
     <div id="rev_slider_1_1_wrapper" class="rev_slider_wrapper fullscreen-container" >
     [SLIDER CONTENT]
     </div>
     <!--Slider -->
   </div>

   <!--main-content- -->
   <div class="main-content">
   <!--Section 1 -->
   <section>
   [SECTION 1 CONTENT]
   </section>
   <!--Section 1 -->


   <!--Section 2 -->
   <section>
   [SECTION 2 CONTENT]
   </section>
   <!--Section 2 -->
   <div>
   <!--main-content -->


  <!--footer -->
  <footer class="iq-footer2">
  [FOOTER_CONTENT]
  </footer>
  <!--footer -->

  <div id="back-to-top">
  [BACK TO TOP CONTENT]
  </div>

  [PAGE JAVASCRIPTS HERE]
 </body>
</html>

CSS Structure

Here is the general CSS structure of the template:


<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css"/>

<!-- Fontawesome Fonts -->
<link rel="stylesheet" href="css/all.min.css"/>

<!-- ionicons CSS -->
<link rel="stylesheet" href="css/ionicons.min.css"/>

<!-- flaticon CSS -->
<link rel="stylesheet" href="css/flaticon.css"/>

<!-- Chart CSS -->
<link rel="stylesheet" href="css/Chart.min.css"/>

<!-- Magnific Popup -->
<link rel="stylesheet" href="css/magnific-popup.css"/>

<!-- owl-carousel -->
<link rel="stylesheet" href="css/owl.carousel.min.css"/>

<!-- wow -->
<link rel="stylesheet" href="css/wow.css"/>

<!-- Slick -->
<link rel="stylesheet" href="css/slick-theme.css"/>
<link rel="stylesheet" href="css/slick.css"/>

<!-- REVOLUTION STYLE SHEETS -->
<link rel="stylesheet" type="text/css" href="revslider/css/rs6.css">

<!-- Xamin custom -->
<link rel="stylesheet" href="css/xamin-style.css"/>

<!-- Responsive -->
<link rel="stylesheet" href="css/responsive.css"/>

Javascript Structure

Here is the general Javascript structure of the template:


<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/jquery-3.4.1.min.js"></script>

<script src="js/popper.min.js"></script>

<!-- Bootstrap JS -->
<script src="js/bootstrap.min.js"></script>

<!-- Appear JS -->
<script src="js/appear.js"></script>

<!-- Countdown JS -->
<script src="js/countdown.js"></script>

<!-- CountTo JS -->
<script src="js/jquery.countTo.js"></script>

<!-- Magnific Popup JS -->
<script src="js/magnific-popup/jquery.magnific-popup.min.js"></script>

<!-- Owl Carousel JS -->
<script src="js/owl.carousel.min.js"></script>

<!-- Chart JS -->
<script src="js/Chart.min.js"></script>
<script src="js/Chart.bundle.min.js"></script>

<!-- Slick JS -->
<script src="js/slick.min.js"></script>

<!-- Wow JS -->
<script src="js/wow.min.js"></script>

<!-- Isotope JS-->
<script src="js/isotope.pkgd.min.js"></script>

<!-- REVOLUTION SLIDER JS-->
<script src="revslider/js/revolution.tools.min.js"></script>
<script src="revslider/js/rs6.min.js"></script>
<script src="js/revslider-custom.js"></script>

<!-- Custom JS-->
<script src="js/xamin-custom.js"></script>

For Favicon icon

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:

<link rel="shortcut icon" href="images/favicon.ico"/>

For Page Loading Transitions

Page Loading Transitions are enabled by default. If you wish to disable the page loading transition you can simply delete below section

 <div id="loading">
    <div id="loading-center">
        <img src="images/loader.gif" alt="loder">
    </div>
</div>

For Logo

The Logo Container can be found in the Header Container - #header. Replace "logo.png" with your own logo image URL.

 <ul class="menu-logo">
    <li>
        <a href="index.html">
            <img src="images/logo.png" alt="logo">
        </a>
    </li>
</ul>

For Changing Fonts

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 Style.css in all HTML file. See example below:

 <!-- google font -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,600i,700,800|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900" rel="stylesheet">

To include new font you can simply add another link like this:

 <!-- google font -->
<!-- Raleway font -->
<link href="https://fonts.googleapis.com/css?family=Raleway:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet" />

<!-- Open Sans font -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,700,800" rel="stylesheet">

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

Helper classes

For section padding

You can add this helper class to set section padding top 100px and padding bottom 100px.
Add iq-ptb-100 class in section tag. See example below:


<section class="... iq-ptb-100">
  [YOUR CONTENT]
</section>

Note Use this helper class to maintain all page section spacing. You can also use overview-block-pt for only padding top and overview-block-pb for only padding bottom.

For Background Images and pattern

You can use an image in the background with parallax effect by simply adding InlineStyle in div tag and by use of this you can create your own background. See example below:


<div style="background-image:url(Path); ">
    [YOUR CONTENT]
</div>

If your background is small and you want to use repeated background then use styling property background-repeat and set the value repeat or no-repeat. See the example below:


<div style="background-image:url(Path); background-repeat:no-repeat;">
    [YOUR CONTENT]
</div>

If you want to use your background like cover or cointainer. You just need to add styling property background-size and set the value cover or cointainer. see the example below:


<div style="background-image:url(Path); background-size:cover;">
    [YOUR CONTENT]
</div>

Bootstrap Components

For Sliders

There 2 different sliders for you to be used on any page with variety of Options. List of the Sliders:

Owl carousel

For Owl carousel

This excellent carousel slider can be controlled using HTML5 data attributes.

Find the full online owl carousel Slider documentation.

Source & Credits

All images and videos are for preview purposes only and are not included in the download files. Images are of copyrights under Creative Commons CC0.

Images

bigstockphoto bigstockphoto
Pexels Pexels
freepik freepik
pixabay pixabay

Sofbox Docs