@ApplePieGiraffe
Posted
Greetings, Shivam! 👋
Good effort on this challenge! 👍
For the background images in this challenge, I suggest using CSS background images to add them to the <body> of the page (rather than creating a separate <div> to add the background images). You can add min-height: 100vh to the <body> to ensure that it fills up the entire height of the screen, and then use viewport units (e.g., vw and vh) to position the background images (since doing so will prevent them from moving around very much when the size of the screen changes).
As for the profile image, I suggest adding the image to div.profile-info and using flexbox to horizontally center it within its container. Then, you can use negative margin or the transform property to move the image up and into the blue background above it.
Hope those tips help. 🙂
Keep coding (and happy coding, too)! 😁
@shivjoshi1996
Posted
@ApplePieGiraffe Thank you so much! I will give your suggestions a try and see how I do. Thanks again!
@shivjoshi1996
Posted
@ApplePieGiraffe I've made the changes, and they worked great! The size of the card itself is a little larger than the design, but I think I am happy with how it currently is. Thank you again for your help!
@ApplePieGiraffe
Posted
@shivjoshi1996
No problem, Shivam! Glad to help! 😀
I took another look at your solution, and I think the changes work well, too! 👍
And it's totally fine if your solution is slightly (or even somewhat) different from the design preview—the preview is only there as a guide and things often turn out slightly differently in the end, anyway. 😉
Keep it up! 🙂
