Calling Cards [Code + Example]

[thetonmods]

LADY AGATHA DANBURY
Bridgerton: A Queen Charlotte Story
Overall Reputation: 10+ | 20-

GATHERED CALLING CARDS...

MAY'S EXCURSIONS

An Evening with Lord Michael

Date Started: 5/21
Reputation: Positive
Thread Description: She'd been acting like sour milk [all on the floor]. It's your fault! You didn't shut the refrigerator!
Thread With: Michael Hartley
Thread Link: 💐

In The Garden

Date Started: 5/21
Reputation: Negative
Thread Description: They got caught smooching!
Thread With: Greta
Thread Link: 💐

Romping with Lord Isaac

Date Started: 5/21
Reputation: N/A
Thread Description: They banged.
Thread With: Isaac Tern
Thread Link: 💐

CODE
<center><BR><div style="width: 400px; height: 200px; border: solid #A77521 1px; box-shadow: 4px 4px #A77521; display: flex; flex-direction: row;"> <div style="width: 35%;"><div style="margin-left: 20px; margin-top: 10px; height: 180px; width: 100%; background: url(IMAGEHERE); background-size: cover; background-position: center; background-repeat: no-repeat;"></div></div> <div style="width: 65%; padding-left: 10px; padding-right: 10px; margin-top: 60px; font-family: didot, georgia;"> <span style="font-size: 16px;">CHARACTERNAME</span><BR> <span style="font-size: 11px; color: #A77521; font-weight: bold;">CANON</span><Br> <span style="font-size: 14px;">Overall Reputation: 0+ | 0- </span> </div> </div></center> <br> <br> <br> <center><span style="font-size: 26px; font-family: didot, georgia;">GATHERED <B>CALLING CARDS...</b></span></center> <br> <details> <summary style="font-size: 16px; font-family: didot, georgia; background-color:#A77521; padding: 10px; ">MONTHHERE EXCURSIONS</summary> <div style="display: flex; flex-direction: row; flex-wrap: wrap; width: 100%;gap: 10px 10px;"> <div style="font-size: 13px; font-family: times; padding: 10px; width: 30%;"> <span style="font-size: 16px; font-family: didot, georgia;">TITLEHERE</b></span> <div style="border-left: solid #A77521 3px; padding-left: 10px;"> <div style="height: 100px; width: 100%; background: url(GIFHERE); background-size: cover; background-position: center; background-repeat: no-repeat;"></div> <b>Date Started:</b> 00/00 <br><b>Reputation:</b> Positive/Negative/Neutral <br><b>Thread Description:</b> What happened! <br><b>Thread With:</b> Whomst? <br><b>Thread Link:</b> <a href="LINKHERE">💐</a> </div></div> <div style="font-size: 13px; font-family: times; padding: 10px; width: 30%;"> <span style="font-size: 16px; font-family: didot, georgia;">TITLEHERE</b></span> <div style="border-left: solid #A77521 3px; padding-left: 10px;"> <div style="height: 100px; width: 100%; background: url(GIFHERE); background-size: cover; background-position: center; background-repeat: no-repeat;"></div> <b>Date Started:</b> 00/00 <br><b>Reputation:</b> Positive/Negative/Neutral <br><b>Thread Description:</b> What happened! <br><b>Thread With:</b> Whomst? <br><b>Thread Link:</b> <a href="LINKHERE">💐</a> </div></div> <div style="font-size: 13px; font-family: times; padding: 10px; width: 30%;"> <span style="font-size: 16px; font-family: didot, georgia;">TITLEHERE</b></span> <div style="border-left: solid #A77521 3px; padding-left: 10px;"> <div style="height: 100px; width: 100%; background: url(GIFHERE); background-size: cover; background-position: center; background-repeat: no-repeat;"></div> <b>Date Started:</b> 00/00 <br><b>Reputation:</b> Positive/Negative/Neutral <br><b>Thread Description:</b> What happened! <br><b>Thread With:</b> Whomst? <br><b>Thread Link:</b> <a href="LINKHERE">💐</a> </div></div> <div style="font-size: 13px; font-family: times; padding: 10px; width: 30%;"> <span style="font-size: 16px; font-family: didot, georgia;">TITLEHERE</b></span> <div style="border-left: solid #A77521 3px; padding-left: 10px;"> <div style="height: 100px; width: 100%; background: url(GIFHERE); background-size: cover; background-position: center; background-repeat: no-repeat;"></div> <b>Date Started:</b> 00/00 <br><b>Reputation:</b> Positive/Negative/Neutral <br><b>Thread Description:</b> What happened! <br><b>Thread With:</b> Whomst? <br><b>Thread Link:</b> <a href="LINKHERE">💐</a> </div></div> <div style="font-size: 13px; font-family: times; padding: 10px; width: 30%;"> <span style="font-size: 16px; font-family: didot, georgia;">TITLEHERE</b></span> <div style="border-left: solid #A77521 3px; padding-left: 10px;"> <div style="height: 100px; width: 100%; background: url(GIFHERE); background-size: cover; background-position: center; background-repeat: no-repeat;"></div> <b>Date Started:</b> 00/00 <br><b>Reputation:</b> Positive/Negative/Neutral <br><b>Thread Description:</b> What happened! <br><b>Thread With:</b> Whomst? <br><b>Thread Link:</b> <a href="LINKHERE">💐</a> </div></div> <div style="font-size: 13px; font-family: times; padding: 10px; width: 30%;"> <span style="font-size: 16px; font-family: didot, georgia;">TITLEHERE</b></span> <div style="border-left: solid #A77521 3px; padding-left: 10px;"> <div style="height: 100px; width: 100%; background: url(GIFHERE); background-size: cover; background-position: center; background-repeat: no-repeat;"></div> <b>Date Started:</b> 00/00 <br><b>Reputation:</b> Positive/Negative/Neutral <br><b>Thread Description:</b> What happened! <br><b>Thread With:</b> Whomst? <br><b>Thread Link:</b> <a href="LINKHERE">💐</a> </div></div> <!---ADD A ROW BELOW---> <!---ADD A ROW ABOVE---> </details> <!---ADD A MONTH BELOW---> <!---ADD A MONTH ABOVE--->

