code: FEBRUARY 31 - a timeline / pcal code

[10billionghosts]

MONTH

M

T

W

R

F

S

N

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

KEY

Welcome to the #MONTH# plot calendar!

For the first 24 hours, each player can take one slot per character. Once that time has elapsed, you may select an additional volunteer slot. Please note that players can take only one color-coded slot per month, and the following month you will not be able to take a slot of the same color.

PINK : one

BLUE : two

GREEN : three

🎂 : BIRTHDAY

🎁 : IC/OOC

🌟 : PLAYER EVENT

👀 : STAY TUNED

🏆 : SPORTS!

📚 : GROUP PROJECT

🔮 : DIVINATION

🐉 : MONSTERS? IDFK

📰 : IN THE NEWS

🌕 : FULL MOON

☂️ : RAIN

❄️ : SNOW

🌀 : STORM

☁️ : FOG

FEB

31

🎂
john smith
lorg the destroyer
billbill billgins

Bear claw marshmallow gingerbread apple pie cake marzipan. Pudding pudding chupa chups jelly-o cheesecake caramels. Danish macaroon apple pie gummies caramels.

Biscuit cupcake marzipan pie ice cream.

Lemon drops candy canes tiramisu chupa chups chupa chups liquorice candy canes.

APR

07

🎁 COOKING LESSONS TODAY! 🎁

Said I wasn't going to release much until January and then I burped this out in a couple of days. Whoops. lmao. This timeline/pcal code is FEBRUARY 31, and it is part of the CHECKMATE set.

CHECKMATE is a currently incomplete and unreleased fully modular code set that will allow you to shuffle together various squares and rectangles of content to create a variety of small codes like CR charts and permission lists. Once it's done, I will release a hub page that will connect all other CHECKMATE codes. No ETA on completion, though.

Anyway, FEBRUARY 31 comes with the following:

• An optional header, which includes:
  • A mini-calendar that links to individual days on the pcal, allowing your players to quickly access specific dates, or to link a specific day externally.
  
  
  • Space for a block of text that will wrap around the calendar. Good for general guidelines, or important notes for a given calendar.
  
  
  • An "emoji key" with a variety of styled emoji suggestions
• 3 varieties of pcal date card:
  • Card w/ Mini-Info Box on left side.
  
  
  • Card w/o Info Box on left side
  
  
  • Coding for an inset image.
• A base template with the full header and 2 date card variations.


• A complete template fully coded out for 14 days.

HERE IS THE BASE CODE:

