Premium HDPE Pipes Landing Page

About the Task

This Task is a high-fidelity, fully responsive landing page developed for GushWork for assessment, Built entirely from scratch using vanilla HTML, CSS, and JavaScript (without any external frameworks or libraries), the goal was to deliver a pixel-perfect implementation based on strict Figma design specifications.

The page is designed with a modern, dynamic aesthetic that emphasizes user engagement and premium quality. It features a fluid responsive layout that gracefully adapts from large desktop monitors all the way down to small mobile screens under 360px.

Key Features as mentioned in assignment pdf

• Sticky Header Navigation: A sleek header that intelligently appears when scrolling past the first fold, providing seamless navigation without cluttering the initial hero view.
• Interactive Hero Carousel & Zoom: A custom-built image gallery with interactive thumbnails and a dynamic hover-zoom feature to inspect the high-grade materials up close.
• Horizontal Swipeable Carousels: Touch-friendly horizontal snap-scrolling implemented for the Versatile Applications and Portfolio sections to maximize usability on mobile devices.
• Interactive Modals: Custom, lightweight modal popups for "Request a Quote" and "Download Technical Datasheet" actions, ensuring lead generation forms are easily accessible without navigating away from the page.
• Sticky Product Banner: A dynamic, scroll-aware product banner displaying the price range and a "Get Custom Quote" call-to-action that elegantly sticks to the top of the viewport when the main navigation scrolls out of view.
• Modern CSS Architecture: Extensively utilizes CSS Flexbox, Grid, and Custom Properties (Variables) to maintain a highly flexible and consistent design system.

Project Structure

To adhere to the specific submission guidelines, the work is structured as a flat, straightforward directory containing only the essentials:

/ ├── index.html # The main HTML document containing semantic structure ├── styles.css # Consolidated stylesheet containing all global styles, components, and responsive overrides ├── script.js # Vanilla JavaScript handling UI logic, carousels, zoom, and modals ├── assets/ # Directory containing all optimized images and icons └── README.md # Project documentation

How to Run

Because this project uses vanilla web technologies, there are no complex build steps, packages, or dependencies to install.

1. Simply extract the files or clone the repository.
2. Open index.html directly in any modern web browser.

Code Quality Standards

• Semantic HTML5: Structured heavily for accessibility and SEO best practices as mentioned in assignment pdf.
• Clean CSS: Uses a logical cascade with media queries tailored to exact device breakpoints as mentioned in assignment pdf.
• Performant JS: Lightweight event listeners and custom functions ensure smooth animations without heavy library overhead as mentioned in assignment pdf.