COME CLEAN, COME EASY. - January 4th, 2025

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;">

</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

Previous Day

			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31