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.
Razzle
Beauty Salon HTML Template
Created : 18/3/2019By : 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 columnLevel 2Level 2Level 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.
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.
Services
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
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.
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.
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.
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.
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.
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.
The new Hypster style for your hair is new fashion.March 7, 2019By : Admin
BLOG DETAILS PAGE
EDIT BLOG HEADER SECTION
Just simply replace your deatils in html code.
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 :
Sliders Used Are :
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