Spaces:

abeea
/

Codee

Running

App Files Files Community

abeea commited on Nov 29, 2025

Commit

0bc4655

verified ·

1 Parent(s): b7c1c8c

Update index.html

Browse files

Files changed (1) hide show

index.html +866 -252

index.html CHANGED Viewed

@@ -2,347 +2,961 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8" />
-  <title>Mini CodePen – Live Preview</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <style>
     * {
-      box-sizing: border-box;
       margin: 0;
       padding: 0;
-      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
     }
     body {
-      background: #0f172a;
-      color: #e5e7eb;
       min-height: 100vh;
-      display: flex;
-      flex-direction: column;
     }
     header {
-      padding: 12px 20px;
-      border-bottom: 1px solid #1f2937;
       display: flex;
-      align-items: center;
       justify-content: space-between;
-      gap: 12px;
     }
-    header h1 {
       font-size: 1.1rem;
       font-weight: 600;
-      color: #f9fafb;
     }
-    header span {
-      font-size: 0.8rem;
-      color: #9ca3af;
     }
-    .actions {
       display: flex;
-      gap: 8px;
     }
-    button {
-      border: none;
-      padding: 8px 14px;
       border-radius: 999px;
-      font-size: 0.85rem;
       cursor: pointer;
-      background: #22c55e;
-      color: #022c22;
       font-weight: 600;
-      transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.15s ease;
     }
-    button:hover {
       transform: translateY(-1px);
-      box-shadow: 0 8px 20px rgba(34, 197, 94, 0.35);
     }
-    button.secondary {
-      background: #111827;
-      color: #e5e7eb;
-      border: 1px solid #374151;
-      box-shadow: none;
     }
-    button.secondary:hover {
-      background: #020617;
     }
-    main {
-      flex: 1;
-      display: grid;
-      grid-template-columns: 1.1fr 1fr;
-      min-height: 0;
     }
-    @media (max-width: 900px) {
-      main {
-        grid-template-columns: 1fr;
-        grid-template-rows: minmax(300px, 1fr) minmax(250px, 1fr);
       }
     }
-    .panes {
       display: grid;
-      grid-template-rows: repeat(3, minmax(0, 1fr));
-      border-right: 1px solid #1f2937;
-      min-height: 0;
     }
-    .editor {
       display: flex;
-      flex-direction: column;
-      border-bottom: 1px solid #1f2937;
-      min-height: 0;
-      background: #020617;
     }
