Sunnyside Landing Page is a Frontend Mentor solution that implements the Sunnyside agency landing page challenge, delivering a responsive, mobile-first marketing page with hover states.
What is Sunnyside Landing Page?
This repository contains a worked solution to the Sunnyside agency landing page challenge on Frontend Mentor. The challenge brief calls for a landing page for a creative agency named Sunnyside, where users can view the optimal layout depending on their device's screen size and see hover states for all interactive elements. The solution takes the challenge requirements as input and produces a complete Next.js project that meets them.
The README's "Built with" section lists semantic HTML5 markup, CSS custom properties, Flexbox, CSS Grid, a mobile-first workflow, React, the Next.js framework, and Styled Components for styling. The repository metadata additionally includes Tailwind CSS and PostCSS among its topics, so both styling approaches are referenced across the project files.
Key Features
- Responsive layout — Uses a mobile-first workflow with Flexbox and CSS Grid so the page adapts to any device width.
- Hover states — Every interactive element on the page has a hover state to signal that it is clickable.
- Semantic HTML5 — The markup relies on semantic elements for structure, accessibility, and SEO.
- CSS custom properties — Design values are stored in CSS variables, making theme changes centralized.
- Next.js framework — Built on React with Next.js, enabling server-side rendering and static generation.
- Styled Components / Tailwind CSS — The README lists styled-components; repository topics reference Tailwind CSS and PostCSS.
Who is it for?
- Frontend Mentor participants — Use this as a reference implementation to compare against your own attempt at the Sunnyside challenge.
- Developers learning responsive design — Study how the solution combines mobile-first CSS, Flexbox, Grid, and hover effects.
- Developers exploring Next.js — See a real project structure using React and Next.js for a static marketing page.
What can you do with it?
- Compare solutions — Check how this Next.js implementation fulfills the two challenge requirements (responsive layout and hover states).
- Learn styling patterns — Examine how CSS custom properties, Flexbox, and Grid are combined in a single-page layout.
- Understand project structure — Review the file layout of a Frontend Mentor solution built with a modern React framework.
FAQ
What is the Sunnyside agency landing page challenge?
It is a Frontend Mentor challenge where developers build a landing page for a creative agency called Sunnyside. The required features are a responsive layout and hover states for all interactive elements.
What frontend framework is used in this solution?
The solution is built with Next.js, a React framework, according to the README's built-with section. The repository metadata also mentions Tailwind CSS and PostCSS among its topics.
Does the landing page include hover states?
Yes, the challenge requires hover states for all interactive elements, and this solution implements them as part of the completed build.
Is this an official solution from Frontend Mentor?
No, it is a community-submitted solution. The README is written by an individual developer and includes placeholders for links and author information.
