Info Code: Urban Decay

[tesscodes]

Page Title This is a page subtitle line

Section Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare tristique commodo. Nulla posuere orci sit amet magna fermentum, et tempus justo molestie. Suspendisse potenti. Nam eu dolor non eros accumsan pretium in ut nunc. Duis non viverra orci. Nam volutpat lectus ac turpis maximus, at pretium elit scelerisque. Aliquam placerat elit sed ex ultrices pretium. Donec aliquam lacinia massa, pulvinar sollicitudin arcu lacinia non. Fusce fringilla hendrerit odio, vitae auctor massa. Fusce rutrum lectus id ex tristique, vel sollicitudin mauris efficitur.

Aenean rutrum, nisi ac facilisis pretium, lacus justo pellentesque velit, vel scelerisque odio ex vel augue. Aenean mattis lacinia dui semper rutrum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam luctus ut magna eget consectetur. Integer vel nunc vehicula neque mollis pulvinar nec pulvinar mauris. In cursus nibh augue, quis vestibulum ipsum blandit ut. Nullam justo eros, fringilla at justo sit amet, blandit fermentum dolor. Curabitur id nisl facilisis, pharetra massa non, vestibulum quam. Nulla facilisi. Nulla facilisi.

Section Nunc rhoncus diam nec luctus pellentesque. Nam sapien enim, consectetur ut arcu vitae, aliquam semper lectus. Nunc ullamcorper risus ac felis efficitur scelerisque. Integer fermentum eros auctor, elementum tortor a, luctus ante. Nullam malesuada ipsum sed dictum consectetur. Aenean blandit, lacus ut lobortis elementum, felis ex maximus odio, quis imperdiet ligula metus vitae leo. Donec mauris eros, aliquet a pulvinar nec, tempor ac nunc. Ut commodo efficitur scelerisque. Curabitur nec elementum tellus, nec mollis lorem.

Nullam blandit felis vitae vehicula dictum. Integer mattis sodales justo, ut imperdiet dolor imperdiet non. Nulla facilisi. Mauris pretium tortor nisi. Donec dapibus placerat velit eget faucibus. Cras nisi mi, pharetra blandit urna ac, tincidunt auctor magna. Proin finibus eu risus in placerat. Proin ultricies justo quis justo ultrices, vitae eleifend eros aliquet.

CODING

Information

Hey guys! We really liked one of the January layouts over on Patreon this month and thought, since the code rewards were for the other layout this month, it would be fun if I made some matching ones for Urban Decay to post up for free!

This info code is great for game info pages, scenes, single column bios—whatever you want, honestly. Enjoy! 💖

The Coding

<lj-raw><article style="width:600px;margin:0 auto;font-family:calibri,arial,sans-serif;font-size:13px;line-height:1;background:#131313;color:#eee;box-shadow:2px 2px 4px 0 rgba(0,0,0,0.3);"> <!--HEADER IMG--> <section style="height:300px;background:#222 url(https://i.imgur.com/yqQCAbc.png)center;background-size:cover;background-size:cover;mask:url(https://i.imgur.com/noVhrnA.png)center bottom no-repeat;mask-size:100% auto;"> </section> <!--HEADER INFO--> <section style="display:flex;align-items:center;justify-content:flex-end;padding:0 30px;margin:-35px 0 0 0;"> <!--TITLES--> <div style="text-transform:uppercase;text-align:right;"> <!--TITLE--> <span style="font-family:impact,arial black;font-size:31px;color:#FFD76A;display:block;">Page_Title</span> <!--SUBTITLE--> <span style="color:#fff;font-weight:bold;font-size:10px;letter-spacing:3px;">Subtitle_or_Delete</span> </div> <!--ICON--> <img src="ICON_URL" style="margin:0 0 0 20px;width:100px;height:100px;mask:url(https://i.imgur.com/hrjYiQG.png)center no-repeat;mask-size:100% 100%;background:#222;object-fit:cover;"> </section> <!--CONTENT--> <section style="padding:20px 30px 0 30px;line-height:1.5;"> <!--SECTION HEADER--> <span style="font-family:impact,arial black;text-transform:uppercase;color:#FFD76A;font-size:15px;letter-spacing:3px;">Section</span> Section_Info<br><br> <!--SECTION HEADER--> <span style="font-family:impact,arial black;text-transform:uppercase;color:#FFD76A;font-size:15px;letter-spacing:3px;">Section</span> Section_Info </section> <!--FOOTER--> <section style="height:90px;background:#222 url(https://i.imgur.com/p4ZcBkE.png)center;background-size:cover;background-size:cover;mask:url(https://i.imgur.com/kP0rJPc.png)center top no-repeat;mask-size:100% auto;box-sizing:border-box;padding:10% 30px 0 0;text-align:right;"> <a href="https://tessisamess.insanejournal.com/162110.html" style="color:#000;font-family:impact,arial black;text-decoration:none;font-size:14px;">CODING</a> </section> </article></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!

PLACEHOLDERS

ICON_URL - Header icon

DIMENSIONS

600px - Container width
300px - Header height
100px - Icon size
90px - Footer height

-35px - Header titles top positioning (you'll probably need to edit if resizing the header height)
20px 30px 0 30px - Content padding
30px - Header padding
10% 30px 0 0 - Footer padding

FONTS

calibri,arial,sans-serif - Body font; subtitle font
impact,arial black - Title and section headers font

font-size:13px; - Body text size
font-size:31px; - Title size
font-size:10px; - Subtitle size
font-size:15px; - Section headers size

IMAGES

https://i.imgur.com/yqQCAbc.png - Header image
https://i.imgur.com/p4ZcBkE.png - Footer image

COLORS

#fff

Subtitle line

#eee

Body text

#FFD76A

Accent color

#131313

Container background

rgba(0,0,0,0.3)

Box shadow

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!