-
Notifications
You must be signed in to change notification settings - Fork 3
Expand file tree
/
Copy pathcat.html
More file actions
151 lines (142 loc) · 8.1 KB
/
Copy pathcat.html
File metadata and controls
151 lines (142 loc) · 8.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html lang="en">
<head>
<script>
!function(){var i="analytics",analytics=window[i]=window[i]||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","screen","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware","register"];analytics.factory=function(e){return function(){if(window[i].initialized)return window[i][e].apply(window[i],arguments);var n=Array.prototype.slice.call(arguments);if(["track","screen","alias","group","page","identify"].indexOf(e)>-1){var c=document.querySelector("link[rel='canonical']");n.push({__t:"bpc",c:c&&c.getAttribute("href")||void 0,p:location.pathname,u:location.href,s:location.search,t:document.title,r:document.referrer})}n.unshift(e);analytics.push(n);return analytics}};for(var n=0;n<analytics.methods.length;n++){var key=analytics.methods[n];analytics[key]=analytics.factory(key)}analytics.load=function(key,n){var t=document.createElement("script");t.type="text/javascript";t.async=!0;t.setAttribute("data-global-segment-analytics-key",i);t.src="https://cdn.segment.com/analytics.js/v1/" + key + "/analytics.min.js";var r=document.getElementsByTagName("script")[0];r.parentNode.insertBefore(t,r);analytics._loadOptions=n};analytics._writeKey="TPHE1Cqr1oo5ORFAXaOh1uuW49gB9ki2";;analytics.SNIPPET_VERSION="5.2.0";
analytics.load("TPHE1Cqr1oo5ORFAXaOh1uuW49gB9ki2");
analytics.page("Cat Home Page");
analytics.track("Cat Fishing");
analytics.track("Product Viewed");
analytics.track("Cat Loading", {
age: '8'
});
analytics.identify("123", {
name: "Cat Gibbons",
plan: "premium"
});
}}();
</script>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Cat Haven — Home</title>
<meta name="description" content="Welcome to Cat Haven. A cozy home on the web for cat lovers." />
<style>
:root { --bg:#fff; --text:#222; --muted:#666; --brand:#ffb703; --card:#f7f7f7; }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--text); background:var(--bg); }
header { position:sticky; top:0; background:#fff; border-bottom:1px solid #eee; z-index:10; }
.container { max-width:980px; margin:0 auto; padding:0 16px; }
nav { display:flex; align-items:center; justify-content:space-between; padding:10px 0; }
nav a { text-decoration:none; color:var(--text); margin-left:14px; }
nav a:hover { color:#000; text-decoration:underline; }
.logo { font-weight:700; letter-spacing:.2px; }
.hero { display:grid; gap:16px; align-items:center; padding:40px 0; }
.tag { display:inline-block; background:var(--card); color:var(--muted); padding:4px 10px; border-radius:999px; font-size:12px; }
h1 { font-size:38px; line-height:1.2; margin:8px 0 6px; }
.lead { color:var(--muted); margin:0 0 18px; }
.cta { display:inline-block; padding:10px 16px; border-radius:10px; background:var(--brand); color:#111; text-decoration:none; font-weight:600; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; padding:24px 0; }
.card { background:var(--card); padding:14px; border-radius:12px; }
.card h3 { margin:6px 0 6px; font-size:18px; }
.gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:8px; }
.tile { aspect-ratio:1/1; border-radius:12px; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid #eee; font-size:40px; }
.section { padding:28px 0; }
footer { border-top:1px solid #eee; padding:20px 0; color:var(--muted); font-size:14px; }
</style>
</head>
<body>
<header>
<div class="container">
<nav aria-label="Primary">
<div class="logo">🐾 Cat Haven</div>
<div>
<a href="#about">About</a>
<a href="#tips">Care Tips</a>
<a href="#gallery">Gallery</a>
<a href="#contact">Contact</a>
</div>
</nav>
</div>
</header>
<main>
<section class="hero container">
<span class="tag" aria-label="Site tagline">Simple home for cat lovers</span>
<h1>Welcome to Cat Haven 🐱</h1>
<p class="lead">A cozy corner of the internet celebrating whiskers, naps in sunbeams, and the occasional zoomies.</p>
<a class="cta" href="#tips">Read Care Tips</a>
</section>
<section id="about" class="section">
<div class="container cards">
<article class="card">
<h3>What We’re About</h3>
<p>Sharing simple, friendly info for new and seasoned cat parents—no fluff, just the good stuff.</p>
</article>
<article class="card">
<h3>Why Cats?</h3>
<p>They’re graceful, independent, and hilarious. Also: tiny toe beans. Enough said.</p>
</article>
<article class="card">
<h3>Starter Kit</h3>
<ul>
<li>Litter box & clumping litter</li>
<li>Quality wet/dry food</li>
<li>Scratching post & toys</li>
<li>Carrier & ID tag</li>
</ul>
</article>
</div>
</section>
<section id="tips" class="section">
<div class="container cards">
<article class="card">
<h3>Feeding</h3>
<p>Stick to a routine. Fresh water daily. Ask a vet before switching diets or adding treats.</p>
</article>
<article class="card">
<h3>Health</h3>
<p>Annual checkups, vaccines as advised, and keep an eye on appetite, grooming, and litter habits.</p>
</article>
<article class="card">
<h3>Environment</h3>
<p>Vertical spaces, scratching options, and quiet nooks make for a confident, happy cat.</p>
</article>
</div>
</section>
<section id="gallery" class="section">
<div class="container">
<h2 style="margin:0 0 10px;">Cat Gallery</h2>
<p class="lead">A few moods we fully support:</p>
<div class="gallery" aria-label="Cat emoji gallery">
<div class="tile" role="img" aria-label="Sleepy cat">😴🐈</div>
<div class="tile" role="img" aria-label="Playful cat">🎾🐱</div>
<div class="tile" role="img" aria-label="Curious cat">👀🐈⬛</div>
<div class="tile" role="img" aria-label="Hungry cat">🍽️🐾</div>
<div class="tile" role="img" aria-label="Regal cat">👑🐈</div>
<div class="tile" role="img" aria-label="Zoomies cat">⚡🐱</div>
</div>
</div>
</section>
<section id="contact" class="section">
<div class="container cards">
<article class="card">
<h3>Get in Touch</h3>
<p>Questions or tips to share? Email <a href="mailto:hello@cathaven.example">hello@cathaven.example</a>.</p>
<p><small>We read every meow-sage.</small></p>
</article>
<article class="card">
<h3>Adopt Don’t Shop</h3>
<p>Check local shelters and rescues—your new best friend may be waiting for you.</p>
</article>
</div>
</section>
</main>
<footer>
<div class="container">
© <span id="year"></span> Cat Haven — Made with ❤️ for cats and cat people.
</div>
</footer>
<script>
document.getElementById('year').textContent = new Date().getFullYear();
</script>
</body>
</html>