code: PENDANT - a geometric splash nav

[10billionghosts]

link #1 link #2 link #3

link #1 link #2 link #3

link #1 link #2 link #3

I've been on a Very Geometric Splash Nav kick, so here's another one for the pile. PENDANT was a pain in the ass to figure out, and it is a true feat of hillbilly engineering, but it should hopefully be pretty simple to use!

Since all the nav links are just text, they're easy to add or remove. Remove all links, or squeeze in up to five per diamond for up to fifteen links total. Personally, I think one to three links per diamond looks best.

CODE HERE:
<lj-raw> <div style="width:100%;margin:0 auto;display:flex;justify-content:center;align-items:center;"><div style="min-width:374px;max-width:374px;height:561px;display:grid;grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:272px 87px 1fr 1fr;gap:15px;font-family:verdana, arial, sans serif;font-size:14px;font-variant:small-caps;line-height:1.3;"> <!-- [big square] --> <div style="grid-column-start:1;grid-column-end:5;grid-row-start:1;grid-row-end:3;display:flex;justify-content:center;align-items:center;clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);background:#292929;"> <div style="width:374px;height:374px;display:flex;justify-content:center;align-items:center;clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);background:#fff;"> <div style="width:calc(100% - 20px);height: calc(100% - 20px);clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);background:#eee url('IMG_URL')center;background-size:cover;"></div> </div></div> <!-- [big square, end] --> <!-- [left square] --> <div style="grid-column-start:1;grid-column-end:3;grid-row-start:2;grid-row-end:4;display:flex;justify-content:center;align-items:center;clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);background:#292929;"> <div style="width:100%;height:100%;display:flex;justify-content:center;align-items:center;clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);background:#fff;"> <div style="width: calc(100% - 20px);height: calc(100% - 20px);display:flex;flex-wrap:wrap;justify-content:center;align-items:center;align-content:center;gap:2px;text-align:center;clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);background:#eee url('IMG_URL')right;background-size:cover;"> <a href="#URL_HERE" style="min-width:200px;text-decoration:none;text-shadow: 1px 1px 2px #2b698c;color:#fff;">link #1</a> <a href="#URL_HERE" style="min-width:200px;text-decoration:none;text-shadow: 1px 1px 2px #2b698c;color:#fff;">link #2</a> <a href="#URL_HERE" style="min-width:200px;text-decoration:none;text-shadow: 1px 1px 2px #2b698c;color:#fff;">link #3</a> </div></div></div> <!-- [left square, end] --> <!-- [right square] --> <div style="grid-column-start:3;grid-column-end:5;grid-row-start:2;grid-row-end:4;display:flex;justify-content:center;align-items:center;clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);background:#292929;"> <div style="width:100%;height:100%;display:flex;justify-content:center;align-items:center;clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);background:#fff;"> <div style="width: calc(100% - 20px);height: calc(100% - 20px);display:flex;flex-wrap:wrap;justify-content:center;align-items:center;align-content:center;text-align:center;clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);background:#eee url('IMG_URL')left;background-size:cover;"> <a href="#URL_HERE" style="min-width:200px;text-decoration:none;text-shadow: 1px 1px 2px #2b698c;color:#fff;">link #1</a> <a href="#URL_HERE" style="min-width:200px;text-decoration:none;text-shadow: 1px 1px 2px #2b698c;color:#fff;">link #2</a> <a href="#URL_HERE" style="min-width:200px;text-decoration:none;text-shadow: 1px 1px 2px #2b698c;color:#fff;">link #3</a> </div></div></div> <!-- [right square, end] --> <!-- [bottom square] --> <div style="grid-column-start:2;grid-column-end:4;grid-row-start:3;grid-row-end:5;margin-top:-5px;display:flex;justify-content:center;align-items:center;clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);background:#292929;"> <div style="width:100%;height:100%;display:flex;justify-content:center;align-items:center;clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);background:#fff;"> <div style="width: calc(100% - 20px);height: calc(100% - 20px);display:flex;flex-wrap:wrap;justify-content:center;align-items:center;align-content:center;gap:2px;text-align:center;clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);background:#eee url('IMG_URL')center;background-size:cover;"> <a href="#URL_HERE" style="min-width:200px;text-decoration:none;text-shadow: 1px 1px 2px #2b698c;color:#fff;">link #1</a> <a href="#URL_HERE" style="min-width:200px;text-decoration:none;text-shadow: 1px 1px 2px #2b698c;color:#fff;">link #2</a> <a href="#URL_HERE" style="min-width:200px;text-decoration:none;text-shadow: 1px 1px 2px #2b698c;color:#fff;">link #3</a> </div></div></div> <!-- [bottom square, end] --> </div></div> <!-- CREDIT --> <div style="max-width:374px;width:100%;margin:0 auto;text-align:right;font-size:10px;color:#ccc"><a title="code credit!" href="http://10billionghosts.dreamwidth.org" style="text-decoration:none;color:#ccc;">code</a></div> <!-- CREDIT --></lj-raw>

