jason/scj-impec
1
0
Fork 0
forked from jason/scj
Code Pull Requests Activity
Files
7593fb46cf7d952c5842644002f3d6ce3fc9a1e2
scj-impec/scj/index.html
T

380 lines
22 KiB
HTML
Raw Normal View History

initial build
2026-06-30 22:23:36 -05:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Storm Cloud Jumpers — Captive-Raised Jumping Spiders</title>
<meta name="description" content="Storm Cloud Jumpers — captive-raised Phidippus jumping spiders (otiosus & regius). Healthy body shape, FedEx live-arrival shipping, free starter kit with every purchase. Small size. Big personality." />
<link rel="canonical" href="https://jumpers.stormcloudhills.com/" />
<!-- Open Graph / social -->
<meta property="og:type" content="website" />
<meta property="og:title" content="Storm Cloud Jumpers — Captive-Raised Jumping Spiders" />
<meta property="og:description" content="Captive-raised Phidippus jumpers. Small size. Big personality." />
<meta property="og:image" content="https://jumpers.stormcloudhills.com/assets/brand/social-square.jpg" />
<meta property="og:url" content="https://jumpers.stormcloudhills.com/" />
<meta name="twitter:card" content="summary_large_image" />
<link rel="icon" type="image/jpeg" href="assets/brand/favicon-180.jpg" />
<link rel="apple-touch-icon" href="assets/brand/favicon-180.jpg" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Oswald:wght@500;600;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="styles.css" />
</head>
<body id="top">
<!-- NAV -->
<header class="nav" id="nav">
<div class="nav__inner">
<a href="#top" class="nav__brand" aria-label="Storm Cloud Jumpers — home">
<img class="nav__logo" src="assets/brand/logo-dark-square.jpg" alt="Storm Cloud Jumpers logo" width="42" height="42" />
<span class="nav__name">Storm Cloud Jumpers<small>Jumping Spiders</small></span>
</a>
<nav class="nav__links" id="navLinks" aria-label="Primary">
<a href="#available">Available</a>
<a href="#mamas">The Mamas</a>
<a href="#care">Care</a>
<a href="#shipping">Shipping</a>
<a href="#about">About</a>
<a href="#contact" class="nav__cta">Inquire</a>
</nav>
<button class="nav__burger" id="burger" aria-label="Toggle menu" aria-expanded="false" aria-controls="navLinks">
<span></span><span></span><span></span>
</button>
</div>
</header>
<!-- HERO -->
<section class="hero">
<div class="hero__bg" aria-hidden="true"></div>
<div class="container hero__grid">
<div class="hero__text">
<h1 class="hero__title">
<span class="t-sub">Captive-Raised Jumping Spiders</span>
<span class="metal">STORM CLOUD JUMPERS</span>
</h1>
<p class="hero__tag">Small Size. <span class="accent">Big Personality.</span></p>
<div class="hero__cta">
<a href="#available" class="btn btn--primary">View Available Spiders</a>
<a href="#care" class="btn btn--ghost">Care Guide</a>
</div>
</div>
<div class="hero__logo-wrap">
<img src="assets/brand/logo-dark-square.jpg" alt="Nimbus, the Storm Cloud Jumpers mascot — a jumping spider crest" width="440" height="440" />
<p class="hero__logo-cap">Meet <b>Nimbus</b> — our mascot</p>
</div>
</div>
<div class="hero__scroll" aria-hidden="true"><span></span><p>SCROLL</p></div>
</section>
<!-- TRUST STRIP -->
<section class="trust">
<div class="container trust__grid">
<div class="trust__item reveal"><div class="ic">✦</div><h4>Captive Raised</h4><p>From wild-caught mamas — never collected for sale.</p></div>
<div class="trust__item reveal"><div class="ic">✦</div><h4>Healthy Body Shape</h4><p>Plump, well-fed abdomens on every spider.</p></div>
<div class="trust__item reveal"><div class="ic">✦</div><h4>Live Arrival</h4><p>Guaranteed on overnight FedEx hub-to-hub.</p></div>
<div class="trust__item reveal"><div class="ic">✦</div><h4>Free Starter Kit</h4><p>Included free with every spider purchase.</p></div>
</div>
</section>
<!-- AVAILABLE -->
<section class="section" id="available">
<div class="container">
<div class="section__head reveal">
<p class="eyebrow"><span class="dash"></span>Available Now</p>
<h2>Meet the jumpers looking for a home.</h2>
<p class="lede">A small, rotating selection of healthy, captive-raised <em>Phidippus</em> jumpers. See one you like? Reserve it and we'll be in touch.</p>
</div>
<div class="grid spiders__grid">
<!-- Otiosus slings -->
<article class="card reveal">
<div class="card__media">
<img src="assets/spiders/available/otiosus-sling.jpg" alt="Northern canopy jumper sling (Phidippus otiosus)" loading="lazy" />
<span class="badge">Available</span>
</div>
<div class="card__body">
<h3>Northern Canopy Slings</h3>
<p class="card__sci">Phidippus otiosus</p>
<p class="card__desc">Fern's babies — Northern (NC) canopy jumpers, a distinct line from the Florida otiosus. Captive raised, unsexed, and eating <em>hydei</em> fruit flies. Active little characters that love a planted "playground."</p>
<ul class="card__meta">
<li>Instar i5–6</li><li>Unsexed</li><li>Active</li><li>Healthy body shape</li>
</ul>
<div class="card__foot">
<span class="price">$25<small>+ shipping</small></span>
<a href="#contact" class="btn btn--primary btn--small" data-inquire="Northern Canopy Sling (P. otiosus)">Reserve</a>
</div>
</div>
</article>
<!-- Regius males -->
<article class="card reveal">
<div class="card__media">
<img src="assets/spiders/males/ivan.jpg" alt="Adult male regal jumper (Phidippus regius)" loading="lazy" />
<span class="badge">Available</span>
</div>
<div class="card__body">
<h3>Regal Jumper Males</h3>
<p class="card__sci">Phidippus regius</p>
<p class="card__desc">Our showy boys — <b>Ivan, Gully, Noble, Hexx &amp; Magick</b>. Adult males are bold, dramatic, and love to show off. Captive raised. <span style="color:var(--txt-mute)">(More boys' photos coming soon.)</span></p>
<ul class="card__meta">
<li>Adult male</li><li>Bold &amp; active</li><li>Healthy body shape</li>
</ul>
<div class="card__foot">
<span class="price">$25<small>+ shipping</small></span>
<a href="#contact" class="btn btn--primary btn--small" data-inquire="Regal Jumper Male (P. regius)">Reserve</a>
</div>
</div>
</article>
<!-- Iris -->
<article class="card reveal">
<div class="card__media">
<img src="assets/spiders/females/iris.jpg" alt="Iris — subadult female regal jumper (Phidippus regius)" loading="lazy" />
<span class="badge">Available</span>
</div>
<div class="card__body">
<h3>Iris</h3>
<p class="card__sci">Phidippus regius · subadult female</p>
<p class="card__desc">A young subadult girl. Hasn't been handled much yet, but she's young enough to work with and warm up beautifully. Captive raised, never exposed to a male.</p>
<ul class="card__meta">
<li>Subadult female</li><li>Beginner-friendly</li><li>Healthy body shape</li>
</ul>
<div class="card__foot">
<span class="price">$50<small>+ shipping</small></span>
<a href="#contact" class="btn btn--primary btn--small" data-inquire="Iris — subadult female P. regius">Reserve</a>
</div>
</div>
</article>
<!-- Mango -->
<article class="card reveal">
<div class="card__media">
<img src="assets/spiders/females/mango.jpg" alt="Mango — subadult female regal jumper (Phidippus regius)" loading="lazy" />
<span class="badge">Available</span>
</div>
<div class="card__body">
<h3>Mango</h3>
<p class="card__sci">Phidippus regius · subadult female</p>
<p class="card__desc">Super friendly and a lovely handler. Mango is a confident subadult girl with gorgeous coloration. Captive raised, never exposed to a male.</p>
<ul class="card__meta">
<li>Subadult female</li><li>Handles well</li><li>Healthy body shape</li>
</ul>
<div class="card__foot">
<span class="price">$50<small>+ shipping</small></span>
<a href="#contact" class="btn btn--primary btn--small" data-inquire="Mango — subadult female P. regius">Reserve</a>
</div>
</div>
</article>
</div>
<!-- Starter kit -->
<div class="starter reveal">
<span class="tag">Free Gift</span>
<p><b>Every spider comes with a free Starter Kit</b> — a misting bottle, a soft paintbrush, and easy notes on molting &amp; instars to get you started right.</p>
</div>
<p class="note-line reveal">Coming soon: <em>Paraphidippus fartilis</em>. Ask us to join the waitlist.</p>
</div>
</section>
<!-- MEET THE MAMAS -->
<section class="section section--alt" id="mamas">
<div class="container">
<div class="section__head reveal">
<p class="eyebrow"><span class="dash"></span>Meet the Mamas</p>
<h2>The mothers behind every sling.</h2>
<p class="lede">Our mamas are wild-caught females who breed just once, then spend their short lives raising babies. That's why every baby we offer is <b>captive raised</b>. These girls aren't for sale — but we're proud to introduce them.</p>
</div>
<div class="grid mamas__grid">
<figure class="mama reveal"><img src="assets/spiders/mamas/fern.jpg" alt="Fern, a Phidippus otiosus female" loading="lazy"><figcaption class="mama__cap"><b>Fern</b><span>P. otiosus</span></figcaption></figure>
<figure class="mama reveal"><img src="assets/spiders/mamas/cleo.jpg" alt="Cleo, a Phidippus audax female" loading="lazy"><figcaption class="mama__cap"><b>Cleo</b><span>P. audax</span></figcaption></figure>
<figure class="mama reveal"><img src="assets/spiders/mamas/colette.jpg" alt="Colette, a Phidippus regius female" loading="lazy"><figcaption class="mama__cap"><b>Colette</b><span>P. regius</span></figcaption></figure>
<figure class="mama reveal"><img src="assets/spiders/mamas/demure.jpg" alt="Demure, a Phidippus regius female" loading="lazy"><figcaption class="mama__cap"><b>Demure</b><span>P. regius</span></figcaption></figure>
<figure class="mama reveal"><img src="assets/spiders/mamas/devine.jpg" alt="Devine, a Phidippus regius female" loading="lazy"><figcaption class="mama__cap"><b>Devine</b><span>P. regius</span></figcaption></figure>
<figure class="mama reveal"><img src="assets/spiders/mamas/delight.jpg" alt="Delight, a Phidippus regius female" loading="lazy"><figcaption class="mama__cap"><b>Delight</b><span>P. regius</span></figcaption></figure>
<figure class="mama reveal"><img src="assets/spiders/mamas/dove.jpg" alt="Dove, a Phidippus regius female" loading="lazy"><figcaption class="mama__cap"><b>Dove</b><span>P. regius</span></figcaption></figure>
<figure class="mama reveal"><img src="assets/spiders/mamas/inca.jpg" alt="Inca, a Phidippus regius female" loading="lazy"><figcaption class="mama__cap"><b>Inca</b><span>P. regius</span></figcaption></figure>
<figure class="mama reveal"><img src="assets/spiders/mamas/latte.jpg" alt="Latte, a Phidippus regius female" loading="lazy"><figcaption class="mama__cap"><b>Latte</b><span>P. regius</span></figcaption></figure>
<figure class="mama reveal"><img src="assets/spiders/mamas/lush.jpg" alt="Lush, a Phidippus regius female" loading="lazy"><figcaption class="mama__cap"><b>Lush</b><span>P. regius</span></figcaption></figure>
</div>
</div>
</section>
<!-- CARE -->
<section class="section" id="care">
<div class="container">
<div class="section__head reveal">
<p class="eyebrow"><span class="dash"></span>Care Guide</p>
<h2>Simple care for a happy jumper.</h2>
<p class="lede">Jumping spiders are some of the most rewarding inverts to keep. Here's the short version — a full printable care sheet is one scan away.</p>
</div>
<div class="grid care__grid">
<div class="care__card reveal">
<div class="care__num">01</div>
<h3>Enclosure</h3>
<p>Go vertical and well-ventilated. Slings (i3–6) do great in a 3×3&quot; cube; adults enjoy a roomy front-opening enclosure with cork bark, fake leaves and a hammock up top. Give them a "playground" — they love to climb and explore.</p>
</div>
<div class="care__card reveal">
<div class="care__num">02</div>
<h3>Substrate &amp; Falls</h3>
<p>Line the floor with soft <b>sphagnum moss</b> (or another reptile-safe moss). It holds a little humidity and gives a soft landing in case your jumper takes a tumble.</p>
</div>
<div class="care__card reveal">
<div class="care__num">03</div>
<h3>Temperature &amp; Humidity</h3>
<p>Room temperature (72–82°F) suits most homes. Keep humidity moderate — mist one side a few times a week, never soak. Bump humidity a little higher around molts.</p>
</div>
<div class="care__card reveal">
<div class="care__num">04</div>
<h3>Feeding</h3>
<p>Slings love <em>hydei</em> fruit flies. <b>Peanut beetle larvae (PBL)</b> are a newer, excellent feeder. Larger jumpers take appropriately sized crickets or BSFL. Offer a fresh feeder every few days.</p>
</div>
<div class="care__card reveal">
<div class="care__num">05</div>
<h3>Molting</h3>
<p>Molts are critical at <b>i5 and i7</b> — raise humidity a touch and do not disturb. Your jumper will seal into its hammock and fast. This is normal. Never pull them out.</p>
</div>
<div class="care__card reveal">
<div class="care__num">06</div>
<h3>After a Molt</h3>
<p>Wait a few days after your jumper leaves its hammock before feeding — their fangs need to harden first. Then resume normal feeding and enjoy their fresh new colors.</p>
</div>
</div>
<div class="care__qr reveal">
<img src="assets/care/care-qr.png" alt="QR code linking to the printable Storm Cloud Jumpers care sheet" width="128" height="128" />
<div class="t">
<h3>Printable Care Sheet</h3>
<p>Scan the code or <a href="care-sheet.html" class="accent" style="text-decoration:underline">open the care sheet</a> to print or save the full guide for your new jumper.</p>
</div>
</div>
</div>
</section>
<!-- SHIPPING -->
<section class="section shipping" id="shipping">
<div class="shipping__bg" aria-hidden="true"></div>
<div class="container">
<div class="section__head reveal">
<p class="eyebrow eyebrow--light"><span class="dash"></span>Shipping &amp; Live Arrival</p>
<h2 class="metal">Packed warm. Tracked all the way.</h2>
<p class="lede">We ship carefully and only when the weather is safe for your spider.</p>
</div>
<div class="grid ship__grid">
<div class="ship__card reveal">
<h4><span class="ic">✦</span> FedEx Only</h4>
<p>FedEx is the only carrier we use — it's the only legal option for shipping spiders. We do <b>not</b> ship UPS or USPS.</p>
</div>
<div class="ship__card reveal">
<h4><span class="ic">✦</span> Ships Mon–Wed</h4>
<p>Orders go out early in the week so your jumper is never sitting in a facility over a weekend.</p>
</div>
<div class="ship__card reveal">
<h4><span class="ic">✦</span> Overnight, Hub-to-Hub</h4>
<p>Overnight FedEx to your local hub ships in a live-arrival–covered box. <span class="ship__flag">Guaranteed alive</span></p>
</div>
<div class="ship__card reveal">
<h4><span class="ic">✦</span> 2-Day to Your Door</h4>
<p>A lower-cost option offered in mild spring &amp; fall weather. <span class="ship__flag">Not covered by the live guarantee</span></p>
</div>
</div>
<div style="text-align:center"><span class="callout reveal">Weather-appropriate heat or cool packs are always included, free.</span></div>
</div>
</section>
<!-- ABOUT -->
<section class="section section--alt" id="about">
<div class="container about__grid">
<div class="about__text reveal">
<p class="eyebrow"><span class="dash"></span>About Us</p>
<h2>A small keeper who loves these little jumpers.</h2>
<p class="lede">Storm Cloud Jumpers is a tiny, hands-on operation. Our mamas are wild-caught <em>Phidippus</em> who breed a single time and then spend their short lives as devoted mothers — so every baby we place is truly <b>captive raised</b>.</p>
<p>We raise each sling by hand, feed them well, and only send jumpers with a healthy body shape out the door. Big breeders charge a premium — we'd rather keep these charming spiders affordable and get them into caring homes.</p>
<ul class="bullets">
<li><b>Captive raised</b>, never wild-collected for sale.</li>
<li><b>Honest descriptions</b> — real photos of the actual lines.</li>
<li><b>Hobbyist-first</b> — real answers to your questions.</li>
<li><b>Free starter kit</b> with every spider.</li>
</ul>
</div>
<div class="about__visual reveal">
<img src="assets/brand/nimbus-poster.jpg" alt="Meet Nimbus — the face of Storm Cloud Jumpers" width="560" height="700" loading="lazy" />
</div>
</div>
</section>
<!-- CONTACT -->
<section class="section" id="contact">
<div class="container contact__grid">
<div class="contact__text reveal">
<p class="eyebrow"><span class="dash"></span>Reserve or Ask</p>
<h2>Ready to bring home a jumper?</h2>
<p class="lede">Tell us what you're looking for and we'll match you with a healthy, captive-raised spider and sort out shipping to you.</p>
<ul class="contact__list">
<li><span class="ic" aria-hidden="true"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m2 7 10 6 10-6"/></svg></span> <a href="mailto:stormcloudjumpers@gmail.com">stormcloudjumpers@gmail.com</a></li>
<li><span class="ic" aria-hidden="true"><svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M22 12a10 10 0 1 0-11.56 9.88v-6.99H7.9V12h2.54V9.8c0-2.5 1.49-3.89 3.77-3.89 1.09 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.77-1.63 1.56V12h2.78l-.44 2.89h-2.34v6.99A10 10 0 0 0 22 12Z"/></svg></span> <a href="https://www.facebook.com/61591317309985/" target="_blank" rel="noopener">Facebook — Storm Cloud Jumpers</a></li>
<li><span class="ic">✦</span> All sales &amp; inquiries handled right here.</li>
</ul>
</div>
<form class="form reveal" id="inquiryForm" novalidate>
<label>Your Name
<input type="text" name="name" required autocomplete="name" />
</label>
<label>Your Email
<input type="email" name="email" required autocomplete="email" />
</label>
<label>Which spider? (optional)
<input type="text" name="spider" id="spiderField" placeholder="e.g. Mango, or Northern Canopy sling" />
</label>
<label>Your Message
<textarea name="message" rows="4" placeholder="Species, age, color preference, shipping questions…"></textarea>
</label>
<button type="submit" class="btn btn--primary btn--block">Send Inquiry</button>
<p class="form__note">Sending opens your email app addressed to Storm Cloud Jumpers. Prefer to email directly? Write to <a href="mailto:stormcloudjumpers@gmail.com" class="accent">stormcloudjumpers@gmail.com</a>.</p>
<p class="form__msg form__msg--ok" id="formOk" hidden>Thanks! Your message is ready to send — we'll reply within a day or two.</p>
</form>
</div>
</section>
<!-- FOOTER -->
<footer class="footer">
<div class="container footer__inner">
<div class="footer__brand">
<img src="assets/brand/logo-dark-square.jpg" alt="Storm Cloud Jumpers logo" width="50" height="50" />
<p class="footer__name">Storm Cloud Jumpers<small>Small Size · Big Personality</small></p>
</div>
<nav class="footer__links" aria-label="Footer">
<a href="#available">Available</a>
<a href="#mamas">The Mamas</a>
<a href="#care">Care</a>
<a href="#shipping">Shipping</a>
<a href="#about">About</a>
<a href="#contact">Inquire</a>
<a class="footer__social" href="https://www.facebook.com/61591317309985/" target="_blank" rel="noopener"><svg viewBox="0 0 24 24" width="15" height="15" fill="currentColor" aria-hidden="true"><path d="M22 12a10 10 0 1 0-11.56 9.88v-6.99H7.9V12h2.54V9.8c0-2.5 1.49-3.89 3.77-3.89 1.09 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.77-1.63 1.56V12h2.78l-.44 2.89h-2.34v6.99A10 10 0 0 0 22 12Z"/></svg> Facebook</a>
</nav>
<p class="footer__copy">© <span id="year"></span> Storm Cloud Jumpers · jumpers.stormcloudhills.com · Captive-raised jumping spiders.</p>
</div>
</footer>
<!-- LIGHTBOX -->
<div class="lightbox" id="lightbox" role="dialog" aria-modal="true" aria-label="Enlarged photo" hidden>
<button class="lightbox__close" id="lightboxClose" aria-label="Close">&times;</button>
<figure class="lightbox__figure">
<img class="lightbox__img" id="lightboxImg" src="" alt="" />
<figcaption class="lightbox__cap" id="lightboxCap"></figcaption>
</figure>
</div>
<script src="script.js"></script>
</body>
</html>
Copy Permalink