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-card-component usign css flexbox

jose 60

@JosZero

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@ExploryKod

Posted

@JosZero, Hi Jose,

I like your code, alignements and spaces, the use of flexbox. I found it is a good choice to place background patterns/forms with background-position and background-image.

If you wish, you can improve the responsiveness using grid system on the body itself : it helps controlling the position of the card in the center, especially in small mobile phone (as iphone 5s) without the need of changing margins at every breakpoints. The card will scale with part of the grid it is placed.

I see you have the same accessibility issues that I experienced on this project : I created my "background patterns" outside <main> tag so without enclosing it with "landmarck elements", I enclosed it in <main></main> and the issue disappear. You can do the same with attributions by enclosing it in a <footer></footer> and create a <main></main> (ex: replace your class "container" from a div to a main tag). This will solve the accessibility issue.

Hope I helped you with these tips. I enjoy reading your code and seeing the result. Happy coding.

Marked as helpful

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