Chronicler Logo Chronicler
Template

A medieval tapestry styled country template

Xavier Twinkletoes · · 8 min read
chroniclerloretemplateworldbuildingcolumnsstatblockwikifooterhtml
A medieval tapestry styled country template

Does not work with infoboxes

adjust colours, fonts etc however you want :3


<!-- WHOLE CONTAINER (Aligns everything to the left) -->
<div style="display: flex; gap: 30px; align-items: flex-start; margin: 50px 0; font-family: 'Times New Roman', serif;">

  <!-- 1. MAIN-TAPESTRY (Left) -->
  <div style="width: 750px; position: relative; padding-top: 40px;">
    <!-- GOLDEN ROD (Main) -->
    <div style="position: absolute; top: 0; left: 2%; right: 2%; height: 14px; background: linear-gradient(to bottom, #fdf5e6, #d4af37, #8a6d1d); border-radius: 10px; z-index: 10; border: 1px solid #5d4a13;">
      <div style="position: absolute; left: -25px; top: -12px; width: 38px; height: 38px; background: radial-gradient(circle, #fdf5e6, #d4af37, #8a6d1d); border-radius: 50%; border: 3px solid #5d4a13;"></div>
      <div style="position: absolute; right: -25px; top: -12px; width: 38px; height: 38px; background: radial-gradient(circle, #fdf5e6, #d4af37, #8a6d1d); border-radius: 50%; border: 3px solid #5d4a13;"></div>
    </div>
    <!-- BODY (Main) -->
    <div style="background: #274F42; background-image: radial-gradient(circle at 50% 50%, #183028 0%, #274F42 100%); color: #fdf5e6; padding: 70px 40px 100px 40px; border-left: 8px double #d4af37; border-right: 8px double #d4af37; border-top: 2px solid #d4af37; clip-path: polygon(0% 0%, 100% 0%, 100% 95%, 50% 100%, 0% 95%);">
       <div style="text-align: center; border-bottom: 3px double #d4af37; padding-bottom: 25px; margin-bottom: 40px;">
          <div style="font-size: 3.5rem; font-weight: bold; color: #fff; text-shadow: 0 0 25px rgba(212,175,55,0.6);">World Name</div>
       </div>
       <!-- Land Info (Stats, Trade etc.) -->
       <div style="text-align: center; opacity: 2; border: 1px dashed #d4af37; padding: 50px;">
         <!-- HEADER SECTION -->
  <div style="text-align: center; border-bottom: 3px double #d4af37; padding-bottom: 25px; margin-bottom: 40px;">
      <div style="font-size: 0.9rem; letter-spacing: 10px; color: #d4af37; text-transform: uppercase; opacity: 0.8;">The Royal Imperial Registry</div>
      <div style="font-size: 4rem; font-weight: bold; color: #fff; text-shadow: 2px 2px 0px #8a6d1d, 0 0 25px rgba(212,175,55,0.6); margin: 10px 0;">Country Name</div>
      <div style="font-style: italic; color: #d4af37; font-size: 1.1rem; letter-spacing: 2px;">"Country Motto"</div>
    </div>

  <!-- MAIN CONTENT GRID -->
  <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 40px;">
      
  <!-- LEFT COLUMN -->
  <div style="display: flex; flex-direction: column; gap: 25px;">
        
  <!-- VITAL STATISTICS GRID -->
  <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;">
          <div style="border: 1px solid #d4af37; background: rgba(0,0,0,0.3); padding: 10px; text-align: center; border-radius: 4px;">
            <div style="color: #d4af37; font-size: 9px; text-transform: uppercase; border-bottom: 1px solid rgba(212,175,55,0.3); margin-bottom: 5px;">Region</div>
            <div style="font-weight: bold;">
