Terrarian Character [C] HTML (Custom code)

<!----

For use of Terraria fan characters only!

Images obtained from:

terraria.wiki.gg/wiki/Terraria_Wiki

---->

<div class="container" style="color:#fff; width:900px; font-family: comic sans ms; text-shadow:-2px 0 #030000,0 2px #030000,2px 0 #030000,0 -2px #030000;">

<!---- Background image ---->

<div class="card rounded-0 border-0 p-3 py-5" style="background-image:url(https://forums.terraria.org/index.php?attachments/n-1-png.31583/); background-size:cover; background-position: center; height:450px">

<div class="card rounded-0 mx-auto p-2" style="background-color:rgba(36, 45, 98,.8); border-radius:10px; width:650px; height:325px; border:2px solid #030000">

<div class="row no-gutters mb-3">

<div class="col-3 p-1">

<div class="card rounded-0 mx-auto p-2" style="background-color:rgba(12, 14, 26,.6); border-radius:10px; height:150px; border:2px solid #4e5877">

<!--- Player icon --->

<div class="card rounded-0 border-0" style="

background-image:url( imglink ); background-size:contain; background-position: center; background-repeat: no-repeat; height:150px; background-color:rgba(0,0,0,0)">

</div>

</div>

<div class="card rounded-0 mx-auto p-2 mt-1" style="background-color:#334281; border-radius:10px; height:45px; border:2px solid #4d61a5">

<!--- Health stat --->

<div class="col-12 justify-content-between my-0 px-0" style="text-align: center; flex: 0 0 0%;"><img src="https://cdn.discordapp.com/attachments/705244109874659370/1112757095171903608/PlayerHeart.png" width="25" height="20"> <span style="margin-top:2px; color:#7d7c79">

health #</span>

</div>

</div>

<div class="card rounded-0 mx-auto p-2 mt-1" style="background-color:#334281; border-radius:10px; height:45px; border:2px solid #4d61a5">

<!--- Mana stat --->

<div class="col-12 justify-content-between my-0 px-0" style="text-align: center; flex: 0 0 0%;"><img src="https://cdn.discordapp.com/attachments/705244109874659370/1112757094827958302/Mana.png" width="25" height="20"> <span style="margin-top:2px; color:#7d7c79">

mana #</span>

</div>

</div>

<div class="card rounded-0 mx-auto p-2 mt-1" style="background-color:#334281; border-radius:10px; height:45px; border:2px solid #4d61a5">

<!--- Class (melee/ranged/magic/summoner/none) --->

<div class="col-12 justify-content-between my-0 px-0" style="text-align: center; flex: 0 0 0%;"><img src="https://cdn.discordapp.com/attachments/705244109874659370/1112757094509199430/Emote_Item_Sword.png" width="25" height="20"> <span style="margin-top:2px; color:#7d7c79">

class</span>

</div>

</div>

</div>

<div class="col-9 p-1">

<div class="tab-content">

<!--- Tab 1 - About --->

<div class="tab-pane active show" id="tabter1">

<p class="mb-1" style="font-size:18px; text-align:center; margin-top:-5px">About</p>

<div class="card rounded-0 border-0 pb-2" style="background-color:rgba(0,0,0,0); height:280px; overflow:auto">

<div class="row no-gutters">

<!-- Player name -->

<div class="col-6 pr-1">

<div class="card rounded-0 mx-auto p-2" style="background-color:#334281; border-radius:10px; height:42px; border:2px solid #4d61a5">

<p class="col-12 justify-content-between my-0 px-0" style="text-align: center; flex: 0 0 0%;">

Name: <span style="color:#7d7c79">

info</span> </p>

</div>

</div>

<!-- Player gender -->

<div class="col-6 pl-1">

<div class="card rounded-0 mx-auto p-2" style="background-color:#334281; border-radius:10px; height:42px; border:2px solid #4d61a5">

<p class="col-12 justify-content-between my-0 px-0" style="text-align: center; flex: 0 0 0%;">

Gender: <span style="color:#7d7c79">

info</span> </p>

</div>

</div>

</div>

<!-- About the character -->

<div class="card rounded-0 border-0 mx-auto px-3 py-2 my-2" style="background-color:#666f9e; border-radius:10px; height:125px; overflow-y:auto; text-align:justify;">

<p>Write about your character here. Terraria is a land of adventure! A land of mystery! A land that's yours to shape, defend, and enjoy. Your options in Terraria are limitless. Are you an action gamer with an itchy trigger finger? A master builder? A collector? An explorer? There's something for everyone.</p>

</div>

<div class="row no-gutters">

<!-- Total death count -->

<div class="col-6 pr-1">

<div class="card rounded-0 mx-auto p-2" style="background-color:#334281; border-radius:10px; height:42px; border:2px solid #4d61a5">

<p class="col-12 justify-content-between my-0 px-0" style="text-align: center; flex: 0 0 0%;">

Deaths: <span style="color:#7d7c79">

#</span> </p>

</div>

</div>

<!-- Mode (Journey/Classic/Mediumcore/Hardcore) -->

<div class="col-6 pl-1">

<div class="card rounded-0 mx-auto p-2" style="background-color:#334281; border-radius:10px; height:42px; border:2px solid #4d61a5">

<p class="col-12 justify-content-between my-0 px-0" style="text-align: center; flex: 0 0 0%;">

Mode: <span style="color:#7d7c79">

info</span> </p>

</div>

</div>

<!-- Total coin value (can be just in copper) -->

<div class="col-6 pr-1 mt-1">

<div class="card rounded-0 mx-auto p-2" style="background-color:#334281; border-radius:10px; height:42px; border:2px solid #4d61a5">

<p class="col-12 justify-content-between my-0 px-0" style="text-align: center; flex: 0 0 0%;">

Coin Value: <span style="color:#7d7c79">

#</span> </p>

</div>

</div>

<!-- Luck stat -->

<div class="col-6 pl-1 mt-1">

<div class="card rounded-0 mx-auto p-2" style="background-color:#334281; border-radius:10px; height:42px; border:2px solid #4d61a5">

<p class="col-12 justify-content-between my-0 px-0" style="text-align: center; flex: 0 0 0%;">

Luck: <span style="color:#7d7c79">

#</span> </p>

</div>

</div>

</div>

</div>

</div>

<!--- Tab 2 - Skills

Find weapon images here: terraria.wiki.gg/wiki/Weapons

Find tool images here: terraria.wiki.gg/wiki/Tools

Find armor images here: terraria.wiki.gg/wiki/Armor

--->

<div class="tab-pane" id="tabter2">

<p class="mb-1" style="font-size:18px; text-align:center; margin-top:-5px">Skills & Tools</p>

<div class="card rounded-0 border-0 pb-2" style="background-color:rgba(0,0,0,0); height:280px; overflow:auto">

<!-- Weapon -->

<div class="row no-gutters">

<div class="col-10 pl-1 order-2">

<div class="card rounded-0 border-0 mx-auto px-3 py-2 mt-1" style="background-color:#666f9e; border-radius:10px; height:82px; overflow-y:auto; text-align:justify;">

<p><b>Weapon name.</b>

The Copper Shortsword is an early game metal shortsword. Its alternate ore counterpart is Tin Shortsword.</p>

</div>

</div>

<div class="col-2 pr-1 order-1">

<div class="card rounded-0 mx-auto p-2" style="background-color:383a86; border-radius:10px; width:70px; height:70px; border:2px solid #242554">

<div class="card rounded-0 border-0" style="

