Carsore- Car Insurance HTML-5 Template

Created: 26 November 2021
Latest Update: 26 November 2021
By: Themeim
Email: contact@themeim.com

Thank you for purchasing our theme. Carsore - Car Insurance 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 "Carsore" 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.

                
                    Carsore/
                    ├── css/
                    |    └── animate.css
                    |    └── bootstrap.css
                    |    └── color-switcher-design.css
                    |    └── custom-animate.css
                    |    └── flaticon.css
                    |    └──font-awesome.css
                    |    └── footer.css
                    |    └── global.css
                    |    └── header.css
                    |    └── hover.css
                    |    └── jquery.fancybox.min.css
                    |    └── jquery.mCustomScrollbar.min.css
                    |    └── jquery-ui.css
                    |    └── owl.css
                    |    └── preloader.css
                    |    └── responsive.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
                    |    └── flaticon.css
                    |    └── flaticon.css.map
                    |    └── flaticon.html
                    |    └── flaticon.scss
                    |    └── flaticon.svg
                    |    └── flaticon.ttf
                    |    └── flaticon.woff
                    |    └── flaticon.woff2
                    |    └── FontAwesome.otf
                    |    └── fontawesome-webfont.eot
                    |    └── fontawesome-webfont.svg
                    |    └── fontawesome-webfont.ttf
                    |    └── fontawesome-webfont.woff
                    |    └── fontawesome-webfont.woff2
                    |    └── glyphicons-halflings-regular.eot
                    |    └── glyphicons-halflings-regular.svg
                    |    └── glyphicons-halflings-regular.ttf
                    |    └── glyphicons-halflings-regular.woff
                    |    └── glyphicons-halflings-regular.woff2
                    |    └── revicons90c6.eot
                    |    └── revicons90c6.svg
                    |    └── revicons90c6.ttf
                    |    └── revicons90c6.woff
                    |
                    ├── js/
                    │   └── appear.js
                    │   └── bootstrap.min.js
                    │   └── color-settings.js
                    │   └── jquery.easing.min.js
                    │   └── jquery.fancybox.js
                    │   └── jquery.js
                    │   └── jquery.mCustomScrollbar.concat.min.js
                    │   └── jquery.mixitup.js
                    │   └── jquery.paroller.min.js
                    │   └── jquery-ui.js
                    │   └── map-script.js
                    │   └── nav-tool.js
                    │   └── owl.js
                    │   └── parallax.min.js
                    │   └── popper.min.js
                    │   └── respond.js
                    │   └── script.js
                    │   └── tilt.jquery.min.js
                    │   └── validate.js
                    │   └── wow.js
                    │
                    ├── about.html
                    ├── blog.html
                    ├── contact.html
                    ├── home-2.html
                    ├── index.html
                    ├── insurance-form.html
                    ├── login.html
                    ├── news-detail.html
                    ├── not-found.html
                    ├── privacy.html
                    ├── services.html
                    ├── services-detail.html
                    ├── signup.html
                    ├── team.html
                    ├── team-detail.html
                    └── terms.html

Customization

How to Change Site Title And Favicon Icon

How to Change Logo

How to Change Your Menu Title

How to Change Slider Image and Text

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="image-column col-lg-6 col-md-12 col-sm-12">
    <div
      class="pattern-layer-five"
      style="background-image: url(images/main-slider/pattern-5.png);">
    </div>
    <div class="inner-column">
      <div class="image">
        <img src="images/main-slider/content-image.png" alt="" width="817px" height="411px"/>
      </div>
    </div>
  </div>
  <!-- Image Column End-->

CSS Structure

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

                
              /*---------------------
                    Image Column
              ----------------------*/
              
              .main-slider .image-column {
                position: relative;
              }
              
              .main-slider .image-column .pattern-layer-five {
                position: absolute;
                right: -5px;
                top: -179px;
                width: 536px;
                height: 536px;
                opacity: 0;
                background-repeat: no-repeat;
                transition: all 900ms ease;
                -moz-transition: all 900ms ease;
                -webkit-transition: all 900ms ease;
                -ms-transition: all 900ms ease;
                -o-transition: all 900ms ease;
                transform: translateY(150px);
              }
              
              .main-slider .active .image-column .pattern-layer-five {
                opacity: 1;
                transform: translateY(0px);
              }
              
              .main-slider .image-column .inner-column {
                position: relative;
                padding-right: 40px;
              }
              
              .main-slider .image-column .image {
                position: relative;
                -webkit-transition: all 1000ms ease;
                -moz-transition: all 100ms ease;
                -ms-transition: all 1000ms ease;
                -o-transition: all 1000ms ease;
                transition: all 1000ms ease;
                transform: translateX(1024px) scale(0.7);
                filter: blur(4px);
              }
              
              .main-slider .image-column .image img {
                min-width: 817px;
              }
              
              .main-slider .active .image-column .image {
                transform: translateX(0px) scale(1);
                filter: blur(0);
                -webkit-transition-delay: 150ms;
                -moz-transition-delay: 150ms;
                -ms-transition-delay: 150ms;
                -o-transition-delay: 150ms;
                transition-delay: 150ms;
              }

Sources & Credits

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