Going through my unreleased stuff and I found this, MARSHMALLOWED. It might look a little familiar -- I originally made this code back in 2022, then eventually released a variant of it, UNMALLOWED. In the years since, the unfinished MALLOW code set eventually became the SALAD code set, and this particular code wound up sitting in my locked posts, forgotten.

BUT, I just saw it this morning and I still like how much it looks both in browser and mobile. So, here it is! Scroll down to the bottom of this post to see a live preview. You can pick up the code itself just below, and be sure to read the how to use section.

Everything in this code should be interchangeable with the stuff in UNMALLOWED (linked above). Enjoy!

CODE HERE:

<lj-raw><div style="max-width:800px;width:100%;margin:0 auto;padding:3%;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;line-height:1.5;border-radius:5px;border:1px solid #006c80;box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;background:#00859c url('BGIMG_URL');">

<div style="width:100%;min-height:25px;display:grid;grid-template-columns:1fr 1fr; grid-template-rows:1fr;gap:0;">

<div style="grid-column-start:1;grid-column-end:2;grid-row-start:1;grid-row-end:2;display:flex;flex-wrap:no-wrap;justify-content:start;align-items:end;align-content:end;font-size: clamp(20px, 3vw, 35px);line-height:.8;font-weight:bold;color:#006c80;">CHARACTER NAME</div>

<div style="width:100%;min-height:200px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;align-content:center;gap:15px;background:transparent;">

<div style="flex:1 0 59%;padding:10px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;align-content:center;gap:10px;background:#006c80;">

<div style="flex:1 0 50%;padding-top:47%;background:#ccc url('IMG_URL')center;background-size:cover;"></div>

<div style="flex:1 0 45%;min-width:200px;display:flex;flex-wrap:wrap;justify-content:center;align-items:space-center;align-content:space-between;gap:12px;line-height:.8;">

<fieldset style="width:100%;margin:0;padding:0 7px 6px;text-align:right;border:0;background:#fff;"><legend style="margin:0;padding:3px 4px;font-size:10px;font-weight:bold;background:#03c9c6;color:#fff">pronouns</legend>

answer

</fieldset>

mm dd</fieldset>

answer

</fieldset>

answer

</fieldset>

answer

</fieldset>

</div>

</div>

<div style="flex:.75 2 27%;min-width:217px;padding:10px 0;text-align:justify;background:#fff;">

<div style="width:100%;text-align:center;font-size:11px;">!!Space here for a concept line or very brief quote. Seriously, you only have like four -- <i>maybe</i> five -- lines max before this breaks the layout, so keep it short.!!</div>
			</div>
		</div>

</div>

<div style="width:100%;display:flex;flex-wrap:wrap;justify-content:center;align-items:start;align-content:center;gap:15px;background:transparent;">

<div style="flex:1 0 30%;min-width:217px;border:1px solid #006c80;"><h1 style="width:100%;margin:0;padding:2px 0;font-size:24px;text-align:center;font-variant:small-caps;background:#006c80;color:#fff;">positive</h1>

</div>
			</div>

<div style="flex:1 0 30%;min-width:217px;border:1px solid #006c80;"><h1 style="width:100%;margin:0;padding:2px 0;font-size:24px;text-align:center;font-variant:small-caps;background:#006c80;color:#fff;">neutral</h1>

</div>
			</div>

<div style="flex:1 0 30%;min-width:217px;border:1px solid #006c80;"><h1 style="width:100%;margin:0;padding:2px 0;font-size:24px;text-align:center;font-variant:small-caps;background:#006c80;color:#fff;">negative</h1>

</div>
			</div>
		
		</div>

<div style="width:100%;padding:15px;display:flex;flex-wrap:wrap;flex-direction:row-reverse;justify-content:center;align-items:center;align-content:center;gap:15px;background:#006c80;">

<div style="flex:2 1 50%;min-height:260px;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:5px;">

</div>

<div style="flex:1 0 45%;min-width:217px;height:260px;overflow:auto;scrollbar-width: thin;scrollbar-color:#fff #006c80;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;align-content:space-between;gap:10px;">

