14 Comments
User's avatar
Jen Kramer's avatar

🌎🔥💧 Looks fantastic! I think I'd leave the labels rather than making them for screen readers only. It's unclear what the icons are without the words. Thanks so much for sharing!

Expand full comment
Romola Chrzanowski's avatar

This is a failure. I complicated it adding the footer and trying to keep the footer at the bottom of the page, which may or may not work. Then, my css code got so messed up looking I didn't want to deal with it anymore. So, the result is the icons are the poorest part of the thing.

https://codepen.io/romola/pen/ZEyPzPp?editors=1100

Expand full comment
Jen Kramer's avatar

🌎🔥💧 You got most of it just fine! I think you were trying to put a background on the earth/air/fire/water icons? You may just need something like this:

nav {

background-color: white;

opacity: 0.8;

padding: 0.5rem;

}

That makes your icons visible against the background. You got the parts about the accessible icons just fine -- thanks for sharing!

Expand full comment
Milan Mihajlovic's avatar

https://codepen.io/miklaan/pen/ZEyZwvd

My solution was successful as I wanted to change color on each icon separately :)

Expand full comment
Jen Kramer's avatar

🌎🔥💧 Well done! Icons looks great, and the different hover colors is a fun touch. Love you nav span + span selector 😁 Awesome job and thanks for sharing!

Expand full comment
Jen Kramer's avatar

🌎🔥💧 Nicely done! I would recommend showing the labels for your icons as it's not clear what these icons mean. Thanks for sharing!

Expand full comment
Yousif Hmada's avatar

Hey, if you navigate all the way down to the <nav/> element, and then you hit tab to focus on a link, the outline appears outside of the box containing the <a/> element, which makes since if you think about it, but it looks ugly, is there a way to modify that behaviour without touching the parent element ?

Expand full comment
Jen Kramer's avatar

Sure! You're looking at the focus state of the element. To change the outline, something like this would be fine:

a:focus {

outline: 3px solid orange;

}

:focus should be placed before hover in the stylesheet:

LVFHA

Link visited focus hover active

Lord Vader Former Handle Anakin to remember it 🤣 👍

Expand full comment
William's avatar

ps- the version of font-awesome that comes up when you search in codepen is v5, to use v6 I had to add it manually: https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css

Expand full comment
Jen Kramer's avatar

Thanks for the tip!

Expand full comment
Jen Kramer's avatar

🌎🔥💧 Woo hoo! Looks fabulous - very nice job as always! Thanks for sharing 😁

Expand full comment