One page · Front-end interface
NFT is a build based on the Frontend Mentor challenges, starting from a single design image to recreate a one-page layout from scratch with HTML & CSS.
NFT is a build based on the Frontend Mentor challenges, starting from a single design image to recreate a one-page layout from scratch with HTML & CSS. NFTs are quickly becoming a popular way to create digital art and collectibles.
The challenge isn't only to reproduce the given design, but also to make sure the result looks as close to the original as possible. That takes creativity, technical knowledge and skilled execution.
This project concretely shows my command of the front-end fundamentals: semantic HTML, well-handled CSS and a careful reading of designs. Even on a simple one page, I faithfully translate a design intention into clean, responsive code. It is this rigor on the basics that I then carry over to fuller, more complex interfaces and websites for my clients.
The challenge
The challenge of this exercise was fidelity to the design: reproducing the NFT card pixel for pixel in HTML and CSS, without straying from the provided design.
The solution
- A faithful reproduction of the Frontend Mentor design, from the framing to the smallest visual details.
- HTML and CSS integration from scratch, without any framework, for clear and maintainable code.
- A responsive layout so the card stays crisp on both mobile and desktop.
Pixel-perfect integration
I reproduced the NFT card as closely as possible to the Frontend Mentor design, taking care of the margins, typography, rounded corners and contrasts to match the original design.
HTML and CSS without a framework
The interface is integrated from scratch with semantic HTML and well-handled CSS, without any external library, to keep the code clean, light and easy to read.
Responsive card
The card stays readable and well centered from mobile to desktop, with a layout that adapts cleanly to different screen sizes.
Desktop version
Tablet version
Carousel Vertical
Discover a new way to scroll through your photos, with a vertical carousel.
Carte Animee
The animated card is an interactive feature that lets users hide information on a card and reveal it on hover.
Carte QR Code
Carte QR Code is a build based on the Frontend Mentor challenges, starting from a design image to recreate a one-page layout from scratch with HTML & CSS.
A project along the same lines?
Tell me about your needs — I'll quickly let you know what's relevant and realistic.