Main File Structure

All the file are well organized, its so easy to work with the template.
1. Unzip the files.
2. Open "Softim" 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.

                
                    Softim/
                    |    |                    
                    |    assets
                    |    ├── css/
                    |    |    └── animate.css
                    |    |    └── bootstrap.css
                    |    |    └── fontawesome-all.min.css
                    |    |    └── icomoon.css
                    |    |    └── lightcase.css
                    |    |    └── line-awesome.min.css
                    |    |    └── odometer.css
                    |    |    └── swiper.min.css
                    |    |    └── nice-select.css
                    |    |    └── aos.css
                    |    |    └── style.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-3.6.0.min.js
                    |         └── lightcase.js
                    |         └── main.js
                    |         └── odometer.min.js
                    |         └── swiper.min.js
                    |         └── viewport.jquery.js
                    |         └── aos.js
                    |         └── tweenmax.js
                    |         └── isotope.js
                    |         └── aos.js
                    │
                    ├── about.html
                    ├── blog.html
                    ├── blog-classic.html
                    ├── blog-details.html
                    ├── contact.html
                    ├── faq.html
                    ├── index.html
                    ├── index-two.html
                    ├── index-three.html
                    ├── plan.html
                    ├── portfolio.html
                    ├── project.html
                    ├── project-details.html
                    ├── service.html
                    ├── service-details.html
                    ├── service-details-two.html
                    ├── service-two.html
                    ├── team.html
                    ├── team-details.html
                
                

Customization

HTML Structure

<!-- Banner Column Start-->
<div class="col-xl-7 col-lg-7 mb-30">
    <div class="banner-content" data-aos="fade-right" data-aos-duration="1800">
        <h1 class="title">Smarter Way to Serve Digital Product Marketing</h1>
        <span class="sub-title">Build Your Innovations & Digital Future</span>
        <p>Personalization assumed up an excess of position in the showcasing space and has made each and every one of your messages exhausting and without feelings.</p>
        <div class="banner-arrow">
            <img src="assets/images/element/element-1.png" alt="element">
        </div>
        <div class="banner-widget">
            <div class="banner-widget-wrapper">
                <div class="banner-widget-left">
                    <div class="banner-widget-thumb">
                        <img src="assets/images/element/element-2.png" alt="element">
                    </div>
                </div>
                <div class="banner-widget-middle">
                    <div class="banner-widget-content">
                        <p><span>4,000+</span> Satisfied Clients</p>
                    </div>
                </div>
                <div class="banner-widget-right">
                    <div class="banner-widget-btn">
                        <a href="#0" class="btn--base">Let's Talk</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Banner Column End-->

CSS Structure

                
            /*---------------------
                Banner Column
            ----------------------*/
              
            .banner-section .banner-content {
                position: relative;
                z-index: 9;
              }
              .banner-section .banner-content .title {
                margin-bottom: 30px;
                color: #fff;
                font-weight: 700;
                line-height: 1.4;
              }
              @media only screen and (max-width: 991px) {
                .banner-section .banner-content .title {
                  margin-bottom: 10px;
                }
              }
              .banner-section .banner-content .sub-title {
                color: #F8D458;
                font-weight: 600;
                margin-bottom: 15px;
              }
              @media only screen and (max-width: 991px) {
                .banner-section .banner-content .sub-title {
                  font-size: 18px;
                  line-height: 1.4;
                  margin-bottom: 15px;
                }
              }
              .banner-section .banner-content p {
                color: #fff;
                width: 61%;
                line-height: 1.8em;
              }
              @media only screen and (max-width: 991px) {
                .banner-section .banner-content p {
                  width: 100%;
                }
              }
              .banner-section .banner-content.two .banner-content-header {
                text-align: center;
              }
              .banner-section .banner-content.two .title {
                color: #1C1C1C;
                margin-bottom: 0;
              }

                
            

Sources & Credits

• Fonts
  • Jost
  • Poppins
• Icons
  • Fontawesome
  • Icomoon
• CSS
  • Animate
  • Bootstrap
  • Swiper Slide
  • Lightcase
• JS
  • Swiper Slide
  • Bootstrap
  • Jquery

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.

Themeim