https://github.com/jdegand/ui-menu-card-day-1494

UI Design Daily - #1494 Menu
https://github.com/jdegand/ui-menu-card-day-1494

ui-design-daily

Last synced: 3 months ago
JSON representation

UI Design Daily - #1494 Menu

• Host: GitHub
• URL: https://github.com/jdegand/ui-menu-card-day-1494
• Owner: jdegand
• Created: 2022-08-16T20:52:18.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2022-08-17T16:55:53.000Z (almost 3 years ago)
• Last Synced: 2025-01-22T09:12:43.503Z (5 months ago)
• Topics: ui-design-daily
• Language: CSS
• Homepage: https://jdegand.github.io/ui-menu-card-day-1494/
• Size: 48.8 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
UI Design Daily - #1494 Menu


## Table of contents

- [Overview](#overview)

- [Screenshots](#screenshots)

- [Links](#links)

- [Continued Development](#continued-development)

- [Useful Resources](#useful-resources)

## Overview

[UI Design Daily design](https://www.uidesigndaily.com/posts/figma-menu-card-day-1494) translated to real code.  

## Screenshots

![](ui-menu-card-desktop.png)

![](ui-menu-card-1024px.png)

![](ui-menu-card-1024px.png)

![](ui-menu-card-tablet-768px.png)

![](ui-menu-card-mobile-425px.png)

![](ui-menu-card-mobile-375px.png)

![](ui-menu-card-mobile-320px.png)

## Links

- [Github Pages](https://jdegand.github.io/ui-menu-card-day-1494)

## Continued Development

- the design is not practical for mobile screens 

- better to drop the circle entirely for smaller screens? The circle is just presentational.

- to keep same proportions on mobile - text would be 8px

- semantic html & accessibility 

## Useful Resources

- [Stack Overflow](https://stackoverflow.com/questions/34788537/responsive-circle-with-centered-content) - responsive circle

- [Stack Overflow](https://stackoverflow.com/questions/9358882/how-to-make-a-circle-around-content-using-css/9359039#9359039) - circle around content