🚚 Afal Logistics — Chemical Transport Landing

(open in new tab)

A bold, animated landing page for Afal Logistics, built with HTML, Tailwind CSS (CDN), and vanilla JavaScript.
The site features a cinematic hero, sticky cards with reveals, multi-section parallax storytelling, and responsive navigation.

Built by Xebec13.

---

✨ Features

• 🧭 Responsive navigation
  • Desktop topbar + mobile slide-in menu (accessible buttons with aria-label)
• 🎬 Hero with GSAP scroll fade/pin
  • Headline and subline fade out on scroll; pinned on desktop via matchMedia
• 🧱 Sticky feature cards
  • Three benefit cards animating in on scroll (scale + fade)
• 🖼️ Parallax story sections
  • Four full-screen steps with gradient overlays and background parallax (background-position tween)
• 📨 Contact section
  • Simple contact form with strong visual focus (Crimson glow & card shadows)
• ⚡ Lightweight setup
  • Pure HTML/CSS/JS; Tailwind via CDN; GSAP + ScrollTrigger via CDN

---

🛠 Tech Stack

• HTML5
• Tailwind CSS (CDN)
• Vanilla JavaScript
• GSAP 3 + ScrollTrigger

---

🚀 Installation

No build tools required – the project runs directly in the browser.

1. Clone the repository:
   https://github.com/Xebec13/Afal-Logistics.git

2. Open the index.html file in your browser.

That’s it – you’re good to go 🚀

🎥 Preview GIFs

GIFs are stored locally in this repo.

Hero, Navigation,

Cards Parallax Steps & Footer

---