Tool Request: call_vkOhdU3psHSZKY3CXQ1XqttC - create_file
{"file_name":"index.html","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>ACME Plumbing - Reliable Plumbing Services</title>\n <!-- Google Font -->\n <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap\" rel=\"stylesheet\">\n <style>\n :root {\n --primary-color: #007bff;\n --secondary-color: #f8f9fa;\n --dark-color: #343a40;\n }\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n body {\n font-family: 'Roboto', sans-serif;\n line-height: 1.6;\n color: var(--dark-color);\n background-color: var(--secondary-color);\n }\n header {\n background: var(--primary-color);\n color: #fff;\n position: fixed;\n width: 100%;\n top: 0;\n z-index: 1000;\n }\n .navbar {\n display: flex;\n justify-content: space-between;\n align-items: center;\n max-width: 1200px;\n margin: auto;\n padding: 1rem;\n }\n .navbar a {\n color: #fff;\n text-decoration: none;\n margin-left: 1rem;\n font-weight: 700;\n }\n .navbar a:hover {\n text-decoration: underline;\n }\n .hero {\n background: var(--primary-color) center/cover no-repeat;\n height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n color: #fff;\n padding: 0 1rem;\n margin-top: 70px;\n }\n .hero h1 {\n font-size: 3rem;\n }\n .hero p {\n font-size: 1.2rem;\n margin: 1rem 0;\n }\n .btn {\n background: var(--primary-color);\n color: #fff;\n padding: 0.8rem 1.5rem;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n text-decoration: none;\n font-weight: 700;\n }\n .btn:hover {\n background: #0056b3;\n }\n .section {\n max-width: 1200px;\n margin: auto;\n padding: 4rem 1rem;\n }\n .section h2 {\n text-align: center;\n margin-bottom: 2rem;\n font-size: 2rem;\n color: var(--dark-color);\n }\n .services {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n }\n .service-item {\n background: #fff;\n padding: 2rem;\n border-radius: 8px;\n box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n text-align: center;\n }\n .service-item h3 {\n margin-bottom: 1rem;\n color: var(--primary-color);\n }\n .testimonials {\n display: grid;\n grid-template-columns: 1fr;\n gap: 2rem;\n }\n .testimonial {\n background: #fff;\n padding: 2rem;\n border-radius: 8px;\n box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n }\n .footer {\n background: var(--dark-color);\n color: #fff;\n text-align: center;\n padding: 1rem;\n }\n @media(min-width: 768px) {\n .testimonials {\n grid-template-columns: repeat(2, 1fr);\n }\n }\n .contact-form {\n background: #fff;\n padding: 2rem;\n border-radius: 8px;\n box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n max-width: 600px;\n margin: auto;\n }\n .contact-form input,\n .contact-form textarea {\n width: 100%;\n padding: 0.8rem;\n margin-bottom: 1rem;\n border: 1px solid #ccc;\n border-radius: 4px;\n }\n .contact-form button {\n width: 100%;\n }\n </style>\n</head>\n<body>\n <header>\n <nav class=\"navbar\">\n <div class=\"logo\"><a href=\"#\">ACME Plumbing</a></div>\n <div>\n <a href=\"#about\">About</a>\n <a href=\"#services\">Services</a>\n <a href=\"#testimonials\">Testimonials</a>\n <a href=\"#contact\">Contact</a>\n </div>\n </nav>\n </header>\n\n <section class=\"hero\">\n <div>\n <h1>Reliable Plumbing Solutions</h1>\n <p>Fast, affordable, and professional plumbing services for your home or business.</p>\n <a href=\"#contact\" class=\"btn\">Get a Quote</a>\n </div>\n </section>\n\n <section id=\"about\" class=\"section\">\n <h2>About Us</h2>\n <p>At ACME Plumbing, we have over 20 years of experience offering top-notch plumbing solutions. Our certified technicians are dedicated to ensuring your pipes flow smoothly.</p>\n </section>\n\n <section id=\"services\" class=\"section\">\n <h2>Our Services</h2>\n <div class=\"services\">\n <div class=\"service-item\">\n <h3>Emergency Repairs</h3>\n <p>24/7 emergency plumbing repairs to fix leaks, clogs, and pipe bursts.</p>\n </div>\n <div class=\"service-item\">\n <h3>Drain Cleaning</h3>\n <p>Professional drain cleaning services using state-of-the-art equipment.</p>\n </div>\n <div class=\"service-item\">\n <h3>Water Heater Installation</h3>\n <p>Expert water heater installation and maintenance for optimal performance.\n </div>\n <div class=\"service-item\">\n <h3>Fixture Upgrades</h3>\n <p>Upgrade your sinks, faucets, and toilets for a modern look and improved efficiency.</p>\n </div>\n </div>\n </section>\n\n <section id=\"testimonials\" class=\"section\">\n <h2>Testimonials</h2>\n <div class=\"testimonials\">\n <div class=\"testimonial\">\n <p>\"ACME Plumbing saved us during a basement flood. Quick, professional, and affordable!\"</p>\n <strong>- Jane D.</strong>\n </div>\n <div class=\"testimonial\">\n <p>\"Highly recommend their drain cleaning service. My pipes haven't been better.\"</p>\n <strong>- Mark S.</strong>\n </div>\n </div>\n </section>\n\n <section id=\"contact\" class=\"section\">\n <h2>Contact Us</h2>\n <div class=\"contact-form\">\n <form action=\"#\" method=\"post\">\n <input type=\"text\" name=\"name\" placeholder=\"Your Name\" required>\n <input type=\"email\" name=\"email\" placeholder=\"Your Email\" required>\n <input type=\"tel\" name=\"phone\" placeholder=\"Your Phone Number\" required>\n <textarea name=\"message\" rows=\"4\" placeholder=\"How can we help you?\" required></textarea>\n <button type=\"submit\" class=\"btn\">Send Message</button>\n </form>\n </div>\n </section>\n\n <footer class=\"footer\">\n © 2024 ACME Plumbing. All Rights Reserved.\n </footer>\n</body>\n</html>"}