apocalypsehowooc | {Game History Info Code (Reply)

I took a template and combined some other elements that I liked to make a game history/info page for Ainsley and figured I'd share the code in case anyone else wanted it. It's got 7 different "pages" that you can navigate via the arrows, and you can add or remove those pages as needed. The CR Chart is kind of stuck how it is, because....I fussed with it for like nearly 2hrs and that's what I got to work with he rest of the code lmfao otherwise, if something breaks, hmu, I can help you figure it out! <3

Super psyched to get started playing here with all y'all! <3

<lj-raw><center>

<div style="height:500px;overflow:hidden;font-family:calibri,sans-serif;font-size:12px;color:#222;text-align:justify;margin:0 0 7px 0;">

<a name="1"></a>
	<div style="height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;line-height:1.6;">

<a href="#7"><img src="https://i.imgur.com/Bh3m23o.png" style="margin:0 0 200px 0;"></a>

<div style="height:100%;width:610px;margin:0 20px;overflow:auto;background:#fff;border:1px solid rgba(0,0,0,0.15);border-top:0;padding:30px;box-sizing:border-box;">

<div style="font-family:georgia;font-size:18px;letter-spacing:4px;color:#000;text-align:center;margin:0 0 20px 0;text-transform:uppercase;">• BASIC INFO •</div>

<div style="display:flex;justify-content:space-between;margin:0 0 20px 0;">

<div style="width:calc(50% - 10px);background:rgba(0,0,0,0.05) url(IMG_URL)center;background-size:cover;border:10px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,0.15);box-sizing:border-box;"></div>

<div style="width:calc(50% - 10px);">

<div style="margin-top: 5px; margin-bottom: 5px;">
<b style="display:block;text-align:left;font-size:8px;text-transform:uppercase;letter-spacing:2px;">NAME HERE</b>
<div style="border-top: 1px solid #bec9d5; font-size: 10px; text-align: right; padding: 0px 2px; font-family: georgia; font-style: italic; letter-spacing: 3px;">FULL NAME</div>
</div>
<p>
<div style="margin-top: 5px; margin-bottom: 5px;">
<b style="display:block;text-align:left;font-size:8px;text-transform:uppercase;letter-spacing:2px;">NICKNAMES HERE</b>
<div style="border-top: 1px solid #bec9d5; font-size: 10px; text-align: right; padding: 0px 2px; font-family: georgia; font-style: italic; letter-spacing: 3px;">NICKNAME(S)</div>
</div>
<p>
<div style="margin-bottom: 5px;">
<b style="display:block;text-align:left;font-size:8px;text-transform:uppercase;letter-spacing:2px;">BIRTHDAY HERE</b>
<div style="border-top: 1px solid #bec9d5; font-size: 10px; text-align: right; padding: 0px 2px; font-family: georgia; font-style: italic; letter-spacing: 3px;">DOB</div>
</div>
<p>     
<div style="margin-bottom: 5px;">
<b style="display:block;text-align:left;font-size:8px;text-transform:uppercase;letter-spacing:2px;">##</b>
<div style="border-top: 1px solid #bec9d5; font-size: 10px; text-align: right; padding: 0px 2px; font-family: georgia; font-style: italic; letter-spacing: 3px;">AGE</div>
</div>
<p>
<div style="margin-bottom: 5px;">
<b style="display:block;text-align:left;font-size:8px;text-transform:uppercase;letter-spacing:2px;"><br>RESIDENCE HERE</b>
<div style="border-top: 1px solid #bec9d5; font-size: 10px; text-align: right; padding: 0px 2px; font-family: georgia; font-style: italic; letter-spacing: 3px;">RESIDENCE</div>
</div>
<p>       
<div style="margin-bottom: 5px;">
<b style="display:block;text-align:left;font-size:8px;text-transform:uppercase;letter-spacing:2px;">ROOMATES HERE</b>
<div style="border-top: 1px solid #bec9d5; font-size: 10px; text-align: right; padding: 0px 2px; font-family: georgia; font-style: italic; letter-spacing: 3px;">ROOMMATES</div>
</div>
<p>
<div style="margin-bottom: 5px;">
<b style="display:block;text-align:left;font-size:8px;text-transform:uppercase;letter-spacing:2px;">OCCUPATIN HERE</b>
<div style="border-top: 1px solid #bec9d5; font-size: 10px; text-align: right; padding: 0px 2px; font-family: georgia; font-style: italic; letter-spacing: 3px;">OCCUPATION</div>
</div>
<br><br>       
<div style="margin-bottom: 5px;">
<b style="display:block;text-align:left;font-size:8px;text-transform:uppercase;letter-spacing:2px;">CANON HERE</b>
<div style="border-top: 1px solid #bec9d5; font-size: 10px; text-align: right; padding: 0px 2px; font-family: georgia; font-style: italic; letter-spacing: 3px;">CANON</div>
</div>
<p>
<div style="margin-bottom: 5px;">
<b style="display:block;text-align:left;font-size:8px;text-transform:uppercase;letter-spacing:2px;">CANON POINT HERE</b>
<div style="border-top: 1px solid #bec9d5; font-size: 10px; text-align: right; padding: 0px 2px; font-family: georgia; font-style: italic; letter-spacing: 3px;">CANON POINT</div>
</div>
<p>
<div>
<b style="display:block;text-align:left;font-size:8px;text-transform:uppercase;letter-spacing:2px;">NAME HERE</b>
<div style="border-top: 1px solid #bec9d5; font-size: 10px; text-align: right; padding: 0px 2px; font-family: georgia; font-style: italic; letter-spacing: 3px;">PLAYER</div>
</div>

</div>

</div>
<hr>

<font size= "3px">QUICK SUMMARY</font><p>

!!YOUR SUMMARY HERE!!
      
		</div>

<a href="#2"><img src="https://i.imgur.com/XAJgCoR.png" style="margin:0 0 200px 0;"></a>

</div>

<a name="2"></a>
	<div style="height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;line-height:1.6;">

<a href="#1"><img src="https://i.imgur.com/Bh3m23o.png" style="margin:0 0 200px 0;"></a>

<div style="height:100%;width:610px;margin:0 20px;overflow:auto;background:#fff;border:1px solid rgba(0,0,0,0.15);border-top:0;padding:30px;box-sizing:border-box;">

<div style="font-family:georgia;font-size:18px;letter-spacing:4px;color:#000;text-align:center;margin:0 0 20px 0;text-transform:uppercase;">• FIRST IMPRESSIONS •</div>
      
            <center><div style="width: 345px; margin-right: 5px;">
      <div style="width: 345px; margin-right: 5px;">
<div style="margin-top: 20px; margin-bottom: 10px; text-align: center; background-color: #6f48bd; padding: 5px; color: #fff; font-family: georgia; font-size: 13px; font-weight: bold;text-transform:uppercase;">— visual —</div>

<div style="max-height: 200px; overflow-y: scroll;text-align:left;">
!!YOUR CONTENT HERE!!
</div>

</div>
      
            <div style="width: 345px; margin-right: 5px;">
<div style="margin-top: 20px; margin-bottom: 10px; text-align: center; background-color: #6f48bd; padding: 5px; color: #fff; font-family: georgia; font-size: 13px; font-weight: bold;text-transform:uppercase;">— AURAL —</div>

<div style="max-height: 200px; overflow-y: scroll;text-align:left;">
!!YOUR CONTENT HERE!!
</div>

</div>
          
                          <div style="width: 345px; margin-right: 5px;">
<div style="margin-top: 20px; margin-bottom: 10px; text-align: center; background-color: #6f48bd; padding: 5px; color: #fff; font-family: georgia; font-size: 13px; font-weight: bold;text-transform:uppercase;">— OLFACTORY —</div>

<div style="max-height: 200px; overflow-y: scroll;text-align:left;">
!!YOUR CONTENT HERE!!
</div>

</div>
              
                          <div style="width: 345px; margin-right: 5px;">
<div style="margin-top: 20px; margin-bottom: 10px; text-align: center; background-color: #6f48bd; padding: 5px; color: #fff; font-family: georgia; font-size: 13px; font-weight: bold;text-transform:uppercase;">— DEMEANOUR —</div>

<div style="max-height: 200px; overflow-y: scroll;text-align:left;">
!!YOUR CONTENT HERE!!
</div>

</div>
              
        </div>

</div>

<a href="#3"><img src="https://i.imgur.com/XAJgCoR.png" style="margin:0 0 200px 0;"></a>

</div>

<a name="3"></a>
	<div style="height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;line-height:1.6;">

<a href="#2"><img src="https://i.imgur.com/Bh3m23o.png" style="margin:0 0 200px 0;"></a>

<div style="height:100%;width:610px;margin:0 20px;overflow:auto;background:#fff;border:1px solid rgba(0,0,0,0.15);border-top:0;padding:30px;box-sizing:border-box;">

<div style="font-family:georgia;font-size:18px;letter-spacing:4px;color:#000;text-align:center;margin:0 0 20px 0;">• SKILLS & ABILITIES •</div>
      
            <center><div style="width: 345px; margin-right: 5px;">
      <div style="width: 345px; margin-right: 5px;">
<div style="margin-top: 20px; margin-bottom: 10px; text-align: center; background-color: #6f48bd; padding: 5px; color: #fff; font-family: georgia; font-size: 13px; font-weight: bold;text-transform:uppercase;">— TITLE —</div>

</div>
          
                          <div style="width: 345px; margin-right: 5px;">
<div style="margin-top: 20px; margin-bottom: 10px; text-align: center; background-color: #6f48bd; padding: 5px; color: #fff; font-family: georgia; font-size: 13px; font-weight: bold;text-transform:uppercase;">— title —</div>

</div>
              
                          <div style="width: 345px; margin-right: 5px;">
<div style="margin-top: 20px; margin-bottom: 10px; text-align: center; background-color: #6f48bd; padding: 5px; color: #fff; font-family: georgia; font-size: 13px; font-weight: bold;text-transform:uppercase;">— title —</div>

</div>
              
                          <div style="width: 345px; margin-right: 5px;">
<div style="margin-top: 20px; margin-bottom: 10px; text-align: center; background-color: #6f48bd; padding: 5px; color: #fff; font-family: georgia; font-size: 13px; font-weight: bold;text-transform:uppercase;">— title —</div>

</div>
        </div>

</div>

<a href="#4"><img src="https://i.imgur.com/XAJgCoR.png" style="margin:0 0 200px 0;"></a>

</div>

<a name="4"></a>
	<div style="height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;line-height:1.6;">

<a href="#3"><img src="https://i.imgur.com/Bh3m23o.png" style="margin:0 0 200px 0;"></a>

<div style="height:100%;width:610px;margin:0 20px;overflow:auto;background:#fff;border:1px solid rgba(0,0,0,0.15);border-top:0;padding:30px;box-sizing:border-box;">

<div style="font-family:georgia;font-size:18px;letter-spacing:4px;color:#000;text-align:center;margin:0 0 20px 0;text-transform:uppercase;">• INVENTORY •</div>

<center><div style="width: 345px; margin-right: 5px;">
      <div style="width: 345px; margin-right: 5px;">
<div style="margin-top: 20px; margin-bottom: 10px; text-align: center; background-color: #6f48bd; padding: 5px; color: #fff; font-family: georgia; font-size: 13px; font-weight: bold;text-transform:uppercase;">— UPON ARRIVAL —</div>

</div></div>

</div>

<a href="#5"><img src="https://i.imgur.com/XAJgCoR.png" style="margin:0 0 200px 0;"></a>

</div>

<a name="5"></a>
	<div style="height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;line-height:1.6;">

<a href="#4"><img src="https://i.imgur.com/Bh3m23o.png" style="margin:0 0 200px 0;"></a>

<div style="height:100%;width:610px;margin:0 20px;overflow:auto;background:#fff;border:1px solid rgba(0,0,0,0.15);border-top:0;padding:30px;box-sizing:border-box;">

<div style="font-family:georgia;font-size:18px;letter-spacing:4px;color:#000;text-align:center;margin:0 0 20px 0;text-transform:uppercase;">• Other Info •</div>

<center><div style="width: 345px; margin-right: 5px;">
<div style="margin-top: 20px; margin-bottom: 10px; text-align: center; background-color: #6f48bd; padding: 5px; color: #fff; font-family: georgia; font-size: 13px; font-weight: bold;text-transform:uppercase;">— RUMORS —</div>

<div style="max-height: 200px; overflow-y: scroll;text-align:left;">
<li>what might other characters have heard about yours?</li>
<li>these can be true or complete fabrications!</li>
</div>

</div>
      
      <div style="width: 345px; margin-right: 5px;">
<div style="margin-top: 20px; margin-bottom: 10px; text-align: center; background-color: #6f48bd; padding: 5px; color: #fff; font-family: georgia; font-size: 13px; font-weight: bold;text-transform:uppercase;">— HAUNTS —</div>

<div style="max-height: 200px; overflow-y: scroll;text-align:left;">
<li>where does your character hang out?</li>
<li>where can other characters run into your character?</li>
<li>you can also use this section to give descriptions of where they live and potentially work!</li>
</div>

</div>
  
        <div style="width: 345px; margin-right: 5px;">
<div style="margin-top: 20px; margin-bottom: 10px; text-align: center; background-color: #6f48bd; padding: 5px; color: #fff; font-family: georgia; font-size: 13px; font-weight: bold;text-transform:uppercase;">— NOTEABLE ACTIONS —</div>

<div style="max-height: 200px; overflow-y: scroll;text-align:left;">
<li>noteable things other characters might have noticed</li>
<li>things your character has done that people might still be talking about in the background</li>
  <li>be sure to include a note if you don't want people to ICly know it was your character</li>
</div>

</div>
  
          <div style="width: 345px; margin-right: 5px;">
<div style="margin-top: 20px; margin-bottom: 10px; text-align: center; background-color: #6f48bd; padding: 5px; color: #fff; font-family: georgia; font-size: 13px; font-weight: bold;text-transform:uppercase;">— ENTITY INFLUENCE —</div>

<b>Entity Affiliation:</b> <br> 
  <b>Affiliation Status:</b> Unaffiliated/Servant/Avatar<br><br>

<li>noteable things other characters might have noticed</li>
  <li>that specifically have to do with feeding your Entity</li>
</div>

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

<a href="#6"><img src="https://i.imgur.com/XAJgCoR.png" style="margin:0 0 200px 0;"></a>

</div>

<a name="6"></a>
	<div style="height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;line-height:1.6;">

<a href="#5"><img src="https://i.imgur.com/Bh3m23o.png" style="margin:0 0 200px 0;"></a>

<div style="height:100%;width:610px;margin:0 20px;overflow:auto;background:#fff;border:1px solid rgba(0,0,0,0.15);border-top:0;padding:30px;box-sizing:border-box;">

<div style="font-family:georgia;font-size:18px;letter-spacing:4px;color:#000;text-align:center;margin:0 0 20px 0;text-transform:uppercase;">• GAME TIMELINE •</div>
      
            <center><div style="width: 345px; margin-right: 5px;">
      <div style="width: 345px; margin-right: 5px;">
<div style="margin-top: 20px; margin-bottom: 10px; text-align: center; background-color: #6f48bd; padding: 5px; color: #fff; font-family: georgia; font-size: 13px; font-weight: bold;text-transform:uppercase;">— DATE —</div>

</div>
          
                          <div style="width: 345px; margin-right: 5px;">
<div style="margin-top: 20px; margin-bottom: 10px; text-align: center; background-color: #6f48bd; padding: 5px; color: #fff; font-family: georgia; font-size: 13px; font-weight: bold;text-transform:uppercase;">— DATE —</div>

</div>
              
                          <div style="width: 345px; margin-right: 5px;">
<div style="margin-top: 20px; margin-bottom: 10px; text-align: center; background-color: #6f48bd; padding: 5px; color: #fff; font-family: georgia; font-size: 13px; font-weight: bold;text-transform:uppercase;">— DATE —</div>

</div>
              
        </div>

</div>

<a href="#7"><img src="https://i.imgur.com/XAJgCoR.png" style="margin:0 0 200px 0;"></a>

</div>

<a name="7"></a>
	<div style="height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;line-height:1.6;">

<a href="#6"><img src="https://i.imgur.com/Bh3m23o.png" style="margin:0 0 200px 0;"></a>

<div style="height:100%;width:610px;margin:0 20px;overflow:auto;background:#fff;border:1px solid rgba(0,0,0,0.15);border-top:0;padding:30px;box-sizing:border-box;">

<div style="font-family:georgia;font-size:18px;letter-spacing:4px;color:#000;text-align:center;margin:0 0 20px 0;text-transform:uppercase;">• IMPORTANT CR •</div>
      
            <center><div style="width: 345px; margin-right: 5px;">
      <div style="width: 345px; margin-right: 5px;">
<div style="margin-top: 20px; margin-bottom: 10px; text-align: center; background-color: #6f48bd; padding: 5px; color: #fff; font-family: georgia; font-size: 13px; font-weight: bold;text-transform:uppercase;">— Key —</div>

<div style="max-height: 200px; overflow-y: scroll;text-align:left;">
💚 Positive | ❤️ Negative | 🧡 Neutral ⭐️ Closest CR<br> 
🏠 Roommate | 🧲 Friend | ⚡️ Acquaintance | 💕 Romantic<br>
💖 Flirt | ✨ Magic user | 🥂 Drinking buddies | ⚔️ Adventurer<br>
🔗 Entity ties
</div>
        <br>
        			
        
        
			<div style="display:flex;justify-content:space-between;margin:0 0 20px 0;">

💚<br>⭐️<div style="width:150px;background:rgba(0,0,0,0.05) url(IMG_URL)center;background-size:cover;border:10px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,0.15);box-sizing:border-box;"></div>

<div style="width:calc(50% - 10px);">

<div style="margin-top: 5px; margin-bottom: 5px;">
<b style="display:block;text-align:left;font-size:8px;text-transform:uppercase;letter-spacing:2px;">namehere</b>
<div style="border-top: 1px solid #bec9d5; font-size: 10px; text-align: right; padding: 0px 2px; font-family: georgia; font-style: italic; letter-spacing: 3px;">FULL NAME</div>
</div>
<p> 
<div style="margin-bottom: 5px;">
<b style="display:block;text-align:left;font-size:8px;text-transform:uppercase;letter-spacing:2px;">##</b>
<div style="border-top: 1px solid #bec9d5; font-size: 10px; text-align: right; padding: 0px 2px; font-family: georgia; font-style: italic; letter-spacing: 3px;">AGE</div>
</div>
<p>
<div style="margin-bottom: 5px;">
<b style="display:block;text-align:left;font-size:8px;text-transform:uppercase;letter-spacing:2px;">canonname</b>
<div style="border-top: 1px solid #bec9d5; font-size: 10px; text-align: right; padding: 0px 2px; font-family: georgia; font-style: italic; letter-spacing: 3px;">CANON</div>
</div>
<p>
<div style="margin-bottom: 5px;">
<b style="display:block;text-align:left;font-size:8px;text-transform:uppercase;letter-spacing:2px;">canonpointhere</b>
<div style="border-top: 1px solid #bec9d5; font-size: 10px; text-align: right; padding: 0px 2px; font-family: georgia; font-style: italic; letter-spacing: 3px;">CANON POINT</div>
</div>
<p>
<div>
<b style="display:block;text-align:left;font-size:8px;text-transform:uppercase;letter-spacing:2px;">NAME</b>
<div style="border-top: 1px solid #bec9d5; font-size: 10px; text-align: right; padding: 0px 2px; font-family: georgia; font-style: italic; letter-spacing: 3px;">PLAYER</div>
<p>  
<div style="font-size:12px;color:#111;letter-spacing:4px;font-weight:bold;border-top:4px solid rgba(0,0,0);text-transform:uppercase;"></div>
<div align="left"><b>CR SUMMARY</b><br>
  description</div>
</div>

</div>

</div>
        			
        
        
			<div style="display:flex;justify-content:space-between;margin:0 0 20px 0;">

🧡<br>⭐️<br>🏠<div style="width:150px;background:rgba(0,0,0,0.05) url(IMG_URL)center;background-size:cover;border:10px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,0.15);box-sizing:border-box;"></div>

<div style="width:calc(50% - 10px);">

</div>

</div>

</div>
        			
        
        
			<div style="display:flex;justify-content:space-between;margin:0 0 20px 0;">

🧡<br>🏠<div style="width:150px;background:rgba(0,0,0,0.05) url(IMG_URL)center;background-size:cover;border:10px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,0.15);box-sizing:border-box;"></div>

<div style="width:calc(50% - 10px);">

</div>

</div>
              
                      			
        
        
			<div style="display:flex;justify-content:space-between;margin:0 0 20px 0;">

<br><div style="width:150px;background:rgba(0,0,0,0.05) url(IMG_URL)center;background-size:cover;border:10px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,0.15);box-sizing:border-box;"></div>

<div style="width:calc(50% - 10px);">

</div>

</div>
              
                      			
        
        
			<div style="display:flex;justify-content:space-between;margin:0 0 20px 0;">

<div style="width:calc(50% - 10px);">

</div>

</div>
              
                      			
        
        
			<div style="display:flex;justify-content:space-between;margin:0 0 20px 0;">

<div style="width:calc(50% - 10px);">

</div>

<div style="display:flex;justify-content:space-between;margin:0 0 20px 0;">

<div style="width:calc(50% - 10px);">

</div>

</div>
        </div>

</div>

<a href="#1"><img src="https://i.imgur.com/XAJgCoR.png" style="margin:0 0 200px 0;"></a>

</div>

<center style="font-family:georgia;font-size:8px;letter-spacing:4px;color:#000;text-align:center;">•<a href="http://tessisamess.insanejournal.com/130969.html" style="text-decoration:none;color:#000;">CODE</a> • </center></lj-raw>

{Game History Info Code

Post a comment in response: