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
Request path contains unescaped characters
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Profile-Card

Saswat Samalβ€’ 80

@saswat10

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


Still facing issues with centering ☹️. Open to suggestions that can improve my design😊😊

Community feedback

Aditya Singhβ€’ 460

@adityas24

Posted

Hi Saswat, great effort by you!

I saw that for displaying the person's image, you are using background image. But the image tag is the most appropriate way to display image here. For more information read this stackoverflow answer on background image vs img tag

Hope it was helpful, Happy coding!

Marked as helpful

1

Saswat Samalβ€’ 80

@saswat10

Posted

Thanks, the article was helpful. I'll make the necessary changes and post a new solution

0
Favourβ€’ 2,140

@Nadine-Green

Posted

HEY SASWAT!

About your issue with centering, a quick fix for this would be the give the body a height of 100vh height:100vh then a display of grid display:grid and then using the code place-items:center

IF THIS WAS HELPFUL IN ANYWAY, DON'T HESITATE TO MARK IT AS HELPFUL :)

HAPPY CODING!

Marked as helpful

1

Saswat Samalβ€’ 80

@saswat10

Posted

Thanks made the necessary changes. It workedπŸ‘

0
Favourβ€’ 2,140

@Nadine-Green

Posted

@saswat10

Happy that i could help

0

@VCarames

Posted

Hey there! πŸ‘‹ Here are some suggestions to help improve your code:

  • To not only improve your HTML code but to identify the main content of you page, you will want to wrap your entire component inside the main element.

More Info:πŸ“š

MDN Main Element

  • β€œVictor Crest” is a heading. So it needs to be wrapped in a Heading Element.
  • The statistics are a list. They need be created using the Unordered List along with the List Element.

More Info:πŸ“š

MDN <ul>: The Unordered List element

If you have any questions or need further clarification, feel free to reach out to me.

Happy Coding!πŸŽ„πŸŽ

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