Responsive pricing-panel with dark design developed for the 2022 Jump2Digital challenge.
This project has been developed to participate in the online challenge proposed by Jump2Digital, a digital event organized by Barcelona Digital Talent.
The different areas to choose challenge from are:
- Frontend
- Backend
- Data Science
I opted for the Frontend one, which consists of developing a pre-designed pricing panel using the preferred technology. I chose to make my own design and added animated transitions to it as an add-on.
Check out how it looks on web!
If you want to try it yourself: https://alba-ch.github.io/pricing-panel/
Also, on mobile:
To develop the project, I have used:
- HTML5
- CSS3
- JavaScript
There are other technologies allowed, but I decided to stick with the basics since I haven't worked with the others yet.
To design the page I have used Adobe XD, as it gives you a lot of freedom in the creation of UX/UI components, allows you to create responsive mockups and it's the software that I'm most familiar with. The sample photos used are extracted from Pexels, a provider of photographs and stock material without copyright.
Files in the repository:
/index.htmlStructure of the pricing panel/main.cssIncludes all styles of the page/res/bg.pngBackground image of the page/res/imcard-*.pngSample image card.