-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcontact.html
More file actions
2 lines (2 loc) · 14.1 KB
/
contact.html
File metadata and controls
2 lines (2 loc) · 14.1 KB
1
2
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><meta content="width=device-width, initial-scale=1.0" name="viewport"/><title> Contact Us - NG Aluminium Interiors | Get Free Quote </title><meta content="Contact NG Aluminium Interiors for free consultation and quotes. Visit our showroom in Hyderabad or call us for premium aluminum and glass solutions." name="description"/><link href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;600;700;800&family=Poppins:wght@600;700&display=swap" rel="stylesheet"/><style> /* CSS Variables */ :root { --bg: #ffffff; --text: #0b0b0b; --muted: #6b6b6b; --accent: #0ea5ff; --metal: linear-gradient(90deg,#d0d4d9,#f6f7f8); --card-shadow: 0 6px 20px rgba(11,11,11,0.06); --radius: 12px; --container: 1100px; --ng-yellow: #FFD700; --ng-black: #0b0b0b; --ng-white: #ffffff; --ng-gray: #f5f7fa; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; color: var(--text); background: var(--bg); line-height: 1.45; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } .container { max-width: var(--container); margin: 0 auto; padding: 28px; } /* Header */ header { padding: 18px 0; background: var(--bg); position: fixed; width: 100%; top: 0; z-index: 1000; box-shadow: var(--card-shadow); } .nav { display: flex; align-items: center; justify-content: space-between; } .brand { display: flex; gap: 14px; align-items: center; } .logo { width: 56px; height: 56px; border-radius: 10px; background: var(--ng-yellow); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--ng-black); font-size: 1.2rem; } .nav-links { display: flex; gap: 22px; align-items: center; } .nav-links a { color: var(--muted); transition: color 0.3s ease; } .nav-links a:hover, .nav-links a.active { color: var(--ng-yellow); } .btn-primary { background: var(--ng-yellow); color: var(--ng-black) !important; padding: 10px 16px; border-radius: 8px; font-weight: 600; } /* Contact Hero */ .contact-hero { padding: 120px 0 60px; background: linear-gradient(135deg, var(--ng-gray) 0%, var(--bg) 100%); text-align: center; } .contact-hero h1 { font-family: 'Poppins', sans-serif; font-size: 42px; margin-bottom: 16px; } .highlight { color: var(--ng-yellow); } /* Contact Info Cards */ .contact-info { padding: 60px 0; background: var(--bg); } .info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .info-card { text-align: center; padding: 40px 30px; background: var(--ng-gray); border-radius: 16px; transition: all 0.3s ease; } .info-card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0,0,0,0.1); } .info-icon { width: 70px; height: 70px; margin: 0 auto 20px; background: var(--ng-yellow); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; } .info-card h3 { margin-bottom: 12px; font-size: 20px; } .info-card p { color: var(--muted); line-height: 1.6; } .info-card a { color: var(--ng-yellow); font-weight: 600; } /* Contact Form Section */ .contact-form-section { padding: 60px 0; background: var(--bg); } .form-container { display: grid; grid-template-columns: 2fr 1fr; gap: 60px; align-items: start; } .form-wrapper { background: white; padding: 40px; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); } .form-title { font-family: 'Poppins', sans-serif; font-size: 28px; margin-bottom: 10px; } .form-subtitle { color: var(--muted); margin-bottom: 30px; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; } .form-group { display: flex; flex-direction: column; } .form-group.full-width { grid-column: 1 / -1; } label { font-weight: 600; margin-bottom: 8px; color: var(--text); } input, select, textarea { padding: 12px 16px; border: 1px solid #e0e0e0; border-radius: 8px; font-family: inherit; font-size: 15px; transition: all 0.3s ease; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ng-yellow); box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.1); } textarea { resize: vertical; min-height: 120px; } .submit-btn { background: var(--ng-yellow); color: var(--ng-black); padding: 16px 40px; border: none; border-radius: 8px; font-weight: 600; font-size: 16px; cursor: pointer; transition: all 0.3s ease; width: 100%; } .submit-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255, 215, 0, 0.3); } /* Sidebar Info */ .sidebar-info { position: sticky; top: 100px; } .quick-contact { background: var(--ng-yellow); padding: 30px; border-radius: 16px; margin-bottom: 30px; } .quick-contact h3 { margin-bottom: 20px; color: var(--ng-black); } .quick-item { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; color: var(--ng-black); } .quick-icon { width: 40px; height: 40px; background: white; border-radius: 8px; display: flex; align-items: center; justify-content: center; } .business-hours { background: var(--ng-gray); padding: 30px; border-radius: 16px; } .business-hours h3 { margin-bottom: 20px; } .hours-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #e0e0e0; } .hours-row:last-child { border-bottom: none; } /* Map Section */ .map-section { padding: 60px 0; background: var(--ng-gray); } .map-container { text-align: center; margin-bottom: 40px; } .map-container h2 { font-family: 'Poppins', sans-serif; font-size: 36px; margin-bottom: 16px; } .map-wrapper { height: 450px; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.1); background: #e0e0e0; display: flex; align-items: center; justify-content: center; color: var(--muted); } /* Footer */ footer { border-top: 1px solid #eee; padding: 28px 0; } .footer-grid { display: flex; justify-content: space-between; align-items: center; } /* WhatsApp Button */ .whatsapp-btn { position: fixed; right: 18px; bottom: 18px; background: #25D366; border-radius: 50%; width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(37,211,102,0.18); z-index: 1000; } .whatsapp-btn img { width: 30px; } .mobile-menu-btn { display: none; } /* Responsive */ @media (max-width: 980px) { .info-grid { grid-template-columns: 1fr; } .form-container { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; } .sidebar-info { position: static; } .nav-links { display: none; } .mobile-menu-btn { display: block; background: var(--ng-yellow); border: none; padding: 8px 12px; border-radius: 6px; cursor: pointer; font-size: 1.2rem; } } img { width: 100%; height: 300px; object-fit: cover; border-radius: 10px;
} </style><link rel="icon" type="image/png" href="assets/favicon.png"><link rel="shortcut icon" href="assets/favicon.ico" type="image/x-icon"><link rel="stylesheet" href="assets/style.css"><link rel="stylesheet" href="assets/glightbox.min.css"><script defer src="assets/glightbox.min.js"></script><meta property="og:url" content="http://yourdomain.com/"><meta property="og:type" content="website"></head><body><header><div class="container nav"><div class="brand"><div class="logo"> NG </div><div><div style="font-weight:700"> NG Aluminium Interiors </div><div style="font-size:13px;color:var(--muted)"> Aluminum • Glass • Precision </div></div></div><nav class="nav-links"><a href="index.html"> Home </a><a href="services.html"> Services </a><a href="portfolio.html"> Portfolio </a><a href="about.html"> About </a><a href="gallery.html"> Gallery </a><a class="active" href="contact.html"> Contact </a><a class="btn-primary" href="#form"> Get a Quote </a></nav><button class="mobile-menu-btn"> ☰ </button></div></header><section class="contact-hero"><div class="container"><h1> Get in <span class="highlight"> Touch </span></h1><p style="color:var(--muted);font-size:18px;max-width:600px;margin:0 auto"> Ready to transform your space? Contact us for a free consultation and quote </p></div></section><section class="contact-info"><div class="container"><div class="info-grid"><div class="info-card"><div class="info-icon"> 📍 </div><h3> Visit Our Showroom </h3><p> 504-152/9/66-A <br/> Sitha Ramapuram, Nellore <br/> Chinna Bazar, Nellore District <br/> Hyderabad - Telangana </p></div><div class="info-card"><div class="info-icon"> 📞 </div><h3> Call Us </h3><p><a href="tel:+917330838758"> +91 73308 38758 </a><br/> Available Mon-Sat <br/> 9:00 AM - 7:00 PM </p></div><div class="info-card"><div class="info-icon"> ✉️ </div><h3> Email Us </h3><p><a href="mailto:sdarbaaz123@gmail.com"> sdarbaaz123@gmail.com </a><br/> We reply within <br/> 24 hours </p></div></div></div></section><section class="contact-form-section" id="form"><div class="container"><div class="form-container"><div class="form-wrapper"><h2 class="form-title"> Request a <span class="highlight"> Free Quote </span></h2><p class="form-subtitle"> Fill out the form below and we'll get back to you within 24 hours </p><form id="contactForm"><div class="form-grid"><div class="form-group"><label for="firstName"> First Name * </label><input id="firstName" name="firstName" required="" type="text"/></div><div class="form-group"><label for="lastName"> Last Name * </label><input id="lastName" name="lastName" required="" type="text"/></div><div class="form-group"><label for="email"> Email Address * </label><input id="email" name="email" required="" type="email"/></div><div class="form-group"><label for="phone"> Phone Number * </label><input id="phone" name="phone" required="" type="tel"/></div><div class="form-group"><label for="service"> Service Required * </label><select id="service" name="service" required=""><option value=""> Select a service </option><option value="wardrobes"> Aluminium Wardrobes </option><option value="kitchen"> Modular Kitchen </option><option value="windows"> Windows & Doors </option><option value="partitions"> Glass Partitions </option><option value="mirrors"> LED Mirrors </option><option value="shower"> Shower Enclosures </option><option value="other"> Other </option></select></div><div class="form-group"><label for="location"> Location </label><input id="location" name="location" placeholder="e.g., Jubilee Hills" type="text"/></div><div class="form-group full-width"><label for="message"> Project Details </label><textarea id="message" name="message" placeholder="Please describe your project requirements..."></textarea></div></div><button class="submit-btn" type="submit"> Send Message </button></form></div><div class="sidebar-info"><div class="quick-contact"><h3> Quick Contact </h3><div class="quick-item"><div class="quick-icon"> 💬 </div><div><strong> WhatsApp </strong><br/><a href="https://wa.me/917330838758" style="color:var(--ng-black)"> +91 73308 38758 </a></div></div><div class="quick-item"><div class="quick-icon"> 📱 </div><div><strong> Direct Call </strong><br/><a href="tel:+917330838758" style="color:var(--ng-black)"> +91 73308 38758 </a></div></div><div class="quick-item"><div class="quick-icon"> 📧 </div><div><strong> Email </strong><br/><a href="mailto:sdarbaaz123@gmail.com" style="color:var(--ng-black)"> sdarbaaz123@gmail.com </a></div></div></div><div class="business-hours"><h3> Business Hours </h3><div class="hours-row"><span> Monday - Friday </span><strong> 9:00 AM - 7:00 PM </strong></div><div class="hours-row"><span> Saturday </span><strong> 9:00 AM - 6:00 PM </strong></div><div class="hours-row"><span> Sunday </span><strong> 10:00 AM - 4:00 PM </strong></div></div></div></div></div></section><section class="map-section"><div class="container"><div class="map-container"><h2> Visit Our <span class="highlight"> Showroom </span></h2><p style="color:var(--muted);margin-bottom:30px"> Experience our products firsthand at our Hyderabad showroom </p></div><div class="map-wrapper"><div style="padding:40px;text-align:center"><p style="font-size:18px;margin-bottom:20px"> 🗺️ Map Location </p><p> To embed Google Maps: <br/> 1. Go to Google Maps <br/> 2. Search for your location <br/> 3. Click Share → Embed a map <br/> 4. Copy and paste the iframe code here </p></div></div></div></section><footer><div class="container footer-grid"><div><div style="font-weight:700"> NG Aluminium Interiors </div><div style="margin-top:6px;color:var(--muted)"> Your trusted partner for premium interiors </div></div><div style="text-align:right"><div style="color:var(--muted)"> Call us: <a href="tel:+917330838758" style="color:var(--ng-yellow)"> +91 73308 38758 </a></div></div></div></footer><a class="whatsapp-btn" href="https://wa.me/917330838758" target="_blank"><img alt="whatsapp" src="images/interior.jpg"/></a><script> // Form submission handler document.getElementById('contactForm').addEventListener('submit', function(e) { e.preventDefault(); // Get form data const formData = new FormData(this); const data = Object.fromEntries(formData); // Here you would normally send the data to your server // For now, we'll just show a success message alert('Thank you for your inquiry! We will contact you within 24 hours.'); // Reset form this.reset(); }); // Mobile menu toggle document.querySelector('.mobile-menu-btn').addEventListener('click', function() { const navLinks = document.querySelector('.nav-links'); navLinks.style.display = navLinks.style.display === 'flex' ? 'none' : 'flex'; if (navLinks.style.display === 'flex') { navLinks.style.position = 'absolute'; navLinks.style.top = '100%'; navLinks.style.left = '0'; navLinks.style.right = '0'; navLinks.style.background = 'white'; navLinks.style.flexDirection = 'column'; navLinks.style.padding = '20px'; navLinks.style.boxShadow = '0 4px 20px rgba(0,0,0,0.1)'; } }); </script><script> document.addEventListener("DOMContentLoaded", function() { const menuBtn = document.querySelector(".mobile-menu-btn"); const navLinks = document.querySelector(".nav-links"); if (menuBtn && navLinks) { menuBtn.addEventListener("click", () => { if (navLinks.style.display === "flex") { navLinks.style.display = "none"; } else { navLinks.style.display = "flex"; navLinks.style.flexDirection = "column"; navLinks.style.background = "white"; navLinks.style.position = "absolute"; navLinks.style.top = "70px"; navLinks.style.right = "20px"; navLinks.style.padding = "20px"; navLinks.style.borderRadius = "10px"; navLinks.style.boxShadow = "0 8px 20px rgba(0,0,0,0.15)"; } }); } }); </script></body></html>