My pen --> https://codepen.io/Mike-was-here123/full/MqJZdb/
To fill up space, I made mock ads for my products on my product landing page
Feedback? I made two separate navigation bars for 1300 pixels above and below. When you reach 500 pixels, its just a switch between children and container.
I remember this project when you were working on it. I assume you are planning on expanding this for all of the other categories you show? If so, I suggest graying out the non-flexblox categories, because it is a bit confusing to a user. My first impression was that I should be able to click on any of menu categories or at least click on the Children tab, since it is still related to flexbox. Why? Because even though you have greyed them out, I can see a pointer over them which gives a user the idea they are clickable. I suggest adding creating a class for the applicable anchor and button elements which should not show a point and use cursor: default; and also make the black font color a lighter grey. This would make it seem more like it is a disabled tab.
If nothing else, definitely add content for the Children tab of flexbox or just do not show it at all.
Now to the content that actually shows. You need to adjust something, because when the device width is greater than 500px but less than or equal to 602px, I see the following:
See my note in the screenshot below for what is an annoying side-effect when hovering over any of the links in Container category.
Lastly, try to stick with styling only in the CSS section and not mixing in inline-styling.
My impression was to make it look like a official website, and you have currently navigated to the flex box section (and are stuck their).
Click the back button to navigate to select either children or container. The idea is that you can navigate between layers/ sections. On default you navigated from css to flexbox, then to container.
I accidentally deleted the overflow-y on my css and that button issue resulted. Fixed it.
I did the cursor thing. I applied it to everything though so people would try and click the back button.
I changed it from border to scale to prevent shifting.
Here is the nav bar on bigger screens btw. I did two for 1300 and above and below, and just that switch at 500px and below.
