code: hex nav, a simple nav menu with image accents (updated 10/10/21)

[10billionghosts]

profile . dropbox . contact visuals . soundtrack . game

This very simple aesthetic board + nav code came about because I was desperate to release something with hexagons in it. I think it looks best with looping gifs, especially if they have a similar color scheme.

It was very slightly updated October 10, 2021 to clean up the code and fix some things that were bothering me.

Here is the base code:

<lj-raw><div style="width:310px;line-height:1.5;margin:10px auto;font-family:arial;font-size:13px;"> <div style="width:100%;display:grid;grid-template-rows:repeat(5,50px);grid-template-columns:repeat(3,70px);grid-gap:10px;"> <div style="grid-area:one;grid-column-start:1;grid-column-end:2;grid-row-start:1;grid-row-end:2;"><div style="width:150px;height:150px;background:#ddd url('IMG_URL')right;background-size:cover;clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);z-index:4;"></div></div> <div style="grid-area:two;grid-column-start:2;grid-column-end:3;grid-row-start:3;grid-row-end:4;"><div style="width:150px;height:150px;background:#ddd url('IMG_URL')center;background-size:cover;clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);z-index:4;"></div></div> <div style="grid-area:three;grid-column-start:3;grid-column-end:4;grid-row-start:1;grid-row-end:2;"><div style="width:150px;height:150px;background:#ddd url('IMG_URL')center;background-size:cover;clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);z-index:4;"></div></div> </div> <div style="width:200px;margin:-5px auto 10px;padding:4px;border-top:1px dotted #ccc;"><div style="width:175px;display:flex;flex-wrap:wrap;justify-content:center;margin:0 auto;"> <a href="#URL_HERE" style="color:#6c6c75;font-variant:small-caps;text-decoration:none;text-shadow:2px 1px #eee;font-weight:bold;margin:3px;">link one</a> <a style="text-decoration:none;color:#6c6c75;">.</a> <a href="#URL_HERE" style="color:#6c6c75;font-variant:small-caps;text-decoration:none;text-shadow:2px 1px #eee;font-weight:bold;margin:3px;">link two</a> <a style="text-decoration:none;color:#6c6c75;">.</a> <a href="#URL_HERE" style="color:#6c6c75;font-variant:small-caps;text-decoration:none;text-shadow:2px 1px #eee;font-weight:bold;margin:3px;">link three</a> <a href="#URL_HERE" style="color:#6c6c75;font-variant:small-caps;text-decoration:none;text-shadow:2px 1px #eee;font-weight:bold;margin:3px;">link four</a> <a style="text-decoration:none;color:#6c6c75;">.</a> <a href="#URL_HERE" style="color:#6c6c75;font-variant:small-caps;text-decoration:none;text-shadow:2px 1px #eee;font-weight:bold;margin:3px;">link five</a> <a style="text-decoration:none;color:#6c6c75;">.</a> <a href="#URL_HERE" style="color:#6c6c75;font-variant:small-caps;text-decoration:none;text-shadow:2px 1px #eee;font-weight:bold;margin:3px;">link six</a> </div></div> </div></lj-raw>

HOW THIS WORKS:
❣️ Keep the LJ-raw tags!!

❣️ This code is insanejournal friendly and, as far as I can tell, mobile friendly! It's small width (~300 pixels), means it should fit neatly on most phone screens.

❣️ Replace each IMG_URL with a picture you'd like to use, or change the #ddd hex code to make it a solid color! Images will scale and center to each hex.

❣️ You can add links in place of any instance of #URL_HERE

❣️ Changing all the hex code #6c6c75 to alter the link color, and #eee to change the link's shadow color.

❣️ I cleaned this code up a bit from its original version. If you run into any issues using it, please comment below and I'll have a look.

As always, I do not require credit, but it is appreciated. I love to see what people have done with my code, so drop me a comment with a link if you decide to use!

This code is compatible with insanejournal!

link one . link two . link three link four . link five . link six