background-image:url( imglink ); background-size:contain; background-position: center; background-repeat: no-repeat; height:150px; background-color:rgba(0,0,0,0)">

</div>

</div>

<div class="card rounded-0 border-0 text-truncate" style="background-color:rgba(0,0,0,0); width:70px; margin-top:-15px; margin-left:15px">

<p style="font-size:15px">Weapon</p>

</div>

</div>

</div>

<!-- Pickaxe (or drill) -->

<div class="row no-gutters">

<div class="col-10 pl-1 order-2">

<div class="card rounded-0 border-0 mx-auto px-3 py-2 mt-1" style="background-color:#666f9e; border-radius:10px; height:82px; overflow-y:auto; text-align:justify;">

<p><b>Pickaxe name.</b>

The Copper Pickaxe is an early-game pickaxe that is weaker than the Iron and Lead Pickaxes.</p>

</div>

</div>

<div class="col-2 pr-1 order-1">

<div class="card rounded-0 mx-auto p-2" style="background-color:383a86; border-radius:10px; width:70px; height:70px; border:2px solid #242554">

<div class="card rounded-0 border-0" style="

background-image:url( imglink ); background-size:contain; background-position: center; background-repeat: no-repeat; height:150px; background-color:rgba(0,0,0,0)">

</div>

</div>

<div class="card rounded-0 border-0 text-truncate" style="background-color:rgba(0,0,0,0); width:70px; margin-top:-15px; margin-left:15px">

<p style="font-size:15px">Pickaxe</p>

</div>

</div>

</div>

<!-- Axe (or chainsaw) -->

<div class="row no-gutters">

<div class="col-10 pl-1 order-2">

<div class="card rounded-0 border-0 mx-auto px-3 py-2 mt-1" style="background-color:#666f9e; border-radius:10px; height:82px; overflow-y:auto; text-align:justify;">

<p><b>Axe name.</b>

The Copper Axe is the first axe the player will obtain, and is weaker than the Iron or Lead Axe.

</p>

</div>

</div>

<div class="col-2 pr-1 order-1">

<div class="card rounded-0 mx-auto p-2" style="background-color:383a86; border-radius:10px; width:70px; height:70px; border:2px solid #242554">

<div class="card rounded-0 border-0" style="

background-image:url( imglink ); background-size:contain; background-position: center; background-repeat: no-repeat; height:150px; background-color:rgba(0,0,0,0)">

</div>

</div>

<div class="card rounded-0 border-0 text-truncate" style="background-color:rgba(0,0,0,0); width:70px; margin-top:-15px; margin-left:15px">

<p style="font-size:15px">Axe</p>

</div>

</div>

</div>

<!-- Hammer (or other) -->

<div class="row no-gutters">

<div class="col-10 pl-1 order-2">

<div class="card rounded-0 border-0 mx-auto px-3 py-2 mt-1" style="background-color:#666f9e; border-radius:10px; height:82px; overflow-y:auto; text-align:justify;">

<p><b>Hammer name.</b>

The Copper Hammer is an early-game hammer. Its alternate ore counterpart is Tin Hammer.</p>

</div>

</div>

<div class="col-2 pr-1 order-1">

<div class="card rounded-0 mx-auto p-2" style="background-color:383a86; border-radius:10px; width:70px; height:70px; border:2px solid #242554">

<div class="card rounded-0 border-0" style="

background-image:url( imglink ); background-size:contain; background-position: center; background-repeat: no-repeat; height:150px; background-color:rgba(0,0,0,0)">

</div>

</div>

<div class="card rounded-0 border-0 text-truncate" style="background-color:rgba(0,0,0,0); width:70px; margin-top:-15px; margin-left:15px">

<p style="font-size:15px">Hammer</p>

</div>

</div>

</div>

<!-- Divider -->

<div class="mx-auto my-3" style="border-top:2px solid 030000; width:420px;">

      </div>

<div class="row no-gutters mb-2">

<!-- Ammo type (for ranged or none) -->

<div class="col-6 mt-1 pr-1">

<div class="card rounded-0 mx-auto p-2" style="background-color:#334281; border-radius:10px; height:42px; border:2px solid #4d61a5">

<p class="col-12 justify-content-between my-0 px-0" style="text-align: center; flex: 0 0 0%;"> Ammo: <span style="color:#7d7c79">(if any)</span> </p>

</div>

</div>

<!-- Whip type (for summoner or none) -->

<div class="col-6 mt-1 pl-1">

<div class="card rounded-0 mx-auto p-2" style="background-color:#334281; border-radius:10px; height:42px; border:2px solid #4d61a5">

<p class="col-12 justify-content-between my-0 px-0" style="text-align: center; flex: 0 0 0%;"> Whip: <span style="color:#7d7c79">(if any)</span> </p>

</div>

</div>

</div>

<!-- General skill stat (general experience in the game) -->

<div class="row no-gutters">

<div class="col-5 pl-4 pr-1">

<p style="margin-top:2px; color:#7d7c79; font-size:16px">General Skill: 50%</p>

</div>

<div class="col-7 pr-4 pl-1 mt-2">

<div class="card" style="border:2px solid #fff;">

<div class="progress rounded-0" style="height:7px;overflow:visible; background-image: linear-gradient(to right, black , white);">

<div class="progress-bar" style="

width:50%;height:100%;background:rgba(0,0,0,0);">

</div>

<div style="margin:-7px 0 0 -5px;color:#fff;">

<p style="font-size:18px"><b>|</b></p>

</div>

</div>

</div>

</div>

</div>

<!-- Melee skill stat -->

<div class="row no-gutters">

<div class="col-5 pl-4 pr-1">

<p style="margin-top:2px; color:#7d7c79; font-size:16px">Melee: 50%</p>

</div>

<div class="col-7 pr-4 pl-1 mt-2">

<div class="card" style="border:2px solid #fff;">

<div class="progress rounded-0" style="height:7px;overflow:visible; background-image: linear-gradient(to right, black , white);">

<div class="progress-bar" style="

width:50%;height:100%;background:rgba(0,0,0,0);">

</div>

<div style="margin:-7px 0 0 -5px;color:#fff;">

<p style="font-size:18px"><b>|</b></p>

</div>

</div>

</div>

</div>

</div>

<!-- Ranged skill stat -->

<div class="row no-gutters">

<div class="col-5 pl-4 pr-1">

<p style="margin-top:2px; color:#7d7c79; font-size:16px">Ranged: 50%</p>

</div>

<div class="col-7 pr-4 pl-1 mt-2">

<div class="card" style="border:2px solid #fff;">

<div class="progress rounded-0" style="height:7px;overflow:visible; background-image: linear-gradient(to right, black , white);">

<div class="progress-bar" style="

width:50%;height:100%;background:rgba(0,0,0,0);">

</div>

<div style="margin:-7px 0 0 -5px;color:#fff;">

<p style="font-size:18px"><b>|</b></p>

</div>

</div>

</div>

</div>

</div>

<!-- Magic skill stat -->

<div class="row no-gutters">

<div class="col-5 pl-4 pr-1">

<p style="margin-top:2px; color:#7d7c79; font-size:16px">Magic: 50%</p>

</div>

<div class="col-7 pr-4 pl-1 mt-2">

<div class="card" style="border:2px solid #fff;">

<div class="progress rounded-0" style="height:7px;overflow:visible; background-image: linear-gradient(to right, black , white);">

<div class="progress-bar" style="

width:50%;height:100%;background:rgba(0,0,0,0);">

</div>

<div style="margin:-7px 0 0 -5px;color:#fff;">

<p style="font-size:18px"><b>|</b></p>

</div>

</div>

