10billionghosts | code: level - an aesthetic nav board

the moon is a friend

for the lonesome to talk to

Needed a break from big involved codes but still wanted to produce content so here is a simple mood board/navigation code.

There's a little bit of extra customization you can do on this code if you like:

Firstly, each circle is a link by default, but I've included instructions to remove the link portion below if you just want a mood board.

And second, the header and footer text is 100% optional. Just delete it out if you don't want it there! I think the code looks great without the text tbh.

This code is mobile friendly and works nicely as a splash page or as a header for an app code. As usual, I've provided a couple extra styling examples down at the bottom.

Here is the base code:

<lj-raw><div style="max-width:650px;width:100%;margin:10px auto;"><div style="max-width:650px;width:100%;margin:0 auto;color:#ddd;text-align:center;line-height:.8;font-family:arial, helvetica, sans serif;-webkit-text-fill-color: white;-webkit-text-stroke-width:1px;-webkit-text-stroke-color:#ccc;font-style:italic;font-weight:bold;font-size:30px;">!!HEADER TEXT!!</div>

</div></div>

<div style="max-width:650px;width:100%;margin:0 auto;color:#ddd;text-align:center;line-height:.8;arial, helvetica, sans serif;-webkit-text-fill-color: white;-webkit-text-stroke-width: 1px;-webkit-text-stroke-color:#ccc;font-style: italic;font-weight:bold;font-size:30px;transform: scale(-1, -1)">!!FOOTER TEXT!!</div></div></lj-raw>

HOW TO USE:

❣️ Mind the lj-raw tags!!

❣️ This code is mobile friendly and insanejournal friendly!

❣️ You can add or remove circles by pasting additional a links codes! In my opinion more than 4 circles looks crowded, but it'll accommodate them!

❣️ Don't want the header and footer text? Just delete !!HEADER TEXT!! and !!FOOTER TEXT!! and leave it blank. :)

❣️ If you don't want the circles to be links, simple remove this portion from each a tag: title="link name" href="#URL_HERE".

❣️ Remember to update #URL_HERE to whatever link you'd like.

❣️ Change "link name" to a description of the link. For example "profile", "mood board", "tags", "game", or "permissions".

❣️ IMG_URL is where you can post the URL for any image you'd like to appear. If you want to use solid colors, simply leave the IMG_URL there and change the preceding hex code, instead.

❣️ hex code #fff is white and controls the border & font colors.

❣️ hex code #aaa controls the background color of the top two squares.

❣️ hex code #bbb controls the background color of the bottom two squares.

❣️ hex code #ddd is the default background color of each circle and the border around the code.

❣️ You can fiddle with the max-width and min-height values in the very top of the code to slightly change the size of this code. I can't guarantee things will align correctly if you do, but setting min-height to 350px - 400px didn't seem to cause too many problems while I was testing the code out!

As always, I do not require credit, but it is always appreciated, especially if you are editing my base code. I love to see what people have done with my code, so drop me a comment with a link if you decide to use! If you're feeling generous, you can also donate to my ko-fi!

This code is compatible with insanejournal.

we live in a society

bottom text

code: level - an aesthetic nav board

no subject

no subject