Bento Grid

A Responsive Bento Grid Landing Page for an AI Company

Mobile Preview (375x812)	Desktop Preview (1440x960)

This project is a fully responsive Bento Grid landing page for a fictional AI company. The layout showcases different platform features using uniquely styled bento-style cards with semantic HTML and accessible design.

Created as part of the building challenges from Frontend Mentor.

---

Overview

The project features a modern layout using CSS Grid to form a bento-style visual structure, with each section styled as a unique card. It supports full responsiveness from mobile to desktop using mobile-first design and fluid spacing.

The theme toggle is powered by JavaScript and persists user preferences using localStorage. The design includes light/dark themes powered by custom CSS variables, and all typography, spacing, and color transitions are handled via clamp() and custom properties.

---

Features

• Bento Grid layout using grid-template-areas
• Light and Dark Mode with theme toggle
• LocalStorage preference saving
• Accessible, semantic HTML with screen reader-only classes
• Fully responsive design (Mobile → Desktop)
• Custom color schemes with WCAG-compliant contrast
• Smooth transitions (respects prefers-reduced-motion)
• Font loading via @font-face with font-display: swap
• Google Lighthouse performance report included

---

What I Learned

• How to build a Bento Grid layout using grid-template-areas and media queries
• Advanced use of CSS custom properties for theming and layout control
• Structuring accessible HTML with screen reader-only utility classes
• Managing dark mode with JavaScript and localStorage
• Writing transition-safe code that respects motion preferences
• Using clamp() for fluid typography and spacing across breakpoints
• Building scalable components and managing project styles cleanly

---

Tech Used

• HTML5
• CSS3
• JavaScript (minimal)
• Git
• GitHub
• Netlify

---

Design Reference & Tools

• JPG design image
• PerfectPixel

---

How to Run

1. Clone the repository
2. Open index.html in your browser

---

Live Demo

Or you can check out the live website here

---

Performance Report

A Google Lighthouse audit was conducted on the final version of this project. You can view the full report here.

---

Author

Created by Elmar Chavez

Month/Year: July 2025

Journey: 4^th month of learning frontend web development.