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

Mobile first using React and Tailwind CSS

@Ullvang

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


How did you center the image between the two other divs (white space and pattern)

Community feedback

P
hardy 3,660

@hardy333

Posted

Hey, nice solution, card looks good and clean. I liked what you used semantic html tags, good job.

One suggestion is to use more organized folder structure in your src folder, it is kind of messy and hard to find what are the css files and what are the components .tsx files. I will be nice if you crate additional components and styles folder in src folder.

About your question (how to center profile picture ), there are a lot of ways to do it, but I am not sure which one is best, I personally use absolute positioning and transform property to center it the way it is.

Marked as helpful

3

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