10billionghosts | code: FOR MEME - a minimalist, mobile compatible meme and event code (Reply)

Continuing my quest to make more basic mobile friendly codes, here is a very simple (and hopefully easy to use!) meme/event code that emphasizes readability on screens of various sizes and regardless of if you are in dark or light mode.

The PROMPTS section comes in two flavors - a list style and a single word table style. You can check the very bottom of this post for live previews of both styles.

LIST PROMPT CODE HERE:

<lj-raw><div style="max-width:500px;width:100%;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:start;align-content:start;gap:15px;font-family:verdana, sans serif;font-size:13px;line-height:1.6;">

<div style="width:100%;min-height:255px;display:grid;grid-template-columns:1fr;grid-template-rows:235px 15px 1fr;">
	
		
		<div style="grid-column-start:1;grid-column-end:2;grid-row-start:1;grid-row-end:3;background:#ccc url('IMG_URL')center;background-size:cover;"></div>
		
		
		<div style="grid-column-start:1;grid-column-end:2;grid-row-start:2;grid-row-end:4;padding:0 3%;font-size:25px;line-height:1.1;font-weight:bold;text-align:center;text-shadow: 1px 1px 0 #8e8e8e, 1px -1px 0 #8e8e8e, -1px 1px 0 #8e8e8e, -1px -1px 0 #8e8e8e, 1px 0px 0 #8e8e8e, 0px 1px 0 #8e8e8e, -1px 0px 0 #8e8e8e, 0px -1px 0 #8e8e8e, 1px 1px 1px rgba(151,152,157,0), -2px -2px 2px rgba(255,255,255,.1), 2px 2px 2px rgba(0,0,0,.5);color:#f9f9f9">
		
		!! MEME OR EVENT TITLE HERE !!
		
		</div>
	
	</div>
	
	
	
	<div style="width:100%;text-align:justify;">
	
		
		</lj-raw>!! introductory description here !!<lj-raw>
	
	</div>
	
	
	
	<center><lj-cut text="read more."></center>
	
	
	
	
	<div style="width:100%;margin-bottom:-5px;display:grid;grid-template-columns:1fr;grid-template-rows:1fr;align-content:center;align-items:center;justify-content:center;">

</div>
		
		
		
		<div style="display:flex;justify-content:center;align-items:start;">➤</div>
		<div style="">
		
			</lj-raw>!! line item here !!<lj-raw>

</div>

</div>

<div style="width:100%;text-align:justify;">

</lj-raw>!! in case you need some additional text or just want to type out your how-to/rules normally without the fake ordered list, you can use this section here. if you don't need this, just delete the whole code section between the comment labels. !!<lj-raw>

</div>
	
	
	
	
	
	
	<div style="width:100%;margin-bottom:-5px;display:grid;grid-template-columns:1fr;grid-template-rows:1fr;align-content:center;align-items:center;justify-content:center;">

<div style="">
		<b>PROMPT NAME</b><br/>
		
		</lj-raw>!! description here !!<lj-raw>
		</div>
		
		
		
		<div style="display:flex;justify-content:center;align-items:start;">02</div>

<div style="">
		<b>PROMPT NAME</b><br/>
		
		</lj-raw>!! description here !!<lj-raw>
		</div>

<div style="display:flex;justify-content:center;align-items:start;">03</div>

<div style="">
		<b>PROMPT NAME</b><br/>
		
		</lj-raw>!! description here !!<lj-raw>
		</div>

</div>
	
	
	
	<div style="width:100%;display:grid;grid-template-columns:1fr auto;grid-template-rows:5px;gap:10px;align-items:center;justify-content:center;align-content:center;">
	
		<div style="height:3px;background:rgb(200,200,200,.5);"></div>
		<div style="font-size:13px;line-height:1;"><a title="code credit!" href="http://10billionghosts.dreamwidth.org" style="text-decoration:none;color:rgb(200,200,200,.5);">♥</a></div>
	
	</div>

</div></lj-raw>

TABLE PROMPT CODE HERE:

</div>
		
		
		
		<div style="display:flex;justify-content:center;align-items:start;">➤</div>
		<div style="">
		
			</lj-raw>!! line item here !!<lj-raw>

</div>

</div>

<div style="width:100%;text-align:justify;">

<div style="grid-column-start:1;grid-column-end:2;grid-row-start:1;grid-row-end:2;height:4px;background:rgb(200,200,200,.5);"></div>	
		<div style="grid-column-start:1;grid-column-end:2;grid-row-start:1;grid-row-end:2;font-size:28px;line-height:1;font-weight:bold;text-align:left;text-shadow: 1px 1px 0 #8e8e8e, 1px -1px 0 #8e8e8e, -1px 1px 0 #8e8e8e, -1px -1px 0 #8e8e8e, 1px 0px 0 #8e8e8e, 0px 1px 0 #8e8e8e, -1px 0px 0 #8e8e8e, 0px -1px 0 #8e8e8e, 1px 1px 1px rgba(151,152,157,0);color:#f9f9f9;">
		
		PROMPTS
		
		</div>
	</div>
	
	
	
	<div style="width:100%;text-align:justify;display:grid;grid-template-columns:auto auto auto;grid-template-rows:auto;gap:10px 5px;">
	
	
	<div style="padding:2px 5px;text-align:center;background:#aaa;color:#fff">01. WORD</div>
	<div style="padding:2px 5px;text-align:center;background:#aaa;color:#fff">02. WORD</div>
	<div style="padding:2px 5px;text-align:center;background:#aaa;color:#fff">03. WORD</div>
	<div style="padding:2px 5px;text-align:center;background:#aaa;color:#fff">04. WORD</div>
	<div style="padding:2px 5px;text-align:center;background:#aaa;color:#fff">05. WORD</div>
	<div style="padding:2px 5px;text-align:center;background:#aaa;color:#fff">06. WORD</div>
	<div style="padding:2px 5px;text-align:center;background:#aaa;color:#fff">07. WORD</div>
	<div style="padding:2px 5px;text-align:center;background:#aaa;color:#fff">09. WORD</div>
	<div style="padding:2px 5px;text-align:center;background:#aaa;color:#fff">10. WORD</div>
	<div style="padding:2px 5px;text-align:center;background:#aaa;color:#fff">11. WORD</div>
	<div style="padding:2px 5px;text-align:center;background:#aaa;color:#fff">12. WORD</div>
	<div style="padding:2px 5px;text-align:center;background:#aaa;color:#fff">13. WORD</div>
	
	
	</div>
	
	
	
	<div style="width:100%;display:grid;grid-template-columns:1fr auto;grid-template-rows:5px;gap:10px;align-items:center;justify-content:center;align-content:center;">
	
		<div style="height:3px;background:rgb(200,200,200,.5);"></div>
		<div style="font-size:13px;line-height:1;"><a title="code credit!" href="http://10billionghosts.dreamwidth.org" style="text-decoration:none;color:rgb(200,200,200,.5);">♥</a></div>
	
	</div>

