html

screenshot of qr code that leads to front end mentor
001 QR Code

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.

Friday, November 17, 2023


a two-column layout displaying the results of a cognitive test
002 Results Summary

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.

Saturday, November 18, 2023


two-column layout showing a perfume and product details with price
003 Product Preview Card

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.

Saturday, November 18, 2023


single column card displaying an image of an nft along with description details
004 NFT Preview Card

A simple single-column layout featuring a one-of-a-kind NFT… dont miss out!

Saturday, November 18, 2023


single-column card showcasing a music streaming service with a yearly subscription plan and payment button
005 Order Summary

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.

Saturday, November 18, 2023


women working together in an office
006 Stats Preview Card

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.

Saturday, November 18, 2023


three-column layout describing unique features of three different vehicle types
007 Three Column Card

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.

Saturday, November 18, 2023


a user profile card centered in the screen displaying profile photo and social media stats
008 Profile Card

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.

Saturday, November 18, 2023


a grid layout with an irregular arrangement of grid cells. each grid cell demonstrates the properties of the product
009 Four Card Feature

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.

Saturday, November 18, 2023


a product review page demonstrating user reviews in a stylized staggered progression
010 Social Proof

A social-proof page for what seems to be a fantastic product! Star ratings and customer reviews are laid out in a staggered progression.

Saturday, November 18, 2023