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

Clipboard Landing Page - SCSS, Flexbox, Grid

Anna Leighβ€’ 5,135

@brasspetals

Desktop design screenshot for the Clipboard landing page coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


I originally set out to use way more grid, but in nearly every instance had to switch over to flex because of how I wanted "overflow" items to be aligned. I used some fairly minimal Sass architecture for this project - please let me know if you think it can be improved upon, as well as my continued attempts at BEM! As always, any and all feedback is greatly appreciated.

Also, shoutout to @ApplePieGiraffe for the Live Sass recommendation - so much simpler!

Community feedback

P
ApplePieGiraffeβ€’ 30,545

@ApplePieGiraffe

Posted

Hello, Anna! πŸ‘‹

Great to see another just about pixel-perfect solution from you! πŸ™Œ

I like the subtle but beautiful transitions for the buttons and navigation links and your solution responds very well. πŸ‘

Looking at your code, I think you've made great use of BEM in your HTML and I like the organization of your Sass files (it's just how I like to organize my Sass files, too). πŸ‘

Just a small tipβ€”I think you can use the universal selector to select all of the elements inside of an SVG element to change its color upon hover (so that you don't have to manually add a class to each element inside it), like so,

svg:hover * {
    fill: #hsl(blah, blah, blah);
}

There's getting less and less to say about how you can improve with each project. πŸ˜‰ Keep it up! 😊

Of course, keep coding (and happy coding, too)! 😁

2

BerylBucketβ€’ 280

@BerylBucket

Posted

@ApplePieGiraffe This is probably just a typo, but it should be

svg:hover * {
    fill: hsl(blah, blah, blah);
}

2
P
ApplePieGiraffeβ€’ 30,545

@ApplePieGiraffe

Posted

@BerylBucket

Correct! Missed that, thanks! πŸ‘

0
Anna Leighβ€’ 5,135

@brasspetals

Posted

@ApplePieGiraffe @BerylBucket Thank you both for alerting me about the simplified hover fix! I got into an unconscious habit of using a class after a solution where I had to selectively pick areas of an svg to change. Anyway, all fixed now! πŸ‘

APG - Glad to hear my BEM has improved! The article you linked on my Ping solution is responsible for the button transitions, and your solution was actually the inspo for my footer link responsiveness, so thanks again!

1

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