Looking to hire developers?
I implemented the suggestions left on my last challenge: declared decorative images as background-image(s) rather than in HTML tags, used semantic HTML5 structural elements, and (tried to) use more heading elements.
However, getting the orange floating box to appear on top of the component while declared as a background-image was tricky. Eventually, I just decided to remove it from my CSS and use an img tag instead.
@Carl256
Posted
Hi, well done, the design looks great and is browser compatible. I have about 2 remarks to make though. 1 - slightly reduce the width and of the card to match the design. 2 - Hide/show the answer to a question when the question is clicked(does show but does not hide if I am still on the same question)
@lynettelopez
Posted
@Carl256 Thanks for the feedback, Carl!
@ApplePieGiraffe
Posted
Hello, Lynette Lopez! 👋
Nice to see you complete another challenge! 😀 Good work on this one! 👍 The accordion looks good, is responsive, and works well! 🙌
Like SrCienpies touched on, I think using an <img> tag for the floating cube is a good choice for this challenge since you have to position it outside of a container (and CSS background images are clipped when they are moved beyond the bounds of their container, so that wouldn't work so well for this case). I like the animation you added to the floating cube, BTW! 😀
Keep coding (and happy coding, too)! 😁
@lynettelopez
Posted
@ApplePieGiraffe I figured that was the case, but I felt kinda silly making an empty img tag for decorative purposes. Now I know that's normal! Thanks for the feedback--you're killin' it on here!
@SrCienpies
Posted
I really like the animation of the floating box. In my case i try not to use background images when is not a background, instead i use a normal tag img and add the content via css. Just one issue when display the web on Google Chrome Mobile device the image go outside the top of the page, but the rest great job!
@lynettelopez
Posted
@SrCienpies Thank you for bringing that to my attention (and the feedback)! :)
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