<div style="width:100%;text-align:justify;color:#fff;">
				
					</lj-raw>!!short description!!<lj-raw>
				
				</div>

<div style="width:100%;align-self:end;display:flex;flex-wrap:wrap;justify-content:space-around;align-items:end;align-content:end;gap:10px;">

<fieldset style="width:40%;margin:0;padding:0 7px 6px;text-align:center;border:0;background:#fff;"><legend style="margin:0 auto 2px;padding:3px 4px;font-size:10px;font-weight:bold;background:#03c9c6;color:#fff">height</legend>
					
						answer
					
					</fieldset>

<fieldset style="width:40%;margin:0;padding:0 7px 6px;text-align:center;border:0;background:#fff;"><legend style="margin:0 auto 2px;padding:3px 4px;font-size:10px;font-weight:bold;background:#03c9c6;color:#fff">build</legend>
					
						answer
						
					</fieldset>

<fieldset style="width:40%;margin:0;padding:0 7px 6px;text-align:center;border:0;background:#fff;"><legend style="margin:0 auto 2px;padding:3px 4px;font-size:10px;font-weight:bold;background:#03c9c6;color:#fff">hair</legend>
					
						answer
						
					</fieldset>

<fieldset style="width:40%;margin:0;padding:0 7px 6px;text-align:center;border:0;background:#fff;"><legend style="margin:0 auto 2px;padding:3px 4px;font-size:10px;font-weight:bold;background:#03c9c6;color:#fff">eyes</legend>
					
						answer
						
					</fieldset>
				</div>

</div>

</div>

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

<div style="padding:0 4px 2px;margin:0 15px 1px 0;float:left;font-size:35px;font-weight:bold;font-style:italic;background:#cdfefd">background;</div>

</lj-raw>!!background/history section here!!<lj-raw>

</div>

<div style="width:100%;display:flex;flex-wrap:wrap;justify-content:center;align-items:start;align-content:center;gap:15px;background:transparent;">

<fieldset style="width:100%;margin:0;padding:0;border:0;background:#cdfefd;"><legend style="width:100%;margin:0;padding:0;font-size:11px;line-height:2;font-weight:bold;text-indent:1%;background:#03c9c6;color:#fff">!!header text!!</legend>
				<div style="max-width:650px;width:94%;margin:1% auto;">

</lj-raw>!!description here!!<lj-raw>

</div>
			</fieldset>

<fieldset style="width:100%;margin:0;padding:0;border:0;background:#cdfefd;"><legend style="width:100%;margin:0;padding:0;font-size:11px;line-height:2;font-weight:bold;text-indent:1%;background:#03c9c6;color:#fff">!!header text!!</legend>
				<div style="max-width:650px;width:94%;margin:1% auto;">

</lj-raw>!!description here!!<lj-raw>

</div>
			</fieldset>

<fieldset style="width:100%;margin:0;padding:0;border:0;background:#cdfefd;"><legend style="width:100%;margin:0;padding:0;font-size:11px;line-height:2;font-weight:bold;text-indent:1%;background:#03c9c6;color:#fff">!!header text!!</legend>
				<div style="max-width:650px;width:94%;margin:1% auto;">

</lj-raw>!!description here!!<lj-raw>

</div>
			</fieldset>

</div>

<div style="width:100%;padding:0;display:flex;justify-content:center;align-items:end;font-size:13px;line-height:1;text-align:center;gap:15px;background:transparent;">

player name . pb name . timezone . contact info

</div>

</div>
</div>

<div style="max-width:800px;width:100%;margin:0 auto;text-align:right;font-size:10px;color:#ddd"><a title="code credit!" href="http://10billionghosts.dreamwidth.org" style="text-decoration:none;color:#ddd;">code</a></div>
</lj-raw>

HOW TO USE:

❣️ Mind those lj-raw tags!!

❣️ This code is mobile compatible and insanejournal friendly!

❣️ While this app scales well at any resolution, because of its length, it's best posted under an lj-cut.

❣️ All sections in this app are modular and removable. Here are some ideas for things you could do with that:

