Species Template by Odyssey

Heavily inspired by Xavier Twinkletoes templates.

This species template includes such inputs as:

- Nature & Behaviour

• Physical Description
• Habitat & Range
• Diet & Hunting
• Social Structure
• Interaction with Civilisation
• Myths & Folklore

- Image box

- Taxonomy

(Kingdom, Phylum, Class, Order, Family, Genus)

- Key Traits

• Size
• Weight
• Lifespan
• Alignment
• Habitat

You are free to do whatever you want with this template.

This template looks better for dark themes. Tell me if you want the version with adjusted colors for light themes.

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

  <!-- LEFT: DETAILED BESTIARY ENTRY -->
  <div style="width: 650px; position: relative; padding-top: 40px;">
    <!-- WOOD / BRONZE ROD -->
    <div style="position: absolute; top: 0; left: 2%; right: 2%; height: 14px; background: linear-gradient(to bottom, #6B4E31, #8B6914, #3E2B1C); 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, #8B6914, #6B4E31, #3E2B1C); border-radius: 50%; border: 3px solid #5D4A13;"></div>
      <div style="position: absolute; right: -25px; top: -12px; width: 38px; height: 38px; background: radial-gradient(circle, #8B6914, #6B4E31, #3E2B1C); border-radius: 50%; border: 3px solid #5D4A13;"></div>
    </div>
    <!-- MAIN BODY (Forest Green tones) -->
    <div style="background: #1E4D2B; background-image: radial-gradient(circle at 50% 50%, #0F3B1A 0%, #1E4D2B 100%); color: #f0e6d2; padding: 70px 40px 100px 40px; border-left: 8px double #C39B44; border-right: 8px double #C39B44; border-top: 2px solid #C39B44; clip-path: polygon(0% 0%, 100% 0%, 100% 95%, 50% 100%, 0% 95%);">
      <div style="text-align: center; border-bottom: 3px double #C39B44; padding-bottom: 25px; margin-bottom: 40px;">
        <div style="font-size: 3.5rem; font-weight: bold; color: #fff; text-shadow: 0 0 25px rgba(195,155,68,0.6);">Bestiarium Imperium</div>
      </div>
      <!-- SPECIES HEADER -->
      <div style="text-align: center; border-bottom: 3px double #C39B44; padding-bottom: 25px; margin-bottom: 40px;">
        <div style="font-size: 0.9rem; letter-spacing: 10px; color: #C39B44; text-transform: uppercase; opacity: 0.8;">The Beasts of the World</div>
        <div style="font-size: 4rem; font-weight: bold; color: #fff; text-shadow: 2px 2px 0px #8a6d1d, 0 0 25px rgba(195,155,68,0.6); margin: 10px 0;">Species Name</div>
        <div style="font-style: italic; color: #C39B44; font-size: 1.1rem; letter-spacing: 2px;">"Roar of the wild, whisper of the woods."</div>
      </div>

    <!-- DETAILED DESCRIPTION (Parchment scroll) --><div style="background: #f5e6ca; 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;">Nature &amp; Behaviour</div><div style="font-size: 13px; line-height: 1.6;"><p><b>Physical Description:</b> [Placeholder]</p><p><b>Habitat &amp; Range:</b> [Placeholder]</p><p><b>Diet &amp; Hunting:</b> [Placeholder]</p><p><b>Social Structure:</b> [Placeholder]</p><p><b>Interaction with Civilisation:</b> [Placeholder]</p><p><b>Myths &amp; Folklore:</b> [Placeholder]</p></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: #3E2B1C; border: 1px solid #8B6914; border-radius: 0 0 10px 10px;"></div>
      <div style="width: 6px; height: 50px; background: #3E2B1C; border: 1px solid #8B6914; border-radius: 0 0 10px 10px;"></div>
      <div style="width: 6px; height: 50px; background: #3E2B1C; border: 1px solid #8B6914; border-radius: 0 0 10px 10px;"></div>
      <div style="width: 6px; height: 50px; background: #3E2B1C; border: 1px solid #8B6914; border-radius: 0 0 10px 10px;"></div>
    </div>
  </div>

  <!-- RIGHT COLUMN – COMPACT SPECIES INFOBOX -->
  <div style="display: flex; flex-direction: column; gap: 20px; width: 500px; align-items: stretch;">
    
  <!-- IMAGE BOX -->
   <div style="background: #1A2E1E; border: 2px solid #C39B44; 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: #C39B44; text-transform: uppercase; border-bottom: 1px solid rgba(195,155,68,0.3); margin-bottom: 15px; padding-bottom: 5px;">Specimen Illustration</div>
      <div style="border: 1px solid #C39B44; padding: 5px; background: rgba(0,0,0,0.3);">
        <!-- Species image -->
          ![[Yourimage.png]]
          </div>
      <div style="margin-top: 15px; font-style: italic; color: #C39B44; font-size: 11px;">"Known by claw and fang."</div>
    </div>

    <!-- TAXONOMY TABLE  -->
    <div style="background: #1A2E1E; border: 2px solid #C39B44; padding: 20px; border-radius: 2px; box-shadow: 0 5px 15px rgba(0,0,0,0.4);"><div style="font-size: 0.75rem; letter-spacing: 5px; color: #C39B44; text-transform: uppercase; text-align: center; border-bottom: 1px solid rgba(195,155,68,0.2); margin-bottom: 15px; padding-bottom: 10px;">Taxonomy</div><table style="width: 100%; border-collapse: collapse; font-size: 13px; font-family: 'Times New Roman', serif;"><tr>
      
      <!-- Kingdom — Light Blue -->
          <td style="padding: 10px 16px; background: #ADD8E6; color: #0a2a3a; font-weight: bold; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; width: 38%; border-bottom: 2px solid #0f0b04;">Kingdom</td>
          <td style="padding: 10px 16px; background: rgba(173,216,230,0.15); color: #e8dcc8; border-bottom: 2px solid #0f0b04; border-left: 3px solid #ADD8E6;">Placeholder</td>
        </tr>

        <!-- Phylum — Teal -->
        <tr>
          <td style="padding: 10px 16px; background: #4DB6AC; color: #021a18; font-weight: bold; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; border-bottom: 2px solid #0f0b04;">Phylum</td>
          <td style="padding: 10px 16px; background: rgba(77,182,172,0.12); color: #e8dcc8; border-bottom: 2px solid #0f0b04; border-left: 3px solid #4DB6AC;">Placeholder</td>
        </tr>

        <!-- Class — Green -->
        <tr>
          <td style="padding: 10px 16px; background: #4CAF50; color: #021408; font-weight: bold; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; border-bottom: 2px solid #0f0b04;">Class</td>
          <td style="padding: 10px 16px; background: rgba(76,175,80,0.12); color: #e8dcc8; border-bottom: 2px solid #0f0b04; border-left: 3px solid #4CAF50;">Placeholder</td>
        </tr>

        <!-- Order — Light Green -->
        <tr>
          <td style="padding: 10px 16px; background: #8BC34A; color: #1a2a04; font-weight: bold; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; border-bottom: 2px solid #0f0b04;">Order</td>
          <td style="padding: 10px 16px; background: rgba(139,195,74,0.12); color: #e8dcc8; border-bottom: 2px solid #0f0b04; border-left: 3px solid #8BC34A;">Placeholder</td>
        </tr>

        <!-- Family — Yellow -->
        <tr>
          <td style="padding: 10px 16px; background: #FFD740; color: #2a2000; font-weight: bold; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; border-bottom: 2px solid #0f0b04;">Family</td>
          <td style="padding: 10px 16px; background: rgba(255,215,64,0.10); color: #e8dcc8; border-bottom: 2px solid #0f0b04; border-left: 3px solid #FFD740;">Placeholder</td>
        </tr>

        <!-- Genus — Orange -->
        <tr>
          <td style="padding: 10px 16px; background: #FF7043; color: #2a0800; font-weight: bold; font-size: 11px; text-transform: uppercase; letter-spacing: 1px;">Genus</td>
          <td style="padding: 10px 16px; background: rgba(255,112,67,0.12); color: #e8dcc8; border-left: 3px solid #FF7043; font-style: italic;">Placeholder species</td>
        </tr>
      </table></div>
  <!-- TRAITS BOX -->
  <div style="background: #f5e6ca; color: #1a1a1a; padding: 15px; border: 1px solid #c5b358; box-shadow: 5px 5px 15px rgba(0,0,0,0.3);"><div style="font-size: 11px; text-transform: uppercase; color: #8a6d1d; border-bottom: 1px solid #8a6d1d; margin-bottom: 8px;">Key Traits</div><div style="font-size: 13px; line-height: 1.5;">
        <b>Size:</b> Placeholder<br/>
        <b>Weight:</b> Placeholder<br/>
        <b>Lifespan:</b> Placeholder<br/>
        <b>Alignment:</b> Placeholder<br/>
        <b>Habitat:</b> Placeholder</div></div>