ADD A ROW
<!---ADD A ROW ABOVE---> <div style="font-size: 13px; font-family: times; padding: 10px; width: 30%;"> <span style="font-size: 16px; font-family: didot, georgia;">TITLEHERE</b></span> <div style="border-left: solid #A77521 3px; padding-left: 10px;"> <div style="height: 100px; width: 100%; background: url(GIFHERE); background-size: cover; background-position: center; background-repeat: no-repeat;"></div> <b>Date Started:</b> 00/00 <br><b>Reputation:</b> Positive/Negative/Neutral <br><b>Thread Description:</b> What happened! <br><b>Thread With:</b> Whomst? <br><b>Thread Link:</b> <a href="LINKHERE">💐</a> </div></div> <div style="font-size: 13px; font-family: times; padding: 10px; width: 30%;"> <span style="font-size: 16px; font-family: didot, georgia;">TITLEHERE</b></span> <div style="border-left: solid #A77521 3px; padding-left: 10px;"> <div style="height: 100px; width: 100%; background: url(GIFHERE); background-size: cover; background-position: center; background-repeat: no-repeat;"></div> <b>Date Started:</b> 00/00 <br><b>Reputation:</b> Positive/Negative/Neutral <br><b>Thread Description:</b> What happened! <br><b>Thread With:</b> Whomst? <br><b>Thread Link:</b> <a href="LINKHERE">💐</a> </div></div> <div style="font-size: 13px; font-family: times; padding: 10px; width: 30%;"> <span style="font-size: 16px; font-family: didot, georgia;">TITLEHERE</b></span> <div style="border-left: solid #A77521 3px; padding-left: 10px;"> <div style="height: 100px; width: 100%; background: url(GIFHERE); background-size: cover; background-position: center; background-repeat: no-repeat;"></div> <b>Date Started:</b> 00/00 <br><b>Reputation:</b> Positive/Negative/Neutral <br><b>Thread Description:</b> What happened! <br><b>Thread With:</b> Whomst? <br><b>Thread Link:</b> <a href="LINKHERE">💐</a> </div></div> <!---ADD A ROW BELOW--->

