Skip to content
Submitted over 1 year ago

CSS Grid and layering backgrounds

Riley•260
@rileydevdzn
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Profile card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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!

Community feedback

  • Benjamin B.•240
    @benjaminbilgehanPosted over 1 year ago

    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
    0
    Riley•260
    @rileydevdznPosted over 1 year ago

    Hey @benjaminbilgehan,

    Thanks! Ha I kind of buggered that list spacing, it definitely didn't look quite that off through live server in VS Code. Great suggestion for the chrome extension, I'll look into it.

    Cool, I'll play around with HSLA on one of my next builds. Thanks for the suggestion!

    0

Please log in to post a comment

Log in with GitHub

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