Placeholder </div>
          </div>
          <div style="border: 1px solid #d4af37; background: rgba(0,0,0,0.3); padding: 10px; text-align: center; border-radius: 4px;">
            <div style="color: #d4af37; font-size: 9px; text-transform: uppercase; border-bottom: 1px solid rgba(212,175,55,0.3); margin-bottom: 5px;">Area</div>
            <div style="font-weight: bold;">Placeholder</div>
          </div>
          <div style="border: 1px solid #d4af37; background: rgba(0,0,0,0.3); padding: 10px; text-align: center; border-radius: 4px;">
            <div style="color: #d4af37; font-size: 9px; text-transform: uppercase; border-bottom: 1px solid rgba(212,175,55,0.3); margin-bottom: 5px;">Government</div>
            <div style="font-weight: bold;">Placeholder</div>
          </div>
          <div style="border: 1px solid #d4af37; background: rgba(0,0,0,0.3); padding: 10px; text-align: center; border-radius: 4px;">
            <div style="color: #d4af37; font-size: 9px; text-transform: uppercase; border-bottom: 1px solid rgba(212,175,55,0.3); margin-bottom: 5px;">Capital</div>
            <div style="font-weight: bold;">Placeholder</div>
          </div>
          <div style="border: 1px solid #d4af37; background: rgba(0,0,0,0.3); padding: 10px; text-align: center; border-radius: 4px;">
            <div style="color: #d4af37; font-size: 9px; text-transform: uppercase; border-bottom: 1px solid rgba(212,175,55,0.3); margin-bottom: 5px;">Alignment</div>
            <div style="font-weight: bold;">Placeholder</div>
          </div>
          <div style="border: 1px solid #d4af37; background: rgba(0,0,0,0.3); padding: 10px; text-align: center; border-radius: 4px;">
            <div style="color: #d4af37; font-size: 9px; text-transform: uppercase; border-bottom: 1px solid rgba(212,175,55,0.3); margin-bottom: 5px;">Language</div>
            <div style="font-weight: bold;">Placeholder</div>
          </div>
        </div>

  <!-- MILITARY & DEFENSE -->
  <div style="border: 2px solid #d4af37; background: rgba(138, 109, 29, 0.1); padding: 20px; border-radius: 8px;">
          <div style="font-size: 14px; color: #d4af37; font-weight: bold; border-bottom: 1px solid #d4af37; margin-bottom: 15px; letter-spacing: 2px; text-align: center;">⚔ MILITARY MIGHT</div>
          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
            <span>Army Strength:</span>
            <span style="font-weight: bold;">Low</span>
          </div>
          <div style="height: 10px; background: #000; border-radius: 5px; overflow: hidden; border: 1px solid #d4af37; margin-bottom: 15px;">
            <!-- Adjust bar here -->
  <div style="width: 65%; height: 100%; background: linear-gradient(to right, #d4af37, #fff);"></div>
          </div>
          <div style="font-size: 12px; opacity: 0.9;">
            <b>Elite Units:</b> Placeholder<br>
            <b>Defenses:</b> Placeholder
          </div>
        </div>

  <!-- ECONOMY & TRADE -->
  <div style="border: 1px solid #d4af37; background: rgba(0,0,0,0.3); padding: 20px;">
          <div style="color: #d4af37; font-weight: bold; font-size: 13px; text-align: center; margin-bottom: 10px;">💰 MERCANTILE & RESOURCES</div>
          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; font-size: 12px;">
            <div>
              <b style="color: #d4af37;">Primary Exports:</b><br>
              ⚜ Placeholder<br>⚜ Placeholder<br>⚜ Placeholder
            </div>
            <div>
              <b style="color: #d4af37;">Primary Imports:</b><br>
              ⚜ Placeholder<br>⚜ Placeholder<br>⚜ Placeholder
            </div>
          </div>
          <div style="margin-top: 10px; border-top: 1px solid rgba(212,175,55,0.2); padding-top: 10px; font-size: 12px;">
            <b>Currency:</b> Placeholder
          </div>
        </div>
   </div>

  <!-- RIGHT COLUMN -->
   <div style="display: flex; flex-direction: column; gap: 25px;">
      
   <!-- PARCHMENT: SOCIETY & CULTURE -->
  <div style="background: #fdf5e6; color: #1a1a1a; padding: 25px; border-radius: 3px; border: 1px solid #c5b358; box-shadow: 5px 5px 15px rgba(0,0,0,0.4);">
          <div style="font-size: 1.4rem; font-weight: bold; border-bottom: 2px solid #1a1a1a; margin-bottom: 15px; font-variant: small-caps;">Society & Faith</div>
          
  <div style="font-size: 13px; line-height: 1.6;">
          <div style="margin-bottom: 10px;">
              <b style="text-transform: uppercase; font-size: 10px; color: #8a6d1d;">Races & Peoples:</b><br>           
