Our reporter did not find any issues in this project! 🎉
ApplePieGiraffe’s questions for the community
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! 😁
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.
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
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
vh units to position the background SVGs is totally fine and works great. You can also use good 'ol
px values instead. 😉
Keep coding (and happy coding, too)! 😁
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!
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. 🙌
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 👍
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).
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. 👍
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
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. 😀
@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
Haha, I know right? 😉 Best of luck with this challenge! 👍
Join our Slack community
Join over 180,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!