Profile Card Component | HTML and CSS

Community feedback

• 

  Kamlesh Rajesh Yadav•5,060

  @Kamlesh0007Posted 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. HTML 🏷️:

  This solution lacks semantic markup, which causes lacking of landmark for a webpage and allows accessibility issues to screen readers What is meant by landmark ?, They used to define major sections of your page instead of relying on generic elements like <div> or <span>. They are use to provide a more precise detail of the structure of our webpage to the browser or screen readers For example: The <main> element should include all content directly related to the page's main idea, so there should only be one per page The <footer> typically contains information about the author of the section, copyright data or links to related documents. So fix it by replacing the <div class="container"> element with the semantic element <main> in your index.html file to improve accessibility and organization of your page.

  0

  ---

  

  Elijah•320

  @taco-nekoPosted over 1 year ago

  @Kamlesh0007 Sorry? There is no div with the class of container in my project at all. I'm not sure what you're talking about, I have used a main.

  1
• Account deleted

  This comment was deleted over 1 year ago

  0

  ---

  

  Elijah•320

  @taco-nekoPosted over 1 year ago

  @HassanAkhtar8 Can you let me know what specifically about my project is inaccessible? I've taken care to use semantic HTML and alt text on images.

  0
• 

  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, So let me share my css snippet which helps you to easily apply the background color with the background svg they provided.

  ---

  • 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!

  0

  ---

  

  Elijah•320

  @taco-nekoPosted over 1 year ago

  @0xAbdulKhalid I tried this, and it looks visually identical to what I already have, except you have for some reason put the picture labeled "pattern-top" on the bottom and vice versa. I'm not sure I'm following the logic on this.

  Thanks for the feedback though!

  0