Hey Danny, fun challenge!
I've got 5 lines of html and 11 of CSS (13 with proper spacing), using CSS grid.
Are Item 1 and item 2 links? If so, I'm up to 13 lines of css (15 with spacing, adding text-decoration: none; and color: #000000; to ovveride browser link styling). Here's my solution: codepen.io/versavale/pen/VEWKMB
Nice one! Neat trick with CSS grid, might Flebox be better suited for this?
Unfortunately I'm not that familiar with Flexbox, that's why I'm really interested in your solutions :)
I think navigation should be part of the footer. So I put it there, where it should be. And then I think that if you don’t add interactivity you might as well use an image. So I added a few link states as well. Some extra lines of CSS because it’s the web, not an image editor (-:
But then, to be honest, I think most of the time these links are really not needed. Who ever clicks on a navigation? Such an overrated pattern! So instead of a lonely <ul> I would urge everybody to wrap it in something like a <details> with a clear <summary>, so you won't bother people with things they don’t need. In this case you need a lot less CSS, because you don’t really need any layout.
I'm stuck at 7 and 14 with CSS grid... great challenge! Got the gears turning :-)
There must be a way to do the grid shorthand...
Blair, if you use grid, I don't think it is necessary for you to use a list. You could be down to 5 lines of HTML :)
For semantic purposes I would use list item here. But indeed, it can be done without.
<img src="https://thepracticaldev.s3.amazonaws.com/i/e74vongtncaaalpfi33t.png" />
One line /s
i really tried not to over think this:
7 lines in html
12 lines in css
gotta love Flexbox
Smart solution! I used another alternative.
We're a place where coders share, stay up-to-date and grow their careers.
We strive for transparency and don't collect excess data.