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.
🌈🌈🌈 Fabulous! Looks very button-y. Anytime you use red and green together, be careful - color blindness needs to be considered. I think this is OK as everything is readable on the screen and on hover, but keep this in mind. Thanks for sharing!
🌈🌈🌈 Lovely! You may want a different color text for "order" as it is hard to distinguish from the blue. The rollover looks awesome. Nice work and thanks for sharing!
Excellent! The navbar looks great. I saw you had li { display: inline-block } and tracked down the cause of the issue. The nav wasn't displaying horizontally without it. You put your display: flex on the nav style, instead of a ul style. Try changing your styles to this, and then you can get rid of the inline-block:
Thank you Jen, your simple fix works! CSS is much better when you get its meaning! As a result, I was able to get rid of styling on <nav> altogether.
A side note: I started programming 50 years ago on Fortran. About half the effort at that time was spent on FORMAT statements, and they had almost the same function of CSS: Show your results in the desired position on printed pages.
https://codepen.io/w0whitaker/pen/vYZzxZV
🌈🌈🌈 Wow, love your rainbow "border" on the button -- which is actually box shadow. Truly a master work -- very very nicely done!!! 😁
https://codepen.io/romola/full/wveRgKW
This is not as nice as I wanted. Re-using the last button added complication. I am not happy with the colors but hopefully they make the point.
🌈🌈🌈 Love it! It's clearly a very funky dumpling restaurant 🤣
https://codepen.io/kldickenson/pen/dyRwPLZ
🌈🌈🌈 Fabulous! Looks very button-y. Anytime you use red and green together, be careful - color blindness needs to be considered. I think this is OK as everything is readable on the screen and on hover, but keep this in mind. Thanks for sharing!
a modest try. I benefited from others thanks for their codings. https://codepen.io/serdar-cihan-g-le-/pen/mdwQJrg
🌈🌈🌈 Lovely! You may want a different color text for "order" as it is hard to distinguish from the blue. The rollover looks awesome. Nice work and thanks for sharing!
https://codepen.io/miklaan/pen/zYzmmrP
Colors can be better, but my inspiration was not good today :)
🌈🌈🌈 Looks great, works well -- thanks for sharing!
https://codepen.io/maeyler/pen/vYZzxBj
Excellent! The navbar looks great. I saw you had li { display: inline-block } and tracked down the cause of the issue. The nav wasn't displaying horizontally without it. You put your display: flex on the nav style, instead of a ul style. Try changing your styles to this, and then you can get rid of the inline-block:
nav {
color: blue;
background: wheat;
margin: -8px;
padding: 10px;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
}
Thank you Jen, your simple fix works! CSS is much better when you get its meaning! As a result, I was able to get rid of styling on <nav> altogether.
A side note: I started programming 50 years ago on Fortran. About half the effort at that time was spent on FORMAT statements, and they had almost the same function of CSS: Show your results in the desired position on printed pages.
Hopefully CSS is a little easier than FORMAT statements. It's almost certainly prettier! 😁