Frontend Mentor - Fylo data storage component

Welcome!

I started to solve real-world HTML, CSS and JavaScript challenges on Frontend Mentor to improve my front-end skills by building real projects.

The challenge

Your challenge is to build out this data storage component and get it looking as close to the design as possible.

You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.

Your users should be able to:

• View the optimal layout for the site depending on their device's screen size

Here is my solutions. Please let me know if you have any suggestions.

What I learned

• Make background image fixed to bottom: 'background-position: bottom; background-size: 100% auto'.
• Flex item width: 'flex: 0 1 ?px'
• Gradient color: 'background-image: linear-gradient(to right, colorcode, colorcode).
• Make background image full width & full height: 'background-size: 100% 100%'.