• Installation

    • Follow the below steps to get started with Crafto:

    1. Unzip the downloaded package and open the /html folder to find all the template files. Upload these files to your hosting web server using FTP or file manager.

    2. Below is the folder/files structure that needs to be uploaded to your website root directory:

    • html/css - Main stylesheet files

    4. Edit the files using a text editor like VS Code or Sublime Text.

    5. Finalize the upload package and optionally run Gulp tasks to minify your files.

    6. Upload your files to your server’s public_html (Apache) or /var/www/html (Nginx) folder.

  • Css Structure

    • CSS Structure

    I'm using one main CSS file (assets/css/style.css), in this template which you are free to modify depending on the customization you require. Below are 10 additional CSS files:

    • bootstrap.min.css - This is a main stylesheet that required for basic template styling like grid, form, input and web elements.
    • font-awesome.css - CSS stylesheets for font icon packs.
    • animate.css - CSS stylesheets for animation.
    • slick.css - This stylesheet used for styling the Banner slideshow.
    • slick-theme.css - This stylesheet used for styling the slideshow.
    • flaticon.css.css - This stylesheet used for icons packs.
    • style.css - This stylesheet used for styling the Web Layout.

    The main CSS file (assets/css/style.css) contains all of the specific stylings for the page. The file was divided into several sessions as below:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    /*===========================
    =  Table of CSS
    1.General code
    1.1 Typography
    1.2 Space margins and padding
    1.3 Button
    1.4 Section-Colors-&-Backgrounds
    2.Homepages
    2.1 Navigation
    2.2 Banner
    2.3 About Us
    2.4 Our Services
    2.5 Our Work
    2.6 Why Choose Us / Testimonials
    2.7 Our Blog
    2.8 Our Team
    3.FAQs 
    4.Contact Us 
    5.Blog   
    6.Blog Details   
    7.404 
    9.About Us 
    9.Coming Soon 
    ===========================*/
    CSS styles for support all kinds of different screen sizes

    If you would like to edit a specific section of the site, simply find the appropriate label in the .css file, and then scroll down until you find the appropriate style that needs to be edited.


  • Scripts

    • Scripts

    This theme uses several scripts many of which are documented within the theme's code. If you're a developer, you will find this particularly useful.


  • Image Files

    • Image Files



  • Credits

    • Credits


  • Changelog

    • Version 1.0

    Crafto template is based on Bootstrap Framework (http://getbootstrap.com/) Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

    Below is sample coding structure:

                   <!DOCTYPE html>
               <html lang="en">
               <head>
                   <meta charset="UTF-8">
                   <meta name="viewport" content="width=device-width, initial-scale=1.0">
                   <title>Crafto Template</title>
                   <link rel="stylesheet" href="css/style.css">
                   <link rel="stylesheet" href="css/style.css">
                   <link rel="stylesheet" href="css/style.css">
                   <link rel="stylesheet" href="css/style.css">
                   <link rel="stylesheet" href="css/style.css">
                   <link rel="stylesheet" href="css/style.css">
                   <link rel="stylesheet" href="css/style.css">
                   <link rel="stylesheet" href="css/style.css">
                   <link rel="stylesheet" href="css/style.css">
                   <link rel="stylesheet" href="css/style.css">
                   <link rel="stylesheet" href="css/style.css">
                   <link rel="stylesheet" href="css/style.css">
               </head>
               <body>
                   <header>Header Content</header>
                   <main>Main Content</main>
                   <footer>Footer Content</footer>
               </body>
               </html>
    Main Features
    • Two Unique HomePage Layout
    • One Types Of Header Style
    • Unique Navigation Style
    • 404 Page Included
    • Fullscreen Image Background
    • Fully Responsive
    • Creative, Modern and Clean Design
    • Easy to Customization CountDown
    • Modern Cross Browser Support
    • W3C Validate Code
    Other Features
    • Google Fonts
    • FontAwesome Icons
    • Bootstrap Icons
    • Flaticon Icons
    • Well Documented
    • and much more features…

  • Scuby

    • HTML Structure

    This template uses the 1170 grid system (12 columns) which will help streamline any customization you wish to make. If you're unfamiliar with the 1170 grid system, be sure to read about it here!

    The main structure of this site is wrapped in a 'container' div. Inside of that div you will find each major section of the site given an appropritae grid size all equalling 12 columns in length.

    ?
    1
    2
    3
    4
    5
    6
    7
      <section class="section-padding about-us">
      <div class="container">
        <div class="row">
       -------------------
        </div>
      </div>
    </section>

    Note: If you want to add padding in section use class="section-padding" 80px padding top & 80px padding bottom added in section. You don't need padding remove class="section-padding".

    Site Logo

    You can change the main site logo with change this code:

    ?
    1
    2
    3
    4
    5
    6
    7
      <section class="section-padding about-us">
      <div class="container">
        <div class="row">
       -------------------
        </div>
      </div>
    </section>

    Main Navigation

    You can change the main site navigation with change this code:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <nav>
      <div class="main-navigation">
        <div class="main-menu">
          <ul class="custom-flex">
            <li class="menu-item"> <a href="Services.html">Services</a> </li>
            <li class="menu-item menu-item-has-children">
              <a href="#">Pages</a>
                <ul class="submenu custom">
                  <li class="menu-item"> <a href="coming-soon.html">Coming Soon</a> </li>
                </ul>
            </li>
            <li class="menu-item"> <a href="contact.html">Contact</a> </li>
          </ul>
        </div>
      </div>
    </nav>

    Section Heading

    Use this code for section heading.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <!-- Heading -->
    <section class="section-padding about-us">
       <div class="container">
         <div class="row">
           ------------
         </div>
       </div>
     </section>
     <!-- /Heading -->

    Section Background Color

    ?
    1
    2
    3
    4
    5
    6
    7
    <section class="section-padding about-us">
      <div class="container">
        <div class="row">
          ------------
        </div>
      </div>
    </section>

    Note: If you want to red background color in section use class="bg-light-gray"   


    Footer Element

    In this section you can change your social media links and copyright text with your own name or company.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <!-- Footer -->
        <div class="copyright-area">
         <div class="container">
            <div class="copyright">
               <div class="row">
                  <div class="col-lg-6 col-md-8 text-center">
                     <div class="copy">
                        <p> Scuby is Proudly Owned by <a href="#" target="_blank">Scuby</a></p>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
    <!-- /Footer -->

    Note: You can see the complete list of font icons here!


    Email

    You can also use built-in icon packs in this template, all icons use CSS Font feature, so you can edit and give color to the icon easily. For referrences to easier you use all icons you can visit here!


    CSS Structure

    I'm using one main CSS file (assets/css/style.css), in this template which you are free to modify depending on the customization you require. Below are 10 additional CSS files:

    • bootstrap.min.css - This is a main stylesheet that required for basic template styling like grid, form, input and web elements.
    • font-awesome.css - CSS stylesheets for font icon packs.
    • animate.css - CSS stylesheets for animation.
    • slick.css - This stylesheet used for styling the Banner slideshow.
    • slick-theme.css - This stylesheet used for styling the slideshow.
    • flaticon.css.css - This stylesheet used for icons packs.
    • style.css - This stylesheet used for styling the Web Layout.

    The main CSS file (assets/css/style.css) contains all of the specific stylings for the page. The file was divided into several sessions as below:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    /*===========================
    =  Table of CSS
    1.General code
    1.1 Typography
    1.2 Space margins and padding
    1.3 Button
    1.4 Section-Colors-&-Backgrounds
    2.Homepages
    2.1 Navigation
    2.2 Banner
    2.3 About Us
    2.4 Our Services
    2.5 Our Work
    2.6 Why Choose Us / Testimonials
    2.7 Our Blog
    2.8 Our Team
    3.FAQs 
    4.Contact Us 
    5.Blog   
    6.Blog Details   
    7.404 
    9.About Us 
    9.Coming Soon 
    ===========================*/
    CSS styles for support all kinds of different screen sizes

    If you would like to edit a specific section of the site, simply find the appropriate label in the .css file, and then scroll down until you find the appropriate style that needs to be edited.


  • Golfing

    • HTML Structure

    This template uses the 1170 grid system (12 columns) which will help streamline any customization you wish to make. If you're unfamiliar with the 1170 grid system, be sure to read about it here!

    The main structure of this site is wrapped in a 'container' div. Inside of that div you will find each major section of the site given an appropritae grid size all equalling 12 columns in length.

    ?
    1
    2
    3
    4
    5
    6
    7
      <section class="section-padding">
      <div class="container">
        <div class="row justify-content-center text-center">
          -------------------
        </div>
      </div>
    </section>

    Note: If you want to add padding in section use class="section-padding" 80px padding top & 80px padding bottom added in section. You don't need padding remove class="section-padding".

    Site Logo

    You can change the main site logo with change this code:

    ?
    1
    2
    3
    4
    5
    <div class="logo">
            <a href="index.html">
            <img src="assets/images/logo.png" alt="logo" class="image-fit-contain">
            </a>
          </div>

    Main Navigation

    You can change the main site navigation with change this code:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <nav class="navigation">
      <ul class="main-menu">
        <li class="menu-item menu-item-has-children">
          <a href="#" class="active-one">Home</a>
          <ul class="sub-menu">
            <li class="menu-item">
              <a href="index.html">Homepage v1</a>
            </li>
          </ul>
        </li>
        <li class="menu-item">
          <a href="about.html">About</a>
        </li>
      </ul>
    </nav>

    Section Heading

    About Golfing

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    Use this code for section heading.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <!-- Heading -->
      <section class="section-padding">
      <div class="container">
        <div class="row justify-content-center text-center">
          <div class="col-lg-7">
            <div class="pricing-heding">
              <h2 class="page-heading">About Golfing</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- /Heading -->

    Section Background Color

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <section class="section-padding">
    <div class="container">
    <div class="row justify-content-center text-center">
    <div class="col-lg-5">
    <div class="section-hedding">
    <h6 class="small-hedding m-0">Services</h6>
    <p>Lorem Ipsum is simply dummy text of the printing and typesting industr.</p>
    </div>
    </div>
    </div>
    </div></section>

    Note: If you want to red background color in section use class="bg-light-gray"   

    Footer Element

    In this section you can change your social media links and copyright text with your own name or company.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!-- Footer -->
    <div class="thm-bg-color-one copyright">
       <div class="container">
         <div class="row">
           <div class="col-md-12 text-center">
             <p class="mb-0">@Copyright 2020. ALL Rights Reserved</p>
           </div>
         </div>
       </div>
     </div>
     <!-- /Footer -->

    Note: You can see the complete list of font icons here!



    Email

    You can also use built-in icon packs in this template, all icons use CSS Font feature, so you can edit and give color to the icon easily. For referrences to easier you use all icons you can visit here!


    CSS Structure

    I'm using one main CSS file (assets/css/style.css), in this template which you are free to modify depending on the customization you require. Below are 10 additional CSS files:

    • bootstrap.min.css - This is a main stylesheet that required for basic template styling like grid, form, input and web elements.
    • font-awesome.css - CSS stylesheets for font icon packs.
    • animate.css - CSS stylesheets for animation.
    • slick.css - This stylesheet used for styling the Banner slideshow.
    • slick-theme.css - This stylesheet used for styling the slideshow.
    • flaticon.css.css - This stylesheet used for icons packs.
    • style.css - This stylesheet used for styling the Web Layout.

    The main CSS file (assets/css/style.css) contains all of the specific stylings for the page. The file was divided into several sessions as below:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    /*===========================
    =  Table of CSS
    1.General code
    1.1 Typography
    1.2 Space margins and padding
    1.3 Button
    1.4 Section-Colors-&-Backgrounds
    2.Homepages
    2.1 Navigation
    2.2 Banner
    2.3 About Us
    2.4 Our Services
    2.5 Our Work
    2.6 Why Choose Us / Testimonials
    2.7 Our Blog
    2.8 Our Team
    3.FAQs 
    4.Contact Us 
    5.Blog   
    6.Blog Details   
    7.404 
    9.About Us 
    9.Coming Soon 
    ===========================*/
    CSS styles for support all kinds of different screen sizes

    If you would like to edit a specific section of the site, simply find the appropriate label in the .css file, and then scroll down until you find the appropriate style that needs to be edited.


  • Mannat

    • HTML Structure

    This template uses the 1170 grid system (12 columns) which will help streamline any customization you wish to make. If you're unfamiliar with the 1170 grid system, be sure to read about it here!

    The main structure of this site is wrapped in a 'container' div. Inside of that div you will find each major section of the site given an appropritae grid size all equalling 12 columns in length.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <section class="section-bg section-padding">
       <div class="container">
          <!-- Section Title -->
          <div class="blog-tag text-center align-items-centerr">
             <div class="blog-tag-hadding">
                <span>----------------</span>
                <h3>-------------- </h3>
             </div>
          </div>
          <div class="row">
            ---------         
          </div>
       </div>
    </section>

    Note: If you want to add padding in section use class="section-padding" 80px padding top & 80px padding bottom added in section. You don't need padding remove class="section-padding".

    Site logo

    You can change the main site logo with change this code:

    ?
    1
    2
    3
    4
    5
    <div class="logo">
      <a href="index.html">
        <img src="assets/images/logo.png" class="image-fit" alt="logo">
      </a>
    </div> 

    Main Navigation

    You can change the main site navigation with change this code:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    <div class="navigation-wrapper">
          <div class="container">
             <div class="row">
                <div class="col-12">
                   <nav>
                      <div class="main-navigation">
                         <div class="logo"> <a href="index.html"><img src="assets/images/logo.png" class="image-fit" alt="logo"> </a> </div>
                         <div class="main-menu">
                            <ul class="custom-flex">
                               <li class="menu-item menu-item-has-children active">
                                  <a href="index.html">Home</a>
                                  <ul class="submenu custom">
                                     ----------
                                  </ul>
                               </li>
                               <li class="menu-item"> <a href="about.html">About</a> </li>
                              
                              --------------
                                
                               <li class="menu-item"> <a href="contact.html">Contact</a> </li>
                            </ul>
                         </div>
                      </div>
                   </nav>
                </div>
             </div>
          </div>
       </div>

    Section Heading

    Use this code for section heading.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
      <!-- Heading -->
        <section class="corona-count-sec section-padding bg-custom-white">
         <div class="container">
            <div class="blog-tag text-center align-items-center">
               <div class="blog-tag-hadding">
                  <span>BLOG</span>
                  <h3>Recent Blog</h3>
                  <div class="donotion-sec-img" style="margin-top: -28px;">
                     <img src="assets/images/new-folder/ddh.png" alt="img">
                  </div>
                  <p>Separated they live in. A small river named Duden flows by their place and supplies it with the <br>necessary regelialia. It is a paradisematic country</p>
               </div>
            </div>
          </div>
        </section>
     
    <!-- /Heading -->

    Section Background Color

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <section class="corona-count-sec section-padding bg-custom-white">
       <div class="container">
          <div class="blog-tag text-center align-items-center">
             <div class="blog-tag-hadding">
                <span>BLOG</span>
                <h3>Recent Blog</h3>
                <div class="donotion-sec-img" style="margin-top: -28px;">
                   <img src="assets/images/new-folder/ddh.png" alt="img">
                </div>
                <p>Separated they live in. A small river named Duden flows by their place and supplies it with the <br>necessary regelialia. It is a paradisematic country</p>
             </div>
          </div>
        </div>
      </section>
      

    Note: If you want to red background color in section use class="bg-light-gray"   


    Footer Element

    In this section you can change your social media links and copyright text with your own name or company.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <!-- Footer -->
        <section class="section-padding footer-sec pb-0">
          <div class="container">
            <div class="row text-center">
              <div class="col-lg-12">
                <div class="copyright">
                  <span>@Copyright 2021. All Right Reserved</span>
                </div>
              </div>
            </div>
          </div>
        </section>
    <!-- /Footer -->

    Note: You can see the complete list of font icons here!



    Email

    You can also use built-in icon packs in this template, all icons use CSS Font feature, so you can edit and give color to the icon easily. For referrences to easier you use all icons you can visit here!


    CSS Structure

    I'm using one main CSS file (assets/css/style.css), in this template which you are free to modify depending on the customization you require. Below are 10 additional CSS files:

    • bootstrap.min.css - This is a main stylesheet that required for basic template styling like grid, form, input and web elements.
    • font-awesome.css - CSS stylesheets for font icon packs.
    • animate.css - CSS stylesheets for animation.
    • slick.css - This stylesheet used for styling the Banner slideshow.
    • slick-theme.css - This stylesheet used for styling the slideshow.
    • flaticon.css.css - This stylesheet used for icons packs.
    • style.css - This stylesheet used for styling the Web Layout.

    The main CSS file (assets/css/style.css) contains all of the specific stylings for the page. The file was divided into several sessions as below:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    /*===========================
    =  Table of CSS
    1.General code
    1.1 Typography
    1.2 Space margins and padding
    1.3 Button
    1.4 Section-Colors-&-Backgrounds
    2.Homepages
    2.1 Navigation
    2.2 Banner
    2.3 About Us
    2.4 Our Services
    2.5 Our Work
    2.6 Why Choose Us / Testimonials
    2.7 Our Blog
    2.8 Our Team
    3.FAQs 
    4.Contact Us 
    5.Blog   
    6.Blog Details   
    7.404 
    9.About Us 
    9.Coming Soon 
    ===========================*/
    CSS styles for support all kinds of different screen sizes

    If you would like to edit a specific section of the site, simply find the appropriate label in the .css file, and then scroll down until you find the appropriate style that needs to be edited.


  • Dantadol

    • HTML Structure

    This template uses the 1170 grid system (12 columns) which will help streamline any customization you wish to make. If you're unfamiliar with the 1170 grid system, be sure to read about it here!

    The main structure of this site is wrapped in a 'container' div. Inside of that div you will find each major section of the site given an appropritae grid size all equalling 12 columns in length.

    ?
    1
    2
    3
    4
    5
    6
    7
    <section class="section-padding section about-section">
      <div class="container">
        <div class="row align-items-center">
         --------------
        </div>
      </div>
    </section>

    Note: If you want to add padding in section use class="section-padding" 80px padding top & 80px padding bottom added in section. You don't need padding remove class="section-padding".

    Site logo

    You can change the main site logo with change this code:

    ?
    1
    2
    3
    4
    5
    <div class="logo">
      <a href="index.html" class="d-flex h-100">
        <img src="assets/images/logo.webp" alt="logo" class="image-fit-contain">
      </a>
    </div>

    Main Navigation

    You can change the main site navigation with change this code:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    <nav class="navigation">
      <ul class="main-menu">
        <li class="menu-item">
          <a href="index.html" class="active">Home</a>
        </li>
        <li class="menu-item menu-item-has-children">
          <a href="#">Doctor</a>
          <ul class="sub-menu">
            <li class="menu-item">
              <a href="doctor-details.html">Doctor Details</a>
            </li>
          </ul>
        </li>
        <li class="menu-item menu-item-has-children">
          <a href="#">Blog</a>
            <ul class="sub-menu">
              <li class="menu-item menu-item-has-children">
                <a href="#">Blog Grid</a>
              </li>
            </ul>
          </li>
          <li class="menu-item">
            <a href="contact.html">Contact</a>
          </li>
        </ul>
        <div class="book-now-btn d-flex align-items-center">
          <a href="contact.html" class="btn btn-primary1">Login <i class="fa fa-long-arrow-right"></i></a>
        </div>
      </nav>

    Section Heading

    Use this code for section heading.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <!-- Heading -->
    <section class="section-padding section about-section">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-md-6">
            <div class="about-thumb">
              <img src="assets/images/about/about1.png" alt="img" width="480" height="691">
              <div class="shape-one layer-style mousemove-layer" data-speed="2.2" style="transform: translateX(6.176px) translateY(-32.166px);">
                <img src="assets/images/about/1.png" alt="img" width="593" height="617">
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- /Heading -->

    Section Background Color

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <section class="section-padding">
    <div class="container">
    <div class="row justify-content-center text-center">
    <div class="col-lg-5">
    <div class="section-hedding">
    <h6 class="small-hedding m-0">Services</h6>
    <p>Lorem Ipsum is simply dummy text of the printing and typesting industr.</p>
    </div>
    </div>
    </div>
    </div></section>

    Note: If you want to red background color in section use class="bg-light-gray"   


    Footer Element

    In this section you can change your social media links and copyright text with your own name or company.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <!-- Footer -->
    <div class="copyright-wrap">
        <div class="container">
          <div class="row align-items-center">
            <div class="col-lg-4">
              <div class="copy-text text-center">
                Copyright © <span id="year"></span> Dantadol. All rights reserved.      
              </div>
            </div>
            <div class="col-lg-4"></div>
            <div class="col-lg-4 text-center">
              <div class="footer-social">                                   
                <a href="#"><i class="fab fa-facebook-f"></i></a>
                <a href="#"><i class="fab fa-instagram"></i></a>
                <a href="#"><i class="fab fa-twitter"></i></a>
              </div>
            </div>
          </div>
        </div>
      </div>
    <!-- /Footer -->

    Note: You can see the complete list of font icons here!



    Email

    You can also use built-in icon packs in this template, all icons use CSS Font feature, so you can edit and give color to the icon easily. For referrences to easier you use all icons you can visit here!


    CSS Structure

    I'm using one main CSS file (assets/css/style.css), in this template which you are free to modify depending on the customization you require. Below are 10 additional CSS files:

    • bootstrap.min.css - This is a main stylesheet that required for basic template styling like grid, form, input and web elements.
    • font-awesome.css - CSS stylesheets for font icon packs.
    • animate.css - CSS stylesheets for animation.
    • slick.css - This stylesheet used for styling the Banner slideshow.
    • slick-theme.css - This stylesheet used for styling the slideshow.
    • flaticon.css.css - This stylesheet used for icons packs.
    • style.css - This stylesheet used for styling the Web Layout.

    The main CSS file (assets/css/style.css) contains all of the specific stylings for the page. The file was divided into several sessions as below:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    /*===========================
    =  Table of CSS
    1.General code
    1.1 Typography
    1.2 Space margins and padding
    1.3 Button
    1.4 Section-Colors-&-Backgrounds
    2.Homepages
    2.1 Navigation
    2.2 Banner
    2.3 About Us
    2.4 Our Services
    2.5 Our Work
    2.6 Why Choose Us / Testimonials
    2.7 Our Blog
    2.8 Our Team
    3.FAQs 
    4.Contact Us 
    5.Blog   
    6.Blog Details   
    7.404 
    9.About Us 
    9.Coming Soon 
    ===========================*/
    CSS styles for support all kinds of different screen sizes

    If you would like to edit a specific section of the site, simply find the appropriate label in the .css file, and then scroll down until you find the appropriate style that needs to be edited.


  • Universo

    • HTML Structure

    This template uses the 1170 grid system (12 columns) which will help streamline any customization you wish to make. If you're unfamiliar with the 1170 grid system, be sure to read about it here!

    The main structure of this site is wrapped in a 'container' div. Inside of that div you will find each major section of the site given an appropritae grid size all equalling 12 columns in length.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <section class="section-padding event-sec bg-light-white">
        <div class="container">
            <div class="section-header">
                <div class="section-heading">
                </div>
            </div>
           <div class="row">
            <h6 class="d-none">1</h6>
            <div class="col-12">
            </div>
          </div>
        </div>
    </section>

    Note: If you want to add padding in section use class="section-padding" 80px padding top & 80px padding bottom added in section. You don't need padding remove class="section-padding".

    Site logo

    You can change the main site logo with change this code:

    ?
    1
    <div class="logo"> <a href="index.html"> <img src="https://placehold.co/185x56" class="image-fit" alt="logo"> </a> </div>

    Main Navigation

    You can change the main site navigation with change this code:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div class="main-navigation">
     <nav>
     <ul class="custom-flex">
         <li class="active"><a href="#">Home</a></li>
         ....
         <li ><a href="#">About</a></li>
     </ul>
    </nav>
    </div>

    Section Heading

    Use this code for section heading.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
                  <!-- Heading -->
        <div class="section-header text-center">
      <div class="section-heading">
        <h3 class="text-custom-black">Our Services</h3>
        <div class="section-description">
          <p class="text-light-dark">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
        </div>
      </div>
    </div>
                  <!-- /Heading -->

    Section Background Color

    ?
    1
    2
    3
    4
    5
    <section class="bg-light-white">
        <div class="container">  
            ......
        </div>
    </section>

    Note: If you want to red background color in section use class="bg-light-white"   


    Footer Element

    In this section you can change your social media links and copyright text with your own name or company.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <!-- Footer -->
    <div class="copyright">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <p class="text-custom-white">© Company name - 2020 | All Right Reserved. <a href="#" class="text-custom-white">Designed By Company name</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    <!-- /Footer -->

    Note: You can see the complete list of font icons here!



    Email

    You can also use built-in icon packs in this template, all icons use CSS Font feature, so you can edit and give color to the icon easily. For referrences to easier you use all icons you can visit here!


    CSS Structure

    I'm using one main CSS file (assets/css/style.css), in this template which you are free to modify depending on the customization you require. Below are 10 additional CSS files:

    • bootstrap.min.css - This is a main stylesheet that required for basic template styling like grid, form, input and web elements.
    • font-awesome.css - CSS stylesheets for font icon packs.
    • flaticon.css - CSS stylesheets for font icon packs.
    • slick.css - This stylesheet used for styling the Banner slideshow.
    • ion.rangeSlider.min.css - This stylesheet used for styling the Slider slideshow.
    • datepicker.css - CSS stylesheets for font icon packs.
    • magnific-popup.css - This stylesheet used for styling the Video Popup.
    • nice-select.css - CSS stylesheets for font icon packs.
    • style.css - This stylesheet used for styling the Web Layout.
    • responsive.css - This stylesheet used for styling the Web Layout.

    The main CSS file (assets/css/style.css) contains all of the specific stylings for the page. The file was divided into several sessions as below:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
        /*===========================
         =  Table of CSS
            1.General code
        1.1 Typography
        1.2 Space margins and padding
        1.3 forms
        1.4 Buttons
        1.5 Section-Colors-&-Backgrounds
        1.6 Modal & popups
        1.7 Accordion
    2.Homepages
        2.1 Navigation
        2.2 Slider
        2.3 Search
        2.4 About Us
        2.5 Our Work
        2.6 Our Services
        2.7 Best Car
        2.8 Our Team
        2.9 Our Blog
        2.10 Trending Cars
        2.11 Footer
        2.12 Copyright
    3.Blog
    4.Blog Details
    5.Listing
    6.Listing Detail
    7.Booking
    8.About Us
    9.404
    10.Coming Soon
    11.Contact Us
    12.FAQs
    13.Gallery
        ===========================*/
                         
                        CSS styles for support all kinds of different screen sizes

    If you would like to edit a specific section of the site, simply find the appropriate label in the .css file, and then scroll down until you find the appropriate style that needs to be edited.


  • Kindness

    • HTML Structure

    This template uses the 1170 grid system (12 columns) which will help streamline any customization you wish to make. If you're unfamiliar with the 1170 grid system, be sure to read about it here!

    The main structure of this site is wrapped in a 'container' div. Inside of that div you will find each major section of the site given an appropritae grid size all equalling 12 columns in length.

    ?
    1
    2
    3
    4
    5
    6
    7
    <section class="section-padding pt-0">
      <div class="container">
        <div class="row justify-content-center">
        -------------------------------------------
        </div>
      </div>
    </section>

    Note: If you want to add padding in section use class="section-padding" 80px padding top & 80px padding bottom added in section. You don't need padding remove class="section-padding".

    Site logo

    You can change the main site logo with change this code:

    ?
    1
    2
    3
    <div class="logo">
      <a href="index.html"><img src="http://placehold.co/180x45" alt="img"></a>
    </div>

    Main Navigation

    You can change the main site navigation with change this code:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <nav class="navigation">
      <ul class="main-menu">
        <li class="menu-item menu-item-has-children">
          <a href="#" class="active-one">Home</a>
          <ul class="sub-menu">
            <li class="menu-item">
              <a href="index.html">Homepage v1</a>
            </li>
          </ul>
        </li>
        <li class="menu-item">
          <a href="about.html">About</a>
        </li>
      </ul>
    </nav>

    Section Heading

    About Golfing

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    Use this code for section heading.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <!-- Heading -->
      <section class="section-padding">
      <div class="container">
        <div class="row justify-content-center text-center">
          <div class="col-lg-7">
            <div class="pricing-heding">
              <h2 class="page-heading">About Golfing</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- /Heading -->

    Section Background Color

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <section class="section-padding">
    <div class="container">
    <div class="row justify-content-center text-center">
    <div class="col-lg-5">
    <div class="section-hedding">
    <h6 class="small-hedding m-0">Services</h6>
    <p>Lorem Ipsum is simply dummy text of the printing and typesting industr.</p>
    </div>
    </div>
    </div>
    </div></section>

    Note: If you want to red background color in section use class="bg-light-gray"   


    Footer Element

    In this section you can change your social media links and copyright text with your own name or company.

    ?
    1
    2
    3
    4
    5
        <!-- Footer -->
    <div class="copyright">
          <p>@Copyright 2021. All Right Reserved</p>
        </div>
        <!-- /Footer -->

    Note: You can see the complete list of font icons here!



    Email

    You can also use built-in icon packs in this template, all icons use CSS Font feature, so you can edit and give color to the icon easily. For referrences to easier you use all icons you can visit here!


    CSS Structure

    I'm using one main CSS file (assets/css/style.css), in this template which you are free to modify depending on the customization you require. Below are 10 additional CSS files:

    • bootstrap.min.css - This is a main stylesheet that required for basic template styling like grid, form, input and web elements.
    • font-awesome.css - CSS stylesheets for font icon packs.
    • animate.css - CSS stylesheets for animation.
    • slick.css - This stylesheet used for styling the Banner slideshow.
    • slick-theme.css - This stylesheet used for styling the slideshow.
    • flaticon.css.css - This stylesheet used for icons packs.
    • style.css - This stylesheet used for styling the Web Layout.

    The main CSS file (assets/css/style.css) contains all of the specific stylings for the page. The file was divided into several sessions as below:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    /*===========================
    =  Table of CSS
    1.General code
    1.1 Typography
    1.2 Space margins and padding
    1.3 Button
    1.4 Section-Colors-&-Backgrounds
    2.Homepages
    2.1 Navigation
    2.2 Banner
    2.3 About Us
    2.4 Our Services
    2.5 Our Work
    2.6 Why Choose Us / Testimonials
    2.7 Our Blog
    2.8 Our Team
    3.FAQs 
    4.Contact Us 
    5.Blog   
    6.Blog Details   
    7.404 
    9.About Us 
    9.Coming Soon 
    ===========================*/
    CSS styles for support all kinds of different screen sizes

    If you would like to edit a specific section of the site, simply find the appropriate label in the .css file, and then scroll down until you find the appropriate style that needs to be edited.


  • Kiddos

    • HTML Structure

    This template uses the 100% grid system (12 columns) which will help streamline any customization you wish to make. If you're unfamiliar with the 100% grid system, be sure to read about it here!

    The main structure of this site is wrapped in a 'container-fluid' div. Inside of that div you will find each major section of the site given an appropritae grid size all equalling 12 columns in length.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    <section class="section-padding">
        <div class="container-fluid">
            <div class="section-header">
            </div>
            <div class="row">
            </div>
        </div>
    </section>

    Note: If you want to add padding in section use class="section-padding" 80px padding top & 80px padding bottom added in section. You don't need padding remove class="section-padding".

    Site logo

    You can change the main site logo with change this code:

    ?
    1
    2
    3
    4
    5
    <div class="logo">
        <a href="index.html">
            <img src="assets/images/logo.png" class="image-fit" alt="logo">
        </a>
    </div>

    Main Navigation

    You can change the main site navigation with change this code:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
      <div class="main_navigation">
         <div class="container-fluid">
             <div class="nav_inner">
                 <ul class="main-menu">
                     <li class="menu-item active"><a href="#">Home</a></li>
                     ....
                     <li class="menu-item"><a href="#">About</a></li>
                 </ul>
             </div>
         </div>
    </div>

    Section Heading

    Use this code for section heading.

    ?
    1
    2
    3
    4
    5
    6
    <!-- Heading -->
    <div class="section-header">
        <h3 class="title">Fruits</h3>
        <p class="text">Lorem ipsum dolor sit amet, consectetur.</p>
    </div>
    <!-- /Heading -->

    Section Background Color

    ?
    1
    2
    3
    4
    5
    <section class="thm-bg-color-one">
        <div class="container-fluid">  
            ......
        </div>
    </section>

    Note: If you want to green background color in section use class="thm-bg-color-one"   


    Footer Element

    In this section you can change your social media links and copyright text with your own name or company.

    ?
    1
    2
    3
    4
    5
    6
    7
    <!-- Copyright Start -->
    <div class="copyright">
        <div class="container-fluid">
            <p class="mb-0">@Copyright 2022. <a href="#" class="thm-color-one">Website.com</a> All Rights Reserved</p>
        </div>
    </div>
    <!-- Copyright End -->

    Note: You can see the complete list of font icons here!



    Email

    You can also use built-in icon packs in this template, all icons use CSS Font feature, so you can edit and give color to the icon easily. For referrences to easier you use all icons you can visit here!


    CSS Structure

    I'm using one main CSS file (assets/css/style.css), in this template which you are free to modify depending on the customization you require. Below are 10 additional CSS files:

    • bootstrap.min.css - This is a main stylesheet that required for basic template styling like grid, form, input and web elements.
    • font-awesome.min.css - CSS stylesheets for font icon packs.
    • magnific-popup.css - CSS stylesheets for Image Popup & Video Popup design.
    • slick.css - This stylesheet used for styling the Banner slideshow.
    • leaflet.css - This stylesheet used for styling the Map Layout.
    • style.css - This stylesheet used for styling the Web Layout.
    • responsive.css - This stylesheet used for styling the Web Layout.

    The main CSS file (assets/css/style.css) contains all of the specific stylings for the page. The file was divided into several sessions as below:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    /*-----------------------------------------------------------------------------------
        Template Name: Kiddos
        Description: Kiddos - Smart Toys Store HTML Template
        Author: Codezion
        Author URI: https://www.templatemonster.com/authors/codezion/
        Version: 1.0
     
    -----------------------------------------------------------------------------------
         
        >>> TABLE OF CONTENTS:
        =======================
     
        01. Common/Reusable CSS
            1.1 - Animations
            1.2 - General
            1.3 - Section Title
            1.4 - Video Button
            1.5 - Slick Arrows
            1.6 - Slick Dots
            1.7 - Typography
            1.8 - Tables
            1.9 - Forms
            1.10 - Forms
            1.11 - Buttons
            1.12 - Pagination
            1.13 - Colors
            1.14 - Accordion
            1.15 - Tabs
        02. Homepage
            2.1 - Preloader
            2.2 - Header
            2.3 - Banner
            2.4 - How It Works
            2.5 - Fruits Slider
            2.6 - Vegetables Slider
            2.7 - Discount Boxes
            2.8 - Best Offers
            2.9 - Drinks Slider
            2.10 - Bakery Slider
            2.11 - Testimonials
            2.12 - Newsletter
            2.13 - Footer
            2.14 - Copyright
            2.15 - Back To Top
        03. About Us   
        04. Shop   
        05. Shop Details   
        06. Wishlist   
        07. Cart   
        08. Checkout   
        09. Payment   
        10. My Account   
        11. Order List   
        12. Order Details   
        13. Blog   
        14. FAQ's 
        15. Contact   
        16. Error 404  
        17. Privacy Policy  
         
    -----------------------------------------------------------------------------------*/
    CSS styles for support all kinds of different screen sizes

    If you would like to edit a specific section of the site, simply find the appropriate label in the .css file, and then scroll down until you find the appropriate style that needs to be edited.


  • College Era

    • HTML Structure

    This template uses the 100% grid system (12 columns) which will help streamline any customization you wish to make. If you're unfamiliar with the 100% grid system, be sure to read about it here!

    The main structure of this site is wrapped in a 'container-fluid' div. Inside of that div you will find each major section of the site given an appropritae grid size all equalling 12 columns in length.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <section class="section-padding">
        <div class="container">
            <div class="section-header">
                <h3 class="title">Popular <span>Universities</span></h3>
                <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
            </div>
            <div class="row"></div>
        </div>
    </section>

    Note: If you want to add padding in section use class="section-padding" 80px padding top & 80px padding bottom added in section. You don't need padding remove class="section-padding".

    Site logo

    You can change the main site logo with change this code:

    ?
    1
    2
    3
    4
    5
    6
    <div class="logo">
         <a href="index.html" class="d-flex h-100">
             <img src="assets/images/logo.png" alt="logo" class="image-fit-contain">
             <img src="assets/images/logo_two.png" alt="logo" class="image-fit-contain">
         </a>
    </div>

    Main Navigation

    You can change the main site navigation with change this code:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
      <nav class="navigation">
       <ul class="main-menu">
          <li class="menu-item">
             <a href="index.html" class="active">Home</a>
          </li>
          <li class="menu-item menu-item-has-children">
             <a href="#">University</a>
             <ul class="sub-menu">
                <li class="menu-item menu-item-has-children">
                   <a href="#">University Grid</a>
                   <ul class="sub-menu">
                      <li class="menu-item">
                         <a href="listing-grid.html">Full Width</a>
                      </li>
                   </ul>
                </li>
                <li class="menu-item">
                   <a href="listing-details.html">University Details</a>
                </li>
             </ul>
          </li>          
          <li class="menu-item">
             <a href="contact.html">Contact</a>
          </li>
       </ul>
    </nav>

    Section Heading

    Use this code for section heading.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <section class="section-padding">
        <div class="container">
            <div class="section-header">
                <h3 class="title">Popular <span>Universities</span></h3>
                <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
            </div>
            <div class="row"></div>
        </div>
    </section>

    Section Background Color

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <section class="section section-bg no-overlay">
        <div class="container">
            <div class="section-header">
                <h3 class="title">What Clients <span>say</span></h3>
                <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
            </div>
            <div class="row testimonial_slider"></div>
        </div>
    </section>

    Note: If you want to green background color in section use class="thm-bg-color-one"   


    Footer Element

    In this section you can change your social media links and copyright text with your own name or company.

    ?
    1
    2
    3
    4
    5
          <!-- Copyright Start -->
          <div class="copyright">
       <p class="mb-0">Copyright <a href="#" class="text-white fw-500">www.example.com</a> <span id="year">2025</span>. All Right Reserved</p>
    </div>
          <!-- Copyright End -->

    Note: You can see the complete list of font icons here!



    Email

    You can also use built-in icon packs in this template, all icons use CSS Font feature, so you can edit and give color to the icon easily. For referrences to easier you use all icons you can visit here!


    CSS Structure

    I'm using one main CSS file (assets/css/style.css), in this template which you are free to modify depending on the customization you require. Below are 10 additional CSS files:

    • bootstrap.min.css - This is a main stylesheet that required for basic template styling like grid, form, input and web elements.
    • font-awesome.min.css - CSS stylesheets for font icon packs.
    • bootstrap-icons.css - CSS stylesheets for font icon packs.
    • slick.css - This stylesheet used for styling the Banner slideshow.
    • nice-select.css - This stylesheet used for styling the Select Tag.
    • style.css - This stylesheet used for styling the Web Layout.
    • responsive.css - This stylesheet used for styling the Web Layout.

    The main CSS file (assets/css/style.css) contains all of the specific stylings for the page. The file was divided into several sessions as below:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    /*-----------------------------------------------------------------------------------
        Template Name: College Era
        Description: College Era- School, Collages Directory HTML Template
        Author: Codezion
        Author URI: https://www.templatemonster.com/authors/codezion/
        Version: 1.0
    -----------------------------------------------------------------------------------
         
        >>> TABLE OF CONTENTS:
        =======================
     
        01. Common/Reusable CSS
            1.1 - Animations
            1.2 - General
            1.3 - Section Title
            1.4 - Video Button
            1.5 - Slick Arrows
            1.6 - Slick Dots
            1.7 - Typography
            1.8 - Tables
            1.9 - Modals
            1.10 - Forms
            1.11 - Buttons
            1.12 - Pagination
            1.13 - Colors
            1.14 - Accordion
        02. Homepage
            2.1 - Header
            2.2 - Single Banner
            2.3 - Explore
            2.4 - Service
            2.5 - Listing
            2.6 - How It Works
            2.7 - Testimonials
            2.8 - Blog
            2.9 - Newsletter
            2.10 - Footer
            2.11 - Copyright
            2.12 - Back To Top
        03. Explore
        04. Listings
        05. Blog
        06. Service
        07. Login
        08. SignUp
        09. Contact
         
    -----------------------------------------------------------------------------------*/
    CSS styles for support all kinds of different screen sizes

    If you would like to edit a specific section of the site, simply find the appropriate label in the .css file, and then scroll down until you find the appropriate style that needs to be edited.


  • Softnovo_it

    • Html Structure

    If you would like to edit the layout of any elements in whole template, you would do the following:

    Open any '.html' or, '.css', so that is extremely easy to change any html markup and css attributes. Simply find the related and commented heading in the html or, css file and make your magic.


    html_layout

    html_layout

    Css Structure

    "Fit2Fine" using the following CSS files:

    css
    • bootstrap.min.css - grid structure based on Bootstrap Framework
    • style.css - main Template stylesheet
    • responsive.css - responsive Template stylesheet
    • font-awesome.min.css - The css file for font-awesome icons. To see all the available icons and instructions on how to use them
    • flaticon.css - The css file for flaticon icons. To see all the available icons and instructions on how to use them
    • bootstrap-icons.css - The css file for bootstrap icons. To see all the available icons and instructions on how to use them
    • slick.css - slick stylesheet
    • magnific-popup.css - Image and Video popup stylesheet
    • fullcalendar.css - Schedule Calendar stylesheet

    css_layout

    css_layout

    css_layout

  • Mounto

    • Html Structure

    This template uses the 1170 grid system (12 columns) which will help streamline any customization you wish to make. If you're unfamiliar with the 1170 grid system, be sure to read about it here!

    The main structure of this site is wrapped in a 'container' div. Inside of that div you will find each major section of the site given an appropritae grid size all equalling 12 columns in length.

    ?
    1
    2
    3
    4
    5
    6
    7
    <section class="section-padding">
       <div class="container">
          <div class="row">
             -------------------
          </div>
       </div>
     </section>

    Note: If you want to add padding in section use class="section-padding" 80px padding top & 80px padding bottom added in section. You don't need padding remove class="section-padding".

    Site logo

    You can change the main site logo with change this code:

    ?
    1
    2
    3
    4
    5
    <div class="logo">
      <a href="index.html" class="d-flex h-100">
        <img src="assets/images/logo-1.png" alt="logo" class="image-fit-contain">
      </a>
    </div> 

    Main Navigation

    You can change the main site navigation with change this code:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <div class="navigation-warpper">
      <nav class="navigation">
       <ul class="main-menu">
        <li class="menu-item menu-item-has-children">
         <a href="#" class="active">Home</a>
           <ul class="sub-menu">
            <li class="menu-item"><a href="index.html">Home Page One</a></li>
           </ul>
        </li>
        <li class="menu-item"><a href="about.html">About</a></li>
        <li class="menu-item"><a href="package.html">Pachage</a></li>          
        <li class="menu-item"><a href="contact-us.html">Contact</a></li>
      </ul>
      </nav>  
    </div>

    Section Heading

    Use this code for section heading.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <!-- Heading -->
    <section class="section-padding">
          <div class="container">
             <div class="row">
                <div class="col-lg-7">
                   <div class="section-hedding">
                      <h3>Incredible Sightseeing And Interesting Exploration FOr You</h3>
                      <p>Lorem Ipsum is simply dummy text of the printing and typesting<br> industry. Lorem Ipsum is simply dummy text.</p>
                   </div>
                </div>
             </div>
             <!--  -->
          </div>
     </section>
     <!-- /Heading -->

    Section Background Color

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <section class="section-padding">
    <div class="container">
    <div class="row justify-content-center text-center">
    <div class="col-lg-5">
    <div class="section-hedding">
    <h6 class="small-hedding m-0">Services</h6>
    <p>Lorem Ipsum is simply dummy text of the printing and typesting industr.</p>
    </div>
    </div>
    </div>
    </div></section>

    Note: If you want to red background color in section use class="bg-light-gray"   


    Footer Element

    In this section you can change your social media links and copyright text with your own name or company.

    ?
    1
    2
    3
    <!-- Footer -->
    <div class="copyright">@Copyright 2021. All Right Reserved</div>
    <!-- /Footer -->

    Note: You can see the complete list of font icons here!



    Email

    You can also use built-in icon packs in this template, all icons use CSS Font feature, so you can edit and give color to the icon easily. For referrences to easier you use all icons you can visit here!


    CSS Structure

    I'm using one main CSS file (assets/css/style.css), in this template which you are free to modify depending on the customization you require. Below are 10 additional CSS files:

    • bootstrap.min.css - This is a main stylesheet that required for basic template styling like grid, form, input and web elements.
    • font-awesome.css - CSS stylesheets for font icon packs.
    • animate.css - CSS stylesheets for animation.
    • slick.css - This stylesheet used for styling the Banner slideshow.
    • slick-theme.css - This stylesheet used for styling the slideshow.
    • flaticon.css.css - This stylesheet used for icons packs.
    • style.css - This stylesheet used for styling the Web Layout.

    The main CSS file (assets/css/style.css) contains all of the specific stylings for the page. The file was divided into several sessions as below:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    /*===========================
    =  Table of CSS
    1.General code
    1.1 Typography
    1.2 Space margins and padding
    1.3 Button
    1.4 Section-Colors-&-Backgrounds
    2.Homepages
    2.1 Navigation
    2.2 Banner
    2.3 About Us
    2.4 Our Services
    2.5 Our Work
    2.6 Why Choose Us / Testimonials
    2.7 Our Blog
    2.8 Our Team
    3.FAQs 
    4.Contact Us 
    5.Blog   
    6.Blog Details   
    7.404 
    9.About Us 
    9.Coming Soon 
    ===========================*/
    CSS styles for support all kinds of different screen sizes

    If you would like to edit a specific section of the site, simply find the appropriate label in the .css file, and then scroll down until you find the appropriate style that needs to be edited.


  • Sheworld

    • Html Structure

    This template uses the 1170 grid system (12 columns) which will help streamline any customization you wish to make. If you're unfamiliar with the 1170 grid system, be sure to read about it here!

    The main structure of this site is wrapped in a 'container' div. Inside of that div you will find each major section of the site given an appropritae grid size all equalling 12 columns in length.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <section class="section-padding">
      <div class="container">
        <div class="row justify-content-center text-center">
          <div class="col-lg-4">
            <div class="section-hedding">
              <h3>Our Resources</h3>
            </div>
          </div>
        </div>
        <div class="row justify-content-center">
       --------------
        </div>
      </div>
    </section>

    Note: If you want to add padding in section use class="section-padding" 80px padding top & 80px padding bottom added in section. You don't need padding remove class="section-padding".

    Site logo

    You can change the main site logo with change this code:

    ?
    1
    2
    3
    <div class="logo">
      <a href="index.html"><img src="assets/images/logo.png" alt="img"></a>
    </div>

    Main Navigation

    You can change the main site navigation with change this code:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <nav class="navigation">
      <ul class="main-menu">
        <li class="menu-item menu-item-has-children">
          <a href="#" class="active">Home</a>
          <ul class="sub-menu">
            <li class="menu-item"><a href="index.html">Home Page One</a></li>
          </ul>
        </li>
        <li class="menu-item"><a href="about.html">About</a></li>
          <li class="menu-item"><a href="product.html">Product</a></li>
      </ul>
    </nav>

    Section Heading

    About Sheworld

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    Use this code for section heading.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <!-- Heading -->
      <section class="section-padding">
      <div class="container">
        <div class="row justify-content-center text-center">
          <div class="col-lg-4">
            <div class="section-hedding">
              <h3>Our Resources</h3>
            </div>
          </div>
        </div>
        <div class="row justify-content-center">
       --------------
        </div>
      </div>
    </section>
    <!-- /Heading -->

    Section Background Color

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <section class="section-padding">
    <div class="container">
    <div class="row justify-content-center text-center">
    <div class="col-lg-5">
    <div class="section-hedding">
    <h6 class="small-hedding m-0">Services</h6>
    <p>Lorem Ipsum is simply dummy text of the printing and typesting industr.</p>
    </div>
    </div>
    </div>
    </div></section>

    Note: If you want to red background color in section use class="bg-light-gray"   


    Footer Element

    In this section you can change your social media links and copyright text with your own name or company.

    ?
    1
    2
    3
    4
    5
    <!-- Footer -->
    <div class="copyright">
       <p>@Copyright 2021. All Right Reserved</p>
     </div>
     <!-- /Footer -->

    Note: You can see the complete list of font icons here!



    Email

    You can also use built-in icon packs in this template, all icons use CSS Font feature, so you can edit and give color to the icon easily. For referrences to easier you use all icons you can visit here!


    CSS Structure

    I'm using one main CSS file (assets/css/style.css), in this template which you are free to modify depending on the customization you require. Below are 10 additional CSS files:

    • bootstrap.min.css - This is a main stylesheet that required for basic template styling like grid, form, input and web elements.
    • font-awesome.css - CSS stylesheets for font icon packs.
    • animate.css - CSS stylesheets for animation.
    • slick.css - This stylesheet used for styling the Banner slideshow.
    • slick-theme.css - This stylesheet used for styling the slideshow.
    • flaticon.css.css - This stylesheet used for icons packs.
    • style.css - This stylesheet used for styling the Web Layout.

    The main CSS file (assets/css/style.css) contains all of the specific stylings for the page. The file was divided into several sessions as below:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    /*===========================
    =  Table of CSS
    1.General code
    1.1 Typography
    1.2 Space margins and padding
    1.3 Button
    1.4 Section-Colors-&-Backgrounds
    2.Homepages
    2.1 Navigation
    2.2 Banner
    2.3 About Us
    2.4 Our Services
    2.5 Our Work
    2.6 Why Choose Us / Testimonials
    2.7 Our Blog
    2.8 Our Team
    3.FAQs 
    4.Contact Us 
    5.Blog   
    6.Blog Details   
    7.404 
    9.About Us 
    9.Coming Soon 
    ===========================*/
    CSS styles for support all kinds of different screen sizes

    If you would like to edit a specific section of the site, simply find the appropriate label in the .css file, and then scroll down until you find the appropriate style that needs to be edited.


  • Colab

    • HTML Structure

    This template uses the 1170 grid system (12 columns) which will help streamline any customization you wish to make. If you're unfamiliar with the 1170 grid system, be sure to read about it here!

    The main structure of this site is wrapped in a 'container' div. Inside of that div you will find each major section of the site given an appropritae grid size all equalling 12 columns in length.

    ?
    1
    2
    3
    4
    5
    6
    7
    <section class="section-padding bg-color">
       <div class="container">
          <div class="row justify-content-center">
            -----------------------------
          </div>
       </div>
    </section>

    Note: If you want to add padding in section use class="section-padding" 80px padding top & 80px padding bottom added in section. You don't need padding remove class="section-padding".

    Site logo

    You can change the main site logo with change this code:

    ?
    1
    2
    3
    4
    5
    <div class="logo">
      <a href="index.html" class="d-flex h-100">
       <img src="assets/images/logo.jpg" alt="logo" class="image-fit-contain">
      </a>
    </div>

    Main Navigation

    You can change the main site navigation with change this code:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <nav class="navigation">
      <ul class="main-menu">
        <li class="menu-item menu-item-has-children">
          <a href="index.html" class="active">Home
            <i class="fa fa-chevron-down"></i>
          </a>
          <ul class="sub-menu">
           <li class="menu-item"><a href="index.html">01 Home Page</a></li>
          </ul>
        </li>
         <li class="menu-item"><a href="about.html" class="padding-right">About</a></li>
         <li class="menu-item menu-item-has-children">
            <a href="#" class="padding-right-b">Blog<i class="fa fa-chevron-down"></i></a>
            <ul class="sub-menu">
             <li class="menu-item"><a href="blog-grid.html">Blog Grid</a></li>
            </ul>
         </li>
        </ul>
      </nav>

    Section Heading

    Use this code for section heading.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <!-- Heading -->
    <section class="section-padding bg-color">
          <div class="container">
             <div class="row text-center">
                <div class="col-lg-12 center-hedding">
                   <div class="service-hedding">
                      <h5>Services</h5>
                   </div>
                </div>
             </div>
             <div class="row justify-content-center">
                ----------
             </div>
          </div>
       </section>
     <!-- /Heading -->

    Section Background Color

    ?
    1
    2
    3
    4
    5
    <section class="section-padding bg-color">
         <div class="container">
           --------
         </div>
      </section>

    Note: If you want to red background color in section use class="bg-light-gray"   


    Footer Element

    In this section you can change your social media links and copyright text with your own name or company.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <!-- Footer -->
    <footer class="section-footer footer bg-color">
         <div class="container">
            <div class="row">
               <!-- item -->
               <div class="col-lg-4 col-sm-6">
                  -------------
               </div>
               <!-- item -->
               <div class="col-lg-2 col-sm-12">
                  ----------------
               </div>
               <!-- item -->
               <div class="col-lg-3 col-sm-6 ">
                  ----------
               </div>
               <!-- item -->
               <div class="col-lg-3 col-sm-6">
                 -------------
               </div>
            </div>
         </div>
      </footer>
    <!-- /Footer -->

    Note: You can see the complete list of font icons here!



    Email

    You can also use built-in icon packs in this template, all icons use CSS Font feature, so you can edit and give color to the icon easily. For referrences to easier you use all icons you can visit here!


    CSS Structure

    I'm using one main CSS file (assets/css/style.css), in this template which you are free to modify depending on the customization you require. Below are 10 additional CSS files:

    • bootstrap.min.css - This is a main stylesheet that required for basic template styling like grid, form, input and web elements.
    • font-awesome.css - CSS stylesheets for font icon packs.
    • animate.css - CSS stylesheets for animation.
    • slick.css - This stylesheet used for styling the Banner slideshow.
    • slick-theme.css - This stylesheet used for styling the slideshow.
    • flaticon.css.css - This stylesheet used for icons packs.
    • style.css - This stylesheet used for styling the Web Layout.

    The main CSS file (assets/css/style.css) contains all of the specific stylings for the page. The file was divided into several sessions as below:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    /*===========================
    =  Table of CSS
    1.General code
    1.1 Typography
    1.2 Space margins and padding
    1.3 Button
    1.4 Section-Colors-&-Backgrounds
    2.Homepages
    2.1 Navigation
    2.2 Banner
    2.3 About Us
    2.4 Our Services
    2.5 Our Work
    2.6 Why Choose Us / Testimonials
    2.7 Our Blog
    2.8 Our Team
    3.FAQs 
    4.Contact Us 
    5.Blog   
    6.Blog Details   
    7.404 
    9.About Us 
    9.Coming Soon 
    ===========================*/
    CSS styles for support all kinds of different screen sizes

    If you would like to edit a specific section of the site, simply find the appropriate label in the .css file, and then scroll down until you find the appropriate style that needs to be edited.


  • Animalhub

    • HTML Structure

    This template uses the 1170 grid system (12 columns) which will help streamline any customization you wish to make. If you're unfamiliar with the 1170 grid system, be sure to read about it here!

    The main structure of this site is wrapped in a 'container' div. Inside of that div you will find each major section of the site given an appropritae grid size all equalling 12 columns in length.

    ?
    1
    2
    3
    4
    5
    <section class="section-padding pb-0">
      <div class="container">
        ------------------
      </div>
    </section>

    Note: If you want to add padding in section use class="section-padding" 80px padding top & 80px padding bottom added in section. You don't need padding remove class="section-padding".

    Site logo

    You can change the main site logo with change this code:

    ?
    1
    2
    3
    4
    5
    <div class="logo">
      <a href="index.html" class="d-flex h-100">
        <img src="assets/images/logo-1.png" alt="logo" class="image-fit-contain">
      </a>
    </div> 

    Main Navigation

    You can change the main site navigation with change this code:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <nav class="navigation">
      <ul class="main-menu">
        <li class="menu-item menu-item-has-children">
          <a href="#" class="active">Home</a>
          <ul class="sub-menu">
            <li class="menu-item"><a href="index.html">Home Page One</a></li>
            <li class="menu-item"><a href="index-two.html">Home Page Two</a></li>
          </ul>
        </li>
        <li class="menu-item menu-item-has-children">
          <a href="#">Pages</a>
          <ul class="sub-menu">
            <li class="menu-item"><a href="our-tour.html">Our Tour</a></li>
            <li class="menu-item"><a href="error.html">Error 404</a></li>
          </ul>
        </li>
        <li class="menu-item">
          <a href="contact.html">Contact</a>
        </li>
      </ul>
    </nav>

    Section Heading

    Use this code for section heading.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <!-- Heading -->
    <section class="section-padding pb-0">
       <div class="container">
         <div class="row">
           <div class="col-lg-6 col-md-6">
             <div class="welcome-animal pr-5">
               <h3>WELCOME TO<br><span class="thm-color-one">ANIMALS</span></h3>
               <div class="line-hedding"></div>
             </div>
           </div>
         </div>
       </div>
     </section>
     <!-- /Heading -->

    Section Background Color

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <section class="section-padding">
    <div class="container">
    <div class="row justify-content-center text-center">
    <div class="col-lg-5">
    <div class="section-hedding">
    <h6 class="small-hedding m-0">Services</h6>
    <p>Lorem Ipsum is simply dummy text of the printing and typesting industr.</p>
    </div>
    </div>
    </div>
    </div></section>

    Note: If you want to red background color in section use class="bg-light-gray"   


    Footer Element

    In this section you can change your social media links and copyright text with your own name or company.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!-- Footer -->
    <div class="copyright">
      <div class="container">
        <div class="row">
          <div class="col-12 text-center">
            <p class="mb-0">@Copyright © <a href="#">Website</a> <span id="year"></span>. All Right Reserved</p>
          </div>
        </div>
      </div>
    </div>
    <!-- /Footer -->

    Note: You can see the complete list of font icons here!



    Email

    You can also use built-in icon packs in this template, all icons use CSS Font feature, so you can edit and give color to the icon easily. For referrences to easier you use all icons you can visit here!


    CSS Structure

    I'm using one main CSS file (assets/css/style.css), in this template which you are free to modify depending on the customization you require. Below are 10 additional CSS files:

    • bootstrap.min.css - This is a main stylesheet that required for basic template styling like grid, form, input and web elements.
    • font-awesome.css - CSS stylesheets for font icon packs.
    • animate.css - CSS stylesheets for animation.
    • slick.css - This stylesheet used for styling the Banner slideshow.
    • slick-theme.css - This stylesheet used for styling the slideshow.
    • flaticon.css.css - This stylesheet used for icons packs.
    • style.css - This stylesheet used for styling the Web Layout.

    The main CSS file (assets/css/style.css) contains all of the specific stylings for the page. The file was divided into several sessions as below:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    /*===========================
    =  Table of CSS
    1.General code
    1.1 Typography
    1.2 Space margins and padding
    1.3 Button
    1.4 Section-Colors-&-Backgrounds
    2.Homepages
    2.1 Navigation
    2.2 Banner
    2.3 About Us
    2.4 Our Services
    2.5 Our Work
    2.6 Why Choose Us / Testimonials
    2.7 Our Blog
    2.8 Our Team
    3.FAQs 
    4.Contact Us 
    5.Blog   
    6.Blog Details   
    7.404 
    9.About Us 
    9.Coming Soon 
    ===========================*/
    CSS styles for support all kinds of different screen sizes

    If you would like to edit a specific section of the site, simply find the appropriate label in the .css file, and then scroll down until you find the appropriate style that needs to be edited.


  • Carforme

    • HTML Structure

    This template uses the 1170 grid system (12 columns) which will help streamline any customization you wish to make. If you're unfamiliar with the 1170 grid system, be sure to read about it here!

    The main structure of this site is wrapped in a 'container' div. Inside of that div you will find each major section of the site given an appropritae grid size all equalling 12 columns in length.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <section class="section-padding event-sec bg-light-white">
        <div class="container">
            <div class="section-header">
                <div class="section-heading">
                </div>
            </div>
           <div class="row">
            <h6 class="d-none">1</h6>
            <div class="col-12">
            </div>
          </div>
        </div>
    </section>

    Note: If you want to add padding in section use class="section-padding" 80px padding top & 80px padding bottom added in section. You don't need padding remove class="section-padding".

    Site logo

    You can change the main site logo with change this code:

    ?
    1
    <div class="logo"> <a href="index.html"> <img src="https://placehold.co/185x56" class="image-fit" alt="logo"> </a> </div>

    Main Navigation

    You can change the main site navigation with change this code:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div class="main-navigation">
     <nav>
     <ul class="custom-flex">
         <li class="active"><a href="#">Home</a></li>
         ....
         <li ><a href="#">About</a></li>
     </ul>
    </nav>
    </div>

    Section Heading

    Use this code for section heading.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
                  <!-- Heading -->
        <div class="section-header text-center">
      <div class="section-heading">
        <h3 class="text-custom-black">Our Services</h3>
        <div class="section-description">
          <p class="text-light-dark">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
        </div>
      </div>
    </div>
                  <!-- /Heading -->

    Section Background Color

    ?
    1
    2
    3
    4
    5
    <section class="bg-light-white">
        <div class="container">  
            ......
        </div>
    </section>

    Note: If you want to red background color in section use class="bg-light-white"   


    Footer Element

    In this section you can change your social media links and copyright text with your own name or company.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <!-- Footer -->
    <div class="copyright">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <p class="text-custom-white">© Company name - 2020 | All Right Reserved. <a href="#" class="text-custom-white">Designed By Company name</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    <!-- /Footer -->

    Note: You can see the complete list of font icons here!



    FontAwesome Icon Packs

    You can also use built-in icon packs in this template, all icons use CSS Font feature, so you can edit and give color to the icon easily. For referrences to easier you use all icons you can visit here!


    CSS Structure

    I'm using one main CSS file (assets/css/style.css), in this template which you are free to modify depending on the customization you require. Below are 10 additional CSS files:

    • bootstrap.min.css - This is a main stylesheet that required for basic template styling like grid, form, input and web elements.
    • font-awesome.css - CSS stylesheets for font icon packs.
    • flaticon.css - CSS stylesheets for font icon packs.
    • slick.css - This stylesheet used for styling the Banner slideshow.
    • ion.rangeSlider.min.css - This stylesheet used for styling the Slider slideshow.
    • datepicker.css - CSS stylesheets for font icon packs.
    • magnific-popup.css - This stylesheet used for styling the Video Popup.
    • nice-select.css - CSS stylesheets for font icon packs.
    • style.css - This stylesheet used for styling the Web Layout.
    • responsive.css - This stylesheet used for styling the Web Layout.

    The main CSS file (assets/css/style.css) contains all of the specific stylings for the page. The file was divided into several sessions as below:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
        /*===========================
         =  Table of CSS
            1.General code
        1.1 Typography
        1.2 Space margins and padding
        1.3 forms
        1.4 Buttons
        1.5 Section-Colors-&-Backgrounds
        1.6 Modal & popups
        1.7 Accordion
    2.Homepages
        2.1 Navigation
        2.2 Slider
        2.3 Search
        2.4 About Us
        2.5 Our Work
        2.6 Our Services
        2.7 Best Car
        2.8 Our Team
        2.9 Our Blog
        2.10 Trending Cars
        2.11 Footer
        2.12 Copyright
    3.Blog
    4.Blog Details
    5.Listing
    6.Listing Detail
    7.Booking
    8.About Us
    9.404
    10.Coming Soon
    11.Contact Us
    12.FAQs
    13.Gallery
        ===========================*/
                         
                        CSS styles for support all kinds of different screen sizes

    If you would like to edit a specific section of the site, simply find the appropriate label in the .css file, and then scroll down until you find the appropriate style that needs to be edited.


  • Rodio

    • HTML Structure

    This template uses the 1170 grid system (12 columns) which will help streamline any customization you wish to make. If you're unfamiliar with the 1170 grid system, be sure to read about it here!

    The main structure of this site is wrapped in a 'container' div. Inside of that div you will find each major section of the site given an appropritae grid size all equalling 12 columns in length.

    ?
    1
    2
    3
    4
    5
    6
    7
    <section class="section-padding feature">
       <div class="container">
          <div class="row align-items-center justify-content-between section-padding">
          ----------------
          </div>
       </div>
    </section>

    Note: If you want to add padding in section use class="section-padding" 80px padding top & 80px padding bottom added in section. You don't need padding remove class="section-padding".

    Site logo

    You can change the main site logo with change this code:

    ?
    1
    2
    3
    4
    5
    <div class="logo">
      <a href="index.html" class="d-flex h-100">
      <img src="assets/images/logo.png" alt="logo" class="image-fit-contain">
      </a>
    </div>

    Main Navigation

    You can change the main site navigation with change this code:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <nav class="navigation">
      <ul class="main-menu">
        <li class="menu-item">
         <a href="index.html">Home</a>
        </li>
        <li class="menu-item">
         <a href="about.html">About US</a>
        </li>
          ----------
        <li class="menu-item">
         <a href="contact.html">Contact</a>
        </li>
      </ul>
    </nav>

    Section Heading

    Use this code for section heading.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    <!-- Heading -->
    <section class="section-padding aboout-main">
          <div class="container">
             <div class="row align-items-center justify-content-between about-slideerrr">
             </div>
          </div>
       </section>
     <!-- /Heading -->

    Section Background Color

    ?
    1
    2
    3
    4
    5
    6
    <section class="section-padding aboout-main">
         <div class="container">
            <div class="row align-items-center justify-content-between about-slideerrr">
            </div>
         </div>
      </section>

    Note: If you want to red background color in section use class="bg-light-gray"   


    Footer Element

    In this section you can change your social media links and copyright text with your own name or company.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!-- Footer -->
    <div class="thm-bg-color-one copyright">
         <div class="container">
            <div class="row">
               <div class="col-12 text-center">
                  <p class="mb-0">Copyright <a href="#">Website</a> <span id="year"></span>. All Right Reserved</p>
               </div>
            </div>
         </div>
      </div> 
    <!-- /Footer -->

    Note: You can see the complete list of font icons here!



    Email

    You can also use built-in icon packs in this template, all icons use CSS Font feature, so you can edit and give color to the icon easily. For referrences to easier you use all icons you can visit here!


    CSS Structure

    I'm using one main CSS file (assets/css/style.css), in this template which you are free to modify depending on the customization you require. Below are 10 additional CSS files:

    • bootstrap.min.css - This is a main stylesheet that required for basic template styling like grid, form, input and web elements.
    • font-awesome.css - CSS stylesheets for font icon packs.
    • animate.css - CSS stylesheets for animation.
    • slick.css - This stylesheet used for styling the Banner slideshow.
    • slick-theme.css - This stylesheet used for styling the slideshow.
    • flaticon.css.css - This stylesheet used for icons packs.
    • style.css - This stylesheet used for styling the Web Layout.

    The main CSS file (assets/css/style.css) contains all of the specific stylings for the page. The file was divided into several sessions as below:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    /*===========================
    =  Table of CSS
    1.General code
    1.1 Typography
    1.2 Space margins and padding
    1.3 Button
    1.4 Section-Colors-&-Backgrounds
    2.Homepages
    2.1 Navigation
    2.2 Banner
    2.3 About Us
    2.4 Our Services
    2.5 Our Work
    2.6 Why Choose Us / Testimonials
    2.7 Our Blog
    2.8 Our Team
    3.FAQs 
    4.Contact Us 
    5.Blog   
    6.Blog Details   
    7.404 
    9.About Us 
    9.Coming Soon 
    ===========================*/
    CSS styles for support all kinds of different screen sizes

    If you would like to edit a specific section of the site, simply find the appropriate label in the .css file, and then scroll down until you find the appropriate style that needs to be edited.


  • Cross

    • HTML Structure

    This template uses the 100% grid system (12 columns) which will help streamline any customization you wish to make. If you're unfamiliar with the 1140px grid system, be sure to read about it here!

    The main structure of this site is wrapped in a 'container' div. Inside of that div you will find each major section of the site given an appropritae grid size all equalling 12 columns in length.

    ?
    1
    2
    3
    4
    5
    6
    7
    <section class="section-padding section">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6"></div>
            </div>
        </div>
    </section>

    Note: If you want to add padding in section use class="section-padding" 80px padding top & 80px padding bottom added in section. You don't need padding remove class="section-padding".

    Site logo

    You can change the main site logo with change this code:

    ?
    1
    2
    3
    4
    5
    <div class="logo">
        <a href="index.html" class="d-flex h-100">
            <img src="assets/images/logo.png" alt="logo" class="image-fit-contain">
        </a>
    </div>

    Main Navigation

    You can change the main site navigation with change this code:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <nav class="navigation">
        <ul class="main-menu">
            <li class="menu-item menu-item-has-children">
                <a href="#" class="active">Home</a>
                <ul class="sub-menu">
                    <li class="menu-item">
                        <a href="index.html">Homepage v1</a>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>

    Section Heading

    Use this code for section heading.

    ?
    1
    2
    3
    4
    <div class="section-header text-center">
        <p class="section_count"></p>
        <h3 class="title">Our Services</h3>
    </div>

    Section Background Color

    ?
    1
    2
    3
    4
    5
      <section class="section-padding section thm-bg-light">
        <div class="container">      
         -------------
        </div>
    </section>

    Note: If you want to green background color in section use class="thm-bg-light"   


    Footer Element

    In this section you can change your social media links and copyright text with your own name or company.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!-- Copyright Start -->
     <div class="thm-bg-color-one copyright">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center">
                    <p class="mb-0">Copyright © <a href="#">Website</a> <span id="year">2025</span>.</p>
                </div>
            </div>
        </div>
    </div>
    <!-- Copyright End -->

    Note: You can see the complete list of font icons here!



    FontAwesome Icon Packs

    You can also use built-in icon packs in this template, all icons use CSS Font feature, so you can edit and give color to the icon easily. For referrences to easier you use all icons you can visit here!


    CSS Structure

    I'm using one main CSS file (assets/css/style.css), in this template which you are free to modify depending on the customization you require. Below are 10 additional CSS files:

    • bootstrap.min.css - This is a main stylesheet that required for basic template styling like grid, form, input and web elements.
    • font-awesome.min.css - CSS stylesheets for bootstrap font icon packs.
    • bootstrap-icons.css - CSS stylesheets for font icon packs.
    • flaticon.css - CSS stylesheets for icon packs.
    • slick.css - This stylesheet used for styling the Banner slideshow.
    • magnific-popup.css - This stylesheet used for styling the Image & Video Popup.
    • style.css - This stylesheet used for styling the Web Layout.
    • responsive.css - This stylesheet used for styling the Web Layout.

    The main CSS file (assets/css/style.css) contains all of the specific stylings for the page. The file was divided into several sessions as below:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    /*-----------------------------------------------------------------------------------
        Template Name: Cross Scissor
        Description: Cross Scissor - Hair Salon And Wig Store HTML5 Template
        Author: Codezion
        Author URI: https://www.templatemonster.com/authors/codezion/
        Version: 1.0
     
    -----------------------------------------------------------------------------------
         
        >>> TABLE OF CONTENTS:
        =======================
     
        01. Common/Reusable CSS
            1.1 - Animations
            1.2 - General
            1.3 - Section Title
            1.4 - Video Button
            1.5 - Slick Arrows
            1.6 - Slick Dots
            1.7 - Typography
            1.8 - Tables
            1.9 - Forms
            1.10 - Forms
            1.11 - Buttons
            1.12 - Pagination
            1.13 - Colors
            1.14 - Accordion
            1.15 - Tabs
        02. Homepage
            2.1 - Header
            2.2 - Banner
            2.3 - About Us
            2.4 - Services
            2.5 - Cta
            2.6 - How It Works
            2.7 - Our Team
            2.8 - Testimonials
            2.9 - Blog
            2.10 - Get In Touch
            2.11 - Footer
        03. About Us
        04. Services
        05. Service Details
        06. Team
        07. Blog Grid
        08. Blog Details
        09. Contact Us
         
    -----------------------------------------------------------------------------------*/
    CSS styles for support all kinds of different screen sizes

    If you would like to edit a specific section of the site, simply find the appropriate label in the .css file, and then scroll down until you find the appropriate style that needs to be edited.


  • Cruse

    • HTML Structure

    This template uses the 1170 grid system (12 columns) which will help streamline any customization you wish to make. If you're unfamiliar with the 1170 grid system, be sure to read about it here!

    The main structure of this site is wrapped in a 'container' div. Inside of that div you will find each major section of the site given an appropritae grid size all equalling 12 columns in length.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <section class="section-padding event-sec bg-light-white">
        <div class="container">
            <div class="section-header">
                <div class="section-heading">
                </div>
            </div>
           <div class="row">
            <div class="col-12">
            </div>
          </div>
        </div>
    </section>

    Note: If you want to add padding in section use class="section-padding" 80px padding top & 80px padding bottom added in section. You don't need padding remove class="section-padding".

    Site logo

    You can change the main site logo with change this code:

    ?
    1
    2
    3
    <div class="logo">
        <a href="index.html"> <img src="https://placehold.co/156x30" class="image-fit" title="Logo" alt="Logo"> </a>
    </div>

    Main Navigation

    You can change the main site navigation with change this code:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div class="main-navigation">
     <nav>
     <ul class="custom-flex">
         <li class="active"><a href="#">Home</a></li>
         ....
         <li ><a href="#">About</a></li>
     </ul>
    </nav>
    </div>

    Section Heading

    Use this code for section heading.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
            <!-- Heading -->
    <div class="section-heading">
      <h6 class="don">WELCOME TO IBADAT</h6>
        <h2 class="text-custom-black">History Of Ibadat</h2>
        <div class="section-description">
        <p class="text-light-dark">Since 1987, Our institution guiding students and people around the world. Helping others in every community and region with astonishing facilities. Since 1987, Our institution guiding students and people around the world.</p>
        </div>
    </div>
            <!-- /Heading -->

    Section Background Color

    ?
    1
    2
    3
    4
    5
    <section class="bg-light-white">
        <div class="container">  
            ......
        </div>
    </section>

    Note: If you want to red background color in section use class="bg-light-white"   


    Footer Element

    In this section you can change your social media links and copyright text with your own name or company.

    ?
    1
    2
    3
    4
    5
    <section class="bg-light-white">
        <div class="container">  
            ......
        </div>
    </section>

    Note: You can see the complete list of font icons here!



    FontAwesome Icon Packs

    You can also use built-in icon packs in this template, all icons use CSS Font feature, so you can edit and give color to the icon easily. For referrences to easier you use all icons you can visit here!


    CSS Structure

    I'm using one main CSS file (assets/css/style.css), in this template which you are free to modify depending on the customization you require. Below are 10 additional CSS files:

    • bootstrap.min.css - This is a main stylesheet that required for basic template styling like grid, form, input and web elements.
    • font-awesome.css - CSS stylesheets for font icon packs.
    • flaticon.css - CSS stylesheets for font icon packs.
    • slick.css - This stylesheet used for styling the Banner slideshow.
    • ion.rangeSlider.min.css - This stylesheet used for styling the Slider slideshow.
    • datepicker.css - CSS stylesheets for font icon packs.
    • magnific-popup.css - This stylesheet used for styling the Video Popup.
    • nice-select.css - CSS stylesheets for font icon packs.
    • style.css - This stylesheet used for styling the Web Layout.
    • responsive.css - This stylesheet used for styling the Web Layout.

    The main CSS file (assets/css/style.css) contains all of the specific stylings for the page. The file was divided into several sessions as below:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    /*===========================
     =  Table of CSS
        1.General code
        1.1 Typography
        1.2 Space margins and padding
        1.3 forms
        1.4 Buttons
        1.5 Section-Colors-&-Backgrounds
        1.6 Modal & popups
        1.7 Accordion
    2.Homepages
        2.1 Navigation
        2.2 Slider
        2.3 Search
        2.4 About Us
        2.5 Our Work
        2.6 Recommended Cruise
        2.7 Our Services
        2.8 Our Team
        2.9 Our eat
        2.10 Our Blog
        2.11 Our Partners
        2.12 Footer
        2.13 Copyright
    3.Blog   
    4.Blog Details   
    5.Listing
    6.Listing Detail 
    7.Booking 
    8.About Us 
    9.404 
    10.Coming Soon 
    11.Contact Us 
    12.FAQs 
    13.Gallery
    ===========================*/
                     
                    CSS styles for support all kinds of different screen sizes

    If you would like to edit a specific section of the site, simply find the appropriate label in the .css file, and then scroll down until you find the appropriate style that needs to be edited.


  • Toolways

    • HTML Structure

    This template uses the 100% grid system (12 columns) which will help streamline any customization you wish to make. If you're unfamiliar with the 100% grid system, be sure to read about it here!

    The main structure of this site is wrapped in a 'container-fluid' div. Inside of that div you will find each major section of the site given an appropritae grid size all equalling 12 columns in length.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    <section class="section-padding">
        <div class="container">
            <div class="section-header">
            </div>
            <div class="row">
            </div>
        </div>
    </section>

    Note: If you want to add padding in section use class="section-padding" 80px padding top & 80px padding bottom added in section. You don't need padding remove class="section-padding".

    Site logo

    You can change the main site logo with change this code:

    ?
    1
    2
    3
    4
    5
    <div class="logo">
        <a href="index.html">
            <img src="assets/images/logo.png" class="image-fit" alt="logo">
        </a>
    </div>

    Main Navigation

    You can change the main site navigation with change this code:

    ?
    1
    2
    3
    4
    5
    6
    7
    <nav class="navigation">
         <ul class="main-menu">
             <li class="menu-item active"><a href="#">Home</a></li>
             ....
             <li class="menu-item"><a href="#">About</a></li>
         </ul>
    </nav>

    Section Heading

    Use this code for section heading.

    ?
    1
    2
    3
    4
    5
    6
    <!-- Heading -->
    <div class="section-header">
        <h3 class="title">Title</h3>
        <p class="text">Lorem ipsum dolor sit amet, consectetur.</p>
    </div>
    <!-- /Heading -->

    Section Background Color

    ?
    1
    2
    3
    4
    5
    <section class="thm-bg-color-one">
        <div class="container">  
            ......
        </div>
    </section>

    Note: If you want to green background color in section use class="thm-bg-color-one"   


    Footer Element

    In this section you can change your social media links and copyright text with your own name or company.

    ?
    1
    2
    3
    4
    5
    6
    7
    <!-- Copyright Start -->
    <div class="copyright">
        <div class="container">
            <p class="mb-0">@Copyright 2022. <a href="#" class="thm-color-one">www.example.com</a> All Rights Reserved</p>
        </div>
    </div>
    <!-- Copyright End -->

    Note: You can see the complete list of font icons here!



    FontAwesome Icon Packs

    You can also use built-in icon packs in this template, all icons use CSS Font feature, so you can edit and give color to the icon easily. For referrences to easier you use all icons you can visit here!


    CSS Structure

    I'm using one main CSS file (assets/css/style.css), in this template which you are free to modify depending on the customization you require. Below are 10 additional CSS files:

    • bootstrap.min.css - This is a main stylesheet that required for basic template styling like grid, form, input and web elements.
    • font-awesome.min.css - CSS stylesheets for font icon packs.
    • bootstrap-icons.css - CSS stylesheets for font icon packs.
    • slick.css - This stylesheet used for styling the Banner slideshow.
    • nice-select.css - This stylesheet used for styling the Select Tag.
    • style.css - This stylesheet used for styling the Web Layout.
    • responsive.css - This stylesheet used for styling the Web Layout.

    The main CSS file (assets/css/style.css) contains all of the specific stylings for the page. The file was divided into several sessions as below:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    /*-----------------------------------------------------------------------------------
        Template Name: Toolways
        Description: Toolways - Best Tools & Hand Tools Store HTML5 Template
        Author: Codezion
        Author URI: https://www.templatemonster.com/authors/codezion/
        Version: 1.0
    -----------------------------------------------------------------------------------
         
        >>> TABLE OF CONTENTS:
        =======================
     
        01. Common/Reusable CSS
            1.1 - Animations
            1.2 - General
            1.3 - Section Title
            1.4 - Video Button
            1.5 - Slick Arrows
            1.6 - Slick Dots
            1.7 - Typography
            1.8 - Tables
            1.9 - Modals
            1.10 - Forms
            1.11 - Buttons
            1.12 - Pagination
            1.13 - Colors
            1.14 - Accordion
        02. Homepage
            2.1 - Header
            2.2 - Single Banner
            2.3 - Explore
            2.4 - Service
            2.5 - Listing
            2.6 - How It Works
            2.7 - Testimonials
            2.8 - Blog
            2.9 - Newsletter
            2.10 - Footer
            2.11 - Copyright
            2.12 - Back To Top
        03. Explore
        04. Listings
        05. Blog
        06. Service
        07. Login
        08. SignUp
        09. Contact
         
    -----------------------------------------------------------------------------------*/
    CSS styles for support all kinds of different screen sizes

    If you would like to edit a specific section of the site, simply find the appropriate label in the .css file, and then scroll down until you find the appropriate style that needs to be edited.


  • Educaster

    • HTML Structure

    This template uses the 1170 grid system (12 columns) which will help streamline any customization you wish to make. If you're unfamiliar with the 1170 grid system, be sure to read about it here!

    The main structure of this site is wrapped in a 'container' div. Inside of that div you will find each major section of the site given an appropritae grid size all equalling 12 columns in length.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <section class="about-section section-padding">
      <div class="container">
         <div class="Categories-section-content align-items-center text-center">
            <div class="categories-title">
               <h3>Explore Educaster</h3>
            </div>
            <div class="categories-title-img">
               <img src="assets/images/1.png" alt="img">
            </div>
         </div>
       </div>
     </section>

    Note: If you want to add padding in section use class="section-padding" 80px padding top & 80px padding bottom added in section. You don't need padding remove class="section-padding".

    Site logo

    You can change the main site logo with change this code:

    ?
    1
    2
    3
    4
    <div class="logo">
      <a href="index.html"><img src="assets/images/logo/1.png" class="image-fit logo-image-white" alt="logo"></a>
      <a href="index.html"><img src="assets/images/logo/ft-logo.png" class="image-fit logo-image-red" alt="logo"></a>
    </div>  

    Main Navigation

    You can change the main site navigation with change this code:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    <div class="navigation-wrapper navigation-wrappers sticky ">
          <div class="container">
             <div class="row">
                <div class="col-12">
                   <nav>
                      <div class="main-navigation">
                         <div class="logo">
                            <a href="index.html"><img src="assets/images/logo/1.png" class="image-fit logo-image-white" alt="logo"></a>
                            <a href="index.html"><img src="assets/images/logo/ft-logo.png" class="image-fit logo-image-red" alt="logo"></a>
                          </div>
                         <div class="main-menu">
                            <ul class="custom-flex">
                               <li class="menu-item menu-item-has-children active">
                                  <a href="index.html">Home</a>
                                  -------
                               </li>
                               <li class="menu-item"> <a href="causes.html">Causes</a>
                               </li>
                               <li class="menu-item menu-item-has-children">
                                  <a href="#">Blog</a>
                                  <ul class="submenu custom">
                                     <li class="menu-item"> <a href="blog.html">Blog Grid</a> </li>
                                  </ul>
                               </li>
                            </ul>
                         </div>
                      </div>
                   </nav>
                </div>
             </div>
          </div>
       </div>

    Section Heading

    Use this code for section heading.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
      <!-- Heading -->
        <section class="about-section section-padding">
         <div class="container">
            <div class="Categories-section-content align-items-center text-center">
               <div class="categories-title">
                  <h3>Explore Educaster</h3>
               </div>
               <div class="categories-title-img">
                  <img src="assets/images/1.png" alt="img">
               </div>
            </div>
          </div>
        </section>
     
    <!-- /Heading -->

    Section Background Color

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <section class="about-section section-padding">
       <div class="container">
          <div class="Categories-section-content align-items-center text-center">
             <div class="categories-title">
                <h3>Explore Educaster</h3>
             </div>
             <div class="categories-title-img">
                <img src="assets/images/1.png" alt="img">
             </div>
          </div>
        </div>
      </section>
      

    Note: If you want to red background color in section use class="bg-light-gray"   


    Footer Element

    In this section you can change your social media links and copyright text with your own name or company.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <!-- Footer -->
      <section class="section-padding footer-sec pb-0">
        <div class="container">
          <div class="row text-center">
            <div class="col-lg-12">
              <div class="copyright">
                <span>@Copyright 2021. All Right Reserved</span>
              </div>
            </div>
          </div>
        </div>
      </section>
    <!-- /Footer -->

    Note: You can see the complete list of font icons here!



    Email

    You can also use built-in icon packs in this template, all icons use CSS Font feature, so you can edit and give color to the icon easily. For referrences to easier you use all icons you can visit here!


    CSS Structure

    I'm using one main CSS file (assets/css/style.css), in this template which you are free to modify depending on the customization you require. Below are 10 additional CSS files:

    • bootstrap.min.css - This is a main stylesheet that required for basic template styling like grid, form, input and web elements.
    • font-awesome.css - CSS stylesheets for font icon packs.
    • animate.css - CSS stylesheets for animation.
    • slick.css - This stylesheet used for styling the Banner slideshow.
    • slick-theme.css - This stylesheet used for styling the slideshow.
    • flaticon.css.css - This stylesheet used for icons packs.
    • style.css - This stylesheet used for styling the Web Layout.

    The main CSS file (assets/css/style.css) contains all of the specific stylings for the page. The file was divided into several sessions as below:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    /*===========================
    =  Table of CSS
    1.General code
    1.1 Typography
    1.2 Space margins and padding
    1.3 Button
    1.4 Section-Colors-&-Backgrounds
    2.Homepages
    2.1 Navigation
    2.2 Banner
    2.3 About Us
    2.4 Our Services
    2.5 Our Work
    2.6 Why Choose Us / Testimonials
    2.7 Our Blog
    2.8 Our Team
    3.FAQs 
    4.Contact Us 
    5.Blog   
    6.Blog Details   
    7.404 
    9.About Us 
    9.Coming Soon 
    ===========================*/
    CSS styles for support all kinds of different screen sizes

    If you would like to edit a specific section of the site, simply find the appropriate label in the .css file, and then scroll down until you find the appropriate style that needs to be edited.


  • Swimmer

    • HTML Structure

    This template uses the 1170 grid system (12 columns) which will help streamline any customization you wish to make. If you're unfamiliar with the 1170 grid system, be sure to read about it here!

    The main structure of this site is wrapped in a 'container' div. Inside of that div you will find each major section of the site given an appropritae grid size all equalling 12 columns in length.

    ?
    1
    2
    3
    4
    5
    6
    <section class="section-padding">
       <div class="overlay overlay-bg-theme"></div>
       <div class="container" style="max-width: 1300px;">
          ------
       </div>
    </section>

    Note: If you want to add padding in section use class="section-padding" 80px padding top & 80px padding bottom added in section. You don't need padding remove class="section-padding".

    Site logo

    You can change the main site logo with change this code:

    ?
    1
    2
    3
    4
    <div class="logo">
      <a href="index.html">
       <img src="assets/images/logo.png" class="img-fluid" alt="logo"></a>
    </div>

    Main Navigation

    You can change the main site navigation with change this code:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <nav class="navigation">
      <ul class="main-menu">
        <li class="menu-item menu-item-has-children">
          <a href="#" class="active">Home</a>
          <ul class="sub-menu">
            <li class="menu-item"><a href="index.html">Home Page One</a></li>
            <li class="menu-item"><a href="index-two.html">Home Page Two</a></li>
          </ul>
        </li>
        <li class="menu-item menu-item-has-children">
          <a href="#">Pages</a>
          <ul class="sub-menu">
            <li class="menu-item"><a href="our-tour.html">Our Tour</a></li>
            <li class="menu-item"><a href="error.html">Error 404</a></li>
          </ul>
        </li>
        <li class="menu-item">
          <a href="contact.html">Contact</a>
        </li>
      </ul>
    </nav>

    Section Heading

    Use this code for section heading.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <!-- Heading -->
    <section class="section-padding pb-0">
       <div class="container">
         <div class="row">
           <div class="col-lg-6 col-md-6">
             <div class="welcome-animal pr-5">
               <h3>WELCOME TO<br><span class="thm-color-one">ANIMALS</span></h3>
               <div class="line-hedding"></div>
             </div>
           </div>
         </div>
       </div>
     </section>
     <!-- /Heading -->

    Section Background Color

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <section class="section-padding">
    <div class="container">
    <div class="row justify-content-center text-center">
    <div class="col-lg-5">
    <div class="section-hedding">
    <h6 class="small-hedding m-0">Services</h6>
    <p>Lorem Ipsum is simply dummy text of the printing and typesting industr.</p>
    </div>
    </div>
    </div>
    </div></section>

    Note: If you want to red background color in section use class="bg-light-gray"   


    Footer Element

    In this section you can change your social media links and copyright text with your own name or company.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!-- Footer -->
    <div class="copyright">
      <div class="container">
        <div class="row">
          <div class="col-12 text-center">
            <p class="mb-0">@Copyright © <a href="#">Website</a> <span id="year"></span>. All Right Reserved</p>
          </div>
        </div>
      </div>
    </div>
    <!-- /Footer -->

    Note: You can see the complete list of font icons here!



    Email

    You can also use built-in icon packs in this template, all icons use CSS Font feature, so you can edit and give color to the icon easily. For referrences to easier you use all icons you can visit here!


    CSS Structure

    I'm using one main CSS file (assets/css/style.css), in this template which you are free to modify depending on the customization you require. Below are 10 additional CSS files:

    • bootstrap.min.css - This is a main stylesheet that required for basic template styling like grid, form, input and web elements.
    • font-awesome.css - CSS stylesheets for font icon packs.
    • animate.css - CSS stylesheets for animation.
    • slick.css - This stylesheet used for styling the Banner slideshow.
    • slick-theme.css - This stylesheet used for styling the slideshow.
    • flaticon.css.css - This stylesheet used for icons packs.
    • style.css - This stylesheet used for styling the Web Layout.

    The main CSS file (assets/css/style.css) contains all of the specific stylings for the page. The file was divided into several sessions as below:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    /*===========================
    =  Table of CSS
    1.General code
    1.1 Typography
    1.2 Space margins and padding
    1.3 Button
    1.4 Section-Colors-&-Backgrounds
    2.Homepages
    2.1 Navigation
    2.2 Banner
    2.3 About Us
    2.4 Our Services
    2.5 Our Work
    2.6 Why Choose Us / Testimonials
    2.7 Our Blog
    2.8 Our Team
    3.FAQs 
    4.Contact Us 
    5.Blog   
    6.Blog Details   
    7.404 
    9.About Us 
    9.Coming Soon 
    ===========================*/
    CSS styles for support all kinds of different screen sizes

    If you would like to edit a specific section of the site, simply find the appropriate label in the .css file, and then scroll down until you find the appropriate style that needs to be edited.


  • Deadfire

    • HTML Structure

    This template uses the 100% grid system (12 columns) which will help streamline any customization you wish to make. If you're unfamiliar with the 1140px grid system, be sure to read about it here!

    The main structure of this site is wrapped in a 'container' div. Inside of that div you will find each major section of the site given an appropritae grid size all equalling 12 columns in length.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    <section class="section-padding">
        <div class="container">
            <div class="section-header">
            </div>
            <div class="row">
            </div>
        </div>
    </section>

    Note: If you want to add padding in section use class="section-padding" 80px padding top & 80px padding bottom added in section. You don't need padding remove class="section-padding".

    Site logo

    You can change the main site logo with change this code:

    ?
    1
    2
    3
    4
    5
    <div class="logo">
        <a href="index.html">
            <img src="assets/images/logo.png" class="image-fit-contain" alt="logo">
        </a>
    </div>

    Main Navigation

    You can change the main site navigation with change this code:

    ?
    1
    2
    3
    4
    5
    6
    7
      <nav class="navigation">
         <ul class="main-menu">
             <li class="menu-item"><a href="#" class="active">Home</a></li>
             ....
             <li class="menu-item"><a href="#">About</a></li>
         </ul>
    </nav>

    Section Heading

    Use this code for section heading.

    ?
    1
    2
    3
    4
    5
    6
    <!-- Heading -->
    <div class="section-header">
        <p class="section_count"></p>
        <h3 class="title">About Us</h3>
    </div>
    <!-- /Heading -->

    Section Background Color

    ?
    1
    2
    3
    4
    5
    6
    <!-- Heading -->
    <div class="section-header">
        <p class="section_count"></p>
        <h3 class="title">About Us</h3>
    </div>
    <!-- /Heading -->

    Note: If you want to green background color in section use class="thm-bg-color-one"   


    Footer Element

    In this section you can change your social media links and copyright text with your own name or company.

    ?
    1
    2
    3
    4
    5
    6
    7
    <!-- Copyright Start -->
    <div class="thm-bg-color-one copyright">
        <div class="container">
            <p class="mb-0">Copyright © <a href="#">www.Website.com</a> <span id="year">2025</span>. Website</p>
        </div>
    </div>
    <!-- Copyright End -->

    Note: You can see the complete list of font icons here!



    FontAwesome Icon Packs

    You can also use built-in icon packs in this template, all icons use CSS Font feature, so you can edit and give color to the icon easily. For referrences to easier you use all icons you can visit here!


    CSS Structure

    I'm using one main CSS file (assets/css/style.css), in this template which you are free to modify depending on the customization you require. Below are 10 additional CSS files:

    • bootstrap.min.css - This is a main stylesheet that required for basic template styling like grid, form, input and web elements.
    • font-awesome.min.css - CSS stylesheets for bootstrap font icon packs.
    • bootstrap-icons.css - CSS stylesheets for font icon packs.
    • slick.css - This stylesheet used for styling the Banner slideshow.
    • magnific-popup.css - This stylesheet used for styling the Image & Video Popup.
    • jquery-ui.css - This stylesheet used for styling the JQuery Elements.
    • style.css - This stylesheet used for styling the Web Layout.
    • responsive.css - This stylesheet used for styling the Web Layout.

    The main CSS file (assets/css/style.css) contains all of the specific stylings for the page. The file was divided into several sessions as below:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    /*-----------------------------------------------------------------------------------
        Template Name: Deadfire
        Description: Gaming and eSports HTML5 Template
        Author: Codezion
        Author URI: https://www.templatemonster.com/authors/codezion/
        Version: 1.0
     
    -----------------------------------------------------------------------------------
         
        >>> TABLE OF CONTENTS:
        =======================
     
        01. Common/Reusable CSS
            1.1 - Animations
            1.2 - General
            1.3 - Section Title
            1.4 - Video Button
            1.5 - Slick Arrows
            1.6 - Slick Dots
            1.7 - Typography
            1.8 - Tables
            1.9 - Modals
            1.10 - Forms
            1.11 - Buttons
            1.12 - Pagination
            1.13 - Colors
            1.14 - Accordion
        02. Homepage
            2.1 - Header
            2.2 - Slider
            2.3 - About Us
            2.4 - Type of Games
            2.5 - Gallery
            2.6 - Counter
            2.7 - Download App
            2.8 - How To Play
            2.9 - Testimonials
            2.10 - Blog
            2.11 - Newsletter
            2.12 - Footer
                2.12.1 - Copyright
                2.12.2 - Back To Top
        03. About Us
        04. Matches
        05. Match Details
        06. Blog Grid
        07. Blog List
        08. Blog Details
        09. Games
        10. Game Details
        11. Player
        12. Player Details
        13. FAQ's
        14. Login/SignUp
        15. Contact Us
         
    -----------------------------------------------------------------------------------*/
    CSS styles for support all kinds of different screen sizes

    If you would like to edit a specific section of the site, simply find the appropriate label in the .css file, and then scroll down until you find the appropriate style that needs to be edited.


  • Trandi

    • HTML Structure

    This template uses the 1170 grid system (12 columns) which will help streamline any customization you wish to make. If you're unfamiliar with the 1170 grid system, be sure to read about it here!

    The main structure of this site is wrapped in a 'container' div. Inside of that div you will find each major section of the site given an appropritae grid size all equalling 12 columns in length.

    ?
    1
    2
    3
    4
    5
    6
    7
        <section class="section-padding pt-0">
       <div class="container">
          <div class="row pt-4 justify-content-center">
            ---------------------------
          </div>
       </div>
    </section>

    Note: If you want to add padding in section use class="section-padding" 80px padding top & 80px padding bottom added in section. You don't need padding remove class="section-padding".

    Site logo

    You can change the main site logo with change this code:

    ?
    1
    2
    3
    <div class="logo">
        <a href="index.html"> <img src="assets/images/logo.png" alt="img"></a>
      </div>

    Main Navigation

    You can change the main site navigation with change this code:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <nav class="navigation">
        <ul class="main-menu">
          <li class="menu-item menu-item-has-children">
            <a href="#" class="active">Home</a>
            <ul class="sub-menu">
              <li class="menu-item"><a href="index.html">Home Page One</a></li>
              <li class="menu-item"><a href="index-2.html">Home Page Two</a></li>
            </ul>
          </li>
          <li class="menu-item"><a href="about.html">About</a></li>
        </ul>
      </nav>

    Section Heading

    Use this code for section heading.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <!-- Heading -->
    <section class="section-padding">
       <div class="container">
         <div class="row">
           <div class="col-lg-6 col-md-6">
             <div class="welcome-animal pr-5">
               <div class="line-hedding"></div>
             </div>
           </div>
         </div>
       </div>
     </section>
     <!-- /Heading -->

    Section Background Color

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <section class="section-padding">
      <div class="container">
      <div class="row justify-content-center text-center">
        <div class="col-lg-5">
          <div class="section-hedding">
            <h6 class="small-hedding m-0">Services</h6>
            <p>Lorem Ipsum is simply dummy text of the printing and typesting industr.</p>
          </div>
        </div>
      </div>
    </div></section>

    Note: If you want to red background color in section use class="bg-light-gray"   


    Footer Element

    In this section you can change your social media links and copyright text with your own name or company.

    ?
    1
    2
    3
    <!-- Footer -->
      <div class="copyright">@Copyright 2021. All Right Reserved</div> 
      <!-- /Footer -->

    Note: You can see the complete list of font icons here!



    Email

    You can also use built-in icon packs in this template, all icons use CSS Font feature, so you can edit and give color to the icon easily. For referrences to easier you use all icons you can visit here!


    CSS Structure

    I'm using one main CSS file (assets/css/style.css), in this template which you are free to modify depending on the customization you require. Below are 10 additional CSS files:

    • bootstrap.min.css - This is a main stylesheet that required for basic template styling like grid, form, input and web elements.
    • font-awesome.css - CSS stylesheets for font icon packs.
    • animate.css - CSS stylesheets for animation.
    • slick.css - This stylesheet used for styling the Banner slideshow.
    • slick-theme.css - This stylesheet used for styling the slideshow.
    • flaticon.css.css - This stylesheet used for icons packs.
    • style.css - This stylesheet used for styling the Web Layout.

    The main CSS file (assets/css/style.css) contains all of the specific stylings for the page. The file was divided into several sessions as below:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    /*===========================
    =  Table of CSS
    1.General code
    1.1 Typography
    1.2 Space margins and padding
    1.3 Button
    1.4 Section-Colors-&-Backgrounds
    2.Homepages
    2.1 Navigation
    2.2 Banner
    2.3 About Us
    2.4 Our Services
    2.5 Our Work
    2.6 Why Choose Us / Testimonials
    2.7 Our Blog
    2.8 Our Team
    3.FAQs 
    4.Contact Us 
    5.Blog   
    6.Blog Details   
    7.404 
    9.About Us 
    9.Coming Soon 
    ===========================*/
    CSS styles for support all kinds of different screen sizes

    If you would like to edit a specific section of the site, simply find the appropriate label in the .css file, and then scroll down until you find the appropriate style that needs to be edited.


  • Rockymen

    • HTML Structure

    This template uses the 100% grid system (12 columns) which will help streamline any customization you wish to make. If you're unfamiliar with the 100% grid system, be sure to read about it here!

    The main structure of this site is wrapped in a 'container-fluid' div. Inside of that div you will find each major section of the site given an appropritae grid size all equalling 12 columns in length.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    <section class="section-padding">
        <div class="container-fluid">
            <div class="section-header">
            </div>
            <div class="row">
            </div>
        </div>
    </section>

    Note: If you want to add padding in section use class="section-padding" 80px padding top & 80px padding bottom added in section. You don't need padding remove class="section-padding".

    Site logo

    You can change the main site logo with change this code:

    ?
    1
    2
    3
    4
    5
    <div class="logo">
        <a href="index.html">
            <img src="assets/images/logo.png" class="image-fit" alt="logo">
        </a>
    </div>

    Main Navigation

    You can change the main site navigation with change this code:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
      <div class="main_navigation">
         <div class="container-fluid">
             <div class="nav_inner">
                 <ul class="main-menu">
                     <li class="menu-item active"><a href="#">Home</a></li>
                     ....
                     <li class="menu-item"><a href="#">About</a></li>
                 </ul>
             </div>
         </div>
    </div>

    Section Heading

    Use this code for section heading.

    ?
    1
    2
    3
    4
    5
    6
    <!-- Heading -->
    <div class="section-header">
        <h3 class="title">Fruits</h3>
        <p class="text">Lorem ipsum dolor sit amet, consectetur.</p>
    </div>
    <!-- /Heading -->

    Section Background Color

    ?
    1
    2
    3
    4
    5
    <section class="thm-bg-color-one">
        <div class="container-fluid">  
            ......
        </div>
    </section>

    Note: If you want to green background color in section use class="thm-bg-color-one"   


    Footer Element

    In this section you can change your social media links and copyright text with your own name or company.

    ?
    1
    2
    3
    4
    5
    6
    7
    <!-- Copyright Start -->
    <div class="copyright">
        <div class="container-fluid">
            <p class="mb-0">@Copyright 2022. <a href="#" class="thm-color-one">Website.com</a> All Rights Reserved</p>
        </div>
    </div>
    <!-- Copyright End -->

    Note: You can see the complete list of font icons here!



    fontawesome

    You can also use built-in icon packs in this template, all icons use CSS Font feature, so you can edit and give color to the icon easily. For referrences to easier you use all icons you can visit here!


    CSS Structure

    I'm using one main CSS file (assets/css/style.css), in this template which you are free to modify depending on the customization you require. Below are 10 additional CSS files:

    • bootstrap.min.css - This is a main stylesheet that required for basic template styling like grid, form, input and web elements.
    • font-awesome.min.css - CSS stylesheets for font icon packs.
    • magnific-popup.css - CSS stylesheets for Image Popup & Video Popup design.
    • slick.css - This stylesheet used for styling the Banner slideshow.
    • leaflet.css - This stylesheet used for styling the Map Layout.
    • style.css - This stylesheet used for styling the Web Layout.
    • responsive.css - This stylesheet used for styling the Web Layout.

    The main CSS file (assets/css/style.css) contains all of the specific stylings for the page. The file was divided into several sessions as below:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    /*-----------------------------------------------------------------------------------
        Template Name: Rockymen
        Description: Rockymen – Men’s Underwear Ecommerce Website HTML5 Template
        Author: Codezion
        Author URI: https://www.templatemonster.com/authors/codezion/
        Version: 1.0
     
    -----------------------------------------------------------------------------------
         
        >>> TABLE OF CONTENTS:
        =======================
     
        01. Common/Reusable CSS
            1.1 - Animations
            1.2 - General
            1.3 - Section Title
            1.4 - Video Button
            1.5 - Slick Arrows
            1.6 - Slick Dots
            1.7 - Typography
            1.8 - Tables
            1.9 - Forms
            1.10 - Forms
            1.11 - Buttons
            1.12 - Pagination
            1.13 - Colors
            1.14 - Accordion
            1.15 - Tabs
        02. Homepage
            2.1 - Preloader
            2.2 - Header
            2.3 - Banner
            2.4 - How It Works
            2.5 - Fruits Slider
            2.6 - Vegetables Slider
            2.7 - Discount Boxes
            2.8 - Best Offers
            2.9 - Drinks Slider
            2.10 - Bakery Slider
            2.11 - Testimonials
            2.12 - Newsletter
            2.13 - Footer
            2.14 - Copyright
            2.15 - Back To Top
        03. About Us   
        04. Shop   
        05. Shop Details   
        06. Wishlist   
        07. Cart   
        08. Checkout   
        09. Payment   
        10. My Account   
        11. Order List   
        12. Order Details   
        13. Blog   
        14. FAQ's 
        15. Contact   
        16. Error 404  
        17. Privacy Policy  
         
    -----------------------------------------------------------------------------------*/
    CSS styles for support all kinds of different screen sizes

    If you would like to edit a specific section of the site, simply find the appropriate label in the .css file, and then scroll down until you find the appropriate style that needs to be edited.


  • Filght

    • HTML Structure

    This template uses the 1170 grid system (12 columns) which will help streamline any customization you wish to make. If you're unfamiliar with the 1170 grid system, be sure to read about it here!

    The main structure of this site is wrapped in a 'container' div. Inside of that div you will find each major section of the site given an appropritae grid size all equalling 12 columns in length.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <section class="section-padding event-sec bg-light-white">
        <div class="container">
            <div class="section-header">
                <div class="section-heading">
                </div>
            </div>
           <div class="row">
            <div class="col-12">
            </div>
          </div>
        </div>
    </section>

    Note: If you want to add padding in section use class="section-padding" 80px padding top & 80px padding bottom added in section. You don't need padding remove class="section-padding".

    Site logo

    You can change the main site logo with change this code:

    ?
    1
    2
    3
    <div class="logo">
        <a href="index.html"> <img src="https://placehold.co/156x30" class="image-fit" title="Logo" alt="Logo"> </a>
    </div>

    Main Navigation

    You can change the main site navigation with change this code:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div class="main-navigation">
     <nav>
     <ul class="custom-flex">
         <li class="active"><a href="#">Home</a></li>
         ....
         <li ><a href="#">About</a></li>
     </ul>
    </nav>
    </div>

    Section Heading

    Use this code for section heading.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
            <!-- Heading -->
    <div class="section-heading">
      <h6 class="don">WELCOME TO IBADAT</h6>
        <h2 class="text-custom-black">History Of Ibadat</h2>
        <div class="section-description">
        <p class="text-light-dark">Since 1987, Our institution guiding students and people around the world. Helping others in every community and region with astonishing facilities. Since 1987, Our institution guiding students and people around the world.</p>
        </div>
    </div>
            <!-- /Heading -->

    Section Background Color

    ?
    1
    2
    3
    4
    5
    <section class="bg-light-white">
        <div class="container">  
            ......
        </div>
    </section>

    Note: If you want to red background color in section use class="bg-light-white"   


    Footer Element

    In this section you can change your social media links and copyright text with your own name or company.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <!-- Footer -->
    <div class="copyright">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <p class="text-custom-white">© Company name - 2020 | All Right Reserved. <a href="#" class="text-custom-white">Designed By Company name</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    <!-- /Footer -->

    Note: You can see the complete list of font icons here!



    FontAwesome Icon Packs

    You can also use built-in icon packs in this template, all icons use CSS Font feature, so you can edit and give color to the icon easily. For referrences to easier you use all icons you can visit here!


    CSS Structure

    I'm using one main CSS file (assets/css/style.css), in this template which you are free to modify depending on the customization you require. Below are 10 additional CSS files:

    • bootstrap.min.css - This is a main stylesheet that required for basic template styling like grid, form, input and web elements.
    • font-awesome.css - CSS stylesheets for font icon packs.
    • flaticon.css - CSS stylesheets for font icon packs.
    • slick.css - This stylesheet used for styling the Banner slideshow.
    • ion.rangeSlider.min.css - This stylesheet used for styling the Slider slideshow.
    • datepicker.css - CSS stylesheets for font icon packs.
    • magnific-popup.css - This stylesheet used for styling the Video Popup.
    • nice-select.css - CSS stylesheets for font icon packs.
    • style.css - This stylesheet used for styling the Web Layout.
    • responsive.css - This stylesheet used for styling the Web Layout.

    The main CSS file (assets/css/style.css) contains all of the specific stylings for the page. The file was divided into several sessions as below:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    /*===========================
     =  Table of CSS
        1.General code
        1.1 Typography
        1.2 Space margins and padding
        1.3 forms
        1.4 Buttons
        1.5 Section-Colors-&-Backgrounds
        1.6 Modal & popups
        1.7 Accordion
    2.Homepages
        2.1 Navigation
        2.2 Slider
        2.3 Search
        2.4 About Us
        2.5 Our Work
        2.6 Our Services
        2.7 Recommended Flights
        2.8 Checkh Weather
        2.9 Our Blog
        2.10 Our Partners
        2.11 Footer
        2.12 Copyright
    3.Blog   
    4.Blog Details   
    5.Listing
    6.Listing Detail 
    7.Booking 
    8.About Us 
    9.404 
    10.Coming Soon 
    11.Contact Us 
    12.FAQs
    13.Sign Up
    14.Gallery
    ===========================*/
                     
                    CSS styles for support all kinds of different screen sizes

    If you would like to edit a specific section of the site, simply find the appropriate label in the .css file, and then scroll down until you find the appropriate style that needs to be edited.


  • Floral

    • HTML Structure

    This template uses the 100% grid system (12 columns) which will help streamline any customization you wish to make. If you're unfamiliar with the 100% grid system, be sure to read about it here!

    The main structure of this site is wrapped in a 'container-fluid' div. Inside of that div you will find each major section of the site given an appropritae grid size all equalling 12 columns in length.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    <section class="section-padding">
        <div class="container-fluid">
            <div class="section-header">
            </div>
            <div class="row">
            </div>
        </div>
    </section>

    Note: If you want to add padding in section use class="section-padding" 80px padding top & 80px padding bottom added in section. You don't need padding remove class="section-padding".

    Site logo

    You can change the main site logo with change this code:

    ?
    1
    2
    3
    4
    5
    <div class="logo">
        <a href="index.html">
            <img src="assets/images/logo.png" class="image-fit" alt="logo">
        </a>
    </div>

    Main Navigation

    You can change the main site navigation with change this code:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
      <div class="main_navigation">
         <div class="container-fluid">
             <div class="nav_inner">
                 <ul class="main-menu">
                     <li class="menu-item active"><a href="#">Home</a></li>
                     ....
                     <li class="menu-item"><a href="#">About</a></li>
                 </ul>
             </div>
         </div>
    </div>

    Section Heading

    Use this code for section heading.

    ?
    1
    2
    3
    4
    5
    6
    <!-- Heading -->
    <div class="section-header">
        <h3 class="title">Fruits</h3>
        <p class="text">Lorem ipsum dolor sit amet, consectetur.</p>
    </div>
    <!-- /Heading -->

    Section Background Color

    ?
    1
    2
    3
    4
    5
    <section class="thm-bg-color-one">
        <div class="container-fluid">  
            ......
        </div>
    </section>

    Note: If you want to green background color in section use class="thm-bg-color-one"   


    Footer Element

    In this section you can change your social media links and copyright text with your own name or company.

    ?
    1
    2
    3
    4
    5
    6
    7
    <!-- Copyright Start -->
    <div class="copyright">
        <div class="container-fluid">
            <p class="mb-0">@Copyright 2022. <a href="#" class="thm-color-one">Website.com</a> All Rights Reserved</p>
        </div>
    </div>
    <!-- Copyright End -->

    Note: You can see the complete list of font icons here!



    FontAwesome Icon Packs

    You can also use built-in icon packs in this template, all icons use CSS Font feature, so you can edit and give color to the icon easily. For referrences to easier you use all icons you can visit here!


    Settings

    I'm using one main CSS file (assets/css/style.css), in this template which you are free to modify depending on the customization you require. Below are 10 additional CSS files:

    • bootstrap.min.css - This is a main stylesheet that required for basic template styling like grid, form, input and web elements.
    • font-awesome.min.css - CSS stylesheets for font icon packs.
    • magnific-popup.css - CSS stylesheets for Image Popup & Video Popup design.
    • slick.css - This stylesheet used for styling the Banner slideshow.
    • leaflet.css - This stylesheet used for styling the Map Layout.
    • style.css - This stylesheet used for styling the Web Layout.
    • responsive.css - This stylesheet used for styling the Web Layout.

    The main CSS file (assets/css/style.css) contains all of the specific stylings for the page. The file was divided into several sessions as below:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    /*-----------------------------------------------------------------------------------
        Template Name: Floral
        Description: Floral - Flower Shop Ecommerce HTML5 Template
        Author: Codezion
        Author URI: https://www.templatemonster.com/authors/codezion/
        Version: 1.0
     
    -----------------------------------------------------------------------------------
         
        >>> TABLE OF CONTENTS:
        =======================
     
        01. Common/Reusable CSS
            1.1 - Animations
            1.2 - General
            1.3 - Section Title
            1.4 - Video Button
            1.5 - Slick Arrows
            1.6 - Slick Dots
            1.7 - Typography
            1.8 - Tables
            1.9 - Forms
            1.10 - Forms
            1.11 - Buttons
            1.12 - Pagination
            1.13 - Colors
            1.14 - Accordion
            1.15 - Tabs
        02. Homepage
            2.1 - Preloader
            2.2 - Header
            2.3 - Banner
            2.4 - How It Works
            2.5 - Fruits Slider
            2.6 - Vegetables Slider
            2.7 - Discount Boxes
            2.8 - Best Offers
            2.9 - Drinks Slider
            2.10 - Bakery Slider
            2.11 - Testimonials
            2.12 - Newsletter
            2.13 - Footer
            2.14 - Copyright
            2.15 - Back To Top
        03. About Us   
        04. Shop   
        05. Shop Details   
        06. Wishlist   
        07. Cart   
        08. Checkout   
        09. Payment   
        10. My Account   
        11. Order List   
        12. Order Details   
        13. Blog   
        14. FAQ's 
        15. Contact   
        16. Error 404  
        17. Privacy Policy  
         
    -----------------------------------------------------------------------------------*/
    CSS styles for support all kinds of different screen sizes

    If you would like to edit a specific section of the site, simply find the appropriate label in the .css file, and then scroll down until you find the appropriate style that needs to be edited.


  • Newsvox

    • HTML Structure

    This template uses the 1170 grid system (12 columns) which will help streamline any customization you wish to make. If you're unfamiliar with the 1170 grid system, be sure to read about it here!

    The main structure of this site is wrapped in a 'container' div. Inside of that div you will find each major section of the site given an appropritae grid size all equalling 12 columns in length.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <section class="section-padding event-sec bg-light-white">
        <div class="container">
            <div class="section-header">
                <div class="section-heading">
                </div>
            </div>
           <div class="row">
            <div class="col-12">
            </div>
          </div>
        </div>
    </section>

    Note: If you want to add padding in section use class="section-padding" 80px padding top & 80px padding bottom added in section. You don't need padding remove class="section-padding".

    Site logo

    You can change the main site logo with change this code:

    ?
    1
    2
    3
    <div class="logo">
        <a href="index.html"> <img src="https://placehold.co/156x44" class="image-fit" title="Logo" alt="Logo"> </a>
    </div>

    Main Navigation

    You can change the main site navigation with change this code:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div class="main-navigation">
     <nav>
     <ul class="custom-flex">
         <li class="active"><a href="#">Home</a></li>
         ....
         <li ><a href="#">About</a></li>
     </ul>
    </nav>
    </div>

    Section Heading

    Use this code for section heading.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
            <!-- Heading -->
    <div class="section-heading">
      <h6 class="don">WELCOME TO IBADAT</h6>
        <h2 class="text-custom-black">History Of Ibadat</h2>
        <div class="section-description">
        <p class="text-light-dark">Since 1987, Our institution guiding students and people around the world. Helping others in every community and region with astonishing facilities. Since 1987, Our institution guiding students and people around the world.</p>
        </div>
    </div>
            <!-- /Heading -->

    Section Background Color

    ?
    1
    2
    3
    4
    5
    <section class="bg-light-white">
        <div class="container">  
            ......
        </div>
    </section>

    Note: If you want to red background color in section use class="bg-light-white"   


    Footer Element

    In this section you can change your social media links and copyright text with your own name or company.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <!-- Footer -->
    <div class="copyright">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <p class="text-custom-white">© Company name - 2020 | All Right Reserved. <a href="#" class="text-custom-white">Designed By Company name</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    <!-- /Footer -->

    Note: You can see the complete list of font icons here!



    FontAwesome Icon Packs

    You can also use built-in icon packs in this template, all icons use CSS Font feature, so you can edit and give color to the icon easily. For referrences to easier you use all icons you can visit here!


    CSS Structure

    I'm using one main CSS file (assets/css/style.css), in this template which you are free to modify depending on the customization you require. Below are 7 additional CSS files:

    • bootstrap.min.css - This is a main stylesheet that required for basic template styling like grid, form, input and web elements.
    • font-awesome.css - CSS stylesheets for font icon packs.
    • owl.carousel.css - This stylesheet used for styling the Banner slideshow.
    • owl.theme.css - This stylesheet used for styling the Slider slideshow.
    • owl.transitions.css - This stylesheet used for styling the Banner slideshow.
    • nice-select.css - CSS stylesheets for font icon packs.
    • style.css - This stylesheet used for styling the Web Layout.

    The main CSS file (assets/css/style.css) contains all of the specific stylings for the page. The file was divided into several sessions as below:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    /*===========================
     =  Table of CSS
        1. General css
      2. Space margins and padding
      3. Buttons and Heading
      4. Header css
      5. Navigation css
      6. Article
      7. Pagination
      8. Sidebar
      9. Footer
      10. Single-post
        10.1 comment-list
        10.2 Comment-form
      11. Pricing Page
      12. Blog
      13. Blog-Detail
      14. Cooming-soon
    ===========================*/
                     
                    CSS styles for support all kinds of different screen sizes

    If you would like to edit a specific section of the site, simply find the appropriate label in the .css file, and then scroll down until you find the appropriate style that needs to be edited.


  • Greenpodha

    • HTML Structure

    This template uses the 1170 grid system (12 columns) which will help streamline any customization you wish to make. If you're unfamiliar with the 1170 grid system, be sure to read about it here!

    The main structure of this site is wrapped in a 'container' div. Inside of that div you will find each major section of the site given an appropritae grid size all equalling 12 columns in length.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <section class="section-padding event-sec bg-light-white">
        <div class="container">
            <div class="section-header">
                <div class="section-heading">
                </div>
            </div>
           <div class="row">
            <h6 class="d-none">1</h6>
            <div class="col-12">
            </div>
          </div>
        </div>
    </section>

    Note: If you want to add padding in section use class="section-padding" 80px padding top & 80px padding bottom added in section. You don't need padding remove class="section-padding".

    Site logo

    You can change the main site logo with change this code:

    ?
    1
    <div class="logo"> <a href="index.html"> <img src="https://placehold.co/185x56" class="image-fit" alt="logo"> </a> </div>

    Email Change

    You can change Email address open mail.php and change this Email Id :

    ?
    1
    $EmailTo = "xyz@domain.com";

    Main Navigation

    You can change the main site navigation with change this code:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div class="main-navigation">
     <nav>
     <ul class="custom-flex">
         <li class="active"><a href="#">Home</a></li>
         ....
         <li ><a href="#">About</a></li>
     </ul>
    </nav>
    </div>

    Section Heading

    Use this code for section heading.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
                  <!-- Heading -->
        <div class="section-header text-center">
      <div class="section-heading">
        <h3 class="text-custom-black">Our Services</h3>
        <div class="section-description">
          <p class="text-light-dark">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
        </div>
      </div>
    </div>
                  <!-- /Heading -->

    Section Background Color

    ?
    1
    2
    3
    4
    5
    <section class="bg-light-white">
        <div class="container">  
            ......
        </div>
    </section>

    Note: If you want to red background color in section use class="bg-light-white"   


    Footer Element

    In this section you can change your social media links and copyright text with your own name or company.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <!-- Footer -->
    <div class="copyright">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <p class="text-custom-white">© Company name - 2020 | All Right Reserved. <a href="#" class="text-custom-white">Designed By Company name</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    <!-- /Footer -->

    Note: You can see the complete list of font icons here!



    FontAwesome Icon Packs

    You can also use built-in icon packs in this template, all icons use CSS Font feature, so you can edit and give color to the icon easily. For referrences to easier you use all icons you can visit here!


    CSS Structure

    I'm using one main CSS file (assets/css/style.css), in this template which you are free to modify depending on the customization you require. Below are 10 additional CSS files:

    • bootstrap.min.css - This is a main stylesheet that required for basic template styling like grid, form, input and web elements.
    • font-awesome.css - CSS stylesheets for font icon packs.
    • flaticon.css - CSS stylesheets for font icon packs.
    • slick.css - This stylesheet used for styling the Banner slideshow.
    • ion.rangeSlider.min.css - This stylesheet used for styling the Slider slideshow.
    • datepicker.css - CSS stylesheets for font icon packs.
    • magnific-popup.css - This stylesheet used for styling the Video Popup.
    • nice-select.css - CSS stylesheets for font icon packs.
    • style.css - This stylesheet used for styling the Web Layout.
    • responsive.css - This stylesheet used for styling the Web Layout.

    The main CSS file (assets/css/style.css) contains all of the specific stylings for the page. The file was divided into several sessions as below:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
        /*===========================
         =  Table of CSS
    1.General code
        1.1 Typography
        1.2 Space margins and padding
        1.3 forms
        1.4 Buttons
        1.5 Section-Colors-&-Backgrounds
        1.6 Modal & popups
        1.7 Accordion
    2.Homepages
        2.1 Navigation
        2.2 Slider
        2.3 Search
        2.4 About Us
        2.5 Our Services
        2.6 Our Team
        2.7Our Blog
        2.8 Footer
        2.9 Copyright
    3.Blog
    4.Blog Details
    5.Listing
    6.Listing Detail
    7.About Us
    8.404
    9.Coming Soon
    10.Contact Us
    11.FAQs
    12.Gallery
        ===========================*/
                         
                        CSS styles for support all kinds of different screen sizes

    If you would like to edit a specific section of the site, simply find the appropriate label in the .css file, and then scroll down until you find the appropriate style that needs to be edited.


  • Horse_riding

    • HTML Structure

    This template uses the 1170 grid system (12 columns) which will help streamline any customization you wish to make. If you're unfamiliar with the 1170 grid system, be sure to read about it here!

    The main structure of this site is wrapped in a 'container' div. Inside of that div you will find each major section of the site given an appropritae grid size all equalling 12 columns in length.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <section class="section-padding event-sec bg-light-white">
        <div class="container">
            <div class="section-header">
                <div class="section-heading">
                </div>
            </div>
           <div class="row">
            <h6 class="d-none">1</h6>
            <div class="col-12">
            </div>
          </div>
        </div>
    </section>

    Note: If you want to add padding in section use class="section-padding" 80px padding top & 80px padding bottom added in section. You don't need padding remove class="section-padding".

    Site logo

    ?
    1
    <div class="logo"> <a href="index.html"> <img src="https://placehold.co/185x56" class="image-fit" alt="logo"> </a> </div>

    Main Navigation

    You can change the main site navigation with change this code:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <div class="navigation-wrapper">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <nav>
                        <div class="main-navigation">
                            <div class="main-menu">
                                <ul class="custom-flex">
                                    <ul class="custom-flex">
                                    <li class="active"><a href="#">Home</a></li>
                                    ....
                                    <li ><a href="#">About</a></li></ul>
                                </ul>
                            </div>
                        </div></nav>
                    </div>
                </div>
            </div>
        </div>

    Section Heading

    Use this code for section heading.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
                  <!-- Heading -->
        <div class="about-left-side mb-md-80">
      <div class="section-header style-left">
        <div class="section-heading">
          <h3 class="text-custom-black">TheRider- Horses Riding Club HTML Template</h3>
          <div class="section-description">
          </div>
        </div>
      </div>
      <p class="pt-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
     <a href="about.html" class="btn-first btn-submit">Reserve Now</a>
    </div>
                  <!-- /Heading -->

    Section Background Color

    ?
    1
    2
    3
    4
    5
    <section class="bg-light-white">
        <div class="container">  
            ......
        </div>
    </section>

    Note: If you want to red background color in section use class="bg-light-white"   


    Footer Element

    In this section you can change your social media links and copyright text with your own name or company.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
      <!-- Footer -->
      <div class="copyright">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <p class="text-custom-white">© TheRider- Horses Riding Club | All Right Reserved.</p>
          </div>
        </div>
      </div>
    </div>
      <!-- /Footer -->

    Note: You can see the complete list of font icons here!



    Email

    Open Mail.php And Find This Line $EmailTo = "demo@example.com" And Change Our Mail Id .


    CSS Structure

    I'm using one main CSS file (assets/css/style.css), in this template which you are free to modify depending on the customization you require. Below are 10 additional CSS files:

    • bootstrap.min.css - This is a main stylesheet that required for basic template styling like grid, form, input and web elements.
    • font-awesome.css - CSS stylesheets for font icon packs.
    • flaticon.css - CSS stylesheets for font icon packs.
    • slick.css - This stylesheet used for styling the Banner slideshow.
    • ion.rangeSlider.min.css - This stylesheet used for styling the Slider slideshow.
    • datepicker.css - CSS stylesheets for font icon packs.
    • magnific-popup.css - This stylesheet used for styling the Video Popup.
    • nice-select.css - CSS stylesheets for font icon packs.
    • style.css - This stylesheet used for styling the Web Layout.
    • responsive.css - This stylesheet used for styling the Web Layout.

    The main CSS file (assets/css/style.css) contains all of the specific stylings for the page. The file was divided into several sessions as below:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
        /*===========================
         =  Table of CSS
            1.General code
        1.1 Typography
        1.2 Space margins and padding
        1.3 forms
        1.4 Buttons
        1.5 Section-Colors-&-Backgrounds
        1.6 Modal & popups
        1.7 Accordion
    2.Homepages
        2.1 Navigation
        2.2 Slider
        2.3 Search
        2.4 About Us
        2.5 Our Work
        2.6 Our Services
        2.7 Recommended Cars
        2.8 Our Team
        2.9 Why Choose Us / Testimonials
        2.10 Our Blog
        2.11 Our Partners
        2.12 Footer
        2.13 Copyright
    3.Blog   
    4.Blog Details   
    5.Listing
    6.Listing Detail 
    7.Booking 
    8.About Us 
    9.404 
    10.Coming Soon 
    11.Contact Us 
    12.FAQs 
    13.Gallery 
        ===========================*/
                         
                        CSS styles for support all kinds of different screen sizes

    If you would like to edit a specific section of the site, simply find the appropriate label in the .css file, and then scroll down until you find the appropriate style that needs to be edited.


  • Ibadat

    • HTML Structure

    This template uses the 1170 grid system (12 columns) which will help streamline any customization you wish to make. If you're unfamiliar with the 1170 grid system, be sure to read about it here!

    The main structure of this site is wrapped in a 'container' div. Inside of that div you will find each major section of the site given an appropritae grid size all equalling 12 columns in length.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <section class="section-padding event-sec bg-light-white">
        <div class="container">
            <div class="section-header">
                <div class="section-heading">
                </div>
            </div>
           <div class="row">
            <div class="col-12">
            </div>
          </div>
        </div>
    </section>

    Note: If you want to add padding in section use class="section-padding" 80px padding top & 80px padding bottom added in section. You don't need padding remove class="section-padding".

    Site logo

    You can change the main site logo with change this code:

    ?
    1
    2
    3
    <div class="logo">
        <a href="index.html"> <img src="https://placehold.co/156x30" class="image-fit" title="Logo" alt="Logo"> </a>
    </div>

    Main Navigation

    You can change the main site navigation with change this code:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div class="main-navigation">
     <nav>
     <ul class="custom-flex">
         <li class="active"><a href="#">Home</a></li>
         ....
         <li ><a href="#">About</a></li>
     </ul>
    </nav>
    </div>

    Section Heading

    Use this code for section heading.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
            <!-- Heading -->
    <div class="section-heading">
      <h6 class="don">WELCOME TO IBADAT</h6>
        <h2 class="text-custom-black">History Of Ibadat</h2>
        <div class="section-description">
        <p class="text-light-dark">Since 1987, Our institution guiding students and people around the world. Helping others in every community and region with astonishing facilities. Since 1987, Our institution guiding students and people around the world.</p>
        </div>
    </div>
            <!-- /Heading -->

    Section Background Color

    ?
    1
    2
    3
    4
    5
    <section class="bg-light-white">
        <div class="container">  
            ......
        </div>
    </section>

    Note: If you want to red background color in section use class="bg-light-white"   


    Footer Element

    In this section you can change your social media links and copyright text with your own name or company.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <!-- Footer -->
    <div class="copyright">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <p class="text-custom-white">© Company name - 2020 | All Right Reserved. <a href="#" class="text-custom-white">Designed By Company name</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    <!-- /Footer -->

    Note: You can see the complete list of font icons here!



    FontAwesome Icon Packs

    You can also use built-in icon packs in this template, all icons use CSS Font feature, so you can edit and give color to the icon easily. For referrences to easier you use all icons you can visit here!


    CSS Structure

    I'm using one main CSS file (assets/css/style.css), in this template which you are free to modify depending on the customization you require. Below are 7 additional CSS files:

    • bootstrap.min.css - This is a main stylesheet that required for basic template styling like grid, form, input and web elements.
    • font-awesome.css - CSS stylesheets for font icon packs.
    • flaticon.css - CSS stylesheets for font icon packs.
    • slick.css - This stylesheet used for styling the Banner slideshow.
    • magnific-popup.css - This stylesheet used for styling the Video Popup.
    • style.css - This stylesheet used for styling the Web Layout.
    • responsive.css - This stylesheet used for styling the Web Layout.

    The main CSS file (assets/css/style.css) contains all of the specific stylings for the page. The file was divided into several sessions as below:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    /*===========================
     =  Table of CSS
        1.General code
        1.1 Typography
        1.2 Space margins and padding
        1.3 forms
        1.4 Buttons
        1.5 Section-Colors-&-Backgrounds
        1.6 Modal & popups
        1.7 Accordion
    2.Homepages
        2.1 Navigation
        2.2 Slider
        2.3 Search
        2.4 About Us
        2.5 Event Grid
        2.6 Sermons grid
        2.7 Islamic Scholars
        2.8 Our Services
        2.9 Our Team
        2.10 Our Blog
        2.11 Footer
        2.12 Copyright
    3.Blog   
    4.Blog Details  
    5 Donotion  
    6.About Us 
    7.404 
    8.Sign In
    ===========================*/
                     
                    CSS styles for support all kinds of different screen sizes

    If you would like to edit a specific section of the site, simply find the appropriate label in the .css file, and then scroll down until you find the appropriate style that needs to be edited.


  • Impato

    • HTML Structure

    This template uses the 1170 grid system (12 columns) which will help streamline any customization you wish to make. If you're unfamiliar with the 1170 grid system, be sure to read about it here!

    The main structure of this site is wrapped in a 'container' div. Inside of that div you will find each major section of the site given an appropritae grid size all equalling 12 columns in length.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <section class="section-padding event-sec bg-light-white">
        <div class="container">
            <div class="section-header">
                <div class="section-heading">
                </div>
            </div>
           <div class="row">
            <h6 class="d-none">1</h6>
            <div class="col-12">
            </div>
          </div>
        </div>
    </section>

    Note: If you want to add padding in section use class="section-padding" 80px padding top & 80px padding bottom added in section. You don't need padding remove class="section-padding".

    Site logo

    You can change the main site logo with change this code:

    ?
    1
    <div class="logo"> <a href="index.html"> <img src="https://placehold.co/185x56" class="image-fit" alt="logo"> </a> </div>

    Main Navigation

    You can change the main site navigation with change this code:

    ?
    1
    <div class="logo"> <a href="index.html"> <img src="https://placehold.co/185x56" class="image-fit" alt="logo"> </a> </div>

    Section Heading

    Use this code for section heading.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
                  <!-- Heading -->
        <div class="section-header text-center">
      <div class="section-heading">
        <h3 class="text-custom-black">Our Services</h3>
        <div class="section-description">
          <p class="text-light-dark">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
        </div>
      </div>
    </div>
                  <!-- /Heading -->

    Section Background Color

    ?
    1
    2
    3
    4
    5
    <section class="bg-light-white">
        <div class="container">  
            ......
        </div>
    </section>

    Note: If you want to red background color in section use class="bg-light-white"   


    Footer Element

    In this section you can change your social media links and copyright text with your own name or company.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <!-- Footer -->
    <div class="copyright">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <p class="text-custom-white">© Company name - 2020 | All Right Reserved. <a href="#" class="text-custom-white">Designed By Company name</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    <!-- /Footer -->

    Note: You can see the complete list of font icons here!



    FontAwesome Icon Packs

    You can also use built-in icon packs in this template, all icons use CSS Font feature, so you can edit and give color to the icon easily. For referrences to easier you use all icons you can visit here!


    CSS Structure

    I'm using one main CSS file (assets/css/style.css), in this template which you are free to modify depending on the customization you require. Below are 10 additional CSS files:

    • bootstrap.min.css - This is a main stylesheet that required for basic template styling like grid, form, input and web elements.
    • font-awesome.css - CSS stylesheets for font icon packs.
    • flaticon.css - CSS stylesheets for font icon packs.
    • slick.css - This stylesheet used for styling the Banner slideshow.
    • ion.rangeSlider.min.css - This stylesheet used for styling the Slider slideshow.
    • datepicker.css - CSS stylesheets for font icon packs.
    • magnific-popup.css - This stylesheet used for styling the Video Popup.
    • nice-select.css - CSS stylesheets for font icon packs.
    • style.css - This stylesheet used for styling the Web Layout.
    • responsive.css - This stylesheet used for styling the Web Layout.

    The main CSS file (assets/css/style.css) contains all of the specific stylings for the page. The file was divided into several sessions as below:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
        /*===========================
         =  Table of CSS
            1.General code
        1.1 Typography
        1.2 Space margins and padding
        1.3 forms
        1.4 Buttons
        1.5 Section-Colors-&-Backgrounds
        1.6 Modal & popups
        1.7 Accordion
    2.Homepages
        2.1 Navigation
        2.2 Slider
        2.3 Search
        2.4 About Us
        2.5 Our Category
        2.6 Our Services
        2.7 Latest Jobs
        2.8 Our Team
        2.9 Our Blog
        2.10 Footer
        2.11 Copyright
    3.Blog
    4.Blog Details
    5.Listing
    6.Listing Detail
    7.Booking
    8.About Us
    9.404
    10.Coming Soon
    11.Contact Us
    12.FAQs
    13.Login
        ===========================*/
                         
                        CSS styles for support all kinds of different screen sizes

    If you would like to edit a specific section of the site, simply find the appropriate label in the .css file, and then scroll down until you find the appropriate style that needs to be edited.


  • Kiran

    • HTML Structure

    This template uses the 1170 grid system (12 columns) which will help streamline any customization you wish to make. If you're unfamiliar with the 1170 grid system, be sure to read about it here!

    The main structure of this site is wrapped in a 'container' div. Inside of that div you will find each major section of the site given an appropritae grid size all equalling 12 columns in length.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <section class="section-padding event-sec bg-light-white">
        <div class="container">
            <div class="section-header">
                <div class="section-heading">
                </div>
            </div>
           <div class="row">
            <div class="col-12">
            </div>
          </div>
        </div>
    </section>

    Note: If you want to add padding in section use class="section-padding" 80px padding top & 80px padding bottom added in section. You don't need padding remove class="section-padding".

    Site logo

    You can change the main site logo with change this code:

    ?
    1
    2
    3
    <div class="logo">
        <a href="index.html"> <img src="https://placehold.co/150" class="image-fit" title="Logo" alt="Logo"> </a>
    </div>

    Main Navigation

    You can change the main site navigation with change this code:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div class="main-navigation">
     <nav>
     <ul class="custom-flex">
         <li class="active"><a href="#">Home</a></li>
         ....
         <li ><a href="#">About</a></li>
     </ul>
    </nav>
    </div>

    Section Heading

    Use this code for section heading.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
            <!-- Heading -->
    <div class="section-heading">
      <h6 class="don">WELCOME TO IBADAT</h6>
        <h2 class="text-custom-black">History Of Ibadat</h2>
        <div class="section-description">
        <p class="text-light-dark">Since 1987, Our institution guiding students and people around the world. Helping others in every community and region with astonishing facilities. Since 1987, Our institution guiding students and people around the world.</p>
        </div>
    </div>
            <!-- /Heading -->

    Section Background Color

    ?
    1
    2
    3
    4
    5
    <section class="bg-light-white">
        <div class="container">  
            ......
        </div>
    </section>

    Note: If you want to red background color in section use class="bg-light-white"   


    Footer Element

    In this section you can change your social media links and copyright text with your own name or company.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <!-- Footer -->
    <div class="copyright">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <p class="text-custom-white">© Company name - 2020 | All Right Reserved. <a href="#" target="_blank" class="text-custom-white">Designed By Company name</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    <!-- /Footer -->

    Note: You can see the complete list of font icons here!



    FontAwesome Icon Packs

    You can also use built-in icon packs in this template, all icons use CSS Font feature, so you can edit and give color to the icon easily. For referrences to easier you use all icons you can visit here!


    CSS Structure

    I'm using one main CSS file (assets/css/style.css), in this template which you are free to modify depending on the customization you require. Below are 10 additional CSS files:

    • bootstrap.min.css - This is a main stylesheet that required for basic template styling like grid, form, input and web elements.
    • font-awesome.css - CSS stylesheets for font icon packs.
    • flaticon.css - CSS stylesheets for font icon packs.
    • slick.css - This stylesheet used for styling the Banner slideshow.
    • ion.rangeSlider.min.css - This stylesheet used for styling the Slider slideshow.
    • datepicker.css - CSS stylesheets for font icon packs.
    • magnific-popup.css - This stylesheet used for styling the Video Popup.
    • nice-select.css - CSS stylesheets for font icon packs.
    • style.css - This stylesheet used for styling the Web Layout.
    • responsive.css - This stylesheet used for styling the Web Layout.

    The main CSS file (assets/css/style.css) contains all of the specific stylings for the page. The file was divided into several sessions as below:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    /*===========================
     =  Table of CSS
        1.General code
        1.1 Typography
        1.2 Space margins and padding
        1.3 forms
        1.4 Buttons
        1.5 Section-Colors-&-Backgrounds
        1.6 Modal & popups
    2.Homepages
        2.1 Navigation
        2.2 Banner
        2.3 About Corona
        2.4 Our Mission
        2.5 Our Sponsoer
        2.6 Donaer Review
        2.7 Our Gallery
        2.8 Blog
        2.9 Footer
        2.10 Copyright
    3.About Us
    4.Causes
    5.Faqs
    6.Appointment
    7.Help
    8.Donotion
    9.Coming Soon
    10.Sign up
    11.404
    12.Blog
    13.Contact
    ===========================*/
                     
                    CSS styles for support all kinds of different screen sizes

    If you would like to edit a specific section of the site, simply find the appropriate label in the .css file, and then scroll down until you find the appropriate style that needs to be edited.


  • Lanudary

    • HTML Structure

    This template uses the 1170 grid system (12 columns) which will help streamline any customization you wish to make. If you're unfamiliar with the 1170 grid system, be sure to read about it here!

    The main structure of this site is wrapped in a 'container' div. Inside of that div you will find each major section of the site given an appropritae grid size all equalling 12 columns in length.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <section class="section-padding event-sec bg-light-white">
        <div class="container">
            <div class="section-header">
                <div class="section-heading">
                </div>
            </div>
           <div class="row">
            <h6 class="d-none">1</h6>
            <div class="col-12">
            </div>
          </div>
        </div>
    </section>

    Note: If you want to add padding in section use class="section-padding" 80px padding top & 80px padding bottom added in section. You don't need padding remove class="section-padding".

    Site logo

    You can change the main site logo with change this code:

    ?
    1
    <div class="logo"> <a href="index.html"> <img src="https://placehold.co/185x56" class="image-fit" alt="logo"> </a> </div>

    Main Navigation

    You can change the main site navigation with change this code:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div class="main-navigation">
     <nav>
     <ul class="custom-flex">
         <li class="active"><a href="#">Home</a></li>
         ....
         <li ><a href="#">About</a></li>
     </ul>
    </nav>
    </div>

    Section Heading

    Use this code for section heading.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
                  <!-- Heading -->
        <div class="section-header text-center">
      <div class="section-heading">
        <h3 class="text-custom-black">Our Services</h3>
        <div class="section-description">
          <p class="text-light-dark">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
        </div>
      </div>
    </div>
                  <!-- /Heading -->

    Section Background Color

    ?
    1
    2
    3
    4
    5
    <section class="bg-light-white">
        <div class="container">  
            ......
        </div>
    </section>

    Note: If you want to red background color in section use class="bg-light-white"   


    Footer Element

    In this section you can change your social media links and copyright text with your own name or company.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <!-- Footer -->
    <div class="copyright">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <p class="text-custom-white">© Company name - 2020 | All Right Reserved. <a href="#" target="_blank" class="text-custom-white">Designed By Company name</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    <!-- /Footer -->

    Note: You can see the complete list of font icons here!



    FontAwesome Icon Packs

    You can also use built-in icon packs in this template, all icons use CSS Font feature, so you can edit and give color to the icon easily. For referrences to easier you use all icons you can visit here!


    CSS Structure

    I'm using one main CSS file (assets/css/style.css), in this template which you are free to modify depending on the customization you require. Below are 10 additional CSS files:

    • bootstrap.min.css - This is a main stylesheet that required for basic template styling like grid, form, input and web elements.
    • font-awesome.css - CSS stylesheets for font icon packs.
    • flaticon.css - CSS stylesheets for font icon packs.
    • slick.css - This stylesheet used for styling the Banner slideshow.
    • ion.rangeSlider.min.css - This stylesheet used for styling the Slider slideshow.
    • datepicker.css - CSS stylesheets for font icon packs.
    • magnific-popup.css - This stylesheet used for styling the Video Popup.
    • nice-select.css - CSS stylesheets for font icon packs.
    • style.css - This stylesheet used for styling the Web Layout.
    • responsive.css - This stylesheet used for styling the Web Layout.

    The main CSS file (assets/css/style.css) contains all of the specific stylings for the page. The file was divided into several sessions as below:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    /*===========================
     =  Table of CSS
        1.General code
        1.1 Typography
        1.2 Space margins and padding
        1.3 forms
        1.4 Buttons
        1.5 Section-Colors-&-Backgrounds
        1.6 Modal & popups
    2.Homepages
        2.1 Navigation
        2.2 Banner
        2.3 About Corona
        2.4 Our Mission
        2.5 Our Sponsoer
        2.6 Donaer Review
        2.7 Our Gallery
        2.8 Blog
        2.9 Footer
        2.10 Copyright
    3.About Us
    4.Causes
    5.Faqs
    6.Appointment
    7.Help
    8.Donotion
    9.Coming Soon
    10.Sign up
    11.404
    12.Blog
    13.Contact
    ===========================*/
                     
                    CSS styles for support all kinds of different screen sizes

    If you would like to edit a specific section of the site, simply find the appropriate label in the .css file, and then scroll down until you find the appropriate style that needs to be edited.


  • Otganic

    • HTML Structure

    This template uses the 1170 grid system (12 columns) which will help streamline any customization you wish to make. If you're unfamiliar with the 1170 grid system, be sure to read about it here!

    The main structure of this site is wrapped in a 'container' div. Inside of that div you will find each major section of the site given an appropritae grid size all equalling 12 columns in length.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <section class="section-padding event-sec bg-light-white">
        <div class="container">
            <div class="section-header">
                <div class="section-heading">
                </div>
            </div>
           <div class="row">
            <h6 class="d-none">1</h6>
            <div class="col-12">
            </div>
          </div>
        </div>
    </section>

    Note: If you want to add padding in section use class="section-padding" 80px padding top & 80px padding bottom added in section. You don't need padding remove class="section-padding".

    Site logo

    You can change the main site logo with change this code:

    ?
    1
    <div class="logo"> <a href="index.html"> <img src="https://placehold.co/150x150" class="image-fit" alt="logo"> </a> </div>

    Main Navigation

    You can change the main site navigation with change this code:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div class="main-navigation">
     <nav>
     <ul class="custom-flex">
         <li class="active"><a href="#">Home</a></li>
         ....
         <li ><a href="#">About</a></li>
     </ul>
    </nav>
    </div>

    Section Heading

    Use this code for section heading.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
                  <!-- Heading -->
        <div class="section-header text-center">
      <div class="section-heading">
        <h3 class="text-custom-black">Our Services</h3>
        <div class="section-description">
          <p class="text-light-dark">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
        </div>
      </div>
    </div>
                  <!-- /Heading -->

    Section Background Color

    ?
    1
    2
    3
    4
    5
    <section class="bg-light-white">
        <div class="container">  
            ......
        </div>
    </section>

    Note: If you want to red background color in section use class="bg-light-white"   


    Footer Element

    In this section you can change your social media links and copyright text with your own name or company.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <!-- Footer -->
    <div class="copyright">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <p class="text-custom-white">© Company name - 2020 | All Right Reserved. <a href="#" class="text-custom-white">Designed By Company name</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    <!-- /Footer -->

    Note: You can see the complete list of font icons here!



    FontAwesome Icon Packs

    You can also use built-in icon packs in this template, all icons use CSS Font feature, so you can edit and give color to the icon easily. For referrences to easier you use all icons you can visit here!


    Email

    Open Html Folder and Mail.php Open and Replace email Id $EmailTo = "info@xyz.com";

    CSS Structure

    I'm using one main CSS file (assets/css/style.css), in this template which you are free to modify depending on the customization you require. Below are 10 additional CSS files:

    • bootstrap.min.css - This is a main stylesheet that required for basic template styling like grid, form, input and web elements.
    • font-awesome.css - CSS stylesheets for font icon packs.
    • flaticon.css - CSS stylesheets for font icon packs.
    • slick.css - This stylesheet used for styling the Banner slideshow.
    • ion.rangeSlider.min.css - This stylesheet used for styling the Slider slideshow.
    • datepicker.css - CSS stylesheets for font icon packs.
    • magnific-popup.css - This stylesheet used for styling the Video Popup.
    • nice-select.css - CSS stylesheets for font icon packs.
    • style.css - This stylesheet used for styling the Web Layout.
    • responsive.css - This stylesheet used for styling the Web Layout.

    The main CSS file (assets/css/style.css) contains all of the specific stylings for the page. The file was divided into several sessions as below:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
        /*===========================
         =  Table of CSS
       1.General code
        1.1 Typography
        1.2 Space margins and padding
        1.3 forms
        1.4 Buttons
        1.5 Section-Colors-&-Backgrounds
        1.6 Modal & popups
        1.7 Accordion
    2.Homepages
        2.1 Navigation
        2.2 Slider
        2.3 Search
        2.4 About Us
        2.5 Our Services
        2.6 Our Team
        2.7 Our Blog
        2.8 Our Events
        2.9 Footer
        2.10 Copyright
    3.Blog
    4.Blog Details
    5.Listing
    6.Listing Detail
    7.Booking
    8.About Us
    9.404
    10.Coming Soon
    11.Contact Us
    12.FAQs
    13.Gallery
        ===========================*/
                         
                        CSS styles for support all kinds of different screen sizes

    If you would like to edit a specific section of the site, simply find the appropriate label in the .css file, and then scroll down until you find the appropriate style that needs to be edited.


  • Consultpro

    • Site logo

    Follow the below steps to get started with Crafto:

    1. Unzip the downloaded package and open the /html folder to find all the template files. Upload these files to your hosting web server using FTP or file manager.

    2. Below is the folder/files structure that needs to be uploaded to your website root directory:

    • html/css - Main stylesheet files
    • html/demo - Niche demos related styles
    • html/email-template - Contact and subscription form PHP files
    • html/font - Icon font files
    • html/image - Classic images folder
    • html/js - JavaScript files (Functions, jQuery, vendors, etc.)
    • html/revolution - Revolution slider library files
    • html/sass - Master SCSS files
    • html/video - Video files
    • html/*.html - All the templates

    3. Install a Localhost server on your PC/Laptop. We recommend using Node/Gulp.js for really streamlining your workflow with Crafto and use the instructions here to get started:SCSS & Gulp.js

    4. Edit the files using a text editor like VS Code or Sublime Text.

    5. Finalize the upload package and optionally run Gulp tasks to minify your files.

    6. Upload your files to your server’s public_html (Apache) or /var/www/html (Nginx) folder.

    Navigation

    Combining SCSS and Gulp can make your website-building process much smoother. SCSS helps you create neat and flexible styles, while Gulp takes care of repetitive tasks, saving you time and effort. This dynamic duo not only makes your stylesheets easier to manage but also ensures a consistent and scalable development workflow.

    Using SCSS

    In SCSS, the main key file is sass/style.scss. If you are looking for SCSS Component then you can find it in the sass/ folder.

    Using Gulp.js

    Before diving into Gulp.js, check if your system already has NodeJS, NPM, and Gulp ready to install.

    Once you've got those installed, open your terminal (we suggest using VS Code), navigate to your project folder using the cd /to/project/folder command, and then hit npm install. This will grab all the dependencies listed in your package.json. cd /to/project/folder, and run:

    Now, you're all set to use some Gulp commands, including:

    • gulp - Compiles SCSS to css/style.min.css and runs BrowserSync.

    Section Heading

    Building websites is a breeze with Crafto, and it gets even simpler with niche demos. These demos are ready-made templates for various types of websites, requiring minimal setup and saving time. They run smoothly using the style.css and css/js files.

    To check out the main pages for these demos, navigate to the Download Package/html folder. You'll find them named as demo-{niche}.html.

    For setting up the Niche Demos, you’ll need the following folders and files:

    • css/ - Stylesheet folder
    • images/ - Image assets folder (You can remove any unused images, but do not delete the entire folder.)
    • email-templates/ - Contact and subscription form PHP files
    • fonts/ - Icon font files
    • revolution/ - Revolution slider assets (If the Niche Demos don’t use Revolution Slider, you can remove this folder.)
    • js/ - JavaScript folder
    • demos/niche/ - Niche-specific assets folder
    • demo-{niche}.html - Niche demo homepage and inner pages HTML files

    Simply select the files you need and delete the rest. Rename demo-{niche}.html to index.html—this will become your default homepage. Now, you can customize the files to match your website’s style!

    Section Background Color

    Crafto template is based on Bootstrap Framework (http://getbootstrap.com/) Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

    Below is sample coding structure:

                <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>Crafto Template</title>
                <link rel="stylesheet" href="css/style.css">
                <link rel="stylesheet" href="css/style.css">
                <link rel="stylesheet" href="css/style.css">
                <link rel="stylesheet" href="css/style.css">
                <link rel="stylesheet" href="css/style.css">
                <link rel="stylesheet" href="css/style.css">
                <link rel="stylesheet" href="css/style.css">
                <link rel="stylesheet" href="css/style.css">
                <link rel="stylesheet" href="css/style.css">
                <link rel="stylesheet" href="css/style.css">
                <link rel="stylesheet" href="css/style.css">
                <link rel="stylesheet" href="css/style.css">
            </head>
            <body>
                <header>Header Content</header>
                <main>Main Content</main>
                <footer>Footer Content</footer>
            </body>
            </html>

    Footer Element

    The logo container is inside the <nav> tag within the <header>. 

                                                
                                <!-- start logo -->
                                <div class="col-auto me-auto ps-lg-0">
                                    <a class="navbar-brand" href="#">
                                        <!-- Default logo -->
                                        <img src="images/logo-black.png" 
                                             data-at2x="images/logo-black@2x.png" 
                                             alt="Crafto Logo" 
                                             class="default-logo">
                                        
                                             data-at2x="images/logo-black@2x.png" 
                                             alt="Crafto Logo" 
                                             class="default-logo">
                                        
                                        <!-- Alternative logo for dark mode -->
                                        <img src="images/logo-white.png" 
                                             data-at2x="images/logo-white@2x.png" 
                                             alt="Crafto Logo - Dark Mode" 
                                             class="alt-logo">
                                        
                                        <!-- Mobile logo -->
                                        <img src="images/logo-black.png" 
                                             data-at2x="images/logo-black@2x.png" 
                                             alt="Crafto Logo - Mobile" 
                                             class="mobile-logo">
                                    </a> 
                                             class="mobile-logo">
                                    </a>
                                </div>
                                <!-- end logo -->

    Note: Three logo images are used here:

    • .default-logo – The main logo displayed at the top of the page.
    • .alt-logo – The alternate logo displayed on the sticky header.
    • .mobile-logo – The logo shown on mobile devices.

    Use the respective class names to customize each logo version as needed.

    Email

    Crafto download package does not contain actual images which are there in our online demo due to licensing limitation and this is already mentioned in item description also as per Envato policy. We are using placeholder images instead of real images. You can replace placeholder image URL with your image URL like <images/yourimage.jpg> and make sure to put the image in /images/ folder. 

                            
                        :root {
                        --base-color: #2946f3;
                        --dark-gray: #232323;
                        --very-light-gray: #eceff1;
                        }

    Settings

    It's easy to change the colours on your website. Simply use this short code to add your colour scheme to the <demos/niche/niche.css> file: 

                            <!DOCTYPE html>
                        <html lang="en">
                        <head>
                        <meta charset="UTF-8">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <title>Crafto Template</title>
                        <link rel="stylesheet" href="css/style.css">
                        </head>
                        <body>
                        <header>Header Content</header>
                        <main>Main Content</main>
                        <footer>Footer Content</footer>
                        </body>
                        </html>

    Crafto uses 2 fonts: Plus Jakarta Sans & Inter from the Google Fonts Library. You can change the fonts from <demos/niche/niche.css> file in below lines. If you want to use self hosted fonts other than Google fonts then here is an

    article of self hosted fonts to review. In this case you need to remove below lines and change font names in <demos/niche/niche.css> file as per your fonts used. 

                            <!DOCTYPE html>
                        <html lang="en">
                        <head>
                        <meta charset="UTF-8">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <title>Crafto Template</title>
                        <link rel="stylesheet" href="css/style.css">
                        </head>
                        <body>
                        <header>Header Content</header>
                        <main>Main Content</main>
                        <footer>Footer Content</footer>
                        </body>
                        </html>

    Using Google Fonts

    If you wish to add or change your website fonts. You simply need to set your fonts in the <demos/niche/niche.css> file using the following code: 

                            <!DOCTYPE html>
                        <html lang="en">
                        <head>
                        <meta charset="UTF-8">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <title>Crafto Template</title>
                        <link rel="stylesheet" href="css/style.css">
                        </head>
                        <body>
                        <header>Header Content</header>
                        <main>Main Content</main>
                        <footer>Footer Content</footer>
                        </body>
                        </html>

    Using Self-Hosted Fonts

    If you plan to use a self-hosted fonts, use the following code possibly at the top of the<demos/niche/niche.css> file 

                            <!DOCTYPE html>
                        <html lang="en">
                        <head>
                        <meta charset="UTF-8">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <title>Crafto Template</title>
                        <link rel="stylesheet" href="css/style.css">
                        </head>
                        <body>
                        <header>Header Content</header>
                        <main>Main Content</main>
                        <footer>Footer Content</footer>
                        </body>
                        </html>

    NoteFor demo, You can please check this in demo-accounting.html page.

    We have included a demo CSS file inside the <demos> folder, as well as another folder <niche> called <niche.css>, so you can better manage your customizations while updating Crafto to the latest version. To add any custom CSS Codes, just add them to the <demos/niche/niche.css> file.

                            </head>
                        <body>
                        <header>Header Content</header>
                        <main>Main Content</main>
                        <footer>Footer Content</footer>
                        </body>
                        </html>
    • Two Unique HomePage Layout
    • One Types Of Header Style
    • Unique Navigation Style
    • 404 Page Included
    • Fullscreen Image Background
    • Fully Responsive
    • Creative, Modern and Clean Design
    • Easy to Customization CountDown
    • Modern Cross Browser Support
    • W3C Validate Code
    Other Features
    • Google Fonts
    • FontAwesome Icons
    • Bootstrap Icons
    • Flaticon Icons
    • Well Documented
    • and much more features…
    Photos :
    • All 'images' used on the demo site is for demonstration purposes only and are not included in the main download file.
    • All Images Collected From >'Google Image Search'

  • Rudra

    • HTML Structure

    This template uses the 100% grid system (12 columns) which will help streamline any customization you wish to make. If you're unfamiliar with the 100% grid system, be sure to read about it here!

    The main structure of this site is wrapped in a 'container-fluid' div. Inside of that div you will find each major section of the site given an appropritae grid size all equalling 12 columns in length.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <section class="section-padding about-us">
        <div class="container">
            <div class="row">
                <div class="col-xl-6 col-lg-6 pl-2 pr-2 align-self-center text-left">
                    <div class="about-left-side mb-md-80">
                        <div class="section-header style-left">
                    </div>
                </div>
            </div>
        </div>
    </div></section>

    Note: If you want to add padding in section use class="section-padding" 80px padding top & 80px padding bottom added in section. You don't need padding remove class="section-padding".

    Site logo

    You can change the main site logo with change this code:

    ?
    1
    2
    3
    4
    5
    <div class="logo">
        <a href="index.html">
            <img src="assets/images/logo.png" class="img-fluid" alt="logo">
        </a>
    </div>

    Main Navigation

    You can change the main site navigation with change this code:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <nav>
      <div class="main-navigation">
        <div class="logo"> <a href="index.html"> <img src="assets/images/logo.png" class="img-fluid" alt="logo"> </a> </div>
        <div class="main-menu">
          <ul class="custom-flex">
            <li class="menu-item active"> <a href="index.html">Home</a> </li>
            <li class="menu-item menu-item-has-children"> <a href="#">Courses</a>
              <ul class="submenu custom">
                <li class="menu-item"> <a href="course.html">Full Width</a> </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    Section Heading

    Use this code for section heading.

    ?
    1
    2
    3
    4
    5
    6
    7
    <!-- Heading -->
    <div class="section-header style-left">
        <div class="section-heading">
            <h3>Who <span class="text-custom-blue">We </span> Are</h3>
        </div>
    </div>
    <!-- /Heading -->

    Section Background Color

    ?
    1
    2
    3
    4
    5
    6
    7
    <section class="section-padding our-work-sec bg-light-white">
        <div class="container">
            <div class="section-header text-center">
               ..........
            </div>
        </div>
    </section>

    Note: If you want to green background color in section use class="thm-bg-color-one"   

    Footer Element

    In this section you can change your social media links and copyright text with your own name or company.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!-- Copyright Start -->
    <div class="copyright">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <p class="text-custom-white">© Acadmy - 2022 | All Right Reserved.</p>
                </div>
            </div>
        </div>
    </div>
    <!-- Copyright End -->

    Note: You can see the complete list of font icons here!



    FontAwesome Icon Packs

    You can also use built-in icon packs in this template, all icons use CSS Font feature, so you can edit and give color to the icon easily. For referrences to easier you use all icons you can visit here!


    CSS Structure

    I'm using one main CSS file (assets/css/style.css), in this template which you are free to modify depending on the customization you require. Below are 10 additional CSS files:

    • bootstrap.min.css - This is a main stylesheet that required for basic template styling like grid, form, input and web elements.
    • font-awesome.min.css - CSS stylesheets for font icon packs.
    • flaticon.css - font icon packs.
    • bootstrap-icons.css - CSS stylesheets for font icon packs.
    • slick.css - This stylesheet used for styling the Banner slideshow.
    • nice-select.css - This stylesheet used for styling the Select Tag.
    • style.css - This stylesheet used for styling the Web Layout.
    • responsive.css - This stylesheet used for styling the Web Layout.

    The main CSS file (assets/css/style.css) contains all of the specific stylings for the page. The file was divided into several sessions as below:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    /*-----------------------------------------------------------------------------------
        Template Name: The Rudra
        Description: The Rudra - Hotel Booking HTML5 Template
        Author: Codezion
        Author URI: https://www.templatemonster.com/authors/codezion/
        Version: 1.0
    -----------------------------------------------------------------------------------
         
        >>> TABLE OF CONTENTS:
        =======================
     
        01. Common/Reusable CSS
            1.1 - Animations
            1.2 - General
            1.3 - Section Title
            1.4 - Video Button
            1.5 - Slick Arrows
            1.6 - Slick Dots
            1.7 - Typography
            1.8 - Tables
            1.9 - Modals
            1.10 - Forms
            1.11 - Buttons
            1.12 - Pagination
            1.13 - Colors
            1.14 - Accordion
        02. Homepage
            2.1 - Header
            2.2 - Single Banner
            2.3 - Explore
            2.4 - Service
            2.5 - Listing
            2.6 - How It Works
            2.7 - Testimonials
            2.8 - Blog
            2.9 - Newsletter
            2.10 - Footer
            2.11 - Copyright
            2.12 - Back To Top
        03. Explore
        04. Listings
        05. Blog
        06. Service
        07. Login
        08. SignUp
        09. Contact
         
    -----------------------------------------------------------------------------------*/
    CSS styles for support all kinds of different screen sizes

    If you would like to edit a specific section of the site, simply find the appropriate label in the .css file, and then scroll down until you find the appropriate style that needs to be edited.


  • Speedup

    • HTML Structure

    This template uses the 1170 grid system (12 columns) which will help streamline any customization you wish to make. If you're unfamiliar with the 1170 grid system, be sure to read about it here!

    The main structure of this site is wrapped in a 'container' div. Inside of that div you will find each major section of the site given an appropritae grid size all equalling 12 columns in length.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <section class="section-padding event-sec bg-light-white">
        <div class="container">
            <div class="section-header">
                <div class="section-heading">
                </div>
            </div>
           <div class="row">
            <h6 class="d-none">1</h6>
            <div class="col-12">
            </div>
          </div>
        </div>
    </section>

    Note: If you want to add padding in section use class="section-padding" 80px padding top & 80px padding bottom added in section. You don't need padding remove class="section-padding".

    Site logo

    You can change the main site logo with change this code:

    ?
    1
    <div class="logo"> <a href="index.html"> <img src="https://placehold.co/185x56" class="image-fit" alt="logo"> </a> </div>

    Main Navigation

    You can change the main site navigation with change this code:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div class="main-navigation">
     <nav>
     <ul class="custom-flex">
         <li class="active"><a href="#">Home</a></li>
         ....
         <li ><a href="#">About</a></li>
     </ul>
    </nav>
    </div>

    Section Heading

    Use this code for section heading.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
                  <!-- Heading -->
        <div class="section-header text-center">
      <div class="section-heading">
        <h3 class="text-custom-black">Our Services</h3>
        <div class="section-description">
          <p class="text-light-dark">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
        </div>
      </div>
    </div>
                  <!-- /Heading -->

    Section Background Color

    ?
    1
    2
    3
    4
    5
    <section class="bg-light-white">
        <div class="container">  
            ......
        </div>
    </section>

    Note: If you want to red background color in section use class="bg-light-white"   


    Footer Element

    In this section you can change your social media links and copyright text with your own name or company.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <!-- Footer -->
    <div class="copyright">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <p class="text-custom-white">© Company name - 2020 | All Right Reserved. <a href="#" class="text-custom-white">Designed By Company name</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    <!-- /Footer -->

    Note: You can see the complete list of font icons here!



    FontAwesome Icon Packs

    You can also use built-in icon packs in this template, all icons use CSS Font feature, so you can edit and give color to the icon easily. For referrences to easier you use all icons you can visit here!


    CSS Structure

    I'm using one main CSS file (assets/css/style.css), in this template which you are free to modify depending on the customization you require. Below are 10 additional CSS files:

    • bootstrap.min.css - This is a main stylesheet that required for basic template styling like grid, form, input and web elements.
    • font-awesome.css - CSS stylesheets for font icon packs.
    • flaticon.css - CSS stylesheets for font icon packs.
    • slick.css - This stylesheet used for styling the Banner slideshow.
    • ion.rangeSlider.min.css - This stylesheet used for styling the Slider slideshow.
    • datepicker.css - CSS stylesheets for font icon packs.
    • magnific-popup.css - This stylesheet used for styling the Video Popup.
    • nice-select.css - CSS stylesheets for font icon packs.
    • style.css - This stylesheet used for styling the Web Layout.
    • responsive.css - This stylesheet used for styling the Web Layout.

    The main CSS file (assets/css/style.css) contains all of the specific stylings for the page. The file was divided into several sessions as below:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
        /*===========================
         =  Table of CSS
            1.General code
        1.1 Typography
        1.2 Space margins and padding
        1.3 forms
        1.4 Buttons
        1.5 Section-Colors-&-Backgrounds
        1.6 Modal & popups
        1.7 Accordion
    2.Homepages
        2.1 Navigation
        2.2 Slider
        2.3 Search
        2.4 About Us
        2.5 Our Goal
        2.6 Our Courier
        2.7 Our Service
        2.8 Our Team
        2.9 Our Pricing
        2.10 Our Blog
        2.11 Footer
        2.12 Copyright
    3.Blog
    4.Blog Details
    5.Listing
    6.Listing Detail
    7.Booking
    8.404
    9.Contact Us
    10.Gallery 
        ===========================*/
                         
                        CSS styles for support all kinds of different screen sizes

    If you would like to edit a specific section of the site, simply find the appropriate label in the .css file, and then scroll down until you find the appropriate style that needs to be edited.


  • yoauto

    • HTML Structure

    This template uses the 1170 grid system (12 columns) which will help streamline any customization you wish to make. If you're unfamiliar with the 1170 grid system, be sure to read about it here!

    The main structure of this site is wrapped in a 'container' div. Inside of that div you will find each major section of the site given an appropritae grid size all equalling 12 columns in length.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <section class="section-padding event-sec bg-light-white">
        <div class="container">
            <div class="section-header">
                <div class="section-heading">
                </div>
            </div>
           <div class="row">
            <h6 class="d-none">1</h6>
            <div class="col-12">
            </div>
          </div>
        </div>
    </section>

    Note: If you want to add padding in section use class="section-padding" 80px padding top & 80px padding bottom added in section. You don't need padding remove class="section-padding".

    Site logo

    You can change the main site logo with change this code:

    ?
    1
    <div class="logo"> <a href="index.html"> <img src="https://placehold.co/185x56" class="image-fit" alt="logo"> </a> </div>

    Main Navigation

    You can change the main site navigation with change this code:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div class="main-navigation">
     <nav>
     <ul class="custom-flex">
         <li class="active"><a href="#">Home</a></li>
         ....
         <li ><a href="#">About</a></li>
     </ul>
    </nav>
    </div>

    Section Heading

    Use this code for section heading.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
                  <!-- Heading -->
        <div class="section-header text-center">
      <div class="section-heading">
        <h3 class="text-custom-black">Our Services</h3>
        <div class="section-description">
          <p class="text-light-dark">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
        </div>
      </div>
    </div>
                  <!-- /Heading -->

    Section Background Color

    ?
    1
    2
    3
    4
    5
    <section class="bg-light-white">
        <div class="container">  
            ......
        </div>
    </section>

    Note: If you want to red background color in section use class="bg-light-white"   


    Footer Element

    In this section you can change your social media links and copyright text with your own name or company.

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <!-- Footer -->
    <div class="copyright">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <p class="text-custom-white">© Company name - 2020 | All Right Reserved. <a href="#" class="text-custom-white">Designed By Company name</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    <!-- /Footer -->

    Note: You can see the complete list of font icons here!



    FontAwesome Icon Packs

    You can also use built-in icon packs in this template, all icons use CSS Font feature, so you can edit and give color to the icon easily. For referrences to easier you use all icons you can visit here!


    CSS Structure

    I'm using one main CSS file (assets/css/style.css), in this template which you are free to modify depending on the customization you require. Below are 10 additional CSS files:

    • bootstrap.min.css - This is a main stylesheet that required for basic template styling like grid, form, input and web elements.
    • font-awesome.css - CSS stylesheets for font icon packs.
    • flaticon.css - CSS stylesheets for font icon packs.
    • slick.css - This stylesheet used for styling the Banner slideshow.
    • ion.rangeSlider.min.css - This stylesheet used for styling the Slider slideshow.
    • datepicker.css - CSS stylesheets for font icon packs.
    • magnific-popup.css - This stylesheet used for styling the Video Popup.
    • nice-select.css - CSS stylesheets for font icon packs.
    • style.css - This stylesheet used for styling the Web Layout.
    • responsive.css - This stylesheet used for styling the Web Layout.

    The main CSS file (assets/css/style.css) contains all of the specific stylings for the page. The file was divided into several sessions as below:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
        /*===========================
         =  Table of CSS
            1.General code
        1.1 Typography
        1.2 Space margins and padding
        1.3 forms
        1.4 Buttons
        1.5 Section-Colors-&-Backgrounds
        1.6 Modal & popups
        1.7 Accordion
    2.Homepages
        2.1 Navigation
        2.2 Slider
        2.3 Search
        2.4 About Us
        2.5 Our Services
        2.6 Recommended Truck
        2.7 Our Team
        2.8 Our Blog
        2.9 Footer
        2.10 Copyright
    3.Blog   
    4.Blog Details   
    5.Listing
    6.Listing Detail 
    7.Booking 
    8.About Us 
    9.404 
    10.Coming Soon 
    11.Contact Us 
    12.FAQs 
    13.Gallery 
        ===========================*/
                         
                        CSS styles for support all kinds of different screen sizes

    If you would like to edit a specific section of the site, simply find the appropriate label in the .css file, and then scroll down until you find the appropriate style that needs to be edited.