COME CLEAN, COME EASY.

04 January 2025 @ 09:41 pm

live code + 1 variant under the cut! (updated 18.04.2025)

( surrounded by losers, misfits, and boozers. )

TABLE VERSION 1

<center><raw-code><table width="660" style="font: 0.90em Georgia, serif; line-height: 1.4em; font-variant: small-caps; letter-spacing: 1pt; text-align: left;">
	<tr style="font-size:1.6em;">
<!---- SECTION HEADER 1 STARTS HERE ----!>
		<td colspan="4" style="text-align: right; padding: 14px 0; vertical-align: top;"> TABLE VERSION 1</td>
	</tr>
		<tr>

<!---- CHARACTER BLOCK 1 STARTS HERE ----!>
			<td style="align: center; width: 80px; padding: 10px; vertical-align: middle;"><img src="IMGURL" style="width: 80px; border-radius:50%; box-shadow: 2px 2px #ececec;"></td>
<td style="text-align: justify; width: 320px; vertical-align: top; padding: 10px;">CHARACTER NAME
 — canon — <a href="http://USERNAME.dreamwidth.org/" style="text-decoration: none; color: #000;">USERNAME</a> <a href="LINK1URL" style="text-decoration: none; color: #000;">LINK1</A> / <a href="LINK2URL" style="text-decoration: none; color: #000;">LINK2</A></td>

<!---- CHARACTER BLOCK 2 STARTS HERE ----!>
			<td style="align: center; width: 80px; padding: 10px; vertical-align: middle;"><img src="IMGURL" style="width: 80px; border-radius:50%; box-shadow: 2px 2px #ececec;"></td>
<td style="text-align: justify; width: 320px; vertical-align: top; padding: 10px;">CHARACTER NAME
 — canon — <a href="http://USERNAME.dreamwidth.org/" style="text-decoration: none; color: #000;">USERNAME</a> <a href="LINK1URL" style="text-decoration: none; color: #000;">LINK1</A> / <a href="LINK2URL" style="text-decoration: none; color: #000;">LINK2</A></td>
</tr>

<!---- SECTION HEADER 2 STARTS HERE ----!>
<tr><td colspan="4" style="text-align: right; width: 320px; vertical-align: top; padding: 14px; border-top: 1px solid #c0c0c0;"> COMPRESSED SECTION

<!---- MERGED CHARACTER BLOCK STARTS HERE ----!>
<img src="IMGURL" title="CHARACTERNAME (username)" style="width: 80px; border-radius: 50%;"></td></tr>
<tr><td colspan="4" style="text-align: right; width: 320px; vertical-align: top; padding: 14px; border-top: 1px solid #c0c0c0;">SUBTITLE TEXT. table code by manual. </td></tr></table></raw-code></center>

TABLE VERSION 2

<center><raw-code><table width="592" style="font: 0.90em Georgia, serif; line-height: 1.4em; font-variant: small-caps; letter-spacing: 1pt; text-align: left;">
	<tr style="font-size:1.6em;">
<!---- SECTION HEADER 1 STARTS HERE ----!>
		<td colspan="4" style="text-align: right; padding: 14px; vertical-align: top;"> TABLE VERSION 2</td>
	</tr>
<!---- ROW 1 STARTS HERE ----!>
	<tr style="border-bottom: 1px solid #cecece;">

<!---- CHARACTER BLOCK 1 STARTS HERE ----!>
			<td style="align: center; width: 120px; padding: 10px; vertical-align: middle;"><img src="IMGURL" style="width: 80px; border-radius:50%; box-shadow: 2px 2px #ececec;"> 
			CHARACTER NAME 
			— canon 
			<a href="http://USERNAME.dreamwidth.org/" style="text-decoration: none; color: #000;">username</a> <a href="LINK1URL" style="text-decoration: none; color: #000;">LINK1</A> / <a href="LINK2URL" style="text-decoration: none; color: #000;">LINK2</A></td>

<!---- CHARACTER BLOCK 2 STARTS HERE ----!>
			<td style="align: center; width: 120px; padding: 10px; vertical-align: middle;"><img src="IMGURL" style="width: 80px; border-radius:50%; box-shadow: 2px 2px #ececec;"> 
			CHARACTER NAME 
			— canon 
			<a href="http://USERNAME.dreamwidth.org/" style="text-decoration: none; color: #000;">username</a> <a href="LINK1URL" style="text-decoration: none; color: #000;">LINK1</A> / <a href="LINK2URL" style="text-decoration: none; color: #000;">LINK2</A></td>

