SnIPPETsX
SnIPPETsX

SnIPPETsX › Gauge | Smarter Water. Better Protection.

Gauge | Smarter Water. Better Protection.

HTML · updated Nov 13, 2026 · 561 lines

main.html


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gauge | Smarter Water. Better Protection.</title>
<meta name="description" content="Discover Gauge smart water purification, continuous water quality monitoring and mineral restoration.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">

<style>
:root {
  --navy:#071C27;
  --navy2:#102E3B;
  --teal:#45D6C2;
  --mint:#DFF7F1;
  --white:#FFFFFF;
  --light:#F4F8F7;
  --text:#17323B;
  --muted:#72838A;
  --line:#E3ECE9;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 font-family:'Manrope',sans-serif;
 color:var(--text);
 background:white;
 line-height:1.65;
}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer}
.container{width:90%;max-width:1240px;margin:auto}
section{padding:105px 0}
.eyebrow{
 display:inline-flex;align-items:center;gap:9px;
 font-size:12px;font-weight:800;letter-spacing:2px;
 text-transform:uppercase;color:#149D91;margin-bottom:20px
}
.eyebrow:before{
 content:"";width:22px;height:2px;background:var(--teal)
}
h1,h2,h3{letter-spacing:-1.5px;line-height:1.15}
h1{font-size:clamp(43px,6vw,76px);font-weight:800}
h2{font-size:clamp(32px,4vw,49px);font-weight:800}
h3{font-size:23px;font-weight:700}
p{color:var(--muted)}
.section-head{max-width:700px;margin-bottom:48px}
.section-head.center{text-align:center;margin:0 auto 55px}
.section-head p{margin-top:17px;font-size:16px}
.btn{
 display:inline-flex;align-items:center;justify-content:center;
 gap:10px;padding:15px 24px;border-radius:8px;
 background:var(--teal);color:var(--navy);
 font-weight:800;font-size:14px;border:1px solid var(--teal);
 transition:.25s;
}
.btn:hover{transform:translateY(-3px);box-shadow:0 12px 30px #45d6c233}
.btn-outline{
 background:transparent;border-color:#ffffff66;color:white
}
.btn-dark{background:var(--navy);color:white;border-color:var(--navy)}
/* HEADER */
header{
 position:sticky;top:0;z-index:100;
 background:#071c27f2;backdrop-filter:blur(15px);
 border-bottom:1px solid #ffffff18;
}
.nav{
 min-height:82px;display:flex;align-items:center;
 justify-content:space-between;gap:25px;
}
.logo{font-size:27px;font-weight:800;color:white;letter-spacing:-1.5px}
.logo span{color:var(--teal)}
.navlinks{display:flex;align-items:center;gap:30px}
.navlinks a{color:#d4e2e5;font-size:13px;font-weight:600}
.navlinks a:hover{color:var(--teal)}
.menu-btn{display:none;background:none;border:0;color:white;font-size:27px}
/* HERO */
.hero{
 background:var(--navy);color:white;
 padding:80px 0 95px;overflow:hidden;position:relative;
}
.hero:after{
 content:"";position:absolute;width:600px;height:600px;
 background:#45d6c215;filter:blur(80px);border-radius:50%;
 top:-180px;right:-150px;pointer-events:none;
}
.hero-grid{
 display:grid;grid-template-columns:1fr 1fr;
 gap:55px;align-items:center;position:relative;z-index:2;
}
.hero .eyebrow{color:var(--teal)}
.hero h1 span{color:var(--teal)}
.hero-copy>p{color:#B4C7CC;font-size:17px;max-width:530px;margin:25px 0 30px}
.hero-buttons{display:flex;gap:12px;flex-wrap:wrap}
.hero-note{margin-top:30px;color:#9BAEB5;font-size:12px}
.hero-visual{position:relative;min-height:490px;display:flex;align-items:center;justify-content:center}
.water-orb{
 width:390px;height:390px;border-radius:50%;
 background:radial-gradient(circle at 35% 25%,#9cfff0,#2d9c9b 38%,#103e57 72%,#071c27);
 box-shadow:0 0 100px #45d6c244,inset -25px -30px 80px #071c27aa;
 position:absolute;opacity:.9;
}
.water-orb:before{
 content:"";position:absolute;inset:25px;border-radius:50%;
 border:1px solid #ffffff40;
}
.device{
 width:185px;height:275px;z-index:2;
 background:linear-gradient(145deg,#faffff,#d4e9e7);
 border-radius:27px;box-shadow:0 30px 80px #0008;
 padding:22px;color:var(--navy);text-align:center;
 position:relative;
}
.device-top{font-size:10px;font-weight:800;letter-spacing:2px}
.device-circle{
 width:90px;height:90px;border-radius:50%;
 border:7px solid var(--teal);margin:27px auto 15px;
 display:grid;place-items:center;font-size:19px;font-weight:800;
}
.device small{font-size:10px;color:#61767b}
.float-card{
 position:absolute;z-index:3;background:#ffffffed;
 padding:16px 19px;border-radius:13px;
 box-shadow:0 15px 40px #0003;color:var(--navy);
}
.float-card strong{font-size:18px;display:block}
.float-card small{font-size:10px;color:#6b8087}
.float-one{top:65px;right:0}
.float-two{bottom:70px;left:0}
/* TRUST STRIP */
.trust{padding:28px 0;background:var(--light);border-bottom:1px solid var(--line)}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.trust-item{display:flex;align-items:center;gap:12px;justify-content:center}
.trust-icon{font-size:22px;color:#159c8c}
.trust-item strong{font-size:12px;display:block}
.trust-item small{font-size:10px;color:var(--muted)}
/* DASHBOARD */
.dashboard-section{background:white}
.dashboard{
 background:var(--navy);padding:35px;border-radius:22px;
 color:white;box-shadow:0 25px 65px #102e3b18;
}
.dash-top{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:32px}
.dash-top h3{font-size:20px}
.live{color:var(--teal);font-size:11px;font-weight:800}
.dash-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:15px}
.dash-card{
 background:#ffffff0d;border:1px solid #ffffff17;
 border-radius:14px;padding:22px;
}
.dash-card small{color:#9DB4BC;font-size:11px}
.dash-card strong{display:block;font-size:27px;margin:12px 0 5px}
.dash-card p{font-size:11px;color:#9DB4BC}
.dash-card.highlight{background:#123C45}
.dash-card.highlight strong{color:var(--teal)}
.dash-bottom{
 margin-top:18px;padding:18px;background:#ffffff0b;
 border-radius:12px;color:#B6C9CD;font-size:12px;
}
.dash-footnote{margin-top:14px;font-size:11px}
/* CONTAMINANTS */
.contaminants{background:var(--light)}
.contam-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:17px}
.contam-card{
 padding:25px;background:white;border:1px solid var(--line);
 border-radius:15px;transition:.3s;
}
.contam-card:hover{transform:translateY(-7px);box-shadow:0 15px 35px #102e3b10}
.contam-icon{
 width:45px;height:45px;border-radius:12px;
 display:grid;place-items:center;background:var(--mint);
 font-size:21px;margin-bottom:25px;
}
.contam-card h3{font-size:19px}
.contam-card p{font-size:13px;margin-top:12px}
.contam-card a{display:inline-block;margin-top:18px;font-size:12px;font-weight:800;color:#138e83}
/* COMPARISON */
.comparison{background:white}
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.compare-card{padding:35px;border-radius:18px;border:1px solid var(--line)}
.compare-card.gauge{background:var(--navy);color:white;border-color:var(--navy)}
.compare-card h3{margin-bottom:25px}
.compare-row{
 display:flex;justify-content:space-between;gap:15px;
 padding:16px 0;border-bottom:1px solid #dce8e5;
 font-size:13px;
}
.gauge .compare-row{border-color:#ffffff20}
.compare-row span:last-child{font-weight:800}
.good{color:#159c8c}
.gauge .good{color:var(--teal)}
/* STORIES */
.stories{background:var(--light)}
.story-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:18px}
.story-card{
 background:white;padding:30px;border-radius:16px;
 border:1px solid var(--line);
}
.story-card.featured{background:var(--navy);color:white}
.story-card p{font-size:14px;margin:25px 0}
.story-card.featured p{color:#C4D4D7}
.person{font-size:12px;font-weight:800}
.person small{display:block;font-weight:400;color:var(--muted)}
.featured .person small{color:#A5BEC2}
/* TIMELINE */
.timeline{background:var(--navy);color:white}
.timeline .eyebrow{color:var(--teal)}
.timeline .section-head p{color:#AFC3C9}
.timeline-tabs{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:30px}
.timeline-tabs button{
 border:1px solid #ffffff40;background:transparent;color:white;
 padding:12px 21px;border-radius:40px;font-weight:700;font-size:12px;
}
.timeline-tabs button.active{background:var(--teal);color:var(--navy);border-color:var(--teal)}
.timeline-content{
 display:grid;grid-template-columns:1fr 1fr;gap:35px;
 background:#ffffff0a;border:1px solid #ffffff1b;
 border-radius:20px;padding:35px;
}
.timeline-content h3{font-size:27px;margin-bottom:17px}
.timeline-content p{color:#B5C8CE}
.timeline-visual{
 border-radius:14px;background:linear-gradient(135deg,#14414c,#0b2635);
 min-height:230px;display:grid;place-items:center;
 text-align:center;padding:25px;color:var(--teal);
 font-size:42px;
}
.timeline-visual small{display:block;font-size:12px;color:#c5d6d9}
/* TECHNOLOGY */
.technology{background:white}
.tech-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.tech-visual{
 min-height:440px;border-radius:22px;
 background:linear-gradient(145deg,#d9f5ed,#a6dcd5);
 display:grid;place-items:center;position:relative;overflow:hidden;
}
.tech-visual:before,.tech-visual:after{
 content:"";position:absolute;border:1px solid #ffffffa0;
 width:280px;height:280px;border-radius:50%;
}
.tech-visual:after{width:380px;height:380px}
.tech-graphic{font-size:105px;z-index:1}
.tech-list{display:grid;gap:22px;margin-top:28px}
.tech-item{display:flex;gap:16px}
.tech-item span{
 min-width:42px;height:42px;border-radius:12px;
 display:grid;place-items:center;background:var(--mint);
 color:#159c8c;font-weight:800;
}
.tech-item h3{font-size:17px;margin-bottom:7px}
.tech-item p{font-size:13px}
/* MINERALS */
.minerals{background:var(--light)}
.mineral-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.mineral-visual{
 background:var(--navy);color:white;padding:45px;
 border-radius:20px;min-height:330px;
 display:flex;align-items:center;justify-content:center;gap:25px;
}
.mineral-circle{
 width:125px;height:125px;border-radius:50%;
 border:2px solid var(--teal);display:grid;place-items:center;
 text-align:center;
}
.mineral-circle strong{font-size:25px;display:block}
.mineral-circle small{font-size:10px;color:#B4C7CC}
.mineral-copy h3{margin:25px 0 8px}
.mineral-copy p{font-size:14px}
/* GUARANTEE */
.guarantee{background:white}
.guarantee-box{
 background:var(--mint);border-radius:20px;
 padding:55px;display:grid;grid-template-columns:1fr 1fr;
 align-items:center;gap:35px;
}
.guarantee-list{display:grid;gap:15px}
.guarantee-list div{font-size:14px;font-weight:700}
.guarantee-list span{color:#149c8d;margin-right:10px}
/* FAQ */
.faq{background:var(--light)}
.faq-list{max-width:850px;margin:auto}
details{padding:22px 0;border-bottom:1px solid #dce6e3}
summary{cursor:pointer;font-size:16px;font-weight:800;list-style:none}
summary:after{content:"+";float:right;color:#159c8c;font-size:22px}
details[open] summary:after{content:"−"}
details p{margin-top:15px;font-size:14px}
/* CTA */
.final-cta{background:var(--navy);color:white;text-align:center}
.final-cta h2{max-width:750px;margin:auto}
.final-cta p{max-width:600px;margin:20px auto 28px;color:#B6C8CE}
/* FOOTER */
footer{background:#05151e;color:white;padding:75px 0 25px}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:40px}
footer h3{font-size:16px;margin-bottom:20px}
footer p,footer a{color:#9EB2B9;font-size:13px}
footer a{display:block;margin:12px 0}
footer a:hover{color:var(--teal)}
.footer-logo{font-size:30px;font-weight:800;margin-bottom:15px}
.footer-bottom{
 margin-top:55px;padding-top:23px;border-top:1px solid #ffffff20;
 display:flex;justify-content:space-between;gap:20px;
 font-size:11px;color:#8da3aa;
}
/* RESPONSIVE */
@media(max-width:900px){
 .hero-grid,.tech-grid,.mineral-grid{grid-template-columns:1fr}
 .hero-visual{min-height:410px}
 .contam-grid{grid-template-columns:1fr 1fr}
 .dash-grid{grid-template-columns:1fr 1fr}
 .story-grid{grid-template-columns:1fr 1fr}
 .footer-grid{grid-template-columns:1fr 1fr}
 .trust-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:650px){
 section{padding:70px 0}
 .nav{min-height:70px}
 .menu-btn{display:block}
 .navlinks{
 display:none;position:absolute;top:70px;left:0;width:100%;
 background:var(--navy);padding:25px;
 flex-direction:column;align-items:flex-start;
 }
 .navlinks.open{display:flex}
 .nav>.btn{display:none}
 .hero{padding:65px 0}
 .hero-visual{min-height:340px}
 .water-orb{width:275px;height:275px}
 .device{transform:scale(.8)}
 .float-card{padding:11px}
 .float-one{right:-5px}
 .float-two{left:-5px}
 .trust-grid,.contam-grid,.dash-grid,.compare-grid,
 .story-grid,.timeline-content,.footer-grid,.guarantee-box{
 grid-template-columns:1fr
 }
 .dashboard{padding:20px}
 .dash-top{align-items:flex-start;flex-direction:column}
 .compare-card{padding:25px}
 .timeline-content{padding:20px}
 .mineral-visual{padding:25px;gap:12px}
 .mineral-circle{width:100px;height:100px}
 .guarantee-box{padding:30px}
 .footer-bottom{flex-direction:column}
}
</style>
</head>

<body>

<!-- HEADER -->
<header>
<div class="container nav">
<a href="#" class="logo">gauge<span>.</span></a>
<button class="menu-btn" id="menuBtn" aria-label="Open menu">☰</button>
<nav class="navlinks" id="navlinks">
<a href="#technology">Technology</a>
<a href="#water-report">Water Quality</a>
<a href="#difference">Why Gauge</a>
<a href="#minerals">Minerals</a>
<a href="https://www.gauge.ro/" >Home</a>
</nav>
<a href="https://www.gauge.ro/" class="btn">Explore Gauge ↗</a>
</div>
</header>

<!-- HERO -->
<section class="hero">
<div class="container hero-grid">
<div class="hero-copy">
<div class="eyebrow">The future of water protection</div>
<h1>Your water changes. <span>Gauge knows.</span></h1>
<p>
Purifying water is only the beginning. Gauge combines smart
water monitoring, intelligent filter insights and mineral
restoration to help you understand what flows into your home.
</p>
<div class="hero-buttons">
<a href="#technology" class="btn">Discover Gauge ↗</a>
<a href="#water-report" class="btn btn-outline">Understand Your Water</a>
</div>
<div class="hero-note">
Smart monitoring · Water purification · Mineral restoration
</div>
</div>

<div class="hero-visual">
<div class="water-orb"></div>
<div class="device">
<div class="device-top">GAUGE MONITOR</div>
<div class="device-circle">LIVE</div>
<strong>Water intelligence</strong>
<small>Smart monitoring concept</small>
</div>
<div class="float-card float-one">
<small>SMART MONITORING</small>
<strong>24/7</strong>
<small>Continuous insights</small>
</div>
<div class="float-card float-two">
<small>FILTER STATUS</small>
<strong>Smart alerts</strong>
<small>Stay informed</small>
</div>
</div>
</div>
</section>

<!-- TRUST STRIP -->
<div class="trust">
<div class="container trust-grid">
<div class="trust-item"><span class="trust-icon">◉</span><div><strong>Smart Sensors</strong><small>Continuous monitoring</small></div></div>
<div class="trust-item"><span class="trust-icon">⌁</span><div><strong>Filter Insights</strong><small>Performance visibility</small></div></div>
<div class="trust-item"><span class="trust-icon">◇</span><div><strong>Mineral Restoration</strong><small>Beyond purification</small></div></div>
<div class="trust-item"><span class="trust-icon">⌖</span><div><strong>Phone Connectivity</strong><small>Information at your fingertips</small></div></div>
</div>
</div>

<!-- WATER REPORT -->
<section class="dashboard-section" id="water-report">
<div class="container">
<div class="section-head">
<div class="eyebrow">Know what flows in</div>
<h2>Your water deserves more than a guess.</h2>
<p>
Water quality is not always visible. Gauge is designed to give
you greater visibility into water quality and purifier performance
through smart monitoring and accessible insights.
</p>
</div>

<div class="dashboard">
<div class="dash-top">
<h3>Your Water Intelligence Dashboard</h3>
<span class="live">● MONITORING EXPERIENCE</span>
</div>
<div class="dash-grid">
<div class="dash-card highlight">
<small>Water quality insights</small>
<strong>Real-time</strong>
<p>Designed for ongoing monitoring</p>
</div>
<div class="dash-card">
<small>Filter performance</small>
<strong>Track</strong>
<p>View filter status and service needs</p>
</div>
<div class="dash-card">
<small>System alerts</small>
<strong>Smart</strong>
<p>Stay informed about changes</p>
</div>
</div>
<div class="dash-bottom">
Gauge connects water purification with monitoring, helping
you understand changes rather than relying only on a fixed service schedule.
</div>
</div>
<p class="dash-footnote">
Illustrative interface concept, not a live reading or actual water-quality result.
Actual dashboard data and sensor capabilities should be confirmed against the product.
</p>
</div>
</section>

<!-- CONTAMINANTS -->
<section class="contaminants">
<div class="container">
<div class="section-head center">
<div class="eyebrow">Look beyond appearance</div>
<h2>Clear water doesn't always mean clean water.</h2>
<p>
Some water-quality concerns cannot be identified by sight,
smell or taste alone. Understanding the possible contaminants
is an important first step.
</p>
</div>
<div class="contam-grid">
<div class="contam-card">
<div class="contam-icon">◈</div>
<h3>E. coli</h3>
<p>Bacteria that can indicate faecal contamination and potential microbial risks.</p>
<a href="#faq">Understand more ↗</a>
</div>
<div class="contam-card">
<div class="contam-icon">⬡</div>
<h3>Lead</h3>
<p>A heavy metal that may enter drinking water through plumbing and corroded pipes.</p>
<a href="#faq">Understand more ↗</a>
</div>
<div class="contam-card">
<div class="contam-icon">◉</div>
<h3>Mercury</h3>
<p>A naturally occurring element that can also enter water through pollution.</p>
<a href="#faq">Understand more ↗</a>
</div>
<div class="contam-card">
<div class="contam-icon">⌬</div>
<h3>PFAS</h3>
<p>A group of persistent chemicals often referred to as forever chemicals.</p>
<a href="#faq">Understand more ↗</a>
</div>
</div>
</div>
</section>

<!-- COMPARISON -->
<section class="comparison" id="difference">
<div class="container">
<div class="section-head center">
<div class="eyebrow">The Gauge difference</div>
<h2>Don't just purify. Stay informed.</h2>
<p>
Traditional purification focuses on treating water.
Gauge brings purification together with monitoring and
greater visibility into system performance.
</p>
</div>
<div class="compare-grid">
<div class="compare-card">
<h3>Traditional RO</h3>
<div class="compare-row"><span>Water purification</span><span>✓</span></div>
<div class="compare-row"><span>Ongoing quality visibility</span><span>Limited</span></div>
<div class="compare-row"><span>Smart sensor insights</span><span>Varies</span></div>
<div class="compare-row"><span>Filter performance alerts</span><span>Varies</span></div>
<div class="compare-row"><span>Mineral restoration</span><span>Varies</span></div>
</div>
<div class="compare-card gauge">
<h3>Gauge Smart Purification</h3>
<div class="compare-row"><span>Water purification</span><span class="good">✓</span></div>
<div class="compare-row"><span>Water-quality insights</span><span class="good">✓</span></div>
<div class="compare-row"><span>Smart sensor monitoring</span><span class="good">✓</span></div>
<div class="compare-row"><span>Filter performance insights</span><span class="good">✓</span></div>
<div class="compare-row"><span>Mineral restoration</span><span class="good">✓</span></div>
</div>
</div>
</div>
</section>

<!-- CUSTOMER STORIES -->
<section class="stories">
<div class="container">
<div class="section-head">
<div class="eyebrow">Real people. Real concerns.</div>
<h2>Water quality is a family conversation.</h2>
<p>
Water concerns are personal. We believe people deserve
clear information and solutions designed around their everyday needs.
</p>
</div>
<div class="story-grid">
<div class="story-card featured">
<div class="eyebrow">Customer perspective</div>
<h3>Confidence begins with understanding.</h3>
<p>
Explore how families think about their water quality,
their purification systems and the importance of staying informed.
</p>
<div class="per

Run this HTML snippet

Open this snippet on SnIPPETsX to run the HTML code in your browser, edit it together with others in real time, or fork it into your own copy. No install or account is needed.