Design comparison
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
- @aemann2Posted almost 4 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.
0@racurleyPosted almost 4 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!
0
Please log in to post a comment
Log in with GitHub
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