Profile Card Component

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted 8 months ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have a suggestion regarding your code that I believe will be of great interest to you.

  ---

  BACKGROUND iMAGE 📸:

  • Looks like the background images has been set using individual img elements which are wrapped up with figure, Actually we don't need to struggle to set them up with this method there's an easy way to handle this problem with positioning the background images

  ---

  • So let me share my css snippet which helps you to easily apply the background color with the background svg they provided to place perfectly as same as design.

  ---

  • Add the following style rule to your css, after completing these steps you can experience the changes.

  body {
    background: url(./images/bg-pattern-top.svg), url(./images/bg-pattern-bottom.svg);
    background-position: right 52vw bottom 35vh, left 48vw top 52vh;
    background-repeat: no-repeat, no-repeat;
    background-color: hsl(185deg, 75%, 39%);
  }
  

  • Now you can remove these individual img elements from the html

  <figure class="top">
          <img src="./images/bg-pattern-top.svg" alt="bg-pattern-top">
  </figure>
  <figure class="bottom">
          <img src="./images/bg-pattern-bottom.svg" alt="bg-pattern-bottom">
  </figure>
  

  ---

  • Tip, Don't forget to generate a new screenshot after editing the css file

  ---

  • If you have any questions or need further clarification, you can always check out my submission for this challenge and/or feel free to reach out to me.

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  0

  ---

  

  P

  Sean•210

  @UFXtrendscalperPosted 8 months ago

  @0xabdulkhalid Thank you great feedback I have put that as notes into the project so when I revisit and attempt again I will utilize that.

  0
• 

  Paweł•1,030

  @Pawel-GnatPosted 8 months ago

  Hi mate :)

  JFYI, if you are working with images that are decorative only (like an avatar of current user) you should use proper alts and aria labels for screen readers and A11Y requirements.

  Example: <img src="./images/image-victor.jpg" alt=""> <img src="./images/bg-pattern-card.svg" aria-hidden="true">

  now screen readers won't read them :)

  But if you want to use alt for SEO or A11Y purpose, remember to make them as descriptive as possible :)

  GL!

  Marked as helpful

  0

  ---

  

  P

  Sean•210

  @UFXtrendscalperPosted 8 months ago

  @Pawel-Gnat Ok, Thank you. Also what is A11Y?

  0

  

  Paweł•1,030

  @Pawel-GnatPosted 8 months ago

  @UFXtrendscalper Its just a shortcut of accessibility https://developer.mozilla.org/en-US/docs/Web/Accessibility :)

  Marked as helpful

  0