Files
preview_sites/proposals/golden-sun-landscaping/mockup/pages/Pages/Event-Single.html
T

611 lines
25 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 | 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>Event Single</h2>
</div>
<div class="link">
<a href="../../index.html">Home</a>
<i class="fa-solid fa-angles-right"></i>
<span class="page">Event Single</span>
</div>
</div>
<!-- ==================== Page-Title (End) ==================== -->
<!-- ==================== Event Single (Start) ==================== -->
<section class="event-single page-single">
<!-- Event Info Area -->
<div class="event-info page-info">
<!-- Event Image -->
<div class="image">
<img src="../../assets/images/Event/Events/Event-1.jpg" alt="Gardening Workshop">
</div>
<!-- Event Content -->
<div class="content">
<!-- Main Heading -->
<h3 class="main-heading">Spring Bloom Gardening Workshop</h3>
<!-- Event Important Note -->
<p class="important">Join us for the Spring Bloom Gardening Workshop and celebrate the season of growth with hands-on learning and expert guidance in garden design and plant care.</p>
<!-- Event Description -->
<p>Experience the beauty of spring at our exclusive Spring Bloom Gardening Workshop. This event is designed to inspire garden enthusiasts with practical tips on seasonal planting, soil preparation, floral arrangement, and sustainable gardening methods. Learn from professionals and bring your garden to life this spring.</p>
<!-- Event Gallery -->
<div class="page-gallery">
<a href="../../assets/images/Event/Event-Gallery/1.jpg">
<img src="../../assets/images/Event/Event-Gallery/1.jpg" alt="Gardening Workshop-Gallery-Image">
</a>
<a href="../../assets/images/Event/Event-Gallery/2.jpg">
<img src="../../assets/images/Event/Event-Gallery/2.jpg" alt="Gardening Workshop-Gallery-Image">
</a>
</div>
<!-- Event Agenda -->
<div class="sub-section">
<h3 class="sub-heading">Event Agenda:</h3>
<p>Join us for the Spring Bloom Gardening Workshop and enjoy a day filled with learning, creativity, and nature-inspired experiences:</p>
<ul>
<li><i class="fa-solid fa-arrow-right"></i>Welcome Session and Introduction to Spring Gardening Essentials.</li>
<li><i class="fa-solid fa-arrow-right"></i>Seasonal Planting Techniques and Flower Arrangement Ideas.</li>
<li><i class="fa-solid fa-arrow-right"></i>Soil Enrichment and Organic Fertilizer Preparation.</li>
<li><i class="fa-solid fa-arrow-right"></i>Eco-Friendly Watering and Sustainable Garden Maintenance.</li>
<li><i class="fa-solid fa-arrow-right"></i>Live Demonstrations and Hands-On Planting Activities.</li>
</ul>
</div>
<!-- Event Speakers -->
<div class="event-speakers sub-section">
<h3 class="sub-heading">Event Speakers:</h3>
<div class="box-container">
<!-- Speaker 1 -->
<div class="team-item">
<img src="../../assets/images/Event/Speaker/Speaker-1.jpg" alt="Team-Image"> <!-- Team Member Image -->
<div class="content">
<div class="intro">
<a href="../../pages/About/Team-Single.html"><h3>Sophia Bloom</h3></a> <!-- Team Member Name -->
<p>Landscape Designer</p> <!-- Team Member Designation -->
</div>
<div class="icon-container">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
<a href="#"><i class="fa-brands fa-x-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
<!-- Speaker 2 -->
<div class="team-item">
<img src="../../assets/images/Event/Speaker/Speaker-2.jpg" alt="Team-Image">
<div class="content">
<div class="intro">
<a href="../../pages/About/Team-Single.html"><h3>John Smith</h3></a>
<p>Design Specialist</p>
</div>
<div class="icon-container">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
<a href="#"><i class="fa-brands fa-x-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
<!-- Speaker 3 -->
<div class="team-item">
<img src="../../assets/images/Event/Speaker/Speaker-3.jpg" alt="Team-Image">
<div class="content">
<div class="intro">
<a href="../../pages/About/Team-Single.html"><h3>Oliver Fields</h3></a>
<p>Soil Expert</p>
</div>
<div class="icon-container">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
<a href="#"><i class="fa-brands fa-x-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
</div>
</div>
<!-- Event Venue Map -->
<div class="event-map sub-section">
<h3 class="sub-heading">Event Venue:</h3>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d924234.6303368191!2d66.59494515823903!3d25.193389461148573!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3eb33e06651d4bbf%3A0x9cf92f44555a0c23!2sKarachi%2C%20Karachi%20City%2C%20Sindh%2C%20Pakistan!5e0!3m2!1sen!2s!4v1645287442276!5m2!1sen!2s" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
</div>
</div>
<!-- Event Info Area (End) -->
<!-- Event Single Area -->
<div class="event-sidebar page-sidebar">
<h3 class="sub-heading">Event Single</h3>
<div class="container">
<!-- Event Date -->
<div class="detail-item">
<i class="fa-regular fa-calendar-days"></i>
<div class="detail-content">
<h3>Date</h3>
<p>Sep 10, 2025</p>
</div>
</div>
<!-- Event Time -->
<div class="detail-item">
<i class="fa-solid fa-clock"></i>
<div class="detail-content">
<h3>Time</h3>
<p>09:00 AM - 12:00 PM</p>
</div>
</div>
<!-- Event Venue -->
<div class="detail-item">
<i class="fa-solid fa-map"></i>
<div class="detail-content">
<h3>Venue</h3>
<p>LeafLine Community Garden</p>
</div>
</div>
<!-- Event Organizer -->
<div class="detail-item">
<i class="fa-solid fa-user"></i>
<div class="detail-content">
<h3>Organizer</h3>
<p>Garden Enthusiasts Association</p>
</div>
</div>
<!-- Event Phone Number -->
<div class="detail-item">
<i class="fa-solid fa-phone"></i>
<div class="detail-content">
<h3>Contact No</h3>
<p>+444-555-9999</p>
</div>
</div>
<!-- Event Email -->
<div class="detail-item">
<i class="fa-solid fa-envelope"></i>
<div class="detail-content">
<h3>Email</h3>
<p class="gmail">info@garden.com</p>
</div>
</div>
<!-- Event Entry Fee -->
<div class="detail-item">
<i class="fa-solid fa-dollar-sign"></i>
<div class="detail-content">
<h3>Entry Fee</h3>
<p>Free Admission</p>
</div>
</div>
</div>
<!-- Button to Register for the Event -->
<a href="#" class="btn">register now</a>
</div>
<!-- Event Single Area (End) -->
</section>
<!-- ==================== Event 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. -->
<script src="../../assets/js/accordion.js"></script> <!-- Controls the functionality of accordions for displaying content sections. -->
</body>
</html>