Submitted almost 3 years ago

Profile Card: used many background image properties.

Vishal Pal•320

@vishy312

Preview site View code

This is a solution for...Profile card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

Pretty decent challenge. Learned a lot about the various background image properties. Still not sure about the responsiveness of background images. Any feedback will be welcomed. Thanks

Community feedback

Anosha Ahmed•9,300
@anoshaahmedPosted almost 3 years ago
To get rid of the accessibility/HTML issues shown in your Report:

wrap everything in your body in <main> OR give role="" to the direct children of your <body> ... Click here to read more

have at least one <h1> in your code

Good job! :)
Marked as helpful
0

Aakash Verma•6,710

@skyv26Posted almost 3 years ago

Hi! Vishal,

To solve accessibility issues:

wrap everything in your body in <main> OR give role="" to the direct children of your <body> ... Click here to read more here
Either Change your code

FROM

<div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
    Coded by <a href="https://github.com/vishy312">Vishal Pal</a>.
  </div>

<footer class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank" aria-label="challenged by">Frontend Mentor</a>.
    Coded by <a href="https://github.com/vishy312" aria-label="developer name">Vishal Pal</a>.
  </footer>

OR Simply add role="footer" in your existing code like this

<div class="attribution" role="footer">
   ...
 .          ....
  </div>

But don't forget to add aria-label in anchor tag and make habbit of using it in your code to improve semantics.

Happy New Year ;)

Marked as helpful

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord