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

Profile component card using flexbox.

Ahmed Alhareesβ€’ 360

@AhmedAlharees

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


Unfortunately, the bubbles in the background caused side scrolling in smaller screen sizes, and I didn't know how to fix them, so I set them to 'display: none'. If you have a solution to that problem, please write a comment below <3.

Community feedback

@VCarames

Posted

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

  • Every site/component should always have βœ… a main element not only for semantic purposes but also help assistive technology find the main content of your content. For this challenge, it will serve as your components container ⚠️.

More Info: πŸ“š

MDN Main Element

  • The background images should be applied using CSS not HTML ❌. You can accomplish this by using the background-image property.

More Info:πŸ“š

MDN Background-Image

  • The only heading ⚠️ in this challenge is β€œVictor Crest”. Everything else should be wrapped in a paragraph 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

Ahmed Alhareesβ€’ 360

@AhmedAlharees

Posted

@vcarames Thank you so much for your response, I will look into it in future projects. <3

0
Nelsonβ€’ 2,380

@nelsonleone

Posted

HELLO.....congrats on completing this challenge πŸŽ‰ πŸŽ‰ πŸŽ‰ Here's now you can fix that , hope it was helpful

Did you build for mobile first? This is because you set a width on it , for the mobile use a max-width, and avoid using height,

Use paddings and margins scale your work,

set height only if need be

HAVE FUN CODING πŸŽ‰ πŸŽ‰

1

Ahmed Alhareesβ€’ 360

@AhmedAlharees

Posted

@nelsonleone Thank you so much for the response. I will consider it in the future <3.

0

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