# DropNest — Dropshipping Fulfillment Website Template

A single-page, animation-rich marketing template for dropshipping, 3PL and ecommerce-logistics brands. Pure HTML + CSS + vanilla JavaScript — no build step, no dependencies, no framework. Drop the folder on any static host and it runs.

✨ Features

🎬 Counting preloader	Animated percentage, dotted world map, country marquee, panel slide-away
🖱️ Custom cursor	Blend-mode dot + magnetic ring with contextual labels on every interactive element
🧭 Smart navigation	Hide-on-scroll, blur-on-scroll, auto light/dark inversion over dark sections, full-screen mobile menu with clip-path reveal
📜 Scroll reveals	IntersectionObserver line-masking headings and staggered fade-ups
🔢 Animated counters	Eased number count-up for stats + live km/h throughput readout
🃏 Sticky service stack	Six sticky cards that layer as you scroll, inverting to dark on hover
🌫️ Parallax layers	Clouds, aircraft, parcels, van and full-bleed backgrounds move at independent depths
🖼️ Network band	Full-bleed parallax photo band with floating parcel renders and a 3-up caption strip
♾️ Infinite marquees	Hero country ticker, service marquee, dual-direction partner rows
💬 Testimonial slider	Snap-scroll carousel with prev/next controls
❓ Accordion FAQ	Single-open accordion with measured max-height transitions
📊 Scroll progress bar	Fixed top indicator
📱 Fully responsive	3 breakpoints + prefers-reduced-motion support

---

📁 Structure

dropnest-fulfillment-template/
├── index.html            # the entire page
├── assets/
│   ├── css/style.css     # all styling + design tokens
│   ├── js/main.js        # all interactions
│   ├── img/              # 18 photos & product renders
│   └── svg/              # cloud, star, dotted map
├── .gitignore
├── .nojekyll             # required for GitHub Pages
├── robots.txt
├── sitemap.xml
├── LICENSE
└── README.md

---

🎨 Customising

Colors / fonts — edit the tokens at the top of assets/css/style.css:

:root {
  --primary: #0016cb; /* brand blue */
  --secondary: #f50; /* accent orange (button fills, star) */
  --black: #111;
  --font-heading: "Archivo", Arial, sans-serif;
  --font-body: "Inter", Arial, sans-serif;
  --font-mono: "Roboto Mono", monospace;
}

Text — everything lives in index.html, grouped by clearly commented sections (<!-- ====== HERO ====== --> etc.).

Images — replace files in assets/img/ keeping the same filenames, or update the src attributes. Recommended: JPG/WebP ≤ 300 KB, PNG with transparency for the floating objects.

Animation timing — tune the shared easing in --ease and the durations inside .rv, .rv-line and main.js.

---

🚀 Run locally

Just double-click index.html. For a proper local server:

python3 -m http.server 8080
# open http://localhost:8080

---

📦 License

MIT — free for personal and commercial use. Images are AI-generated placeholders; swap them for your own before launch.

⭐ If you find this template useful, please leave a star! ⭐