One page · Front-end interface
Menu Dropdown: Dropdown Menu is a build based on the Frontend Mentor challenges, starting from an image design to recreate a one-page layout from scratch with HTML & CSS.
Dropdown Menu is a build based on the Frontend Mentor challenges, starting from an image design to recreate a one-page layout from scratch with HTML & CSS.
Dropdown menus are a great way to display a lot of information in a small space. They are used in many websites and applications, from navigation menus to product filters.
This exercise highlights my integration discipline: starting from a static image and rendering it as closely as possible in HTML/CSS. It shows my command of positioning, of managing a dropdown menu's display states and of restrained CSS animations. It is exactly the kind of careful work I then apply, on a larger scale, to the interfaces of my client projects.
The challenge
Faithfully render a static design as a functional web page, with a smooth and responsive dropdown navigation menu, using HTML and CSS only.
The solution
- Reproduction of the design from scratch in HTML and CSS, as close as possible to the provided design.
- Management of the opening, closing and transitions of the dropdown menus in CSS.
- Responsive and accessible layout, from mobile to large screens.
Integration faithful to the design
I started from a simple image design to reproduce it as closely as possible in HTML and CSS, respecting the layout, spacing and typography of the original interface.
Dropdown menu in CSS
The navigation menus open and close cleanly, with careful management of display states and transitions, for smooth and readable interaction.
Responsive layout
The one-page interface adapts from mobile to large screens: the elements rearrange and the dropdown menus stay comfortable to use at any screen size.
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.