documentation
LeafLine
Thank you so much for purchasing our item from templatemonster.
Thank you so much for purchasing our item from templatemonster.
Follow the steps below to setup your site template:
HTML/assets - Contains all of the assets referenced
HTML/assets/css - Stylesheet filesHTML/assets/images - ImagesHTML/assets/js - Javacript filesHTML/assets/php - Php filesHTML/assets/vendors – All external libs.HTML/pages - Contains all of the assets referenced
HTML/pages/About - About html filesHTML/pages/Pages - Other pages html filesHTML/pages/Service - Service html filesHTML/pages/Project - Project html filesHTML/pages/Blog - Blog html filesHTML/pages/Shop - Shop html fileHTML/pages/Contact – Contact html fileHTML/index.html - Homepage
HTML/index.html - Homepage HTML fileHTML/pages - Contains all the HTML pages:
HTML/pages/About - About HTML Files
HTML/pages/About/About.html - Main About page providing information about our gardening and landscaping services.HTML/pages/About/Testimonials.html - Page showcasing testimonials or feedback from our satisfied clients about our gardening and landscaping work.HTML/pages/About/Team.html - Page presenting information about our skilled gardening and landscaping team members.HTML/pages/About/Team-Single.html - Detailed view of a specific team member in our gardening and landscaping team.HTML/pages/About/Faqs.html - Frequently asked questions related to our gardening and landscaping services.HTML/pages/About/WhyUs.html - Page explaining why clients should choose LeafLife — featuring our values, quality assurance, and sustainable practices.HTML/pages/About/History.html - Page sharing LeafLife’s story, journey, and growth in the gardening and landscaping industry.HTML/pages/Pages - Other Pages HTML Files
HTML/pages/Pages/Gallery.html - Page showcasing a gallery of images related to our gardening and landscaping designs and installations.HTML/pages/Pages/Pricing.html - Page outlining the pricing structure for our gardening and landscaping services.HTML/pages/Pages/Process.html - Page explaining our process for providing gardening and landscaping installations.HTML/pages/Pages/Awards.html - Page providing information about awards and recognitions received for our gardening and landscaping work.HTML/pages/Pages/Events.html - Page providing information about events and workshops related to gardening and landscaping.HTML/pages/Pages/Event-Single.html - Detailed view of a specific gardening or landscaping event.HTML/pages/Pages/Careers.html - Page providing information about career opportunities in gardening and landscaping with our company.HTML/pages/Pages/Career-Single.html - Detailed view of a specific career position in gardening or landscaping.HTML/pages/Pages/Career-Form.html - Page featuring a form for candidates to apply for available positions at LeafLife.HTML/pages/Pages/Privacy-Policy.html - Page detailing LeafLife’s privacy policy and how user data is handled responsibly.HTML/pages/Pages/Not-Found.html - 404 error page displayed when a user navigates to a non-existent or broken link.HTML/pages/Pages/Terms.html - Page outlining LeafLife’s terms and conditions for website use and service engagement.HTML/pages/Pages/Cost-Calculator.html - Page for calculating the cost of gardening and landscaping services.HTML/pages/Pages/Get-Quote.html - Page where users can request a quote for gardening and landscaping services.HTML/pages/Pages/Clients.html - Page displaying organizations or clients associated with our gardening and landscaping services.HTML/pages/Service - Service HTML files
HTML/pages/Service/Services.html - Page showcasing the various gardening and landscaping services offered by our company.HTML/pages/Service/Service-Single.html - Detailed view of a specific gardening or landscaping service provided by our company.HTML/pages/Project - Project HTML files
HTML/pages/Project/Projects.html - Page showcasing the projects completed by our company in the field of gardening and landscaping.HTML/pages/Project/Project-Single.html - Detailed view of a specific project completed by our company.HTML/pages/Blog - Blog HTML files
HTML/pages/Blog/Blog-Grid.html - Page displaying blog posts related to updates in the field of gardening and landscaping.HTML/pages/Blog/Blog-List.html - Page presenting blog posts in a standard list format.HTML/pages/Blog/Blog-Single.html - Page showing the details of a specific blog post related to gardening and landscaping topics.HTML/pages/Shop - Shop HTML files
HTML/pages/Shop/Shop-Grid.html - Page displaying gardening and landscaping products in a grid layout for online shopping.HTML/pages/Shop/Shop-List.html - Page presenting gardening and landscaping products in a standard list format.HTML/pages/Shop/Product-Single.html - Page providing detailed information about a specific gardening or landscaping product.HTML/pages/Shop/Wishlist.html - Page related to managing and viewing a user's wishlist for gardening and landscaping products.HTML/pages/Shop/Cart.html - Page for displaying the user's shopping cart and enabling product checkout.HTML/pages/Shop/Checkout.html - Page facilitating the checkout process for placing an order of gardening and landscaping products.HTML/pages/Shop/Login.html - Page providing a login form for user authentication.HTML/pages/Shop/Register.html - Page allowing users to register or create a new account for gardening and landscaping services.HTML/pages/Shop/Reset-Password.html - Page facilitating the password reset process for users.HTML/pages/Contact – Contact HTML file
HTML/pages/Contact/Contact.html - Page providing contact information and a contact form for users to get in touch regarding gardening and landscaping services.index.html to start editing.
Following you can see HTML structure of this file:
<!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>
<!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>
main.css - Stylesheet for main stylingresponsive.css - Stylesheet for responsive stylingmain.css contains specific styling for the page.
This file is separated into section using comments.
/*------------------------------ (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 ------------------------------*/
This template has the following JS files.
script.js - Custom JavaScript file for website-specific functionality.nav-link-toggler.js - Handles mobile navbar toggling.page-gallery.js - JavaScript file for handling gallery pop up functionality.home-slider.js - Controls the behavior of the home slider, showcasing content or images on the homepage.service-slider.js - Manages the service slider, likely for presenting all services.process-slider.js - Manages the locksmith process slider, likely for presenting all steps of the process.client-slider.js - Manages the interactive client slider, showcasing business clients on the homepage.newsletter.js - Handles the functionality of the newsletter subscription form, validating user input and managing successful subscription confirmations.counter-up.js - Implements a counter for statistics.testi-slider.js - Handles the testimonials slider.cost-calculator.js - Handles the interactive cost estimation functionality.quote.js - 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.accordion.js - Controls the accordion functionality for FAQs on the FAQs and Service Single Page.tab-info.js - Manages tabbed information on product single page.projects.js - JavaScript file for handling functionality on the Project page.Gallery.js - JavaScript file for handling functionality on the gallery page.payment-method.js - Manages the payment method accordion on the Checkout page.quantity.js - Product quantity counter js filePrice-Filter.js - Manages the price filter on the Shop page.Product-Gallery.js - Product Image Gallery js fileIn this template, contact form is created using PHP. It include sending email using SMTP server and the PHPMailer library.
php/smtp - Contains php mailer files
class.phpmailer.phpclass.smtp.phpPHPMailerAutoload.phpphp/career-form.php - Handles submissions from the career application form, sending applicant details such as name, email, and message to the specified email address.php/newsletter.php - Processes newsletter subscription requests and sends a confirmation or success message to the user.php/quote.php - Manages quote form submissions, collecting user details and project information to send as an email to the business.php/submit.php - PHP file where you specify your email address to receive messages sent through the website’s contact form.submit.php, quote.php and newsletter.php.
// Gmail ID which you want to use as SMTP server
$mail->Username = "your_email@gmail.com"; // (Your Mail)
// App Password
$mail->Password = "Your App Password"; // Your app password
// Recipient Email ID where you want to receive emails
$mail->addAddress("your_email@gmail.com", "your name"); // (Your Mail)
$mail->Subject = "(LeafLine) New Contact Info";
newsletter.php, set the sender's email and name for the confirmation email sent to the user. This sender's email is usually your email address
// Send confirmation email to the user
$mail->setFrom('your_email@gmail.com', 'LeafLine'); // Sender's email and name
you can change logo text here... OR you can put image rather than text.
<!-- 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>
This template have these images folders.