Um compromisso com a inovação e a sustentabilidade
A Études é uma empresa pioneira que une criatividade e funcionalidade para redefinir a excelência arquitetônica.
Uma paixão por criar espaços
Nosso conjunto abrangente de serviços profissionais atende a uma clientela diversificada, desde proprietários de imóveis até incorporadores comerciais.
Renovação e restauração
Experimente a fusão de imaginação e experiência com a Études Architectural Solutions.
Suporte contínuo
Experimente a fusão de imaginação e experiência com a Études Architectural Solutions.
Acesso ao aplicativo
Experimente a fusão de imaginação e experiência com a Études Architectural Solutions.
Consultoria
Experimente a fusão de imaginação e experiência com a Études Architectural Solutions.
Gerenciamento de projetos
Experimente a fusão de imaginação e experiência com a Études Architectural Solutions.
Soluções arquitetônicas
Experimente a fusão de imaginação e experiência com a Études Architectural Solutions.
Um conjunto de recursos
Nosso conjunto abrangente de serviços profissionais atende a uma clientela diversificada, desde proprietários de imóveis até incorporadores comerciais.
Aplicativo Études Architect
Colabore com outros arquitetos.
Mostre os seus projetos.
Experimente o mundo da arquitetura.
Boletim da Études
Um mundo de artigos instigantes.
Estudos de caso que celebram a arquitetura.
Acesso exclusivo a informações sobre design.
“Études nos poupou milhares de horas de trabalho e revelou insights que nunca imaginamos possíveis.”
Annie Steiner
CEO, Greenprint
Junte-se a mais de 900 inscritos
Fique por dentro de tudo o que você precisa saber.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pawsome — Pet Shop</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--cream: #FAF7F2;
--warm-white: #FFFEF9;
--bark: #3B2A1A;
--bark-light: #6B4E2F;
--sand: #E8D9C4;
--sage: #7B9E87;
--sage-light: #A8C4B0;
--sage-dark: #3D6B4F;
--terracotta: #C4603A;
--terracotta-light: #E8A080;
--gold: #D4A853;
--font-display: 'Playfair Display', Georgia, serif;
--font-body: 'DM Sans', system-ui, sans-serif;
}
html { scroll-behavior: smooth; }
body {
font-family: var(--font-body);
background: var(--cream);
color: var(--bark);
overflow-x: hidden;
}
/* NAV */
nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.2rem 4rem;
background: rgba(250,247,242,0.88);
backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(59,42,26,0.08);
}
.nav-logo {
font-family: var(--font-display);
font-size: 1.6rem;
font-weight: 900;
color: var(--bark);
text-decoration: none;
letter-spacing: -0.02em;
}
.nav-logo span { color: var(--terracotta); }
.nav-links {
display: flex;
gap: 2.5rem;
list-style: none;
}
.nav-links a {
font-size: 0.875rem;
font-weight: 500;
color: var(--bark-light);
text-decoration: none;
letter-spacing: 0.04em;
text-transform: uppercase;
transition: color 0.2s;
}
.nav-links a:hover { color: var(--terracotta); }
.nav-cta {
background: var(--bark);
color: var(--cream) !important;
padding: 0.55rem 1.4rem;
border-radius: 100px;
transition: background 0.2s !important;
}
.nav-cta:hover { background: var(--terracotta) !important; color: var(--cream) !important; }
/* HERO */
.hero {
min-height: 100vh;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
padding: 8rem 4rem 4rem;
gap: 4rem;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: -10%;
right: -5%;
width: 55%;
height: 120%;
background: var(--sand);
border-radius: 40% 0 0 50%;
z-index: 0;
}
.hero-text { position: relative; z-index: 1; }
.hero-badge {
display: inline-flex;
align-items: center;
gap: 0.4rem;
background: var(--sage-light);
color: var(--sage-dark);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.35rem 0.9rem;
border-radius: 100px;
margin-bottom: 1.5rem;
}
.hero-badge::before {
content: '';
width: 6px; height: 6px;
background: var(--sage-dark);
border-radius: 50%;
}
.hero h1 {
font-family: var(--font-display);
font-size: clamp(3rem, 5vw, 5rem);
font-weight: 900;
line-height: 1.08;
letter-spacing: -0.03em;
color: var(--bark);
margin-bottom: 1.5rem;
}
.hero h1 em {
font-style: italic;
color: var(--terracotta);
}
.hero p {
font-size: 1.1rem;
font-weight: 300;
line-height: 1.7;
color: var(--bark-light);
max-width: 42ch;
margin-bottom: 2.5rem;
}
.hero-buttons {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.btn-primary {
background: var(--terracotta);
color: #fff;
padding: 0.85rem 2rem;
border-radius: 100px;
font-size: 0.95rem;
font-weight: 500;
text-decoration: none;
transition: transform 0.2s, background 0.2s;
display: inline-block;
}
.btn-primary:hover { background: #a84e2c; transform: translateY(-2px); }
.btn-secondary {
background: transparent;
color: var(--bark);
padding: 0.85rem 2rem;
border-radius: 100px;
font-size: 0.95rem;
font-weight: 500;
text-decoration: none;
border: 1.5px solid var(--bark);
transition: border-color 0.2s, color 0.2s;
display: inline-block;
}
.btn-secondary:hover { border-color: var(--terracotta); color: var(--terracotta); }
.hero-visual {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 1rem;
align-items: flex-end;
}
/* Hero illustration — organic shapes with animals */
.hero-illustration {
width: 100%;
max-width: 480px;
}
.hero-stats {
display: flex;
gap: 1.5rem;
justify-content: flex-end;
margin-top: 1rem;
}
.stat-card {
background: var(--warm-white);
border-radius: 20px;
padding: 1.2rem 1.6rem;
text-align: center;
box-shadow: 0 4px 24px rgba(59,42,26,0.08);
}
.stat-number {
font-family: var(--font-display);
font-size: 2rem;
font-weight: 900;
color: var(--terracotta);
line-height: 1;
margin-bottom: 0.25rem;
}
.stat-label {
font-size: 0.75rem;
font-weight: 500;
color: var(--bark-light);
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* MARQUEE */
.marquee-section {
background: var(--bark);
padding: 1rem 0;
overflow: hidden;
}
.marquee-track {
display: flex;
gap: 3rem;
white-space: nowrap;
animation: marquee 20s linear infinite;
}
.marquee-item {
display: inline-flex;
align-items: center;
gap: 0.75rem;
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--sand);
flex-shrink: 0;
}
.marquee-dot {
width: 5px; height: 5px;
background: var(--terracotta);
border-radius: 50%;
flex-shrink: 0;
}
@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* CATEGORIES */
.categories {
padding: 6rem 4rem;
}
.section-label {
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--sage-dark);
margin-bottom: 0.75rem;
}
.section-title {
font-family: var(--font-display);
font-size: clamp(2rem, 3.5vw, 3rem);
font-weight: 900;
letter-spacing: -0.02em;
color: var(--bark);
margin-bottom: 3rem;
line-height: 1.15;
}
.categories-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
}
.category-card {
background: var(--warm-white);
border-radius: 24px;
padding: 2rem 1.5rem;
text-align: center;
cursor: pointer;
transition: transform 0.25s, box-shadow 0.25s;
border: 1.5px solid transparent;
text-decoration: none;
display: block;
}
.category-card:hover {
transform: translateY(-6px);
box-shadow: 0 16px 40px rgba(59,42,26,0.12);
border-color: var(--terracotta-light);
}
.category-icon {
font-size: 3rem;
margin-bottom: 1rem;
display: block;
}
.category-name {
font-family: var(--font-display);
font-size: 1.15rem;
font-weight: 700;
color: var(--bark);
margin-bottom: 0.35rem;
}
.category-count {
font-size: 0.8rem;
color: var(--bark-light);
font-weight: 400;
}
/* FEATURED PRODUCTS */
.products {
padding: 4rem 4rem 6rem;
background: var(--sand);
}
.products-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 2.5rem;
}
.view-all {
font-size: 0.875rem;
font-weight: 500;
color: var(--terracotta);
text-decoration: none;
border-bottom: 1px solid currentColor;
padding-bottom: 2px;
transition: opacity 0.2s;
}
.view-all:hover { opacity: 0.7; }
.products-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.product-card {
background: var(--warm-white);
border-radius: 20px;
overflow: hidden;
transition: transform 0.25s, box-shadow 0.25s;
cursor: pointer;
}
.product-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 48px rgba(59,42,26,0.14);
}
.product-img {
height: 220px;
display: flex;
align-items: center;
justify-content: center;
font-size: 5rem;
position: relative;
overflow: hidden;
}
.product-img-bg1 { background: #F0E8D8; }
.product-img-bg2 { background: #D8EAE0; }
.product-img-bg3 { background: #F0D8D4; }
.product-badge {
position: absolute;
top: 1rem; left: 1rem;
background: var(--terracotta);
color: #fff;
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 0.3rem 0.7rem;
border-radius: 100px;
}
.product-info { padding: 1.25rem; }
.product-category {
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--sage-dark);
margin-bottom: 0.4rem;
}
.product-name {
font-family: var(--font-display);
font-size: 1.1rem;
font-weight: 700;
color: var(--bark);
margin-bottom: 0.3rem;
}
.product-desc {
font-size: 0.82rem;
color: var(--bark-light);
line-height: 1.5;
margin-bottom: 1rem;
}
.product-footer {
display: flex;
align-items: center;
justify-content: space-between;
}
.product-price {
font-family: var(--font-display);
font-size: 1.3rem;
font-weight: 700;
color: var(--bark);
}
.add-btn {
width: 38px; height: 38px;
background: var(--bark);
color: #fff;
border: none;
border-radius: 50%;
font-size: 1.3rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s, transform 0.15s;
line-height: 1;
}
.add-btn:hover { background: var(--terracotta); transform: scale(1.08); }
/* ABOUT STRIP */
.about {
padding: 6rem 4rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6rem;
align-items: center;
}
.about-visual {
position: relative;
}
.about-shape {
width: 100%;
aspect-ratio: 1;
max-width: 400px;
background: var(--sage-light);
border-radius: 40% 60% 60% 40% / 50% 40% 60% 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 8rem;
animation: morph 8s ease-in-out infinite;
}
@keyframes morph {
0%, 100% { border-radius: 40% 60% 60% 40% / 50% 40% 60% 50%; }
33% { border-radius: 60% 40% 50% 50% / 40% 60% 40% 60%; }
66% { border-radius: 50% 50% 40% 60% / 60% 40% 60% 40%; }
}
.about-floater {
position: absolute;
background: var(--warm-white);
border-radius: 16px;
padding: 1rem 1.25rem;
box-shadow: 0 8px 32px rgba(59,42,26,0.1);
}
.about-floater-1 { bottom: 10%; right: -5%; }
.about-floater-2 { top: 15%; left: -8%; }
.floater-icon { font-size: 1.5rem; margin-bottom: 0.25rem; }
.floater-text { font-size: 0.78rem; font-weight: 500; color: var(--bark); }
.about-text p {
font-size: 1.05rem;
font-weight: 300;
line-height: 1.75;
color: var(--bark-light);
margin-bottom: 1.5rem;
}
.features-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 2rem;
}
.features-list li {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.95rem;
font-weight: 400;
color: var(--bark);
}
.check-icon {
width: 22px; height: 22px;
background: var(--sage);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 0.75rem;
flex-shrink: 0;
}
/* TESTIMONIALS */
.testimonials {
background: var(--bark);
padding: 6rem 4rem;
}
.testimonials .section-label { color: var(--terracotta-light); }
.testimonials .section-title { color: var(--cream); }
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.testimonial-card {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 20px;
padding: 2rem;
}
.stars { color: var(--gold); font-size: 0.9rem; margin-bottom: 1rem; letter-spacing: 2px; }
.testimonial-text {
font-size: 0.95rem;
line-height: 1.7;
color: rgba(250,247,242,0.8);
margin-bottom: 1.5rem;
font-weight: 300;
}
.testimonial-author {
display: flex;
align-items: center;
gap: 0.75rem;
}
.author-avatar {
width: 40px; height: 40px;
border-radius: 50%;
background: var(--terracotta);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
flex-shrink: 0;
}
.author-name {
font-size: 0.9rem;
font-weight: 500;
color: var(--cream);
}
.author-pet {
font-size: 0.78rem;
color: rgba(250,247,242,0.5);
margin-top: 0.1rem;
}
/* CTA BANNER */
.cta-banner {
padding: 6rem 4rem;
text-align: center;
position: relative;
overflow: hidden;
}
.cta-banner::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 50% 50%, var(--terracotta-light) 0%, transparent 70%);
opacity: 0.15;
}
.cta-banner .section-title { margin-bottom: 1rem; }
.cta-banner p {
font-size: 1.05rem;
font-weight: 300;
color: var(--bark-light);
max-width: 45ch;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
.cta-banner .btn-primary { font-size: 1rem; padding: 1rem 2.5rem; }
/* FOOTER */
footer {
background: var(--bark);
color: var(--sand);
padding: 4rem 4rem 2rem;
}
.footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 3rem;
margin-bottom: 3rem;
}
.footer-logo {
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 900;
color: var(--cream);
margin-bottom: 1rem;
display: block;
}
.footer-logo span { color: var(--terracotta-light); }
.footer-desc {
font-size: 0.875rem;
line-height: 1.65;
color: rgba(232,217,196,0.6);
font-weight: 300;
}
.footer-heading {
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--cream);
margin-bottom: 1.25rem;
}
.footer-links {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.footer-links a {
font-size: 0.875rem;
color: rgba(232,217,196,0.6);
text-decoration: none;
transition: color 0.2s;
font-weight: 300;
}
.footer-links a:hover { color: var(--terracotta-light); }
.footer-bottom {
border-top: 1px solid rgba(255,255,255,0.08);
padding-top: 2rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.footer-copy {
font-size: 0.8rem;
color: rgba(232,217,196,0.4);
}
/* SCROLL ANIMATIONS */
.fade-up {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s, transform 0.6s;
}
.fade-up.visible {
opacity: 1;
transform: translateY(0);
}
</style>
</head>
<body>
<!-- NAV -->
<nav>
<a href="#" class="nav-logo">Paw<span>some</span></a>
<ul class="nav-links">
<li><a href="#categories">Shop</a></li>
<li><a href="#about">About</a></li>
<li><a href="#testimonials">Reviews</a></li>
<li><a href="#" class="nav-cta">Visit Store</a></li>
</ul>
</nav>
<!-- HERO -->
<section class="hero">
<div class="hero-text">
<div class="hero-badge">Free delivery over $50</div>
<h1>Everything your pet <em>loves,</em> delivered to your door.</h1>
<p>Premium food, accessories, and care essentials for dogs, cats, birds, and more — curated with love by our team of pet experts.</p>
<div class="hero-buttons">
<a href="#categories" class="btn-primary">Shop Now</a>
<a href="#about" class="btn-secondary">Our Story</a>
</div>
</div>
<div class="hero-visual">
<svg class="hero-illustration" viewBox="0 0 480 400" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- Background blob -->
<ellipse cx="260" cy="200" rx="200" ry="180" fill="#E8D9C4" opacity="0.5"/>
<!-- Main dog illustration -->
<g transform="translate(120,60)">
<!-- Body -->
<ellipse cx="120" cy="220" rx="90" ry="75" fill="#C4603A" opacity="0.9"/>
<!-- Head -->
<circle cx="120" cy="140" r="65" fill="#D4744A"/>
<!-- Ears -->
<ellipse cx="72" cy="110" rx="22" ry="32" fill="#A84E2C" transform="rotate(-15,72,110)"/>
<ellipse cx="168" cy="110" rx="22" ry="32" fill="#A84E2C" transform="rotate(15,168,110)"/>
<!-- Eyes -->
<circle cx="103" cy="130" r="10" fill="#3B2A1A"/>
<circle cx="137" cy="130" r="10" fill="#3B2A1A"/>
<circle cx="106" cy="127" r="3.5" fill="white"/>
<circle cx="140" cy="127" r="3.5" fill="white"/>
<!-- Nose -->
<ellipse cx="120" cy="152" rx="12" ry="8" fill="#3B2A1A"/>
<circle cx="117" cy="150" r="3" fill="white" opacity="0.5"/>
<!-- Mouth -->
<path d="M 108 162 Q 120 172 132 162" stroke="#3B2A1A" stroke-width="2.5" fill="none" stroke-linecap="round"/>
<!-- Paws -->
<ellipse cx="60" cy="285" rx="30" ry="22" fill="#D4744A"/>
<ellipse cx="178" cy="285" rx="30" ry="22" fill="#D4744A"/>
<!-- Tail -->
<path d="M 205 235 Q 250 200 240 165" stroke="#A84E2C" stroke-width="18" fill="none" stroke-linecap="round"/>
<!-- Collar -->
<rect x="93" y="193" width="54" height="14" rx="7" fill="#7B9E87"/>
<circle cx="120" cy="207" r="5" fill="#D4A853"/>
</g>
<!-- Floating elements -->
<circle cx="60" cy="80" r="18" fill="#7B9E87" opacity="0.4"/>
<circle cx="420" cy="120" r="12" fill="#C4603A" opacity="0.3"/>
<circle cx="390" cy="310" r="20" fill="#D4A853" opacity="0.3"/>
<circle cx="50" cy="300" r="14" fill="#7B9E87" opacity="0.25"/>
<!-- Paw prints -->
<g fill="#C4603A" opacity="0.2" transform="translate(370,60)">
<circle cx="0" cy="10" r="6"/>
<circle cx="-10" cy="0" r="4"/>
<circle cx="10" cy="0" r="4"/>
<circle cx="-6" cy="-8" r="3"/>
<circle cx="6" cy="-8" r="3"/>
</g>
<g fill="#7B9E87" opacity="0.2" transform="translate(30,180)">
<circle cx="0" cy="10" r="6"/>
<circle cx="-10" cy="0" r="4"/>
<circle cx="10" cy="0" r="4"/>
<circle cx="-6" cy="-8" r="3"/>
<circle cx="6" cy="-8" r="3"/>
</g>
</svg>
<div class="hero-stats">
<div class="stat-card">
<div class="stat-number">12k+</div>
<div class="stat-label">Happy Pets</div>
</div>
<div class="stat-card">
<div class="stat-number">500+</div>
<div class="stat-label">Products</div>
</div>
<div class="stat-card">
<div class="stat-number">4.9★</div>
<div class="stat-label">Avg. Rating</div>
</div>
</div>
</div>
</section>
<!-- MARQUEE -->
<div class="marquee-section">
<div class="marquee-track">
<div class="marquee-item"><span class="marquee-dot"></span>Premium Pet Food</div>
<div class="marquee-item"><span class="marquee-dot"></span>Free Delivery Over $50</div>
<div class="marquee-item"><span class="marquee-dot"></span>Vet-Approved Products</div>
<div class="marquee-item"><span class="marquee-dot"></span>Organic & Natural Options</div>
<div class="marquee-item"><span class="marquee-dot"></span>30-Day Returns</div>
<div class="marquee-item"><span class="marquee-dot"></span>Expert Pet Advice</div>
<div class="marquee-item"><span class="marquee-dot"></span>Premium Pet Food</div>
<div class="marquee-item"><span class="marquee-dot"></span>Free Delivery Over $50</div>
<div class="marquee-item"><span class="marquee-dot"></span>Vet-Approved Products</div>
<div class="marquee-item"><span class="marquee-dot"></span>Organic & Natural Options</div>
<div class="marquee-item"><span class="marquee-dot"></span>30-Day Returns</div>
<div class="marquee-item"><span class="marquee-dot"></span>Expert Pet Advice</div>
</div>
</div>
<!-- CATEGORIES -->
<section class="categories" id="categories">
<div class="section-label">Browse by pet</div>
<div class="section-title">Shop for every<br>furry friend</div>
<div class="categories-grid">
<a href="#" class="category-card fade-up">
<span class="category-icon">🐶</span>
<div class="category-name">Dogs</div>
<div class="category-count">180 products</div>
</a>
<a href="#" class="category-card fade-up" style="transition-delay:0.1s">
<span class="category-icon">🐱</span>
<div class="category-name">Cats</div>
<div class="category-count">140 products</div>
</a>
<a href="#" class="category-card fade-up" style="transition-delay:0.2s">
<span class="category-icon">🐦</span>
<div class="category-name">Birds</div>
<div class="category-count">65 products</div>
</a>
<a href="#" class="category-card fade-up" style="transition-delay:0.3s">
<span class="category-icon">🐠</span>
<div class="category-name">Fish</div>
<div class="category-count">90 products</div>
</a>
</div>
</section>
<!-- PRODUCTS -->
<section class="products" id="products">
<div class="products-header">
<div>
<div class="section-label">Editor's pick</div>
<div class="section-title" style="margin-bottom:0">Bestsellers this month</div>
</div>
<a href="#" class="view-all">View all products</a>
</div>
<div class="products-grid">
<div class="product-card fade-up">
<div class="product-img product-img-bg1">
<div class="product-badge">Bestseller</div>
🦴
</div>
<div class="product-info">
<div class="product-category">Dog · Nutrition</div>
<div class="product-name">Grain-Free Kibble</div>
<div class="product-desc">Vet-formulated, high-protein blend with sweet potato and salmon.</div>
<div class="product-footer">
<div class="product-price">$28.99</div>
<button class="add-btn">+</button>
</div>
</div>
</div>
<div class="product-card fade-up" style="transition-delay:0.12s">
<div class="product-img product-img-bg2">
<div class="product-badge">New</div>
🛏️
</div>
<div class="product-info">
<div class="product-category">Cat · Comfort</div>
<div class="product-name">Cozy Plush Bed</div>
<div class="product-desc">Washable memory foam bed with removable fleece cover.</div>
<div class="product-footer">
<div class="product-price">$44.50</div>
<button class="add-btn">+</button>
</div>
</div>
</div>
<div class="product-card fade-up" style="transition-delay:0.24s">
<div class="product-img product-img-bg3">
🧸
</div>
<div class="product-info">
<div class="product-category">Dog · Toy</div>
<div class="product-name">Squeaky Rope Toy Set</div>
<div class="product-desc">Durable 3-piece set for hours of tug-of-war and fetch.</div>
<div class="product-footer">
<div class="product-price">$16.00</div>
<button class="add-btn">+</button>
</div>
</div>
</div>
</div>
</section>
<!-- ABOUT -->
<section class="about" id="about">
<div class="about-visual">
<div class="about-shape">🐾</div>
<div class="about-floater about-floater-1">
<div class="floater-icon">🌿</div>
<div class="floater-text">100% Natural</div>
</div>
<div class="about-floater about-floater-2">
<div class="floater-icon">🏥</div>
<div class="floater-text">Vet Approved</div>
</div>
</div>
<div class="about-text fade-up">
<div class="section-label">Our story</div>
<div class="section-title">Built by pet lovers,<br>for pet lovers</div>
<p>We started Pawsome in 2019 after struggling to find high-quality, trustworthy products for our own dogs. Today we curate every item in our store — if we wouldn't give it to our own pets, it doesn't make the cut.</p>
<ul class="features-list">
<li><div class="check-icon">✓</div>All products vetted by licensed veterinarians</li>
<li><div class="check-icon">✓</div>Sourced from ethical, sustainable suppliers</li>
<li><div class="check-icon">✓</div>No harmful additives, ever</li>
<li><div class="check-icon">✓</div>Carbon-neutral shipping on every order</li>
</ul>
<a href="#" class="btn-primary">Learn more about us</a>
</div>
</section>
<!-- TESTIMONIALS -->
<section class="testimonials" id="testimonials">
<div class="section-label">What pet owners say</div>
<div class="section-title" style="margin-bottom:2.5rem">Tails are wagging</div>
<div class="testimonials-grid">
<div class="testimonial-card fade-up">
<div class="stars">★★★★★</div>
<p class="testimonial-text">"My golden retriever has been on the grain-free kibble for 3 months and his coat is shinier than ever. Fast delivery too — couldn't be happier!"</p>
<div class="testimonial-author">
<div class="author-avatar">🐕</div>
<div>
<div class="author-name">Sarah M.</div>
<div class="author-pet">Dog parent · Golden Retriever</div>
</div>
</div>
</div>
<div class="testimonial-card fade-up" style="transition-delay:0.12s">
<div class="stars">★★★★★</div>
<p class="testimonial-text">"The plush cat bed arrived within 2 days and my two cats immediately claimed it. The quality is exceptional — it still looks brand new after months of use."</p>
<div class="testimonial-author">
<div class="author-avatar">🐈</div>
<div>
<div class="author-name">James K.</div>
<div class="author-pet">Cat parent · 2 tabby cats</div>
</div>
</div>
</div>
<div class="testimonial-card fade-up" style="transition-delay:0.24s">
<div class="stars">★★★★★</div>
<p class="testimonial-text">"I love that everything is vet-approved. Finally a store I can trust. The customer service team even helped me pick the right food for my senior dog."</p>
<div class="testimonial-author">
<div class="author-avatar">🐩</div>
<div>
<div class="author-name">Linda R.</div>
<div class="author-pet">Dog parent · Miniature Poodle</div>
</div>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section class="cta-banner">
<div class="section-label">Ready to shop?</div>
<div class="section-title">Your pet deserves the best</div>
<p>Join over 12,000 happy pet parents and give your furry friend the care they deserve.</p>
<a href="#" class="btn-primary">Start Shopping</a>
</section>
<!-- FOOTER -->
<footer>
<div class="footer-grid">
<div>
<span class="footer-logo">Paw<span>some</span></span>
<p class="footer-desc">Premium pet supplies for happy, healthy animals. Delivered with love.</p>
</div>
<div>
<div class="footer-heading">Shop</div>
<ul class="footer-links">
<li><a href="#">Dogs</a></li>
<li><a href="#">Cats</a></li>
<li><a href="#">Birds</a></li>
<li><a href="#">Fish</a></li>
<li><a href="#">New Arrivals</a></li>
</ul>
</div>
<div>
<div class="footer-heading">Company</div>
<ul class="footer-links">
<li><a href="#">About Us</a></li>
<li><a href="#">Our Mission</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Press</a></li>
</ul>
</div>
<div>
<div class="footer-heading">Support</div>
<ul class="footer-links">
<li><a href="#">FAQ</a></li>
<li><a href="#">Shipping</a></li>
<li><a href="#">Returns</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p class="footer-copy">© 2026 Pawsome Pet Shop. All rights reserved.</p>
<p class="footer-copy">Made with ❤️ for pets everywhere</p>
</div>
</footer>
<script>
const observer = new IntersectionObserver((entries) => {
entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });
}, { threshold: 0.15 });
document.querySelectorAll('.fade-up').forEach(el => observer.observe(el));
document.querySelectorAll('.add-btn').forEach(btn => {
btn.addEventListener('click', function() {
this.textContent = '✓';
this.style.background = '#7B9E87';
setTimeout(() => { this.textContent = '+'; this.style.background = ''; }, 1500);
});
});
</script>
</body>
</html>