<!---- CHARACTER BLOCK 3 STARTS HERE ----!>
			<td style="align: center; width: 120px; padding: 10px; vertical-align: middle;"><img src="IMGURL" style="width: 80px; border-radius:50%; box-shadow: 2px 2px #ececec;"> 
			CHARACTER NAME 
			— canon 
			<a href="http://USERNAME.dreamwidth.org/" style="text-decoration: none; color: #000;">username</a> <a href="LINK1URL" style="text-decoration: none; color: #000;">LINK1</A> / <a href="LINK2URL" style="text-decoration: none; color: #000;">LINK2</A></td>

<!---- CHARACTER BLOCK 4 STARTS HERE ----!>
			<td style="align: center; width: 120px; padding: 10px; vertical-align: middle;"><img src="IMGURL" style="width: 80px; border-radius:50%; box-shadow: 2px 2px #ececec;"> 
			CHARACTER NAME 
			— canon 
			<a href="http://USERNAME.dreamwidth.org/" style="text-decoration: none; color: #000;">username</a> <a href="LINK1URL" style="text-decoration: none; color: #000;">LINK1</A> / <a href="LINK2URL" style="text-decoration: none; color: #000;">LINK2</A></td>
			</tr>

<!---- ROW 2 STARTS HERE ----!>
	<tr style="border-bottom: 1px solid #cecece;">

<!---- CHARACTER BLOCK 1 STARTS HERE ----!>
			<td style="align: center; width: 120px; padding: 10px; vertical-align: middle;"><img src="IMGURL" style="width: 80px; border-radius:50%; box-shadow: 2px 2px #ececec;"> 
			CHARACTER NAME 
			— canon 
			<a href="http://USERNAME.dreamwidth.org/" style="text-decoration: none; color: #000;">username</a> <a href="LINK1URL" style="text-decoration: none; color: #000;">LINK1</A> / <a href="LINK2URL" style="text-decoration: none; color: #000;">LINK2</A></td>

<!---- CHARACTER BLOCK 2 STARTS HERE ----!>
			<td style="align: center; width: 120px; padding: 10px; vertical-align: middle;"><img src="IMGURL" style="width: 80px; border-radius:50%; box-shadow: 2px 2px #ececec;"> 
			CHARACTER NAME 
			— canon 
			<a href="http://USERNAME.dreamwidth.org/" style="text-decoration: none; color: #000;">username</a> <a href="LINK1URL" style="text-decoration: none; color: #000;">LINK1</A> / <a href="LINK2URL" style="text-decoration: none; color: #000;">LINK2</A></td>

<!---- CHARACTER BLOCK 3 STARTS HERE ----!>
			<td style="align: center; width: 120px; padding: 10px; vertical-align: middle;"><img src="IMGURL" style="width: 80px; border-radius:50%; box-shadow: 2px 2px #ececec;"> 
			CHARACTER NAME 
			— canon 
			<a href="http://USERNAME.dreamwidth.org/" style="text-decoration: none; color: #000;">username</a> <a href="LINK1URL" style="text-decoration: none; color: #000;">LINK1</A> / <a href="LINK2URL" style="text-decoration: none; color: #000;">LINK2</A></td>

<!---- CHARACTER BLOCK 4 STARTS HERE ----!>
			<td style="align: center; width: 120px; padding: 10px; vertical-align: middle;"><img src="IMGURL" style="width: 80px; border-radius:50%; box-shadow: 2px 2px #ececec;"> 
			CHARACTER NAME 
			— canon 
			<a href="http://USERNAME.dreamwidth.org/" style="text-decoration: none; color: #000;">username</a> <a href="LINK1URL" style="text-decoration: none; color: #000;">LINK1</A> / <a href="LINK2URL" style="text-decoration: none; color: #000;">LINK2</A></td>
			</tr>

</table></raw-code></center>

CHECK THIS BEFORE YOU START EDITING!

— old code i cleaned up for the hell of it, no pressure
— tested on chrome, not optimised for mobile/responsive
— should be easy to mix and match but if anything's giving you trouble just lmk in the comments!
— border color is #cecece, highlight color is yellow, serif font is Georgia and sans-serif font is Helvetica.

4 comments | Leave a comment

perching

15 June 2024 @ 04:23 am

tba; navi

MARCO LORIN
BOYS & MONSTERS
PASSENGERS / EUDIO

JON SNOW
HBO'S GAME OF THRONES
SOUTHBORN / EUDIO

ALAN VARREN
OF MICE & MEN
PROCEDURES / THISAVROU

JAMES BUCHANAN BARNES
MARVEL CINEMATIC
SANCTION / EUDIO

1 comment | Leave a comment

perching

18 May 2024 @ 11:31 pm

card style; highlighter and greyscale

LIVE PREVIEWS HERE

CARD STYLE PROFILE SHEET
HIGHLIGHTER VERSION | GREYSCALE VERSION

border color: #CFCECE
green highlight color: #CCFF00
grey highlight color: #ECECEC
greyscale filter values: -webkit-filter: grayscale(90%); filter: grayscale(90%);
fonts: Helvetica, Times New Roman

— These divs are nested as fuck so proceed with caution if you're going to move things around. I did mark where each section starts and ends to make this easier.
— Images will auto-resize but for image clarity's sake, the recommended image dimensions are 200px x 200px.
— Shoot me a question if something messes up!

Leave a comment

perching

17 May 2024 @ 11:03 pm

code; simple cards

sharing an old muselist code, all cleaned up(ish)

( live preview under the cut )

Important notes:

— The code is set to 3 rows of 4 cells each by default. Instructions for adding new cells and rows are in the code.

— Here's the full muselist code:

<center><raw-code> <div> <! ------ THIS STAYS AS THE FIRST ROW, DO NOT MOVE IT ------ !> <div style="display: table-row; width: 850px; font-family: Helvetica, sans-serif; font-size: 0.95em; letter-spacing: 1pt; line-height: 14pt; text-align: center; v-align: middle; display: flex; justify-content: center;"> <! ------ FIRST CELL OF THE ROW, DO NOT MOVE THIS ------ !> <div style="display: table-cell; border: 1px solid #cfcece; width: 180px; padding: 20px; background-color: #fff; color: #222;"><img src="IMGURL" style="border: 3px solid #cfcece; border-radius: 50%; width: 80px;"> Character Name <a href="https://USERNAME.dreamwidth.org/profile" style="text-decoration: none;">username</a> canon title</div> <! ------ END OF CELL ------ !> <div style="display: table-cell; border-width: 1px 1px 1px 0; border-style: solid; border-color: #cfcece; width: 180px; padding: 20px; background-color: #fff; color: #222;"><img src="IMAGEURL" style="border: 3px solid #cfcece; border-radius: 50%; width: 80px;"> Character Name <a href="https://USERNAME.dreamwidth.org/profile" style="text-decoration: none;">username</a> canon title</div> <div style="display: table-cell; border-width: 1px 1px 1px 0; border-style: solid; border-color: #cfcece; width: 180px; padding: 20px; background-color: #fff; color: #222;"><img src="IMAGEURL" style="border: 3px solid #cfcece; border-radius: 50%; width: 80px;"> Character Name <a href="https://USERNAME.dreamwidth.org/profile" style="text-decoration: none;">username</a> canon title</div> <! ------ LAST CELL OF THE FIRST ROW, COPY THIS CODE IF YOU'RE ADDING A NEW CELL FOR THE FIRST ROW ONLY ------ !> <div style="display: table-cell; border-width: 1px 1px 1px 0; border-style: solid; border-color: #cfcece; width: 180px; padding: 20px; background-color: #fff; color: #222;"><img src="IMAGEURL" style="border: 3px solid #cfcece; border-radius: 50%; width: 80px;"> Character Name <a href="https://USERNAME.dreamwidth.org/profile" style="text-decoration: none;">username</a> canon title</div> <! ------ END OF CELL ------ !> </div> <! ------ END OF FIRST ROW ------ !> <! ------ START OF SECOND ROW ------ !> <div style="display: table-row; width: 850px; font-family: Helvetica, sans-serif; font-size: 0.95em; letter-spacing: 1pt; line-height: 14pt; text-align: center; v-align: middle; padding: 10px; display: flex; justify-content: center; margin-top: -10px;"> <! ------ FIRST CELL OF THE ROW, DO NOT MOVE THIS ------ !> <div style="display: table-cell; border-width: 0 1px 1px 1px; border-style: solid; border-color: #cfcece; width: 180px; padding: 20px; background-color: #fff; color: #222;"><img src="IMAGEURL" style="border: 3px solid #cfcece; border-radius: 50%; width: 80px;"> Character Name <a href="https://USERNAME.dreamwidth.org/profile" style="text-decoration: none;">username</a> canon title</div> <! ------ END OF CELL ------ !> <div style="display: table-cell; border-width: 0 1px 1px 0; border-style: solid; border-color: #cfcece; width: 180px; padding: 20px; background-color: #fff; color: #222;"><img src="IMAGEURL" style="border: 3px solid #cfcece; border-radius: 50%; width: 80px;"> Character Name <a href="https://USERNAME.dreamwidth.org/profile" style="text-decoration: none;">username</a> canon title</div> <div style="display: table-cell; border-width: 0 1px 1px 0; border-style: solid; border-color: #cfcece; width: 180px; padding: 20px; background-color: #fff; color: #222;"><img src="IMAGEURL" style="border: 3px solid #cfcece; border-radius: 50%; width: 80px;"> Character Name <a href="https://USERNAME.dreamwidth.org/profile" style="text-decoration: none;">username</a> canon title</div> <! ------ LAST CELL OF THE SECOND ROW, COPY THIS CODE IF YOU'RE ADDING A NEW CELL FOR THE SECOND ROW ONLY ------ !> <div style="display: table-cell; border-width: 0 1px 1px 0; border-style: solid; border-color: #cfcece; width: 180px; padding: 20px; background-color: #fff; color: #222;"><img src="IMAGEURL" style="border: 3px solid #cfcece; border-radius: 50%; width: 80px;"> Character Name <a href="https://USERNAME.dreamwidth.org/profile" style="text-decoration: none;">username</a> canon title</div> <! ------ END OF CELL ------ !> </div> <! ------ END OF SECOND ROW ------ !> <! ------ START OF THIRD ROW ------ !> <div style="display: table-row; width: 850px; font-family: Helvetica, sans-serif; font-size: 0.95em; letter-spacing: 1pt; line-height: 14pt; text-align: center; v-align: middle; padding: 10px; display: flex; justify-content: center; margin-top: -20px;"> <! ------ FIRST CELL OF THE ROW, DO NOT MOVE THIS ------ !> <div style="display: table-cell; border-width: 0 1px 1px 1px; border-style: solid; border-color: #cfcece; width: 180px; padding: 20px; background-color: #fff; color: #222;"><img src="IMAGEURL" style="border: 3px solid #cfcece; border-radius: 50%; width: 80px;"> Character Name <a href="https://USERNAME.dreamwidth.org/profile" style="text-decoration: none;">username</a> canon title</div> <! ------ END OF CELL ------ !> <div style="display: table-cell; border-width: 0 1px 1px 0; border-style: solid; border-color: #cfcece; width: 180px; padding: 20px; background-color: #fff; color: #222;"><img src="IMAGEURL" style="border: 3px solid #cfcece; border-radius: 50%; width: 80px;"> Character Name <a href="https://USERNAME.dreamwidth.org/profile" style="text-decoration: none;">username</a> canon title</div> <div style="display: table-cell; border-width: 0 1px 1px 0; border-style: solid; border-color: #cfcece; width: 180px; padding: 20px; background-color: #fff; color: #222;"><img src="IMAGEURL" style="border: 3px solid #cfcece; border-radius: 50%; width: 80px;"> Character Name <a href="https://USERNAME.dreamwidth.org/profile" style="text-decoration: none;">username</a> canon title</div> <! ------ LAST CELL OF THE THIRD ROW, COPY THIS CODE IF YOU'RE ADDING A NEW CELL FOR THE THIRD ROW AND ONWARDS ------ !> <div style="display: table-cell; border-width: 0 1px 1px 0; border-style: solid; border-color: #cfcece; width: 180px; padding: 20px; background-color: #fff; color: #222;"><img src="IMAGEURL" style="border: 3px solid #cfcece; border-radius: 50%; width: 80px;"> Character Name <a href="https://USERNAME.dreamwidth.org/profile" style="text-decoration: none;">username canon title</div> <! ------ END OF CELL ------ !> </div> <! ------ END OF THIRD ROW, YOU CAN ADD A NEW ROW FROM THIS POINT ON ------ !> </div> <a href="https://pagans.dreamwidth.org/">code by pagans</a> </raw-code> </center>

icon and table border color: #cfcece
other colors: #fff for background, #222 for font
font/s used: Helvetica, sans-serif;

Credit appreciated, feel free to edit as you like!

Tags: !divs, type: muselist

1 comment | Leave a comment

manual

18 April 2021 @ 09:07 am

code; real groove

was cleaning out some journals and found some old code lying around.
cleaned it up to update the css and make it more streamlined.
feel free to edit, please credit if using.

( live preview under the cut )

VERSION WITH COLORS

TRANSPARENT VERSION

icon tab color: #96A6FF
drop shadow color: #CECECE

Tags: !css, !divs, !html, type: cr chart, type: misc, type: muselist

Current Music: dua lipa & kylie minogue - real groove (studio 2054 remix)

5 comments | Leave a comment