Panthar- Security HTML-5 Template

Created: 29 March 2022
Latest Update: 29 March 2022
By: themebuz
Email: support@themebuz.com

Thank you for purchasing our theme. Panthar - Panthar HTML-5 Template. If you have any question, please feel free to contact us.

Main File Structure

All the file are well organized, its so easy to work with the template.
1. Unzip the files.
2. Open "Panthar" folder.
You will see 4 directories, css, fonts, images and js.
In the first folder Content you will find style.css and other styling files the all the other files expect the htmls.
Js folder contain only the jquery library. Fonts folder contain essetial font files for fonts.

                
                    Panthar/
                    |    |                    
                    |    assets
                    |    ├── css/
                    |    |    └── animate.min.css
                    |    |    └── bootstrap.min.css
                    |    |    └── bootstrap4.min.css
                    |    |    └── fontawesome-all.min.css
                              └── meanmenu.css
                    |    |    └── magnific-popup.css
                    |    |    └── slick.css
                    |    |    └── style.css
                    |    |    └── responsive.css
                    |    |    
                    |    |   
                    |    |
                    |    ├── fonts
                    |    |    └── fa-brands-400.eot
                    |    |    └── fa-brands-400.svg
                    |    |    └── fa-brands-400.ttf
                    |    |    └── fa-brands-400.woff
                    |    |    └── fa-brands-400.woff2
                    |    |    └── fa-regular-400.eot
                    |    |    └── fa-regular-400.svg
                    |    |    └── fa-regular-400.ttf
                    |    |    └── fa-regular-400.woff
                    |    |    └── fa-regular-400.woff2
                    |    |    └── fa-solid-900.eot
                    |    |    └── fa-solid-900.svg
                    |    |    └── fa-solid-900.ttf
                    |    |    └── fa-solid-900.woff
                    |    |    └── fa-solid-900.woff2
                    |    |    └── FontAwesome.otf
                    |    |    └── fontawesome-webfont.eot
                    |    |    └── fontawesome-webfont.svg
                    |    |    └── fontawesome-webfont.ttf
                    |    |    └── fontawesome-webfont.woff
                    |    |    └── fontawesome-webfont.woff2
                    |    |
                    |    ├── js/
                    |         └── bootstrap.min.js
                    |         └── jquery.js
                    |         └── main.js
                    |         └── wow.js
                    │         └── bootstrap4.min.js
                    │         └── isotope.pkgd.min.js
                    │         └── jquery.magnific-popup.min.js
                    │         └── jquery.meanmenu.min.js
                    │         └── scriptFive.js
                    │         └── slick.min.js
                    │
                    ├── about.html
                    ├── index.html
                    ├── index-2.html
                    ├── blog.html
                    ├── blog-classic.html
                    ├── blog-single.html
                    ├── case-single.html
                    ├── case-study.html
                    ├── contact.html
                    └── faq.html
                    └── gallary.html
                    └── get-quote.html
                    └── service.html
                    └── service-single.html
                    └── team.html
                    └── team-details.html
                    └── 404.html
                
                

Customization

How to Change Site Title And Favicon Icon

How to Change Logo

How to Change Phone Number, E-Mail Address and Address

How to Change Copyright Text

HTML Structure

The base structure was organized by row, col-** class


   <!-- Image Column Start-->
   <div class="process_area mb-120">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="section_wrapper mb-80 text-center">
                    <h4 class="sub_title wow animate__flipInX" data-animation="fadeInUp" data-delay="1s">How it
                        works</h4>
                    <h2 class="title wow animate__bounceIn" data-animation="fadeInUp" data-delay="1.5s">How
                        Panthar
                        works</h2>
                </div>
            </div>
        </div>
        <div class="row align-items-center">
            <div class="col-md-12 col-xl-8 text-center">
                <div class="row">
                    <div class="col-md-4 col-sm-6">
                        <div class="process_card wow animate__fadeIn" data-animation="fadeInUp" data-delay="1s"
                            data-wow-duration="1s">
                            <div class="process_icon">
                                <img class="process_one" src="./assets/img/services/ss_one.png"
                                    alt="process_icon">

                            </div>
                            <div class="process_content">
                                <h4>01.PLACE WORK ORDER</h4>
                                <p>There are many variation and of passages</p>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
  <!-- Image Column End-->


CSS Structure

The base structure was organized by row, col-** class
                
              /*---------------------
                    Image Column
              ----------------------*/
              
              .custom-container {
                background: #ffffff;
                border-radius: 14px;
                padding: 0px 19px;
              }
              
              .custom-width {
                margin-left: 133px;
                margin-right: 133px;
              }
              
              .lan_currencey {
                margin-left: -27px;
              }
              
              .sidebar_icon {
                flex: 0.4;
              }
              
              .lan_currencey {
                margin-left: 10px;
                flex: none;
              }
              
              .menu_essential ul li {
                display: inline-block;
                margin-right: 30px;
              }
              .menu_essential ul li a {
                color: #3BBEFF;
                text-transform: uppercase;
                font-size: 16px;
              }
              
              .outline_two {
                background-color: transparent;
                padding: 10px 35px !important;
                border-radius: 50px;
                color: #FFA03A !important;
                text-transform: capitalize;
                display: inline-block;
                font-weight: 600;
                border: 1px solid #FFA03A;
              }
              .outline_two svg {
                margin-left: 10px;
              }
              
              .cmn_btn_two {
                background-color: transparent;
                padding: 15px 35px !important;
                border-radius: 50px;
                color: #ffffff !important;
                text-transform: capitalize;
                display: inline-block;
                font-weight: 600;
                position: relative;
                z-index: 9;
                background-color: #3BBEFF;
              }
              .cmn_btn_two svg {
                margin-left: 20px;
              }
              
              .slider_two {
                background: #F5F9FF;
                min-height: 950px;
                position: relative;
                align-items: center;
                overflow: hidden;
              }
              
              .header_area_two {
                position: absolute;
                left: 0;
                right: 0;
                top: 15px;
                z-index: 9;
                overflow: hidden;
              }
              
              .slide_content_two {
                padding-top: 310px;
              }
              .slide_content_two h4 {
                font-size: 24px;
                font-family: "Kalam";
                margin-bottom: 15px;
              }
              .slide_content_two h4 span {
                color: #FFA03A;
                font-weight: 700;
                display: inline-block;
                padding-left: 15px;
              }
              .slide_content_two p {
                font-size: 16px;
                font-weight: 600;
                margin-bottom: 60px;
                line-height: 2;
              }
              .slide_content_two h2 {
                font-size: 55px;
                line-height: 1.4;
                font-weight: 700;
                margin-bottom: 20px;
              }
              

                
            

Supports

Thank you for reading the documentaion. If you still have any question or any problem, please contact with us. We will give you best support. Thanks.

themebuz