🚀 Profile card component 🚀

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

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

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

  ---

  BACKGROUND iMAGE 📸:

  • Looks like the background images has not been properly set yet, they are slightly misplaced. 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%);
  }
  

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

  ---

  .

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

  Happy coding!

  1

  ---

  

  Zsolt Varjú•490

  @zsoltvarjuPosted over 1 year ago

  Hello ABdul Khalid! @0xAbdulKhalid

  Thanks for your suggestion i changed the postion of the image but i have to say i was darn close! The screesnhot i dont think i will change because i have only 4 left in this month and will save them for bigger changes!

  Thanks, have a nice day :)

  0

  

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  @zsoltvarju Glad you found it helpful ! 🤠

  1
• 

  BrunoMoleta•700

  @brunomoletaPosted over 1 year ago

  Hi Zsolt,

  for semantic purposes, I suggest that you use

  <h1 class="sr-only">Victor Crest's Card Profile</h1>

  (Info Source) with the following CSS to hide it:

  .sr-only {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  

  According to MDN: <h1> is the element that describes the content of the page.

  That means that even if the page doesn't have a clear heading on display, it's a good idea to have one to assist the screen readers.

  Also, it's a good call to start the bottom part of the card with the following line of code to give an idea of the content to come next.

  <h2 class="sr-only">User statistics</h2>

  I learned that reading the code from Melvin Aguilar solution to this challenge.

  It could have gone as far as putting an <h3 class="sr-only">User number of Followers<h3>

  In each of the

  .card__stats--item
  

  I didn't do the last myself cause I just realized this possibility, and honestly, I'm not sure how far we have to do the semantics, but it's a thought I'm laying out in the table.

  Keep the remarkable hustle, mate :)

  Best regards from Brazil 🇧🇷

  0