HOW TO USE:

❣️ Mind those lj-raw tags!!

❣️ This code is mobile compatible and insanejournal friendly!

❣️ This code is pretty much intended to be used for splash pages! Check out Manx's guide to making splash pages on Dreamwidth, or Tess's guide for insanejournal!

❣️ This code has four instances of IMG_URL to account for. All images will auto-resize to fit their respective space. For the smaller three diamonds, keep readability in mind when selecting a background image.

❣️ This code comes with 3 pre-styled links per diamond. You can remove as many links as you'd like or add a few more. I believe each diamond can hold up to 5 links.

❣️ Be sure to change #URL_HERE to the appropriate URL.

❣️ You can leave any diamond as a solid color by leaving the 'IMG_URL' placeholder text intact and instead changing hex code #eee to the hex code of the color you'd like to use.

❣️ hex code #2b698c is the color for the drop shadow on the links. It's mainly there to keep link text legible. Use find-replace to change this hex code, as it is declared multiple times in the code. You'll likely want to do this, rather than leaving this color intact, so that it better match your own aesthetic when styling this code.

❣️ hex code #fff is white, and it is the text color for all links, as well as the color for the interior border on all diamonds. If you would like to change the font color, only change the instances of #fff that show up in links.

❣️ This code comes with a credit by default. Appreciate it if you leave it in, but you can delete if you want! :)

❣️ I love peeking at what people do with my codes, so feel free to comment if you use! If you're feeling generous, you can also donate to my ko-fi.

link #1 link #2 link #3

link #1 link #2 link #3

link #1 link #2 link #3

code

Comments

[rattlethestars]

That Moment When one of your fav code makers drops a new code that is literally perfect on the day you go looking for a code. HAHA.

This was lovely, and as ever, super easy to fill in and edit. Clean and simple and it has such a good shape. Love it! Thank you!!

[10billionghosts]

Thank you SO much for the kind words! ;u; I'm really glad it worked out for you (and that it was easy to use lmao I was a little concerned about this one).

[thrall]

I was looking for a code that might go well with a character I'm looking to play. Lo and behold, you drop something that's literally his aesthetic. Bless you. I'm not exaggerating. It's perf.

As usual, your codes are fantastic and easy to use! Thank you for sharing!

[10billionghosts]

dfdasfafd THAT LOOKS SO GOOD honestly bless when a gif lines up perfect.

THANK YOU i'm glad you like my codes and also that this one worked out so nicely lmao c: (also big eyes emoji at my favorite how much could one banana cost deity)

[thrall]

RIGHT??? i could not believe it. i was like "holy shit hold on i have a gif for this"

how much could one banana cost? 900000 mora? (i am looking forward to terrorizing the public with his lack of money sense.)

[daybreak19]

ended up using this, but this is my first time doing something like this! is there a correct way to credit you?

[10billionghosts]

Thanks for asking! The code has a built-in credit link at the very bottom (you can kinda see it, just off to the right of the design), so that's all taken care of!

[gladius]

So! I don't actually have a lot of links in the first place, but I ended up making the bottom shape have one of his iconic quotes: hola. You make some brilliant codes that are both pretty and easy to work with!

[10billionghosts]

Love this! And tbh thrilled to see some FF9 rep in RP still. Glad you are enjoying my codes c: