π
Welcome!
This website is a model created to represent a database with a storage component, it shows how much storage have been used and how much left.
You can checkout the demo here : Data Storage Component
π
Challenges! This website was made using only HTML5, SASS and Javascript. The most dificult challenge was to make the input type range as close as the model. The input type range was made with a linear-gradient background, so it changes the color whenever the person drags the input.
Let's have fun!
- Building it to look as cloose as the design.
- View the optimal layout for the component depending on their device's screen size (Responsive Web Design)
- Use ID and classes in the elements
- Use query selectors in Javascript
- DOM manipulation with Javascript
π»
Technologies! - HTML
- SASS
- JAVASCRIPT
Web Model
Desktop
Mobile
π
Credits Designed by Gustavo Matsunaga!