Skip to content

Commit fdddd1f

Browse files
TheQuantifierTheQuantifier
committed
Added Pet Website Page
1 parent c62588a commit fdddd1f

6 files changed

Lines changed: 166 additions & 0 deletions

File tree

‎itis3135/contract.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,10 @@ <h2>Contract</h2>
4242
<a href="introduction.html">Introduction</a>
4343
<span class="sep">|</span>
4444
<a href="contract.html" aria-current="page">Contract</a>
45+
<span class="sep">|</span>
46+
<a href="https://webpages.charlotte.edu/jhand12/jolly-hound/index.html" target="_blank" rel="noopener">Jolly Hound (Home)</a>
47+
<span class="sep">|</span>
48+
<a href="https://webpages.charlotte.edu/jhand12/jolly-hound/about.html" target="_blank" rel="noopener">Jolly Hound (About)</a>
4549
</nav>
4650
<p class="built-by">Page built by <a href="index.html">John Hand</a></p>
4751
<p class="copyright">John Hand ©2025</p>

‎itis3135/index.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,10 @@ <h3 id="quick-links">Quick Links</h3>
4848
<a href="https://thequantifier.github.io/" target="_blank" rel="noopener">GitHub.io</a>
4949
<span class="sep">|</span>
5050
<a href="https://github.com/TheQuantifier" target="_blank" rel="noopener">GitHub</a>
51+
<span class="sep">|</span>
52+
<a href="https://webpages.charlotte.edu/jhand12/jolly-hound/index.html" target="_blank" rel="noopener">Jolly Hound (Home)</a>
53+
<span class="sep">|</span>
54+
<a href="https://webpages.charlotte.edu/jhand12/jolly-hound/about.html" target="_blank" rel="noopener">Jolly Hound (About)</a>
5155
</nav>
5256

5357
<p class="built-by">

‎itis3135/introduction.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,10 @@ <h3 id="something-else">Something Else to Share</h3>
9898
<a href="introduction.html" aria-current="page">Introduction</a>
9999
<span class="sep">|</span>
100100
<a href="contract.html">Contract</a>
101+
<span class="sep">|</span>
102+
<a href="https://webpages.charlotte.edu/jhand12/jolly-hound/index.html" target="_blank" rel="noopener">Jolly Hound (Home)</a>
103+
<span class="sep">|</span>
104+
<a href="https://webpages.charlotte.edu/jhand12/jolly-hound/about.html" target="_blank" rel="noopener">Jolly Hound (About)</a>
101105
</nav>
102106
<p class="built-by">Page built by <a href="index.html">Manus Design Co.</a></p>
103107
<p class="copyright">Manus Design Co. ©2025</p>

‎itis3135/jolly-hound/about.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<!-- Accumulus (required) -->
7+
<script src="https://lint.page/kit/4d0fe3.js" crossorigin="anonymous"></script>
8+
<title>Jolly Hound – About</title>
9+
<link rel="stylesheet" href="styles/jolly.css" />
10+
</head>
11+
<body>
12+
<header class="site-header">
13+
<div class="container">
14+
<h1 class="brand">Jolly Hound</h1>
15+
<nav class="main-nav" aria-label="Primary">
16+
<ul>
17+
<li><a href="index.html">Home</a></li>
18+
<li><a href="about.html" aria-current="page">About</a></li>
19+
</ul>
20+
</nav>
21+
</div>
22+
</header>
23+
24+
<main class="container">
25+
<h2>Jolly Hound</h2>
26+
27+
<p><strong>Mascot:</strong> <em>Jolly Hound</em> (adjective shares your first initial “J”; animal shares your last initial “H”).</p>
28+
29+
<p><strong>What we do:</strong> We package tiny celebrations called <strong>HowlGrams</strong>.
30+
You upload or record a short message; we mix in a cheerful howl and a looped “tail-wag” animation,
31+
then tuck it all behind a QR in a bone-shaped capsule. Add <strong>SniffStickers</strong> to make the unseal
32+
moment smell like victory (or vanilla biscuits), and finish with <strong>Pup-Post</strong> wrap. For repeat
33+
senders, <strong>WagTags</strong> let you point a tag at any new message later—perfect for locker doors and gift bags.</p>
34+
35+
<p><strong>Why it fits the theme:</strong> Hounds howl and fetch joy. The brand stays light, pun-friendly,
36+
and visual—so the “Jolly Hound” identity can show up on icons, packaging, and micro-copy across all pages.</p>
37+
</main>
38+
39+
<footer class="site-footer">
40+
<div class="container">
41+
<p class="tagline">"Give them something to howl about!"</p>
42+
<p class="smallprint">© <span id="year"></span> Jolly Hound.</p>
43+
</div>
44+
<script>
45+
document.getElementById('year').textContent = new Date().getFullYear();
46+
</script>
47+
</footer>
48+
</body>
49+
</html>