</div>

</div>

</div>

<!-- Summoner skill stat -->

<div class="row no-gutters">

<div class="col-5 pl-4 pr-1">

<p style="margin-top:2px; color:#7d7c79; font-size:16px">Summoner: 50%</p>

</div>

<div class="col-7 pr-4 pl-1 mt-2">

<div class="card" style="border:2px solid #fff;">

<div class="progress rounded-0" style="height:7px;overflow:visible; background-image: linear-gradient(to right, black , white);">

<div class="progress-bar" style="

width:50%;height:100%;background:rgba(0,0,0,0);">

</div>

<div style="margin:-7px 0 0 -5px;color:#fff;">

<p style="font-size:18px"><b>|</b></p>

</div>

</div>

</div>

</div>

</div>

<!-- Divider -->

<div class="mx-auto my-3" style="border-top:2px solid 030000; width:420px;">

     </div>

<!-- Helmet -->

     <div class="row no-gutters">

<div class="col-10 pl-1 order-2">

<div class="card rounded-0 border-0 mx-auto px-3 py-2 mt-1" style="background-color:#666f9e; border-radius:10px; height:82px; overflow-y:auto; text-align:justify;">

<p><b>Helmet name.</b>

Copper armor is one of the earliest, most easily obtainable armor sets in the game.</p>

</div>

</div>

<div class="col-2 pr-1 order-1">

<div class="card rounded-0 mx-auto p-2" style="background-color:383a86; border-radius:10px; width:70px; height:70px; border:2px solid #242554">

<div class="card rounded-0 border-0" style="

background-image:url( imglink ); background-size:contain; background-position: center; background-repeat: no-repeat; height:150px; background-color:rgba(0,0,0,0)">

</div>

</div>

<div class="card rounded-0 border-0 text-truncate" style="background-color:rgba(0,0,0,0); width:70px; margin-top:-15px; margin-left:15px">

<p style="font-size:15px">Helmet</p>

</div>

</div>

</div>

<!-- Chainmail -->

<div class="row no-gutters">

<div class="col-10 pl-1 order-2">

<div class="card rounded-0 border-0 mx-auto px-3 py-2 mt-1" style="background-color:#666f9e; border-radius:10px; height:82px; overflow-y:auto; text-align:justify;">

<p><b>Chainmail name.</b>

It takes a total of  48 Copper Bars to craft a full suit, or  144 Copper Ores.

</p>

</div>

</div>

<div class="col-2 pr-1 order-1">

<div class="card rounded-0 mx-auto p-2" style="background-color:383a86; border-radius:10px; width:70px; height:70px; border:2px solid #242554">

<div class="card rounded-0 border-0" style="background-image:url( imglink ); background-size:contain; background-position: center; background-repeat: no-repeat; height:150px; background-color:rgba(0,0,0,0)">

</div>

</div>

<div class="card rounded-0 border-0 text-truncate" style="background-color:rgba(0,0,0,0); width:70px; margin-top:-15px; margin-left:15px">

<p style="font-size:15px">Chainmail</p>

</div>

</div>

</div>

<!-- Greaves -->

<div class="row no-gutters">

<div class="col-10 pl-1 order-2">

<div class="card rounded-0 border-0 mx-auto px-3 py-2 mt-1" style="background-color:#666f9e; border-radius:10px; height:82px; overflow-y:auto; text-align:justify;">

<p><b>Greaves name.</b>

Quick note, I reccomend putting your original descriptions for these rather than the actual wiki descriptions... up to you.

</p>

</div>

</div>

<div class="col-2 pr-1 order-1">

<div class="card rounded-0 mx-auto p-2" style="background-color:383a86; border-radius:10px; width:70px; height:70px; border:2px solid #242554">

<div class="card rounded-0 border-0" style="background-image:url( imglink ); background-size:contain; background-position: center; background-repeat: no-repeat; height:150px; background-color:rgba(0,0,0,0)">

</div>

</div>

<div class="card rounded-0 border-0 text-truncate" style="background-color:rgba(0,0,0,0); width:70px; margin-top:-15px; margin-left:15px">

<p style="font-size:15px">Greaves</p>

</div>

</div>

</div>

<!-- Divider -->

<div class="mx-auto my-3" style="border-top:2px solid 030000; width:420px;">

     </div>

<div class="row no-gutters mb-2">

<!-- Average damage-per-second -->

<div class="col-6 pr-1">

<div class="card rounded-0 mx-auto p-2" style="background-color:#334281; border-radius:10px; height:42px; border:2px solid #4d61a5">

<p class="col-12 justify-content-between my-0 px-0" style="text-align: center; flex: 0 0 0%;"> Avg. DPS: <span style="color:#7d7c79">#</span> </p>

</div>

</div>

<!-- Defense stat -->

<div class="col-6 pl-1">

<div class="card rounded-0 mx-auto p-2" style="background-color:#334281; border-radius:10px; height:42px; border:2px solid #4d61a5">

<p class="col-12 justify-content-between my-0 px-0" style="text-align: center; flex: 0 0 0%;"> Defense: <span style="color:#7d7c79">#</span> </p>

</div>

</div>

</div>

<!-- Fishing skill stat -->

<div class="row no-gutters">

<div class="col-5 pl-4 pr-1">

<p style="margin-top:2px; color:#7d7c79; font-size:16px">Fishing: 50%</p>

</div>

<div class="col-7 pr-4 pl-1 mt-2">

<div class="card" style="border:2px solid #fff;">

<div class="progress rounded-0" style="height:7px;overflow:visible; background-image: linear-gradient(to right, black , white);">

<div class="progress-bar" style="width:50%;height:100%;background:rgba(0,0,0,0);">

</div>

<div style="margin:-7px 0 0 -5px;color:#fff;">

<p style="font-size:18px"><b>|</b></p>

</div>

</div>

</div>

</div>

</div>

<!-- Wiring skill stat -->

<div class="row no-gutters">

<div class="col-5 pl-4 pr-1">

<p style="margin-top:2px; color:#7d7c79; font-size:16px">Wiring: 50%</p>

</div>

<div class="col-7 pr-4 pl-1 mt-2">

<div class="card" style="border:2px solid #fff;">

<div class="progress rounded-0" style="height:7px;overflow:visible; background-image: linear-gradient(to right, black , white);">

<div class="progress-bar" style="width:50%;height:100%;background:rgba(0,0,0,0);">

</div>

<div style="margin:-7px 0 0 -5px;color:#fff;">

<p style="font-size:18px"><b>|</b></p>

</div>

</div>

</div>

</div>

</div>

<!-- Building skill stat -->

<div class="row no-gutters">

<div class="col-5 pl-4 pr-1">

<p style="margin-top:2px; color:#7d7c79; font-size:16px">Building: 50%</p>

</div>

<div class="col-7 pr-4 pl-1 mt-2">

<div class="card" style="border:2px solid #fff;">

<div class="progress rounded-0" style="height:7px;overflow:visible; background-image: linear-gradient(to right, black , white);">

<div class="progress-bar" style="width:50%;height:100%;background:rgba(0,0,0,0);">

</div>

<div style="margin:-7px 0 0 -5px;color:#fff;">

<p style="font-size:18px"><b>|</b></p>

</div>

</div>

</div>

</div>

</div>

<!-- Golfing skill stat -->

<div class="row no-gutters">

<div class="col-5 pl-4 pr-1">

<p style="margin-top:2px; color:#7d7c79; font-size:16px">Golfing: 50%</p>

</div>

<div class="col-7 pr-4 pl-1 mt-2">

