Files

581 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>Request a Landscaping Quote | Golden Sun Landscaping</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">
<meta name="description" content="Request a quote for landscaping, lawn maintenance, patios, cleanup, grading, or tree services in Winfield and DuPage County.">
<style>
.preview-concept-banner { position: fixed; inset: 0 0 auto 0; z-index: 10000; padding: .7rem 1rem; background: #173a24; color: #fff; text-align: center; font: 600 14px/1.4 Arial, sans-serif; box-shadow: 0 2px 8px rgba(0,0,0,.22); }
.preview-concept-banner a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.preview-concept-banner strong { color: #d8ef8c; }
body { padding-top: 45px; }
</style>
</head>
<body>
<div class="preview-concept-banner" role="note"><strong>UX Concept Preview</strong> — Golden Sun Landscaping &amp; Tree Service. <a href="../../ux-gallery.html">View proposed screens</a> · <a href="../../pricing.html">View feature pricing</a></div>
<!-- ==================== 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>1N160 Cypress Ln, Winfield, IL 60190</span></li>
<li><i class="fa-solid fa-phone"></i><span>(630) 330-0486</span></li>
<li><i class="fa-solid fa-envelope"></i><span class="gmail">goldensunlandscaping@yahoo.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>Golden Sun Landscaping</h3>
<p>Landscaping & Tree Service</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>Get a Quote</h2>
</div>
<div class="link">
<a href="../../index.html">Home</a>
<i class="fa-solid fa-angles-right"></i>
<span class="page">Get a Quote</span>
</div>
</div>
<!-- ==================== Page-Title (End) ==================== -->
<!-- ==================== Get A Quote Area (Start) ==================== -->
<section class="custom-form get-quote linear-bg">
<div class="box-container">
<div class="content">
<form class="dark-form" id="quote-form" method="post">
<!-- Form Heading -->
<div class="heading">
<div class="sub"><span>Personalized Landscape Solutions</span><i class="fa-brands fa-pagelines"></i></div>
<h2>Request A Quote</h2>
</div>
<div class="input-box">
<!-- Name Input Field -->
<div class="input-field">
<label for="name" class="fa-solid fa-user"></label>
<input type="text" name="name" class="box" id="name" placeholder="Name" required>
</div>
<!-- Email Input Field -->
<div class="input-field">
<label for="email" class="fa-solid fa-envelope"></label>
<input type="email" name="email" class="box" id="email" placeholder="Email" required>
</div>
</div>
<div class="input-box">
<!-- Phone Number Input Field -->
<div class="input-field">
<label for="number" class="fa-solid fa-phone"></label>
<input type="number" name="number" class="box" id="number" placeholder="Phone Number" required>
</div>
<!-- Service Type Select Field -->
<div class="select">
<div class="select-container">
<label for="service-type" class="fa-brands fa-pagelines"></label>
<select class="select-box" id="service-type" name="service-type" required>
<option value="">Service Type</option>
<option value="lawn-maintenance">Lawn Maintenance</option>
<option value="landscape-design">Landscape Design</option>
<option value="tree-planting">Tree Planting</option>
<option value="hardscaping">Hardscaping</option>
<option value="water-features">Water Features</option>
<option value="outdoor-lighting">Outdoor Lighting</option>
</select>
<div class="icon-container">
<i class="fas fa-angle-down"></i>
</div>
</div>
</div>
</div>
<div class="input-box">
<!-- Address Input Field -->
<div class="input-field">
<label for="address" class="fa-solid fa-location-dot"></label>
<input type="text" name="address" class="box" id="address" placeholder="Address" required>
</div>
</div>
<div class="input-box">
<!-- Property Type Select Field -->
<div class="select">
<div class="select-container">
<label for="property-type" class="fa-solid fa-building"></label>
<select class="select-box" id="property-type" name="property-type" required>
<option value="">Property Type</option>
<option value="residential">Residential</option>
<option value="commercial">Commercial</option>
</select>
<div class="icon-container">
<i class="fas fa-angle-down"></i>
</div>
</div>
</div>
<!-- Area Size Input Field (sq m) -->
<div class="input-field">
<label for="area-size" class="fas fa-ruler-horizontal"></label>
<input type="number" name="area-size" class="box" id="area-size" min="0" placeholder="Area Size (sq m)"
required>
</div>
</div>
<div class="input-box">
<!-- Landscape Style Select Field -->
<div class="select">
<div class="select-container">
<label for="landscape-style" class="fa-solid fa-tree"></label>
<select class="select-box" id="landscape-style" name="landscape-style" required>
<option value="">Landscape Style</option>
<option value="native">Native</option>
<option value="formal">Formal</option>
<option value="cottage">Cottage</option>
<option value="japanese">Japanese</option>
<option value="modern">Modern</option>
<option value="eclectic">Eclectic</option>
<option value="default">No Preference</option>
</select>
<div class="icon-container">
<i class="fas fa-angle-down"></i>
</div>
</div>
</div>
<!-- Project Urgency Select Field -->
<div class="select">
<div class="select-container">
<label for="project-urgency" class="fas fa-clock"></label>
<select class="select-box" id="project-urgency" name="project-urgency" required>
<option value="">Project Urgency</option>
<option value="asap">ASAP</option>
<option value="within-a-month">Within a Month</option>
<option value="within-three-months">Within 1-3 Months</option>
<option value="no-rush">No Rush</option>
</select>
<div class="icon-container">
<i class="fas fa-angle-down"></i>
</div>
</div>
</div>
</div>
<!-- Comment Text Area -->
<div class="input-field text-area">
<label for="comment" class="fa-solid fa-comment"></label>
<textarea cols="30" rows="10" name="comment" class="box" id="comment" placeholder="Message"
required></textarea>
</div>
<!-- Extra Services Checkboxes -->
<div class="extra-services">
<!-- Automated Irrigation Checkbox -->
<div class="checkbox-label">
<input type="checkbox" id="automated-irrigation-checkbox" name="extra-services[]"
value="Automated Irrigation">
<label for="automated-irrigation-checkbox">Automated Irrigation</label>
<div class="checkbox-indicator"></div>
</div>
<!-- Custom Pathways Checkbox -->
<div class="checkbox-label">
<input type="checkbox" id="custom-pathways-checkbox" name="extra-services[]" value="Custom Pathways">
<label for="custom-pathways-checkbox">Custom Pathways</label>
<div class="checkbox-indicator"></div>
</div>
<!-- Outdoor Seating Checkbox -->
<div class="checkbox-label">
<input type="checkbox" id="outdoor-seating-checkbox" name="extra-services[]" value="Outdoor Seating Area">
<label for="outdoor-seating-checkbox">Outdoor Seating Area</label>
<div class="checkbox-indicator"></div>
</div>
</div>
<!-- Submit Button for Booking Confirmation -->
<button type="submit" class="btn" name="submit" id="submit">submit</button>
<span class="alert" id="msg"></span>
</form>
</div>
</div>
</section>
<!-- ==================== Get A Quote Area (End) ==================== -->
<!-- ==================== Footer Area (Start) ==================== -->
<footer class="footer">
<div class="box-container">
<!-- Landscaping & Tree Service Company Information & Social Media Links -->
<div class="footer-item">
<!-- Landscaping & Tree Service Company Logo -->
<a class="logo" href="../../index.html">
<img src="../../assets/images/Logo/Logo.png" alt="logo">
<div class="logo-content">
<h3>Golden Sun Landscaping</h3>
<p>Landscaping & Tree Service</p>
</div>
</a>
<!-- Description -->
<p>Transforming outdoor spaces with premium landscapeing and landscaping solutions.</p>
<!-- Contact Information -->
<div class="info connect">
<p><i class="fas fa-phone"></i><span>(630) 330-0486</span></p>
<p><i class="fas fa-envelope"></i><span class="gmail">goldensunlandscaping@yahoo.com</span></p>
<p><i class="fas fa-map-marker-alt"></i><span>1N160 Cypress Ln, Winfield, IL 60190</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>
<!-- Landscaping & Tree Service 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">Landscape 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>
<!-- Landscaping & Tree Service 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>
<script src="../../assets/js/quote.js"></script>
<p class="aiml-site-credit">Made by <a href="https://aimloperations.com" rel="noopener noreferrer" target="_blank">AI ML Operations, LLC</a></p>
</body>
</html>