code: MOOD PACK 1, CIRCLE - a simple, circular mood board

[10billionghosts]

code

HELLO FRIENDS! I MADE A BUNCH OF MOOD BOARDS and am releasing them all in one go. They are all fairly straightforward. Feel free to customize them to suit your needs!

Here's the first one: a simple circular doohicky that works well as a post topper. Has kind of a shippy feel to it.

My BIGGEST THANKS to thisisalex for playing with all these codes before release and making some examples that I have stolen to use for the release posts.

CODE HERE:
<lj-raw><div style="max-width:350px;width:100%;height:350px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr .75fr;gap:10px;border-radius:50%;overflow:hidden;"> <div style="grid-column-start:1;grid-column-end:2;grid-row-start:1;grid-row-end:2;background:#ccc url('IMG_URL')center;background-size:cover;"></div> <div style="grid-column-start:2;grid-column-end:3;grid-row-start:1;grid-row-end:2;background:#ccc url('IMG_URL')center;background-size:cover;"></div> <div style="grid-column-start:1;grid-column-end:3;grid-row-start:2;grid-row-end:3;background:#ccc url('IMG_URL')center;background-size:cover;"></div> </div> <!-- CREDIT --> <div style="max-width:350px;width:100%;margin:0 auto;text-align:center;font-size:10px;font-weight:normal;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!! If you're missing one it will cause the circle to be flat on the bottom.

❣️ This code is mobile compatible and insanejournal friendly!

❣️ THANKS AGAIN TO ALEX FOR THE LIVE EXAMPLES AT THE BOTTOM OF THIS POST!

❣️ This code comes with three instances of IMG_URL that will need to be replaced with the URL of an image you'd like to use. The top two spots work best with a square or portrait image, while the bottom slot works best with a landscape-oriented image.

❣️ 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.

Comments

[thisisalex]

hehehehehehehehehehehe

[10billionghosts]

thank you for immortalizing The Bad Ship 😌

[addipted]

Hi! This is so pretty and simple ... I'd love to use it for a community navigation. Is there any way to make the three images into links?

[10billionghosts]

I can whip something like that up! Were you hoping to JUST make the images links, or add some texts, as well?

[10billionghosts]

Hey! I hadn't heard back yet, so I went ahead and kinda made like...both as one?

<lj-raw><div style="max-width:350px;width:100%;height:350px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr .75fr;gap:10px;border-radius:50%;overflow:hidden;"> <a href="#URL_HERE" style="text-decoration:none;grid-column-start:1;grid-column-end:2;grid-row-start:1;grid-row-end:2;display:flex;justify-content:center;align-items:end;background:#ccc url('IMG_URL')center;background-size:cover;color:#fff;">OPTIONAL ANCHOR TEXT</a> <a href="#URL_HERE" style="text-decoration:none;grid-column-start:2;grid-column-end:3;grid-row-start:1;grid-row-end:2;display:flex;justify-content:center;align-items:end;background:#ccc url('IMG_URL')center;background-size:cover;color:#fff;">OPTIONAL ANCHOR TEXT</a> <a href="#URL_HERE" style="text-decoration:none;grid-column-start:1;grid-column-end:3;grid-row-start:2;grid-row-end:3;display:flex;justify-content:center;align-items:center;background:#ccc url('IMG_URL')center;background-size:cover;color:#fff;">OPTIONAL ANCHOR TEXT</a> </div> <!-- CREDIT --> <div style="max-width:350px;width:100%;margin:0 auto;text-align:center;font-size:10px;font-weight:normal;color:#ccc"><a title="code credit!" href="http://10billionghosts.dreamwidth.org" style="text-decoration:none;color:#ccc;">code</a></div> <!-- CREDIT --></lj-raw>

So each IMAGE is a link, but you can also have (a short string of) text on there if you'd like, too. Or you can have no text. Just delete the "OPTIONAL ANCHOR TEXT" for each link/image.

[addipted]

You are such a rockstar, thank you! I will try this out as soon as I have time to code!