<div class="card" style="border:2px solid #fff;">

<div class="progress rounded-0" style="height:7px;overflow:visible; background-image: linear-gradient(to right, black , white);">

<div class="progress-bar" style="width:50%;height:100%;background:rgba(0,0,0,0);">

</div>

<div style="margin:-7px 0 0 -5px;color:#fff;">

<p style="font-size:18px"><b>|</b></p>

</div>

</div>

</div>

</div>

</div>

<!-- (add above here) -->

</div>

</div>

<!--- Tab 3 - World

Find other map borders and backgrounds here: terraria.wiki.gg/wiki/Minimap

--->

<div class="tab-pane" id="tabter3">

<p class="mb-1" style="font-size:18px; text-align:center; margin-top:-5px">Main World</p>

<div class="card rounded-0 border-0 pb-2" style="background-color:rgba(0,0,0,0); height:280px; overflow:auto">

<div class="row no-gutters">

<div class="col-5 pr-1 mx-auto">

<!-- World image -->

<div class="card border-0 mr-2 mb-2" style="

background-image:url( imglink ); background-size:cover; background-position: center; height:175px; width:175px; background-color:rgba(0,0,0,0); border-radius:5px">

</div>

<!-- Map border -->

<div class="card rounded-0 border-0" style="background-image:url(https://cdn.discordapp.com/attachments/705244109874659370/1112849254969524396/Minimap_Frame_Default.png); background-size:cover; background-position: center; height:185px; width:185px; background-color:rgba(0,0,0,0); margin-top:-185px">

</div>

<!-- Tiny little world description (does NOT scroll) -->

<div class="card rounded-0 border-0 mx-auto px-3 py-1 mt-2" style="background-color:#666f9e; border-radius:10px; height:80px; text-align:justify;">

<p>Very very brief description of the world.</p>

</div>

</div>

<!-- World name -->

<div class="col-7 pl-1 mx-auto">

<div class="card rounded-0 mx-auto p-2" style="background-color:#334281; border-radius:10px; height:42px; border:2px solid #4d61a5">

<p class="col-12 justify-content-between my-0 px-0" style="text-align: center; flex: 0 0 0%;"> Name: <span style="color:#7d7c79">

info</span> </p>

</div>

<!-- World difficulty (Journey/Classic/Expert/Master) -->

<div class="card rounded-0 mx-auto p-2 mt-1" style="background-color:#334281; border-radius:10px; height:42px; border:2px solid #4d61a5">

<p class="col-12 justify-content-between my-0 px-0" style="text-align: center; flex: 0 0 0%;"> Difficulty: <span style="color:#7d7c79">

info</span> </p>

</div>

<!-- World size (Small/Medium/Large) -->

<div class="card rounded-0 mx-auto p-2 mt-1" style="background-color:#334281; border-radius:10px; height:42px; border:2px solid #4d61a5">

<p class="col-12 justify-content-between my-0 px-0" style="text-align: center; flex: 0 0 0%;"> Size: <span style="color:#7d7c79">

info</span> </p>

</div>

<!-- World seed (feel free to leave blank) -->

<div class="card rounded-0 mx-auto p-2 mt-1" style="background-color:#334281; border-radius:10px; height:42px; border:2px solid #4d61a5;">

<p class="col-12 justify-content-between my-0 px-0" style="text-align: center; flex: 0 0 0%;"> Seed: <span style="color:#7d7c79">

info</span> </p>

</div>

<!-- Total world play time -->

<div class="card rounded-0 mx-auto p-2 mt-1" style="background-color:#334281; border-radius:10px; height:42px; border:2px solid #4d61a5">

<p class="col-12 justify-content-between my-0 px-0" style="text-align: center; flex: 0 0 0%;"> Play time: <span style="color:#7d7c79">

info</span> </p>

</div>

<!-- World evil (Corruption/Crimson) -->

<div class="card rounded-0 mx-auto p-2 mt-1" style="background-color:#334281; border-radius:10px; height:42px; border:2px solid #4d61a5">

<p class="col-12 justify-content-between my-0 px-0" style="text-align: center; flex: 0 0 0%;"> World evil: <span style="color:#7d7c79">

info</span> </p>

</div>

</div>

</div>

<!-- Divider -->

<div class="mx-auto my-3" style="border-top:2px solid 030000; width:420px;">

     </div>

<!-- Game progress stat -->

<div class="row no-gutters">

<div class="col-5 pl-4 pr-1">

<p style="margin-top:2px; color:#7d7c79; font-size:16px">Game Progress: 50%</p>

</div>

<div class="col-7 pr-4 pl-1 mt-2">

<div class="card" style="border:2px solid #fff;">

<div class="progress rounded-0" style="height:7px;overflow:visible; background-image: linear-gradient(to right, black , white);">

<div class="progress-bar" style="

width:50%;height:100%;background:rgba(0,0,0,0);">

</div>

<div style="margin:-7px 0 0 -5px;color:#fff;">

<p style="font-size:18px"><b>|</b></p>

</div>

</div>

</div>

</div>

</div>

<!-- (percentage guide) -->

<p style="margin-top:2px; color:#7d7c79; font-size:14px; text-align:center">50% = Hardmode | 100% = Endgame</p>

<!-- NPC progress (number of NPCs collected, does not count Santa) -->

<div class="row no-gutters mt-1">

<div class="col-5 pl-4 pr-1">

<p style="margin-top:2px; color:#7d7c79; font-size:16px">NPC Progress: 50%</p>

</div>

<div class="col-7 pr-4 pl-1 mt-2">

<div class="card" style="border:2px solid #fff;">

<div class="progress rounded-0" style="height:7px;overflow:visible; background-image: linear-gradient(to right, black , white);">

<div class="progress-bar" style="

width:50%;height:100%;background:rgba(0,0,0,0);">

</div>

<div style="margin:-7px 0 0 -5px;color:#fff;">

<p style="font-size:18px"><b>|</b></p>

</div>

</div>

</div>

</div>

</div>

<!-- Bestiary progress -->

<div class="row no-gutters">

<div class="col-5 pl-4 pr-1">

<p style="margin-top:4px; color:#7d7c79; font-size:13px">Bestiary Progress: 50%</p>

</div>

<div class="col-7 pr-4 pl-1 mt-2">

<div class="card" style="border:2px solid #fff;">

<div class="progress rounded-0" style="height:7px;overflow:visible; background-image: linear-gradient(to right, black , white);">

<div class="progress-bar" style="

width:50%;height:100%;background:rgba(0,0,0,0);">

</div>

<div style="margin:-7px 0 0 -5px;color:#fff;">

<p style="font-size:18px"><b>|</b></p>

</div>

</div>

</div>

</div>

</div>

<!-- Divider -->

<div class="mx-auto my-3" style="border-top:2px solid 030000; width:420px;">

     </div>

