Submitted almost 4 years ago

Beginner: Card component using flexbox

Nishant Jain•20

@NJain0001

Preview site View code

This is a solution for...Profile card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

I didn't know how to make the two semi circles in the background be positioned properly. Any advice on how to go about that part of the UI would be great
If you view the code through the Dev tools, the margin is going outside the div tags for the name section (below the image). Is that normal, or is that a code smell?

Community feedback

Nishant Jain•20
@NJain0001Posted almost 4 years ago
Thank you for the detailed feedback! position: absolute didn't cross my mind for the background images. I will take your feedback and learn from it. Thanks again!
0
isimeri•250
@isimeriPosted almost 4 years ago
Hello. I read through your code a little and it's great overall. Regarding your first question, i would place those svg circles inside the html <img> tags instead, and then tackle the positioning with position: absolute. About the second question: your card .user-card has a fixed height 22.5em. The heights(margins and paddings included) of its children: .pattern-img, .user-info and .user-number-info when added, make up more than the height of the parent .user-card. That's why you see the overflow. Another little thing, when defining the height of .pattern-img, you used vh(which is a responsive unit), but also used em and rem for the other children. It's good being consistent, using vh or %, etc. everywhere(where it makes sense, of course). Reduce the height of your browser to see how .pattern-img vs the rest of the card behaves. Cheers!
0

Please log in to post a comment

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