<center><lj-cut text="!!MONTH!! plot calendar"></center> <lj-raw><div style="max-width:550px;width:100%;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:start;gap:30px 10px;font-family:helvetica, arial, sans serif;font-size:12px;line-height:1.5;color:#bf1573;"> <!-- HEADER BELOW THIS POINT --> <div style="width:100%;text-align:justify;"> <!-- MINI-CALENDAR --> <div style="width:202px;margin:0 15px 10px 0;display:inline-block;float:left"> <div style="width:202px;padding:0 0 10px;display:flex;flex-wrap:wrap;justify-content:center;gap:7px;text-align:right;font-size:8px;border-bottom:1px solid #bf1573;background:#ebebeb;"> <div style="width:100%;font-weight:bold;font-size:12px;text-align:center;background:#bf1573;color:#fff;">MONTH</div> <div style="width:20px;font-size:10px;text-align:center;">M</div> <div style="width:20px;font-size:10px;text-align:center;">T</div> <div style="width:20px;font-size:10px;text-align:center;">W</div> <div style="width:20px;font-size:10px;text-align:center;">R</div> <div style="width:20px;font-size:10px;text-align:center;">F</div> <div style="width:20px;font-size:10px;text-align:center;">S</div> <div style="width:20px;font-size:10px;text-align:center;">N</div> <a href="" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;"> </a> <a href="" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;"> </a> <a href="" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;"> </a> <a href="#01" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">1</a> <a href="#02" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">2</a> <a href="#03" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">3</a> <a href="#04" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">4</a> <a href="#05" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">5</a> <a href="#06" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">6</a> <a href="#07" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">7</a> <a href="#08" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">8</a> <a href="#09" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">9</a> <a href="#10" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">10</a> <a href="#11" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">11</a> <a href="#12" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">12</a> <a href="#13" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">13</a> <a href="#14" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">14</a> <a href="#15" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">15</a> <a href="#16" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">16</a> <a href="#17" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">17</a> <a href="#18" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">18</a> <a href="#19" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">19</a> <a href="#20" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">20</a> <a href="#21" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">21</a> <a href="#22" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">22</a> <a href="#23" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">23</a> <a href="#24" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">24</a> <a href="#25" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">25</a> <a href="#26" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">26</a> <a href="#27" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">27</a> <a href="#28" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">28</a> <a href="#29" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">29</a> <a href="#30" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">30</a> <a href="#31" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">31</a> <a href="" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;"></a> </div></div> <!-- MINI-CALENDAR END --> <div style="margin:0 0 10px;padding:0;line-height:.8;font-size:20px;font-weight:bold;text-align:right;">KEY</div> </lj-raw>!! YOUR CONTENT HERE (intro) !!<lj-raw> <!-- EMOJI KEY --> <div style="width:100%;margin:10px auto;display:flex;flex-wrap:wrap;gap:5px;justify-content:center;font-size:10px;"> <div style="padding:2px 5px;background:#fff;"><b style="font-size:14px;color:#e63e7e;">PINK</b> : one</div> <div style="padding:2px 5px;background:#fff;"><b style="font-size:14px;color:blue;">BLUE</b> : two</div> <div style="padding:2px 5px;background:#fff;"><b style="font-size:14px;color:green;">GREEN</b> : three</div> <div style="padding:2px 5px;background:#fff;"><b style="font-size:14px;">🎂</b> : BIRTHDAY</div> <div style="padding:2px 5px;background:#fff;"><b style="font-size:14px;">🎁</b> : IC/OOC</div> <div style="padding:2px 5px;background:#fff;"><b style="font-size:14px;">🌟</b> : PLAYER EVENT</div> <div style="padding:2px 5px;background:#fff;"><b style="font-size:14px;">👀</b> : STAY TUNED</div> <div style="padding:2px 5px;background:#fff;"><b style="font-size:14px;">🏆</b> : SPORTS!</div> <div style="padding:2px 5px;background:#fff;"><b style="font-size:14px;">📚</b> : GROUP PROJECT</div> <div style="padding:2px 5px;background:#fff;"><b style="font-size:14px;">🔮</b> : DIVINATION</div> <div style="padding:2px 5px;background:#fff;"><b style="font-size:14px;">🐉</b> : MONSTERS? IDFK</div> <div style="padding:2px 5px;background:#fff;"><b style="font-size:14px;">📰</b> : IN THE NEWS</div> <div style="padding:2px 5px;background:#fff;"><b style="font-size:14px;">🌕</b> : FULL MOON</div> <div style="padding:2px 5px;background:#fff;"><b style="font-size:14px;">☂️</b> : RAIN</div> <div style="padding:2px 5px;background:#fff;"><b style="font-size:14px;">❄️</b> : SNOW</div> <div style="padding:2px 5px;background:#fff;"><b style="font-size:14px;">🌀</b> : STORM</div> <div style="padding:2px 5px;background:#fff;"><b style="font-size:14px;">☁️</b> : FOG</div> </div> <!-- EMOJI KEY END --> </div> <!-- HEADER DETAILS ABOVE THIS POINT --> <!-- PCAL CARDS BELOW THIS POINT --> <!-- DAY: 01 --> <div style="width:100%;height:255px;display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:start;gap:5px;"> <!-- LEFT SIDE --> <div style="width:125px;height:255px;display:flex;flex-wrap:wrap;gap:5px;"> <!-- MMM/DD --> <div style="width:125px;height:125px;overflow:hidden;display:flex;flex-wrap:wrap;justify-content:flex-start;align-content:space-between;font-weight:bold;line-height:.8;background:#bf1573;color:#fff;"> <div style="width:100%;margin:-1px 0 0 -4px;padding:0;font-size:50px;letter-spacing:-2px">MMM</div><a name="01"></a> <div style="width:100%;margin:15px 0 0 33px;font-size:97px;text-align:right;">01</div> </div> <!-- MMM/DD --> <!-- LIL INFO --> <div style="width:125px;height:125px;display:flex;flex-wrap:wrap;gap:5px;justify-content:center;align-items:stretch;background:transparent;"> <div style="max-width:38px;width:50%;height:10px;background:#bf1573;"></div> <div style="max-width:38px;width:50%;height:10px;background:#1573BF;"></div> <div style="max-width:38px;width:50%;height:10px;background:#bf1573;"></div> <div style="width:100%;height:95px;padding:0 5px;font-size:10px;color:#bf1573;"></lj-raw>!! (side box) YOUR CONTENT HERE !!<lj-raw></div> <div style="max-width:38px;width:50%;height:10px;background:#bf1573;"></div> <div style="max-width:38px;width:50%;height:10px;background:#1573BF;"></div> <div style="max-width:38px;width:50%;height:10px;background:#bf1573;"></div> </div> <!-- LIL INFO --> </div> <!-- LEFT SIDE END --> <!-- MAIN CONTENT --> <div style="width:100%;height:255px;border-right:10px solid #bf1573;background:#fff;"> <div style="margin:10px;font-size: clamp(10px, .9vw, 12px);"></lj-raw>!! YOUR CONTENT HERE !!<lj-raw></div> </div> <!-- MAIN CONTENT --> </div> <!-- DAY: 01 END --> <!-- DAY: 02 --> <div style="width:100%;height:255px;display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:start;gap:5px;"> <!-- LEFT SIDE --> <div style="width:125px;height:255px;display:flex;flex-wrap:wrap;gap:5px;"> <!-- MMM/DD --> <div style="width:125px;height:125px;overflow:hidden;display:flex;flex-wrap:wrap;justify-content:flex-start;align-content:space-between;font-weight:bold;line-height:.8;background:#bf1573;color:#fff;"> <div style="width:100%;margin:-1px 0 0 -4px;padding:0;font-size:50px;letter-spacing:-2px">MMM</div><a name="02"></a> <div style="width:100%;margin:15px 0 0 33px;font-size:97px;text-align:right;">02</div> </div> <!-- MMM/DD --> <!-- 3x3 SQUARES --> <div style="width:125px;height:125px;display:flex;flex-wrap:wrap;gap:5px;justify-content:center;align-items:stretch;background:transparent;"> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> </div> <!-- 3x3 SQUARES --> </div> <!-- LEFT SIDE END --> <!-- MAIN CONTENT --> <div style="width:100%;height:255px;border-right:10px solid #bf1573;background:#fff;color:#bf1573;"> <div style="margin:10px;font-size: clamp(10px, .9vw, 12px);"> <!-- DELETE THIS IF YOU DON'T WANT AN IMAGE --> <div style="width:100%;height:150px;margin:0 auto 20px;background:#ccc url('IMG_URL')center;background-size:cover;"></div> <!-- DELETE THIS IF YOU DON'T WANT AN IMAGE --> </lj-raw>!! YOUR CONTENT HERE !!<lj-raw></div> </div> <!-- MAIN CONTENT --> </div> <!-- DAY: 02 END --> <!-- PCAL CARDS ABOVE THIS POINT --> </div><!-- CREDIT --> <div style="width:100%;text-align:right;"><a href="https://10billionghosts.dreamwidth.org/" style="font-size:8px;text-decoration:none;color:#CBCCDA;">code</a></div> <!-- CREDIT --></lj-raw>

HERE IS THE CODE FOR A BASIC DATE CARD:
It features: 3x3 colored squares on the left side, no inset image code

