10billionghosts | code: MOOD PACK 1, THEATER KID

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!

Third mood board is THEATER KID, a three-image mood board with a fancy schmancy background that you can also customize.

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:500px;width:100%;height:550px;margin:0 auto;display:grid;grid-template-columns:.2fr 1fr 1fr 1fr .2fr;grid-template-rows:.2fr 1fr .5fr .5fr .5fr 1fr .2fr;gap:0;">

<div style="grid-column-start:1;grid-column-end:6;grid-row-start:1;grid-row-end:8;-webkit-mask-image: url(https://i.imgur.com/vaPFogf.png);mask-image:url(https://i.imgur.com/vaPFogf.png);-webkit-mask-size:100%;mask-size:100%;-webkit-mask-repeat: no-repeat;mask-repeat: no-repeat;-webkit-mask-position:center;mask-position:center;background: linear-gradient(90deg, rgba(21,50,60,1) 0%, rgba(40,79,91,1) 50%, rgba(66,96,102,1) 100%);"></div>

<div style="transform:rotate(0);grid-column-start:2;grid-column-end:4;grid-row-start:2;grid-row-end:4;box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;background:#ccc url('IMG_URL')center;background-size:cover;"></div>

<div style="transform:rotate(0);grid-column-start:3;grid-column-end:5;grid-row-start:3;grid-row-end:6;box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;background:#ccc url('IMG_URL')center;background-size:cover;"></div>

<div style="transform:rotate(0);grid-column-start:2;grid-column-end:4;grid-row-start:5;grid-row-end:7;box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;background:#ccc url('IMG_URL')center;background-size:cover;"></div>

<div style="transform:rotate(0);grid-column-start:2;grid-column-end:5;grid-row-start:7;text-align:left;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>

</div></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!

❣️ There are three primary IMG_URLs to change here, so watch out for those!

❣️ The code comes with a blue-gray-teal backsplash by default. IF YOU WOULD LIKE TO CHANGE THE BACKSPLASH:

If you would just like to change the color, generate a new css gradient using a tool like this one and copy-paste the resulting code over the default, which is: background: linear-gradient(90deg, rgba(21,50,60,1) 0%, rgba(40,79,91,1) 50%, rgba(66,96,102,1) 100%)

If you would like to change the actual image itself, you will need a transparent png (or gif). You can find useful ones on onlyGFX. For best results, pick a more vertical image.

You will need to host the image yourself (on imgur or another site that offers hosting) and paste it twice into the code, replacing both instances of 'https://i.imgur.com/vaPFogf.png'.

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

code

code: MOOD PACK 1, THEATER KID - a dramatic mood board