<!-- Boss trophies (remove the ones corresponding to the bosses you haven't defeated) -->

<div class="row no-gutters mx-2">

<div class="col-2 p-1">

<img src="https://cdn.discordapp.com/attachments/705244109874659370/1112858568564154488/King_Slime_Trophy.png" width="60" height="60">

</div>

<div class="col-2 p-1">

<img src="https://cdn.discordapp.com/attachments/705244109874659370/1112858727968682006/Eye_of_Cthulhu_Trophy.png" width="60" height="60">

</div>

<div class="col-2 p-1">

<img src="https://cdn.discordapp.com/attachments/705244109874659370/1112858728253898802/Eater_of_Worlds_Trophy.png" width="60" height="60">

</div>

<div class="col-2 p-1">

<img src="https://cdn.discordapp.com/attachments/705244109874659370/1112858728505544734/Brain_of_Cthulhu_Trophy.png" width="60" height="60">

</div>

<div class="col-2 p-1">

<img src="https://cdn.discordapp.com/attachments/705244109874659370/1112858728744628384/Queen_Bee_Trophy.png" width="60" height="60">

</div>

<div class="col-2 p-1">

<img src="https://cdn.discordapp.com/attachments/705244109874659370/1112858729038233640/Skeletron_Trophy.png" width="60" height="60">

</div>

<div class="col-2 p-1">

<img src="https://cdn.discordapp.com/attachments/705244109874659370/1112858729294073957/Deerclops_Trophy.png" width="60" height="60">

</div>

<div class="col-2 p-1">

<img src="https://cdn.discordapp.com/attachments/705244109874659370/1112858729537355906/Wall_of_Flesh_Trophy.png" width="60" height="60">

</div>

<div class="col-2 p-1">

<img src="https://cdn.discordapp.com/attachments/705244109874659370/1112858729860304906/Queen_Slime_Trophy.png" width="60" height="60">

</div>

<div class="col-2 p-1">

<img src="https://cdn.discordapp.com/attachments/705244109874659370/1112858730111971368/Destroyer_Trophy.png" width="60" height="60">

</div>

<!-- (The Twins, as one) -->

<div class="col-2 p-1">

<img src="https://cdn.discordapp.com/attachments/705244109874659370/1112858873087402066/Retinazer_Trophy.png" width="60" height="60">

</div>

<div class="col-2 p-1">

<img src="https://cdn.discordapp.com/attachments/705244109874659370/1112858872391147540/Skeletron_Prime_Trophy.png" width="60" height="60">

</div>

<div class="col-2 p-1">

<img src="https://cdn.discordapp.com/attachments/705244109874659370/1112858730317496390/Plantera_Trophy.png" width="60" height="60">

</div>

<div class="col-2 p-1">

<img src="https://cdn.discordapp.com/attachments/705244109874659370/1112858871363539064/Empress_of_Light_Trophy.png" width="60" height="60" style="margin-top:-7px">

</div>

<div class="col-2 p-1">

<img src="https://cdn.discordapp.com/attachments/705244109874659370/1112858871787167787/Golem_Trophy.png" width="60" height="60">

</div>

<div class="col-2 p-1">

<img src="https://cdn.discordapp.com/attachments/705244109874659370/1112858872101736480/Duke_Fishron_Trophy.png" width="60" height="60" style="margin-top:-4px">

</div>

<div class="col-2 p-1">

<img src="https://cdn.discordapp.com/attachments/705244109874659370/1112858873552982077/Lunatic_Cultist_Trophy.png" width="60" height="60">

</div>

<div class="col-2 p-1">

<img src="https://cdn.discordapp.com/attachments/705244109874659370/1112858873867542568/Moon_Lord_Trophy.png" width="60" height="60" style="margin-top:-7px">

</div>

</div>

</div>

</div>

<!--- Tab 4 - Design

Get dye images here: terraria.wiki.gg/wiki/Dyes

Get vanity images here: terraria.wiki.gg/wiki/Vanity_items

Get accessory images here: terraria.wiki.gg/wiki/Accessories

Get the equip images here: terraria.wiki.gg/wiki/Pets + terraria.wiki.gg/wiki/Minecarts + terraria.wiki.gg/wiki/Mounts + terraria.wiki.gg/wiki/Hooks --->

<div class="tab-pane" id="tabter4">

<p class="mb-1" style="font-size:18px; text-align:center; margin-top:-5px">Design & Equips</p>

<div class="card rounded-0 border-0 pb-2" style="background-color:rgba(0,0,0,0); height:280px; overflow:auto">

<div class="row no-gutters">

<div class="col-4 p-1">

<!-- Hair color -->

<div class="row no-gutters">

<div class="col-5 p-1">

<div class="card rounded-0 mx-auto p-2" style="background-color:383a86; border-radius:10px; width:50px; height:50px; border:2px solid #242554">

<div class="card rounded-0 border-0" style="

background-color:#fff; height:30px;">

</div>

</div>

</div>

<div class="col-7 p-1">

<div class="card rounded-0 mx-auto p-2 mt-1" style="background-color:#334281; border-radius:10px; height:42px; border:2px solid #4d61a5">

<p>Hair</p>

</div>

</div>

</div>

<!-- Skin color -->

<div class="row no-gutters">

<div class="col-5 p-1">

<div class="card rounded-0 mx-auto p-2" style="background-color:383a86; border-radius:10px; width:50px; height:50px; border:2px solid #242554">

<div class="card rounded-0 border-0" style="

background-color:#ddd; height:30px;">

</div>

</div>

</div>

<div class="col-7 p-1">

<div class="card rounded-0 mx-auto p-2 mt-1" style="background-color:#334281; border-radius:10px; height:42px; border:2px solid #4d61a5">

<p>Skin</p>

</div>

</div>

</div>

<!-- Eye color -->

<div class="row no-gutters">

<div class="col-5 p-1">

<div class="card rounded-0 mx-auto p-2" style="background-color:383a86; border-radius:10px; width:50px; height:50px; border:2px solid #242554">

<div class="card rounded-0 border-0" style="

background-color:#bbb; height:30px;">

</div>

</div>

</div>

<div class="col-7 p-1">

<div class="card rounded-0 mx-auto p-2 mt-1" style="background-color:#334281; border-radius:10px; height:42px; border:2px solid #4d61a5">

<p>Eyes</p>

</div>

</div>

</div>

<!-- Vest (overshirt) color -->

<div class="row no-gutters">

<div class="col-5 p-1">

<div class="card rounded-0 mx-auto p-2" style="background-color:383a86; border-radius:10px; width:50px; height:50px; border:2px solid #242554">

<div class="card rounded-0 border-0" style="

background-color:#999; height:30px;">

</div>

</div>

</div>

<div class="col-7 p-1">

<div class="card rounded-0 mx-auto p-2 mt-1" style="background-color:#334281; border-radius:10px; height:42px; border:2px solid #4d61a5">

<p>Vest</p>

</div>

</div>

</div>

<!-- Shirt color -->

<div class="row no-gutters">

<div class="col-5 p-1">

<div class="card rounded-0 mx-auto p-2" style="background-color:383a86; border-radius:10px; width:50px; height:50px; border:2px solid #242554">

<div class="card rounded-0 border-0" style="

background-color:#777; height:30px;">

</div>

</div>

</div>

<div class="col-7 p-1">

<div class="card rounded-0 mx-auto p-2 mt-1" style="background-color:#334281; border-radius:10px; height:42px; border:2px solid #4d61a5">

<p>Shirt</p>

</div>

</div>

</div>

<!-- Pants color -->

<div class="row no-gutters">

<div class="col-5 p-1">

<div class="card rounded-0 mx-auto p-2" style="background-color:383a86; border-radius:10px; width:50px; height:50px; border:2px solid #242554">

<div class="card rounded-0 border-0" style="

background-color:#555; height:30px;">

</div>

</div>

</div>

<div class="col-7 p-1">

<div class="card rounded-0 mx-auto p-2 mt-1" style="background-color:#334281; border-radius:10px; height:42px; border:2px solid #4d61a5">

<p>Pants</p>

</div>

</div>

</div>

<!-- Shoe color -->

<div class="row no-gutters">

<div class="col-5 p-1">

<div class="card rounded-0 mx-auto p-2" style="background-color:383a86; border-radius:10px; width:50px; height:50px; border:2px solid #242554">

<div class="card rounded-0 border-0" style="

background-color:#333; height:30px;">

</div>

</div>

</div>

<div class="col-7 p-1">

<div class="card rounded-0 mx-auto p-2 mt-1" style="background-color:#334281; border-radius:10px; height:42px; border:2px solid #4d61a5">

<p>Shoes</p>

</div>

</div>

</div>

</div>

<div class="col-8 p-1">

<div class="row no-gutters">

<!-- Hat vanity -->

<div class="col-4 p-1">

<div class="card rounded-0 mx-auto p-2" style="background-color:383a86; border-radius:10px; width:70px; height:70px; border:2px solid #242554">

<div class="card rounded-0 border-0" style="

background-image:url( imglink ); background-size:contain; background-position: center; background-repeat: no-repeat; height:150px; background-color:rgba(0,0,0,0)">

</div>

</div>

<div class="card rounded-0 border-0 text-truncate" style="background-color:rgba(0,0,0,0); width:70px; margin-top:-15px; margin-left:15px">

<p style="font-size:15px">Hat</p>

</div>

<div style="margin-top:-80px; margin-left:70px">

<!-- Dye -->

<img src=" imglink " width="15" height="15">

</div>

</div>

<!-- Top vanity -->

<div class="col-4 p-1">

<div class="card rounded-0 mx-auto p-2" style="background-color:383a86; border-radius:10px; width:70px; height:70px; border:2px solid #242554">

<div class="card rounded-0 border-0" style="

background-image:url( imglink ); background-size:contain; background-position: center; background-repeat: no-repeat; height:150px; background-color:rgba(0,0,0,0)">

</div>

</div>

<div class="card rounded-0 border-0 text-truncate" style="background-color:rgba(0,0,0,0); width:70px; margin-top:-15px; margin-left:15px">

<p style="font-size:15px">Top</p>

</div>

<div style="margin-top:-80px; margin-left:70px">

<!-- Dye -->

<img src=" imglink " width="15" height="15">

</div>

</div>

<!-- Leggings vanity -->

<div class="col-4 p-1">

<div class="card rounded-0 mx-auto p-2" style="background-color:383a86; border-radius:10px; width:70px; height:70px; border:2px solid #242554">

<div class="card rounded-0 border-0" style="

background-image:url( imglink ); background-size:contain; background-position: center; background-repeat: no-repeat; height:150px; background-color:rgba(0,0,0,0)">

</div>

</div>

<div class="card rounded-0 border-0 text-truncate" style="background-color:rgba(0,0,0,0); width:70px; margin-top:-15px; margin-left:15px">

<p style="font-size:15px">Leggings</p>

</div>

<div style="margin-top:-80px; margin-left:70px">

<!-- Dye -->

<img src=" imglink " width="15" height="15">

</div>

</div>

</div>

<!-- Brief design description -->

<div class="card rounded-0 border-0 mx-auto px-3 py-2 mb-1" style="background-color:#666f9e; border-radius:10px; height:145px; overflow-y:auto; text-align:justify; margin-top:57px">

<p>Little description of design, maybe which accessories are hidden or whatever.</p>

</div>

<div class="row no-gutters">

<!-- Pet -->

<div class="col-4 p-1">

<div class="card rounded-0 mx-auto p-2" style="background-color:383a86; border-radius:10px; width:70px; height:70px; border:2px solid #242554">

<div class="card rounded-0 border-0" style="

background-image:url( imglink ); background-size:contain; background-position: center; background-repeat: no-repeat; height:150px; background-color:rgba(0,0,0,0)">

</div>

</div>

<div class="card rounded-0 border-0 text-truncate" style="background-color:rgba(0,0,0,0); width:70px; margin-top:-15px; margin-left:15px">

<p style="font-size:15px">Pet</p>

</div>

<div style="margin-top:-80px; margin-left:70px">

<!-- Dye -->

<img src=" imglink " width="15" height="15">

</div>

</div>

<!-- Mount -->

<div class="col-4 p-1">

<div class="card rounded-0 mx-auto p-2" style="background-color:383a86; border-radius:10px; width:70px; height:70px; border:2px solid #242554">

<div class="card rounded-0 border-0" style="

background-image:url( imglink ); background-size:contain; background-position: center; background-repeat: no-repeat; height:150px; background-color:rgba(0,0,0,0)">

</div>

</div>

<div class="card rounded-0 border-0 text-truncate" style="background-color:rgba(0,0,0,0); width:70px; margin-top:-15px; margin-left:15px">

<p style="font-size:15px">Mount</p>

</div>

<div style="margin-top:-80px; margin-left:70px">

<!-- Dye -->

<img src=" imglink " width="15" height="15">

</div>

</div>

<!-- Light pet -->

<div class="col-4 p-1">

<div class="card rounded-0 mx-auto p-2" style="background-color:383a86; border-radius:10px; width:70px; height:70px; border:2px solid #242554">

<div class="card rounded-0 border-0" style="background-image:url( imglink ); background-size:contain; background-position: center; background-repeat: no-repeat; height:150px; background-color:rgba(0,0,0,0)">

</div>

</div>

<div class="card rounded-0 border-0 text-truncate" style="background-color:rgba(0,0,0,0); width:70px; margin-top:-15px; margin-left:15px">

<p style="font-size:15px">Light Pet</p>

</div>

<div style="margin-top:-80px; margin-left:70px">

<!-- Dye -->

<img src=" imglink " width="15" height="15">

</div>

</div>

<!-- Minecart -->

<div class="col-4 p-1 mx-auto" style="margin-top:40px;">

<div class="card rounded-0 mx-auto p-2" style="background-color:383a86; border-radius:10px; width:70px; height:70px; border:2px solid #242554">

<div class="card rounded-0 border-0" style="background-image:url( imglink ); background-size:contain; background-position: center; background-repeat: no-repeat; height:150px; background-color:rgba(0,0,0,0)">

</div>

</div>

<div class="card rounded-0 border-0 text-truncate" style="background-color:rgba(0,0,0,0); width:70px; margin-top:-15px; margin-left:15px">

<p style="font-size:15px">Minecart</p>

</div>

<div style="margin-top:-80px; margin-left:70px">

<!-- Dye -->

<img src=" imglink " width="15" height="15">

</div>

</div>

<!-- Grappling hook -->

<div class="col-4 p-1 mx-auto" style="margin-top:40px;">

<div class="card rounded-0 mx-auto p-2" style="background-color:383a86; border-radius:10px; width:70px; height:70px; border:2px solid #242554">

<div class="card rounded-0 border-0" style="background-image:url( imglink ); background-size:contain; background-position: center; background-repeat: no-repeat; height:150px; background-color:rgba(0,0,0,0)">

</div>

</div>

<div class="card rounded-0 border-0 text-truncate" style="background-color:rgba(0,0,0,0); width:70px; margin-top:-15px; margin-left:15px">

<p style="font-size:15px">Hook</p>

</div>

<div style="margin-top:-80px; margin-left:70px">

<!-- Dye -->

<img src=" imglink " width="15" height="15">

</div>

</div>

</div>

</div>

</div>

<!-- Divider -->

<div class="mx-auto my-3" style="border-top:2px solid 030000; width:420px;">

    </div>

<div class="row no-gutters" style="margin-bottom:48px;">

<!-- Accessory 1 -->

<div class="col-3 p-1">

<div class="card rounded-0 mx-auto p-2" style="background-color:383a86; border-radius:10px; width:70px; height:70px; border:2px solid #242554">

<div class="card rounded-0 border-0" style="

background-image:url( imglink ); background-size:contain; background-position: center; background-repeat: no-repeat; height:150px; background-color:rgba(0,0,0,0)">

</div>

</div>

<div style="margin-top:-75px; margin-left:75px">

<!-- Dye -->

<img src=" imglink " width="15" height="15">

</div>

</div>

<!-- Accessory 2 -->

<div class="col-3 p-1">

<div class="card rounded-0 mx-auto p-2" style="background-color:383a86; border-radius:10px; width:70px; height:70px; border:2px solid #242554">

<div class="card rounded-0 border-0" style="

background-image:url( imglink ); background-size:contain; background-position: center; background-repeat: no-repeat; height:150px; background-color:rgba(0,0,0,0)">

</div>

</div>

<div style="margin-top:-75px; margin-left:75px">

<!-- Dye -->

<img src=" imglink " width="15" height="15">

</div>

</div>

<!-- Accessory 3 -->

<div class="col-3 p-1">

<div class="card rounded-0 mx-auto p-2" style="background-color:383a86; border-radius:10px; width:70px; height:70px; border:2px solid #242554">

<div class="card rounded-0 border-0" style="

background-image:url( imglink ); background-size:contain; background-position: center; background-repeat: no-repeat; height:150px; background-color:rgba(0,0,0,0)">

</div>

</div>

<div style="margin-top:-75px; margin-left:75px">

<!-- Dye -->

<img src=" imglink " width="15" height="15">

</div>

</div>

<!-- Accessory 4 -->

<div class="col-3 p-1">

<div class="card rounded-0 mx-auto p-2" style="background-color:383a86; border-radius:10px; width:70px; height:70px; border:2px solid #242554">

<div class="card rounded-0 border-0" style="

background-image:url( imglink ); background-size:contain; background-position: center; background-repeat: no-repeat; height:150px; background-color:rgba(0,0,0,0)">

</div>

</div>

<div style="margin-top:-75px; margin-left:75px">

<!-- Dye -->

<img src=" imglink " width="15" height="15">

</div>

</div>

<!-- Accessory 5 -->

<div class="col-3 p-1 mx-auto" style="margin-top:45px;">

<div class="card rounded-0 mx-auto p-2" style="background-color:383a86; border-radius:10px; width:70px; height:70px; border:2px solid #242554">

<div class="card rounded-0 border-0" style="

background-image:url( imglink ); background-size:contain; background-position: center; background-repeat: no-repeat; height:150px; background-color:rgba(0,0,0,0)">

</div>

</div>

<div style="margin-top:-75px; margin-left:75px">

<!-- Dye -->

<img src=" imglink " width="15" height="15">

</div>

</div>

<!-- (remove acc 6 and 7 if needed) -->

<!-- Accessory 6 -->

<div class="col-3 p-1 mx-auto" style="margin-top:45px;">

<div class="card rounded-0 mx-auto p-2" style="background-color:383a86; border-radius:10px; width:70px; height:70px; border:2px solid #242554">

<div class="card rounded-0 border-0" style="

background-image:url( imglink ); background-size:contain; background-position: center; background-repeat: no-repeat; height:150px; background-color:rgba(0,0,0,0)">

</div>

</div>

<div style="margin-top:-75px; margin-left:75px">

<!-- Dye -->

<img src=" imglink " width="15" height="15">

</div>

</div>

<!-- Accessory 7 -->

<div class="col-3 p-1 mx-auto" style="margin-top:45px;">

<div class="card rounded-0 mx-auto p-2" style="background-color:383a86; border-radius:10px; width:70px; height:70px; border:2px solid #242554">

<div class="card rounded-0 border-0" style="

background-image:url( imglink ); background-size:contain; background-position: center; background-repeat: no-repeat; height:150px; background-color:rgba(0,0,0,0)">

</div>

</div>

<div style="margin-top:-75px; margin-left:75px">

<!-- Dye -->

<img src=" imglink " width="15" height="15">

</div>

</div>

</div>

</div>

</div>

<!--- Tab 5 - Related

Get NPC images here: https://terraria.wiki.gg/wiki/NPCs

Get emote images here: https://terraria.wiki.gg/wiki/Emotes --->

<div class="tab-pane" id="tabter5">

<p class="mb-1" style="font-size:18px; text-align:center; margin-top:-5px">Relations</p>

<div class="card rounded-0 border-0 pb-2" style="background-color:rgba(0,0,0,0); height:280px; overflow:auto">

<!-- Player relation 1 -->

<div class="row no-gutters">

<div class="col-9 pl-1 order-2">

<div class="card rounded-0 border-0 mx-auto px-3 py-2 mt-1" style="background-color:#666f9e; border-radius:10px; height:105px; overflow-y:auto; text-align:justify;">

<p><b><a href=" characterlink " style="color:#fff">Player name.</a></b>

I love this fellow player I play so many capture the gem minigames with them and we also play golf too hehe</p>

</div>

</div>

<div class="col-3 pr-1 order-1">

<div class="card rounded-0 mx-auto p-2" style="background-color:383a86; border-radius:10px; width:110px; height:110px; border:2px solid #242554">

<div class="card rounded-0 border-0" style="

background-image:url( imglink ); background-size:contain; background-position: center; background-repeat: no-repeat; height:110px; background-color:rgba(0,0,0,0)">

</div>

</div>

<!-- Relation emoticon -->

<div class="card rounded-0 border-0 p-2" style="background-image:url(https://cdn.discordapp.com/attachments/705244109874659370/1113177439837892759/speech.png); background-size:contain; background-position: center; background-repeat: no-repeat; height:50px; width:50px; background-color:rgba(0,0,0,0); margin-top:-115px; margin-left:78px">

<div class="card rounded-0 border-0" style="

background-image:url( imglink ); background-size:contain; background-position: center; background-repeat: no-repeat; height:25px; width:25px; background-color:rgba(0,0,0,0); margin-left:4px; margin-top:2px">

</div>

</div>

</div>

</div>

<!-- Divider -->

<div class="mx-auto my-3" style="border-top:2px solid 030000; width:420px;">

     </div>

<!-- NPC relation 1 -->

     <div class="row no-gutters">

<div class="col-9 pl-1 order-2">

<div class="card rounded-0 border-0 mx-auto px-3 py-2 mt-1" style="background-color:#666f9e; border-radius:10px; height:105px; overflow-y:auto; text-align:justify;">

<p><b>NPC name.</b>

The steampunker is pretty cool, I guess. She sells the green solution. That's really it.</p>

</div>

</div>

<div class="col-3 pr-1 order-1">

<div class="card rounded-0 mx-auto p-2" style="background-color:383a86; border-radius:10px; width:110px; height:110px; border:2px solid #242554">

<div class="card rounded-0 border-0" style="

background-image:url( imglink ); background-size:contain; background-position: center; background-repeat: no-repeat; height:110px; background-color:rgba(0,0,0,0)">

</div>

</div>

<!-- Relation emoticon -->

<div class="card rounded-0 border-0 p-2" style="background-image:url(https://cdn.discordapp.com/attachments/705244109874659370/1113177439837892759/speech.png); background-size:contain; background-position: center; background-repeat: no-repeat; height:50px; width:50px; background-color:rgba(0,0,0,0); margin-top:-115px; margin-left:78px">

<div class="card rounded-0 border-0" style="

background-image:url( imglink ); background-size:contain; background-position: center; background-repeat: no-repeat; height:25px; width:25px; background-color:rgba(0,0,0,0); margin-left:4px; margin-top:2px">

</div>

</div>

</div>

</div>

<!-- NPC relation 2 -->

<div class="row no-gutters mt-1">

<div class="col-9 pl-1 order-2">

<div class="card rounded-0 border-0 mx-auto px-3 py-2 mt-1" style="background-color:#666f9e; border-radius:10px; height:105px; overflow-y:auto; text-align:justify;">

<p><b>NPC name.</b>

Just give me a good modifier..... please..... I've spent 50 platinum just give me a good modifier..... I'm begging you......</p>

</div>

</div>

<div class="col-3 pr-1 order-1">

<div class="card rounded-0 mx-auto p-2" style="background-color:383a86; border-radius:10px; width:110px; height:110px; border:2px solid #242554">

<div class="card rounded-0 border-0" style="

background-image:url( imglink ); background-size:contain; background-position: center; background-repeat: no-repeat; height:110px; background-color:rgba(0,0,0,0)">

</div>

</div>

<!-- Relation emoticon -->

<div class="card rounded-0 border-0 p-2" style="background-image:url(https://cdn.discordapp.com/attachments/705244109874659370/1113177439837892759/speech.png); background-size:contain; background-position: center; background-repeat: no-repeat; height:50px; width:50px; background-color:rgba(0,0,0,0); margin-top:-115px; margin-left:78px">

<div class="card rounded-0 border-0" style="

background-image:url( imglink ); background-size:contain; background-position: center; background-repeat: no-repeat; height:25px; width:25px; background-color:rgba(0,0,0,0); margin-left:4px; margin-top:2px">

</div>

</div>

</div>

</div>

<!-- NPC relation 3 -->

<div class="row no-gutters mt-1">

<div class="col-9 pl-1 order-2">

<div class="card rounded-0 border-0 mx-auto px-3 py-2 mt-1" style="background-color:#666f9e; border-radius:10px; height:105px; overflow-y:auto; text-align:justify;">

<p><b>NPC name.</b>

I've never met you before in my life.</p>

</div>

</div>

<div class="col-3 pr-1 order-1">

<div class="card rounded-0 mx-auto p-2" style="background-color:383a86; border-radius:10px; width:110px; height:110px; border:2px solid #242554">

<div class="card rounded-0 border-0" style="

background-image:url( imglink ); background-size:contain; background-position: center; background-repeat: no-repeat; height:110px; background-color:rgba(0,0,0,0)">

</div>

</div>

<!-- Relation emoticon -->

<div class="card rounded-0 border-0 p-2" style="background-image:url(https://cdn.discordapp.com/attachments/705244109874659370/1113177439837892759/speech.png); background-size:contain; background-position: center; background-repeat: no-repeat; height:50px; width:50px; background-color:rgba(0,0,0,0); margin-top:-115px; margin-left:78px">

<div class="card rounded-0 border-0" style="

background-image:url( imglink ); background-size:contain; background-position: center; background-repeat: no-repeat; height:25px; width:25px; background-color:rgba(0,0,0,0); margin-left:4px; margin-top:2px">

</div>

</div>

</div>

</div>

<!-- Divider -->

<div class="mx-auto my-3" style="border-top:2px solid 030000; width:420px;">

     </div>

<!-- NPC Pet relation 1 -->

     <div class="row no-gutters">

<div class="col-9 pl-1 order-2">

<div class="card rounded-0 border-0 mx-auto px-3 py-2 mt-1" style="background-color:#666f9e; border-radius:10px; height:105px; overflow-y:auto; text-align:justify;">

<p><b>Town Pet name.</b>

Who's a good little doggy? You are!</p>

</div>

</div>

<div class="col-3 pr-1 order-1">

<div class="card rounded-0 mx-auto p-2" style="background-color:383a86; border-radius:10px; width:110px; height:110px; border:2px solid #242554">

<div class="card rounded-0 border-0" style="

background-image:url( imglink ); background-size:contain; background-position: center; background-repeat: no-repeat; height:110px; background-color:rgba(0,0,0,0)">

</div>

</div>

<!-- Relation emoticon -->

<div class="card rounded-0 border-0 p-2" style="background-image:url(https://cdn.discordapp.com/attachments/705244109874659370/1113177439837892759/speech.png); background-size:contain; background-position: center; background-repeat: no-repeat; height:50px; width:50px; background-color:rgba(0,0,0,0); margin-top:-115px; margin-left:78px">

<div class="card rounded-0 border-0" style="

background-image:url( imglink ); background-size:contain; background-position: center; background-repeat: no-repeat; height:25px; width:25px; background-color:rgba(0,0,0,0); margin-left:4px; margin-top:2px">

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<!--- Tab buttons --->

<ul class="nav nav-tabs card-header-tabs row no-gutters px-0 mx-auto" style="width:650px;">

<li class="col py-1 mx-auto"><a class="btn rounded-0 p-0 text-white btn-block" style="background-color:rgba(36, 45, 98,.8); border-radius:10px; border:2px solid #030000; height:37px; width:123px; font-size:25px;">About</a>

<a class="btn btn-outline-secondary btn-block rounded-0 border-0 active" style="mix-blend-mode:darken; position:absolute; top:4px; left:4px; height:37px; width:119px; border-radius:9px;" data-toggle="tab" href="#tabter1"></a></li>  

<li class="col p-1 mx-auto"><a class="btn rounded-0 p-0 text-white btn-block" style="background-color:rgba(36, 45, 98,.8); border-radius:10px; border:2px solid #030000; height:37px; width:123px; font-size:25px;">Skills</a>

<a class="btn btn-outline-secondary btn-block rounded-0 border-0" style="mix-blend-mode:darken; position:absolute; top:4px; left:4px; height:37px; width:123px; border-radius:9px;" data-toggle="tab" href="#tabter2"></a></li>

<li class="col p-1 mx-auto"><a class="btn rounded-0 p-0 text-white btn-block" style="background-color:rgba(36, 45, 98,.8); border-radius:10px; border:2px solid #030000; height:37px; width:123px; font-size:25px;">World</a>

<a class="btn btn-outline-secondary btn-block rounded-0 border-0" style="mix-blend-mode:darken; position:absolute; top:4px; left:4px; height:37px; width:123px; border-radius:9px;" data-toggle="tab" href="#tabter3"></a></li>

<li class="col p-1 mx-auto"><a class="btn rounded-0 p-0 text-white btn-block" style="background-color:rgba(36, 45, 98,.8); border-radius:10px; border:2px solid #030000; height:37px; width:123px; font-size:25px;">Design</a>

<a class="btn btn-outline-secondary btn-block rounded-0 border-0" style="mix-blend-mode:darken; position:absolute; top:4px; left:4px; height:37px; width:123px; border-radius:9px;" data-toggle="tab" href="#tabter4"></a></li>

<li class="col py-1 mx-auto"><a class="btn rounded-0 p-0 text-white btn-block" style="background-color:rgba(36, 45, 98,.8); border-radius:10px; border:2px solid #030000; height:37px; width:123px; font-size:25px;">Related</a>

<a class="btn btn-outline-secondary btn-block rounded-0 border-0" style="mix-blend-mode:darken; position:absolute; top:4px; left:4px; height:37px; width:119px; border-radius:9px;" data-toggle="tab" href="#tabter5"></a></li>

</ul>

<!-- Code credit (can be moved, but don't delete!) -->

<p style="font-size:13px; text-align:right;" class="mt-3"><a style="color:#c4415d; text-shadow:0px 0px 0px;" href="https://toyhou.se/MCDogResource"><i class="fas fa-bullseye"></i> Code by maniCARNY</a></p>

</div>

</div>