Style credit card previews

commIT-Group / card-details-form

https://commit-group.github.io/card-details-form/

3 stars 0 forks source link

Style credit card previews #6

Open nikkehtine opened 1 year ago

nikkehtine commented 1 year ago

[x] Create containers for cards
[ ] Front card styling:
- [x] Card number, cardholder name, expiry date
- [ ] bg-card-front.png as background
- [ ] card-logo.svg as logo in top left
[ ] Back card styling
- [ ] bg-card-front.png as background
- [x] CVC number at the end of the gray strip in the middle
[ ] Cards should be aligned over the purple background image
[ ] Box shadows

WitchDevelops commented 1 year ago

I've played a bit with it, didn't notice there are .pngs for each card. In FIgma file you can see the blurred gradient overlay things are created with ellipses and a clip-path is applied to the whole thing.

As for the logo, again I didn't see .svg (sorry) and craeted with with css.