Placeholder
            </div>
            <div style="margin-bottom: 10px;">
              <b style="text-transform: uppercase; font-size: 10px; color: #8a6d1d;">Religions & Deities:</b><br>
             Placeholder
            </div>
            <div>
              <b style="text-transform: uppercase; font-size: 10px; color: #8a6d1d;">Social Structure:</b><br>
             Placeholder
            </div>
          </div>
        </div>

   <!-- DIPLOMACY & RELATIONS -->
  <div style="border: 2px solid #d4af37; padding: 20px; background: rgba(0,0,0,0.3);">
          <div style="color: #d4af37; font-weight: bold; text-align: center; border-bottom: 1px solid #d4af37; margin-bottom: 15px;">🤝 DIPLOMATIC STANDING</div>
          <div style="font-size: 12px;">
            <b style="color: #d4af37;">Allies:</b>Placeholder <br>
            <b style="color: #d4af37;">Enemies:</b>Placeholder<br>
            <b style="color: #d4af37;">Trade Partners:</b> Placeholder
          </div>
        </div>

  <!-- KEY FIGURES / LEADERSHIP -->
   <div style="border: 1px solid #d4af37; padding: 15px; background: rgba(0,26,51,0.5);">
          <div style="color: #d4af37; font-size: 11px; text-transform: uppercase; letter-spacing: 2px; text-align: center; margin-bottom: 10px;">👑 Eminent Figures</div>
          <div style="display: flex; flex-direction: column; gap: 8px; font-size: 12px;">
            <div style="display: flex; justify-content: space-between; border-bottom: 1px solid rgba(212,175,55,0.1);">
              <span>The Sovereign:</span><br><b>Placeholder</b>
            </div>
            <div style="display: flex; justify-content: space-between; border-bottom: 1px solid rgba(212,175,55,0.1);">
              <span>High Priest/Magus:</span><br><b> Placeholder</b>
            </div>
            <div style="display: flex; justify-content: space-between;">
              <span>Grand Marshal:</span><br><b>Placeholder</b>
            </div>
          </div>
        </div>
  </div>
    </div>

   <!-- FOOTER / STABILITY -->
  <div style="margin-top: 50px; display: flex; justify-content: space-around; align-items: center; border-top: 1px solid rgba(212,175,55,0.3); padding-top: 20px;">
      <div style="text-align: center;">
        <div style="font-size: 10px; color: #d4af37;">STABILITY INDEX</div>
        <div style="font-size: 20px; font-weight: bold;">50%</div>
      </div>
      <div style="text-align: center;">
        <div style="font-size: 10px; color: #d4af37;">MAGIC LEVEL</div>
        <div style="font-size: 20px; font-weight: bold;">Placeholder</div>
      </div>
      <div style="text-align: center;">
        <div style="font-size: 10px; color: #d4af37;">TECH ERA</div>
        <div style="font-size: 20px; font-weight: bold;">Placeholder</div>    
  </div>
    </div>
  </div>

   </div>
<!-- TASSELS -->
  <div style="display: flex; justify-content: space-between; padding: 0 10%; margin-top: -15px; position: relative; z-index: 5;">
    <div style="width: 6px; height: 50px; background: #8a6d1d; border: 1px solid #d4af37; border-radius: 0 0 10px 10px;"></div>
    <div style="width: 6px; height: 50px; background: #8a6d1d; border: 1px solid #d4af37; border-radius: 0 0 10px 10px;"></div>
    <div style="width: 6px; height: 50px; background: #8a6d1d; border: 1px solid #d4af37; border-radius: 0 0 10px 10px;"></div>
    <div style="width: 6px; height: 50px; background: #8a6d1d; border: 1px solid #d4af37; border-radius: 0 0 10px 10px;"></div>
  </div>
</div>

  






<!-- RIGHT COLUMN (Forces containers below eachother) -->
<div style="display: flex; flex-direction: column; gap: 20px; width: 820px; align-items: stretch;">

  <!-- 1. GALLERY/ FLAG BANNER -->
  <div style="background: #0d1a12; border: 2px solid #d4af37; padding: 20px; clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 50% 100%, 0% 90%); text-align: center;">
    <div style="font-size: 0.7rem; letter-spacing: 5px; color: #d4af37; text-transform: uppercase; border-bottom: 1px solid rgba(212,175,55,0.3); margin-bottom: 15px; padding-bottom: 5px;">Map</div>
    <div style="border: 1px solid #d4af37; padding: 5px; background: rgba(0,0,0,0.3);">
       <!-- Flag picture -->
       <img src="Add picture here" style="width: 100%; display: block;">
    </div>
    <div style="margin-top: 15px; font-style: italic; color: #d4af37; font-size: 11px;">"Woven in gold, etched in blood."</div>
  </div>

  <!-- 2. GOVERNMENT -->
  <div style="background: #0d1a12; border: 2px solid #d4af37; padding: 15px; display: flex; align-items: center; gap: 15px; border-radius: 2px; box-shadow: 0 5px 15px rgba(0,0,0,0.3);">
    <!-- Icon links -->
    <div style="flex: 0 0 40px; height: 40px; border: 1px solid #d4af37; display: flex; align-items: center; justify-content: center; background: rgba(212,175,55,0.1);">
      <span style="color: #d4af37; font-size: 1.2rem;">⚜</span>
    </div>
    <!-- Text to the right -->
    <div style="flex: 1; border-left: 1px solid rgba(212,175,55,0.3); padding-left: 15px;">
      <div style="font-size: 0.6rem; letter-spacing: 2px; color: #d4af37; text-transform: uppercase;">Government</div>
      <div style="color: #fdf5e6; font-size: 13px; font-weight: bold;">Placeholder</div>
    </div>
  </div>

  <!-- 3. GEOGRAPHY -->
  <div style="background: #fdf5e6; color: #1a1a1a; padding: 20px; border: 1px solid #c5b358; box-shadow: 5px 5px 15px rgba(0,0,0,0.3);">
    <div style="font-size: 1.2rem; font-weight: bold; border-bottom: 2px solid #1a1a1a; margin-bottom: 10px; font-variant: small-caps; text-align: center;">Geography</div>
    <div style="font-size: 12px; text-align: center;">
      Placeholder
      <br>
      <br>
Other Locations:<br>
Placeholder
    </div>
  </div>

  <!-- 4. PEOPLE AND CULTURE -->
  <div style="background: #366D5C; color: White; padding: 20px; border: 1px solid #c5b358; box-shadow: 5px 5px 15px rgba(0,0,0,0.3);">
    <div style="font-size: 1.2rem; font-weight: bold; border-bottom: 2px solid #1a1a1a; margin-bottom: 10px; font-variant: small-caps; text-align: center;">People and Culture</div>
    <div style="font-size: 12px; text-align: center;">
Placeholder
    </div>
  </div>

 <!-- 5. SOCIETY -->
  <div style="background: #0d1a12; border: 2px solid #d4af37; padding: 15px; display: flex; align-items: center; gap: 15px; border-radius: 2px; box-shadow: 0 5px 15px rgba(0,0,0,0.3);">
    <!-- Icon links -->
    <div style="flex: 0 0 40px; height: 40px; border: 1px solid #d4af37; display: flex; align-items: center; justify-content: center; background: rgba(212,175,55,0.1);">
      <span style="color: #d4af37; font-size: 1.2rem;">⚜</span>
    </div>
    <!-- Text to the right -->
    <div style="flex: 1; border-left: 1px solid rgba(212,175,55,0.3); padding-left: 15px;">
      <div style="font-size: 0.6rem; letter-spacing: 2px; color: #d4af37; text-transform: uppercase;">Society </div>
      <div style="color: #fdf5e6; font-size: 13px; font-weight: bold;">Placeholder</div>
    </div>
  </div>
  <div style="background: #fdf5e6; color: #1a1a1a; padding: 20px; border: 1px solid #c5b358; box-shadow: 5px 5px 15px rgba(0,0,0,0.3);">
    <div style="font-size: 1.2rem; font-weight: bold; border-bottom: 2px solid #1a1a1a; margin-bottom: 10px; font-variant: small-caps; text-align: center;">Military</div>
    <div style="font-size: 12px; text-align: center;">
Placeholder
    </div>
  </div>
<div style="margin-top: 10px; width: 100%; border: 1px solid #d4af37; background: rgba(0,0,0,0.4); border-radius: 4px; overflow: hidden;">
  <table style="width: 100%; border-collapse: collapse; font-size: 11px; text-align: center; color: #fdf5e6;">
    <thead style="background: rgba(212, 175, 55, 0.2); color: #d4af37; text-transform: uppercase; letter-spacing: 1px;">
      <tr>
        <th style="padding: 12px; border-bottom: 2px solid #d4af37;">Capitals</th>
        <th style="padding: 12px; border-bottom: 2px solid #d4af37;">Forts</th>
        <th style="padding: 12px; border-bottom: 2px solid #d4af37;">Cities</th>
        <th style="padding: 12px; border-bottom: 2px solid #d4af37;">Towns</th>
        <th style="padding: 12px; border-bottom: 2px solid #d4af37;">Villages</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td style="padding: 10px; border-bottom: 1px solid rgba(212,175,55,0.2);">Placeholder</td>
        <td style="padding: 10px; border-bottom: 1px solid rgba(212,175,55,0.2);">Placeholder</td>
        <td style="padding: 10px; border-bottom: 1px solid rgba(212,175,55,0.2);">Placeholder</td>
        <td style="padding: 10px; border-bottom: 1px solid rgba(212,175,55,0.2);">Placeholder</td>
        <td style="padding: 10px; border-bottom: 1px solid rgba(212,175,55,0.2);">Placeholder</td>
      </tr>
    </tbody>
  </table>
</div>
<div>
<div>
  </div>
Log in to like

Comments (1)

Log in to join the conversation.
C
CookiesFate Mar 27, 2026, 10:17 PM

This is so beautiful and super complex to look at haha Thank you for sharing! I copied it without shame :p

Related Posts

Columns Code

Columns Code

An HTML code block that will allow you to create two or more columns of text on a page.

Footer Template

Footer Template

An HTML template for a wikipedia-style footer which can be inserted onto pages for quick navigation.

Navbar Template

Navbar Template

A horizontal navbar to be put at the top of the page that can cycle between pages.

← Back to Community