Skip to content
Submitted over 4 years ago

A bit of css grid and animations

Arturo Simon•1,805
@artimys
A solution to the Profile card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi everyone, simple but looks could be deceiving with this challenge. Spent a good amount of time fiddling with positioning on those background images. Threw some keyframes at it for some eye candy...sort of.

Any suggestions on it are welcomed, thanks

Code

Please log in to post a comment

Log in

Community feedback

  • ApplePieGiraffe•30,525
    @ApplePieGiraffe

    Hey, Arturo Simon! 👋

    Haha—I also hopped into this challenge thinking positioning the background images would be a breeze and then left to do something else after like half an hour of calc() and viewport size units! 😅

    You've done a nice job, once again, and I like that subtle animation to the background images! 😎

    Happy coding! 😁

  • Abhishek Rawat•690
    @AbePlays

    The animation looks dope. Loved it!

  • Anna Leigh•5,135
    @brasspetals

    Hi, Arturo! 👋 I usually shy away from commenting on challenges I haven't completed myself, but wanted to let know I thought your solution was excellent! I particularly like the background animation on the desktop version, which I'm bookmarking for reference.

    Poking around the code, I think I know of a simpler way of positioning the .profile-card__hero. Instead of absolute positioning, you could use display: flex along with align-items: center and justify-content: center on your .profile-card__header. Then just add margin-top: 140px (the height of the header) to .profile-card__hero. Your solution works perfectly, and there's probably a good reason you did it that way (I'm definitely still a newbie), but I thought I'd throw it out there just in case!

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