Clipboard landing page using CSS Flexbox hover feature

Solution retrospective
Hiya,
Really enjoyed this challenge :)
But in doing this challenge, I realised that css gap is not supported by Safari, any suggestions on how to work around this? I ended up using margin to separate the items.
Many thanks, C.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @ApplePieGiraffe
Hey there, Chris-Ann C.! 👋
Just wanted to say—it's nice to see you complete another challenge! 😀 Good work on this one! 👍
It looks like you're using quite a few
<div>
s in your HTML. I suggest using some<section>
tags for the sections of the page that contain headings to make your HTML more semantic (which is good for things like SEO and accessibility).Also, a minor suggestion might be to increase the speed of the hover animations on the buttons and the social media links in the bottom of the page. Slightly faster animations often look and feel better (IMHO), and the animations shouldn't look so jittery, then. 😉
Keep coding (and happy coding, too)! 😁
- @brasspetals
Hi, Chris-Ann! 👋
Great job on this challenge! It responds very well, and you've made good use of flex. Nicely done!
You are right, gap is not fully supported yet on Safari, but support is coming soon. You are correct to use margins in this case. However, if you wanted to try using grid in the next project, grid’s various gap properties (grid-row-gap, grid-column-gap, grid-gap) are well supported.
I do have one small suggestion. Instead of adding
cursor: pointer
to.links ul
, wrap the text inside your li tags in anchor tags - they are links after all. That way the cursor will show up naturally. Your social media icons should also be wrapped in anchor tags, as they are links as well.Again, good job on this challenge and happy coding!
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