In the bottom right corner of the CodePen example, there should be a button that says Fork. Click it. This will make a copy of the code that you can save to your CodePen account.
While anyone can edit or fork a CodePen, you can’t save and share your work without creating a CodePen account. It’s easy and free. The button to do this is in the upper right corner of the CodePen window.
🌎🔥💧 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!
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.
🌎🔥💧 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!
🌎🔥💧 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!
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 ?
https://codepen.io/kldickenson/pen/QWgReyy
🌎🔥💧 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!
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
🌎🔥💧 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!
https://codepen.io/miklaan/pen/ZEyZwvd
My solution was successful as I wanted to change color on each icon separately :)
🌎🔥💧 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!
https://codepen.io/yousifhmada/pen/LYLazwQ
🌎🔥💧 Nicely done! I would recommend showing the labels for your icons as it's not clear what these icons mean. Thanks for sharing!
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 ?
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 🤣 👍
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
Thanks for the tip!
https://codepen.io/w0whitaker/pen/bGRQXmz
🌎🔥💧 Woo hoo! Looks fabulous - very nice job as always! Thanks for sharing 😁