-    .editor-header {
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 6px 10px;
-      font-size: 0.75rem;
-      border-bottom: 1px solid #111827;
-      background: linear-gradient(to right, #020617, #0f172a);
     }
-    .editor-header span.label {
       text-transform: uppercase;
-      letter-spacing: 0.08em;
-      font-weight: 600;
     }
-    .editor-header span.badge {
-      font-size: 0.65rem;
-      padding: 2px 8px;
-      border-radius: 999px;
-      background: #111827;
-      border: 1px solid #1f2937;
-      color: #9ca3af;
     }
-    textarea {
-      flex: 1;
-      width: 100%;
-      border: none;
-      resize: none;
-      padding: 10px 12px;
-      font-family: "Fira Code", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
       font-size: 0.8rem;
-      line-height: 1.4;
-      color: #e5e7eb;
-      background: #020617;
-      outline: none;
-      overflow: auto;
     }
-    textarea::placeholder {
-      color: #4b5563;
     }
-    .preview-pane {
       display: flex;
       flex-direction: column;
-      min-height: 0;
-      background: #020617;
     }
-    .preview-header {
-      padding: 6px 10px;
-      font-size: 0.75rem;
-      border-bottom: 1px solid #111827;
       display: flex;
-      align-items: center;
       justify-content: space-between;
-      background: linear-gradient(to right, #111827, #1f2937);
     }
-    .preview-header span {
-      text-transform: uppercase;
-      letter-spacing: 0.08em;
-      font-weight: 600;
     }
-    iframe {
-      flex: 1;
-      border: none;
-      background: white;
     }
-    footer {
-      font-size: 0.7rem;
-      padding: 6px 12px;
-      text-align: right;
-      color: #6b7280;
-      border-top: 1px solid #111827;
     }
   </style>
 </head>
 <body>
-  <header>
-    <div>
-      <h1>Mini Code Preview</h1>
-      <span>Paste HTML, CSS, JS and click “Run” to preview</span>
-    </div>
-    <div class="actions">
-      <button id="run-btn">Run ▶</button>
-      <button id="reset-btn" class="secondary">Reset</button>
-    </div>
-  </header>
-  <main>
-    <!-- Left: Editors -->
-    <section class="panes">
-      <div class="editor">
-        <div class="editor-header">
-          <span class="label">HTML</span>
-          <span class="badge">Markup</span>
         </div>
-        <textarea id="html-input" placeholder="&lt;h1&gt;Hello World&lt;/h1&gt;">
-<div class="card">
-  <h1>Hello Mini CodePen 👋</h1>
-  <p>Edit HTML, CSS, and JS, then press <strong>Run</strong>.</p>
-  <button onclick="alert('JS is working!')">Click Me</button>
-</div>
-        </textarea>
       </div>
-      <div class="editor">
-        <div class="editor-header">
-          <span class="label">CSS</span>
-          <span class="badge">Styles</span>
         </div>
-        <textarea id="css-input" placeholder="body { font-family: sans-serif; }">
-body {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 100vh;
-  margin: 0;
-  background: linear-gradient(135deg, #22c55e, #0ea5e9);
-  font-family: system-ui, sans-serif;
-}
-.card {
-  background: white;
-  padding: 24px 28px;
-  border-radius: 16px;
-  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.35);
-  max-width: 360px;
-  text-align: center;
-}
-.card h1 {
-  margin-bottom: 10px;
-  color: #111827;
-}
-.card p {
-  margin-bottom: 16px;
-  color: #4b5563;
-}
-.card button {
-  border: none;
-  background: #22c55e;
-  color: #022c22;
-  padding: 8px 18px;
-  border-radius: 999px;
-  font-weight: 600;
-  cursor: pointer;
-}
-        </textarea>
-      </div>
-      <div class="editor">
-        <div class="editor-header">
-          <span class="label">JavaScript</span>
-          <span class="badge">Logic</span>
         </div>
-        <textarea id="js-input" placeholder="console.log('Hello');">
-console.log("Mini CodePen ready!");
-        </textarea>
-      </div>
-    </section>
-    <!-- Right: Preview -->
-    <section class="preview-pane">
-      <div class="preview-header">
-        <span>Preview</span>
-        <small id="status-text">Idle</small>
-      </div>
-      <iframe id="preview-frame" title="Live Preview"></iframe>
-    </section>
-  </main>
-  <footer>
-    Mini Code Preview • Pure HTML + CSS + JavaScript
-  </footer>
   <script>
-    const htmlInput = document.getElementById("html-input");
-    const cssInput = document.getElementById("css-input");
-    const jsInput = document.getElementById("js-input");
-    const previewFrame = document.getElementById("preview-frame");
-    const runBtn = document.getElementById("run-btn");
-    const resetBtn = document.getElementById("reset-btn");
-    const statusText = document.getElementById("status-text");
-    function runPreview() {
-      const html = htmlInput.value || "";
-      const css = cssInput.value || "";
-      const js = jsInput.value || "";
-      const finalCode = `
-<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<style>
-${css}
-</style>
-</head>
-<body>
-${html}
-<script>
-${js.replace(/<\/script>/gi, "<\\/script>")}
-</script>
-</body>
-</html>`;
-      previewFrame.srcdoc = finalCode;
-      statusText.textContent = "Last run: " + new Date().toLocaleTimeString();
-    }
-    function resetEditors() {
-      htmlInput.value = "<h1>Hello World</h1>";
-      cssInput.value = "body { font-family: system-ui, sans-serif; }";
-      jsInput.value = "console.log('Reset!');";
-      runPreview();
-    }
-    runBtn.addEventListener("click", runPreview);
-    resetBtn.addEventListener("click", resetEditors);
-    // Optional: auto-run on Ctrl+Enter in any editor
-    [htmlInput, cssInput, jsInput].forEach((area) => {
-      area.addEventListener("keydown", (e) => {
-        if (e.ctrlKey && e.key === "Enter") {
-          e.preventDefault();
-          runPreview();
-        }
-      });
-    });
-    // Initial load
-    runPreview();
   </script>
 </body>
 </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 BACKGROUND EFFECT */
+    .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);
+      }
+    }
+    /* OVERLAY WAVES AT BOTTOM */
+    .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 LAYOUT */
+    .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 */
+    .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 - GLASS CARD */
+    .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);
     }
+    /* SERVICES + CONTACT SECTION */
+    .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 FORM */
+    .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;
     }
+    /* RESPONSIVE */
+    @media (max-width: 880px) {
+      header {
+        gap: 12px;
+      }
+      nav {
+        display: none; /* keep it simple for small screens */
+      }
+      .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>
+  <!-- Animated water/gradient background -->
+  <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">
+        <!-- RIGHT: Glass card on top for mobile, but visually on right for desktop -->
+        <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>&lt; 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>
+        <!-- LEFT: Text content -->
+        <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">
+        <!-- Services -->
+        <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>
+        <!-- Contact / Booking -->
+        <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>
+    // Set current year in footer
+    document.getElementById("year").textContent = new Date().getFullYear();
   </script>
 </body>
 </html>