14 Comments
User's avatar
Jen Kramer's avatar

🌈🌈🌈 Wow, love your rainbow "border" on the button -- which is actually box shadow. Truly a master work -- very very nicely done!!! 😁

Expand full comment
Romola Chrzanowski's avatar

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.

Expand full comment
Jen Kramer's avatar

🌈🌈🌈 Love it! It's clearly a very funky dumpling restaurant 🤣

Expand full comment
Jen Kramer's avatar

🌈🌈🌈 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!

Expand full comment
Serdar Gulec's avatar

a modest try. I benefited from others thanks for their codings. https://codepen.io/serdar-cihan-g-le-/pen/mdwQJrg

Expand full comment
Jen Kramer's avatar

🌈🌈🌈 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!

Expand full comment
Milan Mihajlovic's avatar

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

Colors can be better, but my inspiration was not good today :)

Expand full comment
Jen Kramer's avatar

🌈🌈🌈 Looks great, works well -- thanks for sharing!

Expand full comment
Jen Kramer's avatar

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;

}

Expand full comment
maeyler's avatar

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.

Expand full comment
Jen Kramer's avatar

Hopefully CSS is a little easier than FORMAT statements. It's almost certainly prettier! 😁

Expand full comment