Responsive Transport Load Cards

Замовник: AI | Опубліковано: 05.12.2025

I need a clean, lightweight HTML5 + CSS3 layout that matches my Figma exactly and performs smoothly at every breakpoint. The UI is a mobile-first, card-based grid that shows transport loads in one column on phones, snaps to two columns at 768 px, and expands to three or four columns from 1024 px upward. CSS Grid and Flexbox should do all the heavy lifting—no frameworks or JavaScript. Each card must contain the load title, a colour-coded status badge, pickup and drop-off locations, driver name and date, all spaced consistently with subtle shadows for depth. The load title is the hero element, so please style it in a sans-serif face and make the important keywords pop without sacrificing readability on small screens. I will share the Figma file once we start; the final hand-off is a single, well-commented HTML file and a matching CSS file that renders pixel-perfect across modern browsers and devices.