## Razzle

### Beauty Salon HTML Template

Created : 18/3/2019
By : MythicsDesign
Email : mail@mythicsdesign.com

Thank you for purchasing Razzle Beauty Salon HTML Template. If you have any questions that are beyond the scope of this help file, please feel free to email at mail@mythicsdesign.com
Thankyou so much!

### Template Features

- Clean & Simple Design
- Advance Bootstrap 4 Framework
- HTML5 & CSS3
- CSS3 Animations
- Fully Responsive Design
- All files are well commented
- Crossbrowser Compatible with IE10+, Firefox, Safari, Opera, Chrome
- Extensive Documentation

## HTML Structure

### The html template uses Latest Bootstrap v4.0.0 with valid HTML5 tags. This theme is a responisve layout with 4 column Support column. All of the information in content area is nested within a class and comes with predefined classes.

### Basic Grid HTML

For a simple two column layout, create a .container and add the appropriate number of .col-md* columns.

Given this example, we have .col-md-4 and .col-md-8, making for 12 total columns and a complete row.

        ...
        ...

### Nesting Columns

To nest your content with the default grid, add a new .container and set of .col-md* columns within an existing .col-md* column. Nested rows should include a set of columns that add up to the number of columns of its parent.

            Level 1 column

                Level 2
                Level 2

            Level 2 column

## CSS Files and Structure

### Mainly three main CSS files are used in this theme. The first one bootstrap.css, second one is style.css which for this template and third one is responsive.css to control responsive layouts.

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.

These are the css files that are loaded into top of the html templates labled as stylesheet css.

### Fonts

By default, the template loads this font from Google Web Font Services, you can change the font with the one that suits you best.

## Jquery and javascript

### This theme imports three types of Javascript files.

- jQuery
- Custom scripts (main.js)
- Some plugins
- jQuery is a Javascript library that greatly reduces the amount of code that you must write.
- Most of the animation in this site is carried out from the customs scripts. There are a few functions worth looking over.

In addition to the custom scripts, I have implemented few javascripts to create the effects and animations. The only necessary thing to know is how to call the method

These are the JS files that are loaded into templates in end of the Body Section.

## How to edit Sections

### LOGO

Lets start updating the template. Open index.html file and follow the steps.

Most of the updates are same for all pages. So will explain once here.

Replace "images/logo.png" with your logo image url source or website name .

Replace "images/logo.png" with your logo image url source or website name .

### NAVMENU

This is the basic structure for navigation.

Add your own menu item to that ul li item. and if you want to add dropdown menu just make a nesting ul li with class of sub-menu

### UPDATE HERO SECTION

Just simply replace your content in html code. We use swiper.js for slider.you can change content,background image as example below.

Swiper Carousel

                                     We brings out the beauty in you.

                                     We brings out the beauty in you.

                                     We brings out the beauty in you.

### UPDATE HERO BOTTOM SECTION

Hero Scroll is for Scroll Down,next is Slider Pagination (numertic values). on right side it have arrows for swipe left or right and beside that there have social icons.

                         Scroll down

                         1 / 3

### UPDATE ABOUTUS SECTION

Just simply change text content to update details in about us section.

##

                                     About Us

                                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.

### UPDATE SERVICES SECTION

Just simply replace your content in html code. We use slick.js for slider.you can change content, image as example below.

Slick Carousel

##

######

                   Services

                      01
                      Hair Styling

                         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt .

### UPDATE PRICING SECTION

Just simply change text content to update details in pricing section.

                                  Hairstyle

                                     Blow Dry
                                        $10
                                     Dry Wash
                                        $30
                                     Hair Color
                                        $40
                                     Hair Treatment
                                        $50
                                     Hair straightening
                                        $60

### UPDATE EXPERT SECTION

To Change Expert section replace your content and image with the conntent given below.also change content of modal popup that is appear on click of image

###

####

####

                                     Christie Pratt

    									Makeup Expert
    									 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

                                  Christie Pratt

                                  Makeup Expert

### ADD A POPUP VIDEO AND CHANGE THE TEXT

To add your video in popup just replace the youtube link of your video as example given below. We used lity.js for video popup.To Change the text and image replace your content with below one.

Lity

### UPDATE PORTFOLIO SECTION

To change in Portfolio We used filter and masonry structure both.

### APPLY CATEGORY TO PORTFOLIO ITEMS

Just simply replace your button title in html code.

                         All
                         Makeup
                         Hair Style
                         Eyebrow

### EDIT PORTFOLIO ITEM CARD

Just simply replace your content in html code. you can change deatils and images. we used Isotope.js for popup.We used Filter Isotope Gallry for this.

Isotope

### UPDATE TESTIMONIAL SECTION

Just simply replace your content in html code. We use slick.js for slider.you can change content,logo image as example below.

Slick Carousel

###

#####

###

#####

###

#####

                                     I just love the new look they gave it to my hair and it’s Amazing!
                                     Anna Pearson

                                     I just love the Makeup and my Hair Style!
                                     Emaan Mackay

                                     Totally Changed the look  with Makeup and Hairs
                                     Kelis Knott

### UPDATE BLOG SECTION

Just simply replace your content in html code.you can change images, blog details as example below.

                         Hair style

                            The new Hypster style for your hair is new fashion.

                               March 7, 2019

                               By : Admin

### UPDATE CONTACT FORM SECTION

Just simply replace your lable in html form code.

                               FULL NAME

                               PHONE

                               Email

                               SERVICE

                               DATE

                               MESSAGE

### UPDATE CONTACT DETAIL

Just simply replace your content in html code.

                                  Monday to Friday
                                  10:00AM - 10:00PM

                                  Saturday & Sunday
                                  Closed

                            577 Taylor Street, West Nyack, New York

                            3478-254-6833

### UPDATE MAP

Just simply replace your content in iframe src.

### UPDATE FOOTER

To Change footer replace your code with this and to change icons replace your icons with this.

                   © Copyright 2019 Razzle

### BLOG PAGE

### EDIT BLOG ARTICAL CARD

Just simply replace your deatils in html code.

                         Hair style

                            The new Hypster style for your hair is new fashion.

                               March 7, 2019

                               By : Admin

### BLOG DETAILS PAGE

### EDIT BLOG HEADER SECTION

Just simply replace your deatils in html code.

####

#####

                               Aron Martine

                                  March 7, 2019

                            Hair style

### EDIT BLOG TEXT SECTION

Just simply replace your deatils in html code.

         Lorem Ipsum is simply dummy text of the printing and typesetting industry.

                         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.  It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

### ADD QUOTES

Just copy paste following code whenever you want to add quotes.

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

## Sources and Credits

### Fonts Used int the template are google fonts, you can find theme on Google Fonts API

Fonts Used are :

Poppins
Yeseva One

Sliders Used Are :

Slick Carousel

Swiper Carousel

Plugins Used Are :

Popup (can be located in js & css folder)

isotope(can be located in js folder)

FontAwesome Icons(can be located in font folder)

Every Code is properly commented for Editing Ease.

## php form

### For working form you need to add following items inside contact.php file

- $mail->Host = "your server name"; // SMTP server
- $mail->Username = "your server user name"; // SMTP server username
- $mail->Password = "your server password"; // SMTP server password
- $to = "your personal email where you want to receive messages";

## Support

### Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme.If you have any queries, please feel free to contact us via email.

Email Us at : mail@mythicsdesign.com