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.


					
					LOGO
					
                

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


  
         

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 Down Arrow
1 / 3

UPDATE ABOUTUS SECTION


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


 
      
About Image

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 .

Slider Image

UPDATE PRICING SECTION


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


   
      
icon1
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


   
                  
Team Image
Team Zoom

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.


 
 

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



 
            
Testimonial1
Quote Image

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

Anna Pearson
Testimonial2
Quote Image

I just love the Makeup and my Hair Style!

Emaan Mackay
Testimonial3
Quote Image

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.



               
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.



Date

UPDATE CONTACT DETAIL

Just simply replace your content in html code.


				     
                     
Calennder
  • Monday to Friday
    10:00AM - 10:00PM
  • Saturday & Sunday
    Closed
Map
577 Taylor Street, West Nyack, New York
Telephone
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.


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.


 
Blog Image
Blog Profile

Aron Martine

March 7, 2019

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