Profile Card Component - Grid, BEM, semantic html, custom properties
Design comparison
Solution retrospective
The main challenge I found with this project was with the background pattern elements: I learnt how to use multiple backgrounds and position them correctly for the the desktop design; but they don't quite match up for the mobile view. I'm unsure if there is a better way of implementing this so that the patterns move dynamically so that they line up correctly for mobile, or if this is simply not possible. However I think the mobile view still looks suitable.
Community feedback
- @julienjavaloyesPosted over 2 years ago
I agree these backgrounds were the complicated part for me as well. I tried many options and eventually used also some relative positioning using top bottom left right: background-image: url(../images/bg-pattern-top.svg), url(../images/bg-pattern-bottom.svg); background-size: 55vw auto,55vw auto; background-repeat: no-repeat,no-repeat; background-position: left -5vw top -25vw , right -5vw bottom -25vw; I think your version match better than mine!
0@adamwozherePosted over 2 years ago@julienjavaloyes yes it was tricky, it looks like we have used quite similar methods; I just set the backgrounds first to the centre (50%, 50%) and then offset from there as opposed to from top left etc!
0 - @Sdann26Posted over 2 years ago
Congratulations for finishing this challenge you have done quite well, personally I think that the mobile view looks good, I don't know what someone with more experience will think!
Keep going, you have a lot of talent!
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