Xavier Twinkletoes<div style="display:flex; gap:2px;"><div style="flex:1;">
<!--- START COLUMN 1 --->
<!-- OUTER CONTAINER (Alignt everything to the left) -->
<div style="display: flex; flex-direction: column; gap: 20px; width: 820px; align-items: flex-start; margin: 0;">
<!-- ELVEN SCRIPTURE CONTAINER -->
<div style="width: 100%; max-width: 800px; color: #3d3522; background: #f4eee1; padding: 60px 40px; border-left: 15px solid #2C1A14; border-right: 15px solid #2C1A14; box-shadow: 0 0 30px rgba(0,0,0,0.2); position: relative; line-height: 1.8; background-image: url('https://transparenttextures.com'); box-sizing: border-box; margin-left: 20px;">
<!-- SIDEWAYS TAPE/QUOTE BOX -->
<div style="position: absolute; top: 15px; left: -30px; background: #e8e0cc; padding: 10px 20px; transform: rotate(-4deg); box-shadow: 2px 3px 6px rgba(0,0,0,0.15); border-left: 1px solid rgba(0,0,0,0.05); border-right: 1px solid rgba(0,0,0,0.05); z-index: 10; font-family: 'Georgia', serif; font-size: 13px; color: #5c5541; border-bottom: 1px solid rgba(0,0,0,0.1); min-width: 140px; text-align: center;">
"[INSERT SHORT QUOTE OR CHARACTER THOUGHT HERE]"
<br>
- [CHARACTER NAME]
</div>
<!-- DECORATIVE TOP EMBLEM -->
<div style="text-align: center; color: #2d4a3e; font-size: 2rem; margin-bottom: -10px;">❦</div>
<!-- HEADER SECTION -->
<div style="text-align: center; border-bottom: 1px solid rgba(45, 74, 62, 0.3); padding-bottom: 30px; margin-bottom: 40px;">
<div style="font-size: 0.9rem; letter-spacing: 8px; color: #8c7b50; text-transform: uppercase; font-weight: 300;">— [SUBTITLE OR TIME PERIOD] —</div>
<h1 style="font-size: 3.5rem; font-weight: 400; color: #1b3022; margin: 10px 0; font-variant: small-caps; text-shadow: 1px 1px 2px rgba(0,0,0,0.1);">[LOCATION OR TITLE]</h1>
<div style="display: flex; justify-content: center; gap: 30px; font-style: italic; color: #5c5541; font-size: 14px; margin-top: 20px;">
<span>✧ [LABEL 1]: [VALUE]</span>
<span>✧ [LABEL 2]: [VALUE]</span>
<span>✧ [LABEL 3]: [VALUE]</span>
</div>
</div>
<!-- MAP SECTION -->
<div style="margin-bottom: 50px; position: relative; padding: 15px; border: 1px solid #d4c5a1; background: #fffdf9;">
<div style="position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: #f4eee1; padding: 0 15px; font-size: 11px; letter-spacing: 3px; color: #8c7b50; text-transform: uppercase;">[MAP TITLE]</div>
<img src="[IMAGE_URL_HERE]" style="width: 100%; height: auto; display: block; border: 1px solid #d4c5a1;">
<div style="margin-top: 20px; font-size: 16px; color: #3d3522; text-align: center; font-style: italic; padding: 0 10px;">
"[INSERT MAP CAPTION OR LORE QUOTE]"
</div>
</div>
<!-- STATS GRID -->
<div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 50px;">
<div style="text-align: center; border-top: 1px solid #d4c5a1; padding-top: 15px;">
<div style="font-size: 10px; color: #2d4a3e; text-transform: uppercase; letter-spacing: 1px;">[CATEGORY 1]</div>
<div style="font-size: 13px; color: #1b3022;">[SHORT DESCRIPTION]</div>
</div>
<div style="text-align: center; border-top: 1px solid #d4c5a1; padding-top: 15px;">
<div style="font-size: 10px; color: #2d4a3e; text-transform: uppercase; letter-spacing: 1px;">[CATEGORY 2]</div>
<div style="font-size: 13px; color: #1b3022;">[SHORT DESCRIPTION]</div>
</div>
<div style="text-align: center; border-top: 1px solid #d4c5a1; padding-top: 15px;">
<div style="font-size: 10px; color: #2d4a3e; text-transform: uppercase; letter-spacing: 1px;">[CATEGORY 3]</div>
<div style="font-size: 13px; color: #1b3022;">[SHORT DESCRIPTION]</div>
</div>
<div style="text-align: center; border-top: 1px solid #d4c5a1; padding-top: 15px;">
<div style="font-size: 10px; color: #2d4a3e; text-transform: uppercase; letter-spacing: 1px;">[CATEGORY 4]</div>
<div style="font-size: 13px; color: #1b3022;">[SHORT DESCRIPTION]</div>
</div>
</div>
<!-- INFO BOX -->
<div style="background: rgba(45, 74, 62, 0.05); border-left: 4px solid #2d4a3e; padding: 20px; margin-bottom: 20px; font-style: italic;">
<span style="font-size: 14px; color: #4a4435;">
<b style="color: #1b3022; font-style: normal; letter-spacing: 1px;">[TOPIC HEADER]:</b> [INSERT DETAILED INFORMATION OR LORE PARAGRAPH HERE]
</span>
</div>
<!-- FOOTER -->
<div style="text-align: center; margin-top: 40px; color: #2d4a3e; opacity: 0.5; font-size: 1.5rem;">❦</div>
</div>
</div>
</details>
<!--- END COLUMN 1 --->
</div><div style="flex:1;"> <!--- COLUMN DIVIDER --->
<!--- START COLUMN 2 --->
<!--- START COLUMN 2 --->
<!-- THE MAIN WRAPPER: Set to column so they stack vertically -->
<div style="display: flex; flex-direction: column; gap: 40px; width: 100%; max-width: 1200px; margin: 0 auto;">
<!-- CHRONICLE CONTAINER -->
<div style="max-width: 1000px; font-family: 'HyliaSerifBeta-Regular', 'Hylian Serif', serif; color: #FFF8E7; background: #2C1A14; padding: 60px 50px; border: 2px solid #D4AF37; box-shadow: inset 0 0 100px rgba(101, 67, 33, 0.6), 0 10px 30px rgba(0,0,0,0.5); position: relative; line-height: 1.6; border-radius: 4px;">
<!-- DECORATIVE CORNERS -->
<div style="position: absolute; top: 10px; left: 10px; font-size: 30px; color: #D4AF37; opacity: 0.6;">❈</div>
<div style="position: absolute; top: 10px; right: 10px; font-size: 30px; color: #D4AF37; opacity: 0.6;">❈</div>
<div style="position: absolute; bottom: 10px; left: 10px; font-size: 30px; color: #D4AF37; opacity: 0.6;">❈</div>
<div style="position: absolute; bottom: 10px; right: 10px; font-size: 30px; color: #D4AF37; opacity: 0.6;">❈</div>
<!-- HEADER -->
<div style="text-align: center; margin-bottom: 50px;">
<div style="font-size: 0.75rem; letter-spacing: 5px; color: #DAA520; text-transform: uppercase; font-weight: 600;">— [SUBTITLE / TIME PERIOD] —</div>
</div>
<!-- INTERACTIVE SECTIONS -->
<div style="display: flex; flex-direction: column; gap: 20px;">
<!-- TAB 1: ENVIRONMENT -->
<details open style="group">
<summary style="list-style: none; cursor: pointer; padding: 15px; border-bottom: 1px double #D4AF37; color: #EEDC82; font-weight: bold; letter-spacing: 2px; text-transform: uppercase; display: flex; align-items: center; gap: 10px;">
<span style="font-size: 1.2rem;">✦</span> I. [SECTION TITLE]
</summary>
<div style="padding: 30px; border-top: 1px solid rgba(212, 175, 55, 0.3); background-image: linear-gradient(to bottom, #4A2E1B, transparent);">
<div style="padding: 30px 0; display: grid; grid-template-columns: 1fr 280px; gap: 40px; animation: fadeIn 0.5s ease;">
<div style="column-count: 1; text-align: justify;">
<h4 style="color: #D4AF37; margin-top: 0; font-variant: small-caps; font-size: 1.4rem;">[SUB-HEADER 1]</h4>
<p style="font-size: 17px; font-style: italic; color: #FFF8E7; margin-bottom: 20px; line-height: 1.8;">
[INSERT ATMOSPHERIC INTRODUCTORY TEXT HERE. DESCRIBE THE OVERALL FEEL AND LANDSCAPE OF THE REGION.]
</p>
<h4 style="color: #D4AF37; font-variant: small-caps;">[SUB-HEADER 2]</h4>
<p style="font-size: 16px; color: #E6C280;">
[INSERT DETAILED GEOGRAPHICAL DESCRIPTION HERE. MENTION SPECIFIC FEATURES LIKE RIVERS, MOUNTAINS, OR UNIQUE LANDMARKS.]
</p>
</div>
<!-- IMAGE STACK -->
<div style="display: flex; flex-direction: column; gap: 15px;">
<!-- Image 1 -->
<figure style="border: 1px solid #D4AF37; padding: 6px; background: #1C100B; transform: rotate(-1deg); box-shadow: 0 4px 15px rgba(0,0,0,0.4); margin: 0;">
<img src="[IMAGE_URL_1]" style="width: 100%; display: block; filter: sepia(0.5) contrast(0.9);">
<figcaption style="text-align: center; font-family: sans-serif; font-size: 0.8rem; margin-top: 8px; color: #A88754;">Credits: [ARTIST NAME]</figcaption>
</figure>
<!-- Image 2 -->
<figure style="border: 1px solid #D4AF37; padding: 6px; background: #1C100B; transform: rotate(2deg); margin-top: -10px; box-shadow: 0 4px 15px rgba(0,0,0,0.4); margin-bottom: 0;">
<img src="[IMAGE_URL_2]" style="width: 100%; display: block; filter: sepia(0.5) contrast(0.9);">
<figcaption style="text-align: center; font-family: sans-serif; font-size: 0.8rem; margin-top: 8px; color: #A88754;">Credits: [ARTIST NAME]</figcaption>
</figure>
<!-- Image 3 -->
<figure style="border: 1px solid #D4AF37; padding: 6px; background: #1C100B; transform: rotate(-1deg); margin-top: -10px; box-shadow: 0 4px 15px rgba(0,0,0,0.4); margin: 0;">
<img src="[IMAGE_URL_3]" style="width: 100%; display: block; filter: sepia(0.5) contrast(0.9);">
<figcaption style="text-align: center; font-family: sans-serif; font-size: 0.8rem; margin-top: 8px; color: #A88754;">Credits: [ARTIST NAME]</figcaption>
</figure>
<!-- Image 4 -->
<figure style="border: 1px solid #D4AF37; padding: 6px; background: #1C100B; transform: rotate(2deg); margin-top: -10px; box-shadow: 0 4px 15px rgba(0,0,0,0.4); margin-bottom: 0;">
<img src="[IMAGE_URL_4]" style="width: 100%; display: block; filter: sepia(0.5) contrast(0.9);">
<figcaption style="text-align: center; font-family: sans-serif; font-size: 0.8rem; margin-top: 8px; color: #A88754;">Credits: [ARTIST NAME]</figcaption>
</figure>
<!-- Image 5 -->
<figure style="border: 1px solid #D4AF37; padding: 6px; background: #1C100B; transform: rotate(-1deg); margin-top: -10px; box-shadow: 0 4px 15px rgba(0,0,0,0.4); margin: 0;">
<img src="[IMAGE_URL_5]" style="width: 100%; display: block; filter: sepia(0.5) contrast(0.9);">
<figcaption style="text-align: center; font-family: sans-serif; font-size: 0.8rem; margin-top: 8px; color: #A88754;">Credits: [ARTIST NAME]</figcaption>
</figure>
<!-- Image 6 -->
<figure style="border: 1px solid #D4AF37; padding: 6px; background: #1C100B; transform: rotate(2deg); margin-top: -10px; box-shadow: 0 4px 15px rgba(0,0,0,0.4); margin-bottom: 0;">
<img src="[IMAGE_URL_6]" style="width: 100%; display: block; filter: sepia(0.5) contrast(0.9);">
<figcaption style="text-align: center; font-family: sans-serif; font-size: 0.8rem; margin-top: 8px; color: #A88754;">Credits: [ARTIST NAME]</figcaption>
</figure>
</div>
</div>
</div>
</details>
<!-- TAB 2: HERBS & FOODS -->
<details style="margin-top: 10px;">
<summary style="list-style: none; cursor: pointer; padding: 15px; border-bottom: 1px double #D4AF37; color: #EEDC82; font-weight: bold; letter-spacing: 2px; text-transform: uppercase;">
<span style="font-size: 1.2rem;">✦</span> II. [SECTION TITLE]
</summary>
<div style="padding: 30px; border-top: 1px solid rgba(212, 175, 55, 0.3); background-image: linear-gradient(to bottom, #4A2E1B, transparent);">
<div style="padding: 30px 0; display: grid; grid-template-columns: 1fr 280px; gap: 40px;">
<div>
<h4 style="color: #D4AF37; margin-top: 0; font-variant: small-caps; font-size: 1.4rem;">[SUB-HEADER]</h4>
<div style="background: rgba(212, 175, 55, 0.05); padding: 20px; border-left: 3px solid #D4AF37; font-style: italic;">
<h4 style="color: #EEDC82; margin-top: 0;">[QUOTE OR THEME]</h4>
<p style="font-size: 15px; font-style: italic; color: #FFF8E7;">[INTRODUCTORY TEXT REGARDING HERBS, NATURE, OR TRADITIONS.]</p>
<p style="font-size: 15px; font-style: italic; color: #FFF8E7;">✦ [ITEM 1] — [DESCRIPTION OF ITEM AND ITS EFFECTS/USES.]
✦ [ITEM 2] — [DESCRIPTION OF ITEM AND ITS EFFECTS/USES.]
✦ [ITEM 3] — [DESCRIPTION OF ITEM AND ITS EFFECTS/USES.]</p>
<h4 style="color: #EEDC82;">[SUB-HEADER 2]</h4>
<p style="font-size: 14px; color: #E6C280;">[DETAILED DESCRIPTION OF LOCAL CUISINE, EATING HABITS, OR PROCURING FOOD.]</p>
</div>
</div>
<!-- IMAGE STACK 2 (Healing Plants & Foods) -->
<div style="display: flex; flex-direction: column; gap: 15px;">
<!-- Image 1 -->
<figure style="border: 1px solid #D4AF37; padding: 6px; background: #1C100B; transform: rotate(-1deg); box-shadow: 0 4px 15px rgba(0,0,0,0.4); margin: 0;">
<img src="[IMAGE_URL_1]" style="width: 100%; display: block; filter: sepia(0.5) contrast(0.9);">
<figcaption style="text-align: center; font-family: sans-serif; font-size: 0.8rem; margin-top: 8px; color: #A88754;">Credits: [SOURCE]</figcaption>
</figure>
<!-- Image 2 -->
<figure style="border: 1px solid #D4AF37; padding: 6px; background: #1C100B; transform: rotate(2deg); margin-top: -10px; box-shadow: 0 4px 15px rgba(0,0,0,0.4); margin-bottom: 0;">
<img src="[IMAGE_URL_2]" style="width: 100%; display: block; filter: sepia(0.5) contrast(0.9);">
<figcaption style="text-align: center; font-family: sans-serif; font-size: 0.8rem; margin-top: 8px; color: #A88754;">Credits: [SOURCE]</figcaption>
</figure>
<!-- Image 3 -->
<figure style="border: 1px solid #D4AF37; padding: 6px; background: #1C100B; transform: rotate(-1deg); margin-top: -10px; box-shadow: 0 4px 15px rgba(0,0,0,0.4); margin: 0;">
<img src="[IMAGE_URL_3]" style="width: 100%; display: block; filter: sepia(0.5) contrast(0.9);">
<figcaption style="text-align: center; font-family: sans-serif; font-size: 0.8rem; margin-top: 8px; color: #A88754;">Credits: [SOURCE]</figcaption>
</figure>
<!-- Image 4 -->
<figure style="border: 1px solid #D4AF37; padding: 6px; background: #1C100B; transform: rotate(2deg); margin-top: -10px; box-shadow: 0 4px 15px rgba(0,0,0,0.4); margin-bottom: 0;">
<img src="[IMAGE_URL_4]" style="width: 100%; display: block; filter: sepia(0.5) contrast(0.9);">
<figcaption style="text-align: center; font-family: sans-serif; font-size: 0.8rem; margin-top: 8px; color: #A88754;">Credits: [SOURCE]</figcaption>
</figure>
<!-- Image 5 -->
<figure style="border: 1px solid #D4AF37; padding: 6px; background: #1C100B; transform: rotate(-1deg); margin-top: -10px; box-shadow: 0 4px 15px rgba(0,0,0,0.4); margin: 0;">
<img src="[IMAGE_URL_5]" style="width: 100%; display: block; filter: sepia(0.5) contrast(0.9);">
<figcaption style="text-align: center; font-family: sans-serif; font-size: 0.8rem; margin-top: 8px; color: #A88754;">Credits: [SOURCE]</figcaption>
</figure>
</div>
</div>
</details> <!-- End Tab 2 -->
<!-- TAB: MUSICAL ECHOS (SOUNDTRACK) -->
<details style="background: rgba(44, 26, 20, 0.6); border: 1px solid rgba(212, 175, 55, 0.3); border-radius: 4px; margin-top: 15px;">
<summary style="list-style: none; cursor: pointer; padding: 15px 25px; display: flex; justify-content: space-between; align-items: center; color: #EEDC82; font-weight: bold; letter-spacing: 2px; text-transform: uppercase;">
<span>✦ III. [SECTION TITLE]</span>
</summary>
<div style="padding: 30px; border-top: 1px solid rgba(212, 175, 55, 0.3); background-image: linear-gradient(to bottom, #4A2E1B, transparent);">
<div style="text-align: center; margin-bottom: 25px;">
<span style="font-size: 24px; color: #D4AF37;">𓏢</span>
<p style="font-size: 14px; font-style: italic; color: #E6C280; margin-top: 5px;">"[INSERT SHORT QUOTE ABOUT MUSIC OR CULTURE]"</p>
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr;">
<!-- Left Side: List of songs -->
<div style="border-right: 1px solid rgba(212, 175, 55, 0.3); padding-right: 20px;">
<h4 style="color: #EEDC82; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 15px;">[PLAYLIST TITLE]</h4>
<ul style="list-style: none; padding: 0; font-size: 15px; color: #FFF8E7;">
<li style="margin-bottom: 10px; display: flex; align-items: center;">
<span style="margin-right: 10px; color: #DAA520;">01.</span>
<span> [SONG TITLE]</span>
<span style="margin-left: auto; font-size: 12px; opacity: 0.6; color: #E6C280;">[0:00]</span>
</li>
<li style="margin-bottom: 10px; display: flex; align-items: center;">
<span style="margin-right: 10px; color: #DAA520;">02.</span>
<span>[SONG TITLE]</span>
<span style="margin-left: auto; font-size: 12px; opacity: 0.6; color: #E6C280;">[0:00]</span>
</li>
<li style="margin-bottom: 10px; display: flex; align-items: center;">
<span style="margin-right: 10px; color: #DAA520;">03.</span>
<span>[SONG TITLE]</span>
<span style="margin-left: auto; font-size: 12px; opacity: 0.6; color: #E6C280;">[0:00]</span>
</li>
<li style="margin-bottom: 10px; display: flex; align-items: center;">
<span style="margin-right: 10px; color: #DAA520;">04.</span>
<span>[SONG TITLE]</span>
<span style="margin-left: auto; font-size: 12px; opacity: 0.6; color: #E6C280;">[0:00]</span>
</li>
<li style="margin-bottom: 10px; display: flex; align-items: center;">
<span style="margin-right: 10px; color: #DAA520;">05.</span>
<span>[SONG TITLE]</span>
<span style="margin-left: auto; font-size: 12px; opacity: 0.6; color: #E6C280;">[0:00]</span>
</li>
<li style="margin-bottom: 10px; display: flex; align-items: center;">
<span style="margin-right: 10px; color: #DAA520;">06.</span>
<span>[SONG TITLE]</span>
<span style="margin-left: auto; font-size: 12px; opacity: 0.6; color: #E6C280;">[0:00]</span>
</li>
<li style="margin-bottom: 10px; display: flex; align-items: center;">
<span style="margin-right: 10px; color: #DAA520;">07.</span>
<span>[SONG TITLE]</span>
<span style="margin-left: auto; font-size: 12px; opacity: 0.6; color: #E6C280;">[0:00]</span>
</li>
<li style="margin-bottom: 10px; display: flex; align-items: center;">
<span style="margin-right: 10px; color: #DAA520;">08.</span>
<span>[SONG TITLE]</span>
<span style="margin-left: auto; font-size: 12px; opacity: 0.6; color: #E6C280;">[0:00]</span>
</li>
<li style="margin-bottom: 10px; display: flex; align-items: center;">
<span style="margin-right: 10px; color: #DAA520;">09.</span>
<span>[SONG TITLE]</span>
<span style="margin-left: auto; font-size: 12px; opacity: 0.6; color: #E6C280;">[0:00]</span>
</li>
<li style="margin-bottom: 10px; display: flex; align-items: center;">
<span style="margin-right: 10px; color: #DAA520;">10.</span>
<span>[SONG TITLE]</span>
<span style="margin-left: auto; font-size: 12px; opacity: 0.6; color: #E6C280;">[0:00]</span>
</li>
<li style="margin-bottom: 10px; display: flex; align-items: center;">
<span style="margin-right: 10px; color: #DAA520;">11.</span>
<span>[SONG TITLE]</span>
<span style="margin-left: auto; font-size: 12px; opacity: 0.6; color: #E6C280;">[0:00]</span>
</li>
<li style="margin-bottom: 10px; display: flex; align-items: center;">
<span style="margin-right: 10px; color: #DAA520;">12.</span>
<span>[SONG TITLE]</span>
<span style="margin-left: auto; font-size: 12px; opacity: 0.6; color: #E6C280;">[0:00]</span>
</li>
<li style="margin-bottom: 10px; display: flex; align-items: center;">
<span style="margin-right: 10px; color: #DAA520;">13.</span>
<span>[SONG TITLE]</span>
<span style="margin-left: auto; font-size: 12px; opacity: 0.6; color: #E6C280;">[0:00]</span>
</li>
</ul>
</div>
<!-- Right Side: Space for Embed or Text -->
<div style="display: flex; flex-direction: column; justify-content: center; align-items: center; background: rgba(27, 48, 34, 0.03); border-radius: 10px; padding: 15px;">
<!-- Interactible Image -->
<div style="display: flex; justify-content: center; align-items: center; background: rgba(27, 48, 34, 0.03); border-radius: 10px; padding: 15px; width: 100%; box-sizing: border-box;">
<a href="[LINK_TO_PLAYLIST_OR_AUDIO]" target="_blank" style="display: block; width: 100%; text-decoration: none;">
<img src="[IMAGE_OR_GIF_URL]"
alt="Audio Source"
style="
width: 100%;
max-width: 700px;
height: auto;
display: block;
border-radius: 8px;
border: 1px solid #8c7b50;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
transition: transform 0.2s ease, box-shadow 0.2s ease;"
onmouseover="this.style.transform='scale(1.02)'; this.style.box-shadow='0 6px 12px rgba(0,0,0,0.15)';"
onmouseout="this.style.transform='scale(1)'; this.style.box-shadow='0 4px 8px rgba(0,0,0,0.1)';"
>
</a>
</div>
</div>
</div>
</div>
<!-- Text Area -->
<div style="text-align: justify; margin-bottom: 40px; column-count: 2; column-gap: 40px; column-rule: 1px dotted rgba(212, 175, 55, 0.4);">
<h4 style="color: #EEDC82; margin-top: 0; font-variant: small-caps; font-size: 1.3rem; column-span: all; text-align: center; margin-bottom: 20px;">[CULTURAL SECTION TITLE]</h4>
<p style="font-size: 15px; font-style: italic; line-height: 1.8; color: #FFF8E7; margin: 0;">
[INSERT TEXT ABOUT LOCAL MUSIC, ATMOSPHERE, AND TRADITIONS HERE. THIS AREA SUPPORTS TWO COLUMNS OF TEXT.]
✦ [TOPIC 1]:
[DESCRIPTION OF SOCIAL CUSTOMS, LEISURE ACTIVITIES, OR DAILY LIFE.]
✦ [TOPIC 2]:
[DESCRIPTION OF TRADITIONS, RELATIONSHIPS, OR SOCIAL NORMS.]
✦ [GLOSSARY / COMMON TERMS]:
[TERM 1]: [DEFINITION]
[TERM 2]: [DEFINITION]
[TERM 3]: [DEFINITION]
</p>
</details>
<!-- TAB 4: ARCHITECTURE -->
<details style="background: rgba(44, 26, 20, 0.6); border: 1px solid rgba(212, 175, 55, 0.3); border-radius: 4px; margin-top: 15px;">
<summary style="list-style: none; cursor: pointer; padding: 15px 25px; display: flex; justify-content: space-between; align-items: center; color: #EEDC82; font-weight: bold; letter-spacing: 2px; text-transform: uppercase;">
<span>✦ IV. [SECTION TITLE]</span>
</summary>
<div style="padding: 30px; border-top: 1px solid rgba(212, 175, 55, 0.3); background-image: linear-gradient(to bottom, #4A2E1B, transparent);">
<!-- Text Area -->
<div style="text-align: justify; margin-bottom: 40px; column-count: 2; column-gap: 40px; column-rule: 1px dotted rgba(212, 175, 55, 0.4);">
<h4 style="color: #EEDC82; margin-top: 0; font-variant: small-caps; font-size: 1.3rem; column-span: all; text-align: center; margin-bottom: 20px;">[CULTURAL/ARCHITECTURAL HEADER]</h4>
<p style="font-size: 15px; font-style: italic; line-height: 1.8; color: #FFF8E7; margin: 0;">
[INSERT DETAILED DESCRIPTION OF BUILDINGS, STRUCTURES, AND THE OVERALL ARCHITECTURAL STYLE HERE. THIS SECTION SUPPORTS TWO-COLUMN LAYOUT.]
</p>
</div>
<!-- IMAGE-GRID GALLERY -->
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 20px;">
<!-- Image 1 -->
<div style="border: 1px solid #D4AF37; padding: 5px; background: #1C100B; box-shadow: 0 4px 10px rgba(0,0,0,0.3); text-align: center;">
<img src="[IMAGE_URL_1]" style="width: 100%; height: 180px; object-fit: cover; display: block; filter: sepia(0.5) contrast(0.9);">
<p style="margin: 8px 0 3px; font-style: italic; color: #A88754; font-family: serif; font-size: 0.9em;">Credits: [ARTIST NAME]</p>
</div>
<!-- Image 2 -->
<div style="border: 1px solid #D4AF37; padding: 5px; background: #1C100B; box-shadow: 0 4px 10px rgba(0,0,0,0.3); text-align: center;">
<img src="[IMAGE_URL_2]" style="width: 100%; height: 180px; object-fit: cover; display: block; filter: sepia(0.5) contrast(0.9);">
<p style="margin: 8px 0 3px; font-style: italic; color: #A88754; font-family: serif; font-size: 0.9em;">Credits: [ARTIST NAME]</p>
</div>
<!-- Image 3 -->
<div style="border: 1px solid #D4AF37; padding: 5px; background: #1C100B; box-shadow: 0 4px 10px rgba(0,0,0,0.3); text-align: center;">
<img src="[IMAGE_URL_3]" style="width: 100%; height: 180px; object-fit: cover; display: block; filter: sepia(0.5) contrast(0.9);">
<p style="margin: 8px 0 3px; font-style: italic; color: #A88754; font-family: serif; font-size: 0.9em;">Credits: [ARTIST NAME]</p>
</div>
<!-- Image 4 -->
<div style="border: 1px solid #D4AF37; padding: 5px; background: #1C100B; box-shadow: 0 4px 10px rgba(0,0,0,0.3); text-align: center;">
<img src="[IMAGE_URL_4]" style="width: 100%; height: 180px; object-fit: cover; display: block; filter: sepia(0.5) contrast(0.9);">
<p style="margin: 8px 0 3px; font-style: italic; color: #A88754; font-family: serif; font-size: 0.9em;">Credits: [ARTIST NAME]</p>
</div>
<!-- Image 5 -->
<div style="border: 1px solid #D4AF37; padding: 5px; background: #1C100B; box-shadow: 0 4px 10px rgba(0,0,0,0.3); text-align: center;">
<img src="[IMAGE_URL_5]" style="width: 100%; height: 180px; object-fit: cover; display: block; filter: sepia(0.5) contrast(0.9);">
<p style="margin: 8px 0 3px; font-style: italic; color: #A88754; font-family: serif; font-size: 0.9em;">Credits: [ARTIST NAME]</p>
</div>
<!-- Placeholder for image 6 -->
<div style="border: 1px dashed #D4AF37; display: flex; align-items: center; justify-content: center; color: #D4AF37; font-size: 24px; background: rgba(212, 175, 55, 0.05);">
❈
</div>
</div>
</div>
</details>
<!-- TAB 4: HISTORY AND POLITICS -->
<details style="background: rgba(44, 26, 20, 0.6); border: 1px solid rgba(212, 175, 55, 0.3); border-radius: 4px; margin-top: 15px;">
<summary style="list-style: none; cursor: pointer; padding: 15px 25px; display: flex; justify-content: space-between; align-items: center; color: #EEDC82; font-weight: bold; letter-spacing: 2px; text-transform: uppercase;">
<span>✦ V. [SECTION TITLE]</span>
</summary>
<div style="padding: 30px; border-top: 1px solid rgba(212, 175, 55, 0.3); background-image: linear-gradient(to bottom, #4A2E1B, transparent);">
<!-- Text Area -->
<div style="text-align: justify; margin-bottom: 40px; column-count: 2; column-gap: 40px; column-rule: 1px dotted rgba(212, 175, 55, 0.4);">
<h4 style="color: #EEDC82; margin-top: 0; font-variant: small-caps; font-size: 1.3rem; column-span: all; text-align: center; margin-bottom: 20px;">[HISTORY/POLITICS HEADER]</h4>
<p style="font-size: 15px; font-style: italic; line-height: 1.8; color: #FFF8E7; margin: 0;">
[INSERT THE HISTORICAL OVERVIEW OF YOUR WORLD HERE. THIS AREA IS FORMATTED IN TWO COLUMNS FOR BETTER READABILITY.]
✦ [HISTORICAL TOPIC 1]:
[DESCRIPTION OF RULERS, REIGNING POWERS, OR GOVERNING SYSTEMS.]
✦ [HISTORICAL TOPIC 2]:
[DESCRIPTION OF SIGNIFICANT PAST EVENTS, CONFLICTS, OR SOCIAL ISSUES.]
✦ [HISTORICAL TOPIC 3]:
[DESCRIPTION OF ECONOMY, PROSPERITY, OR STRUGGLES OF THE PEOPLE.]
✦ [HISTORICAL TOPIC 4]:
[DESCRIPTION OF RECENT WARS, CURRENT TENSIONS, OR FUTURE OUTLOOK.]
</p>
</div>
</div>
</div>
</div>
Template
World/ Location Template with tabs
Log in to like
Comments (0)
Log in to join the conversation.
No comments yet. Be the first to share your thoughts!
Related Posts
Species Template by Odyssey
Simple species template for worldbuiding, non-DnD
Why I choose Chronicler over World Anvil
I've used World Anvil for over five years, and nothing comes close to Chronicler
Dnd Character Template Part 1: Bardic Inspiration
A template for DnD players to create the classic flashy and theatrical bard!