<!-- DAY: DD --> <div style="width:100%;height:255px;display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:start;gap:5px;"> <!-- LEFT SIDE --> <div style="width:125px;height:255px;display:flex;flex-wrap:wrap;gap:5px;"> <!-- MMM/DD --> <div style="width:125px;height:125px;overflow:hidden;display:flex;flex-wrap:wrap;justify-content:flex-start;align-content:space-between;font-weight:bold;line-height:.8;background:#bf1573;color:#fff;"> <div style="width:100%;margin:-1px 0 0 -4px;padding:0;font-size:50px;letter-spacing:-2px">MMM</div><a name="DD"></a> <div style="width:100%;margin:15px 0 0 33px;font-size:97px;text-align:right;">DD</div> </div> <!-- MMM/DD --> <!-- 3x3 SQUARES --> <div style="width:125px;height:125px;display:flex;flex-wrap:wrap;gap:5px;justify-content:center;align-items:stretch;background:transparent;"> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> </div> <!-- 3x3 SQUARES --> </div> <!-- LEFT SIDE END --> <!-- MAIN CONTENT --> <div style="width:100%;height:255px;border-right:10px solid #bf1573;background:#fff;color:#bf1573;"> <div style="margin:10px;font-size: clamp(10px, .9vw, 12px);"> </lj-raw>!! YOUR CONTENT HERE !!<lj-raw></div> </div> <!-- MAIN CONTENT --> </div> <!-- DAY: DD END -->

HERE IS THE CODE FOR THE ALT DATE CARD:
This card features: a styled space for a bit of text or emojis (birthdays, the weather, other notes), no inset image

<!-- DAY: 01 --> <div style="width:100%;height:255px;display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:start;gap:5px;"> <!-- LEFT SIDE --> <div style="width:125px;height:255px;display:flex;flex-wrap:wrap;gap:5px;"> <!-- MMM/DD --> <div style="width:125px;height:125px;overflow:hidden;display:flex;flex-wrap:wrap;justify-content:flex-start;align-content:space-between;font-weight:bold;line-height:.8;background:#bf1573;color:#fff;"> <div style="width:100%;margin:-1px 0 0 -4px;padding:0;font-size:50px;letter-spacing:-2px">MMM</div><a name="DD"></a> <div style="width:100%;margin:15px 0 0 33px;font-size:97px;text-align:right;">DD</div> </div> <!-- MMM/DD --> <!-- LIL INFO --> <div style="width:125px;height:125px;display:flex;flex-wrap:wrap;gap:5px;justify-content:center;align-items:stretch;background:transparent;"> <div style="max-width:38px;width:50%;height:10px;background:#bf1573;"></div> <div style="max-width:38px;width:50%;height:10px;background:#1573BF;"></div> <div style="max-width:38px;width:50%;height:10px;background:#bf1573;"></div> <div style="width:100%;height:95px;padding:0 5px;font-size:10px;color:#bf1573;"></lj-raw>!! (side box) YOUR CONTENT HERE !!<lj-raw></div> <div style="max-width:38px;width:50%;height:10px;background:#bf1573;"></div> <div style="max-width:38px;width:50%;height:10px;background:#1573BF;"></div> <div style="max-width:38px;width:50%;height:10px;background:#bf1573;"></div> </div> <!-- LIL INFO --> </div> <!-- LEFT SIDE END --> <!-- MAIN CONTENT --> <div style="width:100%;height:255px;border-right:10px solid #bf1573;background:#fff;"> <div style="margin:10px;font-size: clamp(10px, .9vw, 12px);"></lj-raw>!! YOUR CONTENT HERE !!<lj-raw></div> </div> <!-- MAIN CONTENT --> </div> <!-- DAY: DD END -->

HERE IS THE CODE FOR THE BASIC DATE CARD W/ INSET IMAGE:
You can convert this to the alt card by copying the LIL INFO section of the alt card and pasting it over the 3x3 SQUARES section in the basic card.

<!-- DAY: 02 --> <div style="width:100%;height:255px;display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:start;gap:5px;"> <!-- LEFT SIDE --> <div style="width:125px;height:255px;display:flex;flex-wrap:wrap;gap:5px;"> <!-- MMM/DD --> <div style="width:125px;height:125px;overflow:hidden;display:flex;flex-wrap:wrap;justify-content:flex-start;align-content:space-between;font-weight:bold;line-height:.8;background:#bf1573;color:#fff;"> <div style="width:100%;margin:-1px 0 0 -4px;padding:0;font-size:50px;letter-spacing:-2px">MMM</div><a name="DD"></a> <div style="width:100%;margin:15px 0 0 33px;font-size:97px;text-align:right;">DD</div> </div> <!-- MMM/DD --> <!-- 3x3 SQUARES --> <div style="width:125px;height:125px;display:flex;flex-wrap:wrap;gap:5px;justify-content:center;align-items:stretch;background:transparent;"> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> </div> <!-- 3x3 SQUARES --> </div> <!-- LEFT SIDE END --> <!-- MAIN CONTENT --> <div style="width:100%;height:255px;border-right:10px solid #bf1573;background:#fff;color:#bf1573;"> <div style="margin:10px;font-size: clamp(10px, .9vw, 12px);"> <!-- DELETE THIS IF YOU DON'T WANT AN IMAGE --> <div style="width:100%;height:150px;margin:0 auto 20px;background:#ccc url('IMG_URL')center;background-size:cover;"></div> <!-- DELETE THIS IF YOU DON'T WANT AN IMAGE --> </lj-raw>!! YOUR CONTENT HERE !!<lj-raw></div> </div> <!-- MAIN CONTENT --> </div> <!-- DAY: DD END -->

HERE IS A CODE FOR A 14 DAY PCAL:

<center><lj-cut text="!!MONTH!! plot calendar"></center> <lj-raw><div style="max-width:550px;width:100%;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:start;gap:30px 10px;font-family:helvetica, arial, sans serif;font-size:12px;line-height:1.5;color:#bf1573;"> <!-- HEADER BELOW THIS POINT --> <div style="width:100%;text-align:justify;"> <!-- MINI-CALENDAR --> <div style="width:202px;margin:0 15px 10px 0;display:inline-block;float:left"> <div style="width:202px;padding:0 0 10px;display:flex;flex-wrap:wrap;justify-content:center;gap:7px;text-align:right;font-size:8px;border-bottom:1px solid #bf1573;background:#ebebeb;"> <div style="width:100%;font-weight:bold;font-size:12px;text-align:center;background:#bf1573;color:#fff;">MONTH</div> <div style="width:20px;font-size:10px;text-align:center;">M</div> <div style="width:20px;font-size:10px;text-align:center;">T</div> <div style="width:20px;font-size:10px;text-align:center;">W</div> <div style="width:20px;font-size:10px;text-align:center;">R</div> <div style="width:20px;font-size:10px;text-align:center;">F</div> <div style="width:20px;font-size:10px;text-align:center;">S</div> <div style="width:20px;font-size:10px;text-align:center;">N</div> <a href="" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;"> </a> <a href="" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;"> </a> <a href="" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;"> </a> <a href="#01" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">1</a> <a href="#02" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">2</a> <a href="#03" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">3</a> <a href="#04" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">4</a> <a href="#05" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">5</a> <a href="#06" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">6</a> <a href="#07" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">7</a> <a href="#08" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">8</a> <a href="#09" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">9</a> <a href="#10" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">10</a> <a href="#11" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">11</a> <a href="#12" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">12</a> <a href="#13" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">13</a> <a href="#14" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">14</a> <a href="#15" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">15</a> <a href="#16" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">16</a> <a href="#17" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">17</a> <a href="#18" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">18</a> <a href="#19" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">19</a> <a href="#20" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">20</a> <a href="#21" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">21</a> <a href="#22" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">22</a> <a href="#23" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">23</a> <a href="#24" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">24</a> <a href="#25" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">25</a> <a href="#26" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">26</a> <a href="#27" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">27</a> <a href="#28" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">28</a> <a href="#29" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">29</a> <a href="#30" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">30</a> <a href="#31" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;">31</a> <a href="" style="text-decoration:none;width:20px;height:20px;padding:0 1px 0 0;background:#fff;color:#bf1573;"></a> </div></div> <!-- MINI-CALENDAR END --> <div style="margin:0 0 10px;padding:0;line-height:.8;font-size:20px;font-weight:bold;text-align:right;">KEY</div> </lj-raw>!! YOUR CONTENT HERE (intro) !!<lj-raw> <!-- EMOJI KEY --> <div style="width:100%;margin:10px auto;display:flex;flex-wrap:wrap;gap:5px;justify-content:center;font-size:10px;"> <div style="padding:2px 5px;background:#fff;"><b style="font-size:14px;color:#e63e7e;">PINK</b> : one</div> <div style="padding:2px 5px;background:#fff;"><b style="font-size:14px;color:blue;">BLUE</b> : two</div> <div style="padding:2px 5px;background:#fff;"><b style="font-size:14px;color:green;">GREEN</b> : three</div> <div style="padding:2px 5px;background:#fff;"><b style="font-size:14px;">🎂</b> : BIRTHDAY</div> <div style="padding:2px 5px;background:#fff;"><b style="font-size:14px;">🎁</b> : IC/OOC</div> <div style="padding:2px 5px;background:#fff;"><b style="font-size:14px;">🌟</b> : PLAYER EVENT</div> <div style="padding:2px 5px;background:#fff;"><b style="font-size:14px;">👀</b> : STAY TUNED</div> <div style="padding:2px 5px;background:#fff;"><b style="font-size:14px;">🏆</b> : SPORTS!</div> <div style="padding:2px 5px;background:#fff;"><b style="font-size:14px;">📚</b> : GROUP PROJECT</div> <div style="padding:2px 5px;background:#fff;"><b style="font-size:14px;">🔮</b> : DIVINATION</div> <div style="padding:2px 5px;background:#fff;"><b style="font-size:14px;">🐉</b> : MONSTERS? IDFK</div> <div style="padding:2px 5px;background:#fff;"><b style="font-size:14px;">📰</b> : IN THE NEWS</div> <div style="padding:2px 5px;background:#fff;"><b style="font-size:14px;">🌕</b> : FULL MOON</div> <div style="padding:2px 5px;background:#fff;"><b style="font-size:14px;">☂️</b> : RAIN</div> <div style="padding:2px 5px;background:#fff;"><b style="font-size:14px;">❄️</b> : SNOW</div> <div style="padding:2px 5px;background:#fff;"><b style="font-size:14px;">🌀</b> : STORM</div> <div style="padding:2px 5px;background:#fff;"><b style="font-size:14px;">☁️</b> : FOG</div> </div> <!-- EMOJI KEY END --> </div> <!-- HEADER DETAILS ABOVE THIS POINT --> <!-- PCAL CARDS BELOW THIS POINT --> <!-- DAY: 01 --> <div style="width:100%;height:255px;display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:start;gap:5px;"> <!-- LEFT SIDE --> <div style="width:125px;height:255px;display:flex;flex-wrap:wrap;gap:5px;"> <!-- MMM/DD --> <div style="width:125px;height:125px;overflow:hidden;display:flex;flex-wrap:wrap;justify-content:flex-start;align-content:space-between;font-weight:bold;line-height:.8;background:#bf1573;color:#fff;"> <div style="width:100%;margin:-1px 0 0 -4px;padding:0;font-size:50px;letter-spacing:-2px">MMM</div><a name="01"></a> <div style="width:100%;margin:15px 0 0 33px;font-size:97px;text-align:right;">01</div> </div> <!-- MMM/DD --> <!-- LIL INFO --> <div style="width:125px;height:125px;display:flex;flex-wrap:wrap;gap:5px;justify-content:center;align-items:stretch;background:transparent;"> <div style="max-width:38px;width:50%;height:10px;background:#bf1573;"></div> <div style="max-width:38px;width:50%;height:10px;background:#1573BF;"></div> <div style="max-width:38px;width:50%;height:10px;background:#bf1573;"></div> <div style="width:100%;height:95px;padding:0 5px;font-size:10px;color:#bf1573;"></lj-raw>!! (side box) YOUR CONTENT HERE !!<lj-raw></div> <div style="max-width:38px;width:50%;height:10px;background:#bf1573;"></div> <div style="max-width:38px;width:50%;height:10px;background:#1573BF;"></div> <div style="max-width:38px;width:50%;height:10px;background:#bf1573;"></div> </div> <!-- LIL INFO --> </div> <!-- LEFT SIDE END --> <!-- MAIN CONTENT --> <div style="width:100%;height:255px;border-right:10px solid #bf1573;background:#fff;"> <div style="margin:10px;font-size: clamp(10px, .9vw, 12px);"></lj-raw>!! YOUR CONTENT HERE !!<lj-raw></div> </div> <!-- MAIN CONTENT --> </div> <!-- DAY: 01 END --> <!-- DAY: 02 --> <div style="width:100%;height:255px;display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:start;gap:5px;"> <!-- LEFT SIDE --> <div style="width:125px;height:255px;display:flex;flex-wrap:wrap;gap:5px;"> <!-- MMM/DD --> <div style="width:125px;height:125px;overflow:hidden;display:flex;flex-wrap:wrap;justify-content:flex-start;align-content:space-between;font-weight:bold;line-height:.8;background:#bf1573;color:#fff;"> <div style="width:100%;margin:-1px 0 0 -4px;padding:0;font-size:50px;letter-spacing:-2px">MMM</div><a name="02"></a> <div style="width:100%;margin:15px 0 0 33px;font-size:97px;text-align:right;">02</div> </div> <!-- MMM/DD --> <!-- 3x3 SQUARES --> <div style="width:125px;height:125px;display:flex;flex-wrap:wrap;gap:5px;justify-content:center;align-items:stretch;background:transparent;"> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> </div> <!-- 3x3 SQUARES --> </div> <!-- LEFT SIDE END --> <!-- MAIN CONTENT --> <div style="width:100%;height:255px;border-right:10px solid #bf1573;background:#fff;color:#bf1573;"> <div style="margin:10px;font-size: clamp(10px, .9vw, 12px);"> <!-- DELETE THIS IF YOU DON'T WANT AN IMAGE --> <div style="width:100%;height:150px;margin:0 auto 20px;background:#ccc url('IMG_URL')center;background-size:cover;"></div> <!-- DELETE THIS IF YOU DON'T WANT AN IMAGE --> </lj-raw>!! YOUR CONTENT HERE !!<lj-raw></div> </div> <!-- MAIN CONTENT --> </div> <!-- DAY: 02 END --> <!-- DAY: 03 --> <div style="width:100%;height:255px;display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:start;gap:5px;"> <!-- LEFT SIDE --> <div style="width:125px;height:255px;display:flex;flex-wrap:wrap;gap:5px;"> <!-- MMM/DD --> <div style="width:125px;height:125px;overflow:hidden;display:flex;flex-wrap:wrap;justify-content:flex-start;align-content:space-between;font-weight:bold;line-height:.8;background:#bf1573;color:#fff;"> <div style="width:100%;margin:-1px 0 0 -4px;padding:0;font-size:50px;letter-spacing:-2px">MMM</div><a name="03"></a> <div style="width:100%;margin:15px 0 0 33px;font-size:97px;text-align:right;">03</div> </div> <!-- MMM/DD --> <!-- 3x3 SQUARES --> <div style="width:125px;height:125px;display:flex;flex-wrap:wrap;gap:5px;justify-content:center;align-items:stretch;background:transparent;"> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> </div> <!-- 3x3 SQUARES --> </div> <!-- LEFT SIDE END --> <!-- MAIN CONTENT --> <div style="width:100%;height:255px;border-right:10px solid #bf1573;background:#fff;color:#bf1573;"> <div style="margin:10px;font-size: clamp(10px, .9vw, 12px);"> </lj-raw>!! YOUR CONTENT HERE !!<lj-raw></div> </div> <!-- MAIN CONTENT --> </div> <!-- DAY: 03 END --> <!-- DAY: 04 --> <div style="width:100%;height:255px;display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:start;gap:5px;"> <!-- LEFT SIDE --> <div style="width:125px;height:255px;display:flex;flex-wrap:wrap;gap:5px;"> <!-- MMM/DD --> <div style="width:125px;height:125px;overflow:hidden;display:flex;flex-wrap:wrap;justify-content:flex-start;align-content:space-between;font-weight:bold;line-height:.8;background:#bf1573;color:#fff;"> <div style="width:100%;margin:-1px 0 0 -4px;padding:0;font-size:50px;letter-spacing:-2px">MMM</div><a name="04"></a> <div style="width:100%;margin:15px 0 0 33px;font-size:97px;text-align:right;">04</div> </div> <!-- MMM/DD --> <!-- 3x3 SQUARES --> <div style="width:125px;height:125px;display:flex;flex-wrap:wrap;gap:5px;justify-content:center;align-items:stretch;background:transparent;"> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> </div> <!-- 3x3 SQUARES --> </div> <!-- LEFT SIDE END --> <!-- MAIN CONTENT --> <div style="width:100%;height:255px;border-right:10px solid #bf1573;background:#fff;color:#bf1573;"> <div style="margin:10px;font-size: clamp(10px, .9vw, 12px);"> </lj-raw>!! YOUR CONTENT HERE !!<lj-raw></div> </div> <!-- MAIN CONTENT --> </div> <!-- DAY: 04 END --> <!-- DAY: 05 --> <div style="width:100%;height:255px;display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:start;gap:5px;"> <!-- LEFT SIDE --> <div style="width:125px;height:255px;display:flex;flex-wrap:wrap;gap:5px;"> <!-- MMM/DD --> <div style="width:125px;height:125px;overflow:hidden;display:flex;flex-wrap:wrap;justify-content:flex-start;align-content:space-between;font-weight:bold;line-height:.8;background:#bf1573;color:#fff;"> <div style="width:100%;margin:-1px 0 0 -4px;padding:0;font-size:50px;letter-spacing:-2px">MMM</div><a name="05"></a> <div style="width:100%;margin:15px 0 0 33px;font-size:97px;text-align:right;">05</div> </div> <!-- MMM/DD --> <!-- 3x3 SQUARES --> <div style="width:125px;height:125px;display:flex;flex-wrap:wrap;gap:5px;justify-content:center;align-items:stretch;background:transparent;"> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> </div> <!-- 3x3 SQUARES --> </div> <!-- LEFT SIDE END --> <!-- MAIN CONTENT --> <div style="width:100%;height:255px;border-right:10px solid #bf1573;background:#fff;color:#bf1573;"> <div style="margin:10px;font-size: clamp(10px, .9vw, 12px);"> </lj-raw>!! YOUR CONTENT HERE !!<lj-raw></div> </div> <!-- MAIN CONTENT --> </div> <!-- DAY: 05 END --> <!-- DAY: 06 --> <div style="width:100%;height:255px;display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:start;gap:5px;"> <!-- LEFT SIDE --> <div style="width:125px;height:255px;display:flex;flex-wrap:wrap;gap:5px;"> <!-- MMM/DD --> <div style="width:125px;height:125px;overflow:hidden;display:flex;flex-wrap:wrap;justify-content:flex-start;align-content:space-between;font-weight:bold;line-height:.8;background:#bf1573;color:#fff;"> <div style="width:100%;margin:-1px 0 0 -4px;padding:0;font-size:50px;letter-spacing:-2px">MMM</div><a name="06"></a> <div style="width:100%;margin:15px 0 0 33px;font-size:97px;text-align:right;">06</div> </div> <!-- MMM/DD --> <!-- 3x3 SQUARES --> <div style="width:125px;height:125px;display:flex;flex-wrap:wrap;gap:5px;justify-content:center;align-items:stretch;background:transparent;"> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> </div> <!-- 3x3 SQUARES --> </div> <!-- LEFT SIDE END --> <!-- MAIN CONTENT --> <div style="width:100%;height:255px;border-right:10px solid #bf1573;background:#fff;color:#bf1573;"> <div style="margin:10px;font-size: clamp(10px, .9vw, 12px);"> </lj-raw>!! YOUR CONTENT HERE !!<lj-raw></div> </div> <!-- MAIN CONTENT --> </div> <!-- DAY: 06 END --> <!-- DAY: 07 --> <div style="width:100%;height:255px;display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:start;gap:5px;"> <!-- LEFT SIDE --> <div style="width:125px;height:255px;display:flex;flex-wrap:wrap;gap:5px;"> <!-- MMM/DD --> <div style="width:125px;height:125px;overflow:hidden;display:flex;flex-wrap:wrap;justify-content:flex-start;align-content:space-between;font-weight:bold;line-height:.8;background:#bf1573;color:#fff;"> <div style="width:100%;margin:-1px 0 0 -4px;padding:0;font-size:50px;letter-spacing:-2px">MMM</div><a name="07"></a> <div style="width:100%;margin:15px 0 0 33px;font-size:97px;text-align:right;">07</div> </div> <!-- MMM/DD --> <!-- 3x3 SQUARES --> <div style="width:125px;height:125px;display:flex;flex-wrap:wrap;gap:5px;justify-content:center;align-items:stretch;background:transparent;"> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> </div> <!-- 3x3 SQUARES --> </div> <!-- LEFT SIDE END --> <!-- MAIN CONTENT --> <div style="width:100%;height:255px;border-right:10px solid #bf1573;background:#fff;color:#bf1573;"> <div style="margin:10px;font-size: clamp(10px, .9vw, 12px);"> </lj-raw>!! YOUR CONTENT HERE !!<lj-raw></div> </div> <!-- MAIN CONTENT --> </div> <!-- DAY: 07 END --> <!-- DAY: 08 --> <div style="width:100%;height:255px;display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:start;gap:5px;"> <!-- LEFT SIDE --> <div style="width:125px;height:255px;display:flex;flex-wrap:wrap;gap:5px;"> <!-- MMM/DD --> <div style="width:125px;height:125px;overflow:hidden;display:flex;flex-wrap:wrap;justify-content:flex-start;align-content:space-between;font-weight:bold;line-height:.8;background:#bf1573;color:#fff;"> <div style="width:100%;margin:-1px 0 0 -4px;padding:0;font-size:50px;letter-spacing:-2px">MMM</div><a name="08"></a> <div style="width:100%;margin:15px 0 0 33px;font-size:97px;text-align:right;">08</div> </div> <!-- MMM/DD --> <!-- 3x3 SQUARES --> <div style="width:125px;height:125px;display:flex;flex-wrap:wrap;gap:5px;justify-content:center;align-items:stretch;background:transparent;"> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> </div> <!-- 3x3 SQUARES --> </div> <!-- LEFT SIDE END --> <!-- MAIN CONTENT --> <div style="width:100%;height:255px;border-right:10px solid #bf1573;background:#fff;color:#bf1573;"> <div style="margin:10px;font-size: clamp(10px, .9vw, 12px);"> </lj-raw>!! YOUR CONTENT HERE !!<lj-raw></div> </div> <!-- MAIN CONTENT --> </div> <!-- DAY: 08 END --> <!-- DAY: 09 --> <div style="width:100%;height:255px;display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:start;gap:5px;"> <!-- LEFT SIDE --> <div style="width:125px;height:255px;display:flex;flex-wrap:wrap;gap:5px;"> <!-- MMM/DD --> <div style="width:125px;height:125px;overflow:hidden;display:flex;flex-wrap:wrap;justify-content:flex-start;align-content:space-between;font-weight:bold;line-height:.8;background:#bf1573;color:#fff;"> <div style="width:100%;margin:-1px 0 0 -4px;padding:0;font-size:50px;letter-spacing:-2px">MMM</div><a name="09"></a> <div style="width:100%;margin:15px 0 0 33px;font-size:97px;text-align:right;">09</div> </div> <!-- MMM/DD --> <!-- 3x3 SQUARES --> <div style="width:125px;height:125px;display:flex;flex-wrap:wrap;gap:5px;justify-content:center;align-items:stretch;background:transparent;"> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> </div> <!-- 3x3 SQUARES --> </div> <!-- LEFT SIDE END --> <!-- MAIN CONTENT --> <div style="width:100%;height:255px;border-right:10px solid #bf1573;background:#fff;color:#bf1573;"> <div style="margin:10px;font-size: clamp(10px, .9vw, 12px);"> </lj-raw>!! YOUR CONTENT HERE !!<lj-raw></div> </div> <!-- MAIN CONTENT --> </div> <!-- DAY: 09 END --> <!-- DAY: 10 --> <div style="width:100%;height:255px;display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:start;gap:5px;"> <!-- LEFT SIDE --> <div style="width:125px;height:255px;display:flex;flex-wrap:wrap;gap:5px;"> <!-- MMM/DD --> <div style="width:125px;height:125px;overflow:hidden;display:flex;flex-wrap:wrap;justify-content:flex-start;align-content:space-between;font-weight:bold;line-height:.8;background:#bf1573;color:#fff;"> <div style="width:100%;margin:-1px 0 0 -4px;padding:0;font-size:50px;letter-spacing:-2px">MMM</div><a name="10"></a> <div style="width:100%;margin:15px 0 0 33px;font-size:97px;text-align:right;">10</div> </div> <!-- MMM/DD --> <!-- 3x3 SQUARES --> <div style="width:125px;height:125px;display:flex;flex-wrap:wrap;gap:5px;justify-content:center;align-items:stretch;background:transparent;"> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> </div> <!-- 3x3 SQUARES --> </div> <!-- LEFT SIDE END --> <!-- MAIN CONTENT --> <div style="width:100%;height:255px;border-right:10px solid #bf1573;background:#fff;color:#bf1573;"> <div style="margin:10px;font-size: clamp(10px, .9vw, 12px);"> </lj-raw>!! YOUR CONTENT HERE !!<lj-raw></div> </div> <!-- MAIN CONTENT --> </div> <!-- DAY: 10 END --> <!-- DAY: 11 --> <div style="width:100%;height:255px;display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:start;gap:5px;"> <!-- LEFT SIDE --> <div style="width:125px;height:255px;display:flex;flex-wrap:wrap;gap:5px;"> <!-- MMM/DD --> <div style="width:125px;height:125px;overflow:hidden;display:flex;flex-wrap:wrap;justify-content:flex-start;align-content:space-between;font-weight:bold;line-height:.8;background:#bf1573;color:#fff;"> <div style="width:100%;margin:-1px 0 0 -4px;padding:0;font-size:50px;letter-spacing:-2px">MMM</div><a name="11"></a> <div style="width:100%;margin:15px 0 0 33px;font-size:97px;text-align:right;">11</div> </div> <!-- MMM/DD --> <!-- 3x3 SQUARES --> <div style="width:125px;height:125px;display:flex;flex-wrap:wrap;gap:5px;justify-content:center;align-items:stretch;background:transparent;"> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> </div> <!-- 3x3 SQUARES --> </div> <!-- LEFT SIDE END --> <!-- MAIN CONTENT --> <div style="width:100%;height:255px;border-right:10px solid #bf1573;background:#fff;color:#bf1573;"> <div style="margin:10px;font-size: clamp(10px, .9vw, 12px);"> </lj-raw>!! YOUR CONTENT HERE !!<lj-raw></div> </div> <!-- MAIN CONTENT --> </div> <!-- DAY: 11 END --> <!-- DAY: 12 --> <div style="width:100%;height:255px;display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:start;gap:5px;"> <!-- LEFT SIDE --> <div style="width:125px;height:255px;display:flex;flex-wrap:wrap;gap:5px;"> <!-- MMM/DD --> <div style="width:125px;height:125px;overflow:hidden;display:flex;flex-wrap:wrap;justify-content:flex-start;align-content:space-between;font-weight:bold;line-height:.8;background:#bf1573;color:#fff;"> <div style="width:100%;margin:-1px 0 0 -4px;padding:0;font-size:50px;letter-spacing:-2px">MMM</div><a name="12"></a> <div style="width:100%;margin:15px 0 0 33px;font-size:97px;text-align:right;">12</div> </div> <!-- MMM/DD --> <!-- 3x3 SQUARES --> <div style="width:125px;height:125px;display:flex;flex-wrap:wrap;gap:5px;justify-content:center;align-items:stretch;background:transparent;"> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> </div> <!-- 3x3 SQUARES --> </div> <!-- LEFT SIDE END --> <!-- MAIN CONTENT --> <div style="width:100%;height:255px;border-right:10px solid #bf1573;background:#fff;color:#bf1573;"> <div style="margin:10px;font-size: clamp(10px, .9vw, 12px);"> </lj-raw>!! YOUR CONTENT HERE !!<lj-raw></div> </div> <!-- MAIN CONTENT --> </div> <!-- DAY: 12 END --> <!-- DAY: 13 --> <div style="width:100%;height:255px;display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:start;gap:5px;"> <!-- LEFT SIDE --> <div style="width:125px;height:255px;display:flex;flex-wrap:wrap;gap:5px;"> <!-- MMM/DD --> <div style="width:125px;height:125px;overflow:hidden;display:flex;flex-wrap:wrap;justify-content:flex-start;align-content:space-between;font-weight:bold;line-height:.8;background:#bf1573;color:#fff;"> <div style="width:100%;margin:-1px 0 0 -4px;padding:0;font-size:50px;letter-spacing:-2px">MMM</div><a name="13"></a> <div style="width:100%;margin:15px 0 0 33px;font-size:97px;text-align:right;">13</div> </div> <!-- MMM/DD --> <!-- 3x3 SQUARES --> <div style="width:125px;height:125px;display:flex;flex-wrap:wrap;gap:5px;justify-content:center;align-items:stretch;background:transparent;"> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> </div> <!-- 3x3 SQUARES --> </div> <!-- LEFT SIDE END --> <!-- MAIN CONTENT --> <div style="width:100%;height:255px;border-right:10px solid #bf1573;background:#fff;color:#bf1573;"> <div style="margin:10px;font-size: clamp(10px, .9vw, 12px);"> </lj-raw>!! YOUR CONTENT HERE !!<lj-raw></div> </div> <!-- MAIN CONTENT --> </div> <!-- DAY: 13 END --> <!-- DAY: 14 --> <div style="width:100%;height:255px;display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:start;gap:5px;"> <!-- LEFT SIDE --> <div style="width:125px;height:255px;display:flex;flex-wrap:wrap;gap:5px;"> <!-- MMM/DD --> <div style="width:125px;height:125px;overflow:hidden;display:flex;flex-wrap:wrap;justify-content:flex-start;align-content:space-between;font-weight:bold;line-height:.8;background:#bf1573;color:#fff;"> <div style="width:100%;margin:-1px 0 0 -4px;padding:0;font-size:50px;letter-spacing:-2px">MMM</div><a name="14"></a> <div style="width:100%;margin:15px 0 0 33px;font-size:97px;text-align:right;">14</div> </div> <!-- MMM/DD --> <!-- 3x3 SQUARES --> <div style="width:125px;height:125px;display:flex;flex-wrap:wrap;gap:5px;justify-content:center;align-items:stretch;background:transparent;"> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#1573BF;"></div> <div style="max-width:38px;width:50%;max-height:38px;height:50%;background:#bf1573;"></div> </div> <!-- 3x3 SQUARES --> </div> <!-- LEFT SIDE END --> <!-- MAIN CONTENT --> <div style="width:100%;height:255px;border-right:10px solid #bf1573;background:#fff;color:#bf1573;"> <div style="margin:10px;font-size: clamp(10px, .9vw, 12px);"> </lj-raw>!! YOUR CONTENT HERE !!<lj-raw></div> </div> <!-- MAIN CONTENT --> </div> <!-- DAY: 14 END --> <!-- PCAL CARDS ABOVE THIS POINT --> </div> <!-- CREDIT --> <div style="width:100%;text-align:right;"><a href="https://10billionghosts.dreamwidth.org/" style="font-size:8px;text-decoration:none;color:#CBCCDA;">code</a></div> <!-- CREDIT --></lj-raw>

HOW TO USE
❣️ Mind the lj-raw tags!!

❣️ This code is mobile friendly and insanejournal friendly!

❣️ IJ USERS NOTE: I would suggest changing any white backgrounds ('background:#fff;') to an off-white, something like 'background:#fcfcfc;', to make the cards pop a bit better on insanejournal's white background.

❣️ Once the CHECKMATE set is released, I will update this post with instructions on how to implement more modular options.

❣️ Everything is pretty clearly commented out, and can be duplicated by copy-pasting, or removed by deleting, the entire commented 'section' (everything between -- NAME -- and -- NAME END --, basically).

❣️ The keys are there as examples, please don't feel obligated to use them, or those emojis. You can customize that section or remove it entirely!

❣️ IMPORTANT: Look for instances of MMM and change that to the abbreviation of your current month. You may also want to change the word MONTH in the mini calendar up top.

❣️ IMPORTANT: Look for instances of DD and change that to the appropriate day on your date card. For single digit days, for best results, write them as 01, 02, 03, etc. There are 4 spaces to do this on each date card:

• 2 appear on the comment label as DAY: DD and DAY: DD END.
• 1 is the main date for the card.
• 1 is in the code as name="DD". This is an important one to change as it enables the anchor link function to work!

❣️ IMPORTANT: The mini-calendar by default is set up to be a 31 day month with the first starting on a Thursday. The mini-calendar is preeeetty cleanly laid out and shouldn't be too hard to update, but do remember to update it to reflect the proper month.

❣️ TIP: If you plan on writing a LOT for a given day, and you think the amount of text will overflow, breaking the code, you can add 'overflow:auto;' to the main content div's style list. So, it'll look like this: width:100%;height:255px;border-right:10px solid #bf1573;background:#fff;color:#bf1573;overflow:auto; -- adding overflow:auto will cause a scroll bar to generate on JUST that card if the text gets too long.

❣️ If using the inset image code, replace IMG_URL with the picture you'd like to use.

❣️ hex code #bf1573 is the code's primary color, for text and accents.

❣️ hex code #1573BF is the code's secondary color, used as an accent color only.

❣️ hex code #fff is white, used both for font colors and as the background. Insanejournal users please see the note above about changing instances of white.

❣️ hex code #ebebeb is a very light gray used as the background for the mini calendar.

❣️ Any other colors in the code are, I'm pretty sure, just used as examples in the key section.

❣️ This code does have a credit at the very bottom. I'd love if you kept it in there, but you can delete it if you want.

Omg okay this got so super long lmao. I love to see what people have done with my code, so drop me a comment with a link if you're using this code in a way you think is neat! If you're feeling generous, you can also donate to my ko-fi! I'm a freelancer, and while I will always provide free codes, we live in end-stage capitalist hell, so $$ is a big motivator.

