Interactive Card with form Validation

Hey Musab!! I think you tried to apply the same design without having a Figma design file!! Even your design isn't 100% the same, but it's a great work you've given very nice work there. But the interactivity on your solution doesn't exist or work!! Then User infos must display on cards after clicking confirm button...

NOTE: If you want to center your solution like the original design, add those css lines to your main container, the one on which you put cards & the user form. { height: 100vh; display: flex; justify-content: center; align-items: center; }

Good luck, wish u all the best!!!

Hey musab, you've given very nice try up here. It seems you have very good skills in css. For validations, using java-script conditional statements would be a better approach, and also using them with use-state can be useful. Or for simpler approach you can also add 'required' in html element.

You can use use-state hooks for storing values in form inputs and display them on cards.

Since we need to maintain aspect ratio of card images , use px (instead of % and rem) for setting width and height. Change these values with different screen sizes.

Hope this helps. Thank You :)