Our reporter did not find any issues in this project! 🎉
Design comparison
Reports
Accessibility report (0)
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! 😁
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,105
@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,105
@ApplePieGiraffe
Posted
@somaye-beiranvand
Thank you very much! 😊
0
Thomas Hertog• 425
@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,105
@ApplePieGiraffe
Posted
@thomashertog
Haha, thanks, Thomas! 😀
0
P
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,105
@ApplePieGiraffe
Posted
@brasspetals
Thanks a lot, Anna! 😄
0
P
Matt Studdert• 13,591
@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,105
@ApplePieGiraffe
Posted
@mattstuddert
Thanks so much, Matt!
0
Arturo Simon• 1,695
@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,105
@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,105
@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,105
@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. 😀
2
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
1
P
ApplePieGiraffe• 30,105
@ApplePieGiraffe
Posted
@AgataLiberska
Haha, I know right? 😉 Best of luck with this challenge! 👍
0
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,105
@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,105
@ApplePieGiraffe
Posted
@janegca
Haha, thanks, janegca!
0
tediko• 6,170
@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,105
@ApplePieGiraffe
Posted
@tediko
Thanks tediko! Happy coding to you, too!
0
Please log in to post a comment
Log in with GitHub
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!