This code is compatible with insanejournal.

Comments

[loyalwolfcodes]

Honestly, me, every time I see you putting new things out:

[10billionghosts]

Ahhhh 😭 THANK YOU
It thrills me that folks like my work. ;u; And I love all the ways I've seen ppl use them.

[loyalwolfcodes]

I can't build my own yet (still in that learning phase of pulling certain elements from multiple codes and shoving them together– I always credit, though!) but guuuhh you're stuff is so prettyyy, it speaks to my soul.

I actually took a piece of that checkered cast list and made a thread tracker from it.

[10billionghosts]

Oh nice!! You'll get there. ;u; I also learned back in the day by looking at how code was implemented. Eventually, it all starts clicking and omg it's such a great feeling when you realize YOU KNOW THIS. I still use W3Schools every time I make a code because I inevitably forget some function.

Ah! I've seen that around on other journals, and it's SUPER cute!

[loyalwolfcodes]

slides back in here to share this. I just... REALLY ENJOY PLAYING WITH YOUR CODES!! they're so nice and clean and easy to customize and swap things around and etc. (And it gives me practice since I'm looking to try to turn this into a career switch over the next year or so fjdksladj)

[10billionghosts]

VERY cool! I love it!! It has a very like official look to it. Very nice for an extensive game timeline. c:

Thank you SO much. I'm glad that my codes are intuitive to use and customize. That's always my goal. ;u; Good luck with the career hop!! I just did one, myself, at the beginning of this year and it's been scary but so, so worth it.

[loyalwolfcodes]

Ahh ty! And right! That's what my thought was, for a detailed game timeline and such.

You're so very welcome. Goal achieved, absolutely IMO. Thanks! I look forward to it, for sure. We'll see where I am this time next year~ ahaha I'm glad your own career journey has been worth it also! :D

P.S. I hope it's not annoying to keep finding me in your inbox all "look what I did :D" lmfao

[10billionghosts]

Heyyy no worries! I love getting comments and it's fun seeing what you've made. c: