Photosnap

A Frontend Mentor design taken through Webflow rather than code. Photosnap is a marketing site for a fictional platform where photographers publish photo stories — four pages of it, built on the MAST framework so the styling stays in a reusable class system instead of one-off selectors.

Features

• Four pages — Home, Stories, Features, and Pricing — sharing one component library
• Featured stories come from a Webflow CMS collection, so adding a story is a CMS entry rather than a design change
• Pricing page pairs a monthly/yearly billing toggle with a full plan comparison table
• Reusable components with Webflow variants, so a card or button changes in one place
• Whole-card click targets via a covering link, and screen-reader-only labels where the visual design leaves text out
• Responsive across the framework’s grid breakpoints, from a single mobile column up to the desktop layout

Build notes

The point of this one was building to a system rather than styling screens, which is most of what MAST gives you:

• Utilities carry the repetitive work. Spacing, sizing, and visibility come from u- prefixed classes (u-mb-0, u-w-100, u-sr-only), so those values stay consistent site-wide and don’t get re-invented per section.
• Layout uses the framework grid, not wrapper divs. Sections compose from row and col classes with breakpoint variants like col-md-6 and col-sm-12, which keeps the DOM shallower than nesting a div per alignment tweak.
• Variants are combo classes. A base class plus a cc- modifier (cc-monthly, cc-yearly, cc-section) handles state and context, so variations hang off one base style rather than forking it.
• Component internals are namespaced. Elements belonging to a component are named for their parent — story-cards_col, pricing-toggle_checkbox, table-pricing_cell — which keeps a component’s styles findable and self-contained in the Webflow Designer’s flat class list.