Profile card component

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  Hey, there, Kevin Canlas! 👋

  Nice job on this challenge! Your solution looks pretty good! 👏

  I suggest,

  • Using CSS background images (or even pseudo-elements) to add and position the background SVGs in this challenge. That'll keep you from having any sort of overflow issues or anything and leave your HTML a little cleaner (it's probably also a little easier to position the background SVGs, I think). The background SVG to the right of the page seems to get squished (or cut off) when the width of the page decreases, but using CSS background images should fix that, anyway.
  • Using flexbox to center the card component in the viewport (I find it's often a little easier and more foolproof than using margins instead).
  • Perhaps using a heading tag rather than a <div> for the name of the person on the card to semantically identify the card. 😉

  Keep coding (and happy coding, too)! 😁

  2

  ---

  

  Kevin Canlas•225

  @kvncnlsPosted almost 4 years ago

  @ApplePieGiraffe Thank you! Your feedback is ALWAYS appreciated. I always learn something new! I'll get on it!

  Also, how do you suggest I go about using background-image for the CSS background? There's two background image files, it's not possible to put two into one element, right? I'd have to separate it into two divs?

  0

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  @kvncnls

  You can actually use multiple CSS background images to place more than one background image on a single element and still use the background-position and background-size properties to position and size them differently (although in this challenge, it's only their position that is different, not their size). 😉

  Here's a short article from CSS Tricks on just that to get you started. 👍

  1

  

  Kevin Canlas•225

  @kvncnlsPosted almost 4 years ago

  @ApplePieGiraffe WHOA, I didn't know this! Thank you APG!!

  1