Mockup: Photos

[tesscodes]

Information

Hey guys! It's been a VERY long time since I did instant photos, and my old ones are perfectly cute, but I knew I could do better—and what more appropriate time to do that than mockup month, right? You'll be able to easily add text to the two polaroids, and the texture is a repeating background, so if you enjoy fancy Instax Mini film styles, you'll be able to change these out for different patterns or gradients for the photo frames! Enjoy! ♥

Coding: Mini Instax

<lj-raw><div style="height:3.38in;width:2.12in;background:#fefefe url(https://i.imgur.com/mezPhW2.png);border:1px solid rgba(0,0,0,0.1);box-shadow:1px 1px 2px 0 rgba(0,0,0,0.05);border-radius:5px/10px;margin:0 auto;box-sizing:border-box;"> <!---PHOTO---> <div style="height:2.44in;border:.15in solid rgba(0,0,0,0.03);border-top:.27in solid rgba(0,0,0,0.03);"> <div style="height:100%;background:#ddd url(YOUR_PHOTO)center;background-size:cover;box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.1);"></div> </div> <!---TEXT---> <div style="height:calc(100% - 2.44in - .15in - .27in);padding:0 10px;text-align:center;display:flex;align-items:center;justify-content:center;font-size:10px;font-family:monospace;"> TEXT_HERE </div> </div><center style="font-family:arial;font-size:8px;letter-spacing:2px;line-height:2;"><a href="http://tessisamess.insanejournal.com/" style="color:#bbb;text-decoration:none;">CODE</a></center></lj-raw>

Coding: Classic Polaroid

<lj-raw><div style="height:4.2in;width:3.5in;background:#fefefe url(https://i.imgur.com/mezPhW2.png);border:1px solid rgba(0,0,0,0.1);box-shadow:1px 1px 2px 0 rgba(0,0,0,0.05);border-radius:2px/7px;margin:0 auto;box-sizing:border-box;"> <!---PHOTO---> <div style="height:3.1in;border:.2in solid rgba(0,0,0,0.03);"> <div style="height:100%;background:#ddd url(YOUR_PHOTO)center;background-size:cover;box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.1);"></div> </div> <!---TEXT---> <div style="height:calc(100% - 3.1in - .4in);padding:0 10px;text-align:center;display:flex;align-items:center;justify-content:center;font-size:10px;font-family:monospace;"> TEXT_HERE </div> </div><center style="font-family:arial;font-size:8px;letter-spacing:2px;line-height:2;"><a href="http://tessisamess.insanejournal.com/" style="color:#bbb;text-decoration:none;">CODE</a></center></lj-raw>

Coding: Standard Instant Photo

<lj-raw><div style="height:4in;width:6in;background:#fefefe;padding:.15in;border:1px solid rgba(0,0,0,0.1);box-shadow:1px 1px 2px 0 rgba(0,0,0,0.05);margin:0 auto;box-sizing:border-box;"> <!---PHOTO---> <div style="height:100%;background:#ddd url(YOUR_PHOTO)center;background-size:cover;box-sizing:border-box;"></div> </div><center style="font-family:arial;font-size:8px;letter-spacing:2px;line-height:2;"><a href="http://tessisamess.insanejournal.com/" style="color:#bbb;text-decoration:none;">CODE</a></center></lj-raw>

Coding: Kodak Frame

<lj-raw><div style="width:500px;box-shadow:1px 1px 2px 0 rgba(0,0,0,0.05);background:#ddd url(YOUR_PHOTO)center;background-size:cover;margin:0 auto;box-sizing:border-box;"> <!---FRAME---> <img src="https://i.imgur.com/nbaOHGE.png"style="width:100%;"> </div><center style="font-family:arial;font-size:8px;letter-spacing:2px;line-height:2;"><a href="http://tessisamess.insanejournal.com/" style="color:#bbb;text-decoration:none;">CODE</a></center></lj-raw>

Installation Guide

Paste into an entry and fill in the following!

YOUR_PHOTO - Add your photo here!
TEXT_HERE - This text is optional; if no text is needed, go ahead and delere the placeholder! (Instax and Polaroid only)

Editing Guide

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

To use multiples

Remove the lj-raw tags and credit link, then change the margin from margin:0 auto; to margin:20px; (or whatever you'd like your spacing to be) and add as many photos as you'd like to this container:

<lj-raw><div style="margin:0 auto;max-width:800px;display:flex;justify-content:center;flex-wrap:wrap;"> YOUR_PHOTO </div><center style="font-family:arial;font-size:8px;letter-spacing:2px;line-height:2;"><a href="http://tessisamess.insanejournal.com/" style="color:#bbb;text-decoration:none;">CODE BY TESSISAMESS</a></center></lj-raw>

FONTS

Monospace - Overall text (Instax and Polaroid only)

IMAGES

https://i.imgur.com/mezPhW2.png - Texture for Instax and Polaroid frame
https://i.imgur.com/nbaOHGE.png - Kodak frame; this can be changed to any photo frame as long as the inner part is transparent so that the photo shows through.

COLORS

#fefefe

Photo frame (except for Kodak)

rgba(0,0,0,0.03)

Upper background of Instax and Polaroid

rgba(0,0,0,0.1)

Borders and box shadows

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!