</div></lj-raw>

HOW TO USE:

❣️ This code is mobile compatible!

❣️ Mind the LJ-raw tags.

❣️ All sections are fully optional and can be removed or moved around in the code as you'd like.

❣️ If you're posting the sort of meme that has a form, you should be able to add in one of my custom text area codes wherever needed.

❣️ This code does come with an LJ-CUT baked in. By default, it comes right after the intro text section, but you can move it around or remove it entirely. I would suggest only removing it if you are NOT using a prompt section.

❣️ Replace IMG_URL with the URL for an image you'd like to use for the header! The header image is 500px x 200px at its largest size, and will scale down in width to accommodate smaller screens.

❣️ Look for instances of !! in the code, these are placeholder text that you'll want to update.

❣️ The "how to" section is NOT an unordered list code. It achieves a similar effect just using divs. So, you can customize the pip with whatever you want - emojis, numbers, letters, text symbols.

❣️ The pips align to the top of a given line item by default. You can force them to align to the middle of a line item by changing align-content:start to align-content:center on JUST each individual pip line of code.

❣️ This code comes with a few "fake" list codes. You can add additional list items to each one by copying the [ITEM] or [PROMPT] code and pasting additional lines where indicated.

❣️ For the table prompt list, just copy-paste the single line div to add additional items. Don't forget to update the number on each one!

❣️ There's not a whoooole lot to change here color-wise, but:

hex code #8e8e8e controls the outline color on header text. If you'd like to change this, I suggest using find-replace.

hex code #aaa controls the background color of prompts on the table prompt version of the code. I'd also suggest using find-replace to update that.

❣️ 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!

THERE'S A HORSE IN THE HOSPITAL

Strange things are afoot at the ~~Circle K~~ hospital. A random prompt meme to get people talking, or running, or at least wondering...

HOW TO PLAY

➤

The object of the game is to create a thread based on a madlibbed prompt: "There's a(n) [thing] in/on (the/my/etc.) [place]."

➤

Roll on each table once to get your X and Y values.

➤

Post a top level with your character info, wants, and a starter if you're feeling spicy.

➤

Solve or cause problems using your generated prompt!

PROMPTS

PROMPT TABLE 1

01. HORSE

02. KAIJU

03. POLTERGEIST

04. DOPPELGANGER

05. HOLE

06. FIRE

07. WEREWOLF

07. DRAGON

09. AXE MURDERER

10. PORTAL

11. WIZARD

12. UFO

13. COYOTE

14. OBVIOUSLY EVIL ROCK

15. RIP IN TIME

PROMPT TABLE 2

01. HOSPITAL

02. CHOIR

03. COFFEE SHOP AU

04. CAR

05. ICE CREAM TRUCK

06. GARDEN

07. PARTY

08. LINE

09. ELEVATOR

10. BACKROOMS

11. WAFFLE HOUSE

12. SUBWAY

13. CAMPSITE

14. FARMER'S MARKET

15. AIRPORT

♥

A SIMPLE MEME & EVENT CODE

Gummi bears pastry sesame snaps chocolate shortbread toffee marshmallow oat cake cotton candy. Chupa chups marzipan ice cream ice cream halvah sesame snaps pudding croissant. Marshmallow apple pie wafer dragée marzipan.

HOW TO PLAY

🌝

Chocolate cake dessert halvah bear claw liquorice.

🌝

Tootsie roll icing cake tiramisu jujubes ice cream chocolate. Sweet roll powder danish dragée powder tootsie roll.

🌝

Pie pudding chupa chups gummies ice cream.

!! in case you need some additional text or just want to type out your how-to/rules normally without the fake ordered list, you can use this section here. if you don't need this, just delete the whole code section between the comment labels. !!

PROMPTS

PROMPT NAME
Topping shortbread lemon drops jelly beans sugar plum croissant. Dessert fruitcake sugar plum oat cake soufflé chupa chups.

PROMPT NAME
Sugar plum sugar plum bonbon halvah ice cream toffee. Marzipan bear claw topping dessert liquorice powder topping soufflé. Bear claw chocolate bar pastry gummi bears pie chupa chups gummi bears bear claw.

PROMPT NAME
Marshmallow apple pie wafer dragée marzipan.

♥

code: FOR MEME - a minimalist, mobile compatible meme and event code

Post a comment in response: