tesscodes | Mockup: Postcards

Information

Hey guys, let's add some flippable postcards to our mockups! This comes with a general postcard that you can add whatever text you like to (or delete the text to display only an image front) and a customizable city postcard with a 3D font effect! For added fun, check out some of the other mockups from this month (such as the movie poster or the album cover) and import the fancy text headings in place of your title div to give these even more customization. Enjoy! ♥

Wish you were here

October 31, 2019

Name,

Praesent aliquet sagittis risus sed congue. Nulla quis orci id dolor fringilla consequat. Quisque nec ultricies felis. In sit amet sollicitudin nulla.

Curabitur posuere malesuada ligula non rutrum. Nunc feugiat mattis tempor. Etiam sed efficitur nisl. Curabitur ut imperdiet ligula. Maecenas egestas dui quis sapien.

Donec metus mi, convallis et ante id, vestibulum hendrerit massa.

Coding: General

<lj-raw><div style="margin:0 auto;width:800px;height:500px;background:#999 url(POSTCARD_IMG)center;background-size:cover;border:5px solid #fff;box-shadow:0 0 0 1px #ccc;overflow:hidden;">

<a name="front" href="#back" style="width:100%;height:100%;padding:30px;box-sizing:border-box;display:flex;justify-content:flex-start;align-items:flex-end;text-decoration:none;">
		<div style="font-family:palatino linotype;color:#fff;font-size:40px;line-height:1;text-transform:uppercase;">
			FRONT_TITLE
		</div>
	</a>

<a name="back" href="#front" style="width:100%;height:100%;padding:30px;box-sizing:border-box;background:#fff;display:flex;font-family:courier new;font-size:14px;color:#222;text-decoration:none;">

<div style="width:60%;padding:0 30px 0 0;margin:0 30px 0 0;border-right:1px solid #ccc;line-height:1.7;">

<div align="right">DATE</div>
			
			CONTENT<br><br>
			<div align="right">— NAME</div>
		</div>

<div style="width:40%;display:flex;flex-direction:column;line-height:2;">

<div style="margin:100px 0 0 0;">
				<div style="border-bottom:1px solid #ccc;">Name</div>
				<div style="border-bottom:1px solid #ccc;">Address</div>
				<div style="border-bottom:1px solid #ccc;">City, ST ZIP</div>
			</div>
		</div>

</a>

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

Hello from...

Chicago

October 15, 2019

Name,

Curabitur posuere malesuada ligula non rutrum. Nunc feugiat mattis tempor. Etiam sed efficitur nisl. Curabitur ut imperdiet ligula. Maecenas egestas dui quis sapien.

Praesent aliquet sagittis risus sed congue. Nulla quis orci id dolor fringilla consequat. Quisque nec ultricies felis. In sit amet sollicitudin nulla. Sed a sodales ligula.

Donec metus mi, convallis et ante id, vestibulum hendrerit massa. Donec vestibulum suscipit diam, sit amet rutrum diam sollicitudin at. Integer at metus odio.

Coding: City

<lj-raw><div style="margin:0 auto;width:800px;height:500px;background:#999 url(POSTCARD_IMG)center;background-size:cover;border:5px solid #fff;box-shadow:0 0 0 1px #ccc;overflow:hidden;">

<a name="front" href="#back" style="width:100%;height:100%;padding:30px;box-sizing:border-box;display:flex;justify-content:center;align-items:center;text-decoration:none;line-height:.9;text-transform:uppercase;"><div>

<b style="font-family:century gothic;color:#fff;font-size:25px;text-shadow:1px 1px 0 #306584;">Hello from...</b>

</div></a>

<div style="width:60%;padding:0 30px 0 0;margin:0 30px 0 0;border-right:1px solid #ccc;line-height:1.7;">

<div align="right">DATE</div>
			
			CONTENT<br><br>
			<div align="right">— NAME</div>
		</div>

<div style="width:40%;display:flex;flex-direction:column;line-height:2;">

</a>

Installation Guide

Paste into an entry and fill in the following!

POSTCARD_IMG - Front background
DATE - Date of letter
CONTENT - Your written letter
STAMP_IMG - Postage stamp background
FRONT_TITLE - Title (General only)
CITY_NAME - Title (City only)

Editing Guide

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

FONTS

palatino linotype - Front text (General only)
century gothic - Front text (City only)
courier new - Back text

COLORS

#fff Container background; title text; city name outline

#ccc All borders

#60A1B5 City name fill

#306584 City name drop shadow

#222 Back 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!