| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <title>CrystalFlow Plumbing</title> |
| <link rel="preconnect" href="https://fonts.googleapis.com" /> |
| <link |
| href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" |
| rel="stylesheet" |
| /> |
| <style> |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| :root { |
| --primary: #34b3ff; |
| --primary-soft: rgba(52, 179, 255, 0.5); |
| --accent: #00e0ff; |
| --bg-dark: #020817; |
| --glass-bg: rgba(255, 255, 255, 0.09); |
| --text-main: #f9fbff; |
| --text-muted: #b4c3df; |
| --border-glass: rgba(255, 255, 255, 0.2); |
| --shadow-soft: 0 18px 40px rgba(0, 0, 0, 0.5); |
| } |
| |
| body { |
| font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, |
| "Segoe UI", sans-serif; |
| min-height: 100vh; |
| color: var(--text-main); |
| background: radial-gradient(circle at 0% 0%, #062244 0, #020817 40%, #000 100%); |
| overflow-x: hidden; |
| } |
| |
| |
| .water-bg { |
| position: fixed; |
| inset: 0; |
| overflow: hidden; |
| z-index: -2; |
| } |
| |
| .water-bg::before, |
| .water-bg::after { |
| content: ""; |
| position: absolute; |
| width: 160%; |
| height: 160%; |
| top: -30%; |
| left: -30%; |
| background: |
| radial-gradient(circle at 10% 20%, rgba(0, 240, 255, 0.28) 0, transparent 55%), |
| radial-gradient(circle at 80% 10%, rgba(0, 90, 255, 0.4) 0, transparent 55%), |
| radial-gradient(circle at 0% 100%, rgba(0, 150, 255, 0.35) 0, transparent 50%); |
| opacity: 0.55; |
| filter: blur(4px); |
| animation: waterFlow 18s infinite alternate ease-in-out; |
| } |
| |
| .water-bg::after { |
| animation-duration: 26s; |
| animation-direction: alternate-reverse; |
| mix-blend-mode: screen; |
| opacity: 0.45; |
| } |
| |
| @keyframes waterFlow { |
| 0% { |
| transform: translate3d(0, 0, 0) scale(1.02); |
| } |
| 50% { |
| transform: translate3d(-40px, 20px, 0) scale(1.05); |
| } |
| 100% { |
| transform: translate3d(30px, -30px, 0) scale(1.03); |
| } |
| } |
| |
| |
| .wave { |
| position: fixed; |
| left: 0; |
| bottom: 0; |
| width: 200%; |
| height: 220px; |
| background: radial-gradient(circle at 50% -50%, transparent 60%, rgba(0, 112, 255, 0.8) 63%, #020817 72%); |
| opacity: 0.75; |
| transform: translateX(0); |
| animation: waveMove 14s linear infinite; |
| z-index: -1; |
| filter: blur(2px); |
| } |
| |
| .wave:nth-child(2) { |
| bottom: -40px; |
| opacity: 0.4; |
| animation-duration: 20s; |
| animation-direction: reverse; |
| filter: blur(4px); |
| } |
| |
| @keyframes waveMove { |
| 0% { |
| transform: translateX(0); |
| } |
| 100% { |
| transform: translateX(-50%); |
| } |
| } |
| |
| |
| .page { |
| max-width: 1140px; |
| margin: 0 auto; |
| padding: 24px 18px 72px; |
| } |
| |
| header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| margin-bottom: 32px; |
| } |
| |
| .logo { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| font-weight: 700; |
| letter-spacing: 0.04em; |
| text-transform: uppercase; |
| font-size: 0.95rem; |
| } |
| |
| .logo-icon { |
| width: 34px; |
| height: 34px; |
| border-radius: 12px; |
| background: radial-gradient(circle at 30% 0, #e0faff 0, #00bfff 40%, #0055ff 90%); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| box-shadow: 0 0 16px rgba(0, 191, 255, 0.8); |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .logo-icon span { |
| font-size: 1.1rem; |
| font-weight: 800; |
| text-shadow: 0 0 10px rgba(0, 0, 0, 0.75); |
| } |
| |
| nav { |
| display: flex; |
| align-items: center; |
| gap: 22px; |
| font-size: 0.9rem; |
| } |
| |
| nav a { |
| text-decoration: none; |
| color: var(--text-muted); |
| position: relative; |
| transition: 0.2s ease; |
| } |
| |
| nav a::after { |
| content: ""; |
| position: absolute; |
| left: 0; |
| bottom: -5px; |
| width: 0; |
| height: 2px; |
| border-radius: 999px; |
| background: linear-gradient(90deg, var(--primary), var(--accent)); |
| transition: width 0.2s ease-out; |
| } |
| |
| nav a:hover { |
| color: var(--text-main); |
| } |
| |
| nav a:hover::after { |
| width: 100%; |
| } |
| |
| .nav-cta { |
| padding: 8px 18px; |
| border-radius: 999px; |
| border: 1px solid rgba(255, 255, 255, 0.3); |
| background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.12), rgba(22, 46, 89, 0.72)); |
| backdrop-filter: blur(14px); |
| -webkit-backdrop-filter: blur(14px); |
| box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45); |
| font-size: 0.78rem; |
| text-transform: uppercase; |
| letter-spacing: 0.12em; |
| cursor: pointer; |
| transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; |
| color: var(--text-main); |
| } |
| |
| .nav-cta:hover { |
| transform: translateY(-1px); |
| border-color: var(--accent); |
| box-shadow: 0 10px 26px rgba(0, 0, 0, 0.6); |
| } |
| |
| |
| .hero { |
| display: grid; |
| grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); |
| gap: 32px; |
| align-items: center; |
| } |
| |
| .hero-left { |
| position: relative; |
| } |
| |
| .hero-badge { |
| display: inline-flex; |
| align-items: center; |
| gap: 8px; |
| padding: 6px 12px; |
| border-radius: 999px; |
| background: rgba(0, 0, 0, 0.4); |
| border: 1px solid rgba(255, 255, 255, 0.16); |
| backdrop-filter: blur(16px); |
| -webkit-backdrop-filter: blur(16px); |
| font-size: 0.78rem; |
| margin-bottom: 14px; |
| } |
| |
| .dot-online { |
| width: 8px; |
| height: 8px; |
| border-radius: 50%; |
| background: radial-gradient(circle, #00ff95 0, #00b86e 60%, transparent 100%); |
| box-shadow: 0 0 8px rgba(0, 255, 149, 0.8); |
| } |
| |
| .hero-badge strong { |
| color: var(--accent); |
| font-weight: 600; |
| } |
| |
| h1 { |
| font-size: clamp(2.3rem, 4vw, 3rem); |
| line-height: 1.12; |
| margin-bottom: 10px; |
| } |
| |
| h1 span { |
| background: linear-gradient(110deg, #e1f5ff, #00e0ff, #39a4ff); |
| -webkit-background-clip: text; |
| background-clip: text; |
| color: transparent; |
| } |
| |
| .hero-subtitle { |
| font-size: 0.97rem; |
| color: var(--text-muted); |
| max-width: 460px; |
| margin-bottom: 20px; |
| } |
| |
| .hero-cta-row { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 12px; |
| margin-bottom: 16px; |
| } |
| |
| .btn-primary, |
| .btn-ghost { |
| border-radius: 999px; |
| padding: 12px 22px; |
| font-size: 0.92rem; |
| border: 1px solid transparent; |
| cursor: pointer; |
| display: inline-flex; |
| align-items: center; |
| gap: 8px; |
| text-decoration: none; |
| transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s; |
| } |
| |
| .btn-primary { |
| background: radial-gradient(circle at 0 0, #ffffff 0, #c6f2ff 18%, #009dff 60%, #0040ff 100%); |
| color: #031018; |
| box-shadow: 0 14px 30px rgba(0, 166, 255, 0.75); |
| font-weight: 600; |
| } |
| |
| .btn-primary:hover { |
| transform: translateY(-1px); |
| box-shadow: 0 17px 38px rgba(0, 166, 255, 0.9); |
| } |
| |
| .btn-ghost { |
| background: rgba(4, 16, 36, 0.85); |
| border-color: rgba(255, 255, 255, 0.2); |
| color: var(--text-main); |
| backdrop-filter: blur(10px); |
| -webkit-backdrop-filter: blur(10px); |
| } |
| |
| .btn-ghost:hover { |
| border-color: var(--primary-soft); |
| background: rgba(6, 32, 70, 0.85); |
| transform: translateY(-1px); |
| } |
| |
| .hero-note { |
| font-size: 0.8rem; |
| color: var(--text-muted); |
| } |
| |
| .hero-note strong { |
| color: var(--accent); |
| } |
| |
| |
| .hero-right { |
| position: relative; |
| display: flex; |
| justify-content: flex-end; |
| } |
| |
| .glass-card { |
| position: relative; |
| width: 100%; |
| max-width: 360px; |
| padding: 20px 18px 18px; |
| border-radius: 22px; |
| background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.18), rgba(6, 24, 46, 0.96)); |
| border: 1px solid var(--border-glass); |
| box-shadow: var(--shadow-soft); |
| backdrop-filter: blur(20px); |
| -webkit-backdrop-filter: blur(20px); |
| overflow: hidden; |
| } |
| |
| .glass-card::before { |
| content: ""; |
| position: absolute; |
| inset: -40%; |
| background: |
| conic-gradient(from 120deg, rgba(0, 217, 255, 0.1), transparent 40%, rgba(255, 255, 255, 0.12), transparent 60%, rgba(0, 140, 255, 0.26), transparent 80%, rgba(0, 217, 255, 0.1)); |
| opacity: 0.85; |
| mix-blend-mode: screen; |
| filter: blur(6px); |
| animation: glassShine 14s infinite linear; |
| pointer-events: none; |
| } |
| |
| @keyframes glassShine { |
| 0% { |
| transform: translate3d(-10%, 0, 0) rotate(0deg); |
| } |
| 100% { |
| transform: translate3d(10%, 0, 0) rotate(360deg); |
| } |
| } |
| |
| .glass-inner { |
| position: relative; |
| z-index: 1; |
| } |
| |
| .card-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| margin-bottom: 12px; |
| } |
| |
| .badge-emergency { |
| font-size: 0.7rem; |
| text-transform: uppercase; |
| letter-spacing: 0.12em; |
| padding: 4px 10px; |
| border-radius: 999px; |
| background: rgba(255, 44, 93, 0.25); |
| border: 1px solid rgba(255, 122, 154, 0.6); |
| color: #ffe7ed; |
| } |
| |
| .rating { |
| font-size: 0.8rem; |
| color: #fffbcc; |
| } |
| |
| .rating span { |
| font-size: 1rem; |
| } |
| |
| .pipe-graphic { |
| margin: 8px 0 14px; |
| height: 82px; |
| border-radius: 18px; |
| background: |
| radial-gradient(circle at 12% 0, rgba(255, 255, 255, 0.5) 0, transparent 45%), |
| linear-gradient(135deg, rgba(0, 0, 0, 0.34), rgba(0, 29, 65, 0.95)), |
| repeating-linear-gradient(120deg, rgba(0, 180, 255, 0.2) 0, rgba(0, 180, 255, 0.2) 8px, transparent 8px, transparent 14px); |
| border: 1px solid rgba(255, 255, 255, 0.18); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .pipe-line { |
| position: absolute; |
| height: 10px; |
| width: 110%; |
| border-radius: 999px; |
| background: |
| linear-gradient(90deg, rgba(0, 18, 40, 0.9), rgba(0, 187, 255, 0.9), rgba(0, 18, 40, 0.9)); |
| box-shadow: 0 0 16px rgba(0, 224, 255, 0.9); |
| animation: flow 4.5s infinite linear; |
| } |
| |
| @keyframes flow { |
| 0% { |
| transform: translateX(-10%); |
| } |
| 100% { |
| transform: translateX(10%); |
| } |
| } |
| |
| .pipe-droplet { |
| position: absolute; |
| right: 16px; |
| bottom: 10px; |
| width: 28px; |
| height: 28px; |
| border-radius: 50% 50% 60% 60%; |
| background: radial-gradient(circle at 30% 0, #ffffff, #8be8ff 30%, #009dff 70%); |
| box-shadow: 0 0 18px rgba(0, 209, 255, 0.9); |
| animation: drop 2.4s infinite ease-in-out; |
| } |
| |
| @keyframes drop { |
| 0% { |
| transform: translateY(-4px) scale(1); |
| } |
| 50% { |
| transform: translateY(2px) scale(1.03); |
| } |
| 100% { |
| transform: translateY(-4px) scale(1); |
| } |
| } |
| |
| .card-list { |
| display: grid; |
| gap: 8px; |
| font-size: 0.82rem; |
| margin-bottom: 12px; |
| } |
| |
| .card-list-row { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| color: var(--text-muted); |
| } |
| |
| .card-list-row span:first-child { |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| } |
| |
| .bullet { |
| width: 6px; |
| height: 6px; |
| border-radius: 50%; |
| background: var(--accent); |
| box-shadow: 0 0 8px rgba(0, 204, 255, 0.8); |
| } |
| |
| .card-footer { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| font-size: 0.78rem; |
| color: var(--text-muted); |
| } |
| |
| .card-footer strong { |
| color: var(--text-main); |
| } |
| |
| .card-phone { |
| display: inline-flex; |
| align-items: center; |
| gap: 6px; |
| padding: 6px 10px; |
| border-radius: 999px; |
| background: rgba(0, 0, 0, 0.4); |
| border: 1px solid rgba(255, 255, 255, 0.28); |
| cursor: pointer; |
| transition: 0.15s ease; |
| } |
| |
| .card-phone:hover { |
| background: rgba(0, 0, 0, 0.7); |
| } |
| |
| |
| .bottom { |
| margin-top: 44px; |
| display: grid; |
| grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); |
| gap: 26px; |
| } |
| |
| .section-title { |
| font-size: 1rem; |
| margin-bottom: 10px; |
| } |
| |
| .section-title span { |
| font-size: 0.78rem; |
| text-transform: uppercase; |
| letter-spacing: 0.18em; |
| color: var(--text-muted); |
| display: block; |
| margin-bottom: 4px; |
| } |
| |
| .services-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); |
| gap: 12px; |
| } |
| |
| .service-card { |
| padding: 12px 12px 11px; |
| border-radius: 18px; |
| background: linear-gradient( |
| 135deg, |
| rgba(10, 26, 60, 0.9), |
| rgba(5, 13, 30, 0.96) |
| ); |
| border: 1px solid rgba(255, 255, 255, 0.12); |
| backdrop-filter: blur(12px); |
| -webkit-backdrop-filter: blur(12px); |
| box-shadow: 0 10px 22px rgba(0, 0, 0, 0.5); |
| font-size: 0.86rem; |
| display: flex; |
| flex-direction: column; |
| gap: 4px; |
| } |
| |
| .service-icon { |
| width: 26px; |
| height: 26px; |
| border-radius: 10px; |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| margin-bottom: 4px; |
| font-size: 1rem; |
| background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.5) 0, rgba(0, 176, 255, 0.9) 40%, #0036b8 100%); |
| box-shadow: 0 0 10px rgba(0, 198, 255, 0.75); |
| } |
| |
| .service-title { |
| font-weight: 500; |
| } |
| |
| .service-text { |
| font-size: 0.76rem; |
| color: var(--text-muted); |
| } |
| |
| .badge-guarantee { |
| margin-top: 10px; |
| font-size: 0.76rem; |
| color: var(--text-muted); |
| display: inline-flex; |
| align-items: center; |
| gap: 6px; |
| } |
| |
| .badge-guarantee span { |
| font-size: 1rem; |
| } |
| |
| |
| .contact-card { |
| padding: 18px 16px; |
| border-radius: 20px; |
| background: radial-gradient(circle at 100% 0, rgba(255, 255, 255, 0.28), rgba(3, 17, 38, 0.96)); |
| border: 1px solid rgba(255, 255, 255, 0.2); |
| box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6); |
| backdrop-filter: blur(18px); |
| -webkit-backdrop-filter: blur(18px); |
| } |
| |
| .contact-card p { |
| font-size: 0.8rem; |
| color: var(--text-muted); |
| margin-bottom: 12px; |
| } |
| |
| .form-row { |
| display: grid; |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| gap: 10px; |
| margin-bottom: 10px; |
| } |
| |
| .form-field { |
| display: flex; |
| flex-direction: column; |
| gap: 4px; |
| font-size: 0.8rem; |
| } |
| |
| .form-field label { |
| color: var(--text-muted); |
| } |
| |
| .form-field input, |
| .form-field select, |
| .form-field textarea { |
| padding: 8px 10px; |
| border-radius: 10px; |
| border: 1px solid rgba(255, 255, 255, 0.3); |
| background: rgba(3, 10, 24, 0.9); |
| color: var(--text-main); |
| font-family: inherit; |
| font-size: 0.82rem; |
| outline: none; |
| transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; |
| } |
| |
| .form-field textarea { |
| resize: vertical; |
| min-height: 70px; |
| } |
| |
| .form-field input::placeholder, |
| .form-field textarea::placeholder { |
| color: rgba(180, 195, 223, 0.7); |
| } |
| |
| .form-field input:focus, |
| .form-field select:focus, |
| .form-field textarea:focus { |
| border-color: var(--accent); |
| box-shadow: 0 0 0 1px rgba(0, 219, 255, 0.8); |
| background: rgba(3, 18, 40, 0.98); |
| } |
| |
| .contact-footer { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| margin-top: 12px; |
| font-size: 0.78rem; |
| color: var(--text-muted); |
| flex-wrap: wrap; |
| gap: 8px; |
| } |
| |
| .contact-footer small strong { |
| color: var(--accent); |
| } |
| |
| footer { |
| margin-top: 30px; |
| font-size: 0.75rem; |
| color: var(--text-muted); |
| text-align: center; |
| } |
| |
| |
| @media (max-width: 880px) { |
| header { |
| gap: 12px; |
| } |
| |
| nav { |
| display: none; |
| } |
| |
| .hero { |
| grid-template-columns: minmax(0, 1fr); |
| } |
| |
| .hero-right { |
| order: -1; |
| justify-content: flex-start; |
| } |
| |
| .glass-card { |
| max-width: 100%; |
| } |
| |
| .bottom { |
| grid-template-columns: minmax(0, 1fr); |
| } |
| } |
| |
| @media (max-width: 520px) { |
| .page { |
| padding-inline: 14px; |
| } |
| |
| .hero-cta-row { |
| flex-direction: column; |
| align-items: stretch; |
| } |
| |
| .btn-primary, |
| .btn-ghost { |
| justify-content: center; |
| width: 100%; |
| } |
| |
| .form-row { |
| grid-template-columns: minmax(0, 1fr); |
| } |
| } |
| </style> |
| </head> |
| <body> |
| |
| <div class="water-bg"></div> |
| <div class="wave"></div> |
| <div class="wave"></div> |
|
|
| <div class="page"> |
| <header> |
| <div class="logo"> |
| <div class="logo-icon"> |
| <span>💧</span> |
| </div> |
| CrystalFlow Plumbing |
| </div> |
| <nav> |
| <a href="#services">Services</a> |
| <a href="#contact">Schedule</a> |
| <a href="#guarantee">Guarantee</a> |
| <button class="nav-cta">Call Now: (000) 123-4567</button> |
| </nav> |
| </header> |
|
|
| <main> |
| <section class="hero"> |
| |
| <div class="hero-right"> |
| <div class="glass-card"> |
| <div class="glass-inner"> |
| <div class="card-header"> |
| <span class="badge-emergency">24/7 Emergency</span> |
| <div class="rating"> |
| <span>⭐</span> 4.9 • 1,200+ jobs |
| </div> |
| </div> |
|
|
| <div class="pipe-graphic"> |
| <div class="pipe-line"></div> |
| <div class="pipe-droplet"></div> |
| </div> |
|
|
| <div class="card-list"> |
| <div class="card-list-row"> |
| <span><span class="bullet"></span> Arrival</span> |
| <span><strong>< 45 min</strong></span> |
| </div> |
| <div class="card-list-row"> |
| <span><span class="bullet"></span> Coverage</span> |
| <span>Citywide & suburbs</span> |
| </div> |
| <div class="card-list-row"> |
| <span><span class="bullet"></span> Guarantee</span> |
| <span>Leak-free for 12 months</span> |
| </div> |
| </div> |
|
|
| <div class="card-footer"> |
| <div> |
| From <strong>$49</strong><br /> |
| <span>Transparent, flat-rate pricing</span> |
| </div> |
| <div class="card-phone"> |
| 📞 <strong>(000) 123-4567</strong> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="hero-left"> |
| <div class="hero-badge"> |
| <span class="dot-online"></span> |
| <span>Local, licensed & insured • <strong>Free leak check</strong></span> |
| </div> |
|
|
| <h1> |
| Crystal-clear pipes,<br /> |
| <span>stress-free plumbing.</span> |
| </h1> |
|
|
| <p class="hero-subtitle"> |
| From burst pipes to dripping taps, our expert plumbers keep your home flowing. |
| Same-day service, water-tight fixes, and a 12-month workmanship guarantee. |
| </p> |
|
|
| <div class="hero-cta-row"> |
| <a href="#contact" class="btn-primary"> |
| Book a plumber now → |
| </a> |
| <a href="#services" class="btn-ghost"> |
| View services |
| </a> |
| </div> |
|
|
| <p class="hero-note"> |
| <strong>Emergency?</strong> We aim to be at your door in under 45 minutes, day or night. |
| </p> |
| </div> |
| </section> |
|
|
| <section class="bottom"> |
| |
| <div id="services"> |
| <h2 class="section-title"> |
| <span>What we fix</span> |
| Full-service plumbing for home & business |
| </h2> |
|
|
| <div class="services-grid"> |
| <div class="service-card"> |
| <div class="service-icon">🚿</div> |
| <div class="service-title">Leaks & burst pipes</div> |
| <div class="service-text"> |
| Rapid leak detection, pipe repair, and water-damage prevention. |
| </div> |
| </div> |
|
|
| <div class="service-card"> |
| <div class="service-icon">🚽</div> |
| <div class="service-title">Drain & toilet clogs</div> |
| <div class="service-text"> |
| High-pressure jetting to clear tough blockages safely. |
| </div> |
| </div> |
|
|
| <div class="service-card"> |
| <div class="service-icon">🔥</div> |
| <div class="service-title">Water heaters</div> |
| <div class="service-text"> |
| Repair, replacement, and full system installation. |
| </div> |
| </div> |
|
|
| <div class="service-card"> |
| <div class="service-icon">🏠</div> |
| <div class="service-title">Kitchen & bathroom</div> |
| <div class="service-text"> |
| Tap, sink, and fixture installs with a clean, tidy finish. |
| </div> |
| </div> |
| </div> |
|
|
| <div class="badge-guarantee" id="guarantee"> |
| <span>🛡️</span> |
| 12-month labour guarantee • Fully insured • Upfront quotes only |
| </div> |
| </div> |
|
|
| |
| <div id="contact" class="contact-card"> |
| <h2 class="section-title"> |
| <span>Book now</span> |
| Describe your plumbing issue |
| </h2> |
| <p> |
| Send us a quick request and our team will call you back with an exact quote |
| and arrival time. |
| </p> |
|
|
| <form> |
| <div class="form-row"> |
| <div class="form-field"> |
| <label for="name">Name</label> |
| <input id="name" type="text" placeholder="Your full name" required /> |
| </div> |
| <div class="form-field"> |
| <label for="phone">Phone</label> |
| <input id="phone" type="tel" placeholder="Best contact number" required /> |
| </div> |
| </div> |
|
|
| <div class="form-row"> |
| <div class="form-field"> |
| <label for="location">Area</label> |
| <input id="location" type="text" placeholder="Neighborhood / city" /> |
| </div> |
| <div class="form-field"> |
| <label for="service">Service type</label> |
| <select id="service"> |
| <option value="">Select an option</option> |
| <option>Emergency leak</option> |
| <option>Clogged drain / toilet</option> |
| <option>Water heater issue</option> |
| <option>Kitchen / bathroom install</option> |
| <option>Other plumbing</option> |
| </select> |
| </div> |
| </div> |
|
|
| <div class="form-field"> |
| <label for="details">Issue details</label> |
| <textarea |
| id="details" |
| placeholder="Example: water leaking under kitchen sink for 2 days, stops when tap is closed…" |
| ></textarea> |
| </div> |
|
|
| <div class="contact-footer"> |
| <small> |
| Average response time: <strong>10–15 minutes</strong><br /> |
| No call-out fee if you approve the quote. |
| </small> |
| <button type="submit" class="btn-primary"> |
| Request a callback |
| </button> |
| </div> |
| </form> |
| </div> |
| </section> |
| </main> |
|
|
| <footer> |
| © <span id="year"></span> CrystalFlow Plumbing. All rights reserved. |
| </footer> |
| </div> |
|
|
| <script> |
| |
| document.getElementById("year").textContent = new Date().getFullYear(); |
| </script> |
| </body> |
| </html> |
