Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

CSS Grid and layering backgrounds

Riley 260

@rileydevdzn

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

@benjaminbilgehan

Posted

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

@rileydevdzn

Posted

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
Discord logo

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