10billionghosts | code: STRIPE - a simple mood board with hidden nav

link text link text link text link text link text link text link text link text link text

Merry Draftsmas! Code number nine of the Draftsmas block is this weird little thing called STRIPE. STRIPE is a simple mood board with a hidden navigation menu -- click the circle in the center.

When I started working on this mood board, I was like, oh, this is going to be great. And then I finished the mood board portion and I was like, oh, this is actually just kind of whatever? Like, it's not that exciting. And it sat, and sat, and sat as a result. For ages. A few weeks ago, I decided to just slap a hidden nav menu on it to give it a lil more spice. And so, here you have it! A mood board with a hidden nav menu.

CODE HERE:

<lj-raw>

<div style="grid-column-start:1;grid-column-end:3;grid-row-start:1;grid-row-end:4;clip-path: polygon(0 0, 0 40%, 100% 0);background:#ddd url('IMG_URL')top center;background-size:cover;"></div>

<div style="grid-column-start:1;grid-column-end:3;grid-row-start:1;grid-row-end:4;clip-path: polygon(100% 3%, 100% 57%, 0 97%, 0 43%);background:#ddd url('IMG_URL')center;background-size:cover;"></div>

<div style="grid-column-start:1;grid-column-end:3;grid-row-start:1;grid-row-end:4;clip-path: polygon(100% 60%, 0% 100%, 100% 100%);background:#ddd url('IMG_URL')bottom center;background-size:cover;"></div>

<details style="grid-column-start:1;grid-column-end:3;grid-row-start:2;grid-row-end:4;">

<summary style="width:100%;list-style-type: none;text-decoration:none;cursor:pointer;transform:rotate(0);"><div style="width:150px;height:150px;margin:0 auto;border-radius:50%;border:10px solid #fff;box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;background:#ccc url('IMG_URL')center;background-size:cover;"> </div></summary>

<div style="max-width:400px;width:100%;margin-top:20px;display:flex;flex-wrap:wrap;justify-content:center;align-items:start;align-content:start;gap:5px;transform:rotate(0);">

</div>
</details>

</div>

<div style="max-width:400px;width:100%;margin:0 auto;text-align:right;font-size:10px;color:#ddd"><a title="code credit!" href="http://10billionghosts.dreamwidth.org" style="text-decoration:none;color:#ddd;">code</a></div>

</lj-raw>

HOW TO USE:

❣️ Mind those lj-raw tags!!

❣️ This code is mobile compatible and insanejournal friendly!

❣️ To appearify the link list, simply click the center circle (or really anywhere around the middle of the mood board.

❣️ To have the mood board show links by default, add the word open IMMEDIATELY AFTER the word details in the details tag in the code. So it'll be like 'details open style="...'

❣️ There are four instances of IMG_URL: the three background stripe images and the central circle. Be sure to update these with proper image URLS.

❣️ The top and bottom images on the background mood board kinda look neat if you use the same image twice, imo? But you should do whatever you think looks best!

❣️ Links will show 3 across. You can add or delete as many as you want, within reason. If you add 15 or more links, you'll probably get some weird results.

❣️ rgba(125, 176, 163,.7) (hex code #7db0a3 but written in rgb format) is the default color for the link button background. To change this color, you'll want to change those first three numbers to the rgb values of the color you want to use (Google's color picker provides rgb values for colors).

By default, the opacity is set to 70% (that's the fourth digit, .7). To make your buttons fully opaque, change .7 to 1. To make it more translucent, set it to a number like .5 or .25.

❣️ The only other relevant color is #fff, which is white, and it is used as the text color for links and for the background color on the borders of the image board.

❣️ Any other colors are shadow values. I've set them to a very Anything-friendly color by default, so you shouldn't need to mess with them.

❣️ 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 one of the charities listed on the main draftmas hub post.