Spaces:
Running
Running
For every image section, instead of stock photos, place a placeholder block with text like: ‘Insert crew photo here,’ ‘Insert before/after tree removal photo here,’ ‘Insert local job site photo here.’ Make sure each placeholder is clearly labeled for the type of image that should go there.”
34ab164 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Sal's Tree Service Fort Worth | Tree Removal Services</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| } | |
| .navbar { | |
| background: rgba(255, 255, 255, 0.9); | |
| backdrop-filter: blur(5px); | |
| } | |
| .hero { | |
| background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="630" viewBox="0 0 1200 630"><rect width="1200" height="630" fill="%23e5e7eb"/><text x="50%" y="50%" fill="%236b7280" font-family="Arial" font-size="24" text-anchor="middle" dominant-baseline="middle">INSERT HERO IMAGE HERE (Crew working on-site)</text><text x="50%" y="60%" fill="%239ca3af" font-family="Arial" font-size="16" text-anchor="middle" dominant-baseline="middle">We\'ll replace this with your real photos</text></svg>'); | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .service-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .discount-banner { | |
| background: linear-gradient(135deg, #38a169 0%, #276749 100%); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="navbar fixed w-full z-50 shadow-md"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <a href="#" class="flex items-center"> | |
| <img src="https://salslandscapetree.com/wp-content/uploads/2023/09/mainlogo.png" alt="Sal's Tree Service" class="h-12"> | |
| </a> | |
| <div class="hidden md:flex space-x-8"> | |
| <div class="dropdown relative"> | |
| <button class="dropdown-btn flex items-center text-gray-800 font-medium hover:text-green-600"> | |
| Tree Services <i data-feather="chevron-down" class="ml-1 w-4 h-4"></i> | |
| </button> | |
| <div class="dropdown-menu absolute hidden bg-white shadow-lg rounded-md mt-2 py-2 w-64"> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-100">Tree Disease</a> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-100">Tree Fertilization</a> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-100">Tree Removal</a> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-100">Tree Trimming & Pruning</a> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-100">Tree Planting</a> | |
| </div> | |
| </div> | |
| <a href="#" class="text-gray-800 font-medium hover:text-green-600">Areas Served</a> | |
| <a href="#" class="text-gray-800 font-medium hover:text-green-600">Gallery</a> | |
| <a href="#" class="text-gray-800 font-medium hover:text-green-600">Contact</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <a href="tel:9722037351" class="hidden md:flex items-center bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-full transition"> | |
| <i data-feather="phone" class="mr-2 w-4 h-4"></i> (972) 203-7351 | |
| </a> | |
| <button class="md:hidden text-gray-800"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="hero text-white pt-32 pb-20"> | |
| <div class="container mx-auto px-4 text-center" data-aos="fade-up"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6">Professional Tree Services in Fort Worth</h1> | |
| <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Serving Dallas-Fort Worth with expert tree care since 2006</p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <a href="tel:9722037351" class="bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-full text-lg font-medium transition flex items-center justify-center"> | |
| <i data-feather="phone" class="mr-2"></i> Call Now | |
| </a> | |
| <a href="#services" class="bg-white hover:bg-gray-100 text-green-700 px-8 py-4 rounded-full text-lg font-medium transition"> | |
| Our Services | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Discount Banner --> | |
| <div class="discount-banner text-white py-6"> | |
| <div class="container mx-auto px-4 flex flex-col md:flex-row items-center justify-center"> | |
| <img src="https://salslandscapetree.com/wp-content/uploads/2023/09/leafLogo.png" alt="Leaf Logo" class="h-16 mb-4 md:mb-0 md:mr-6"> | |
| <div class="text-center md:text-left"> | |
| <h3 class="text-xl font-bold">Get 10% Off Any Job Worth $750 Or More!</h3> | |
| <p class="text-sm">Must Mention When Requesting Estimate to Redeem</p> | |
| </div> | |
| <a href="tel:9722037351" class="mt-4 md:mt-0 md:ml-8 bg-white hover:bg-gray-100 text-green-700 px-6 py-2 rounded-full text-sm font-medium transition"> | |
| Call for Estimate | |
| </a> | |
| </div> | |
| </div> | |
| <!-- About Section --> | |
| <section class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10" data-aos="fade-right"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-6">Sal's Tree Service Fort Worth</h2> | |
| <h3 class="text-lg text-green-600 font-medium mb-4">SERVING THE ENTIRE DALLAS-FORT WORTH AREA</h3> | |
| <p class="text-gray-600 mb-6"> | |
| For over 15 years in the Dallas, Fort Worth area, Sal's Tree Service has been the go-to tree service company. | |
| Our certified arborists in Fort Worth, TX, are always ready to provide exceptional tree care services, from | |
| tree trimming to stump removal. | |
| </p> | |
| <p class="text-gray-600 mb-8"> | |
| We cater to residential and commercial properties, with every service backed in writing. In emergencies, | |
| like post-storm damages, we're here to assist. Seniors can avail themselves of a 10% discount with us. | |
| Every team member is bonded and insured, ensuring Fort Worth gets the best tree maintenance and services possible. | |
| </p> | |
| <a href="#contact" class="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-full font-medium transition inline-flex items-center"> | |
| Contact Us <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| <div class="md:w-1/2" data-aos="fade-left"> | |
| <div class="bg-gray-200 rounded-lg shadow-xl w-full h-96 flex flex-col items-center justify-center"> | |
| <p class="text-gray-500 text-lg font-medium">INSERT CREW PHOTO HERE</p> | |
| <p class="text-gray-400 text-sm mt-2">We'll replace this with your real photos</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16" data-aos="fade-up"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">What We Do</h2> | |
| <h3 class="text-xl text-green-600">Tree Services</h3> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Service Card 1 --> | |
| <div class="service-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="bg-gray-200 w-full h-48 flex flex-col items-center justify-center"> | |
| <p class="text-gray-500 text-lg font-medium">INSERT TREE TRIMMING PHOTO HERE</p> | |
| <p class="text-gray-400 text-sm mt-2">We'll replace this with your real photos</p> | |
| </div> | |
| <div class="p-6"> | |
| <h4 class="text-xl font-bold text-gray-800 mb-2">Tree Trimming & Pruning</h4> | |
| <p class="text-gray-600 mb-4">Professional trimming to maintain tree health and appearance.</p> | |
| <a href="#" class="text-green-600 font-medium hover:text-green-700 flex items-center"> | |
| Learn More <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Service Card 2 --> | |
| <div class="service-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="bg-gray-200 w-full h-48 flex flex-col items-center justify-center"> | |
| <p class="text-gray-500 text-lg font-medium">INSERT STUMP GRINDING PHOTO HERE</p> | |
| <p class="text-gray-400 text-sm mt-2">We'll replace this with your real photos</p> | |
| </div> | |
| <div class="p-6"> | |
| <h4 class="text-xl font-bold text-gray-800 mb-2">Stump Grinding & Removal</h4> | |
| <p class="text-gray-600 mb-4">Complete removal of unsightly stumps from your property.</p> | |
| <a href="#" class="text-green-600 font-medium hover:text-green-700 flex items-center"> | |
| Learn More <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Service Card 3 --> | |
| <div class="service-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="bg-gray-200 w-full h-48 flex flex-col items-center justify-center"> | |
| <p class="text-gray-500 text-lg font-medium">INSERT TREE REMOVAL PHOTO HERE</p> | |
| <p class="text-gray-400 text-sm mt-2">We'll replace this with your real photos</p> | |
| </div> | |
| <div class="p-6"> | |
| <h4 class="text-xl font-bold text-gray-800 mb-2">Tree Removal</h4> | |
| <p class="text-gray-600 mb-4">Safe and efficient removal of hazardous or unwanted trees.</p> | |
| <a href="#" class="text-green-600 font-medium hover:text-green-700 flex items-center"> | |
| Learn More <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12" data-aos="fade-up"> | |
| <a href="tel:9722037351" class="bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-full text-lg font-medium transition inline-flex items-center"> | |
| <i data-feather="phone" class="mr-2"></i> Call for a free estimate | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Commitment Section --> | |
| <section class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-4xl mx-auto text-center" data-aos="fade-up"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-6">Our Commitment to Excellence</h2> | |
| <p class="text-gray-600 mb-8"> | |
| When it comes to selecting among tree service companies in the Dallas-Fort Worth Metroplex, trust is paramount. | |
| At Sal's, we've built our reputation on integrity and offering fair prices for unparalleled services. | |
| Our team of certified arborists and tree experts are unwavering in their dedication to ensuring the health and | |
| beauty of your trees. | |
| </p> | |
| <p class="text-gray-600"> | |
| We utilize advanced treatments, including targeted tree injections, to address various tree diseases and maintain their vitality. | |
| Whether you're in need of a tree removal service, seeking a free estimate, or looking for advice on tree care or landscaping, | |
| our commitment to exceptional service shines through in every interaction. | |
| </p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-gray-800 text-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row"> | |
| <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10" data-aos="fade-right"> | |
| <h2 class="text-3xl font-bold mb-6">Contact Us</h2> | |
| <div class="mb-8"> | |
| <h3 class="text-lg text-green-400 font-medium mb-2">PHONE</h3> | |
| <a href="tel:9722037351" class="text-xl hover:text-green-400">(972) 203-7351</a> | |
| </div> | |
| <div class="mb-8"> | |
| <h3 class="text-lg text-green-400 font-medium mb-2">EMAIL</h3> | |
| <a href="mailto:salstreescape@gmail.com" class="text-xl hover:text-green-400">salstreescape@gmail.com</a> | |
| </div> | |
| <div class="mb-8"> | |
| <h3 class="text-lg text-green-400 font-medium mb-2">ADDRESS</h3> | |
| <p class="text-xl">1751 River Run<br>Suite 200-31<br>Fort Worth, TX 76107</p> | |
| </div> | |
| <div> | |
| <h3 class="text-lg text-green-400 font-medium mb-2">HOURS OF OPERATION</h3> | |
| <p class="text-xl">Mon - Fri 8:00 am - 5:00 pm<br>Sat - Sun Closed</p> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2" data-aos="fade-left"> | |
| <form class="bg-gray-700 p-8 rounded-lg shadow-lg"> | |
| <div class="mb-6"> | |
| <label for="name" class="block text-gray-300 mb-2">Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-3 bg-gray-800 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="email" class="block text-gray-300 mb-2">Email</label> | |
| <input type="email" id="email" class="w-full px-4 py-3 bg-gray-800 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="phone" class="block text-gray-300 mb-2">Phone</label> | |
| <input type="tel" id="phone" class="w-full px-4 py-3 bg-gray-800 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="service" class="block text-gray-300 mb-2">Service Needed</label> | |
| <select id="service" class="w-full px-4 py-3 bg-gray-800 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500"> | |
| <option>Tree Removal</option> | |
| <option>Tree Trimming</option> | |
| <option>Stump Grinding</option> | |
| <option>Other Service</option> | |
| </select> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="message" class="block text-gray-300 mb-2">Message</label> | |
| <textarea id="message" rows="4" class="w-full px-4 py-3 bg-gray-800 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500"></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg font-medium transition"> | |
| Send Message | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between"> | |
| <div class="mb-8 md:mb-0"> | |
| <a href="#" class="flex items-center mb-6"> | |
| <img src="https://salslandscapetree.com/wp-content/uploads/2023/09/mainlogoBigger.png" alt="Sal's Tree Service" class="h-16"> | |
| </a> | |
| <p class="text-gray-400 mb-4">Serving Dallas-Fort Worth and surrounding areas since 2006</p> | |
| <div class="flex space-x-4"> | |
| <a href="https://www.facebook.com/AfforadableTreeTrimming/" class="text-gray-400 hover:text-green-400"> | |
| <i data-feather="facebook" class="w-6 h-6"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="mb-8 md:mb-0"> | |
| <h3 class="text-lg font-bold mb-4">Quick Links</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-green-400">Home</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-green-400">Tree Services</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-green-400">Areas Served</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-green-400">Gallery</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-green-400">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div class="mb-8 md:mb-0"> | |
| <h3 class="text-lg font-bold mb-4">Areas Served</h3> | |
| <div class="grid grid-cols-2 gap-x-8 gap-y-2"> | |
| <a href="#" class="text-gray-400 hover:text-green-400">Fort Worth</a> | |
| <a href="#" class="text-gray-400 hover:text-green-400">Dallas</a> | |
| <a href="#" class="text-gray-400 hover:text-green-400">Arlington</a> | |
| <a href="#" class="text-gray-400 hover:text-green-400">Plano</a> | |
| <a href="#" class="text-gray-400 hover:text-green-400">Irving</a> | |
| <a href="#" class="text-gray-400 hover:text-green-400">Frisco</a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Newsletter</h3> | |
| <p class="text-gray-400 mb-4">Subscribe to our newsletter for tips and special offers</p> | |
| <form class="flex"> | |
| <input type="email" placeholder="Your email" class="px-4 py-2 bg-gray-800 text-white rounded-l-lg focus:outline-none focus:ring-2 focus:ring-green-500 w-full"> | |
| <button type="submit" class="bg-green-600 hover:bg-green-700 px-4 py-2 rounded-r-lg"> | |
| <i data-feather="send" class="w-5 h-5"></i> | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-500 text-sm mb-4 md:mb-0"> | |
| © 2023 Sal's Tree Service. All rights reserved. | |
| </p> | |
| <p class="text-gray-500 text-sm"> | |
| <a href="#" class="hover:text-green-400">Privacy Policy</a> | | |
| <a href="#" class="hover:text-green-400">Terms of Service</a> | |
| </p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| AOS.init({ | |
| duration: 800, | |
| easing: 'ease-in-out' | |
| }); | |
| feather.replace(); | |
| // Mobile menu toggle | |
| const mobileMenuBtn = document.querySelector('.md\\:hidden'); | |
| const mobileMenu = document.querySelector('.md\\:flex'); | |
| mobileMenuBtn.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Dropdown toggle | |
| const dropdownBtn = document.querySelector('.dropdown-btn'); | |
| const dropdownMenu = document.querySelector('.dropdown-menu'); | |
| dropdownBtn.addEventListener('click', () => { | |
| dropdownMenu.classList.toggle('hidden'); | |
| }); | |
| // Close dropdown when clicking outside | |
| document.addEventListener('click', (e) => { | |
| if (!e.target.closest('.dropdown')) { | |
| dropdownMenu.classList.add('hidden'); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |