Skip to content
Submitted about 2 years ago

CSS Grid and layering backgrounds

Riley•260
@rileydevdzn
A solution to the Profile card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hey guys!

I liked the layering backgrounds challenge in this one. I was playing with a way to make the background circles adjust positioning with viewport size using calc that was smooth but didn't match up with the end design on mobile. This is my base version, it just uses media queries to match the design while I keep playing with it on a local repo. I feel like I'm overlooking what might be a simpler solution to this.

Any suggestions on how to get those background circles to be responsive while still matching the design specs? Any general suggestions/feedback also welcome!

Thanks!

Code

Please log in to post a comment

Log in

Community feedback

  • Benjamin B.•240
    @benjaminbilgehan

    Great job!

    You may want to consider using CSS to make your text appear brighter. This is just an additional suggestion.

    For instance, you can use the following CSS for the "p" element:

    mix-blend-mode: normal; opacity: 0.6;

    For a perfect pixel solution, you can use Google Chrome extensions like GoFullPage to take a snapshot of the Figma design and apply it to your browser using "Perfect Pixel." This way, you can easily achieve the pixel-perfect approach when viewing your design live on your browser.

    Furthermore, I suggest using HSLA for your variables, which allows you to adjust the saturation, brightness, and opacity easily. This is a useful tip for your future development.

    I recognise your talent and encourage you to keep up the excellent work!

    Marked as helpful

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