HTML/CSS Responsive Card Layout

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

I’m handing you an existing layout (download it here: https://drive.google.com/file/d/1HvJS1qSXid-lCrG0aUAQpXKnCx5HoHd1/view?usp=drivesdk) along with the reference design in Figma (https://www.figma.com/design/rOIQfwcBS0VBGKF3TUG8YK/Loadsor-Task?node-id=0-1&t=FcucuYDYFVBhqmXb-1). Your task is to turn the current table-style view into the card-based interface shown in the Figma and make sure it scales beautifully on desktop, tablet, and mobile screens. Pure HTML and vanilla CSS only—no Bootstrap, Tailwind, or JavaScript helpers. I’m looking for clean, well-commented code that mirrors the Figma spacing, typography, and visual hierarchy at every breakpoint. Deliverables • Updated HTML and CSS files replacing the table with responsive cards • Media queries that keep the layout pixel-close to the Figma on common desktop, tablet, and phone widths • Brief read-me explaining your breakpoint strategy and any class naming conventions Acceptance I’ll drop your files into the existing project, open them in Chrome, Safari, and Edge, and resize from 1440 px down to 320 px. If the cards stay aligned, no horizontal scroll appears, and the look matches the Figma screenshots, we’re done.