Howdy!

You are a shining owner of a regular license based on Raful Beauty Salon Slider.

First of all, Thank you so much for purchasing this product and for being my loyal customer. You are entitled to get free updates to this product + exceptional support (as per market policy) from the author directly.

This documentation is to help you understand the product code structure. Please go through the documentation carefully to understand how this product is made and how to edit this properly. Basic HTML and CSS knowledge is required to customize.

1. Getting Started

When you are ready to use this product, you must first upload the files to a local or remote server. In this regard, unzip the package you have downloaded from themeforest. In extracted folder you can see following folders:

Package contents:

• index.html — Main HTML file of the project. You'll upload on your server.
• assets — Contains all the original product files comprises of CSS, JS etc. This is the folder which you'll upload on your server after necessary modifications.
• documentation — Inside this folder, you will find the same documentation updated with the latest changes.

Details regarding contents and structure of product folder is given below.

2. HTML Structure

This product is a responsive image slider which built with Bootstrap 5.1.3 Framework and you can customize it very easily. All of the information within the main content area is nested within a header, footer and div with an class of "content". Here is the general structure. Note that for brevity, I am not including content that isn’t relevant to the technique.

  

    
      
...
      

      
      
...
      

      
      
      

  
  

3. CSS Files

We're using two CSS files in this product.

• https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css — Bootstrap Framework 5.1.3. This outsourcing CSS design file is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system.
• style.css — custom style file.

The second file contains all of the specific stylings for the page. The file is separated into sections using:

/*-----------------------------------------------------------------------------------

    CSS INDEX
    ===================

    1. - FONTS

    2. - CUSTOMIZE THE CAROUSEL

    3. - RESPONSIVE

-----------------------------------------------------------------------------------*/

/* 1. - FONTS
-------------------------------------------------- */
    @font-face {
        font-family: 'Dita Sweet';
        src: url('../font/DitaSweet/DitaSweet.eot');
        src: url('../font/DitaSweet/DitaSweet.eot?#iefix') format('embedded-opentype'),
            url('../font/DitaSweet/DitaSweet.woff2') format('woff2'),
            url('../font/DitaSweet/DitaSweet.woff') format('woff'),
            url('../font/DitaSweet/DitaSweet.ttf') format('truetype'),
            url('../font/DitaSweet/DitaSweet.svg#DitaSweet') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    @font-face {
        font-family: 'DidotItalic';
        src: url('../font/DidotItalic/DidotItalic.eot');
        src: url('../font/DidotItalic/DidotItalic.eot?#iefix') format('embedded-opentype'),
            url('../font/DidotItalic/DidotItalic.woff2') format('woff2'),
            url('../font/DidotItalic/DidotItalic.woff') format('woff'),
            url('../font/DidotItalic/DidotItalic.ttf') format('truetype'),
            url('../font/DidotItalic/DidotItalic.svg#DidotItalic') format('svg');
        font-weight: normal;
        font-style: italic;
    }

/* 2. - CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

    /* Carousel base class */
    .carousel {
        height: 100vh;
    }


/* 3. - RESPONSIVE
-------------------------------------------------- */

    @media only screen and (max-width: 1160px) {
        .carousel-caption {
            left: 10%;
            right: 10%;
        }
        .carousel-title {
            font-size: 4rem;
        }
    }

All styling related files of this product can be found in this folder path assets/css

  
    css/
    |
    |-- style.css
  

As it can be seen, the folder contains one css file.
style.css custom style file.

4. Javascript Files

This product imports one Javascript file.

• https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js — Bootstrap Framework 5.1.3. This outsourcing file is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system.

5. Support Desk

Please be reminded that you have purchased a very affordable product and you have not paid for a full-time web design agency. Occasionally, we will help with small tweaks, but these requests will be put on a lower priority due to their nature.

6. Files & Resources

The product uses following resources by third parties.

• Bootstrap 5.1.3
• Font used
  • Dita Sweet
  • Didot Italic

7. PHP Code Explanation

index.php file for deploy and init on docker container, netlify or heroku

9. Regular Updates

We’re always improving our skills and knowledge so we’re making changes regularly. From bug fixes to new awesome features, updates generally come at least twice a month.

  V. 1.0.0 – 09.02.2024
  - Initial release