Profile card component solution with tailwindcss

Community feedback

• 

  

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 4 years ago

  Hey, good work, Sagar Kaurav! 👍

  Your solution looks pretty good! 👏

  I only suggest,

  • Keeping the background SVGs from growing smaller when the width of the viewport decreases so that they maintain their size (as in the original design). 😉

  Keep coding (and happy coding, too)! 😁

  1

  ---

  

  Sagar Kaurav•460

  @sagarkauravPosted over 4 years ago

  @ApplePieGiraffe Thanks for the feedback. I Have change SVGs to fixed size but I am still having problem making them position correctly.

  0

  

  

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 4 years ago

  @sagarkaurav

  Yes, positioning the background SVGs can be tricky! Try experimenting with positive and negative fixed values (such as rem or px) along with keywords like top, right, etc. or even using vw or vh. 😉

  0
• 

  

  Grace•32,170

  @grace-snowPosted almost 4 years ago

  Hi

  Try to get the small details on this closer to the design if you can. Like the background colors, the background circle positions (I'm viewing on mobile) and the box shadow. Designers wouldnt let designs pass if you didn't match colors they've chosen in particular (when working on a real team). The only exceptions to that are when theres things like color contrast fails for accessibility. Usually designers are very receptive to a change when that happens.

  0

  ---

  

  

  Grace•32,170

  @grace-snowPosted almost 4 years ago

  Other things to note are that background patterns or any decorative images that don't add meaning to a page should not have an alt description. They should have empty alt text like alt="" and if they are svgs they also need aria-hidden="true"

  Other really really important thing is to not skip heading levels. They need to go in order for document outlines to work. That's essential for assistive tech, and pretty important for search engines too.

  Other than these things, all good 👍

  0

  

  

  Grace•32,170

  @grace-snowPosted almost 4 years ago

  Ps the link to this one on your site is wrong at the moment. It takes people to rock paper scissors

  0

  

  Sagar Kaurav•460

  @sagarkauravPosted almost 4 years ago

  @grace-snow Thanks for pointing out. I have updated my blog with proper link.

  0