ADD A MONTH
<br> <!---ADD A MONTH ABOVE---> <details> <summary style="font-size: 16px; font-family: didot, georgia; background-color:#A77521; padding: 10px; ">MONTHHERE EXCURSIONS</summary> <div style="display: flex; flex-direction: row; flex-wrap: wrap; width: 100%;gap: 10px 10px;"> <div style="font-size: 13px; font-family: times; padding: 10px; width: 30%;"> <span style="font-size: 16px; font-family: didot, georgia;">TITLEHERE</b></span> <div style="border-left: solid #A77521 3px; padding-left: 10px;"> <div style="height: 100px; width: 100%; background: url(GIFHERE); background-size: cover; background-position: center; background-repeat: no-repeat;"></div> <b>Date Started:</b> 00/00 <br><b>Reputation:</b> Positive/Negative/Neutral <br><b>Thread Description:</b> What happened! <br><b>Thread With:</b> Whomst? <br><b>Thread Link:</b> <a href="LINKHERE">💐</a> </div></div> <div style="font-size: 13px; font-family: times; padding: 10px; width: 30%;"> <span style="font-size: 16px; font-family: didot, georgia;">TITLEHERE</b></span> <div style="border-left: solid #A77521 3px; padding-left: 10px;"> <div style="height: 100px; width: 100%; background: url(GIFHERE); background-size: cover; background-position: center; background-repeat: no-repeat;"></div> <b>Date Started:</b> 00/00 <br><b>Reputation:</b> Positive/Negative/Neutral <br><b>Thread Description:</b> What happened! <br><b>Thread With:</b> Whomst? <br><b>Thread Link:</b> <a href="LINKHERE">💐</a> </div></div> <div style="font-size: 13px; font-family: times; padding: 10px; width: 30%;"> <span style="font-size: 16px; font-family: didot, georgia;">TITLEHERE</b></span> <div style="border-left: solid #A77521 3px; padding-left: 10px;"> <div style="height: 100px; width: 100%; background: url(GIFHERE); background-size: cover; background-position: center; background-repeat: no-repeat;"></div> <b>Date Started:</b> 00/00 <br><b>Reputation:</b> Positive/Negative/Neutral <br><b>Thread Description:</b> What happened! <br><b>Thread With:</b> Whomst? <br><b>Thread Link:</b> <a href="LINKHERE">💐</a> </div></div> <div style="font-size: 13px; font-family: times; padding: 10px; width: 30%;"> <span style="font-size: 16px; font-family: didot, georgia;">TITLEHERE</b></span> <div style="border-left: solid #A77521 3px; padding-left: 10px;"> <div style="height: 100px; width: 100%; background: url(GIFHERE); background-size: cover; background-position: center; background-repeat: no-repeat;"></div> <b>Date Started:</b> 00/00 <br><b>Reputation:</b> Positive/Negative/Neutral <br><b>Thread Description:</b> What happened! <br><b>Thread With:</b> Whomst? <br><b>Thread Link:</b> <a href="LINKHERE">💐</a> </div></div> <div style="font-size: 13px; font-family: times; padding: 10px; width: 30%;"> <span style="font-size: 16px; font-family: didot, georgia;">TITLEHERE</b></span> <div style="border-left: solid #A77521 3px; padding-left: 10px;"> <div style="height: 100px; width: 100%; background: url(GIFHERE); background-size: cover; background-position: center; background-repeat: no-repeat;"></div> <b>Date Started:</b> 00/00 <br><b>Reputation:</b> Positive/Negative/Neutral <br><b>Thread Description:</b> What happened! <br><b>Thread With:</b> Whomst? <br><b>Thread Link:</b> <a href="LINKHERE">💐</a> </div></div> <div style="font-size: 13px; font-family: times; padding: 10px; width: 30%;"> <span style="font-size: 16px; font-family: didot, georgia;">TITLEHERE</b></span> <div style="border-left: solid #A77521 3px; padding-left: 10px;"> <div style="height: 100px; width: 100%; background: url(GIFHERE); background-size: cover; background-position: center; background-repeat: no-repeat;"></div> <b>Date Started:</b> 00/00 <br><b>Reputation:</b> Positive/Negative/Neutral <br><b>Thread Description:</b> What happened! <br><b>Thread With:</b> Whomst? <br><b>Thread Link:</b> <a href="LINKHERE">💐</a> </div></div> <!---ADD A ROW BELOW---> <!---ADD A ROW ABOVE---> </details> <!---ADD A MONTH BELOW--->