Tessisamess

Information

Hey guys! I was going to post this next week but I GOT REALLY EXCITED SO OOPS THERE'S A DOUBLE POST TODAY LOL. This is, obviously, a faux magazine cover, which was requested over on rpresources and I just couldn't resist. If you want another set of magazine covers with a different orientation definitely let me know! Laying them out is a lot of fun. Enjoy! ♥

Stay tuned for a movie poster mockup too! 👀

CODE BY TESSISAMESS

Coding: Vertical

<lj-raw><div style="width:800px;height:1000px;box-sizing:border-box;padding:40px;margin:0 auto;background:#222 url(COVER_IMG)center;background-size:cover;display:flex;align-items:flex-end;justify-content:space-between;font-family:century gothic,arial;font-size:12px;color:#fff;line-height:1.5;"> <!---SIDE INFO---> <div style="width:150px;text-transform:uppercase;"> <!---ISSUE---> <div style="height:40px;letter-spacing:2px;opacity:0.6;"> <b>MONTH</b> 2019 </div> <!---PUBLICATION---> <h3 style="height:calc(100% - 40px);margin:0;font-weight:normal;font-size:90px;color:#9A0000;line-height:1;text-align:center;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;display:flex;justify-content:space-between;"> <span>T</span> <span>I</span> <span>T</span> <span>L</span> <span>E</span> <span style="color:#fff;">HERE</span> </h3> </div> <!---=ARTICLES---> <div style="width:calc(100% - 150px - 120px);text-align:right;font-size:16px;"> <!---MAIN ARTICLE---> <h4 style="margin:0;font-size:45px;color:#A10F0F;text-transform:uppercase;line-height:1;"> <div style="font-size:55px;color:#fff;">MAIN</div> ARTICLE </h4> MAIN_ARTICLE_INFO <!---OTHER ARTICLE---> <div style="margin:20px 0 0 0;"> <h5 style="margin:0;font-size:30px;color:#A10F0F;text-transform:uppercase;">Article_1</h5> ARTICLE_INFO </div> <!---OTHER ARTICLE---> <div style="margin:20px 0 0 0;"> <h5 style="margin:0;font-size:30px;color:#A10F0F;text-transform:uppercase;">Article_2</h5> ARTICLE_INFO </div> <!---PLUS ARTICLES---> <div style="margin:20px 0 0 0;"> <h5 style="margin:0;font-size:30px;background:#9A0000;text-transform:uppercase;display:inline;padding:2px 15px;clip-path: polygon(8% 0, 100% 0%, 92% 100%, 0% 100%);">Plus!</h5><br> EXTRAS_INFO </div> </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 BY TESSISAMESS</a></center></lj-raw>

CODE BY TESSISAMESS

Coding: Horizontal

<lj-raw><div style="width:800px;height:1000px;box-sizing:border-box;padding:40px;margin:0 auto;background:#222 url(COVER_IMG)center top;background-size:cover;display:flex;flex-direction:column;justify-content:space-between;font-family:century gothic,arial;font-size:12px;color:#fff;line-height:1.5;"> <!---side INFO---> <div style="text-transform:uppercase;display:flex;align-items:center;"> <!---ISSUE---> <div style="letter-spacing:2px;opacity:0.6;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;margin:0 20px 0 0;"> <b>MONTH</b> 2019 </div> <!---PUBLICATION---> <h3 style="margin:0;font-weight:normal;font-size:85px;color:#9A0000;line-height:1;"> TITLE <span style="color:#fff;">HERE</span> </h3> </div> <!---ARTICLES---> <div style="text-align:right;font-size:16px;padding:0 0 0 30%;"> <!---MAIN ARTICLE---> <h4 style="margin:0;font-size:45px;color:#A10F0F;text-transform:uppercase;line-height:1;"> <div style="font-size:55px;color:#fff;">MAIN</div> ARTICLE </h4> MAIN_ARTICLE_INFO <!---OTHER ARTICLE---> <div style="margin:20px 0 0 0;"> <h5 style="margin:0;font-size:30px;color:#A10F0F;text-transform:uppercase;">ARTICLE_1</h5> ARTICLE_INFO </div> <!---OTHER ARTICLE---> <div style="margin:20px 0 0 0;"> <h5 style="margin:0;font-size:30px;color:#A10F0F;text-transform:uppercase;">ARTICLE_2</h5> ARTICLE_INFO </div> <!---PLUS ARTICLES---> <div style="margin:20px 0 0 0;"> <h5 style="margin:0;font-size:30px;background:#9A0000;text-transform:uppercase;display:inline;padding:2px 15px;clip-path: polygon(8% 0, 100% 0%, 92% 100%, 0% 100%);">Plus!</h5><br> EXTRAS_INFO </div> </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 BY TESSISAMESS</a></center></lj-raw>

Installation Guide

Paste into an entry and fill in the following!

COVER_IMG - Background image
MONTH and 2019 - Publication date
For the publication title: Use the span wrap around each letter to space your word out evenly along the side of the cover, and a single span to push part of the title together. You can also choose not to use any span tags for a typically aligned title. This is for Vertical only.

MAIN and ARTICLE - Hero article title; adjust font sizes as needed
MAIN_ARTICLE_INFO - Hero article blurb
ARTICLE_1 and ARTICLE_2 - Secondary article titles
ARTICLE_INFO - Secondary article blurb
PLUS! - Other articles title
EXTRAS_INFO - Other articles blurb

Editing Guide

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

DIMENSIONS

800px - Cover width
1000px - Cover height
150px - Sidebar width (vertical only; you probably won't need to change this)
40px - Month date (vertical only)

FONT SIZING

12px - Magazine date font size
45px and 55px - Main article title size (these will likely need adjusting for your unique text)
30px - Article title size
16px - Article blurb text size

VERTICAL FONT SIZING

90px - Magazine title font size (this will likely need adjusting for your unique text)

HORIZONTAL FONT SIZING

85px - Magazine title font size (this will likely need adjusting for your unique text)

FONTS

century gothic,arial - Overall font (If you're using sanity I HIGHLY suggest removing the fonts and letting the extension take the wheel because it looks super pretty!)

COLORS

#fff

Overall font

#A10F0F

Article titles

#9A0000

Publication title & "Plus!" background

#000

weee

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!