311 lines
13 KiB
HTML
311 lines
13 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8" />
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|||
|
|
<meta name="description" content="Storm Cloud Jumpers — premium captive-bred jumping spiders. Small size. Big personality." />
|
|||
|
|
<title>Storm Cloud Jumpers — Jumping Spiders</title>
|
|||
|
|
<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@300;400;500;600;700;800&family=Oswald:wght@500;600;700&display=swap" rel="stylesheet" />
|
|||
|
|
<link rel="stylesheet" href="styles.css" />
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
|
|||
|
|
<!-- NAV -->
|
|||
|
|
<header class="nav" id="nav">
|
|||
|
|
<div class="nav__inner">
|
|||
|
|
<a href="#top" class="nav__brand" aria-label="Storm Cloud Jumpers home">
|
|||
|
|
<span class="nav__logo" aria-hidden="true"></span>
|
|||
|
|
<span class="nav__name">STORM<span class="accent">/</span>CLOUD</span>
|
|||
|
|
</a>
|
|||
|
|
<nav class="nav__links" aria-label="Primary">
|
|||
|
|
<a href="#about">About</a>
|
|||
|
|
<a href="#spiders">Spiders</a>
|
|||
|
|
<a href="#care">Care</a>
|
|||
|
|
<a href="#shipping">Shipping</a>
|
|||
|
|
<a href="#contact" class="nav__cta">Contact</a>
|
|||
|
|
</nav>
|
|||
|
|
<button class="nav__burger" id="burger" aria-label="Menu" aria-expanded="false">
|
|||
|
|
<span></span><span></span><span></span>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
<!-- HERO -->
|
|||
|
|
<section class="hero" id="top">
|
|||
|
|
<div class="hero__clouds" data-parallax="0.4"></div>
|
|||
|
|
<div class="hero__content">
|
|||
|
|
<div class="hero__logo" aria-hidden="true">
|
|||
|
|
<svg viewBox="0 0 200 180" xmlns="http://www.w3.org/2000/svg">
|
|||
|
|
<defs>
|
|||
|
|
<linearGradient id="cloudGrad" x1="0" y1="0" x2="0" y2="1">
|
|||
|
|
<stop offset="0%" stop-color="#ffffff"/>
|
|||
|
|
<stop offset="100%" stop-color="#9a9a9a"/>
|
|||
|
|
</linearGradient>
|
|||
|
|
</defs>
|
|||
|
|
<path d="M40 110 Q15 110 15 85 Q15 60 40 60 Q45 35 75 35 Q100 35 105 60 Q130 35 155 50 Q185 55 185 85 Q185 110 160 110 Z"
|
|||
|
|
fill="url(#cloudGrad)" stroke="#0d0d0d" stroke-width="6" stroke-linejoin="round"/>
|
|||
|
|
<path d="M105 30 L80 95 L100 95 L75 165 L130 80 L108 80 L130 30 Z"
|
|||
|
|
fill="#e02828" stroke="#0d0d0d" stroke-width="4" stroke-linejoin="round"/>
|
|||
|
|
</svg>
|
|||
|
|
</div>
|
|||
|
|
<h1 class="hero__title">
|
|||
|
|
<span class="t1">STORM<span class="accent">/</span>CLOUD</span>
|
|||
|
|
<span class="t2">— JUMPERS —</span>
|
|||
|
|
</h1>
|
|||
|
|
<p class="hero__tag">SMALL SIZE. BIG PERSONALITY.</p>
|
|||
|
|
<div class="hero__cta">
|
|||
|
|
<a href="#spiders" class="btn btn--primary">View Spiders</a>
|
|||
|
|
<a href="#about" class="btn btn--ghost">Learn More</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="hero__scroll" aria-hidden="true">
|
|||
|
|
<span></span>
|
|||
|
|
<p>SCROLL</p>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- ABOUT -->
|
|||
|
|
<section class="section about" id="about">
|
|||
|
|
<div class="container about__grid">
|
|||
|
|
<div class="about__text reveal">
|
|||
|
|
<p class="eyebrow"><span class="dash"></span>About Us</p>
|
|||
|
|
<h2>Captive-bred jumpers, raised with obsessive care.</h2>
|
|||
|
|
<p class="lede">
|
|||
|
|
Storm Cloud Jumpers is a small, hands-on breeder specializing in healthy,
|
|||
|
|
well-socialized jumping spiders. Every spiderling we ship is hand-fed,
|
|||
|
|
health-checked, and packed for a stress-free journey to its new home.
|
|||
|
|
</p>
|
|||
|
|
<ul class="bullets">
|
|||
|
|
<li><strong>100% captive-bred</strong> — never wild-caught.</li>
|
|||
|
|
<li><strong>Health guarantee</strong> on every live arrival.</li>
|
|||
|
|
<li><strong>Care sheet included</strong> — tailored to species & age.</li>
|
|||
|
|
<li><strong>Hobbyist-first</strong> — real answers, real photos.</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<div class="about__visual reveal">
|
|||
|
|
<div class="card-stack">
|
|||
|
|
<div class="card-stack__bg" data-parallax="0.1"></div>
|
|||
|
|
<div class="card-stack__fg">
|
|||
|
|
<div class="stat"><span>100%</span><p>Captive Bred</p></div>
|
|||
|
|
<div class="stat"><span>50+</span><p>Slings Hatched / mo</p></div>
|
|||
|
|
<div class="stat"><span>24h</span><p>Live Arrival Window</p></div>
|
|||
|
|
<div class="stat"><span>★ 4.9</span><p>Hobbyist Rated</p></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- PARALLAX BREAK -->
|
|||
|
|
<section class="parallax-break" aria-hidden="true">
|
|||
|
|
<div class="parallax-break__bg" data-parallax="0.3"></div>
|
|||
|
|
<div class="parallax-break__quote">
|
|||
|
|
<p>“Curious. Charismatic. Fearless.”</p>
|
|||
|
|
<span>— the jumping spider, in three words</span>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- SPIDERS -->
|
|||
|
|
<section class="section spiders" id="spiders">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="section__head reveal">
|
|||
|
|
<p class="eyebrow"><span class="dash"></span>Available Now</p>
|
|||
|
|
<h2>Meet the jumpers.</h2>
|
|||
|
|
<p class="lede">A rotating selection of our healthiest slings, juveniles, and adults.</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="grid spiders__grid">
|
|||
|
|
<article class="spider reveal">
|
|||
|
|
<div class="spider__img spider__img--regius"></div>
|
|||
|
|
<div class="spider__body">
|
|||
|
|
<h3>Phidippus regius</h3>
|
|||
|
|
<p class="spider__tag">Regal Jumper · Florida lineage</p>
|
|||
|
|
<ul class="spider__meta">
|
|||
|
|
<li>Size: 10–22mm</li>
|
|||
|
|
<li>Lifespan: ~1.5 yrs</li>
|
|||
|
|
<li>Temperament: Bold, curious</li>
|
|||
|
|
</ul>
|
|||
|
|
<div class="spider__foot">
|
|||
|
|
<span class="price">$35+</span>
|
|||
|
|
<a href="#contact" class="btn btn--small">Inquire</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</article>
|
|||
|
|
|
|||
|
|
<article class="spider reveal">
|
|||
|
|
<div class="spider__img spider__img--audax"></div>
|
|||
|
|
<div class="spider__body">
|
|||
|
|
<h3>Phidippus audax</h3>
|
|||
|
|
<p class="spider__tag">Bold Jumper · classic North American</p>
|
|||
|
|
<ul class="spider__meta">
|
|||
|
|
<li>Size: 8–18mm</li>
|
|||
|
|
<li>Lifespan: ~1 yr</li>
|
|||
|
|
<li>Temperament: Active, alert</li>
|
|||
|
|
</ul>
|
|||
|
|
<div class="spider__foot">
|
|||
|
|
<span class="price">$20+</span>
|
|||
|
|
<a href="#contact" class="btn btn--small">Inquire</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</article>
|
|||
|
|
|
|||
|
|
<article class="spider reveal">
|
|||
|
|
<div class="spider__img spider__img--otiosus"></div>
|
|||
|
|
<div class="spider__body">
|
|||
|
|
<h3>Phidippus otiosus</h3>
|
|||
|
|
<p class="spider__tag">Canopy Jumper · arboreal beauty</p>
|
|||
|
|
<ul class="spider__meta">
|
|||
|
|
<li>Size: 10–20mm</li>
|
|||
|
|
<li>Lifespan: ~1 yr</li>
|
|||
|
|
<li>Temperament: Calm, climby</li>
|
|||
|
|
</ul>
|
|||
|
|
<div class="spider__foot">
|
|||
|
|
<span class="price">$30+</span>
|
|||
|
|
<a href="#contact" class="btn btn--small">Inquire</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</article>
|
|||
|
|
|
|||
|
|
<article class="spider reveal">
|
|||
|
|
<div class="spider__img spider__img--mystaceus"></div>
|
|||
|
|
<div class="spider__body">
|
|||
|
|
<h3>Phidippus mystaceus</h3>
|
|||
|
|
<p class="spider__tag">Mustached Jumper · fluffy & rare</p>
|
|||
|
|
<ul class="spider__meta">
|
|||
|
|
<li>Size: 9–17mm</li>
|
|||
|
|
<li>Lifespan: ~1 yr</li>
|
|||
|
|
<li>Temperament: Gentle, shy</li>
|
|||
|
|
</ul>
|
|||
|
|
<div class="spider__foot">
|
|||
|
|
<span class="price">$45+</span>
|
|||
|
|
<a href="#contact" class="btn btn--small">Inquire</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</article>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- CARE -->
|
|||
|
|
<section class="section care" id="care">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="section__head reveal">
|
|||
|
|
<p class="eyebrow"><span class="dash"></span>Husbandry</p>
|
|||
|
|
<h2>Care made simple.</h2>
|
|||
|
|
<p class="lede">Jumpers are some of the easiest invertebrates to keep — here's the short version.</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="grid care__grid">
|
|||
|
|
<div class="care__card reveal">
|
|||
|
|
<div class="care__num">01</div>
|
|||
|
|
<h3>Enclosure</h3>
|
|||
|
|
<p>Vertical, well-ventilated. ~4×4×6" for slings, ~6×6×10" for adults. Cork bark, fake leaves, a cozy hammock at the top.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="care__card reveal">
|
|||
|
|
<div class="care__num">02</div>
|
|||
|
|
<h3>Temperature</h3>
|
|||
|
|
<p>72–82°F is the sweet spot. Avoid direct sun and drafts. Room temp works for most homes year-round.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="care__card reveal">
|
|||
|
|
<div class="care__num">03</div>
|
|||
|
|
<h3>Humidity</h3>
|
|||
|
|
<p>40–60%. Mist one side of the enclosure a few times per week — never soak. Cross-ventilation is essential.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="care__card reveal">
|
|||
|
|
<div class="care__num">04</div>
|
|||
|
|
<h3>Feeding</h3>
|
|||
|
|
<p>Slings: flightless fruit flies, 2–3×/week. Adults: small crickets, mealworms, BSFL — every 4–6 days.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="care__card reveal">
|
|||
|
|
<div class="care__num">05</div>
|
|||
|
|
<h3>Handling</h3>
|
|||
|
|
<p>Optional, but jumpers are famously personable. Low, slow, over a soft surface. Always let them come to you.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="care__card reveal">
|
|||
|
|
<div class="care__num">06</div>
|
|||
|
|
<h3>Molting</h3>
|
|||
|
|
<p>Expect a few day fast before each molt — they hide in their hammock. Don't disturb. Feed 24h after they emerge.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- SHIPPING / GUARANTEE BREAK -->
|
|||
|
|
<section class="parallax-break parallax-break--alt" id="shipping" aria-hidden="false">
|
|||
|
|
<div class="parallax-break__bg parallax-break__bg--alt" data-parallax="0.25"></div>
|
|||
|
|
<div class="container parallax-break__content">
|
|||
|
|
<div class="reveal">
|
|||
|
|
<p class="eyebrow eyebrow--light"><span class="dash"></span>Shipping & Guarantee</p>
|
|||
|
|
<h2 class="light">Packed warm. Tracked the whole way. Guaranteed alive.</h2>
|
|||
|
|
<div class="guarantee">
|
|||
|
|
<div><h4>Live Arrival</h4><p>Every order ships with weather-appropriate packing and a 24-hour live arrival guarantee.</p></div>
|
|||
|
|
<div><h4>USPS Priority & Express</h4><p>Ships Mon–Wed only. Heat or cool packs included free when temps demand.</p></div>
|
|||
|
|
<div><h4>Hold For Pickup</h4><p>We default to HFP at your local post office for the safest delivery.</p></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- CONTACT -->
|
|||
|
|
<section class="section contact" id="contact">
|
|||
|
|
<div class="container contact__grid">
|
|||
|
|
<div class="contact__text reveal">
|
|||
|
|
<p class="eyebrow"><span class="dash"></span>Get In Touch</p>
|
|||
|
|
<h2>Ready to bring home a jumper?</h2>
|
|||
|
|
<p class="lede">Tell us a bit about what you're looking for and we'll match you with a healthy, well-socialized spider.</p>
|
|||
|
|
<ul class="contact__list">
|
|||
|
|
<li><span class="ico ico--user"></span>Storm Cloud Jumpers</li>
|
|||
|
|
<li><span class="ico ico--phone"></span>(555) 010-0420</li>
|
|||
|
|
<li><span class="ico ico--mail"></span>hello@stormcloudjumpers.com</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<form class="contact__form reveal" onsubmit="event.preventDefault(); this.querySelector('.form__success').hidden=false; this.reset();">
|
|||
|
|
<label>
|
|||
|
|
<span>Your Name</span>
|
|||
|
|
<input type="text" name="name" required autocomplete="name" />
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>Your Email</span>
|
|||
|
|
<input type="email" name="email" required autocomplete="email" />
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>Your Number</span>
|
|||
|
|
<input type="tel" name="phone" autocomplete="tel" />
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>What are you looking for?</span>
|
|||
|
|
<textarea name="message" rows="4" placeholder="Species, age, color preference, questions…"></textarea>
|
|||
|
|
</label>
|
|||
|
|
<button type="submit" class="btn btn--primary btn--block">Send Inquiry</button>
|
|||
|
|
<p class="form__success" hidden>Thanks — we'll get back to you within 24 hours.</p>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- FOOTER -->
|
|||
|
|
<footer class="footer">
|
|||
|
|
<div class="container footer__inner">
|
|||
|
|
<div class="footer__brand">
|
|||
|
|
<span class="nav__logo" aria-hidden="true"></span>
|
|||
|
|
<div>
|
|||
|
|
<p class="footer__name">STORM<span class="accent">/</span>CLOUD <span class="footer__sub">JUMPERS</span></p>
|
|||
|
|
<p class="footer__tag">SMALL SIZE. BIG PERSONALITY.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="footer__links">
|
|||
|
|
<a href="#about">About</a>
|
|||
|
|
<a href="#spiders">Spiders</a>
|
|||
|
|
<a href="#care">Care</a>
|
|||
|
|
<a href="#contact">Contact</a>
|
|||
|
|
</div>
|
|||
|
|
<p class="footer__copy">© <span id="year"></span> Storm Cloud Jumpers. All rights reserved.</p>
|
|||
|
|
</div>
|
|||
|
|
</footer>
|
|||
|
|
|
|||
|
|
<script src="script.js"></script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|