Tessisamess

CODE BY TESSISAMESS

Information

Hey guys! OOOH, OFF-SCHEDULE POST. LET'S DO ONE MORE MOCKUP TO COMPLETE THE SET, EH? We're coming in hot with a book cover this time, and this might be my favorite in the set??? I don't know; I'm terrible at picking favorites lmao. I'm DEFINITELY over-posting this month but I like Halloween way more than Christmas, so let's just say these are Halloween presents haha.

If you guys have any ideas for other mockups like these you'd like to be able to use, please let me know and I'll see about adding them to the set! Like my move poster mockup, this comes with alternate text styles. Enjoy! ♥

The Coding

<lj-raw><div style="margin:0 auto;max-width:1020px;height:800px;display:flex;flex-wrap:wrap;justify-content:space-between;color:#fff;font-family:century gothic,helvetica,sans-serif;line-height:1;font-size:15px;"> <!---FRONT COVER---> <div style="background:#222 url(FRONT_COVER)center;background-size:cover;width:49.5%;height:100%;padding:10% 20px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;align-items:center;text-align:center;text-transform:uppercase;"> <!---FLAVOR TEXT---> <div style="letter-spacing:3px;"> TAGLINE </div> <!---STANDARD TITLE---> <h3 style="font-size:50px;font-weight:normal;margin:0;"> STANDARD </h3> <!---HALF OUTLINE TITLE---> <h3 style="font-size:50px;font-weight:normal;margin:0;"> Half<b style="color:#fff;-webkit-text-fill-color:transparent;-webkit-text-stroke-color:#fff;-webkit-text-stroke-width:1px;">Outline</b> </h3> <!---TWO TONE TITLE---> <h3 style="font-size:50px;font-weight:normal;margin:0;"> TWO <span style="color:#4E778A;">TONE</span> </h3> <!---DESTROYED TITLE---> <h3 style="font-size:50px;font-weight:normal;margin:0;color:#fff;background:url(https://i.imgur.com/C4pktYz.jpg)center;background-size:cover;-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:invert(100%);"> DESTROYED </h3> <!---OUTLINED TITLE---> <h3 style="font-size:50px;font-weight:normal;margin:0;color:#fff;-webkit-text-fill-color:transparent;-webkit-text-stroke-color:#fff;-webkit-text-stroke-width:1px;"> OUTLINED </h3> <!---GLOWING TITLE---> <h3 style="font-size:50px;font-weight:normal;margin:0;color:#fff;-webkit-text-fill-color:#000;-webkit-text-stroke-color:#4E778A;-webkit-text-stroke-width:1.5px;text-shadow:0 0 2px #4E778A, 0 0 10px #4E778A;"> GLOWING </h3> <!---3D TITLE---> <h3 style="font-size:50px;font-weight:normal;margin:0;color:#4E778A;-webkit-text-fill-color:#000;-webkit-text-stroke-color:#4E778A;-webkit-text-stroke-width:1.5px;text-shadow:1px 1px 0 #4E778A, 2px 2px 0 #4E778A, 3px 3px 0 #4E778A;"> 3DIMENSIONAL </h3> <!---GRADIENT TITLE---> <h3 style="font-size:50px;font-weight:normal;margin:0;color:transparent;-webkit-background-clip:text;background-image:-webkit-linear-gradient(top, #fff 0%, rgba(255,255,255,0.2) 100%);background-image:linear-gradient(to bottom, #fff 0%, rgba(255,255,255,0.2) 100%);line-height:0.8;"> GRADIENT </h3> <!---AUTHOR---> <div style="letter-spacing:6px;"> AUTHOR </div> </div> <!---BACK COVER---> <div style="background:#222 url(BACK_COVER)center;background-size:cover;width:49.5%;height:100%;padding:20px;box-sizing:border-box;display:flex;justify-content:center;align-items:center;"> <div style="font-size:11px;line-height:2;letter-spacing:1.5px;display:flex;justify-content:center;flex-wrap:wrap;"> <!---SONG LIST---> <div style="text-align:justify;margin:0 20%;"> <!---BACK HEADER---> <center style="text-transform:uppercase;font-weight:bold;color:#4E778A;">HEADING</center> <!---SYNOPSIS---> BOOK_SUMMARY </div> </div> </div> </div><center style="font-family:arial;font-size:8px;letter-spacing:2px;line-height:3.5;"><a href="http://tessisamess.insanejournal.com/" style="color:#bbb;text-decoration:none;">CODE BY TESSISAMESS</a></center></lj-raw>

Installation Guide

Paste into an entry and fill in the following!

FRONT_COVER - Front cover background image
BACK_COVER - Back cover background image

A note: For the demo I used the same background method as outlined in my album cover mockup!

Editing Guide

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

DIMENSIONS

(Inner covers will resize automatically upon outer container resizing)
1020px - Overall width
800px - Overall height

FONTS

century gothic,helvetica,sans-serif - Overall font
font-size:50px; - Title font size
font-size:15px; - Front cover font size
font-size:11px; - Back cover font size

COLORS

#fff

Overall text

#4E778A

Accent color on some alt titles

#000

Secondary color on some alt titles

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!