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.
🦑 🐙 🦑 Wow! Super well done - the HTML looks fantastic, and I love all of your color choices to distinguish the mollusk groups. Great work and thanks for sharing!
🦑 🐙 🦑 Looks fantastic! There are some issues with your HTML though.
a. Don't skip levels in your headings. If you want smaller headings, use CSS. Here you've gone from H1 to h4. You can read more here: https://jen4web.substack.com/p/headings
b. The h4 can't be a child of the ul -- only li's. If you want to use headings (h4 or otherwise), they need to be in an LI:
<ul>
<li><h4>Cephalopods</h4></li>
<li><a href="#">Octopus</a></li>
etc
Thanks so much for sharing - love your colors and layout!
Very nice - love the background image! Details/summary or a definition list (dl/dt/dd) could be used here as well. Looks great and functions well -- nice work!
https://codepen.io/keoverto/pen/oNeWoWm I'm confused on why each header isn't under it's content
You never closed your UL's, so you just keep indenting another level 😁
https://codepen.io/miklaan/pen/ExXLpmm
I wanted horizontal navbar, so I enjoyed during making the one like this.
🦑 🐙 🦑 Well THAT is a super fun approach! Looks great, markup is excellent, and the outcome is awesome. Nice work and thanks for sharing!
https://codepen.io/romola/pen/dyRdqeX?editors=1100
This could have been taken further, but I mostly enjoyed working with colors, adding a few links to give the idea of how it works.
🦑 🐙 🦑 Wow! Super well done - the HTML looks fantastic, and I love all of your color choices to distinguish the mollusk groups. Great work and thanks for sharing!
https://codepen.io/Shamar3/pen/yLXKqjM?editors=1100
🦑 🐙 🦑 Looks fantastic! There are some issues with your HTML though.
a. Don't skip levels in your headings. If you want smaller headings, use CSS. Here you've gone from H1 to h4. You can read more here: https://jen4web.substack.com/p/headings
b. The h4 can't be a child of the ul -- only li's. If you want to use headings (h4 or otherwise), they need to be in an LI:
<ul>
<li><h4>Cephalopods</h4></li>
<li><a href="#">Octopus</a></li>
etc
Thanks so much for sharing - love your colors and layout!
Thank you for the advice. It didn't seem right to use the h4 there. Thank you for the extra reading material, I appreciate it.
I changed it up and used a class of title for the headings.
Having fun with emojis: https://codepen.io/kldickenson/pen/oNwqXLZ
🦑 🐙 🦑 Double extra bonus points for the mollusk emojis!!! Nicely done - thanks for sharing!
https://codepen.io/w0whitaker/pen/jOwZYqz
🦑 🐙 🦑 Wow!!! Super pretty, William! Code looks great and the design is even better. Great job!
https://codepen.io/maeyler/pen/ZEyrypJ
I know this is not quite vertical navbar... I just combined Day#4 of CSS and Day#6 of HTML (<details> tag)
Very nice - love the background image! Details/summary or a definition list (dl/dt/dd) could be used here as well. Looks great and functions well -- nice work!
This attempt is a vertical navbar, conforming to the specs:
https://codepen.io/maeyler/pen/QWgQxOe
I couldn't do it with hover, used some JavaScript instead
🦑🦑🐙 Very nice! We will get to dropdowns with CSS in the 3rd week 😄
Nice! That's one approach - here you don't have a top level link on the first LI (cephalopods, etc). Markup looks great! Thanks for sharing 😁