Pages Medium
Vet — Mobile Vet Landing
A cozy mobile and house-call veterinary landing page promoting low-stress at-home care, with a hero, service-area note, how-it-works steps, at-home services list, pricing note, client testimonials, a book-a-visit form and footer in warm teal and coral tones.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
--teal: #179c8e;
--teal-d: #0f7f73;
--teal-50: #e6f5f2;
--coral: #ff8a5c;
--coral-d: #f4713f;
--ink: #173a36;
--muted: #6b827e;
--bg: #f2f8f6;
--white: #ffffff;
--line: #d9e9e5;
--shadow: 0 10px 30px -12px rgba(15, 127, 115, 0.28);
--shadow-sm: 0 4px 14px -8px rgba(15, 127, 115, 0.35);
--r: 22px;
--r-lg: 30px;
--r-pill: 999px;
--font: 'Inter', system-ui, -apple-system, sans-serif;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font);
color: var(--ink);
background: var(--bg);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
img {
max-width: 100%;
display: block;
}
a {
color: inherit;
text-decoration: none;
}
h1,
h2,
h3,
h4 {
line-height: 1.15;
letter-spacing: -0.01em;
}
:focus-visible {
outline: 3px solid var(--coral);
outline-offset: 2px;
border-radius: 8px;
}
/* ---------- buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
font: inherit;
font-weight: 700;
border: none;
cursor: pointer;
border-radius: var(--r-pill);
padding: 0.85rem 1.5rem;
transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
white-space: nowrap;
}
.btn:active {
transform: translateY(1px) scale(0.99);
}
.btn-teal {
background: var(--teal);
color: var(--white);
}
.btn-teal:hover {
background: var(--teal-d);
box-shadow: var(--shadow-sm);
}
.btn-coral {
background: var(--coral);
color: #5a2310;
}
.btn-coral:hover {
background: var(--coral-d);
color: var(--white);
box-shadow: 0 8px 22px -10px rgba(244, 113, 63, 0.7);
}
.btn-sm {
padding: 0.6rem 1.1rem;
font-size: 0.92rem;
}
.btn-block {
width: 100%;
}
/* ---------- header ---------- */
.site-header {
position: sticky;
top: 0;
z-index: 40;
display: flex;
align-items: center;
gap: 1rem;
padding: 0.75rem clamp(1rem, 4vw, 2.5rem);
background: rgba(242, 248, 246, 0.85);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--line);
}
.brand {
display: inline-flex;
align-items: center;
gap: 0.55rem;
font-weight: 800;
}
.brand-mark {
display: grid;
place-items: center;
width: 38px;
height: 38px;
background: var(--teal-50);
border-radius: 14px;
font-size: 1.2rem;
}
.brand-name {
font-size: 1.1rem;
}
.brand-name small {
display: block;
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
}
.top-nav {
display: flex;
gap: 1.4rem;
margin-left: auto;
font-weight: 600;
font-size: 0.95rem;
}
.top-nav a {
color: var(--muted);
transition: color 0.15s ease;
}
.top-nav a:hover {
color: var(--teal-d);
}
.site-header .btn-coral {
margin-left: 0.4rem;
}
/* ---------- hero ---------- */
.hero {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: clamp(1.5rem, 4vw, 3rem);
align-items: center;
max-width: 1120px;
margin: 0 auto;
padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1rem, 4vw, 2.5rem);
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 0.45rem;
background: var(--teal-50);
color: var(--teal-d);
font-weight: 700;
font-size: 0.85rem;
padding: 0.4rem 0.9rem;
border-radius: var(--r-pill);
}
.hero h1 {
font-size: clamp(2rem, 5vw, 3.1rem);
font-weight: 800;
margin: 1rem 0 0.85rem;
}
.lede {
font-size: clamp(1rem, 2vw, 1.15rem);
color: var(--muted);
max-width: 46ch;
}
.area-check {
margin: 1.6rem 0 1.2rem;
max-width: 420px;
}
.area-check label {
display: block;
font-weight: 700;
font-size: 0.85rem;
margin-bottom: 0.45rem;
}
.area-row {
display: flex;
gap: 0.5rem;
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--r-pill);
padding: 0.35rem;
box-shadow: var(--shadow-sm);
}
.area-row input {
flex: 1;
border: none;
background: transparent;
font: inherit;
padding: 0.55rem 0.9rem;
color: var(--ink);
}
.area-row input:focus {
outline: none;
}
.area-msg {
min-height: 1.2rem;
margin-top: 0.55rem;
font-size: 0.9rem;
font-weight: 600;
}
.area-msg.ok {
color: var(--teal-d);
}
.area-msg.no {
color: var(--coral-d);
}
.hero-trust {
display: flex;
flex-wrap: wrap;
gap: 1.3rem;
list-style: none;
margin-top: 1.2rem;
color: var(--muted);
font-size: 0.9rem;
}
.hero-trust strong {
color: var(--ink);
}
.hero-card {
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 1.5rem;
box-shadow: var(--shadow);
}
.hero-card-head {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-weight: 700;
font-size: 0.85rem;
color: var(--teal-d);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.pulse {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--teal);
box-shadow: 0 0 0 0 rgba(23, 156, 142, 0.6);
animation: pulse 1.8s infinite;
}
@keyframes pulse {
70% {
box-shadow: 0 0 0 10px rgba(23, 156, 142, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(23, 156, 142, 0);
}
}
.hero-card-day {
font-size: 1.35rem;
font-weight: 800;
margin: 0.7rem 0 0.15rem;
}
.hero-card-slot {
color: var(--muted);
font-size: 0.95rem;
}
.hero-card-vet {
display: flex;
align-items: center;
gap: 0.7rem;
margin: 1.1rem 0;
padding-top: 1.1rem;
border-top: 1px dashed var(--line);
}
.avatar {
display: grid;
place-items: center;
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--teal);
color: var(--white);
font-weight: 700;
font-size: 0.85rem;
flex-shrink: 0;
}
.avatar-coral {
background: var(--coral);
color: #5a2310;
}
.hero-card-vet strong {
display: block;
}
.hero-card-vet span span,
.hero-card-vet div span {
color: var(--muted);
font-size: 0.85rem;
}
/* ---------- generic section ---------- */
.section {
max-width: 1120px;
margin: 0 auto;
padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1rem, 4vw, 2.5rem);
}
.section-tint {
max-width: none;
background: var(--teal-50);
}
.section-tint > * {
max-width: 1120px;
margin-left: auto;
margin-right: auto;
}
.section-head {
text-align: center;
max-width: 620px;
margin: 0 auto 2.2rem;
}
.section-head-left {
text-align: left;
margin-left: 0;
}
.kicker {
display: inline-block;
font-weight: 800;
font-size: 0.78rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--coral-d);
margin-bottom: 0.6rem;
}
.section-head h2 {
font-size: clamp(1.6rem, 3.5vw, 2.3rem);
font-weight: 800;
}
.section-sub {
color: var(--muted);
margin-top: 0.7rem;
}
/* ---------- steps ---------- */
.steps {
list-style: none;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.1rem;
counter-reset: step;
}
.step {
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--r);
padding: 1.5rem 1.3rem;
box-shadow: var(--shadow-sm);
}
.step-num {
display: grid;
place-items: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--coral);
color: #5a2310;
font-weight: 800;
margin-bottom: 0.9rem;
}
.step h3 {
font-size: 1.05rem;
margin-bottom: 0.35rem;
}
.step p {
color: var(--muted);
font-size: 0.92rem;
}
/* ---------- services ---------- */
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.1rem;
}
.service {
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--r);
padding: 1.6rem 1.4rem;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.service:hover {
transform: translateY(-4px);
box-shadow: var(--shadow);
}
.service-icon {
display: grid;
place-items: center;
width: 52px;
height: 52px;
border-radius: 16px;
background: var(--teal-50);
font-size: 1.5rem;
margin-bottom: 1rem;
}
.service h3 {
font-size: 1.12rem;
margin-bottom: 0.35rem;
}
.service p {
color: var(--muted);
font-size: 0.93rem;
}
/* ---------- pricing ---------- */
.pricing-card {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: clamp(1.5rem, 4vw, 3rem);
align-items: center;
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: clamp(1.6rem, 4vw, 2.8rem);
box-shadow: var(--shadow);
}
.pricing-main h2 {
font-size: clamp(1.5rem, 3vw, 2.1rem);
font-weight: 800;
margin: 0.4rem 0 0.7rem;
}
.pricing-main p {
color: var(--muted);
}
.pricing-list {
list-style: none;
margin-top: 1.1rem;
display: grid;
gap: 0.55rem;
}
.pricing-list li {
display: flex;
align-items: center;
gap: 0.6rem;
font-weight: 600;
font-size: 0.95rem;
}
.pricing-list span {
display: grid;
place-items: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--teal-50);
color: var(--teal-d);
font-size: 0.8rem;
flex-shrink: 0;
}
.pricing-figure {
text-align: center;
background: var(--teal-50);
border-radius: var(--r);
padding: 1.8rem 1.4rem;
}
.pricing-from {
display: block;
color: var(--muted);
font-weight: 600;
font-size: 0.85rem;
}
.pricing-amount {
display: block;
font-size: 3rem;
font-weight: 800;
color: var(--teal-d);
line-height: 1;
margin: 0.2rem 0;
}
.pricing-note {
display: block;
color: var(--muted);
font-size: 0.85rem;
margin-bottom: 1.2rem;
}
/* ---------- reviews ---------- */
.reviews-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.1rem;
}
.review {
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--r);
padding: 1.6rem 1.4rem;
box-shadow: var(--shadow-sm);
}
.stars {
color: var(--coral-d);
letter-spacing: 2px;
margin-bottom: 0.7rem;
}
.review blockquote {
font-size: 0.98rem;
}
.review figcaption {
display: flex;
align-items: center;
gap: 0.7rem;
margin-top: 1.2rem;
}
.review figcaption strong {
display: block;
}
.review figcaption small {
color: var(--muted);
}
/* ---------- book form ---------- */
.book-wrap {
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: clamp(1.6rem, 4vw, 2.8rem);
box-shadow: var(--shadow);
}
.book-form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem 1.2rem;
margin-top: 1.5rem;
}
.field {
display: flex;
flex-direction: column;
}
.field-full {
grid-column: 1 / -1;
}
.book-form .btn-block {
grid-column: 1 / -1;
margin-top: 0.3rem;
}
.field label {
font-weight: 700;
font-size: 0.88rem;
margin-bottom: 0.4rem;
}
.opt {
color: var(--muted);
font-weight: 500;
}
.field input,
.field select,
.field textarea {
font: inherit;
color: var(--ink);
background: var(--bg);
border: 1px solid var(--line);
border-radius: 14px;
padding: 0.75rem 0.9rem;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field textarea {
resize: vertical;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
outline: none;
border-color: var(--teal);
box-shadow: 0 0 0 3px rgba(23, 156, 142, 0.18);
}
.field.invalid input,
.field.invalid select {
border-color: var(--coral-d);
}
.error {
color: var(--coral-d);
font-size: 0.8rem;
font-weight: 600;
min-height: 1rem;
margin-top: 0.3rem;
}
.form-status {
grid-column: 1 / -1;
min-height: 1.2rem;
font-weight: 700;
color: var(--teal-d);
}
/* ---------- footer ---------- */
.site-footer {
background: var(--ink);
color: #cfe3df;
padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1rem, 4vw, 2.5rem) 1.6rem;
margin-bottom: 70px;
}
.foot-cols {
max-width: 1120px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.5fr 1fr 1fr;
gap: 2rem;
}
.brand-foot .brand-mark {
background: rgba(255, 255, 255, 0.1);
}
.brand-foot .brand-name {
color: var(--white);
}
.foot-tag {
margin-top: 0.8rem;
max-width: 30ch;
font-size: 0.92rem;
}
.site-footer h4 {
color: var(--white);
margin-bottom: 0.8rem;
font-size: 0.95rem;
}
.site-footer nav a,
.site-footer p {
display: block;
color: #cfe3df;
font-size: 0.92rem;
margin-bottom: 0.45rem;
transition: color 0.15s ease;
}
.site-footer nav a:hover {
color: var(--coral);
}
.foot-fine {
max-width: 1120px;
margin: 2rem auto 0;
padding-top: 1.2rem;
border-top: 1px solid rgba(255, 255, 255, 0.12);
font-size: 0.82rem;
color: #9fbab5;
}
/* ---------- sticky CTA ---------- */
.sticky-cta {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 50;
display: none;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.7rem 1rem;
background: var(--white);
border-top: 1px solid var(--line);
box-shadow: 0 -8px 24px -14px rgba(15, 127, 115, 0.4);
}
.sticky-text {
font-weight: 600;
font-size: 0.95rem;
color: var(--muted);
}
.sticky-text strong {
color: var(--ink);
}
/* ---------- reveal animation ---------- */
.reveal {
opacity: 0;
transform: translateY(18px);
transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal.in {
opacity: 1;
transform: none;
}
/* ---------- responsive ---------- */
@media (max-width: 900px) {
.hero {
grid-template-columns: 1fr;
}
.steps,
.services-grid,
.reviews-grid {
grid-template-columns: repeat(2, 1fr);
}
.pricing-card {
grid-template-columns: 1fr;
}
}
@media (max-width: 520px) {
.top-nav {
display: none;
}
.site-header .btn-coral {
margin-left: auto;
}
.hero h1 {
font-size: 2rem;
}
.steps,
.services-grid,
.reviews-grid,
.book-form,
.foot-cols {
grid-template-columns: 1fr;
}
.hero-trust {
gap: 0.8rem 1.3rem;
}
.sticky-cta {
display: flex;
}
.section {
padding-left: 1.1rem;
padding-right: 1.1rem;
}
}
@media (prefers-reduced-motion: reduce) {
.reveal {
opacity: 1;
transform: none;
transition: none;
}
.pulse {
animation: none;
}
html {
scroll-behavior: auto;
}
}(function () {
'use strict';
/* ---------- Service-area ZIP check ---------- */
// Demo coverage: a handful of "in-area" prefixes. Replace with your real lookup.
var COVERED_PREFIXES = ['100', '112', '900', '941', '787', '606'];
var areaForm = document.getElementById('area-form');
var zipInput = document.getElementById('zip');
var areaMsg = document.getElementById('area-msg');
if (areaForm && zipInput && areaMsg) {
areaForm.addEventListener('submit', function (e) {
e.preventDefault();
var zip = (zipInput.value || '').trim();
areaMsg.classList.remove('ok', 'no');
if (!/^\d{5}$/.test(zip)) {
areaMsg.textContent = 'Please enter a 5-digit ZIP code.';
areaMsg.classList.add('no');
zipInput.focus();
return;
}
var covered = COVERED_PREFIXES.indexOf(zip.slice(0, 3)) !== -1;
if (covered) {
areaMsg.textContent = '🎉 Great news — we serve ' + zip + '! Book below.';
areaMsg.classList.add('ok');
} else {
areaMsg.textContent =
"We're not in " + zip + " yet — leave your email below and we'll notify you.";
areaMsg.classList.add('no');
}
});
}
/* ---------- Booking form validation ---------- */
var bookForm = document.getElementById('book-form');
var formStatus = document.getElementById('form-status');
function setError(name, message) {
var span = document.querySelector('.error[data-for="' + name + '"]');
var field = document.getElementById(name);
var wrap = field ? field.closest('.field') : null;
if (span) span.textContent = message || '';
if (wrap) wrap.classList.toggle('invalid', !!message);
}
function isEmail(v) {
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v);
}
if (bookForm) {
bookForm.addEventListener('submit', function (e) {
e.preventDefault();
var ok = true;
var data = {
name: bookForm.name.value.trim(),
email: bookForm.email.value.trim(),
pet: bookForm.pet.value.trim(),
};
if (!data.name) {
setError('name', 'Please tell us your name.');
ok = false;
} else setError('name', '');
if (!data.email) {
setError('email', 'Email is required.');
ok = false;
} else if (!isEmail(data.email)) {
setError('email', 'That email looks off.');
ok = false;
} else setError('email', '');
if (!data.pet) {
setError('pet', "Your pet's name and species, please.");
ok = false;
} else setError('pet', '');
if (!ok) {
formStatus.textContent = '';
var firstInvalid = bookForm.querySelector('.field.invalid input');
if (firstInvalid) firstInvalid.focus();
return;
}
var btn = bookForm.querySelector('button[type="submit"]');
if (btn) {
btn.disabled = true;
btn.textContent = 'Sending…';
}
// Simulated async submit
setTimeout(function () {
bookForm.reset();
if (btn) {
btn.disabled = false;
btn.textContent = 'Request my visit';
}
formStatus.textContent =
'✅ Thanks, ' + data.name + "! We'll confirm your visit window within one business hour.";
}, 700);
});
// Clear an error as the user fixes it
['name', 'email', 'pet'].forEach(function (id) {
var el = document.getElementById(id);
if (el) el.addEventListener('input', function () { setError(id, ''); });
});
}
/* ---------- Reveal on scroll ---------- */
var reveals = document.querySelectorAll('.reveal');
if ('IntersectionObserver' in window && reveals.length) {
var io = new IntersectionObserver(
function (entries) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
entry.target.classList.add('in');
io.unobserve(entry.target);
}
});
},
{ threshold: 0.12, rootMargin: '0px 0px -40px 0px' }
);
reveals.forEach(function (el) { io.observe(el); });
} else {
reveals.forEach(function (el) { el.classList.add('in'); });
}
})();<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Pawhouse — Mobile Vet Visits at Home</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header class="site-header">
<a class="brand" href="#top">
<span class="brand-mark" aria-hidden="true">🐾</span>
<span class="brand-name">Pawhouse <small>mobile vet</small></span>
</a>
<nav class="top-nav" aria-label="Primary">
<a href="#how">How it works</a>
<a href="#services">Services</a>
<a href="#pricing">Pricing</a>
<a href="#reviews">Reviews</a>
</nav>
<a class="btn btn-coral btn-sm" href="#book">Book a visit</a>
</header>
<main id="top">
<!-- HERO -->
<section class="hero">
<div class="hero-inner">
<span class="eyebrow"><span aria-hidden="true">💚</span> Low-stress care, at home</span>
<h1>The vet comes to you — calm care on the couch, not the clinic.</h1>
<p class="lede">
Skip the carrier, the car ride and the crowded waiting room. Our licensed mobile
veterinarians treat your dog or cat in the place they feel safest: home.
</p>
<form class="area-check" id="area-form" novalidate>
<label for="zip">Check your area</label>
<div class="area-row">
<input
id="zip"
name="zip"
inputmode="numeric"
autocomplete="postal-code"
placeholder="Enter ZIP code"
aria-describedby="area-msg"
/>
<button type="submit" class="btn btn-teal">Check</button>
</div>
<p class="area-msg" id="area-msg" role="status" aria-live="polite"></p>
</form>
<ul class="hero-trust">
<li><strong>4.9</strong>★ from 2,300+ visits</li>
<li><strong>Same-week</strong> appointments</li>
<li><strong>Fear-Free</strong> certified vets</li>
</ul>
</div>
<aside class="hero-card" aria-label="Next available visit">
<div class="hero-card-head">
<span class="pulse" aria-hidden="true"></span> Next available
</div>
<p class="hero-card-day">Thursday, June 25</p>
<p class="hero-card-slot">Morning window · 9:00–11:30 AM</p>
<div class="hero-card-vet">
<span class="avatar" aria-hidden="true">DR</span>
<div>
<strong>Dr. Renata Salas</strong>
<span>Mobile veterinarian</span>
</div>
</div>
<a class="btn btn-coral btn-block" href="#book">Reserve this window</a>
</aside>
</section>
<!-- HOW IT WORKS -->
<section id="how" class="section">
<header class="section-head">
<span class="kicker">How it works</span>
<h2>Four easy steps from booking to belly rubs</h2>
</header>
<ol class="steps">
<li class="step reveal">
<span class="step-num">1</span>
<h3>Book online</h3>
<p>Pick a time window and tell us about your pet. Takes about two minutes.</p>
</li>
<li class="step reveal">
<span class="step-num">2</span>
<h3>We come to you</h3>
<p>Your vet arrives in our mobile unit with everything needed for the visit.</p>
</li>
<li class="step reveal">
<span class="step-num">3</span>
<h3>Care at home</h3>
<p>Exams, vaccines and treatments happen in your pet's calm, familiar space.</p>
</li>
<li class="step reveal">
<span class="step-num">4</span>
<h3>Follow-up notes</h3>
<p>Digital records, meds and next steps land in your inbox the same day.</p>
</li>
</ol>
</section>
<!-- SERVICES -->
<section id="services" class="section section-tint">
<header class="section-head">
<span class="kicker">At-home services</span>
<h2>Everyday vet care, brought to your door</h2>
<p class="section-sub">From routine wellness to gentle senior support — most of what a clinic offers, minus the stress.</p>
</header>
<div class="services-grid">
<article class="service reveal">
<span class="service-icon" aria-hidden="true">🩺</span>
<h3>Wellness exams</h3>
<p>Nose-to-tail checkups with plenty of time to ask questions.</p>
</article>
<article class="service reveal">
<span class="service-icon" aria-hidden="true">💉</span>
<h3>Vaccines & titers</h3>
<p>Core and lifestyle vaccines, plus titer testing on request.</p>
</article>
<article class="service reveal">
<span class="service-icon" aria-hidden="true">🦷</span>
<h3>Dental checks</h3>
<p>Oral exams and home dental plans tailored to your pet.</p>
</article>
<article class="service reveal">
<span class="service-icon" aria-hidden="true">🔬</span>
<h3>Lab & bloodwork</h3>
<p>Sample collection at home with results back within 24–48 hours.</p>
</article>
<article class="service reveal">
<span class="service-icon" aria-hidden="true">💊</span>
<h3>Sick visits</h3>
<p>Itchy skin, upset tummies and minor concerns, assessed comfortably.</p>
</article>
<article class="service reveal">
<span class="service-icon" aria-hidden="true">🐾</span>
<h3>Senior support</h3>
<p>Mobility, pain and quality-of-life care for older companions.</p>
</article>
</div>
</section>
<!-- PRICING NOTE -->
<section id="pricing" class="section">
<div class="pricing-card reveal">
<div class="pricing-main">
<span class="kicker">Visit pricing</span>
<h2>Flat, friendly, no surprises</h2>
<p>
One house-call fee covers travel and the exam. Vaccines, labs and meds are added
transparently and you approve everything before we proceed.
</p>
<ul class="pricing-list">
<li><span aria-hidden="true">✓</span> Free ZIP-code coverage check</li>
<li><span aria-hidden="true">✓</span> Up to two pets per visit at no extra exam fee</li>
<li><span aria-hidden="true">✓</span> Itemized estimate before any treatment</li>
</ul>
</div>
<div class="pricing-figure">
<span class="pricing-from">House-call from</span>
<span class="pricing-amount">$89</span>
<span class="pricing-note">+ services as needed</span>
<a class="btn btn-coral btn-block" href="#book">Book a visit</a>
</div>
</div>
</section>
<!-- TESTIMONIALS -->
<section id="reviews" class="section section-tint">
<header class="section-head">
<span class="kicker">Happy households</span>
<h2>Loved by pets and the people who spoil them</h2>
</header>
<div class="reviews-grid">
<figure class="review reveal">
<div class="stars" aria-label="Rated 5 out of 5">★★★★★</div>
<blockquote>Bramble hides under the bed at any clinic. At home he barely noticed his shots — the vet sat on the floor with him the whole time.</blockquote>
<figcaption>
<span class="avatar avatar-coral" aria-hidden="true">MO</span>
<span><strong>Maya Olsen</strong><small>with Bramble, tabby cat</small></span>
</figcaption>
</figure>
<figure class="review reveal">
<div class="stars" aria-label="Rated 5 out of 5">★★★★★</div>
<blockquote>Our senior lab can't manage the car anymore. Pawhouse made his wellness visit calm and dignified. Worth every penny.</blockquote>
<figcaption>
<span class="avatar avatar-coral" aria-hidden="true">DT</span>
<span><strong>Devon Tran</strong><small>with Captain, 13yr labrador</small></span>
</figcaption>
</figure>
<figure class="review reveal">
<div class="stars" aria-label="Rated 5 out of 5">★★★★★</div>
<blockquote>Booked Monday, vet came Wednesday. Honest estimate, no upsell, and same-day notes in my inbox. We're switching for good.</blockquote>
<figcaption>
<span class="avatar avatar-coral" aria-hidden="true">PR</span>
<span><strong>Priya Raman</strong><small>with Mochi & Soba, beagles</small></span>
</figcaption>
</figure>
</div>
</section>
<!-- BOOK -->
<section id="book" class="section">
<div class="book-wrap reveal">
<header class="section-head section-head-left">
<span class="kicker">Book a visit</span>
<h2>Let's bring the vet to your door</h2>
<p class="section-sub">Tell us a little about your pet and we'll confirm your window within one business hour.</p>
</header>
<form class="book-form" id="book-form" novalidate>
<div class="field">
<label for="name">Your name</label>
<input id="name" name="name" autocomplete="name" placeholder="e.g. Alex Rivera" required />
<span class="error" data-for="name"></span>
</div>
<div class="field">
<label for="email">Email</label>
<input id="email" name="email" type="email" autocomplete="email" placeholder="[email protected]" required />
<span class="error" data-for="email"></span>
</div>
<div class="field">
<label for="pet">Pet & species</label>
<input id="pet" name="pet" placeholder="e.g. Mochi, dog" required />
<span class="error" data-for="pet"></span>
</div>
<div class="field">
<label for="reason">Reason for visit</label>
<select id="reason" name="reason">
<option value="wellness">Wellness exam</option>
<option value="vaccines">Vaccines</option>
<option value="sick">Sick visit</option>
<option value="senior">Senior support</option>
<option value="other">Something else</option>
</select>
</div>
<div class="field field-full">
<label for="notes">Anything we should know? <span class="opt">(optional)</span></label>
<textarea id="notes" name="notes" rows="3" placeholder="Nervous around strangers, recent limp, etc."></textarea>
</div>
<button type="submit" class="btn btn-coral btn-block">Request my visit</button>
<p class="form-status" id="form-status" role="status" aria-live="polite"></p>
</form>
</div>
</section>
</main>
<footer class="site-footer">
<div class="foot-cols">
<div>
<a class="brand brand-foot" href="#top">
<span class="brand-mark" aria-hidden="true">🐾</span>
<span class="brand-name">Pawhouse</span>
</a>
<p class="foot-tag">Calm, in-home veterinary care for the pets you love.</p>
</div>
<nav aria-label="Footer">
<h4>Visit</h4>
<a href="#how">How it works</a>
<a href="#services">Services</a>
<a href="#pricing">Pricing</a>
<a href="#book">Book a visit</a>
</nav>
<div>
<h4>Reach us</h4>
<p>Mon–Sat · 8 AM–6 PM</p>
<p>(555) 240-7788</p>
<p>[email protected]</p>
</div>
</div>
<p class="foot-fine">© 2026 Pawhouse Mobile Vet · Illustrative demo UI only.</p>
</footer>
<!-- STICKY MOBILE CTA -->
<div class="sticky-cta" aria-hidden="false">
<span class="sticky-text">House-call from <strong>$89</strong></span>
<a class="btn btn-coral btn-sm" href="#book">Book a visit</a>
</div>
<script src="script.js"></script>
</body>
</html>Mobile Vet Landing
A warm, single-column landing page for a mobile and house-call veterinary service. It leads with a hero that emphasizes calm, low-stress care delivered right at the pet’s door, plus a live service-area check so visitors can confirm coverage by ZIP code before reading further.
From there it walks through a four-step how-it-works flow, a grid of at-home services with friendly paw and heart motifs, a transparent visit-pricing note, real-sounding client testimonials and a book-a-visit form with inline validation and a confirmation message. A sticky bottom call-to-action bar keeps booking one tap away on mobile.
Everything is plain HTML, CSS custom properties and vanilla JavaScript — no frameworks or libraries. The cozy palette pairs teal with warm coral, soft large radii and a gentle, approachable tone.
Illustrative UI only — not for real veterinary use.