Tessisamess

Information

Hey guys! SOOO hype for this; it's a sort of... mood/aesthetic board with transparent images (any you like! Most should fit) and customizable paint swatches. No really! Add any solid color or texture image to the designated area of each swatch to make each one any color you want! Not all textures will look nice in these since they're... paint lmao, but glitter and metallic textures tend to look really good! If you want more codes like these that emulate the look of photoshop graphic collages, let me know! Enjoy! 💖

The Coding

<lj-raw><div style="margin:0 auto;width:750px;background:#eee url(https://i.imgur.com/kWIq8yH.jpg)center;background-size:cover;border:5px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,0.1);"><div style="background:rgba(255,255,255,0.8);height:450px;padding:30px;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;"> <!--PICTURES--> <div style="align-self:flex-start;display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-start;height:100%;width:200px;padding:0 80px 0 0;margin:0 50px 0 -100px;"> <!--PHOTO--> <div style="background:#ddd url(LG_PHOTO)center;background-size:cover;width:100%;height:300px;box-shadow:3px 3px 6px 0 rgba(0,0,0,0.15);position:relative;"></div> <!--POLAROID--> <div style="background:#ddd url(POLAROID_PHOTO)center;background-size:cover;margin:-100px -40px 0 0;width:130px;height:130px;box-shadow:5px 5px 8px 1px rgba(0,0,0,0.15);border:10px solid #f6f6f6;border-bottom:40px solid #fff;transform:rotate(5deg);position:relative;"></div> <!--SMALL TRANSPARENT ELEMENT--> <img src="https://i.imgur.com/PG8RPmu.png" style="width:110px;margin:-250px -90px 0 0;"> </div> <!--TEXT & COLORS--> <div style="width:300px;height:100%;display:flex;flex-direction:column;justify-content:space-between;"> <!--BLURB--> <div style="text-align:center;background:rgba(255,255,255,0.3);padding:10px;box-shadow:3px 3px 6px 0 rgba(0,0,0,0.1);font-size:8px;font-family:georgia,serif;line-height:1.5;color:#222;"><div style="background:#fff;padding:20px;"> <b style="letter-spacing:4px;display:block;margin:0 0 3px 0;">BLURB_TITLE</b> BLURB_CONTENT </div></div> <!--COLOR SWATCHES--> <div style="align-self:flex-end;display:flex;justify-content:center;"> <!--COLOR #1--> <div style="height:230px;-webkit-mask:url(https://i.imgur.com/AB9bpD4.png)center no-repeat;mask:url(https://i.imgur.com/AB9bpD4.png)center no-repeat;-webkit-mask-size:100% auto;mask-size:100% auto;width:60px;"> <div style="height:100%;background:#999 url(SWATCH_PIC1)center;background-size:cover;"></div> </div> <!--COLOR #2--> <div style="height:230px;-webkit-mask:url(https://i.imgur.com/hd8S98Z.png)center no-repeat;mask:url(https://i.imgur.com/hd8S98Z.png)center no-repeat;-webkit-mask-size:100% auto;mask-size:100% auto;width:60px;"> <div style="height:100%;background:#aaa url(SWATCH_PIC2)center;background-size:cover;"></div> </div> <!--COLOR #3--> <div style="height:230px;-webkit-mask:url(https://i.imgur.com/BZtisdr.png)center no-repeat;mask:url(https://i.imgur.com/BZtisdr.png)center no-repeat;-webkit-mask-size:100% auto;mask-size:100% auto;width:60px;"> <div style="height:100%;background:#bbb url(SWATCH_PIC3)center;background-size:cover;"></div> </div> <!--COLOR #4--> <div style="height:230px;-webkit-mask:url(https://i.imgur.com/FnoTCN0.png)center no-repeat;mask:url(https://i.imgur.com/FnoTCN0.png)center no-repeat;-webkit-mask-size:100% auto;mask-size:100% auto;width:60px;"> <div style="height:100%;background:#ccc url(SWATCH_PIC4)center;background-size:cover;"></div> </div> <!--COLOR #5--> <div style="height:230px;-webkit-mask:url(https://i.imgur.com/LIJdqhj.png)center no-repeat;mask:url(https://i.imgur.com/LIJdqhj.png)center no-repeat;-webkit-mask-size:100% auto;mask-size:100% auto;width:60px;"> <div style="height:100%;background:#ddd url(SWATCH_PIC5)center;background-size:cover;"></div> </div> </div> </div> <!--LARGE TRANSPARENT ELEMENT--> <img src="https://i.imgur.com/knOZpQU.png" style="align-self:flex-end;max-height:95%;position:relative;margin:0 -150px 0 50px;"> <!--CREDIT--> <a href="http://tessisamess.insanejournal.com/" style="align-self:flex-end;margin:0 -30px -30px 0;font-size:10px;text-decoration:none;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(0,0,0,0.2);border-bottom:none;border-right:none;color:rgba(0,0,0,0.27);font-weight:bold;line-height:0;text-transform:uppercase;border-radius:100%;">C</a> </div></div></lj-raw>

Installation Guide

Paste into an entry and fill in the following!

LG_PHOTO - Main photo
POLAROID_PHOTO - Polaroid photo

BLURB_TITLE and BLURB_CONTENT - Blurb area
SWATCH_PIC1 through SWATCH_PIC5 - Optional; leave as is unless you're using textured images to fill your paint swatches instead of colors

margin:-250px -90px 0 0; - margins to reposition the small, lefthand transparent object
margin:0 -150px 0 50px; - margins to reposition the large, righthand transparent object

Editing Guide

Paste the coding into Notepad or similar and bring up Replace All (usually Ctrl+H) to replace values quickly and easily!

FONTS

georgia,serif - Blurb text

IMAGES

https://i.imgur.com/kWIq8yH.jpg - Concrete background
https://i.imgur.com/knOZpQU.png - Leafy branch
https://i.imgur.com/PG8RPmu.png - Graph paper

COLORS

#fff

Container border and blurb background

rgba(255,255,255,0.8)

Container overlay background (to mute background image)

rgba(255,255,255,0.3)

Blurb border

#ddd

Swatch #5

#ccc

Swatch #4

#bbb

Swatch #3

#aaa

Swatch #2

#999

Swatch #1

#222

Blurb text

Terms of Use

♡ Do not remove credit.
♡ Do not redistribute my codes in part or in whole (posting a copy for players to use in your game is fine with a link to original post.)
♡ If you break something during editing, please feel free to drop me a comment and I'll help as best I can!
♡ I love seeing edits! This isn't a rule, but if you have a cool edit of one of my codes I'd love to see it!