https://github.com/el634dev/dali-picture-tool

Tool where you can change the saturation, hue and brightness
https://github.com/el634dev/dali-picture-tool

Last synced: 20 days ago
JSON representation

Tool where you can change the saturation, hue and brightness

• Host: GitHub
• URL: https://github.com/el634dev/dali-picture-tool
• Owner: el634dev
• Created: 2024-05-08T18:17:32.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2024-06-16T21:07:55.000Z (6 months ago)
• Last Synced: 2024-06-16T22:25:01.218Z (6 months ago)
• Language: HTML
• Homepage: https://el634dev.github.io/dali-picture-tool/
• Size: 1.64 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# Dali Picture Tool

> Made a responsive and as accessible picture tool to change the saturation, hue and brightness

## Responsive design

I added three break points to make the site work on mobile, tablet, and desktop. 

# Desktop

On desktop the site should display as two boxes side by side each 400px by 400px. 

The image will be on the right and the form on the left. 

The form elements will be stacked vertically with the label above each input aligned to the right. 

# Screen smaller than 800px

When the screen is 800px or smaller the the site should arrange itself vertically with the image at the top and the form below. 

The form elements should stack vertically with the label on the left of each input. The text should align to the right and the inputs should all be equal width and take up about three quarters of the space. 

# Mobile Devices

On mobile devices the the page should stack vertically with the image at the top and the form below. 

The form elements should display almost the full width of the screen, centered and the labels should appear above each form element with the text centered. 

I used ARIA attributes where they may be needed.