Bento Grid Food Delivery
Build a bold and modern food delivery landing page based on the provided design. The layout should use a bento grid structure with multiple visual cards, including featured food items, app preview, restaurant notifications, sales analytics, menu items, order status, customer image section, ratings card, and map/delivery tracking card. Use HTML for structure and CSS for styling only. Focus on strong grid layout, card spacing, rounded corners, visual hierarchy, colorful sections, and responsive behavior. The final result should feel like a polished modern landing page made from multiple connected content blocks.
Project Requirements
- Build the full landing page based on the provided design
- Use semantic HTML5 structure
- Style the full interface using CSS only
- Create a bento grid layout with multiple content cards
- Build a featured burger card
- Create a mobile app preview card
- Add restaurant notification cards
- Build a special menu section with food item cards
- Create a sales analytics card with bar chart styling using CSS
- Add a customer or lifestyle image card
- Create a quick action or status card
- Build a ratings or testimonial card
- Add a map or delivery tracking card
- Use consistent border radius and spacing across all cards
- Use proper typography hierarchy and color contrast
- Add hover effects for cards where appropriate
- Make the layout responsive for tablet and mobile devices
- Keep code clean and organized across HTML and CSS files
Ready to submit your solution?
Upload your project for mentor review and showcase your structure, polish, and implementation quality.
Login Required
You need to be logged in to submit your solution for this challenge.