WANTED LINES POST FOR A NEW CHARACTER: Pare down the template by removing the background and personality sections and the fieldset items from the appearance section.

LOCATIONS PAGE: Stack the appearance section multiple times for different locations. You can also change the flex-direction of the appearance section to swap which comes first, text or moodboard.

INFORMATION/PREMISE PAGE: Use JUST the background section for large blocks of text. You can also include the HEADER section to split multiple background sections.

OOC INFO: Use JUST the Basic Info section for an OOC info card for yourself!

❣️ As uzh, be sure to update any instances of IMG_URL or #URL_HERE! At the top of the post, you can also change BGIMG_URL to the url for a seamless tiling background image to zhuzh things up a little. Transparent Textures has some very nice ones!

❣️ The code can get a little dense in places. Be sure to check for !!text between exclamation points!! for items that you'll want to update.

❣️ You can add ONE (1) more basic info item to the BASIC INFO section without breaking the code. Adding more will break the code. You can remove as many as you'd like without breaking the code.

❣️ hex code #006c80 is the primary color (dark teal by default), used for most backgrounds and text. It's declared several times in the code, so you'll want to find-replace it to update it.

❣️ hex code #03c9c6 is the secondary color (teal by default), used in labeling. This color is also declared several times throughout the code, so, again, find-replace for it.

❣️ hex code #cdfefd is your tertiary color (light blue by default), used for backgrounds. You guessed it, find-replace for an easy time.

❣️ hex code #fff is white, and it used only as a background for fieldset items. For readability, I would recommend keeping this as-is.

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

CHARACTER NAME

pronouns she/her/hers

dob March 15 / Pisces

myth Amphitrite

occupation student (arguably)

hometown Virginia Beach, VA

STR

DEX

CON

INT

WIS

CHA

Space here for a concept line or very brief quote. Seriously, you only have like four -- maybe five -- lines max before this breaks the layout, so keep it short.

positive

easy-going, friendly, ride-or-die

neutral

low key, fashion conscious, good listener

negative

listless, unambitious, impatient, inconsiderate

Topping carrot cake jelly-o pudding bonbon. Jelly-o chocolate cake lollipop biscuit bonbon tart. Liquorice cupcake tootsie roll marshmallow topping gummi bears.

Tiramisu tart liquorice soufflé donut lemon drops chocolate. Lollipop lemon drops wafer tootsie roll macaroon carrot cake.

heightanswer

buildanswer

hairanswer

eyesanswer

background;

Jelly pie croissant ice cream halvah gummi bears bonbon. Bear claw jelly beans candy oat cake chocolate cake candy. Pastry shortbread soufflé topping chupa chups bear claw jelly pudding soufflé. Marshmallow muffin candy canes sugar plum tiramisu ice cream liquorice apple pie. Halvah gummi bears jelly marshmallow sweet icing muffin. Brownie sesame snaps croissant apple pie ice cream chocolate halvah cheesecake. Halvah marshmallow biscuit tootsie roll lemon drops tart dragée. Dragée gingerbread wafer jujubes halvah sweet tiramisu.

Icing brownie chocolate cake cookie sugar plum shortbread cookie wafer. Dragée danish cookie bear claw sweet candy ice cream. Tart chocolate bar soufflé cotton candy carrot cake. Macaroon lollipop cheesecake toffee tart. Muffin oat cake soufflé donut soufflé. Chocolate lemon drops lollipop pastry jujubes lemon drops chocolate lemon drops.

ability #1: blah blah blah

Toffee biscuit lemon drops sweet halvah. Cupcake croissant marzipan soufflé wafer powder. Icing caramels croissant pudding muffin candy canes. Donut cake topping liquorice cupcake sesame snaps pudding gummies tootsie roll.

Chocolate cake chocolate cake chupa chups cake dessert icing sesame snaps ice cream powder.

ability #2: blah blah blah

ability #3: blah blah blah

player name . pb name . timezone . contact info

code

code: MARSHMALLOW - a (variant) mobile friendly biosheet

positive

neutral

negative