Submitted over 3 years ago

Profile card using HTML and CSS

Andy Curley• 30

@racurley

Preview site View code

This is a solution for...

Profile card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

This was my first project. I was much harder than I expected. I had a hard time thinking through the proper way to use DIV's. I have some unnecessary ones in the html file still. Probably ended up with more than I needed that I did use.

Problems:

I think I generally got the right answer but I struggled on positioning the card. Not sure I did it most efficiently.
Had a hard time mimicking the spacing of the font.
I used percentages to place the background images. They behave kind of weird when I resize the screen.

background-image: url("../images/bg-pattern-top.svg"), url("../images/bg-pattern-bottom.svg"); /* background-position: -500px -600px, 500px 300px; */ background-position: -130% -200%, 200% 150%; background-repeat: no-repeat; background-attachment: fixed;

Community feedback

Adam• 430

@aemann2

Posted over 3 years ago

I had a similar problem when I was positioning the background image. After using percentages for the positioning, I saw that another user used vh and vw to position the background. I incorporated that into my own project and the results were much better.

If you're interested, here's a link to what I came up with:

https://www.frontendmentor.io/solutions/profile-card-component-sass-and-bem-Qbhs9MwOS

Interesting that you chose to go with a table for the stats. Did you find that simple or difficult? I used flexbox on that section and it was breeze.

Andy Curley• 30

@racurley

Posted over 3 years ago

@aemann2 Cool. I looked at your solution. Nice job! I did not know about this vh, etc. I tried it out and it looks much better. The table was easy but I don't think the spacing looks quite as nice as the design. I will need to look at Flexbox as well. Something else to learn. thanks for the comments!

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