1062 lines
43 KiB
HTML
Executable File
1062 lines
43 KiB
HTML
Executable File
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
||
<!-- Title -->
|
||
<title>LeafLine | Documentation</title>
|
||
|
||
<!-- Font-Awesome (CSS) -->
|
||
<link rel="stylesheet" href="assets/vendors/font-awesome/css/all.min.css" />
|
||
|
||
<!-- Custom Stylesheets -->
|
||
<link rel="stylesheet" href="assets/css/main.css" />
|
||
<link rel="stylesheet" href="assets/css/responsive.css" />
|
||
|
||
</head>
|
||
<body>
|
||
|
||
<!-------------------- Menubar -------------------->
|
||
<div id="menu" class="fas fa-bars"></div>
|
||
|
||
|
||
|
||
<!-------------------- Scroll-Top Area (Start) -------------------->
|
||
<a href="#Home" class="scroll-top">
|
||
<i class="fas fa-angle-up"></i>
|
||
</a>
|
||
<!-------------------- Scroll-Top Area (End) -------------------->
|
||
|
||
|
||
|
||
<!-------------------- Sidebar Area (Start) -------------------->
|
||
<header class="sidebar">
|
||
|
||
<!-- Logo -->
|
||
<a class="logo" href="#Home">
|
||
<h2>Ns_Docs</h2>
|
||
</a>
|
||
|
||
<nav class="navbar">
|
||
<a href="#Installation">Installation</a>
|
||
<a href="#Html_Structure">HTML Structure</a>
|
||
<a href="#CSS_Structure">CSS Structure</a>
|
||
<a href="#JS_Structure">JS Structure</a>
|
||
<a href="#PHP_Structure">PHP Structure</a>
|
||
<a href="#Customization">Customization</a>
|
||
<a href="#source_credits">Source & Credits</a>
|
||
</nav>
|
||
|
||
</header>
|
||
<!-------------------- Sidebar Area (End) -------------------->
|
||
|
||
|
||
|
||
<!-------------------- Home Area (Start) -------------------->
|
||
<section class="Home" id="Home">
|
||
|
||
<div class="content">
|
||
<h1>documentation</h1>
|
||
<h5>LeafLine</h5>
|
||
<p>Thank you so much for purchasing our item from templatemonster.</p>
|
||
</div>
|
||
|
||
</section>
|
||
<!-------------------- Home Area (End) -------------------->
|
||
|
||
|
||
|
||
<!-------------------- Installation Area (Start) -------------------->
|
||
<section class="Installation" id="Installation">
|
||
|
||
<div class="heading">
|
||
<h2>Installation</h2>
|
||
</div>
|
||
|
||
<div class="content">
|
||
|
||
<p>Follow the steps below to setup your site template:</p>
|
||
|
||
<ol>
|
||
<li>Unzip the downloaded package and open the <strong>/HTML</strong> folder to find all the template files. You will need to upload these files to your hosting web server using FTP or localhost in order to use it on your website.</li>
|
||
<li>Below is the folder structure and needs to be uploaded to your website or localhost root directory:
|
||
<ul>
|
||
<li><code>HTML/assets</code> - Contains all of the assets referenced
|
||
<ul>
|
||
<li><code>HTML/assets/css</code> - Stylesheet files</li>
|
||
<li><code>HTML/assets/images</code> - Images</li>
|
||
<li><code>HTML/assets/js</code> - Javacript files</li>
|
||
<li><code>HTML/assets/php</code> - Php files</li>
|
||
<li><code>HTML/assets/vendors</code> – All external libs.</li>
|
||
</ul>
|
||
</li>
|
||
<li><code>HTML/pages</code> - Contains all of the assets referenced
|
||
<ul>
|
||
<li><code>HTML/pages/About</code> - About html files</li>
|
||
<li><code>HTML/pages/Pages</code> - Other pages html files</li>
|
||
<li><code>HTML/pages/Service</code> - Service html files</li>
|
||
<li><code>HTML/pages/Project</code> - Project html files</li>
|
||
<li><code>HTML/pages/Blog</code> - Blog html files</li>
|
||
<li><code>HTML/pages/Shop</code> - Shop html file</li>
|
||
<li><code>HTML/pages/Contact</code> – Contact html file</li>
|
||
</ul>
|
||
</li>
|
||
<li><code>HTML/index.html</code> - Homepage
|
||
</ul>
|
||
</li>
|
||
<li>You should upload all or specific HTML files as per your need.</li>
|
||
<li>You are good to go for adding your content now!</li>
|
||
</ol>
|
||
|
||
</div>
|
||
|
||
</section>
|
||
<!-------------------- Installation Area (End) -------------------->
|
||
|
||
|
||
|
||
<!-------------------- HTML Structure Area (Start) -------------------->
|
||
<section class="Html_Structure" id="Html_Structure">
|
||
|
||
<div class="heading">
|
||
<h2><span>HTML</span> structure</h2>
|
||
</div>
|
||
|
||
<div class="content">
|
||
|
||
<ol>
|
||
|
||
<li>This template includes the following <strong>HTML</strong> files:
|
||
<ul>
|
||
<li><code>HTML/index.html</code> - Homepage HTML file</li>
|
||
<li><code>HTML/pages</code> - Contains all the HTML pages:
|
||
<ol>
|
||
|
||
<!-- About HTML files -->
|
||
<li><code>HTML/pages/About</code> - About HTML Files
|
||
<ul>
|
||
<li><code>HTML/pages/About/About.html</code> - Main About page providing information about our gardening and landscaping services.</li>
|
||
<li><code>HTML/pages/About/Testimonials.html</code> - Page showcasing testimonials or feedback from our satisfied clients about our gardening and landscaping work.</li>
|
||
<li><code>HTML/pages/About/Team.html</code> - Page presenting information about our skilled gardening and landscaping team members.</li>
|
||
<li><code>HTML/pages/About/Team-Single.html</code> - Detailed view of a specific team member in our gardening and landscaping team.</li>
|
||
<li><code>HTML/pages/About/Faqs.html</code> - Frequently asked questions related to our gardening and landscaping services.</li>
|
||
<li><code>HTML/pages/About/WhyUs.html</code> - Page explaining why clients should choose LeafLife — featuring our values, quality assurance, and sustainable practices.</li>
|
||
<li><code>HTML/pages/About/History.html</code> - Page sharing LeafLife’s story, journey, and growth in the gardening and landscaping industry.</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<!-- Other Pages HTML Files -->
|
||
<li><code>HTML/pages/Pages</code> - Other Pages HTML Files
|
||
<ul>
|
||
<li><code>HTML/pages/Pages/Gallery.html</code> - Page showcasing a gallery of images related to our gardening and landscaping designs and installations.</li>
|
||
<li><code>HTML/pages/Pages/Pricing.html</code> - Page outlining the pricing structure for our gardening and landscaping services.</li>
|
||
<li><code>HTML/pages/Pages/Process.html</code> - Page explaining our process for providing gardening and landscaping installations.</li>
|
||
<li><code>HTML/pages/Pages/Awards.html</code> - Page providing information about awards and recognitions received for our gardening and landscaping work.</li>
|
||
<li><code>HTML/pages/Pages/Events.html</code> - Page providing information about events and workshops related to gardening and landscaping.</li>
|
||
<li><code>HTML/pages/Pages/Event-Single.html</code> - Detailed view of a specific gardening or landscaping event.</li>
|
||
<li><code>HTML/pages/Pages/Careers.html</code> - Page providing information about career opportunities in gardening and landscaping with our company.</li>
|
||
<li><code>HTML/pages/Pages/Career-Single.html</code> - Detailed view of a specific career position in gardening or landscaping.</li>
|
||
<li><code>HTML/pages/Pages/Career-Form.html</code> - Page featuring a form for candidates to apply for available positions at LeafLife.</li>
|
||
<li><code>HTML/pages/Pages/Privacy-Policy.html</code> - Page detailing LeafLife’s privacy policy and how user data is handled responsibly.</li>
|
||
<li><code>HTML/pages/Pages/Not-Found.html</code> - 404 error page displayed when a user navigates to a non-existent or broken link.</li>
|
||
<li><code>HTML/pages/Pages/Terms.html</code> - Page outlining LeafLife’s terms and conditions for website use and service engagement.</li>
|
||
<li><code>HTML/pages/Pages/Cost-Calculator.html</code> - Page for calculating the cost of gardening and landscaping services.</li>
|
||
<li><code>HTML/pages/Pages/Get-Quote.html</code> - Page where users can request a quote for gardening and landscaping services.</li>
|
||
<li><code>HTML/pages/Pages/Clients.html</code> - Page displaying organizations or clients associated with our gardening and landscaping services.</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<!-- Service HTML files -->
|
||
<li><code>HTML/pages/Service</code> - Service HTML files
|
||
<ul>
|
||
<li><code>HTML/pages/Service/Services.html</code> - Page showcasing the various gardening and landscaping services offered by our company.</li>
|
||
<li><code>HTML/pages/Service/Service-Single.html</code> - Detailed view of a specific gardening or landscaping service provided by our company.</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<!-- Project HTML files -->
|
||
<li><code>HTML/pages/Project</code> - Project HTML files
|
||
<ul>
|
||
<li><code>HTML/pages/Project/Projects.html</code> - Page showcasing the projects completed by our company in the field of gardening and landscaping.</li>
|
||
<li><code>HTML/pages/Project/Project-Single.html</code> - Detailed view of a specific project completed by our company.</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<!-- Blog HTML files -->
|
||
<li><code>HTML/pages/Blog</code> - Blog HTML files
|
||
<ul>
|
||
<li><code>HTML/pages/Blog/Blog-Grid.html</code> - Page displaying blog posts related to updates in the field of gardening and landscaping.</li>
|
||
<li><code>HTML/pages/Blog/Blog-List.html</code> - Page presenting blog posts in a standard list format.</li>
|
||
<li><code>HTML/pages/Blog/Blog-Single.html</code> - Page showing the details of a specific blog post related to gardening and landscaping topics.</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<!-- Shop HTML files -->
|
||
<li><code>HTML/pages/Shop</code> - Shop HTML files
|
||
<ul>
|
||
<li><code>HTML/pages/Shop/Shop-Grid.html</code> - Page displaying gardening and landscaping products in a grid layout for online shopping.</li>
|
||
<li><code>HTML/pages/Shop/Shop-List.html</code> - Page presenting gardening and landscaping products in a standard list format.</li>
|
||
<li><code>HTML/pages/Shop/Product-Single.html</code> - Page providing detailed information about a specific gardening or landscaping product.</li>
|
||
<li><code>HTML/pages/Shop/Wishlist.html</code> - Page related to managing and viewing a user's wishlist for gardening and landscaping products.</li>
|
||
<li><code>HTML/pages/Shop/Cart.html</code> - Page for displaying the user's shopping cart and enabling product checkout.</li>
|
||
<li><code>HTML/pages/Shop/Checkout.html</code> - Page facilitating the checkout process for placing an order of gardening and landscaping products.</li>
|
||
<li><code>HTML/pages/Shop/Login.html</code> - Page providing a login form for user authentication.</li>
|
||
<li><code>HTML/pages/Shop/Register.html</code> - Page allowing users to register or create a new account for gardening and landscaping services.</li>
|
||
<li><code>HTML/pages/Shop/Reset-Password.html</code> - Page facilitating the password reset process for users.</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<!-- Contact HTML files -->
|
||
<li><code>HTML/pages/Contact</code> – Contact HTML file
|
||
<ul>
|
||
<li><code>HTML/pages/Contact/Contact.html</code> - Page providing contact information and a contact form for users to get in touch regarding gardening and landscaping services.</li>
|
||
</ul>
|
||
</li>
|
||
|
||
</ol>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
|
||
|
||
<li>Open <code>index.html</code> to start editing.
|
||
Following you can see HTML structure of this file:
|
||
<p></p>
|
||
<pre><!DOCTYPE html>
|
||
|
||
<html lang="en">
|
||
<head>
|
||
|
||
<!-- Your Title, Css Libraries, Custom Stylesheets
|
||
============================================= -->
|
||
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<!-------------------- Scroll-Top Area (Start) -------------------->
|
||
<a href="#" id="scroll-top" >
|
||
......
|
||
</a>
|
||
<!-------------------- Scroll-Top Area (End) -------------------->
|
||
|
||
|
||
|
||
<!-------------------- Header Area (Start) -------------------->
|
||
<header class="header" >
|
||
......
|
||
</header>
|
||
<!-------------------- Header Area (End) -------------------->
|
||
|
||
|
||
|
||
<!-------------------- Home-Slider Area (Start) -------------------->
|
||
<section class="home" >
|
||
......
|
||
</section>
|
||
<!-------------------- Home-Slider Area (End) -------------------->
|
||
|
||
|
||
|
||
<!-------------------- Features Area (Start) -------------------->
|
||
<section class="features" >
|
||
......
|
||
</section>
|
||
<!-------------------- Features Area (End) -------------------->
|
||
|
||
|
||
|
||
<!-------------------- About Area (Start) -------------------->
|
||
<section class="about" >
|
||
......
|
||
</section>
|
||
<!-------------------- About Area (End) -------------------->
|
||
|
||
|
||
|
||
<!-------------------- Awards Area (Start) -------------------->
|
||
<div class="awards main linear-bg" >
|
||
......
|
||
</div>
|
||
<!-------------------- Awards Area (End) -------------------->
|
||
|
||
|
||
|
||
<!-------------------- Process Slider Area (Start) -------------------->
|
||
<div class="process" >
|
||
......
|
||
</div>
|
||
<!-------------------- Process Slider Area (End) -------------------->
|
||
|
||
|
||
|
||
<!-------------------- Why Choose Us Area (Start) -------------------->
|
||
<section class="whyUs linear-bg" >
|
||
......
|
||
</section>
|
||
<!-------------------- Why Choose Us Area (End) -------------------->
|
||
|
||
|
||
|
||
<!-------------------- Service Slider Area (Start) -------------------->
|
||
<section class="services" >
|
||
......
|
||
</section>
|
||
<!-------------------- Service Slider Area (End) -------------------->
|
||
|
||
|
||
|
||
|
||
<!-------------------- Count Area (Start) -------------------->
|
||
<div class="counting" >
|
||
......
|
||
</div>
|
||
<!-------------------- Count Area (End) -------------------->
|
||
|
||
|
||
|
||
|
||
<!-------------------- Pricing Area (Start) -------------------->
|
||
<section class="pricing" >
|
||
......
|
||
</section>
|
||
<!-------------------- Pricing Slider Area (End) -------------------->
|
||
|
||
|
||
|
||
<!-------------------- Home Skills Area (Start) -------------------->
|
||
<section class="custom-form home-skills linear-bg" >
|
||
......
|
||
</section>
|
||
<!-------------------- Home Skills Area (End) -------------------->
|
||
|
||
|
||
|
||
<!-------------------- Projects Area (Start) -------------------->
|
||
<section class="projects">
|
||
......
|
||
</section>
|
||
<!-------------------- Projects Area (End) -------------------->
|
||
|
||
|
||
|
||
<!-------------------- Get A Quote Area (Start) -------------------->
|
||
<section class="custom-form get-quote linear-bg" >
|
||
......
|
||
</section>
|
||
<!-------------------- Get A Quote Area (End) -------------------->
|
||
|
||
|
||
|
||
<!-------------------- Events Area (Start) -------------------->
|
||
<section class="events" >
|
||
......
|
||
</section>
|
||
<!-------------------- Events Area (End) -------------------->
|
||
|
||
|
||
|
||
<!-------------------- Banner Area (Start) -------------------->
|
||
<section class="banner" >
|
||
......
|
||
</section>
|
||
<!-------------------- Banner Area (End) -------------------->
|
||
|
||
|
||
|
||
<!-------------------- Team Area (Start) -------------------->
|
||
<section class="team" >
|
||
......
|
||
</section>
|
||
<!-------------------- Team Area (End) -------------------->
|
||
|
||
|
||
|
||
|
||
<!-------------------- Testimonials Area (Start) -------------------->
|
||
<section class="testimonial-bg linear-bg" >
|
||
......
|
||
</section>
|
||
<!-------------------- Testimonials Area (End) -------------------->
|
||
|
||
|
||
|
||
<!-------------------- Faqs Area (Start) -------------------->
|
||
<section class="faq" >
|
||
......
|
||
</section>
|
||
<!-------------------- Faqs Area (End) -------------------->
|
||
|
||
|
||
|
||
<!-------------------- Newsletter Area (Start) -------------------->
|
||
<section class="newsletter-subscribe" >
|
||
......
|
||
</section>
|
||
<!-------------------- Newsletter Area (End) -------------------->
|
||
|
||
|
||
|
||
<!-------------------- Blogs Area (Start) -------------------->
|
||
<section class="blog main" >
|
||
......
|
||
</section>
|
||
<!-------------------- Blogs Area (End) -------------------->
|
||
|
||
|
||
|
||
<!-------------------- Clients Area (Start) -------------------->
|
||
<section class="home-clients clients" >
|
||
......
|
||
</section>
|
||
<!-------------------- Clients Area (End) -------------------->
|
||
|
||
|
||
|
||
<!-------------------- Footer Area (Start) -------------------->
|
||
<footer class="footer" >
|
||
......
|
||
</footer>
|
||
<!-------------------- Footer Area (End) -------------------->
|
||
|
||
|
||
<!-- JavaScript -->
|
||
|
||
|
||
</body>
|
||
</html></code></pre>
|
||
</li>
|
||
|
||
<li>Open any <strong>HTML file</strong> to start editing in other pages.
|
||
Following you can see HTML structure of the file:
|
||
<p></p>
|
||
<pre><!DOCTYPE html>
|
||
|
||
<html lang="en">
|
||
<head>
|
||
|
||
<!-- Your Title, Css Libraries, Custom Stylesheets
|
||
============================================= -->
|
||
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<!-------------------- Scroll-Top Area (Start) -------------------->
|
||
<a href="#" id="scroll-top" >
|
||
......
|
||
</a>
|
||
<!-------------------- Scroll-Top Area (End) -------------------->
|
||
|
||
|
||
|
||
<!-------------------- Header Area (Start) -------------------->
|
||
<header >
|
||
......
|
||
</header>
|
||
<!-------------------- Header Area (End) -------------------->
|
||
|
||
|
||
|
||
<!-------------------- Page-Title (Start) -------------------->
|
||
<div class="page-title" >
|
||
......
|
||
</div>
|
||
<!-------------------- Page-Title (End) -------------------->
|
||
|
||
|
||
|
||
<!-------------------- Page Body (Start) -------------------->
|
||
<section class="" >
|
||
......
|
||
</section>
|
||
<!-------------------- Page Body (End) -------------------->
|
||
|
||
|
||
|
||
<!-------------------- Footer Area (Start) -------------------->
|
||
<footer class="footer" >
|
||
......
|
||
</footer>
|
||
<!-------------------- Footer Area (End) -------------------->
|
||
|
||
|
||
|
||
|
||
<!-- JavaScript -->
|
||
|
||
|
||
</body>
|
||
</pre>
|
||
|
||
</li>
|
||
</ol>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
</section>
|
||
<!-------------------- HTML Structure Area (End) -------------------->
|
||
|
||
|
||
|
||
<!-------------------- CSS Structure Area (Start) -------------------->
|
||
<section class="CSS_Structure" id="CSS_Structure">
|
||
|
||
<div class="heading">
|
||
<h2>CSS <span>Files and Structure</span></h2>
|
||
</div>
|
||
|
||
<div class="content">
|
||
|
||
<ol>
|
||
<li>This template have these <strong>CSS</strong> files.
|
||
<ul>
|
||
<li><code>main.css</code> - Stylesheet for main styling</li>
|
||
<li><code>responsive.css</code> - Stylesheet for responsive styling</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li>The <code>main.css</code> contains specific styling for the page.
|
||
This file is separated into section using comments.
|
||
|
||
<pre>
|
||
/*------------------------------ (00)-Global CSS ------------------------------*/
|
||
/*
|
||
0- Global CSS
|
||
1- Heading CSS
|
||
2- Button CSS
|
||
3- Logo Area CSS
|
||
4- Page Title CSS
|
||
5- Header Area CSS
|
||
6- Footer Area CSS
|
||
7- Scroll-Top Area CSS
|
||
8- Form CSS
|
||
9- Dark Form CSS
|
||
10- Swiper Pagination CSS
|
||
11- Swiper Navigation CSS
|
||
12- Sidebar Heading CSS
|
||
13- Sidebar CSS
|
||
*/
|
||
|
||
/*------------------------------ (01)-Home ------------------------------*/
|
||
/*
|
||
1- Home Slider
|
||
2- Features
|
||
3- Awards
|
||
4- Process Slider
|
||
5- Why Choose Us
|
||
6- Service Slider
|
||
7- Counter
|
||
8- skills
|
||
9- Banner
|
||
10- Testimonials
|
||
11- Newsletter
|
||
12- Blogs
|
||
13- Client Slider
|
||
*/
|
||
|
||
/*------------------------------ (02)-About ------------------------------*/
|
||
|
||
/*--------------- PAGES ---------------*/
|
||
/*
|
||
1- About Us
|
||
2- Why Choose Us
|
||
3- History
|
||
4- Team
|
||
5- Team Single
|
||
6- Testimonials
|
||
7- Faqs
|
||
*/
|
||
|
||
/*------------------------------ (03)-Pages ------------------------------*/
|
||
|
||
/*--------------- COMPONENTS ---------------*/
|
||
/*
|
||
01- Tab Information
|
||
02- Page Single
|
||
03- Page Sidebar
|
||
04- Account-Form
|
||
05- Custom Form
|
||
*/
|
||
|
||
/*--------------- PAGES ---------------*/
|
||
/*
|
||
1- Gallery
|
||
2- Pricing
|
||
3- Work Process
|
||
4- Awards
|
||
5- Events
|
||
6- Event Single
|
||
7- Careers
|
||
8- Career Single
|
||
9- Career Form
|
||
10- Not Found
|
||
11- Privacy Policy
|
||
12- Terms & Condition
|
||
13- Cost Calculator
|
||
14- Get A Quote
|
||
15- Clients
|
||
|
||
*/
|
||
|
||
/*------------------------------ (04)-Service ------------------------------*/
|
||
/*
|
||
1- Services
|
||
2- Service Single
|
||
*/
|
||
|
||
/*------------------------------ (05)-Project ------------------------------*/
|
||
/*
|
||
1- projects
|
||
2- projects Single
|
||
*/
|
||
|
||
/*------------------------------ (06)-Blog ------------------------------*/
|
||
|
||
/*--------------- COMPONENTS ---------------*/
|
||
/*
|
||
01- Blog-Item
|
||
02- Comment
|
||
03- Pages-No
|
||
*/
|
||
|
||
/*--------------- PAGES ---------------*/
|
||
/*
|
||
1- Blog Grid
|
||
2- Blog List
|
||
3- Blog Single
|
||
*/
|
||
|
||
|
||
/*------------------------------ (07)-Shop ------------------------------*/
|
||
|
||
/*--------------- COMPONENTS ---------------*/
|
||
/*
|
||
01- Filter
|
||
02- Shop Header
|
||
03- Quantity Box
|
||
04- Product-Item
|
||
05- Shop-Title
|
||
06- Cart-Summary
|
||
07- Radio Button
|
||
*/
|
||
|
||
/*--------------- PAGES ---------------*/
|
||
/*
|
||
1- Shop Grid
|
||
2- Shop Standard
|
||
3- Product Single
|
||
4- Wishlist
|
||
5- Cart
|
||
6- Checkout
|
||
7- Login
|
||
8- Register
|
||
9- Forgot Password
|
||
*/
|
||
|
||
/*------------------------------ (08)-Contact ------------------------------*/
|
||
</pre>
|
||
|
||
</li>
|
||
|
||
<li>If you want to edit specific section of the file, just find the right label in the CSS file, and then start editing the appropriate style that you want to edit.</li>
|
||
|
||
</ol>
|
||
|
||
</div>
|
||
</section>
|
||
<!-------------------- CSS Structure Area (End) -------------------->
|
||
|
||
|
||
|
||
<!-------------------- JS Structure Area (Start) -------------------->
|
||
<section class="JS_Structure" id="JS_Structure">
|
||
|
||
<!-- Section Heading -->
|
||
<div class="heading">
|
||
<h2><span>Javascript</span> Files</h2>
|
||
</div>
|
||
|
||
<!-- Section Content -->
|
||
<div class="content">
|
||
|
||
<!-- Introduction Paragraph -->
|
||
<p>This template has the following <strong>JS</strong> files.</p>
|
||
|
||
<!-- List of JavaScript Files -->
|
||
<ol>
|
||
|
||
<!-- Global JS Files -->
|
||
<li>Global <strong>JS</strong> files:
|
||
<ul>
|
||
<li><code>script.js</code> - Custom JavaScript file for website-specific functionality.</li>
|
||
<li><code>nav-link-toggler.js</code> - Handles mobile navbar toggling.</li>
|
||
<li><code>page-gallery.js</code> - JavaScript file for handling gallery pop up functionality.</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<!-- HomePage JS Files -->
|
||
<li>HomePage <strong>JS</strong> files:
|
||
<ul>
|
||
<li><code>home-slider.js</code> - Controls the behavior of the home slider, showcasing content or images on the homepage.</li>
|
||
<li><code>service-slider.js</code> - Manages the service slider, likely for presenting all services.</li>
|
||
<li><code>process-slider.js</code> - Manages the locksmith process slider, likely for presenting all steps of the process.</li>
|
||
<li><code>client-slider.js</code> - Manages the interactive client slider, showcasing business clients on the homepage.</li>
|
||
<li><code>newsletter.js</code> - Handles the functionality of the newsletter subscription form, validating user input and managing successful subscription confirmations.</li>
|
||
</ul>
|
||
</ul>
|
||
</li>
|
||
|
||
<!-- About Page JS Files -->
|
||
<li>About Page <strong>JS</strong> files:
|
||
<ul>
|
||
<li><code>counter-up.js</code> - Implements a counter for statistics.</li>
|
||
<li><code>testi-slider.js</code> - Handles the testimonials slider.</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<!-- Cost Calculator Page JS Files -->
|
||
<li>Cost Calculator Page <strong>JS</strong> files:
|
||
<ul>
|
||
<li><code>cost-calculator.js</code> - Handles the interactive cost estimation functionality.</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<!-- Quote Page JS Files -->
|
||
<li>Quote Page <strong>JS</strong> files:
|
||
<ul>
|
||
<li><code>quote.js</code> - Manages the quote request form, including input validation, dynamic field updates, and sending user information to the server for personalized gardening and landscaping service quotations.</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<!-- Faqs & Service Single JS Files -->
|
||
<li>Faqs<strong>JS</strong> files:
|
||
<ul>
|
||
<li><code>accordion.js</code> - Controls the accordion functionality for FAQs on the FAQs and Service Single Page.</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<!-- Product Single Page JS Files -->
|
||
<li>Product Single<strong>JS</strong> files:
|
||
<ul>
|
||
<li><code>tab-info.js</code> - Manages tabbed information on product single page.</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<!-- Project Page JS Files -->
|
||
<li>Project Page <strong>JS</strong> files:
|
||
<ul>
|
||
<li><code>projects.js</code> - JavaScript file for handling functionality on the Project page.</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<!-- Gallery Page JS Files -->
|
||
<li>Gallery Page <strong>JS</strong> files:
|
||
<ul>
|
||
<li><code>Gallery.js</code> - JavaScript file for handling functionality on the gallery page.</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<!-- Checkout Page JS Files -->
|
||
<li>Checkout Page <strong>JS</strong> files:
|
||
<ul>
|
||
<li><code>payment-method.js</code> - Manages the payment method accordion on the Checkout page.</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<!-- Cart Page JS Files -->
|
||
<li>Cart Page <strong>JS</strong> files:
|
||
<ul>
|
||
<li><code>quantity.js</code> - Product quantity counter js file</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<!-- Shop Page JS Files -->
|
||
<li>Shop Page <strong>JS</strong> files:
|
||
<ul>
|
||
<li><code>Price-Filter.js</code> - Manages the price filter on the Shop page.</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<!-- Product Single Page JS Files -->
|
||
<li>Product Single Page <strong>JS</strong> files:
|
||
<ul>
|
||
<li><code>Product-Gallery.js</code> - Product Image Gallery js file</li>
|
||
</ul>
|
||
</li>
|
||
|
||
</ol>
|
||
|
||
</div>
|
||
|
||
</section>
|
||
<!-------------------- JS Structure Area (End) -------------------->
|
||
|
||
|
||
|
||
<!-------------------- PHP Structure Area (Start) -------------------->
|
||
<section class="PHP_Structure" id="PHP_Structure">
|
||
|
||
<div class="heading">
|
||
<h2><span>php</span></h2>
|
||
</div>
|
||
|
||
<div class="content">
|
||
|
||
<p>In this template, contact form is created using PHP. It include sending email using SMTP server and the PHPMailer library.</p>
|
||
|
||
<ol>
|
||
<li>This template have these <strong>PHP</strong> files and folder.
|
||
<ul>
|
||
<li><code>php/smtp</code> - Contains php mailer files
|
||
<ul>
|
||
<li><code>class.phpmailer.php</code></li>
|
||
<li><code>class.smtp.php</code></li>
|
||
<li><code>PHPMailerAutoload.php</code></li>
|
||
</ul>
|
||
</li>
|
||
<li><code>php/career-form.php</code> - Handles submissions from the career application form, sending applicant details such as name, email, and message to the specified email address.</li>
|
||
<li><code>php/newsletter.php</code> - Processes newsletter subscription requests and sends a confirmation or success message to the user.</li>
|
||
<li><code>php/quote.php</code> - Manages quote form submissions, collecting user details and project information to send as an email to the business.</li>
|
||
<li><code>php/submit.php</code> - PHP file where you specify your email address to receive messages sent through the website’s contact form.</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li>creating an app password:
|
||
<ul>
|
||
|
||
<li>
|
||
<h5>Step#1: Login to Google Account</h5>
|
||
</li>
|
||
|
||
<li>
|
||
<h5>Step#2: Enable 2-Step Verification</h5>
|
||
<ul>
|
||
<li>First, you have to <strong>enable the 2-Step Verification</strong> on your account before you set up the <strong>app password</strong>.</li>
|
||
<li>Click on the <strong>Security tab</strong> on the left-hand side.</li>
|
||
<li>Go to the <strong>Security page</strong> and within the section <strong>Signing in to Google</strong>, click on <strong>2-Step Verification</strong>.</li>
|
||
<li>Click on <strong>Get Started</strong> and on the next page <strong>enter your password</strong> to verify your account and hit <strong>Next</strong>.</li>
|
||
<li><strong>enter the phone number</strong> you want to use for verification and then <strong>select the method</strong> to receive your code.</li>
|
||
<li>Enter the <strong>verification code</strong> & hit <strong>Next</strong>.</li>
|
||
</ul>
|
||
</li>
|
||
|
||
<li>
|
||
<h5>Step#3: Setup Application password</h5>
|
||
<ul>
|
||
<li>Within the section <strong>Signing in to Google</strong>, you will notice a new option that says <strong>App passwords</strong>.</li>
|
||
<li>Click on <strong>App passwords</strong> and verify your account.</li>
|
||
<li>select <strong>Mail</strong> from <strong>Select app</strong> and <strong>Other (custom name)</strong> from <strong>Select device</strong> and provide it a name and hit <strong>generate</strong>.</li>
|
||
<li>Now you have successfully <strong>generated your app password</strong>. The App Password is the 16-character code in the yellow bar on your device.</li>
|
||
<li>Copy this code and save it somewhere safe to use it later as instructed.</li>
|
||
</ul>
|
||
</li>
|
||
|
||
</ul>
|
||
</li>
|
||
|
||
<li>To make your contact, quotation and newsletter form functional, you only need to make a few changes in the following files: <code>submit.php</code>, <code>quote.php</code> and <code>newsletter.php</code>.
|
||
|
||
<ul>
|
||
|
||
<li>In the Username field, you have to enter your Gmail ID which you want to use as an SMTP server:
|
||
<pre>
|
||
// Gmail ID which you want to use as SMTP server
|
||
$mail->Username = "your_email@gmail.com"; // (Your Mail)
|
||
</pre>
|
||
</li>
|
||
|
||
<li>In the Password field, you have to enter your Gmail App password (that you have created above):
|
||
<pre>
|
||
// App Password
|
||
$mail->Password = "Your App Password"; // Your app password
|
||
</pre>
|
||
</li>
|
||
|
||
<li>Update the addAddress field, you have to enter another email id in which you want to receive form submission mails
|
||
<pre>
|
||
// Recipient Email ID where you want to receive emails
|
||
$mail->addAddress("your_email@gmail.com", "your name"); // (Your Mail)
|
||
</pre>
|
||
</li>
|
||
|
||
<li>Change the Subject of the Notification Email:
|
||
<pre>
|
||
$mail->Subject = "(LeafLine) New Contact Info";
|
||
</pre>
|
||
</li>
|
||
|
||
<li>Additionally, in <code>newsletter.php</code>, set the sender's email and name for the confirmation email sent to the user. This sender's email is usually your email address
|
||
<pre>
|
||
// Send confirmation email to the user
|
||
$mail->setFrom('your_email@gmail.com', 'LeafLine'); // Sender's email and name
|
||
</pre>
|
||
</li>
|
||
|
||
</ul>
|
||
</li>
|
||
|
||
</ol>
|
||
|
||
</div>
|
||
|
||
</section>
|
||
|
||
<!-------------------- PHP Structure Area (End) -------------------->
|
||
|
||
|
||
|
||
<!-------------------- Customization Area (Start) -------------------->
|
||
<section class="Customization" id="Customization">
|
||
|
||
<div class="heading">
|
||
<h2><span>Customization</span></h2>
|
||
</div>
|
||
|
||
<div class="content">
|
||
|
||
<ol>
|
||
|
||
<li>
|
||
<h4>Logo:</h4>
|
||
<p>you can change logo text here... OR you can put image rather than text.</p>
|
||
<pre>
|
||
|
||
<!-- Logo -->
|
||
<a class="logo" href="./index.html">
|
||
<img src="./assets/images/Logo/Logo.png" alt="logo" />
|
||
<div class="logo-content">
|
||
<h3>LeafLine</h3>
|
||
<p>Gardening & Landscaping</p>
|
||
</div>
|
||
</a>
|
||
|
||
</pre>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<h4>Image Customization:</h4>
|
||
<p>This template have these <strong>images</strong> folders.</p>
|
||
|
||
<ul>
|
||
<li>Home Slider Images => <strong>(images/Home/)</strong> => <strong>(1500 x 750)px</strong></li>
|
||
<li>Counter Background Image => <strong>(images/Background/)</strong> => <strong>(1500 x 750)px</strong></li>
|
||
<li>Banner Background Image => <strong>(images/Background/)</strong> => <strong>(1500 x 500)px</strong></li>
|
||
<li>Testimonials Background Image => <strong>(images/Background/)</strong> => <strong>(1500 x 750)px</strong></li>
|
||
<li>Newsletter Background Image => <strong>(images/Background/)</strong> => <strong>(1500 x 500)px</strong></li>
|
||
<li>Cost Calculator Background Image => <strong>(images/Background/)</strong> => <strong>(1500 x 750)px</strong></li>
|
||
<li>Get Quote Background Image => <strong>(images/Background/)</strong> => <strong>(1500 x 750)px</strong></li>
|
||
<li>Why Choose Us Background Image => <strong>(images/Background/)</strong> => <strong>(2000 x 1000)px</strong></li>
|
||
<li>Career Background Image => <strong>(images/Background/)</strong> => <strong>(1500 x 750)px</strong></li>
|
||
<li>Career Form Background Image => <strong>(images/Background/)</strong> => <strong>(1500 x 750)px</strong></li>
|
||
<li>Contact Background Image => <strong>(images/Background/)</strong> => <strong>(1500 x 750)px</strong></li>
|
||
<li>Footer Background Image => <strong>(images/Background/)</strong> => <strong>(1500 x 750)px</strong></li>
|
||
<li>Awards Background Image => <strong>(images/Background/)</strong> => <strong>(2000 x 1000)px</strong></li>
|
||
<li>Skills Background Image => <strong>(images/Background/)</strong> => <strong>(1500 x 750)px</strong></li>
|
||
<li>PageTitle Background Image => <strong>(images/Background/)</strong> => <strong>(1500 x 500)px</strong></li>
|
||
<li>About Image => <strong>(images/About/)</strong> => <strong>(300 x 450)px</strong></li>
|
||
<li>Team Images => <strong>(images/Team/)</strong> => <strong>(400 x 500)px</strong></li>
|
||
<li>Testimonials Images => <strong>(images/Testimonials/)</strong> => <strong>(200 x 200)px</strong></li>
|
||
<li>Clients Logo Images => <strong>(images/Clients/)</strong> => <strong>(350 x 200)px</strong></li>
|
||
<li>FAQ Image => <strong>(images/FAQs/)</strong> => <strong>(400 x 600)px</strong></li>
|
||
<li>Gallery Images => <strong>(images/Gallery/)</strong> => <strong>(1500 x 1000)px</strong></li>
|
||
<li>Pricing Images => <strong>(images/Pricing/)</strong> => <strong>(400 x 600)px</strong></li>
|
||
<li>Process Images => <strong>(images/Process/)</strong> => <strong>(400 x 400)px</strong></li>
|
||
<li>Events Images => <strong>(images/Event/Events/)</strong> => <strong>(600 x 400)px</strong></li>
|
||
<li>Event Gallery Images => <strong>(images/Event/Event-Gallery/)</strong> => <strong>(600 x 400)px</strong></li>
|
||
<li>Event Speaker Images => <strong>(images/Event/Speaker/)</strong> => <strong>(400 x 500)px</strong></li>
|
||
<li>Career Introuction Images => <strong>(images/Career/Intro/)</strong> => <strong>(600 x 450)px</strong></li>
|
||
<li>Career Position Images => <strong>(images/Career/Positions/)</strong> => <strong>(600 x 400)px</strong></li>
|
||
<li>Services Images => <strong>(images/Service/Services/)</strong> => <strong>(600 x 400)px</strong></li>
|
||
<li>Service Gallery Images => <strong>(images/Service/Service-Gallery/)</strong> => <strong>(600 x 400)px</strong></li>
|
||
<li>Project Images => <strong>(images/Project/Projects/)</strong> => <strong>(600 x 400)px</strong></li>
|
||
<li>Project Gallery Images => <strong>(images/Project/Project-Gallery/)</strong> => <strong>(600 x 400)px</strong></li>
|
||
<li>Blogs Images => <strong>(images/Blog/Blogs/)</strong> => <strong>(600 x 400)px</strong></li>
|
||
<li>Blog-Gallery Images => <strong>(images/Blog/Blog-Gallery/)</strong> => <strong>(600 x 400)px</strong></li>
|
||
<li>Blog Comments Images => <strong>(images/Blog/Comments/)</strong> => <strong>(200 x 200)px</strong></li>
|
||
<li>Product-Gallery Images => <strong>(images/Shop/Product-Gallery/)</strong> => <strong>(500 x 500)px</strong></li>
|
||
<li>Products Images => <strong>(images/Shop/Products/)</strong> => <strong>(500 x 500)px</strong></li>
|
||
<li>Product Reviews Images => <strong>(images/Shop/Reviews/)</strong> => <strong>(200 x 200)px</strong></li>
|
||
<li>Not Found Images => <strong>(images/Not-Found/)</strong> => <strong>(600 x 300)px</strong></li>
|
||
<li>Why Choose Us Images => <strong>(images/WhyUs/)</strong> => <strong>(300 x 400)px</strong></li>
|
||
<li>Contact Images => <strong>(images/Contact/)</strong> => <strong>(600 x 600)px</strong></li>
|
||
<li>Logo Image => <strong>(images/Logo/)</strong> => <strong>(500 x 500)px</strong></li>
|
||
</ul>
|
||
|
||
</li>
|
||
|
||
</ol>
|
||
|
||
</div>
|
||
|
||
</section>
|
||
<!-------------------- Customization Area (End) -------------------->
|
||
|
||
|
||
|
||
<!-------------------- Source & Credits Area (Start) -------------------->
|
||
<section class="source_credits" id="source_credits">
|
||
|
||
<div class="heading">
|
||
<h2>Source & Credits</h2>
|
||
</div>
|
||
|
||
<div class="content">
|
||
|
||
<h4>Images:</h4>
|
||
<ul>
|
||
<li>Pexels - <a target="_blank" href="https://www.pexels.com/">https://www.pexels.com/</a></li>
|
||
<li>Pixabay - <a target="_blank" href="https://pixabay.com/">https://pixabay.com/</a></li>
|
||
<li>Unsplash - <a target="_blank" href="https://unsplash.com/">https://unsplash.com/</a></li>
|
||
</ul>
|
||
|
||
<h4>Icons:</h4>
|
||
<ul>
|
||
<li>Icons Font Face - <a target="_blank" href="https://fontawesome.com/">https://fontawesome.com/</a></li>
|
||
</ul>
|
||
|
||
<h4>Google Font:</h4>
|
||
<ul>
|
||
<li>Belleza - <a target="_blank" href="https://fonts.google.com/specimen/Roboto">https://fonts.google.com/specimen/Roboto</a></li>
|
||
</ul>
|
||
|
||
<h4>Scripts:</h4>
|
||
<ul>
|
||
<li>jQuery - <a target="_blank" href="http://www.jquery.com/">http://www.jquery.com/</a></li>
|
||
<li>Magnific Popup - <a target="_blank" href="http://dimsemenov.com/plugins/magnific-popup/">http://dimsemenov.com/plugins/magnific-popup/</a></li>
|
||
<li>Swiper - <a target="_blank" href="https://swiperjs.com/">https://swiperjs.com/</a></li>
|
||
<li>Isotope - <a target="_blank" href="https://isotope.metafizzy.co/">https://isotope.metafizzy.co/</a></li>
|
||
</ul>
|
||
|
||
</div>
|
||
|
||
</section>
|
||
|
||
<!-------------------- Source & Credits Area (End) -------------------->
|
||
|
||
|
||
|
||
<!-------------------- Footer Area (End) -------------------->
|
||
<div class="footer">
|
||
<p>created by <span>NorthStar_Designs</span> | all rights reserved</p>
|
||
</div>
|
||
<!-------------------- Footer Area (End) -------------------->
|
||
|
||
|
||
|
||
|
||
<!-- Jquery -->
|
||
<script src="assets/vendors/jquery/jquery.min.js"></script>
|
||
|
||
<!-- Custom Script Files -->
|
||
<script src="assets/js/script.js"></script>
|
||
<script src="assets/js/scroll-spy.js"></script>
|
||
|
||
|
||
</body>
|
||
</html> |