Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive web component

@yorchAdalbert

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I had some troubles with the body background implemantation, Any help would be appreciate.

Community feedback

@MelvinAguilar

Posted

Hello there 👋. Good job on completing the challenge !

  • In my humble opinion, its background is hidden due to the use of percentage which makes it very difficult to completely control the background circles.

    The background-position worked for me with the vw (viewport width) and vh (viewport height) units:

background-position: left 48vw top 52vh, right 52vw bottom 35vh;
  • Use the <main> tag to wrap all the main content of the page instead of the <article> tag. With this semantic element you can improve the accessibility of your page.
  • For the image with the author, you need to provide an alternative text to tell the user who is the person of the card, its recommended to use the author's name as the alt attribute value. e.g. alt="Victor Crest"

I hope you find it useful! 😄

Happy coding!

Marked as helpful

1

@yorchAdalbert

Posted

@MelvinAguilar Thanks for the feedback. I was just checking it and I already chenged that part of the code for vw and the improvement is very notorious. I can´t believe I forgot to add the alt text for the image.

I really appreciate your help.

1

Please log in to post a comment

Log in with GitHub
Discord logo

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