Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub

Submitted

Card Component With 3D Animation

#sass/scss
P
ApplePieGiraffe• 30,545

@ApplePieGiraffe

Preview siteView code
Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

Profile card component
  • HTML
  • CSS
1newbie
View challenge

Design comparison

SolutionDesign

Solution retrospective

Hello, everybody! 👋

This was a fun, simple challenge which I enjoyed! I added a cool little (and surprisingly simple) 3d hover effect to the card component (thanks to Dev Ed, once again). 😆

And for those tricky background SVGs? I ended up using a combination viewport width and height units and percentages to have the SVGs subtly change their position when the screen is resized. IDK if they match the design exactly but they look okay! 😂

Feedback is welcome and appreciated, of course! 😊

Happy coding! 😁

Community feedback

Mesut Çifci• 485

@mesutcifci

Posted

Hi. Congratulations.

I'm trying to do this challenge too. I trouble with background images position 😄 Your solution is perfect.

I want to use this in my code but i don't want just copy paste. Also i want to understand what's the idea on this solution.

Could you explain me how your code(background-position) works.

Thanks.

2
P
ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted

@mesutcifci

Thanks, mesutcifci!

I used vw and vh units and combined them with percentages for the background-position property. The reason I did this is that if you set the background-position property in just vw and vh units, the SVG backgrounds won't move around when the page is resized, but if you use just percentages, they move around too much (at least, I think so). I combined them using calc so that the SVGs would mostly stay in their place but move around just a little bit when the page is resized. 😊

However, that really isn't necessary. Simply using vw or vh units to position the background SVGs is totally fine and works great. You can also use good 'ol rems or px values instead. 😉

Here's a nice article from MDN on backgrounds and borders in CSS, and this article (also from MDN) goes into more depth on the background-position property. They might help you!

Keep coding (and happy coding, too)! 😁

6
somaye beiranvand• 220

@somaye-beiranvand

Posted

Hi APG

The way you managed the position of background bubbles is amazing. congratulation

1
P
ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted

@somaye-beiranvand

Thank you very much! 😊

0
Thomas Hertog• 715

@thomashertog

Posted

Hell yeah, wasn't sure it could be done with background (and background-position) and really wanted to spend lots of time to get those values right. Matt pointed me into this one, and I must say, this is effing impressive! haven't looked at everything code-related, but the background-solution is really nice!

1
P
ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted

@thomashertog

Haha, thanks, Thomas! 😀

0
Anna Leigh• 5,135

@brasspetals

Posted

APG back at it again - that 3D hover effect is trippy! I can always count on you to add a fun addition to your solution! 😄

Cool effects aside, it looks essentially pixel-perfect to me, and you have nailed those pesky background images it seems most people (I haven't done this one yet) have struggled with. 🙌

4
P
ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted

@brasspetals

Thanks a lot, Anna! 😄

0
P
Matt Studdert• 13,611

@mattstuddert

Posted

Love this, APG! 😍

Awesome to see you going above and beyond in these challenges and experimenting with additional effects.

You’re doing an amazing job!

2
P
ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted

@mattstuddert

Thanks so much, Matt!

0
Arturo Simon• 1,785

@artimys

Posted

Hands down APG, It's great that you took the time to properly calc the size of those bg images without media queries. The effects are always the cherry on top.

Awesome work 👍

2
P
ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted

@artimys

Thanks, artimys! I guess all that messing around with calc was worth it! 😅

0
alexandria• 35

@ironheart93

Posted

This looks really good. I am currently doing this challenge and could not really figure out the CSS background images unfortunately and (I did not want to use a div).

1
P
ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted

@ironheart93

Hey, alexandria! 👋 The background images in this challenge can be a little tricky, I know! Consider adding and positioning the background images with CSS background images. It's what I did in my solution and it seemed to work out pretty well. 👍

0
Agata Liberska• 4,015

@AgataLiberska

Posted

Hi @ApplePieGiraffe, how did you come up with the values to position the circles? Was it trial and error or is there a secret behind it? :D

1
P
ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted

@AgataLiberska

Hey, Agata! 👋 It took a bunch of trial-and-error for me to find the values that I ended up settling with for the circle shapes in the background. At first, I was pretty sure positioning the background images would be easy, but I ended up spending well over an hour just fidgeting with the values for the position. 😅 Eventually, I found something I liked, and I went with it. 😀

3
Agata Liberska• 4,015

@AgataLiberska

Posted

@ApplePieGiraffe thanks, it's really helpful to know the process behind it. Those circles are my nightmare, this design looks so simple and then it's like hitting a brick wall :D

2
P
ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted

@AgataLiberska

Haha, I know right? 😉 Best of luck with this challenge! 👍

1
LB• 35

@laarnib

Posted

Wow! I love the effect that you added on the card! 🙌 And nice work on the background bubbles. Still couldn't make mine to stay where they're supposed to 😃

1
P
ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted

@laarnib

Thanks, laarnib!

0
Jane• 1,040

@janegca

Posted

Thanks APG, for fixing those pesky background bubbles in their positions, been scratching my head trying to figure it out for a few days now. Nice work :)

1
P
ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted

@janegca

Haha, thanks, janegca!

0
P
tediko• 6,560

@tediko

Posted

Hello, ApplePieGiraffe! 👋

I'm not gonna lie, can't wait to steal this 3D effect idea and put it in one of my project! Amazing work!

Happy coding! 😄

1
P
ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted

@tediko

Thanks tediko! Happy coding to you, too!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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