‎itis3135/jolly-hound/index.html‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<!-- Accumulus (required) -->
7+
<script src="https://lint.page/kit/4d0fe3.js" crossorigin="anonymous"></script>
8+
<title>Jolly Hound – Home</title>
9+
<link rel="stylesheet" href="styles/jolly.css" />
10+
</head>
11+
<body>
12+
<header class="site-header">
13+
<div class="container">
14+
<h1 class="brand">Jolly Hound</h1>
15+
<nav class="main-nav" aria-label="Primary">
16+
<ul>
17+
<li><a href="index.html" aria-current="page">Home</a></li>
18+
<li><a href="about.html">About</a></li>
19+
<!-- You’ll also add a link to this site from your COURSE site nav (see notes below). -->
20+
</ul>
21+
</nav>
22+
</div>
23+
</header>
24+
25+
<main class="container">
26+
<h2>Jolly Hound</h2>
27+
28+
<p><strong>Jolly Hound</strong> is a whimsical micro-kiosk that turns short messages into tiny
29+
“howl capsules.” Each capsule includes a bone-shaped keepsake with a QR linking to your custom audio
30+
howl-greeting, a playful “wag” animation, and an optional scratch-n-sniff sticker to seal the moment.</p>
31+
32+
<p>Think of us as <em>joy on demand</em>, packaged like a pup’s best day: bright, bouncy, and a little
33+
ridiculous—in the best way. Perfect for birthdays, congrats, “miss you,” apology howls, and just-because barks.</p>
34+
35+
<section aria-labelledby="offerings">
36+
<h3 id="offerings">What we “sell”</h3>
37+
<ul class="grid">
38+
<li>
39+
<h4>HowlGrams</h4>
40+
<p>Personalized audio howls (you or us!) delivered by QR in a bone capsule.</p>
41+
</li>
42+
<li>
43+
<h4>WagTags</h4>
44+
<p>Reusable NFC/QR tags for lockers, gift bags, and keychains—swap in new howls anytime.</p>
45+
</li>
46+
<li>
47+
<h4>SniffStickers</h4>
48+
<p>Scratch-n-sniff seals (vanilla biscuit, fresh grass, rain-day walk).</p>
49+
</li>
50+
<li>
51+
<h4>Pup-Post</h4>
52+
<p>Mini gift wrap + ribbon sets sized for our capsules.</p>
53+
</li>
54+
</ul>
55+
</section>
56+
</main>
57+
58+
<footer class="site-footer">
59+
<div class="container">
60+
<p class="tagline">"Give them something to howl about!"</p>
61+
<p class="smallprint">© <span id="year"></span> Jolly Hound.</p>
62+
</div>
63+
<script>
64+
document.getElementById('year').textContent = new Date().getFullYear();
65+
</script>
66+
</footer>
67+
</body>
68+
</html>

‎itis3135/jolly-hound/styles/jolly.css‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
:root{
2+
--ink:#0b132b;
3+
--blue:#1c2541;
4+
--slate:#3a506b;
5+
--mint:#6fffe9;
6+
--paper:#f7fbff;
7+
}
8+
9+
*{box-sizing:border-box}
10+
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, sans-serif}
11+
12+
.container{max-width:900px;margin-inline:auto;padding:1rem}
13+
14+
.site-header{
15+
background: linear-gradient(90deg,var(--blue),var(--slate));
16+
color:white;box-shadow:0 2px 10px rgba(0,0,0,.1);position:sticky;top:0
17+
}
18+
.brand{margin:0;font-size:1.75rem;letter-spacing:.5px}
19+
.main-nav ul{list-style:none;display:flex;gap:.75rem;margin:.5rem 0 0;padding:0;flex-wrap:wrap}
20+
.main-nav a{display:inline-block;padding:.5rem .75rem;border-radius:.75rem;text-decoration:none;background:rgba(255,255,255,.08);color:white}
21+
.main-nav a[aria-current="page"]{outline:2px solid var(--mint)}
22+
23+
h2{font-size:1.65rem;margin:1rem 0 .5rem}
24+
h3{margin-top:2rem}
25+
h4{margin:.5rem 0 .25rem}
26+
27+
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;padding:0}
28+
.grid li{list-style:none;background:white;border:1px solid #e6eef6;border-radius:1rem;padding:1rem;box-shadow:0 1px 4px rgba(0,0,0,.04)}
29+
30+
.site-footer{
31+
margin-top:3rem;background:var(--ink);color:white
32+
}
33+
.site-footer .tagline{
34+
font-weight:600; /* semantic strong is used in HTML where needed; here we style only */
35+
letter-spacing:.2px;margin:0 0 .25rem
36+
}
37+
.smallprint{opacity:.8;margin:0}

0 commit comments

Comments
 (0)