Page 1
ELEGANCE
1 Copyright All Rights Reserved | Powered By: Carino Technologies
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
Page 2
ELEGANCE
2 Copyright All Right Reserved| Powered By: Carino Technologies
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>
Page 3
ELEGANCE
3 Copyright All Right Reserved| Powered By: Carino Technologies
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>
Page 4
ELEGANCE
4 Copyright All Right Reserved| Powered By: Carino Technologies
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>
Page 5
ELEGANCE
5 Copyright All Right Reserved| Powered By: Carino Technologies
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">
Page 6
ELEGANCE
6 Copyright All Right Reserved| Powered By: Carino Technologies
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>
Page 7
ELEGANCE
7 Copyright All Right Reserved| Powered By: Carino Technologies
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>
Page 8
ELEGANCE
8 Copyright All Right Reserved| Powered By: Carino Technologies
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>
Page 9
ELEGANCE
9 Copyright All Right Reserved| Powered By: Carino Technologies
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>
Page 10
ELEGANCE
10 Copyright All Right Reserved| Powered By: Carino Technologies
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
Page 11
ELEGANCE
11 Copyright All Right Reserved| Powered By: Carino Technologies
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>
Page 12
ELEGANCE
12 Copyright All Right Reserved| Powered By: Carino Technologies
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>
Page 13
ELEGANCE
13 Copyright All Right Reserved| Powered By: Carino Technologies
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>
Page 14
ELEGANCE
14 Copyright All Right Reserved| Powered By: Carino Technologies
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>
Page 15
ELEGANCE
15 Copyright All Right Reserved| Powered By: Carino Technologies
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-widget-
style="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-widget-
style="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 = ‘[email protected] ’;
Line # 6:
$mail_to = ‘write your email’;
Line # 7:
$subject= ‘Write Your Custom Subject Line’ .$field_name;
Page 16
ELEGANCE
16 Copyright All Right Reserved| Powered By: Carino Technologies
Contact Information Section’s 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>
Page 17
ELEGANCE
17 Copyright All Right Reserved| Powered By: Carino Technologies
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>
Page 18
ELEGANCE
18 Copyright All Right Reserved| Powered By: Carino Technologies
CREDITS
Graphics: Unsplash
Isaac Montemayo
JQuery , Parallax Slider:
Codrops
CSS3 Animation:
Animation cheat sheet