Tessisamess

Information

Hey guys! I don't have too many location codes (a decent amount, but we could definitely have more!), so I thought this would be a fun one to do this month! This code comes with two options: A single location with written information under the information card, or a grid of slightly smaller location cards without written location info. This could also easily be used as a log header though; that would be extra cute! Enjoy! ♥

Coding: Single block with information

<lj-raw><div style="width:600px;margin:0 auto;background:#fff;border:1px solid #ddd;padding:20px;font-family:tahoma,arial,sans-serif;font-size:14px;line-height:1.6;text-align:justify;"> <!---HEADER & COVER PHOTO--> <div style="background:#ddd url(COVER_BG)center;background-size:cover;margin:0 0 20px 0;font-size:8px;letter-spacing:2px;text-transform:uppercase;color:#fff;text-shadow:1px 1px 0 rgba(0,0,0,0.5);"> <!---HEADER POSITIONING & BACKGROUND DARKENING--> <div style="height:350px;box-sizing:border-box;display:flex;align-items:flex-end;justify-content:space-between;padding:15px;background:rgba(0,0,0,0.5);"> <!---TITLE---> <h5 style="font-size:20px;margin:0;line-height:1;"> LOCATION_NAME <div style="font-weight:normal;text-transform:none;font-size:10px;font-style:italic;display:flex;align-items:center;margin:4px 0 0 0;"> <img src="https://i.imgur.com/Y4duKcD.png" style="margin:0 3px 0 0;"> ADDRESS/SUBTITLE </div> </h5> <!---STAFF LIST---> <div> <!---EMPLOYEE---> <div style="background:rgba(255,255,255,0.1);width:150px;display:flex;align-items:center;margin:7px 0 0 0;"> <img src="ICON" style="height:37px;margin:0 7px 0 0;border-radius:0 40px 40px 0;"> <span> <b>NAME</b><br> ROLE </span> </div> <!---EMPLOYEE---> <div style="background:rgba(255,255,255,0.1);width:150px;display:flex;align-items:center;margin:7px 0 0 0;"> <img src="ICON" style="height:37px;margin:0 7px 0 0;border-radius:0 40px 40px 0;"> <span> <b>NAME</b><br> ROLE </span> </div> <!---EMPLOYEE---> <div style="background:rgba(255,255,255,0.1);width:150px;display:flex;align-items:center;margin:7px 0 0 0;"> <img src="ICON" style="height:37px;margin:0 7px 0 0;border-radius:0 40px 40px 0;"> <span> <b>NAME</b><br> ROLE </span> </div> </div> </div> </div> <!---LOCATION INFO FREE TEXT---> LOCATION_INFO </div></lj-raw>

Coding: Multiple blocks; title cards only

<lj-raw><div style="display:flex;flex-wrap:wrap;justify-content:center;font-family:tahoma,arial,sans-serif;line-height:1.6;font-size:8px;letter-spacing:2px;text-transform:uppercase;color:#fff;text-shadow:1px 1px 0 rgba(0,0,0,0.5);"> <!---LOCATION BLOCK--> <div style="background:#ddd url(COVER_BG)center;background-size:cover;width:520px;border:20px solid #fff;box-shadow:0 0 0 1px #ddd;margin:10px;"> <div style="height:300px;box-sizing:border-box;display:flex;align-items:flex-end;justify-content:space-between;padding:15px;background:rgba(0,0,0,0.5);"> <!---TITLE---> <h5 style="font-size:18px;margin:0;line-height:1;"> LOCATION_NAME <div style="font-weight:normal;text-transform:none;font-size:10px;font-style:italic;display:flex;align-items:center;margin:4px 0 0 0;"> <img src="https://i.imgur.com/Y4duKcD.png" style="margin:0 3px 0 0;"> ADDRESS/SUBTITLE </div> </h5> <!---STAFF LIST---> <div> <!---EMPLOYEE---> <div style="background:rgba(255,255,255,0.1);width:150px;display:flex;align-items:center;margin:7px 0 0 0;"> <img src="ICON" style="height:33px;margin:0 7px 0 0;border-radius:0 40px 40px 0;"> <span> <b>NAME</b><br> ROLE </span> </div> <!---EMPLOYEE---> <div style="background:rgba(255,255,255,0.1);width:150px;display:flex;align-items:center;margin:7px 0 0 0;"> <img src="ICON" style="height:33px;margin:0 7px 0 0;border-radius:0 40px 40px 0;"> <span> <b>NAME</b><br> ROLE </span> </div> <!---EMPLOYEE---> <div style="background:rgba(255,255,255,0.1);width:150px;display:flex;align-items:center;margin:7px 0 0 0;"> <img src="ICON" style="height:33px;margin:0 7px 0 0;border-radius:0 40px 40px 0;"> <span> <b>NAME</b><br> ROLE </span> </div> </div> </div> </div> </div></lj-raw>

Installation Guide

Paste into an entry and fill in the following!

COVER_BG - Location background (this has a darkening overlay so that your text is readable)
LOCATION_NAME - Title
ADDRESS/SUBTITLE - Subtitle
ICON - Employee picture
NAME - Employee name
ROLE - Employee position

Linked Directory

Want to use the multiple version as a link directory to individuals of each one with written info? No worries, I got your back!

In <!---LOCATION BLOCK--> of the Multiple blocks; title cards only code, change the holding divs to link tags instead, as specified here and then add an href="URL" before the style tag. Boom, a link!

Additionally, you'll want to add text-decoration:none;color:#fff; to that div's (now link's) style tag.

Editing Guide

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

FONTS

tahoma,arial,sans-serif - Overall font

IMAGES

https://i.imgur.com/Y4duKcD.png - Location pin

COLORS

rgba(255,255,255,0.1)

Each employee background

#fff

Container background

#ddd

Border

#000

Photo overlay and text 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!