Contact person: Business Client

Phone:Show

Email:Show

Location: Bengaluru, India

Budget: Recommended by industry experts

Time to start: As soon as possible

Project description:
"The current table view needs to be rebuilt as a fully responsive, card–based interface that mirrors my Figma file pixel-for-pixel. Only vanilla HTML5 and CSS3 are allowed; I want the layout handled with a mix of Grid and Flexbox, no external frameworks. Cards must display the load title, a color-coded status badge (exact HEX values are already defined in Figma), pickup and drop-off locations, driver, and date. Feel free to integrate the small icons shown in the mock-up as long as they remain faithful to the design.

On large screens the grid should flow 3–4 cards per row, tablets should snap cleanly to two, and phones to one—all without a hint of horizontal scrolling. Rounded corners, soft shadows, and the spacing hierarchy need to look identical to Figma, so please comment your CSS thoroughly to clarify decisions around gaps, padding, and typography scales.

I will provide the component specs and color codes as soon as the project starts. Code quality and visual precision are the priority—everything must line up the same on desktop, tablet, and mobile breakpoints.

Deliverables
• [login to view URL] (updated markup)
• [login to view URL] (well-commented, Grid/Flexbox only)
• [login to view URL] summarising breakpoints, class naming, and any spacing or colour notes

Acceptance will be based on a side-by-side comparison with Figma at 1440 px, 768 px, and 375 px widths and a quick audit in Chrome DevTools’ Lighthouse to confirm zero layout shifts." (client-provided description)