added more preview pages and more templates

This commit is contained in:
2026-07-21 07:10:03 -05:00
parent c6119ffdf5
commit b19fdee30d
3726 changed files with 651487 additions and 6169 deletions
@@ -0,0 +1,636 @@
<!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 | Gardening and Landscaping Website</title>
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="../../assets/images/favicon.ico">
<!-- 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>
<!-- ==================== Scroll-Top Area (Start) ==================== -->
<a href="#" class="scroll-top">
<i class="fa-solid fa-arrow-up-long"></i>
</a>
<!-- ==================== Scroll-Top Area (End) ==================== -->
<!-- ==================== Header Area (Start) ==================== -->
<header class="header">
<!-- ===== Header-1 Area (Start) ===== -->
<div class="header-1">
<!-- == Contacts == -->
<ul class="header-contacts">
<li><i class="fa-solid fa-location-dot"></i><span>LeafLine Company</span></li>
<li><i class="fa-solid fa-phone"></i><span>+123-456-7890</span></li>
<li><i class="fa-solid fa-envelope"></i><span class="gmail">info@leafline.com</span></li>
</ul>
<!-- == Social == -->
<ul class="social-contacts">
<li><a href="#" class="fab fa-facebook-f"></a></li>
<li><a href="#" class="fa-brands fa-x-twitter"></a></li>
<li><a href="#" class="fab fa-instagram"></a></li>
<li><a href="#" class="fab fa-linkedin"></a></li>
</ul>
</div>
<!-- ===== Header-1 Area (End) ===== -->
<!-- ===== Header-2 Area (Start) ===== -->
<div class="header-2">
<!-- == 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>
<div class="container">
<!-- == Navbar == -->
<nav class="navbar">
<a class="nav-btn" href="../../index.html">home</a>
<div class="dropdown-menu">
<button class="nav-btn">about</button>
<div class="dropdown-content">
<a href="../../pages/About/About.html">about us</a>
<a href="../../pages/About/WhyUs.html">Why Choose Us</a>
<a href="../../pages/About/History.html">History</a>
<a href="../../pages/About/Team.html">Team</a>
<a href="../../pages/About/Team-Single.html">Team Single</a>
<a href="../../pages/About/Testimonials.html">testimonials</a>
<a href="../../pages/About/FAQs.html">FAQs</a>
</div>
</div>
<div class="dropdown-menu">
<button class="nav-btn">Pages</button>
<div class="dropdown-content">
<a href="../../pages/Pages/Gallery.html">Gallery</a>
<a href="../../pages/Pages/Pricing.html">Pricing</a>
<a href="../../pages/Pages/Process.html">work process</a>
<a href="../../pages/Pages/Awards.html">Awards</a>
<div class="side-dropdown">
<button>Event</button> <i class="fa-solid fa-chevron-right"></i>
<div class="dropdown-content">
<a href="../../pages/Pages/Events.html">Events</a>
<a href="../../pages/Pages/Event-Single.html">Event Single</a>
</div>
</div>
<div class="side-dropdown">
<button>Career</button> <i class="fa-solid fa-chevron-right"></i>
<div class="dropdown-content">
<a href="../../pages/Pages/Careers.html">Careers</a>
<a href="../../pages/Pages/Career-Single.html">Career Single</a>
<a href="../../pages/Pages/Career-Form.html">Career Form</a>
</div>
</div>
<div class="side-dropdown">
<button>Information Hub</button> <i class="fa-solid fa-chevron-right"></i>
<div class="dropdown-content">
<a href="../../pages/Pages/Not-Found.html">Not Found</a>
<a href="../../pages/Pages/Privacy-Policy.html">Privacy Policy</a>
<a href="../../pages/Pages/Terms.html">Terms & Condition</a>
</div>
</div>
<a href="../../pages/Pages/Cost-Calculator.html">cost calculator</a>
<a href="../../pages/Pages/Get-Quote.html">get a quote</a>
<a href="../../pages/Pages/Clients.html">clients</a>
</div>
</div>
<div class="dropdown-menu">
<button class="nav-btn">Service</button>
<div class="dropdown-content">
<a href="../../pages/Service/Services.html">Services</a>
<a href="../../pages/Service/Service-Single.html">Service Single</a>
</div>
</div>
<div class="dropdown-menu">
<button class="nav-btn">Project</button>
<div class="dropdown-content">
<a href="../../pages/Project/Projects.html">Projects</a>
<a href="../../pages/Project/Project-Single.html">Project Single</a>
</div>
</div>
<div class="dropdown-menu">
<button class="nav-btn">blog</button>
<div class="dropdown-content">
<a href="../../pages/Blog/Blog-Grid.html">blogs grid</a>
<a href="../../pages/Blog/Blog-List.html">blogs list</a>
<a href="../../pages/Blog/Blog-Single.html">blog Single</a>
</div>
</div>
<div class="dropdown-menu">
<button class="nav-btn">shop</button>
<div class="dropdown-content">
<a href="../../pages/Shop/Shop-Grid.html">shop grid</a>
<a href="../../pages/Shop/Shop-List.html">shop list</a>
<a href="../../pages/Shop/Product-Single.html">product Single</a>
<a href="../../pages/Shop/Wishlist.html">wishlist</a>
<a href="../../pages/Shop/Cart.html">cart</a>
<a href="../../pages/Shop/Checkout.html">checkout</a>
<a href="../../pages/Shop/Login.html">login</a>
<a href="../../pages/Shop/Register.html">register</a>
<a href="../../pages/Shop/Reset-Password.html">forgot Password</a>
</div>
</div>
<a class="nav-btn" href="../../pages/Contact/Contact.html">contact</a>
</nav>
<!-- == Icon Container == -->
<div class="icon-container">
<div id="search-btn" class="icon fa-solid fa-magnifying-glass"></div> <!-- Search Icon -->
<div id="menu-btn" class="icon fa-solid fa-bars-staggered"></div>
<a href="../../pages/Pages/Get-Quote.html" class="btn">get A quote</a>
</div>
<!-- == Search Container == -->
<form class="search-container">
<input type="search" id="search-bar" placeholder="search here" required> <!-- Search Input -->
<button type="submit"><i class="fas fa-search"></i></button> <!-- Submit Button -->
</form>
</div>
</div>
<!-- ===== Header-2 Area (End) ===== -->
<!-- ===== Mobile Menu Area (Start) ===== -->
<div class="mobile-menu">
<nav class="mobile-navbar">
<div class="nav-link">
<div class="main-nav-link"> <a class="nav-btn" href="../../index.html">home</a> </div>
</div>
<div class="nav-link">
<div class="main-nav-link"> <div class="nav-btn">about</div> <i class="fas fa-plus"></i> </div>
<div class="sub-nav-link">
<a href="../../pages/About/About.html">about us</a>
<a href="../../pages/About/WhyUs.html">Why Choose Us</a>
<a href="../../pages/About/History.html">History</a>
<a href="../../pages/About/Team.html">Team</a>
<a href="../../pages/About/Team-Single.html">Team Single</a>
<a href="../../pages/About/Testimonials.html">testimonials</a>
<a href="../../pages/About/FAQs.html">FAQs</a>
</div>
</div>
<div class="nav-link">
<div class="main-nav-link"> <div class="nav-btn">pages</div> <i class="fas fa-plus"></i> </div>
<div class="sub-nav-link">
<a href="../../pages/Pages/Gallery.html">Gallery</a>
<a href="../../pages/Pages/Pricing.html">Pricing</a>
<a href="../../pages/Pages/Process.html">work process</a>
<a href="../../pages/Pages/Awards.html">Awards</a>
<a href="../../pages/Pages/Events.html">Events</a>
<a href="../../pages/Pages/Event-Single.html">Event Single</a>
<a href="../../pages/Pages/Careers.html">Careers</a>
<a href="../../pages/Pages/Career-Single.html">Career Single</a>
<a href="../../pages/Pages/Career-Form.html">Career Form</a>
<a href="../../pages/Pages/Not-Found.html">Not Found</a>
<a href="../../pages/Pages/Privacy-Policy.html">Privacy Policy</a>
<a href="../../pages/Pages/Terms.html">Terms & Condition</a>
<a href="../../pages/Pages/Cost-Calculator.html">cost calculator</a>
<a href="../../pages/Pages/Get-Quote.html">get a quote</a>
<a href="../../pages/Pages/Clients.html">clients</a>
</div>
</div>
<div class="nav-link">
<div class="main-nav-link"> <div class="nav-btn">Service</div> <i class="fas fa-plus"></i> </div>
<div class="sub-nav-link">
<a href="../../pages/Service/Services.html">Services</a>
<a href="../../pages/Service/Service-Single.html">Service Single</a>
</div>
</div>
<div class="nav-link">
<div class="main-nav-link"> <div class="nav-btn">Project</div> <i class="fas fa-plus"></i> </div>
<div class="sub-nav-link">
<a href="../../pages/Project/Projects.html">Projects</a>
<a href="../../pages/Project/Project-Single.html">Project Single</a>
</div>
</div>
<div class="nav-link">
<div class="main-nav-link"> <div class="nav-btn">blog</div> <i class="fas fa-plus"></i> </div>
<div class="sub-nav-link">
<a href="../../pages/Blog/Blog-Grid.html">blogs grid</a>
<a href="../../pages/Blog/Blog-List.html">blogs list</a>
<a href="../../pages/Blog/Blog-Single.html">blog Single</a>
</div>
</div>
<div class="nav-link">
<div class="main-nav-link"> <div class="nav-btn">Shop</div> <i class="fas fa-plus"></i> </div>
<div class="sub-nav-link">
<a href="../../pages/Shop/Shop-Grid.html">shop grid</a>
<a href="../../pages/Shop/Shop-List.html">shop list</a>
<a href="../../pages/Shop/Product-Single.html">product Single</a>
<a href="../../pages/Shop/Wishlist.html">wishlist</a>
<a href="../../pages/Shop/Cart.html">cart</a>
<a href="../../pages/Shop/Checkout.html">checkout</a>
<a href="../../pages/Shop/Login.html">login</a>
<a href="../../pages/Shop/Register.html">register</a>
<a href="../../pages/Shop/Reset-Password.html">forgot Password</a>
</div>
</div>
<div class="nav-link">
<div class="main-nav-link"> <a class="nav-btn" href="../../pages/Contact/Contact.html">contact</a> </div>
</div>
</nav>
</div>
<!-- ===== Mobile Menu Area (End) ===== -->
</header>
<!-- ==================== Header Area (End) ==================== -->
<!-- ==================== Page-Title (Start) ==================== -->
<div class="page-title">
<div class="title">
<h2>Blog Grid</h2>
</div>
<div class="link">
<a href="../../index.html">Home</a>
<i class="fa-solid fa-angles-right"></i>
<span class="page">Blog Grid</span>
</div>
</div>
<!-- ==================== Page-Title (End) ==================== -->
<!-- ==================== Blog Grid (Start) ==================== -->
<section class="blog grid">
<!-- ========== Blog Sidebar Area (Start) ========== -->
<div class="sidebar">
<!-- ===== Search Area (Start) ===== -->
<div class="search sidebar-item">
<div class="sidebar-heading">
<h2>search</h2>
</div>
<!-- Blog Search Form -->
<form class="blog-search-container box-container">
<div class="input-box">
<input type="search" id="blog-search" placeholder="search..." required> <!-- Search Input -->
<button type="submit"><i class="fas fa-search"></i></button> <!-- Submit Button -->
</div>
</form>
</div>
<!-- ===== Search Area (End) ===== -->
<!-- ===== Category Area (Start) ===== -->
<div class="category sidebar-item">
<div class="sidebar-heading">
<h2>categories</h2>
</div>
<!-- Blog Categories -->
<div class="box-container">
<a href="#" class="item"> <span><i class="fa-brands fa-pagelines"></i>Garden Design</span> <p>(30)</p> </a>
<a href="#" class="item"> <span><i class="fa-brands fa-pagelines"></i>Landscaping</span> <p>(20)</p> </a>
<a href="#" class="item"> <span><i class="fa-brands fa-pagelines"></i>Plant Care</span> <p>(15)</p> </a>
<a href="#" class="item"> <span><i class="fa-brands fa-pagelines"></i>Outdoor Living</span> <p>(10)</p> </a>
<a href="#" class="item"> <span><i class="fa-brands fa-pagelines"></i>Eco Gardening</span> <p>(05)</p> </a>
</div>
</div>
<!-- ===== Category Area (End) ===== -->
<!-- ===== Recent Posts Area (Start) ===== -->
<div class="recent-posts sidebar-item">
<div class="sidebar-heading">
<h2>recent posts</h2>
</div>
<!-- Recent Posts -->
<div class="box-container">
<!-- Recent Post 1 -->
<div class="post-item">
<img src="../../assets/images/Blog/Blogs/Blog-1.jpg" alt="Recent-Post-Image"> <!-- Post image -->
<a class="main-heading" href="../../pages/Blog/Blog-Single.html">Transform Your Space with Creative Ideas</a> <!-- Post title -->
</div>
<!-- Recent Post 2 -->
<div class="post-item">
<img src="../../assets/images/Blog/Blogs/Blog-2.jpg" alt="Recent-Post-Image"> <!-- Post image -->
<a class="main-heading" href="../../pages/Blog/Blog-Single.html">Top 5 gardening Trends, Redefine Your Garden</a> <!-- Post title -->
</div>
<!-- Recent Post 3 -->
<div class="post-item">
<img src="../../assets/images/Blog/Blogs/Blog-3.jpg" alt="Recent-Post-Image"> <!-- Post image -->
<a class="main-heading" href="../../pages/Blog/Blog-Single.html">How to Keep Your Garden Green Year Round</a> <!-- Post title -->
</div>
</div>
</div>
<!-- ===== Recent Posts Area (End) ===== -->
<!-- ===== Tags Area (Start) ===== -->
<div class="tags sidebar-item">
<div class="sidebar-heading">
<h2>tags</h2>
</div>
<!-- Tags -->
<div class="box-container">
<a href="#" class="tag-item">Garden</a>
<a href="#" class="tag-item">Style</a>
<a href="#" class="tag-item">Blossom</a>
<a href="#" class="tag-item">Greenery</a>
<a href="#" class="tag-item">Landscaping</a>
<a href="#" class="tag-item">design</a>
</div>
</div>
<!-- ===== Tags Area (End) ===== -->
</div>
<!-- ========== Blog Sidebar Area (End) ========== -->
<!-- ========== Blog Container (Start) ========== -->
<div class="blog-container grid">
<!-- ===== Blogs (Start) ===== -->
<div class="blog-items">
<!-- Blog-1 -->
<div class="blog-item">
<div class="image">
<img src="../../assets/images/Blog/Blogs/Blog-1.jpg" alt="Blog-Image"> <!-- Blog Image -->
<div class="date"><div class="tag"><span>25</span> Oct</div></div> <!-- Blog Date -->
</div>
<div class="content">
<div class="details">
<h3><i class="fa-solid fa-circle-user"></i><span>By Admin</span></h3> <!-- Blog Author -->
<h3><i class="fa-solid fa-tags"></i><span>Garden Design</span></h3> <!-- Blog Category -->
</div>
<a class="main-heading" href="../../pages/Blog/Blog-Single.html">Transform Your Space with Creative Ideas</a> <!-- Blog Title -->
</div>
</div>
<!-- Blog-2 -->
<div class="blog-item">
<div class="image">
<img src="../../assets/images/Blog/Blogs/Blog-2.jpg" alt="Blog-Image"> <!-- Blog Image -->
<div class="date"><div class="tag"><span>20</span> Oct</div></div> <!-- Blog Date -->
</div>
<div class="content">
<div class="details">
<h3><i class="fa-solid fa-circle-user"></i><span>By Admin</span></h3>
<h3><i class="fa-solid fa-tags"></i><span>Landscaping</span></h3>
</div>
<a class="main-heading" href="../../pages/Blog/Blog-Single.html">Top 5 gardening Trends, Redefine Your Garden</a>
</div>
</div>
<!-- Blog-3 -->
<div class="blog-item">
<div class="image">
<img src="../../assets/images/Blog/Blogs/Blog-3.jpg" alt="Blog-Image">
<div class="date"><div class="tag"><span>15</span> Oct</div></div>
</div>
<div class="content">
<div class="details">
<h3><i class="fa-solid fa-circle-user"></i><span>By Admin</span></h3>
<h3><i class="fa-solid fa-tags"></i><span>Plant Care</span></h3>
</div>
<a class="main-heading" href="../../pages/Blog/Blog-Single.html">How to Keep Your Garden Green Year Round</a>
</div>
</div>
<!-- Blog-4 -->
<div class="blog-item">
<div class="image">
<img src="../../assets/images/Blog/Blogs/Blog-4.jpg" alt="Blog-Image">
<div class="date"><div class="tag"><span>10</span> Oct</div></div>
</div>
<div class="content">
<div class="details">
<h3><i class="fa-solid fa-circle-user"></i><span>By Admin</span></h3>
<h3><i class="fa-solid fa-tags"></i><span>Outdoor Living</span></h3>
</div>
<a class="main-heading" href="../../pages/Blog/Blog-Single.html">Create a Relaxing Space with good Landscaping</a>
</div>
</div>
<!-- Blog-5 -->
<div class="blog-item">
<div class="image">
<img src="../../assets/images/Blog/Blogs/Blog-5.jpg" alt="Blog-Image">
<div class="date"><div class="tag"><span>05</span> Oct</div></div>
</div>
<div class="content">
<div class="details">
<h3><i class="fa-solid fa-circle-user"></i><span>By Admin</span></h3>
<h3><i class="fa-solid fa-tags"></i><span>Eco Gardening</span></h3>
</div>
<a class="main-heading" href="../../pages/Blog/Blog-Single.html">Eco-Friendly Gardening: Simple Ways Go Green</a>
</div>
</div>
<!-- Blog-6 -->
<div class="blog-item">
<div class="image">
<img src="../../assets/images/Blog/Blogs/Blog-6.jpg" alt="Blog-Image">
<div class="date"><div class="tag"><span>01</span> Oct</div></div>
</div>
<div class="content">
<div class="details">
<h3><i class="fa-solid fa-circle-user"></i><span>By Admin</span></h3>
<h3><i class="fa-solid fa-tags"></i><span>Garden Maintenance</span></h3>
</div>
<a class="main-heading" href="../../pages/Blog/Blog-Single.html">Essential Maintenance Tips for a Perfect Garden</a>
</div>
</div>
</div>
<!-- ===== Blogs (End) ===== -->
<!-- ===== Pagination (Start) ===== -->
<div class="pages-no">
<div class="container">
<!-- Previous page button -->
<div class="item">
<i class="fas fa-arrow-left"></i>
</div>
<!-- Page numbers -->
<div class="numbers">
<div class="item active">1</div> <!-- Active page number -->
<div class="item">2</div> <!-- Page number 2 -->
<div class="item">3</div> <!-- Page number 3 -->
</div>
<!-- Next page button-->
<div class="item">
<i class="fa-solid fa-arrow-right"></i>
</div>
</div>
</div>
<!-- ===== Pagination (End) ===== -->
</div>
<!-- ========== Blog Container (End) ========== -->
</section>
<!-- ==================== Blog Grid (End) ==================== -->
<!-- ==================== Footer Area (Start) ==================== -->
<footer class="footer">
<div class="box-container">
<!-- Gardening and Landscaping Company Information & Social Media Links -->
<div class="footer-item">
<!-- Gardening and Landscaping Company 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>
<!-- Description -->
<p>Transforming outdoor spaces with premium gardening and landscaping solutions.</p>
<!-- Contact Information -->
<div class="info connect">
<p><i class="fas fa-phone"></i><span>+123-456-7890</span></p>
<p><i class="fas fa-envelope"></i><span class="gmail">info@leafline.com</span></p>
<p><i class="fas fa-map-marker-alt"></i><span>LeafLine Company</span></p>
</div>
<!-- Social Media Links -->
<div class="social">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fa-brands fa-x-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-linkedin"></i></a>
</div>
</div>
<!-- Gardening and Landscaping Services Offered -->
<div class="footer-item">
<h2>Our Services</h2>
<div class="info links">
<p><i class="fa-brands fa-pagelines"></i><a href="../../pages/Service/Service-Single.html">Lawn Care</a></p>
<p><i class="fa-brands fa-pagelines"></i><a href="../../pages/Service/Service-Single.html">Garden Design</a></p>
<p><i class="fa-brands fa-pagelines"></i><a href="../../pages/Service/Service-Single.html">Tree Planting</a></p>
<p><i class="fa-brands fa-pagelines"></i><a href="../../pages/Service/Service-Single.html">Hardscaping Solution</a></p>
<p><i class="fa-brands fa-pagelines"></i><a href="../../pages/Service/Service-Single.html">water ponds</a></p>
<p><i class="fa-brands fa-pagelines"></i><a href="../../pages/Service/Service-Single.html">Outdoor Décor</a></p>
</div>
</div>
<!-- Quick Links -->
<div class="footer-item">
<h2>Quick Links</h2>
<div class="info links">
<p><i class="fa-brands fa-pagelines"></i><a href="../../pages/About/About.html">About Us</a></p>
<p><i class="fa-brands fa-pagelines"></i><a href="../../pages/Service/Services.html">Services</a></p>
<p><i class="fa-brands fa-pagelines"></i><a href="../../pages/Project/Projects.html">Projects</a></p>
<p><i class="fa-brands fa-pagelines"></i><a href="../../pages/Blog/Blog-Grid.html">Blog</a></p>
<p><i class="fa-brands fa-pagelines"></i><a href="../../pages/Shop/Shop-Grid.html">Shop</a></p>
<p><i class="fa-brands fa-pagelines"></i><a href="../../pages/Contact/Contact.html">Contact Us</a></p>
</div>
</div>
<!-- Newsletter Subscription -->
<div class="footer-item">
<h2>Newsletter</h2>
<p>Stay informed and up-to-date with the latest trends, helpful tips, and exclusive special offers.</p>
<form class="dark-form" method="post" id="newsletter-form-2">
<div class="input-field">
<label for="news-email-2" class="fas fa-envelope"></label>
<input type="email" id="news-email-2" name="email" class="box" placeholder="Your email address" required>
</div>
<button type="submit" class="btn" name="submit" id="submit-2">Subscribe</button>
<span class="alert" id="msg-2"></span>
</form>
</div>
</div>
<!-- Gardening and Landscaping Company's Name and Copyright -->
<div class="content">
<p>Designed By <span>NorthStar_Themes</span> | All Rights Reserved</p>
</div>
</footer>
<!-- ==================== Footer Area (End) ==================== -->
<!-- Jquery -->
<script src="../../assets/vendors/jquery/jquery.min.js"></script>
<!-- Custom Script Files -->
<script src="../../assets/js/script.js"></script> <!-- Custom JavaScript file with additional website functionality. -->
<script src="../../assets/js/nav-link-toggler.js"></script> <!-- Manages navigation link toggling (e.g., hamburger menu) for mobile devices -->
<script src="../../assets/js/newsletter.js"></script>
</body>
</html>
@@ -0,0 +1,603 @@
<!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 | Gardening and Landscaping Website</title>
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="../../assets/images/favicon.ico">
<!-- 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>
<!-- ==================== Scroll-Top Area (Start) ==================== -->
<a href="#" class="scroll-top">
<i class="fa-solid fa-arrow-up-long"></i>
</a>
<!-- ==================== Scroll-Top Area (End) ==================== -->
<!-- ==================== Header Area (Start) ==================== -->
<header class="header">
<!-- ===== Header-1 Area (Start) ===== -->
<div class="header-1">
<!-- == Contacts == -->
<ul class="header-contacts">
<li><i class="fa-solid fa-location-dot"></i><span>LeafLine Company</span></li>
<li><i class="fa-solid fa-phone"></i><span>+123-456-7890</span></li>
<li><i class="fa-solid fa-envelope"></i><span class="gmail">info@leafline.com</span></li>
</ul>
<!-- == Social == -->
<ul class="social-contacts">
<li><a href="#" class="fab fa-facebook-f"></a></li>
<li><a href="#" class="fa-brands fa-x-twitter"></a></li>
<li><a href="#" class="fab fa-instagram"></a></li>
<li><a href="#" class="fab fa-linkedin"></a></li>
</ul>
</div>
<!-- ===== Header-1 Area (End) ===== -->
<!-- ===== Header-2 Area (Start) ===== -->
<div class="header-2">
<!-- == 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>
<div class="container">
<!-- == Navbar == -->
<nav class="navbar">
<a class="nav-btn" href="../../index.html">home</a>
<div class="dropdown-menu">
<button class="nav-btn">about</button>
<div class="dropdown-content">
<a href="../../pages/About/About.html">about us</a>
<a href="../../pages/About/WhyUs.html">Why Choose Us</a>
<a href="../../pages/About/History.html">History</a>
<a href="../../pages/About/Team.html">Team</a>
<a href="../../pages/About/Team-Single.html">Team Single</a>
<a href="../../pages/About/Testimonials.html">testimonials</a>
<a href="../../pages/About/FAQs.html">FAQs</a>
</div>
</div>
<div class="dropdown-menu">
<button class="nav-btn">Pages</button>
<div class="dropdown-content">
<a href="../../pages/Pages/Gallery.html">Gallery</a>
<a href="../../pages/Pages/Pricing.html">Pricing</a>
<a href="../../pages/Pages/Process.html">work process</a>
<a href="../../pages/Pages/Awards.html">Awards</a>
<div class="side-dropdown">
<button>Event</button> <i class="fa-solid fa-chevron-right"></i>
<div class="dropdown-content">
<a href="../../pages/Pages/Events.html">Events</a>
<a href="../../pages/Pages/Event-Single.html">Event Single</a>
</div>
</div>
<div class="side-dropdown">
<button>Career</button> <i class="fa-solid fa-chevron-right"></i>
<div class="dropdown-content">
<a href="../../pages/Pages/Careers.html">Careers</a>
<a href="../../pages/Pages/Career-Single.html">Career Single</a>
<a href="../../pages/Pages/Career-Form.html">Career Form</a>
</div>
</div>
<div class="side-dropdown">
<button>Information Hub</button> <i class="fa-solid fa-chevron-right"></i>
<div class="dropdown-content">
<a href="../../pages/Pages/Not-Found.html">Not Found</a>
<a href="../../pages/Pages/Privacy-Policy.html">Privacy Policy</a>
<a href="../../pages/Pages/Terms.html">Terms & Condition</a>
</div>
</div>
<a href="../../pages/Pages/Cost-Calculator.html">cost calculator</a>
<a href="../../pages/Pages/Get-Quote.html">get a quote</a>
<a href="../../pages/Pages/Clients.html">clients</a>
</div>
</div>
<div class="dropdown-menu">
<button class="nav-btn">Service</button>
<div class="dropdown-content">
<a href="../../pages/Service/Services.html">Services</a>
<a href="../../pages/Service/Service-Single.html">Service Single</a>
</div>
</div>
<div class="dropdown-menu">
<button class="nav-btn">Project</button>
<div class="dropdown-content">
<a href="../../pages/Project/Projects.html">Projects</a>
<a href="../../pages/Project/Project-Single.html">Project Single</a>
</div>
</div>
<div class="dropdown-menu">
<button class="nav-btn">blog</button>
<div class="dropdown-content">
<a href="../../pages/Blog/Blog-Grid.html">blogs grid</a>
<a href="../../pages/Blog/Blog-List.html">blogs list</a>
<a href="../../pages/Blog/Blog-Single.html">blog Single</a>
</div>
</div>
<div class="dropdown-menu">
<button class="nav-btn">shop</button>
<div class="dropdown-content">
<a href="../../pages/Shop/Shop-Grid.html">shop grid</a>
<a href="../../pages/Shop/Shop-List.html">shop list</a>
<a href="../../pages/Shop/Product-Single.html">product Single</a>
<a href="../../pages/Shop/Wishlist.html">wishlist</a>
<a href="../../pages/Shop/Cart.html">cart</a>
<a href="../../pages/Shop/Checkout.html">checkout</a>
<a href="../../pages/Shop/Login.html">login</a>
<a href="../../pages/Shop/Register.html">register</a>
<a href="../../pages/Shop/Reset-Password.html">forgot Password</a>
</div>
</div>
<a class="nav-btn" href="../../pages/Contact/Contact.html">contact</a>
</nav>
<!-- == Icon Container == -->
<div class="icon-container">
<div id="search-btn" class="icon fa-solid fa-magnifying-glass"></div> <!-- Search Icon -->
<div id="menu-btn" class="icon fa-solid fa-bars-staggered"></div>
<a href="../../pages/Pages/Get-Quote.html" class="btn">get A quote</a>
</div>
<!-- == Search Container == -->
<form class="search-container">
<input type="search" id="search-bar" placeholder="search here" required> <!-- Search Input -->
<button type="submit"><i class="fas fa-search"></i></button> <!-- Submit Button -->
</form>
</div>
</div>
<!-- ===== Header-2 Area (End) ===== -->
<!-- ===== Mobile Menu Area (Start) ===== -->
<div class="mobile-menu">
<nav class="mobile-navbar">
<div class="nav-link">
<div class="main-nav-link"> <a class="nav-btn" href="../../index.html">home</a> </div>
</div>
<div class="nav-link">
<div class="main-nav-link"> <div class="nav-btn">about</div> <i class="fas fa-plus"></i> </div>
<div class="sub-nav-link">
<a href="../../pages/About/About.html">about us</a>
<a href="../../pages/About/WhyUs.html">Why Choose Us</a>
<a href="../../pages/About/History.html">History</a>
<a href="../../pages/About/Team.html">Team</a>
<a href="../../pages/About/Team-Single.html">Team Single</a>
<a href="../../pages/About/Testimonials.html">testimonials</a>
<a href="../../pages/About/FAQs.html">FAQs</a>
</div>
</div>
<div class="nav-link">
<div class="main-nav-link"> <div class="nav-btn">pages</div> <i class="fas fa-plus"></i> </div>
<div class="sub-nav-link">
<a href="../../pages/Pages/Gallery.html">Gallery</a>
<a href="../../pages/Pages/Pricing.html">Pricing</a>
<a href="../../pages/Pages/Process.html">work process</a>
<a href="../../pages/Pages/Awards.html">Awards</a>
<a href="../../pages/Pages/Events.html">Events</a>
<a href="../../pages/Pages/Event-Single.html">Event Single</a>
<a href="../../pages/Pages/Careers.html">Careers</a>
<a href="../../pages/Pages/Career-Single.html">Career Single</a>
<a href="../../pages/Pages/Career-Form.html">Career Form</a>
<a href="../../pages/Pages/Not-Found.html">Not Found</a>
<a href="../../pages/Pages/Privacy-Policy.html">Privacy Policy</a>
<a href="../../pages/Pages/Terms.html">Terms & Condition</a>
<a href="../../pages/Pages/Cost-Calculator.html">cost calculator</a>
<a href="../../pages/Pages/Get-Quote.html">get a quote</a>
<a href="../../pages/Pages/Clients.html">clients</a>
</div>
</div>
<div class="nav-link">
<div class="main-nav-link"> <div class="nav-btn">Service</div> <i class="fas fa-plus"></i> </div>
<div class="sub-nav-link">
<a href="../../pages/Service/Services.html">Services</a>
<a href="../../pages/Service/Service-Single.html">Service Single</a>
</div>
</div>
<div class="nav-link">
<div class="main-nav-link"> <div class="nav-btn">Project</div> <i class="fas fa-plus"></i> </div>
<div class="sub-nav-link">
<a href="../../pages/Project/Projects.html">Projects</a>
<a href="../../pages/Project/Project-Single.html">Project Single</a>
</div>
</div>
<div class="nav-link">
<div class="main-nav-link"> <div class="nav-btn">blog</div> <i class="fas fa-plus"></i> </div>
<div class="sub-nav-link">
<a href="../../pages/Blog/Blog-Grid.html">blogs grid</a>
<a href="../../pages/Blog/Blog-List.html">blogs list</a>
<a href="../../pages/Blog/Blog-Single.html">blog Single</a>
</div>
</div>
<div class="nav-link">
<div class="main-nav-link"> <div class="nav-btn">Shop</div> <i class="fas fa-plus"></i> </div>
<div class="sub-nav-link">
<a href="../../pages/Shop/Shop-Grid.html">shop grid</a>
<a href="../../pages/Shop/Shop-List.html">shop list</a>
<a href="../../pages/Shop/Product-Single.html">product Single</a>
<a href="../../pages/Shop/Wishlist.html">wishlist</a>
<a href="../../pages/Shop/Cart.html">cart</a>
<a href="../../pages/Shop/Checkout.html">checkout</a>
<a href="../../pages/Shop/Login.html">login</a>
<a href="../../pages/Shop/Register.html">register</a>
<a href="../../pages/Shop/Reset-Password.html">forgot Password</a>
</div>
</div>
<div class="nav-link">
<div class="main-nav-link"> <a class="nav-btn" href="../../pages/Contact/Contact.html">contact</a> </div>
</div>
</nav>
</div>
<!-- ===== Mobile Menu Area (End) ===== -->
</header>
<!-- ==================== Header Area (End) ==================== -->
<!-- ==================== Page-Title (Start) ==================== -->
<div class="page-title">
<div class="title">
<h2>Blog List</h2>
</div>
<div class="link">
<a href="../../index.html">Home</a>
<i class="fa-solid fa-angles-right"></i>
<span class="page">Blog List</span>
</div>
</div>
<!-- ==================== Page-Title (End) ==================== -->
<!-- ==================== Blog List (Start) ==================== -->
<section class="blog list">
<!-- ========== Blog Sidebar Area (Start) ========== -->
<div class="sidebar">
<!-- ===== Search Area (Start) ===== -->
<div class="search sidebar-item">
<div class="sidebar-heading">
<h2>search</h2>
</div>
<!-- Blog Search Form -->
<form class="blog-search-container box-container">
<div class="input-box">
<input type="search" id="blog-search" placeholder="search..." required> <!-- Search Input -->
<button type="submit"><i class="fas fa-search"></i></button> <!-- Submit Button -->
</div>
</form>
</div>
<!-- ===== Search Area (End) ===== -->
<!-- ===== Category Area (Start) ===== -->
<div class="category sidebar-item">
<div class="sidebar-heading">
<h2>categories</h2>
</div>
<!-- Blog Categories -->
<div class="box-container">
<a href="#" class="item"> <span><i class="fa-brands fa-pagelines"></i>Garden Design</span> <p>(30)</p> </a>
<a href="#" class="item"> <span><i class="fa-brands fa-pagelines"></i>Landscaping</span> <p>(20)</p> </a>
<a href="#" class="item"> <span><i class="fa-brands fa-pagelines"></i>Plant Care</span> <p>(15)</p> </a>
<a href="#" class="item"> <span><i class="fa-brands fa-pagelines"></i>Outdoor Living</span> <p>(10)</p> </a>
<a href="#" class="item"> <span><i class="fa-brands fa-pagelines"></i>Eco Gardening</span> <p>(05)</p> </a>
</div>
</div>
<!-- ===== Category Area (End) ===== -->
<!-- ===== Recent Posts Area (Start) ===== -->
<div class="recent-posts sidebar-item">
<div class="sidebar-heading">
<h2>recent posts</h2>
</div>
<!-- Recent Posts -->
<div class="box-container">
<!-- Recent Post 1 -->
<div class="post-item">
<img src="../../assets/images/Blog/Blogs/Blog-1.jpg" alt="Recent-Post-Image"> <!-- Post image -->
<a class="main-heading" href="../../pages/Blog/Blog-Single.html">Transform Your Space with Creative Ideas</a> <!-- Post title -->
</div>
<!-- Recent Post 2 -->
<div class="post-item">
<img src="../../assets/images/Blog/Blogs/Blog-2.jpg" alt="Recent-Post-Image"> <!-- Post image -->
<a class="main-heading" href="../../pages/Blog/Blog-Single.html">Top 5 gardening Trends, Redefine Your Garden</a> <!-- Post title -->
</div>
<!-- Recent Post 3 -->
<div class="post-item">
<img src="../../assets/images/Blog/Blogs/Blog-3.jpg" alt="Recent-Post-Image"> <!-- Post image -->
<a class="main-heading" href="../../pages/Blog/Blog-Single.html">How to Keep Your Garden Green Year Round</a> <!-- Post title -->
</div>
</div>
</div>
<!-- ===== Recent Posts Area (End) ===== -->
<!-- ===== Tags Area (Start) ===== -->
<div class="tags sidebar-item">
<div class="sidebar-heading">
<h2>tags</h2>
</div>
<!-- Tags -->
<div class="box-container">
<a href="#" class="tag-item">Garden</a>
<a href="#" class="tag-item">Style</a>
<a href="#" class="tag-item">Blossom</a>
<a href="#" class="tag-item">Greenery</a>
<a href="#" class="tag-item">Landscaping</a>
<a href="#" class="tag-item">design</a>
</div>
</div>
<!-- ===== Tags Area (End) ===== -->
</div>
<!-- ========== Blog Sidebar Area (End) ========== -->
<!-- ========== Blog Container (Start) ========== -->
<div class="blog-container list">
<!-- ===== Blogs (Start) ===== -->
<!-- Blog-1 -->
<div class="blog-item">
<div class="image">
<img src="../../assets/images/Blog/Blogs/Blog-1.jpg" alt="Blog-Image"> <!-- Blog Image -->
<div class="date"><div class="tag"><span>25</span> Oct</div></div> <!-- Blog Date -->
</div>
<div class="content">
<div class="details">
<h3><i class="fa-solid fa-circle-user"></i><span>By Admin</span></h3> <!-- Blog Author -->
<h3><i class="fa-solid fa-tags"></i><span>Garden Design</span></h3> <!-- Blog Category -->
</div>
<a class="main-heading" href="../../pages/Blog/Blog-Single.html">Transform Your Space with Creative Ideas</a> <!-- Blog Title -->
</div>
</div>
<!-- Blog-2 -->
<div class="blog-item">
<div class="image">
<img src="../../assets/images/Blog/Blogs/Blog-2.jpg" alt="Blog-Image"> <!-- Blog Image -->
<div class="date"><div class="tag"><span>20</span> Oct</div></div> <!-- Blog Date -->
</div>
<div class="content">
<div class="details">
<h3><i class="fa-solid fa-circle-user"></i><span>By Admin</span></h3>
<h3><i class="fa-solid fa-tags"></i><span>Landscaping</span></h3>
</div>
<a class="main-heading" href="../../pages/Blog/Blog-Single.html">Top 5 gardening Trends, Redefine Your Garden</a>
</div>
</div>
<!-- Blog-3 -->
<div class="blog-item">
<div class="image">
<img src="../../assets/images/Blog/Blogs/Blog-3.jpg" alt="Blog-Image">
<div class="date"><div class="tag"><span>15</span> Oct</div></div>
</div>
<div class="content">
<div class="details">
<h3><i class="fa-solid fa-circle-user"></i><span>By Admin</span></h3>
<h3><i class="fa-solid fa-tags"></i><span>Plant Care</span></h3>
</div>
<a class="main-heading" href="../../pages/Blog/Blog-Single.html">How to Keep Your Garden Green Year Round</a>
</div>
</div>
<!-- Blog-4 -->
<div class="blog-item">
<div class="image">
<img src="../../assets/images/Blog/Blogs/Blog-4.jpg" alt="Blog-Image">
<div class="date"><div class="tag"><span>10</span> Oct</div></div>
</div>
<div class="content">
<div class="details">
<h3><i class="fa-solid fa-circle-user"></i><span>By Admin</span></h3>
<h3><i class="fa-solid fa-tags"></i><span>Outdoor Living</span></h3>
</div>
<a class="main-heading" href="../../pages/Blog/Blog-Single.html">Create a Relaxing Space with good Landscaping</a>
</div>
</div>
<!-- ===== Blogs (End) ===== -->
<!-- ===== Pagination (Start) ===== -->
<div class="pages-no">
<div class="container">
<!-- Previous page button -->
<div class="item">
<i class="fas fa-arrow-left"></i>
</div>
<!-- Page numbers -->
<div class="numbers">
<div class="item active">1</div> <!-- Active page number -->
<div class="item">2</div> <!-- Page number 2 -->
<div class="item">3</div> <!-- Page number 3 -->
</div>
<!-- Next page button-->
<div class="item">
<i class="fa-solid fa-arrow-right"></i>
</div>
</div>
</div>
<!-- ===== Pagination (End) ===== -->
</div>
<!-- ========== Blog Container (End) ========== -->
</section>
<!-- ==================== Blog List (End) ==================== -->
<!-- ==================== Footer Area (Start) ==================== -->
<footer class="footer">
<div class="box-container">
<!-- Gardening and Landscaping Company Information & Social Media Links -->
<div class="footer-item">
<!-- Gardening and Landscaping Company 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>
<!-- Description -->
<p>Transforming outdoor spaces with premium gardening and landscaping solutions.</p>
<!-- Contact Information -->
<div class="info connect">
<p><i class="fas fa-phone"></i><span>+123-456-7890</span></p>
<p><i class="fas fa-envelope"></i><span class="gmail">info@leafline.com</span></p>
<p><i class="fas fa-map-marker-alt"></i><span>LeafLine Company</span></p>
</div>
<!-- Social Media Links -->
<div class="social">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fa-brands fa-x-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-linkedin"></i></a>
</div>
</div>
<!-- Gardening and Landscaping Services Offered -->
<div class="footer-item">
<h2>Our Services</h2>
<div class="info links">
<p><i class="fa-brands fa-pagelines"></i><a href="../../pages/Service/Service-Single.html">Lawn Care</a></p>
<p><i class="fa-brands fa-pagelines"></i><a href="../../pages/Service/Service-Single.html">Garden Design</a></p>
<p><i class="fa-brands fa-pagelines"></i><a href="../../pages/Service/Service-Single.html">Tree Planting</a></p>
<p><i class="fa-brands fa-pagelines"></i><a href="../../pages/Service/Service-Single.html">Hardscaping Solution</a></p>
<p><i class="fa-brands fa-pagelines"></i><a href="../../pages/Service/Service-Single.html">water ponds</a></p>
<p><i class="fa-brands fa-pagelines"></i><a href="../../pages/Service/Service-Single.html">Outdoor Décor</a></p>
</div>
</div>
<!-- Quick Links -->
<div class="footer-item">
<h2>Quick Links</h2>
<div class="info links">
<p><i class="fa-brands fa-pagelines"></i><a href="../../pages/About/About.html">About Us</a></p>
<p><i class="fa-brands fa-pagelines"></i><a href="../../pages/Service/Services.html">Services</a></p>
<p><i class="fa-brands fa-pagelines"></i><a href="../../pages/Project/Projects.html">Projects</a></p>
<p><i class="fa-brands fa-pagelines"></i><a href="../../pages/Blog/Blog-Grid.html">Blog</a></p>
<p><i class="fa-brands fa-pagelines"></i><a href="../../pages/Shop/Shop-Grid.html">Shop</a></p>
<p><i class="fa-brands fa-pagelines"></i><a href="../../pages/Contact/Contact.html">Contact Us</a></p>
</div>
</div>
<!-- Newsletter Subscription -->
<div class="footer-item">
<h2>Newsletter</h2>
<p>Stay informed and up-to-date with the latest trends, helpful tips, and exclusive special offers.</p>
<form class="dark-form" method="post" id="newsletter-form-2">
<div class="input-field">
<label for="news-email-2" class="fas fa-envelope"></label>
<input type="email" id="news-email-2" name="email" class="box" placeholder="Your email address" required>
</div>
<button type="submit" class="btn" name="submit" id="submit-2">Subscribe</button>
<span class="alert" id="msg-2"></span>
</form>
</div>
</div>
<!-- Gardening and Landscaping Company's Name and Copyright -->
<div class="content">
<p>Designed By <span>NorthStar_Themes</span> | All Rights Reserved</p>
</div>
</footer>
<!-- ==================== Footer Area (End) ==================== -->
<!-- Jquery -->
<script src="../../assets/vendors/jquery/jquery.min.js"></script>
<!-- Custom Script Files -->
<script src="../../assets/js/script.js"></script> <!-- Custom JavaScript file with additional website functionality. -->
<script src="../../assets/js/nav-link-toggler.js"></script> <!-- Manages navigation link toggling (e.g., hamburger menu) for mobile devices -->
<script src="../../assets/js/newsletter.js"></script>
</body>
</html>
@@ -0,0 +1,685 @@
<!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 | Gardening and Landscaping Website</title>
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="../../assets/images/favicon.ico">
<!-- Font-Awesome (CSS) -->
<link rel="stylesheet" href="../../assets/vendors/font-awesome/css/all.min.css">
<!-- Magnific-Popup (CSS) -->
<link rel="stylesheet" href="../../assets/vendors/magnific-popup/magnific-popup.css">
<!-- Custom Stylesheets -->
<link rel="stylesheet" href="../../assets/css/main.css">
<link rel="stylesheet" href="../../assets/css/responsive.css">
</head>
<body>
<!-- ==================== Scroll-Top Area (Start) ==================== -->
<a href="#" class="scroll-top">
<i class="fa-solid fa-arrow-up-long"></i>
</a>
<!-- ==================== Scroll-Top Area (End) ==================== -->
<!-- ==================== Header Area (Start) ==================== -->
<header class="header">
<!-- ===== Header-1 Area (Start) ===== -->
<div class="header-1">
<!-- == Contacts == -->
<ul class="header-contacts">
<li><i class="fa-solid fa-location-dot"></i><span>LeafLine Company</span></li>
<li><i class="fa-solid fa-phone"></i><span>+123-456-7890</span></li>
<li><i class="fa-solid fa-envelope"></i><span class="gmail">info@leafline.com</span></li>
</ul>
<!-- == Social == -->
<ul class="social-contacts">
<li><a href="#" class="fab fa-facebook-f"></a></li>
<li><a href="#" class="fa-brands fa-x-twitter"></a></li>
<li><a href="#" class="fab fa-instagram"></a></li>
<li><a href="#" class="fab fa-linkedin"></a></li>
</ul>
</div>
<!-- ===== Header-1 Area (End) ===== -->
<!-- ===== Header-2 Area (Start) ===== -->
<div class="header-2">
<!-- == 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>
<div class="container">
<!-- == Navbar == -->
<nav class="navbar">
<a class="nav-btn" href="../../index.html">home</a>
<div class="dropdown-menu">
<button class="nav-btn">about</button>
<div class="dropdown-content">
<a href="../../pages/About/About.html">about us</a>
<a href="../../pages/About/WhyUs.html">Why Choose Us</a>
<a href="../../pages/About/History.html">History</a>
<a href="../../pages/About/Team.html">Team</a>
<a href="../../pages/About/Team-Single.html">Team Single</a>
<a href="../../pages/About/Testimonials.html">testimonials</a>
<a href="../../pages/About/FAQs.html">FAQs</a>
</div>
</div>
<div class="dropdown-menu">
<button class="nav-btn">Pages</button>
<div class="dropdown-content">
<a href="../../pages/Pages/Gallery.html">Gallery</a>
<a href="../../pages/Pages/Pricing.html">Pricing</a>
<a href="../../pages/Pages/Process.html">work process</a>
<a href="../../pages/Pages/Awards.html">Awards</a>
<div class="side-dropdown">
<button>Event</button> <i class="fa-solid fa-chevron-right"></i>
<div class="dropdown-content">
<a href="../../pages/Pages/Events.html">Events</a>
<a href="../../pages/Pages/Event-Single.html">Event Single</a>
</div>
</div>
<div class="side-dropdown">
<button>Career</button> <i class="fa-solid fa-chevron-right"></i>
<div class="dropdown-content">
<a href="../../pages/Pages/Careers.html">Careers</a>
<a href="../../pages/Pages/Career-Single.html">Career Single</a>
<a href="../../pages/Pages/Career-Form.html">Career Form</a>
</div>
</div>
<div class="side-dropdown">
<button>Information Hub</button> <i class="fa-solid fa-chevron-right"></i>
<div class="dropdown-content">
<a href="../../pages/Pages/Not-Found.html">Not Found</a>
<a href="../../pages/Pages/Privacy-Policy.html">Privacy Policy</a>
<a href="../../pages/Pages/Terms.html">Terms & Condition</a>
</div>
</div>
<a href="../../pages/Pages/Cost-Calculator.html">cost calculator</a>
<a href="../../pages/Pages/Get-Quote.html">get a quote</a>
<a href="../../pages/Pages/Clients.html">clients</a>
</div>
</div>
<div class="dropdown-menu">
<button class="nav-btn">Service</button>
<div class="dropdown-content">
<a href="../../pages/Service/Services.html">Services</a>
<a href="../../pages/Service/Service-Single.html">Service Single</a>
</div>
</div>
<div class="dropdown-menu">
<button class="nav-btn">Project</button>
<div class="dropdown-content">
<a href="../../pages/Project/Projects.html">Projects</a>
<a href="../../pages/Project/Project-Single.html">Project Single</a>
</div>
</div>
<div class="dropdown-menu">
<button class="nav-btn">blog</button>
<div class="dropdown-content">
<a href="../../pages/Blog/Blog-Grid.html">blogs grid</a>
<a href="../../pages/Blog/Blog-List.html">blogs list</a>
<a href="../../pages/Blog/Blog-Single.html">blog Single</a>
</div>
</div>
<div class="dropdown-menu">
<button class="nav-btn">shop</button>
<div class="dropdown-content">
<a href="../../pages/Shop/Shop-Grid.html">shop grid</a>
<a href="../../pages/Shop/Shop-List.html">shop list</a>
<a href="../../pages/Shop/Product-Single.html">product Single</a>
<a href="../../pages/Shop/Wishlist.html">wishlist</a>
<a href="../../pages/Shop/Cart.html">cart</a>
<a href="../../pages/Shop/Checkout.html">checkout</a>
<a href="../../pages/Shop/Login.html">login</a>
<a href="../../pages/Shop/Register.html">register</a>
<a href="../../pages/Shop/Reset-Password.html">forgot Password</a>
</div>
</div>
<a class="nav-btn" href="../../pages/Contact/Contact.html">contact</a>
</nav>
<!-- == Icon Container == -->
<div class="icon-container">
<div id="search-btn" class="icon fa-solid fa-magnifying-glass"></div> <!-- Search Icon -->
<div id="menu-btn" class="icon fa-solid fa-bars-staggered"></div>
<a href="../../pages/Pages/Get-Quote.html" class="btn">get A quote</a>
</div>
<!-- == Search Container == -->
<form class="search-container">
<input type="search" id="search-bar" placeholder="search here" required> <!-- Search Input -->
<button type="submit"><i class="fas fa-search"></i></button> <!-- Submit Button -->
</form>
</div>
</div>
<!-- ===== Header-2 Area (End) ===== -->
<!-- ===== Mobile Menu Area (Start) ===== -->
<div class="mobile-menu">
<nav class="mobile-navbar">
<div class="nav-link">
<div class="main-nav-link"> <a class="nav-btn" href="../../index.html">home</a> </div>
</div>
<div class="nav-link">
<div class="main-nav-link"> <div class="nav-btn">about</div> <i class="fas fa-plus"></i> </div>
<div class="sub-nav-link">
<a href="../../pages/About/About.html">about us</a>
<a href="../../pages/About/WhyUs.html">Why Choose Us</a>
<a href="../../pages/About/History.html">History</a>
<a href="../../pages/About/Team.html">Team</a>
<a href="../../pages/About/Team-Single.html">Team Single</a>
<a href="../../pages/About/Testimonials.html">testimonials</a>
<a href="../../pages/About/FAQs.html">FAQs</a>
</div>
</div>
<div class="nav-link">
<div class="main-nav-link"> <div class="nav-btn">pages</div> <i class="fas fa-plus"></i> </div>
<div class="sub-nav-link">
<a href="../../pages/Pages/Gallery.html">Gallery</a>
<a href="../../pages/Pages/Pricing.html">Pricing</a>
<a href="../../pages/Pages/Process.html">work process</a>
<a href="../../pages/Pages/Awards.html">Awards</a>
<a href="../../pages/Pages/Events.html">Events</a>
<a href="../../pages/Pages/Event-Single.html">Event Single</a>
<a href="../../pages/Pages/Careers.html">Careers</a>
<a href="../../pages/Pages/Career-Single.html">Career Single</a>
<a href="../../pages/Pages/Career-Form.html">Career Form</a>
<a href="../../pages/Pages/Not-Found.html">Not Found</a>
<a href="../../pages/Pages/Privacy-Policy.html">Privacy Policy</a>
<a href="../../pages/Pages/Terms.html">Terms & Condition</a>
<a href="../../pages/Pages/Cost-Calculator.html">cost calculator</a>
<a href="../../pages/Pages/Get-Quote.html">get a quote</a>
<a href="../../pages/Pages/Clients.html">clients</a>
</div>
</div>
<div class="nav-link">
<div class="main-nav-link"> <div class="nav-btn">Service</div> <i class="fas fa-plus"></i> </div>
<div class="sub-nav-link">
<a href="../../pages/Service/Services.html">Services</a>
<a href="../../pages/Service/Service-Single.html">Service Single</a>
</div>
</div>
<div class="nav-link">
<div class="main-nav-link"> <div class="nav-btn">Project</div> <i class="fas fa-plus"></i> </div>
<div class="sub-nav-link">
<a href="../../pages/Project/Projects.html">Projects</a>
<a href="../../pages/Project/Project-Single.html">Project Single</a>
</div>
</div>
<div class="nav-link">
<div class="main-nav-link"> <div class="nav-btn">blog</div> <i class="fas fa-plus"></i> </div>
<div class="sub-nav-link">
<a href="../../pages/Blog/Blog-Grid.html">blogs grid</a>
<a href="../../pages/Blog/Blog-List.html">blogs list</a>
<a href="../../pages/Blog/Blog-Single.html">blog Single</a>
</div>
</div>
<div class="nav-link">
<div class="main-nav-link"> <div class="nav-btn">Shop</div> <i class="fas fa-plus"></i> </div>
<div class="sub-nav-link">
<a href="../../pages/Shop/Shop-Grid.html">shop grid</a>
<a href="../../pages/Shop/Shop-List.html">shop list</a>
<a href="../../pages/Shop/Product-Single.html">product Single</a>
<a href="../../pages/Shop/Wishlist.html">wishlist</a>
<a href="../../pages/Shop/Cart.html">cart</a>
<a href="../../pages/Shop/Checkout.html">checkout</a>
<a href="../../pages/Shop/Login.html">login</a>
<a href="../../pages/Shop/Register.html">register</a>
<a href="../../pages/Shop/Reset-Password.html">forgot Password</a>
</div>
</div>
<div class="nav-link">
<div class="main-nav-link"> <a class="nav-btn" href="../../pages/Contact/Contact.html">contact</a> </div>
</div>
</nav>
</div>
<!-- ===== Mobile Menu Area (End) ===== -->
</header>
<!-- ==================== Header Area (End) ==================== -->
<!-- ==================== Page-Title (Start) ==================== -->
<div class="page-title">
<div class="title">
<h2>Blog Single</h2>
</div>
<div class="link">
<a href="../../index.html">Home</a>
<i class="fa-solid fa-angles-right"></i>
<span class="page">Blog Single</span>
</div>
</div>
<!-- ==================== Page-Title (End) ==================== -->
<!-- ==================== Blog Single (Start) ==================== -->
<section class="blog-single">
<!-- ========== Blog-Info Container (Start) ========== -->
<div class="blog-container">
<!-- Blog Information -->
<div class="blog-info page-info">
<div class="image">
<img src="../../assets/images/Blog/Blogs/Blog-1.jpg" alt="Transform Your Space with Creative Ideas"> <!-- Houseplants Image -->
<div class="date"><div class="tag"><span>25</span> Oct</div></div> <!-- Blog Date -->
</div>
<div class="content">
<!-- Blog Main Heading -->
<h2 class="main-heading">Transform Your Space with Creative Ideas</h2>
<!-- Blog Details -->
<div class="details">
<h5><i class="fa-solid fa-circle-user"></i><span>By Admin</span></h5> <!-- Author -->
<h5><i class="fa-solid fa-tags"></i><span>Plant Care</span></h5> <!-- Category -->
</div>
<!-- Blog Description -->
<p>Discover creative ideas to transform your outdoor and indoor spaces into stunning natural retreats. From small balcony gardens to expansive landscapes, explore design inspiration that breathes new life into every corner of your home.</p>
<p>Learn how to combine textures, colors, and natural elements to craft beautiful, functional spaces. Whether youre revamping your patio, designing a zen garden, or refreshing your living room with plants, these ideas will spark your imagination and creativity.</p>
<!-- Important Note -->
<div class="important">
<i class="fa-solid fa-quote-left"></i>
<div class="box-container">
Redefine your surroundings with fresh, innovative landscaping and décor concepts. Turn every space—indoors or outdoors—into a reflection of your unique style and love for nature.
<div class="intro">
<span></span>
<h2>Creative Design Expert</h2>
</div>
</div>
</div>
<p>Embrace the art of transformation and let nature inspire your design journey. From minimalist layouts to lush garden corners, create spaces that evoke beauty, tranquility, and harmony. With the right ideas, your dream environment is just a step away.</p>
<!-- Blog Gallery -->
<div class="blog-gallery page-gallery">
<a href="../../assets/images/Blog/Blog-Gallery/1.jpg">
<img src="../../assets/images/Blog/Blog-Gallery/1.jpg" alt="Blog Example 1">
</a>
<a href="../../assets/images/Blog/Blog-Gallery/2.jpg">
<img src="../../assets/images/Blog/Blog-Gallery/2.jpg" alt="Blog Example 2">
</a>
</div>
<!-- Blog Description -->
<p>Explore our inspiring gallery of creative design ideas to reimagine your home and garden. From cozy indoor nooks to breathtaking outdoor landscapes, discover how a touch of greenery and thoughtful design can completely transform your space. Let these visuals motivate you to craft your own peaceful, nature-inspired retreat.</p>
<!-- End Details -->
<div class="end-details">
<!-- Blog Tags -->
<div class="tags">
<a href="#"><span>Design</span></a>
<a href="#"><span>Landscaping</span></a>
<a href="#"><span>Inspiration</span></a>
</div>
<!-- Social Media Share Buttons -->
<div class="share">
<h3>Share:</h3>
<i class="fab fa-facebook-f"></i>
<i class="fab fa-linkedin-in"></i>
<i class="fa-brands fa-x-twitter"></i>
<i class="fab fa-pinterest"></i>
</div>
</div>
</div>
</div>
<!-- Blog Comments -->
<div class="comments">
<h4>3 Comments</h4>
<div class="box-container">
<!-- Comment-1 -->
<div class="comment-item">
<div class="main comment">
<div class="comment-image">
<img src="../../assets/images/Blog/Comments/Pic-1.jpg" alt="Comment-Author-Pic">
</div>
<div class="comment-content">
<div class="comment-intro">
<div class="text">
<h3>Benjamin Alexander</h3>
<h6>Aug 12, 2025</h6>
</div>
<div class='icon-item'><i class="fas fa-reply"></i><span>Reply</span></div>
</div>
<p class="text">These ideas are fantastic! I never realized how much a few plants and smart lighting could transform my living space. Definitely trying the wall garden concept next weekend.</p>
</div>
</div>
<!-- Reply to Comment 1 -->
<div class="reply comment">
<div class="comment-image">
<img src="../../assets/images/Blog/Comments/Pic-2.jpg" alt="Comment-Author-Pic">
</div>
<div class="comment-content">
<div class="comment-intro">
<div class="text">
<h3>Isabella Grace</h3>
<h6>Aug 19, 2025</h6>
</div>
<div class='icon-item'><i class="fas fa-reply"></i><span>Reply</span></div>
</div>
<p class="text">Right? I added a few hanging planters and it completely changed the mood of my room. Simple ideas can make such a big difference!</p>
</div>
</div>
</div>
<!-- Comment-2 -->
<div class="comment-item">
<div class="main comment">
<div class="comment-image">
<img src="../../assets/images/Blog/Comments/Pic-3.jpg" alt="Comment-Author-Pic">
</div>
<div class="comment-content">
<div class="comment-intro">
<div class="text">
<h3>Samuel James</h3>
<h6>Aug 25, 2025</h6>
</div>
<div class='icon-item'><i class="fas fa-reply"></i><span>Reply</span></div>
</div>
<p class="text">Thanks for sharing such inspiring ideas! Im planning to redesign my patio and this post gave me the motivation I needed to start.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Leave A Comment Form -->
<div class="leave-reply">
<!-- Comment Form -->
<form class="form" action="#">
<h3>Leave a Comment</h3> <!-- Heading -->
<div class="input-box">
<input type="text" name="name" class="box" id="name" placeholder="Name" required> <!-- Name Input -->
<input type="email" name="email" class="box" id="email" placeholder="Email" required> <!-- Email Input -->
</div>
<textarea cols="30" rows="10" name="comment" class="box" id="comment" placeholder="Comment" required></textarea> <!-- Comment Textarea -->
<input type="submit" value="Submit" class="btn"> <!-- Submit Button -->
</form>
</div>
</div>
<!-- ========== Blog-Info Container (End) ========== -->
<!-- ========== Blog Sidebar Area (Start) ========== -->
<div class="sidebar">
<!-- ===== Search Area (Start) ===== -->
<div class="search sidebar-item">
<div class="sidebar-heading">
<h2>search</h2>
</div>
<!-- Blog Search Form -->
<form class="blog-search-container box-container">
<div class="input-box">
<input type="search" id="blog-search" placeholder="search..." required> <!-- Search Input -->
<button type="submit"><i class="fas fa-search"></i></button> <!-- Submit Button -->
</div>
</form>
</div>
<!-- ===== Search Area (End) ===== -->
<!-- ===== Category Area (Start) ===== -->
<div class="category sidebar-item">
<div class="sidebar-heading">
<h2>categories</h2>
</div>
<!-- Blog Categories -->
<div class="box-container">
<a href="#" class="item"> <span><i class="fa-brands fa-pagelines"></i>Garden Design</span> <p>(30)</p> </a>
<a href="#" class="item"> <span><i class="fa-brands fa-pagelines"></i>Landscaping</span> <p>(20)</p> </a>
<a href="#" class="item"> <span><i class="fa-brands fa-pagelines"></i>Plant Care</span> <p>(15)</p> </a>
<a href="#" class="item"> <span><i class="fa-brands fa-pagelines"></i>Outdoor Living</span> <p>(10)</p> </a>
<a href="#" class="item"> <span><i class="fa-brands fa-pagelines"></i>Eco Gardening</span> <p>(05)</p> </a>
</div>
</div>
<!-- ===== Category Area (End) ===== -->
<!-- ===== Recent Posts Area (Start) ===== -->
<div class="recent-posts sidebar-item">
<div class="sidebar-heading">
<h2>recent posts</h2>
</div>
<!-- Recent Posts -->
<div class="box-container">
<!-- Recent Post 1 -->
<div class="post-item">
<img src="../../assets/images/Blog/Blogs/Blog-1.jpg" alt="Recent-Post-Image"> <!-- Post image -->
<a class="main-heading" href="../../pages/Blog/Blog-Single.html">Transform Your Space with Creative Ideas</a> <!-- Post title -->
</div>
<!-- Recent Post 2 -->
<div class="post-item">
<img src="../../assets/images/Blog/Blogs/Blog-2.jpg" alt="Recent-Post-Image"> <!-- Post image -->
<a class="main-heading" href="../../pages/Blog/Blog-Single.html">Top 5 gardening Trends, Redefine Your Garden</a> <!-- Post title -->
</div>
<!-- Recent Post 3 -->
<div class="post-item">
<img src="../../assets/images/Blog/Blogs/Blog-3.jpg" alt="Recent-Post-Image"> <!-- Post image -->
<a class="main-heading" href="../../pages/Blog/Blog-Single.html">How to Keep Your Garden Green Year Round</a> <!-- Post title -->
</div>
</div>
</div>
<!-- ===== Recent Posts Area (End) ===== -->
<!-- ===== Tags Area (Start) ===== -->
<div class="tags sidebar-item">
<div class="sidebar-heading">
<h2>tags</h2>
</div>
<!-- Tags -->
<div class="box-container">
<a href="#" class="tag-item">Garden</a>
<a href="#" class="tag-item">Style</a>
<a href="#" class="tag-item">Blossom</a>
<a href="#" class="tag-item">Greenery</a>
<a href="#" class="tag-item">Landscaping</a>
<a href="#" class="tag-item">design</a>
</div>
</div>
<!-- ===== Tags Area (End) ===== -->
</div>
<!-- ========== Blog Sidebar Area (End) ========== -->
</section>
<!-- ==================== Blog Single (End) ==================== -->
<!-- ==================== Footer Area (Start) ==================== -->
<footer class="footer">
<div class="box-container">
<!-- Gardening and Landscaping Company Information & Social Media Links -->
<div class="footer-item">
<!-- Gardening and Landscaping Company 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>
<!-- Description -->
<p>Transforming outdoor spaces with premium gardening and landscaping solutions.</p>
<!-- Contact Information -->
<div class="info connect">
<p><i class="fas fa-phone"></i><span>+123-456-7890</span></p>
<p><i class="fas fa-envelope"></i><span class="gmail">info@leafline.com</span></p>
<p><i class="fas fa-map-marker-alt"></i><span>LeafLine Company</span></p>
</div>
<!-- Social Media Links -->
<div class="social">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fa-brands fa-x-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-linkedin"></i></a>
</div>
</div>
<!-- Gardening and Landscaping Services Offered -->
<div class="footer-item">
<h2>Our Services</h2>
<div class="info links">
<p><i class="fa-brands fa-pagelines"></i><a href="../../pages/Service/Service-Single.html">Lawn Care</a></p>
<p><i class="fa-brands fa-pagelines"></i><a href="../../pages/Service/Service-Single.html">Garden Design</a></p>
<p><i class="fa-brands fa-pagelines"></i><a href="../../pages/Service/Service-Single.html">Tree Planting</a></p>
<p><i class="fa-brands fa-pagelines"></i><a href="../../pages/Service/Service-Single.html">Hardscaping Solution</a></p>
<p><i class="fa-brands fa-pagelines"></i><a href="../../pages/Service/Service-Single.html">water ponds</a></p>
<p><i class="fa-brands fa-pagelines"></i><a href="../../pages/Service/Service-Single.html">Outdoor Décor</a></p>
</div>
</div>
<!-- Quick Links -->
<div class="footer-item">
<h2>Quick Links</h2>
<div class="info links">
<p><i class="fa-brands fa-pagelines"></i><a href="../../pages/About/About.html">About Us</a></p>
<p><i class="fa-brands fa-pagelines"></i><a href="../../pages/Service/Services.html">Services</a></p>
<p><i class="fa-brands fa-pagelines"></i><a href="../../pages/Project/Projects.html">Projects</a></p>
<p><i class="fa-brands fa-pagelines"></i><a href="../../pages/Blog/Blog-Grid.html">Blog</a></p>
<p><i class="fa-brands fa-pagelines"></i><a href="../../pages/Shop/Shop-Grid.html">Shop</a></p>
<p><i class="fa-brands fa-pagelines"></i><a href="../../pages/Contact/Contact.html">Contact Us</a></p>
</div>
</div>
<!-- Newsletter Subscription -->
<div class="footer-item">
<h2>Newsletter</h2>
<p>Stay informed and up-to-date with the latest trends, helpful tips, and exclusive special offers.</p>
<form class="dark-form" method="post" id="newsletter-form-2">
<div class="input-field">
<label for="news-email-2" class="fas fa-envelope"></label>
<input type="email" id="news-email-2" name="email" class="box" placeholder="Your email address" required>
</div>
<button type="submit" class="btn" name="submit" id="submit-2">Subscribe</button>
<span class="alert" id="msg-2"></span>
</form>
</div>
</div>
<!-- Gardening and Landscaping Company's Name and Copyright -->
<div class="content">
<p>Designed By <span>NorthStar_Themes</span> | All Rights Reserved</p>
</div>
</footer>
<!-- ==================== Footer Area (End) ==================== -->
<!-- Jquery -->
<script src="../../assets/vendors/jquery/jquery.min.js"></script>
<!-- Magnific-Popup JS -->
<script src="../../assets/vendors/magnific-popup/jquery.magnific-popup.min.js"></script>
<!-- Custom Script Files -->
<script src="../../assets/js/script.js"></script> <!-- Custom JavaScript file with additional website functionality. -->
<script src="../../assets/js/nav-link-toggler.js"></script> <!-- Manages navigation link toggling (e.g., hamburger menu) for mobile devices -->
<script src="../../assets/js/newsletter.js"></script>
<script src="../../assets/js/page-gallery.js"></script> <!-- Manages the gallery functionality of lightbox view. -->
</body>
</html>