10billionghosts | code: FEATURING

Sunday

link . link . link

Just rattling my head around at this point hoping a code eventually falls out lmao. Here's a simple directory/muse list code featuring space for multiple links. You could probably turn it into a CR list with some simple tweaks, too.

CODE HERE:

<lj-raw><div style="width:100%;max-width:800px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:start;align-content:start;gap:10px;font-family:verdana, arial, sans serif;font-size:20px;line-height:1;font-weight:bold;font-style:italic;color:#fff;">

<div style="box-sizing:border-box;width:225px;height:100px;display:grid;grid-template-columns:200px 25px;grid-template-rows:10px 5px 1fr 10px 5px">
	
		
		<div style="grid-column-start:1;grid-column-end:2;grid-row-start:2;grid-row-end:5;padding:5px 6px;transform:skew(-25deg);border-radius:10px;box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;background:#ccc">
			<div style="width:100%;height:100%;border-radius:5px;overflow:hidden;">
				<div style="width:225px;height:100px;margin-left:-15px;transform:skew(25deg);background:#eee url('IMG_URL')center;background-size:cover;"></div>
			</div>
		</div>
		
	
		
		<div style="grid-column-start:1;grid-column-end:3;grid-row-start:1;grid-row-end:3;transform:skew(0);letter-spacing:-.5px;text-shadow:0px 0px 1px #000, 2px 2px #7c7c7c;">

<a href="#URL_HERE" style="text-decoration:none;color:#fff">Header Text</a>

</div>
		
		
		
		<div style="grid-column-start:1;grid-column-end:3;grid-row-start:4;grid-row-end:6;padding-right:20px;transform:skew(0);font-size:14px;text-align:right;text-shadow:0px 0px 1px #000, 1px 1px #7c7c7c;">
		
			<a href="#URL_HERE" style="text-decoration:none;color:#fff">link</a> .
			<a href="#URL_HERE" style="text-decoration:none;color:#fff">link</a> .
			<a href="#URL_HERE" style="text-decoration:none;color:#fff">link</a>
		
		</div>
		
	</div>
	
	
	
	
	<div style="width:100%;text-align:center;font-size:10px;"><a title="code credit!" href="http://10billionghosts.dreamwidth.org" style="text-decoration:none;color:#ddd;">code</a></div>
	
</div></lj-raw>

HOW TO USE:

❣️ This code is mobile compatible! I have not tested this code on InsaneJournal.

❣️ FEATURING is built into a flex grid, so you can copy paste additional tiles in where indicated by the code comments! By default, it comes with one tile.

❣️ You've got one instance of IMG_URL to update here. Be sure to replace that with an appropriate picture URL!

❣️ Be sure to update #URL_HERE with the URL for what you want to link to!

❣️ You can add additional links by copy-pasting the link code. Four to five links should fit on one line, depending on the length of the anchor text you use. You can add more links! They'll just spill over into a new line.

❣️ Make sure to update your placeholder text, as well. (Header Text and link, in this case.)

❣️ ALL TEXT IS TOTALLY OPTIONAL. You can delete either the header or the footer links by simply removing their sections from the code. Both are clearly commented out for easy removal.

❣️ If you don't want links to be links but still want the text, the easiest way to make this change is by simply deleting any instance of href="#URL_HERE" where you don't want the text to link.

❣️ The default coloring for this code is all grays, because the image you use will MAJORLY impact what will look good for the border. I encourage you to customize the colors on this! Because the default grays look nice enough with anything, but you can probably improve by customizing to each image.

❣️ COLORS:

hex code #ccc is a base gray and it is used to declare border color. Find it in the image section of the code, appearing as background:#ccc, rather than border, because I did some fuckery to achieve the look I wanted with this code lmao.

hex code #000 is black, and is the outline for the text. IMO you don't need to change this as this is here for visibility reasons on light backgrounds.

hex code #fff is white, declared at the top of the code and in every link, for the base font color. If you want to change this color, just use find-replace to do it to easily get every instance.

hex code #7c7c7c is a dark gray and is the offset text shadow color. I definitely suggest changing this to better fit with the image you choose to use. Red often looks nice!

❣️ This code comes with a credit by default. Appreciate it if you leave it in!

❣️ I love peeking at what people do with my codes, so feel free to comment if you use! If you're feeling generous, you can also donate to my ko-fi -- it's always greatly appreciated!

Header Text

link . link . link

code