tesscodes | Tarot Reading

— READING ; CHARACTER NAME —

CARD. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis faucibus felis id urna lobortis elementum quis at lorem. Cras pharetra placerat commodo. Pellentesque justo nisi, egestas in dolor eget, lacinia tempus diam. Nulla ut lacinia orci.

CARD. Proin dui leo, tincidunt sit amet leo et, maximus blandit massa. Nunc viverra efficitur elit ac pulvinar. Donec pretium viverra suscipit. Nunc facilisis, erat nec convallis malesuada, elit nisl consectetur ipsum, at lobortis est neque non leo. Morbi vitae sem eget odio ornare volutpat. Donec tristique ultrices posuere. Morbi orci erat, hendrerit vulputate lorem vel, condimentum suscipit ipsum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

CARD. Morbi ornare, metus at cursus semper, turpis nulla cursus ex, eget porta arcu nulla eu quam. Vivamus imperdiet massa et vehicula semper. Morbi a lobortis tellus. Nulla sagittis magna pulvinar, mollis odio vel, scelerisque est. Ut egestas lobortis nunc, vel egestas justo vestibulum pretium. Sed eu sem ipsum. Quisque non enim efficitur, hendrerit libero non, pulvinar odio.

CARD. Nunc fringilla velit in leo imperdiet, a varius lorem dictum. Donec ultrices ante eget molestie molestie. Phasellus a diam nec nibh pellentesque imperdiet quis vel augue. Donec leo velit, porta sed elementum at, lacinia et nibh. Quisque mollis auctor urna vitae viverra. Mauris venenatis gravida lacus, ac luctus neque molestie at. Phasellus sodales est id mauris pharetra, vitae varius neque tincidunt. Aliquam fringilla fringilla lorem.

CARD. Aliquam et leo ultrices, porta velit eget, rhoncus mi. Pellentesque semper lorem consequat, pellentesque nunc quis, pellentesque leo. In imperdiet egestas orci. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam tristique nisl quis ex convallis, ac sagittis arcu sodales. Suspendisse euismod porta massa, in faucibus eros convallis sed. Cras sit amet tincidunt magna.

coding

Information

Hey guys! This month on Patreon, I made a tarot themed layout, so I got a bug to make a matching tarot reading code. This would be great for characters who give readings; I could see making an entry for readings and replying to people's comments with this code for their reading. (So, of course, this code is comment-safe!) Below is a 22 card deck for readings that you can plug and play, and the cards can be fully recolored. Enjoy! 💖

Note: If you want a three card reading, you'll want to delete the first and last card rather than any two cards, that way they keep their slight V shape.

The Coding

<lj-raw><div style="max-width:850px;margin:0 auto;background:#2E2E30;padding:30px;outline:4px double #F4E4C3;outline-offset:-15px;box-sizing:border-box;color:#fff;font-family:palatino linotype,georgia,serif;font-size:15px;text-shadow:1px 1px 1px rgba(0,0,0,0.6);">

<div style="text-align:center;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#F4E4C3;margin:0 0 -10px 0;">

— READING ; CHARACTER_NAME —

</div>

<div style="display:flex;align-items:flex-start;justify-content:center;margin:0 0 20px 0;">

<div style="background:#F4E4C3;box-shadow:2px 3px 3px 0 rgba(0,0,0,0.1);outline:3px solid #1B1B23;outline-offset:-2px;border-radius:5px;margin:0 3px;"><div style="background:#1B1B23;mask:url(CARD_URL)center no-repeat;mask-size:cover;width:155px;height:230px;border-radius:3px;"></div></div>

<div style="background:#F4E4C3;box-shadow:2px 3px 3px 0 rgba(0,0,0,0.1);border-radius:5px;margin:20px 3px 0 3px;"><div style="background:#1B1B23;mask:url(CARD_URL)center no-repeat;mask-size:cover;width:155px;height:230px;border-radius:3px;"></div></div>

<div style="background:#F4E4C3;box-shadow:2px 3px 3px 0 rgba(0,0,0,0.1);border-radius:5px;margin:40px 3px 0 3px;"><div style="background:#1B1B23;mask:url(CARD_URL)center no-repeat;mask-size:cover;width:155px;height:230px;border-radius:3px;"></div></div>

<div style="background:#F4E4C3;box-shadow:2px 3px 3px 0 rgba(0,0,0,0.1);border-radius:5px;margin:0 3px;"><div style="background:#1B1B23;mask:url(CARD_URL)center no-repeat;mask-size:cover;width:155px;height:230px;border-radius:3px;"></div></div>

</div>

<div style="">

<b style="font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#F4E4C3;">CARD.</b> Card_Info

</div>

</div><div style="max-width:850px;margin:5px auto 0 auto;text-align:right;font-size:9px;letter-spacing:2px;font-style:italic;"><a href="https://tessisamess.insanejournal.com/158053.html" style="text-decoration:none;color:#aaa;">coding</a></div></lj-raw>

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,georgia,serif - Body font
font-size:11px; - Header text
font-size:15px; - Body text
font-size:10px; - Card title text

IMAGES

THESE IMAGES ARE SAFE TO HOTLINK
COLORS

#fff Text

#F4E4C3 Borders, card design, headings

#2E2E30 Container background

#1B1B23 Card background

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!