Pages Medium
Vet — Exotic Pets Vet Landing
A warm-teal landing page for an exotic-pets veterinary clinic with a playful hero, a species-cared-for grid for birds reptiles small mammals and fish, specialized services, expertise badges, a care-tips teaser, owner testimonials and a booking call to action.
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: #f5703d;
--ink: #173a36;
--muted: #6b827e;
--bg: #f2f8f6;
--white: #ffffff;
--line: #d7e9e4;
--shadow: 0 12px 32px rgba(15, 127, 115, 0.12);
--shadow-sm: 0 4px 14px rgba(15, 127, 115, 0.1);
--r-sm: 14px;
--r-md: 20px;
--r-lg: 28px;
--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.6;
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
:focus-visible {
outline: 3px solid var(--coral);
outline-offset: 2px;
border-radius: 6px;
}
/* ---------- buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font: inherit;
font-weight: 600;
border: 0;
cursor: pointer;
padding: 13px 22px;
border-radius: 999px;
transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn:active { transform: translateY(1px); }
.btn-coral { background: var(--coral); color: #fff; box-shadow: 0 8px 20px rgba(245, 112, 61, 0.32); }
.btn-coral:hover { background: var(--coral-d); transform: translateY(-2px); }
.btn-ghost { background: rgba(255, 255, 255, 0.7); color: var(--teal-d); border: 1.5px solid var(--line); }
.btn-ghost:hover { background: #fff; transform: translateY(-2px); }
.btn-block { width: 100%; }
/* ---------- header ---------- */
.site-head {
position: sticky;
top: 0;
z-index: 20;
display: flex;
align-items: center;
gap: 18px;
padding: 14px clamp(16px, 5vw, 56px);
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: 9px; font-weight: 800; }
.brand-mark {
display: grid;
place-items: center;
width: 38px; height: 38px;
border-radius: 12px;
background: var(--teal-50);
font-size: 1.2rem;
}
.brand-name { font-size: 1.15rem; letter-spacing: -0.02em; }
.nav { display: flex; gap: 22px; margin-left: auto; font-weight: 500; color: var(--muted); }
.nav a { transition: color 0.15s ease; }
.nav a:hover { color: var(--teal-d); }
.nav-cta { margin-left: 8px; }
/* ---------- hero ---------- */
.hero {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: clamp(24px, 5vw, 64px);
align-items: center;
padding: clamp(40px, 7vw, 88px) clamp(16px, 5vw, 56px);
background:
radial-gradient(120% 120% at 100% 0%, rgba(255, 138, 92, 0.16), transparent 55%),
linear-gradient(160deg, var(--teal-50), var(--bg));
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 7px;
font-weight: 600;
font-size: 0.86rem;
color: var(--teal-d);
background: #fff;
padding: 6px 14px;
border-radius: 999px;
box-shadow: var(--shadow-sm);
margin-bottom: 18px;
}
.hero h1 {
font-size: clamp(2.1rem, 5vw, 3.4rem);
line-height: 1.08;
letter-spacing: -0.03em;
margin-bottom: 16px;
}
.lede { font-size: 1.08rem; color: var(--muted); max-width: 46ch; margin-bottom: 26px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
.trust { display: flex; flex-wrap: wrap; gap: 26px; list-style: none; color: var(--muted); font-size: 0.92rem; }
.trust strong { display: block; color: var(--ink); font-size: 1.25rem; }
.hero-card {
background: #fff;
border-radius: var(--r-lg);
padding: 14px;
box-shadow: var(--shadow);
display: grid;
gap: 10px;
}
.hero-card-row {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
border-radius: var(--r-md);
background: var(--bg);
}
.hc-emoji { font-size: 1.6rem; }
.hc-name { font-weight: 700; }
.hc-meta { font-size: 0.82rem; color: var(--muted); }
.hero-card-row .badge { margin-left: auto; }
.badge {
font-size: 0.74rem;
font-weight: 700;
padding: 4px 11px;
border-radius: 999px;
white-space: nowrap;
}
.badge-ok { background: var(--teal-50); color: var(--teal-d); }
.badge-warn { background: #fff0e8; color: var(--coral-d); }
/* ---------- generic section ---------- */
.section { padding: clamp(48px, 7vw, 84px) clamp(16px, 5vw, 56px); }
.section-alt { background: #fff; }
.section-head { max-width: 640px; margin: 0 auto clamp(28px, 4vw, 44px); text-align: center; }
.section-head h2 { font-size: clamp(1.6rem, 3.5vw, 2.3rem); letter-spacing: -0.02em; }
.section-sub { color: var(--muted); margin-top: 8px; }
/* ---------- species grid ---------- */
.species-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 16px;
max-width: 1100px;
margin: 0 auto;
}
.species-card {
font: inherit;
text-align: center;
cursor: pointer;
background: #fff;
border: 2px solid var(--line);
border-radius: var(--r-md);
padding: 22px 16px;
display: grid;
gap: 4px;
justify-items: center;
transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.species-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.species-card.is-active {
border-color: var(--teal);
background: var(--teal-50);
box-shadow: var(--shadow-sm);
}
.sp-emoji { font-size: 2rem; }
.sp-name { font-weight: 700; }
.sp-meta { font-size: 0.8rem; color: var(--muted); }
/* ---------- services ---------- */
.service-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 18px;
max-width: 1100px;
margin: 0 auto;
}
.service-card {
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--r-md);
padding: 24px;
transition: transform 0.18s ease, box-shadow 0.2s ease;
}
.section-alt .service-card { background: var(--bg); }
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.service-card.is-dim { display: none; }
.svc-icon {
display: grid;
place-items: center;
width: 48px; height: 48px;
border-radius: 14px;
background: var(--teal-50);
font-size: 1.4rem;
margin-bottom: 14px;
}
.service-card h3 { font-size: 1.1rem; margin-bottom: 8px; }
.service-card p { color: var(--muted); font-size: 0.94rem; }
.svc-price {
margin-top: 14px;
font-weight: 700;
color: var(--teal-d) !important;
font-size: 0.92rem !important;
}
.no-results { text-align: center; color: var(--muted); margin-top: 24px; }
/* ---------- expertise badges ---------- */
.badge-row {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
max-width: 880px;
margin: 0 auto;
}
.exp-badge {
display: inline-flex;
align-items: center;
gap: 9px;
background: var(--teal-50);
color: var(--teal-d);
font-weight: 600;
padding: 12px 18px;
border-radius: 999px;
border: 1px solid var(--line);
}
/* ---------- care tips ---------- */
.tips-wrap { max-width: 720px; margin: 0 auto; }
.tip-card {
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 36px clamp(20px, 5vw, 44px);
text-align: center;
box-shadow: var(--shadow-sm);
}
.section-alt .tip-card { background: var(--white); }
.tip-emoji { font-size: 2.4rem; display: block; margin-bottom: 14px; }
#tipText {
font-size: 1.2rem;
font-weight: 500;
color: var(--ink);
line-height: 1.45;
transition: opacity 0.25s ease;
}
#tipCat { margin-top: 14px; color: var(--muted); font-weight: 600; font-size: 0.9rem; }
.tip-dots { display: flex; justify-content: center; gap: 9px; margin-top: 22px; }
.tip-dots button {
width: 11px; height: 11px;
border-radius: 50%;
border: 0;
background: var(--line);
cursor: pointer;
padding: 0;
transition: background 0.2s ease, transform 0.2s ease;
}
.tip-dots button.is-on { background: var(--coral); transform: scale(1.2); }
/* ---------- testimonials ---------- */
.review-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 18px;
max-width: 1100px;
margin: 0 auto;
}
.review-card {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--r-md);
padding: 26px;
box-shadow: var(--shadow-sm);
}
.stars { color: var(--coral); letter-spacing: 2px; margin-bottom: 12px; }
.review-card p { color: var(--ink); }
.review-card footer {
margin-top: 16px;
display: flex;
align-items: center;
gap: 9px;
font-size: 0.9rem;
color: var(--muted);
font-weight: 500;
}
.rv-emoji { font-size: 1.3rem; }
/* ---------- book CTA ---------- */
.book { background: linear-gradient(150deg, var(--teal), var(--teal-d)); }
.book-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(28px, 5vw, 64px);
align-items: center;
max-width: 1040px;
margin: 0 auto;
}
.book-copy { color: #fff; }
.book-copy h2 { font-size: clamp(1.6rem, 3.5vw, 2.3rem); letter-spacing: -0.02em; }
.book-copy p { color: rgba(255, 255, 255, 0.88); margin-top: 12px; }
.book-points { list-style: none; margin-top: 20px; display: grid; gap: 8px; color: #fff; font-weight: 500; }
.book-form {
background: #fff;
border-radius: var(--r-lg);
padding: clamp(22px, 4vw, 34px);
box-shadow: var(--shadow);
display: grid;
gap: 14px;
}
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: 0.88rem; }
.field input, .field select {
font: inherit;
padding: 12px 14px;
border: 1.5px solid var(--line);
border-radius: var(--r-sm);
background: var(--bg);
color: var(--ink);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field input:focus, .field select:focus {
outline: none;
border-color: var(--teal);
box-shadow: 0 0 0 4px rgba(23, 156, 142, 0.15);
}
.field input.is-invalid { border-color: var(--coral-d); }
.form-note { font-size: 0.9rem; font-weight: 600; min-height: 1.2em; }
.form-note.ok { color: var(--teal-d); }
.form-note.err { color: var(--coral-d); }
/* ---------- footer ---------- */
.site-foot {
display: grid;
grid-template-columns: 1.4fr repeat(3, 1fr);
gap: 28px;
padding: clamp(40px, 6vw, 64px) clamp(16px, 5vw, 56px) 28px;
background: var(--ink);
color: rgba(255, 255, 255, 0.78);
}
.site-foot .brand-name { color: #fff; }
.site-foot .brand-mark { background: rgba(255, 255, 255, 0.1); }
.foot-tag { margin-top: 12px; font-size: 0.9rem; max-width: 28ch; }
.foot-col h3 { color: #fff; font-size: 0.95rem; margin-bottom: 10px; }
.foot-col p { font-size: 0.9rem; line-height: 1.7; }
.foot-col a:hover { color: var(--coral); }
.foot-fine {
grid-column: 1 / -1;
border-top: 1px solid rgba(255, 255, 255, 0.12);
padding-top: 18px;
font-size: 0.82rem;
color: rgba(255, 255, 255, 0.55);
}
/* ---------- responsive ---------- */
@media (max-width: 860px) {
.hero { grid-template-columns: 1fr; }
.book-inner { grid-template-columns: 1fr; }
.site-foot { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
.nav { display: none; }
.nav-cta { margin-left: auto; }
.hero { padding-top: 32px; }
.hero h1 { font-size: 2rem; }
.trust { gap: 18px; }
.trust li { flex: 1 1 40%; }
.species-grid { grid-template-columns: 1fr 1fr; }
.site-foot { grid-template-columns: 1fr; }
.btn { width: 100%; }
.hero-actions { flex-direction: column; }
.nav-cta { width: auto; }
}(function () {
'use strict';
/* ---------- Species filter ---------- */
var speciesCards = document.querySelectorAll('.species-card');
var services = document.querySelectorAll('.service-card');
var noResults = document.querySelector('.no-results');
function applyFilter(species) {
var shown = 0;
services.forEach(function (card) {
var families = (card.getAttribute('data-species') || '').split(/\s+/);
var match = species === 'all' || families.indexOf(species) !== -1;
card.classList.toggle('is-dim', !match);
if (match) shown++;
});
if (noResults) noResults.hidden = shown !== 0;
}
speciesCards.forEach(function (card) {
card.addEventListener('click', function () {
speciesCards.forEach(function (c) {
c.classList.remove('is-active');
c.setAttribute('aria-pressed', 'false');
});
card.classList.add('is-active');
card.setAttribute('aria-pressed', 'true');
applyFilter(card.getAttribute('data-species'));
// scroll the services section into view on filter (skip for "all")
if (card.getAttribute('data-species') !== 'all') {
var section = document.getElementById('services');
if (section) section.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
});
});
/* ---------- Care tips rotator ---------- */
var tips = [
{ emoji: '🦜', cat: 'For bird owners', text: 'Rotate your bird’s perches in width and texture — single-size dowels cause pressure sores called bumblefoot.' },
{ emoji: '🦎', cat: 'For reptile owners', text: 'Measure basking temps with a probe thermometer, not a stick-on dial — dial gauges can be off by 8–10°F.' },
{ emoji: '🐰', cat: 'For small-mammal owners', text: 'Unlimited timothy hay keeps rabbit and guinea-pig molars worn down and their guts moving.' },
{ emoji: '🐠', cat: 'For aquatic owners', text: 'Never change 100% of tank water at once — swap 20–30% weekly to protect your fish’s beneficial bacteria.' }
];
var tipText = document.getElementById('tipText');
var tipCat = document.getElementById('tipCat');
var tipEmoji = document.querySelector('.tip-emoji');
var dotsWrap = document.getElementById('tipDots');
var current = 0;
var timer = null;
function renderTip(i) {
if (!tipText) return;
var t = tips[i];
tipText.style.opacity = '0';
window.setTimeout(function () {
tipText.textContent = t.text;
tipCat.textContent = t.cat;
if (tipEmoji) tipEmoji.textContent = t.emoji;
tipText.style.opacity = '1';
}, 180);
Array.prototype.forEach.call(dotsWrap.children, function (dot, di) {
dot.classList.toggle('is-on', di === i);
dot.setAttribute('aria-selected', di === i ? 'true' : 'false');
});
current = i;
}
function goTo(i) {
renderTip(i);
restartAuto();
}
function restartAuto() {
if (timer) window.clearInterval(timer);
timer = window.setInterval(function () {
renderTip((current + 1) % tips.length);
}, 6000);
}
if (dotsWrap) {
tips.forEach(function (t, i) {
var b = document.createElement('button');
b.type = 'button';
b.setAttribute('role', 'tab');
b.setAttribute('aria-label', 'Care tip ' + (i + 1));
b.addEventListener('click', function () { goTo(i); });
dotsWrap.appendChild(b);
});
renderTip(0);
restartAuto();
}
/* ---------- Booking form validation ---------- */
var form = document.getElementById('bookForm');
var note = document.getElementById('formNote');
if (form) {
form.addEventListener('submit', function (e) {
e.preventDefault();
var name = form.ownerName;
var pet = form.petName;
var email = form.ownerEmail;
var valid = true;
[name, pet, email].forEach(function (input) {
var ok = input.value.trim().length > 0;
if (input === email) {
ok = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(input.value.trim());
}
input.classList.toggle('is-invalid', !ok);
if (!ok) valid = false;
});
if (!valid) {
note.textContent = 'Please fill in your name, pet and a valid email.';
note.className = 'form-note err';
return;
}
var pet2 = pet.value.trim();
note.textContent = 'Thanks ' + name.value.trim().split(' ')[0] + '! We’ll confirm ' +
pet2 + '’s visit by email within the hour.';
note.className = 'form-note ok';
form.reset();
});
}
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Tropicpaws — Exotic Pets Vet</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header class="site-head">
<a class="brand" href="#top" aria-label="Tropicpaws home">
<span class="brand-mark" aria-hidden="true">🦎</span>
<span class="brand-name">Tropicpaws</span>
</a>
<nav class="nav" aria-label="Primary">
<a href="#species">Species</a>
<a href="#services">Services</a>
<a href="#tips">Care tips</a>
<a href="#reviews">Reviews</a>
</nav>
<a class="btn btn-coral nav-cta" href="#book">Book a visit</a>
</header>
<main id="top">
<!-- HERO -->
<section class="hero">
<div class="hero-copy">
<p class="eyebrow"><span aria-hidden="true">🐾</span> Exotic & unusual companions welcome</p>
<h1>The vet your feathers, scales & whiskers deserve.</h1>
<p class="lede">
From sun conures to bearded dragons, hedgehogs to bettas — Tropicpaws is a
fear-free clinic built around the animals most practices turn away.
</p>
<div class="hero-actions">
<a class="btn btn-coral" href="#book">Book an appointment</a>
<a class="btn btn-ghost" href="#species">See who we treat</a>
</div>
<ul class="trust" aria-label="Why owners choose us">
<li><strong>12+ yrs</strong> exotic-only care</li>
<li><strong>4,800+</strong> happy patients</li>
<li><strong>Mon–Sat</strong> open late</li>
</ul>
</div>
<div class="hero-card" aria-hidden="false">
<div class="hero-card-row">
<span class="hc-emoji">🦜</span>
<div>
<p class="hc-name">Mango</p>
<p class="hc-meta">Sun conure · Wellness check</p>
</div>
<span class="badge badge-ok">Healthy</span>
</div>
<div class="hero-card-row">
<span class="hc-emoji">🐉</span>
<div>
<p class="hc-name">Smaug</p>
<p class="hc-meta">Bearded dragon · Dental</p>
</div>
<span class="badge badge-warn">In care</span>
</div>
<div class="hero-card-row">
<span class="hc-emoji">🦔</span>
<div>
<p class="hc-name">Quill</p>
<p class="hc-meta">Hedgehog · Vaccines</p>
</div>
<span class="badge badge-ok">Booked</span>
</div>
</div>
</section>
<!-- SPECIES -->
<section id="species" class="section">
<div class="section-head">
<h2>Who we care for</h2>
<p class="section-sub">Tap a family to filter our specialized services.</p>
</div>
<div class="species-grid" role="group" aria-label="Species filters">
<button class="species-card is-active" data-species="all">
<span class="sp-emoji" aria-hidden="true">🐾</span>
<span class="sp-name">All exotics</span>
<span class="sp-meta">Show everything</span>
</button>
<button class="species-card" data-species="bird">
<span class="sp-emoji" aria-hidden="true">🦜</span>
<span class="sp-name">Birds</span>
<span class="sp-meta">Parrots, finches, doves</span>
</button>
<button class="species-card" data-species="reptile">
<span class="sp-emoji" aria-hidden="true">🦎</span>
<span class="sp-name">Reptiles</span>
<span class="sp-meta">Geckos, dragons, turtles</span>
</button>
<button class="species-card" data-species="mammal">
<span class="sp-emoji" aria-hidden="true">🐹</span>
<span class="sp-name">Small mammals</span>
<span class="sp-meta">Rabbits, ferrets, hedgehogs</span>
</button>
<button class="species-card" data-species="fish">
<span class="sp-emoji" aria-hidden="true">🐠</span>
<span class="sp-name">Aquatics</span>
<span class="sp-meta">Bettas, koi, axolotls</span>
</button>
</div>
</section>
<!-- SERVICES -->
<section id="services" class="section section-alt">
<div class="section-head">
<h2>Specialized services</h2>
<p class="section-sub">Equipment and protocols built for non-traditional patients.</p>
</div>
<div class="service-grid">
<article class="service-card" data-species="bird">
<span class="svc-icon" aria-hidden="true">🪶</span>
<h3>Avian wellness & grooming</h3>
<p>Beak and nail trims, wing assessments, blood panels and feather-plucking behavior plans.</p>
<p class="svc-price">from $65</p>
</article>
<article class="service-card" data-species="reptile">
<span class="svc-icon" aria-hidden="true">🌡️</span>
<h3>Reptile husbandry review</h3>
<p>UVB, heat-gradient and enclosure audits to catch metabolic bone disease before it starts.</p>
<p class="svc-price">from $80</p>
</article>
<article class="service-card" data-species="mammal">
<span class="svc-icon" aria-hidden="true">🦷</span>
<h3>Small-mammal dentistry</h3>
<p>Rabbit and rodent molar burring, abscess care and bite-alignment corrections under sedation.</p>
<p class="svc-price">from $120</p>
</article>
<article class="service-card" data-species="fish">
<span class="svc-icon" aria-hidden="true">💧</span>
<h3>Aquatic & pond health</h3>
<p>Water-quality diagnostics, fin-rot treatment and anesthetized fish surgery for koi and bettas.</p>
<p class="svc-price">from $90</p>
</article>
<article class="service-card" data-species="reptile bird">
<span class="svc-icon" aria-hidden="true">🩻</span>
<h3>Digital imaging</h3>
<p>Micro-radiography and ultrasound scaled for patients from 15 grams to 15 kilograms.</p>
<p class="svc-price">from $140</p>
</article>
<article class="service-card" data-species="mammal bird reptile fish">
<span class="svc-icon" aria-hidden="true">🚑</span>
<h3>Exotic emergency & surgery</h3>
<p>Same-day critical care with species-specific anesthesia and overnight ICU monitoring.</p>
<p class="svc-price">on assessment</p>
</article>
</div>
<p class="no-results" hidden>No services for that family yet — try another.</p>
</section>
<!-- EXPERTISE -->
<section class="section">
<div class="section-head">
<h2>Credentialed in the unusual</h2>
<p class="section-sub">A team that actually trains on exotic medicine.</p>
</div>
<ul class="badge-row">
<li class="exp-badge"><span aria-hidden="true">🎓</span> ABVP Avian certified</li>
<li class="exp-badge"><span aria-hidden="true">🐢</span> Reptile & amphibian fellowship</li>
<li class="exp-badge"><span aria-hidden="true">😌</span> Fear-Free certified practice</li>
<li class="exp-badge"><span aria-hidden="true">🔬</span> In-house exotic lab</li>
<li class="exp-badge"><span aria-hidden="true">🌙</span> 24/7 on-call vet</li>
</ul>
</section>
<!-- CARE TIPS -->
<section id="tips" class="section section-alt">
<div class="tips-wrap">
<div class="section-head">
<h2>Quick care tip</h2>
<p class="section-sub">Fresh advice from our exotic team.</p>
</div>
<figure class="tip-card" id="tipCard">
<span class="tip-emoji" aria-hidden="true">🦜</span>
<blockquote id="tipText">Rotate your bird's perches in width and texture — single-size dowels cause pressure sores called bumblefoot.</blockquote>
<figcaption id="tipCat">For bird owners</figcaption>
</figure>
<div class="tip-dots" id="tipDots" role="tablist" aria-label="Care tips"></div>
</div>
</section>
<!-- TESTIMONIALS -->
<section id="reviews" class="section">
<div class="section-head">
<h2>Owners love us</h2>
<p class="section-sub">From parrot parents to lizard people.</p>
</div>
<div class="review-grid">
<article class="review-card">
<p class="stars" aria-label="5 out of 5 stars">★★★★★</p>
<p>"They found Mango's air-sac infection that two other vets missed. He's singing again."</p>
<footer><span class="rv-emoji" aria-hidden="true">🦜</span> Priya Raghavan · conure owner</footer>
</article>
<article class="review-card">
<p class="stars" aria-label="5 out of 5 stars">★★★★★</p>
<p>"Finally a clinic that asked about my gecko's UVB schedule instead of googling it."</p>
<footer><span class="rv-emoji" aria-hidden="true">🦎</span> Marcus Hale · leopard gecko owner</footer>
</article>
<article class="review-card">
<p class="stars" aria-label="5 out of 5 stars">★★★★★</p>
<p>"My rabbit's molar spurs were handled gently and same-day. The team genuinely loves bunnies."</p>
<footer><span class="rv-emoji" aria-hidden="true">🐰</span> Lena Okafor · Holland lop owner</footer>
</article>
</div>
</section>
<!-- BOOK CTA -->
<section id="book" class="section book">
<div class="book-inner">
<div class="book-copy">
<h2>Book a visit for your exotic friend</h2>
<p>Tell us who's coming in and we'll match you with the right specialist. Most appointments confirmed within an hour.</p>
<ul class="book-points">
<li>✔ Same-week openings</li>
<li>✔ Species-specific exam rooms</li>
<li>✔ Free 5-minute new-patient call</li>
</ul>
</div>
<form class="book-form" id="bookForm" novalidate>
<div class="field">
<label for="ownerName">Your name</label>
<input id="ownerName" name="ownerName" type="text" autocomplete="name" placeholder="Alex Rivera" required />
</div>
<div class="field">
<label for="petName">Pet's name & species</label>
<input id="petName" name="petName" type="text" placeholder="Smaug, bearded dragon" required />
</div>
<div class="field">
<label for="ownerEmail">Email</label>
<input id="ownerEmail" name="ownerEmail" type="email" autocomplete="email" placeholder="[email protected]" required />
</div>
<div class="field">
<label for="petType">Family</label>
<select id="petType" name="petType">
<option value="bird">Bird</option>
<option value="reptile" selected>Reptile</option>
<option value="mammal">Small mammal</option>
<option value="fish">Aquatic</option>
</select>
</div>
<button class="btn btn-coral btn-block" type="submit">Request appointment</button>
<p class="form-note" id="formNote" role="status" aria-live="polite"></p>
</form>
</div>
</section>
</main>
<footer class="site-foot">
<div class="foot-col">
<a class="brand" href="#top">
<span class="brand-mark" aria-hidden="true">🦎</span>
<span class="brand-name">Tropicpaws</span>
</a>
<p class="foot-tag">Exotic-only veterinary care, since 2014.</p>
</div>
<div class="foot-col">
<h3>Visit us</h3>
<p>418 Fernwood Ave, Suite 3<br />Portland, OR 97214</p>
</div>
<div class="foot-col">
<h3>Hours</h3>
<p>Mon–Fri · 8am–8pm<br />Sat · 9am–4pm<br />Emergency · 24/7 on-call</p>
</div>
<div class="foot-col">
<h3>Contact</h3>
<p><a href="tel:+15035550182">(503) 555-0182</a><br /><a href="mailto:[email protected]">[email protected]</a></p>
</div>
<p class="foot-fine">© 2026 Tropicpaws Exotic Animal Hospital · Illustrative demo only.</p>
</footer>
<script src="script.js"></script>
</body>
</html>Exotic Pets Vet Landing
A friendly, vibrant landing page for a clinic that treats the animals most vets won’t. The hero leads with a warm-teal gradient, a trust strip and a clear booking call to action. A species grid shows the four families cared for — birds, reptiles, small mammals and aquatics — each with a filter that scrolls matching services into view.
Below the fold are specialized services (avian dentistry, reptile husbandry checks, exotic surgery), expertise badges, a rotating care-tips teaser and real-sounding owner testimonials. The footer carries hours, location and contact. Everything is responsive down to a 520px breakpoint.
All interactions — the species filter, the testimonial rotator and the inline booking form validation — are plain vanilla JavaScript with no libraries.
Illustrative UI only — not for real veterinary use.