My first accordion card. This was much more difficult than the profile card, as I had trouble getting the two sides of this card to work right. It basically does what it's supposed to, but its overstyled. Even so, I learned a lot and got to use some Javascript, which, truth be told, isn't very DRY as it now stands. I plan to go back over this and overhaul it. You can see my trials and tribulations in the comments on the Frontend Mentor website.
Your challenge is to build out this profile card 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.
The designs were created to the following widths:
- Mobile: 375px
- Desktop: 1440px
- Very dark desaturated blue: hsl(238, 29%, 16%)
- Soft red: hsl(14, 88%, 65%)
Background gradient:
- Soft violet: hsl(273, 75%, 66%)
- Soft blue: hsl(240, 73%, 65%)
- Very dark grayish blue: hsl(237, 12%, 33%)
- Dark grayish blue: hsl(240, 6%, 50%)
- Light grayish blue: hsl(240, 5%, 91%)
- Font size: 12px
- Family: Kumbh Sans
- Weights: 400, 700