elegance documentation

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

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>

ELEGANCE


MENU SECTION


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>

ELEGANCE


SLIDER SECTION


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>

ELEGANCE


ABOUT SECTION


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">

ELEGANCE


WHO WE ARE SECTION


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>

ELEGANCE


CALL TO ACTION SECTION


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>

ELEGANCE


SERVICES SECTION


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>

ELEGANCE


OUR PROCESS SECTION


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>

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

ELEGANCE


PORTFOLIO SECTION


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>

ELEGANCE


OUR PLANS SECTION


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>

ELEGANCE


TEAM SECTION


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>

ELEGANCE


OUR CLIENTS SECTION


File: index.html / “Clients Section” / class: “clients-parlex”

Change Clients Logo:

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

ELEGANCE


CONTACT SECTION


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;



ELEGANCE


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>

ELEGANCE


FOOTER SECTION


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>

ELEGANCE


CREDITS

Graphics: Unsplash

Isaac Montemayo

JQuery , Parallax Slider:

Codrops

CSS3 Animation:

Animation cheat sheet

http://unsplash.com/

http://cargocollective.com/isaac317

http://www.codrops.com/

http://www.justinaguilar.com/animations/index.html

elegance documentation

Documents

custom change heading

menu section class

custom text change image

action change heading

slider section class

logo section class

action section class

custom elegance