The first and simplest of the Front End Mentor Challenges. It is a QR Code card that brings you to the Front End Mentor website. It is centered in the viewport and responds elegantly to virtually all viewport sizes.
November 17, 2023
A simple two-column layout displaying what appears to be the results of a mental acuity assessment. The results card is centered in the viewport and transitions to a vertical layout at smaller viewport sizes. Features a button that changes style on hover.
November 18, 2023
A simple two-column layout featuring the image of a perfume bottle and its product details. The product card is centered in the viewport and transitions to a vertical layout at smaller viewport sizes. The image elegantly responds to both horizontal and vertical viewport adjustment. Features a button that changes style on hover.
November 18, 2023
A simple single-column layout featuring a one-of-a-kind NFT... dont miss out!
November 18, 2023
A simple single-column layout presenting the user with the final step before confirming purchase of a music streaming service. Demonstrates a number of buttons and links that change style on hover.
November 18, 2023
A two-column layout featuring the faces of our very happy customers... and the stats that make them happy! The image responds gracefully to both horizontal and vertical changes in viewport size. The image also has a deep purple tint in the form of a transparent overlay.
November 18, 2023
A very simple yet elegant three-column layout. The elegance is in the use of the inherent block-layout properties of the HTML elements. All that is needed is to define each column, and the rest flows into place. Responds to changes in viewport size and demonstrates buttons that change styling on hover.
November 18, 2023
An identification card displaying a user's profile picture, age, location and various media stats. Positioning the profile pic is the most complicated part of this demo.
November 18, 2023
A product feature page for what appears to be an AI-powered SaaS. The product features are laid out in cards in a stylized cross formation.
November 18, 2023
A social-proof page for what seems to be a fantastic product! Star ratings and customer reviews are laid out in a staggered progression.
November 18, 2023
A three-section grid layout advertising a community around the product and the price and benefits of the product. Demonstrates a button that changes style on hover.
November 18, 2023
A very simple landing page showing mokups for various devices, a header and blurb and a button that changes style on hover.
November 19, 2023
An intricate grid layout of interlocking cells. Each grid cell represents a customer interaction displaying their profile photo, verification status and review of the product.
November 19, 2023
A stylized progress meter representing consumed vs. available storage in a cloud storage service. TODO: clickable icon links.
November 19, 2023
An elegant landing page in a single-column layout displaying the product on multiple devices, clickable download links that change styling on hover, product features, industry consumers and a footer with links to more information.
November 19, 2023
An elegant landing page in a single-column layout displaying mockups for desktop and mobile, product benefits, several sign up buttons that change styling on hover and a footer with more information.
November 19, 2023
A dense landing page advertising the benefits of a cloud storage service. Demonstrates various clickable links, email submission forms, changing backgrounds and a footer with links to more information.
November 19, 2023
A sophisticated single-column landing page with alternating stylized backgrounds, buttons that change style on hover, a footer with links to more information and an email submission form.
November 19, 2023
A simple layout centered in the viewport displaying a phone with a sophisticated layout featuring chatter profile, image sharing, alternating colors, interactive selection cards and a text message input section.
November 19, 2023