ELEGANCE

Welcome
Thank you for purchasing this HTML template. If you have any questions that are beyond the scope of this
documentation, please visit our FAQ. Thank you!

Getting Started
To install this HTML template you will need to upload all files and folders using an FTP client. We
recommend using FileZilla FTP client. To upload your template you will need the following:
Domain
FTP Username
FTP Password
Once connected make sure to upload ALL files and folders within the HTML folder of your download.

In this Documentation

Logo
Menu
Slider
About
Who we are
Call to action
Services
Our Process
Portfolio
Our Plans
Team
Clients
Contact
Footer
Credits

Copyright All Rights Reserved | Powered By: Carino Technologies

ELEGANCE

LOGO SECTION
Folder Structure and Name:
File: index.html / Logo Section / class: logo

HOW TO CHANGE LOGO:

1. Change URL with your site link

<a href="Change here"><img class="logo" src="images/logo.png" alt="Elegance"></a>

2. Change Logo image

File path: Elegance/images/logo.png
<a href="# "><img class="logo" src="images/Change here" alt="Elegance"></a>

Copyright All Right Reserved| Powered By: Carino Technologies

ELEGANCE
MENU SECTION
Folder Structure and Name:
File: index.html / Menu Section / class: w-nav-link menu-li

Existing Menus

HOW TO CHANGE EXISTING MENU:

For example: If you want to change the About menu item simply change its name whatever you want. Give it a unique id
and here we go!

Run Time
<a class="w-nav-link menu-li" href="#about">ABOUT</a>

Custom
<a class="w-nav-link menu-li" href="#Change the uniqe id">Change the name</a>

INSERT NEW MENU:

Add this line of code after the menu item where you want to add new menu item.
For example if you want to add a new menu item Custom in between the Home and About , then add this line of
code in between the menu items.

<a class="w-nav-link menu-li" href="#custom">custom</a>

Copyright All Right Reserved| Powered By: Carino Technologies

ELEGANCE
SLIDER SECTION
Folder Structure and Name:
File: index.html / Slider Section / class: sp-slider clearfix

How to change existing Slider Images:

Run time Slider Item
<li><img src="images/slider/slider5.png" alt="image05" /></li>

Change Existing Image

For example you want to change images of slider. First of all upload images to this path images/slider/. Then change
the name of image in slider item.
<li><img src="image/slider/name of image" alt="image05" /></li>

Adding a New Slide

If you want to add another image slide, simply add the line of code and change the image name.
<li><img src="image/slider/name of image" alt=image06 " /></li>

Copyright All Right Reserved| Powered By: Carino Technologies

ELEGANCE
ABOUT SECTION
Folder Structure and Name:
File: index.html / About Section / class: about-parlex

Change the About Heading:

Run time
<h1 class="about-heading">ABOUT</h1>

Custom
<h1 class="about-heading">Change Heading here</h1>

Change the Picture.

Run time
<img class="about-img" src="images/about.png" alt="52de15aa5d3566c14300015e_about.png">

Custom
Just upload the image in this path images/ and change the image name in the code.
<img class="about-img" src="images/custom.png" alt="custom.png">

Copyright All Right Reserved| Powered By: Carino Technologies

ELEGANCE
WHO WE ARE SECTION
Folder Structure and Name:
File: index.html / Who We Are Section / class: exp service-parlex

Change the Who we are Heading:

Run time
<h3 class="experinc-box-h3">Who We Are</h3>

Custom
<h3 class="experinc-box-h3">Change Here</h3>

Change the Button Text and linked it:

<a class="ex-btn" href="#Custom Link">Custom Text</a>

Change Image:
<div class="col2-div"><img src="images/Custom.png"></div>

Copyright All Right Reserved| Powered By: Carino Technologies

ELEGANCE
CALL TO ACTION SECTION
Folder Structure and Name:
File: index.html / Call to Action Section / class: call-to-action

Change heading:
<h3 class="call-to-h3">Heading Here</h3>

Add description:
<p>Description Here</p>

Change the button text and linked it:

<div class="w-col w-col-3"><a class="call-to-butn" href="Give Link Here">Text Here</a>

Copyright All Right Reserved| Powered By: Carino Technologies

ELEGANCE
SERVICES SECTION
Folder Structure and Name:
File: index.html / Service Section / class: service-parlex

Service main Heading:

Run Time
<h1 class="service-heading">SERVICES</h1>

Custom
<h1 class="service-heading">Custom Heading</h1>

Change Icon Image:

<div class="service-icon"><img src="images/services/Custom.png"></div>

Change Icon Heading:

<h4 class="service-head">Custom</h4>

Copyright All Right Reserved| Powered By: Carino Technologies

ELEGANCE
OUR PROCESS SECTION
Folder Structure and Name:
File: index.html / Process Section / class: process-parlex

Our Process Main Heading:

<h1 class="our-process-heading">Custom Heading</h1>

Process Description:
<div class="process-text">Custom Paragraph</div>

Copyright All Right Reserved| Powered By: Carino Technologies

ELEGANCE

Icon Section Heading:

<h4 class="our-process-sys">Custom Heading </h4>

Icon Section Description:

<p class="process-paragraph">Custom Paragraph</p>

Icon Class Section:

<a href="#set-1" class="hi-icon (choose your icon class)">Custom Text</a>

Write your icon class without brackets.

Select your Icon class from below mentioned available classes.
Icon Classes:
1. hi-icon-support
2. hi-icon-cog
3. hi-icon-clock
4. hi-icon-videos
5. hi-icon-list
6. hi-icon-refresh
7. hi-icon-images
8. hi-icon-pencil
9. hi-icon-link
10. hi-icon-mail
11. hi-icon-location
12. hi-icon-archive
13. hi-icon-chat
14. hi-icon-bookmark
15. hi-icon-user
16. hi-icon-contract
17. hi-icon-star

10

Copyright All Right Reserved| Powered By: Carino Technologies

ELEGANCE
PORTFOLIO SECTION
Folder Structure and Name:
File: index.html / Portfolio Section / class: portfolio-parlex

Single portfolio post:

Use these details for adding new portfolio post or changing each single portfolio post.
<li>
<figure>
<img class=portfolio-images src="images/portfolio/custom.jpg" alt="Custom">
<figcaption>
<h3>Custom heading</h3>
<span>Custom subtitle</span>
<a href="Custom link">Button text</a>
</figcaption>
</figure>
</li>

11

Copyright All Right Reserved| Powered By: Carino Technologies

ELEGANCE
OUR PLANS SECTION
Folder Structure and Name:
File: index.html / Our-plan Section / class: our-plan-parlex

Single Plan Section:

Use these details for changing in single Our-Plan Section:

<div class="plan1">
<div class="plan1-ser1">
<h4>Custom Plan Heading</h4>
<div class="price">Custom Plan Price</div>
</div>
<p class="plan1-ser1-para">Custom Plan Description</p>
<a class="plan-1-butn" href="#Custom Button link">Custom Button Tex </a>
</div>

12

Copyright All Right Reserved| Powered By: Carino Technologies

ELEGANCE
TEAM SECTION
Folder Structure and Name:
File: index.html / Team Section / class: team-parlex

Single Team Section:

Use these details for changing an existing team member:

<div class="team-section">
<div class="team-image">
<img class="team-img" src="images/team/ Custom.png" alt="Custom.png">
</div>
<div class="team-des">
<h4 class="team-name">Custom Team member Name</h4>
<div class="team-name-des">Custom Team Member Designation</div>
</div>
<div class="team-social">
<div class="w-clearfix social-section">
<a href="https://www.facebook.com/Team member user name"><img class="social" src="images/social/Facebook.png"
alt="52dd249c929b601f5400054c_Facebook.png"></a>
</div>
</div>
</div>

13

Copyright All Right Reserved| Powered By: Carino Technologies

ELEGANCE
OUR CLIENTS SECTION
Folder Structure and Name:
File: index.html / Clients Section / class: clients-parlex

Change Clients Logo:

<li><img src="images/clients/Cutom.png" alt="Custom"></li>

14

Copyright All Right Reserved| Powered By: Carino Technologies

ELEGANCE
CONTACT SECTION
Folder Structure and Name:
File: index.html / Contact Section / class: contact-parlex

Running Map on Template:

<div class="w-widget w-widget-map contac-map" data-widget-latlng="37.782163,-122.400591" data-widgetstyle="roadmap" data-widget-zoom="10" data-widget-tooltip="Carino Headquater"></div>

Change Address on Map & Tooltip:

<div class="w-widget w-widget-map contac-map" data-widget-latlng="Your latitude,-Your longitude" data-widgetstyle="roadmap" data-widget-zoom="10" data-widget-tooltip="Write your Custom Tooltip"></div>

To find the latitude and longitude of your address Use this link:
http://www.latlong.net/
Contact Form File Path:
File: contact.php / $mail_to = newthinks@live.com;

Line # 6:
$mail_to = write your email;

Line # 7:
$subject= Write Your Custom Subject Line .$field_name;

15

Copyright All Right Reserved| Powered By: Carino Technologies

ELEGANCE
Contact Information Sections Icon Heading and Address Changing:
Running Contact Information section:
<h4 class="contact-col-head">Visit Us</h4> </div> <div><div class="contact-col-text">795 Folsom St., Suite 600<br>San Francisco, CA 94107</div></div>

Custom Contact Information Section

<h4 class="contact-col-head">Custom Heading</h4> </div> <div><div class="contact-col-text">Custom Text<br>Custom Text </div></div>

16

Copyright All Right Reserved| Powered By: Carino Technologies

ELEGANCE
FOOTER SECTION
Folder Structure and Name:
File: index.html / Footer Section / class: footer-parlex

Change Footer logo:

<img class="footer-logo" src="images/Custom.png" alt="Custom">

Link Social Icon:

<a href="https://www.facebook.com/Your User Name"><img class="fotter-social" src="images/social/Facebook.png"
alt="52dd249c929b601f5400054c_Facebook.png"></a>

17

Copyright All Right Reserved| Powered By: Carino Technologies

ELEGANCE
CREDITS
Graphics:
Unsplash
Isaac Montemayo

JQuery , Parallax Slider:

Codrops

CSS3 Animation:
Animation cheat sheet

18

Copyright All Right Reserved| Powered By: Carino Technologies