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 Profile card using HTML CSS

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 NEED CRITICISM TO HELP BULID MORE

Community feedback

@LuizaUszacki

Posted

Hi @korede1004, good work completing the challenge!

I also have some tips for you:

  1. Instead of using img tags to put the images as the background you could use the background-image: url('./images/bg-pattern-bottom.svg'). You can even add more than one image and the background color to the same element.

  2. Think about adding the main tag to your HTML for accessibility purposes and wrapping the main content in it.

  3. I saw that you have a padding-top to center the image, but depending on the screen size, it won't stay in the center. So, you could use flexbox. Once defined the container of the element, add display: flex; align-items: center; justify-content: center; on this container and it will center all its direct children in the center on both axes.

Just an extra tip: you could use your body as the background/container of the card and build your card in the main tag.

Hope it helps!

Marked as helpful

0

@korede1004

Posted

@LuizaUszacki thank you for your feedback it is really helpful

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