Codex of the Underworld
created by:dragon-heist
Custom ColorsHTMLCharacter
Copy
<!-- Background. Remove all the styling except for "position: relative;" if you don't want it! -->
<div class="col-12 py-5" style="background:url('https://i.ibb.co/dK7sSb1/House-Administrative-Chamber-ezgif-com-webp-to-png-converter.webp'); background-repeat:no-repeat; background-size:cover; background-position:center; position:relative;">
<!-- Black overlay for the background. Delete if you don't want it! -->
<div class="h-100 w-100" style="position:absolute; background:rgba(0,0,0,0.6); left:0; right:0; top:0; bottom:0;"></div>
<!-- Black overlay end -->
<div class="col-12 p-0 d-flex flex-wrap" style="filter: drop-shadow(0 0 10px black);">
<!-- Header (outline) -->
<div class="col-md-8 col-12 mx-auto mb-2 p-1 order-0" style="
clip-path: polygon(0.13% 2%, 10% 2.5%, 10.54% 4.91%, 11.25% 0.5%, 23% 1%, 24.25% 3.5%, 35.88% 2.5%, 47.25% 0%, 47.88% 3.5%, 48.63% 0.5%, 54.88% 1%, 69.25% 2%, 70.13% 0%, 79.63% 1%, 80.75% 3.5%, 85.13% 0.5%, 93% 1%, 99.38% 1%, 100% 5.5%, 99.88% 32%, 99.25% 34%, 99.88% 36.5%, 100% 56%, 99.25% 60%, 99.63% 77.5%, 98.75% 81%, 99.5% 82.5%, 99.88% 100%, 88.5% 99.5%, 86% 97%, 81.88% 97.5%, 80.38% 99%, 28.38% 98%, 25.25% 96%, 24.25% 98.5%, 1% 100%, 1% 93%, 0% 84%);
background: black;">
<!-- Header fill; change fill colour here -->
<div class="col-12 py-2 px-sm-5 px-3 mr-sm-0 text-center" style="
clip-path: polygon(0.13% 2%, 10% 2.5%, 10.54% 4.91%, 11.25% 0.5%, 23% 1%, 24.25% 3.5%, 35.88% 2.5%, 47.25% 0%, 47.88% 3.5%, 48.63% 0.5%, 54.88% 1%, 69.25% 2%, 70.13% 0%, 79.63% 1%, 80.75% 3.5%, 85.13% 0.5%, 93% 1%, 99.38% 1%, 100% 5.5%, 99.88% 32%, 99.25% 34%, 99.88% 36.5%, 100% 56%, 99.25% 60%, 99.63% 77.5%, 98.75% 81%, 99.5% 82.5%, 99.88% 100%, 88.5% 99.5%, 86% 97%, 81.88% 97.5%, 80.38% 99%, 28.38% 98%, 25.25% 96%, 24.25% 98.5%, 1% 100%, 1% 93%, 0% 84%);
background: linear-gradient(0deg, #100f0f 0%, rgba(30,28,26,1) 44%);
letter-spacing: 13px;
word-spacing: 10px;
font-variant: small-caps;
font-size: 2em;
text-shadow: 3px 3px 0 black;
font-family: 'serif';
color: white;">
Codex of the Underworld
</div>
<!-- Header fill end -->
</div>
<!-- Header end -->
<!-- Tab Navigation (outline) -->
<div class="col-md-9 col-12 mx-auto mb-n4 p-1 order-md-1 order-2" style="z-index: 2;
clip-path: polygon(0.13% 2%, 10% 2.5%, 10.54% 4.91%, 11.25% 0.5%, 23% 1%, 24.25% 3.5%, 35.88% 2.5%, 47.25% 0%, 47.88% 3.5%, 48.63% 0.5%, 54.88% 1%, 69.25% 2%, 70.13% 0%, 79.63% 1%, 80.75% 3.5%, 85.13% 0.5%, 93% 1%, 99.38% 1%, 100% 5.5%, 99.88% 32%, 99.25% 34%, 99.88% 36.5%, 100% 56%, 99.25% 60%, 99.63% 77.5%, 98.75% 81%, 99.5% 82.5%, 99.88% 100%, 88.5% 99.5%, 86% 97%, 81.88% 97.5%, 80.38% 99%, 28.38% 98%, 25.25% 96%, 24.25% 98.5%, 1% 100%, 1% 93%, 0% 84%);
background: black;">
<!-- Tab Navigation fill; change fill colour here -->
<div class="col-12 py-2 px-sm-5 px-3 mr-sm-0 text-center" style="
clip-path: polygon(0.13% 2%, 10% 2.5%, 10.54% 4.91%, 11.25% 0.5%, 23% 1%, 24.25% 3.5%, 35.88% 2.5%, 47.25% 0%, 47.88% 3.5%, 48.63% 0.5%, 54.88% 1%, 69.25% 2%, 70.13% 0%, 79.63% 1%, 80.75% 3.5%, 85.13% 0.5%, 93% 1%, 99.38% 1%, 100% 5.5%, 99.88% 32%, 99.25% 34%, 99.88% 36.5%, 100% 56%, 99.25% 60%, 99.63% 77.5%, 98.75% 81%, 99.5% 82.5%, 99.88% 100%, 88.5% 99.5%, 86% 97%, 81.88% 97.5%, 80.38% 99%, 28.38% 98%, 25.25% 96%, 24.25% 98.5%, 1% 100%, 1% 93%, 0% 84%);
background: linear-gradient(100deg, rgba(12,12,12,1) 0%, rgba(30,28,26,1) 4%, rgba(30,28,26,1) 95%, rgba(12,12,12,1) 100%);
font-variant: small-caps;
font-size: 1.3em;
text-shadow: 0 0 5px black;">
<!-- Navigation tabs; used to switch between content -->
<ul class="nav nav-tabs border-bottom-0 justify-content-between align-items-center d-flex flex-wrap">
<!-- For ease of seeing where the tabs are on mobile and small displays, a pointer will be next to the tab. Delete the FA icon next to the tab label if unwanted. -->
<li class="nav-item" data-toggle="collapse" data-target="#tab1-sections">
<a class="nav-link py-1 px-md-auto px-3 m-md-auto m-1 active" data-toggle="pill" href="#tab1" style="border-radius: 10px; background: transparent; color: white;">
<i class="fa-duotone fa-caret-right d-md-none d-inline mr-2" style="color: #ba8a13;"></i> Tab 1
</a>
</li>
<li class="nav-item" data-toggle="collapse" data-target="#tab2-sections">
<a class="nav-link py-1 px-md-auto px-3 m-md-auto m-1" data-toggle="pill" href="#tab2" style="border-radius: 10px; background: transparent; color: white;">
<i class="fa-duotone fa-caret-right d-md-none d-inline mr-2" style="color: #ba8a13;"></i> Tab 2
</a>
</li>
<li class="nav-item">
<a class="nav-link py-1 px-md-auto px-3 m-md-auto m-1" data-toggle="pill" href="#tab3" style="border-radius: 10px; background: transparent; color: white;">
<i class="fa-duotone fa-caret-right d-md-none d-inline mr-2" style="color: #ba8a13;"></i> Tab 3
</a>
</li>
<li class="nav-item">
<a class="nav-link py-1 px-md-auto px-3 m-md-auto m-1" data-toggle="pill" href="#tab4" style="border-radius: 10px; background: transparent; color: white;">
<i class="fa-duotone fa-caret-right d-md-none d-inline mr-2" style="color: #ba8a13;"></i> Tab 4
</a>
</li>
</ul>
</div>
<!-- Tab Navigation fill end -->
</div>
<!-- Tab Navigation end -->
<!-- Main body container (outline) -->
<div class="col-md-10 col-12 p-1 mx-auto order-md-2 order-1" style="background:black;
clip-path: polygon(0% 0%, 10.29% 0.5%, 11.57% 1.25%, 13.86% 1%, 16.57% 0%, 37.43% 0.5%, 54.29% 0.75%, 55% 2%, 55.86% 0.5%, 77.14% 0.5%, 99.71% 0%, 99.43% 5.75%, 99.71% 12%, 99.57% 24.5%, 99.43% 39.25%, 98.29% 40.75%, 99.43% 41.25%, 99.43% 49.75%, 99% 54.5%, 99% 62.5%, 99.43% 66%, 99.57% 73.25%, 100% 89.25%, 99.43% 90%, 99.71% 91.25%, 100% 99.75%, 98.43% 97%, 97% 99.25%, 85.14% 98.5%, 83.43% 98%, 80.57% 98.5%, 78.86% 99.25%, 64.57% 99.25%, 63.57% 100%, 62% 98.75%, 60.43% 99.75%, 46.29% 99%, 44.86% 100%, 41.43% 100%, 39.86% 99%, 34.86% 98.5%, 23% 98.5%, 22.14% 99.25%, 6.29% 100%, 4% 98%, 2.43% 100%, 0.71% 98.25%, 0.71% 90%, 0.57% 80%, 0.86% 69.5%, 1.29% 68.75%, 0.57% 68.5%, 0.57% 51%, 0.14% 46.75%, 0.29% 37.75%, 1.43% 35%, 0.57% 34.25%, 0.86% 28.25%, 0% 27%, 0.57% 25.75%, 0.29% 17%, 1% 14.25%, 0.14% 11.5%);">
<!-- Main body container fill; change fill colour here -->
<div class="col-12 pt-4 pb-md-5 px-sm-4 p-0 d-flex flex-wrap" style="background: linear-gradient(0deg, rgba(33,31,26,1) 8%, rgba(52,53,50,1) 81%, rgba(65,62,53,1) 100%);
clip-path: polygon(0% 0%, 10.29% 0.5%, 11.57% 1.25%, 13.86% 1%, 16.57% 0%, 37.43% 0.5%, 54.29% 0.75%, 55% 2%, 55.86% 0.5%, 77.14% 0.5%, 99.71% 0%, 99.43% 5.75%, 99.71% 12%, 99.57% 24.5%, 99.43% 39.25%, 98.29% 40.75%, 99.43% 41.25%, 99.43% 49.75%, 99% 54.5%, 99% 62.5%, 99.43% 66%, 99.57% 73.25%, 100% 89.25%, 99.43% 90%, 99.71% 91.25%, 100% 99.75%, 98.43% 97%, 97% 99.25%, 85.14% 98.5%, 83.43% 98%, 80.57% 98.5%, 78.86% 99.25%, 64.57% 99.25%, 63.57% 100%, 62% 98.75%, 60.43% 99.75%, 46.29% 99%, 44.86% 100%, 41.43% 100%, 39.86% 99%, 34.86% 98.5%, 23% 98.5%, 22.14% 99.25%, 6.29% 100%, 4% 98%, 2.43% 100%, 0.71% 98.25%, 0.71% 90%, 0.57% 80%, 0.86% 69.5%, 1.29% 68.75%, 0.57% 68.5%, 0.57% 51%, 0.14% 46.75%, 0.29% 37.75%, 1.43% 35%, 0.57% 34.25%, 0.86% 28.25%, 0% 27%, 0.57% 25.75%, 0.29% 17%, 1% 14.25%, 0.14% 11.5%);">
<!-- Decor; just adds 2 dots to the bottom of the page. Delete if unwanted. -->
<div>
<div style="position: absolute; background: black; width: 12px; height: 10px; z-index: 5; border-radius: 60%;
transform: rotate(34deg);
bottom: 2.5%;
left: 16%;"></div>
<div style="position: absolute; background: black; width: 7px; height: 6px; z-index: 5; border-radius: 60%;
transform: rotate(32deg);
bottom: 2.5%;
left: 18%;"></div>
</div>
<!-- Decor end -->
<!-- Image navigation; can be used for extra outfits or looks, etc. -->
<div class="col-lg-3 col-auto mx-auto order-md-0 order-1" style="filter: drop-shadow(-10px 7px 0 black) drop-shadow(40px 15px 0 #171616);">
<div class="col-12" style="
padding: 4px;
height: 90%;
background: black;
clip-path: polygon(0.75% 0.75%, 10.38% 1.17%, 22.38% 1%, 42.13% 0.5%, 49.38% 0.67%, 58.13% 0.17%, 77.5% 1.17%, 88.25% 0.83%, 89.88% 2.17%, 91.38% 1.17%, 99% 1%, 99% 13.17%, 98.38% 15.67%, 98.88% 17.33%, 99.13% 52.83%, 100% 56.33%, 99.25% 58.5%, 99.38% 74.33%, 100% 81.83%, 99.25% 86.5%, 99.25% 91.83%, 100% 98.33%, 76.25% 97.83%, 43.63% 100%, 41.5% 99.5%, 40.5% 98.67%, 38.5% 100%, 6.25% 99.67%, 5.25% 96.67%, 4.38% 98.67%, 1.38% 98.33%, 0.75% 89%, 0.88% 72.17%, 2.13% 70.67%, 1% 70.17%, 1.25% 55%, 1.63% 45%, 1.5% 35.67%, 2% 34.83%, 1.38% 34.33%, 2.63% 33.83%, 1% 33.67%, 0.63% 23.67%, 1.25% 22.5%, 0.63% 21.17%, 0.75% 8.33%, 1.5% 7.5%, 0.5% 5.67%);">
<div class="col-12 position-sticky" style="
height: 100%;
background: linear-gradient(75deg, rgba(24,24,24,1) 20%, rgba(17,17,17,1) 20%, rgba(17,17,17,1) 43%, rgba(24,24,24,1) 43%, rgba(24,24,24,1) 87%, rgba(17,17,17,1) 87%, rgba(17,17,17,1) 92%, rgba(24,24,24,1) 92%, rgba(24,24,24,1) 94%, rgba(17,17,17,1) 94%);
clip-path: polygon(0.75% 0.75%, 10.38% 1.17%, 22.38% 1%, 42.13% 0.5%, 49.38% 0.67%, 58.13% 0.17%, 77.5% 1.17%, 88.25% 0.83%, 89.88% 2.17%, 91.38% 1.17%, 99% 1%, 99% 13.17%, 98.38% 15.67%, 98.88% 17.33%, 99.13% 52.83%, 100% 56.33%, 99.25% 58.5%, 99.38% 74.33%, 100% 81.83%, 99.25% 86.5%, 99.25% 91.83%, 100% 98.33%, 76.25% 97.83%, 43.63% 100%, 41.5% 99.5%, 40.5% 98.67%, 38.5% 100%, 6.25% 99.67%, 5.25% 96.67%, 4.38% 98.67%, 1.38% 98.33%, 0.75% 89%, 0.88% 72.17%, 2.13% 70.67%, 1% 70.17%, 1.25% 55%, 1.63% 45%, 1.5% 35.67%, 2% 34.83%, 1.38% 34.33%, 2.63% 33.83%, 1% 33.67%, 0.63% 23.67%, 1.25% 22.5%, 0.63% 21.17%, 0.75% 8.33%, 1.5% 7.5%, 0.5% 5.67%);">
<ul class="nav nav-tabs text-right py-md-4 pb-4 px-2 flex-column border-bottom-0 sticky-top" style="font-size: 1.25em;
font-variant: small-caps;
letter-spacing: 1px;">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#image1" style="background: transparent; border: none; border-radius: 10px;">Image 1 <i class="fa-solid fa-triangle fa-rotate-270 ml-3" style="color: #ba8a13;"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#image2" style="background: transparent; border: none; border-radius: 10px;">Image 2 <i class="fa-solid fa-triangle fa-rotate-270 ml-3" style="color: #ba8a13;"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#image3" style="background: transparent; border: none; border-radius: 10px;">Image 3 <i class="fa-solid fa-triangle fa-rotate-270 ml-3" style="color: #ba8a13;"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#image4" style="background: transparent; border: none; border-radius: 10px;">Image 4 <i class="fa-solid fa-triangle fa-rotate-270 ml-3" style="color: #ba8a13;"></i></a>
</li>
</ul>
</div>
</div>
</div>
<!-- Image navigation end -->
<!-- Character name & content (outline) -->
<div class="col-lg-9 col-12 order-md-1 order-0">
<!-- Character name display -->
<div class="col-12 d-flex no-wrap p-0 mb-n5" style="filter: drop-shadow(2px 5px 0 black);
z-index: 2;
font-size: 2em;">
<!-- Character name main body -->
<div class="col-sm-10 col-12 p-2" style="position: relative; border:5px black solid; border-radius: 10px;
background: linear-gradient(58deg, rgba(196,143,8,1) 0%, rgba(196,143,8,1) 5%, rgba(254,228,78,1) 9%, rgba(254,228,78,1) 13%, rgba(255,254,102,1) 16%, rgba(252,253,148,1) 21%, rgba(252,253,148,1) 24%, rgba(231,185,66,1) 29%, rgba(231,185,66,1) 31%, rgba(175,138,46,1) 37%, rgba(175,138,46,1) 42%, rgba(175,138,46,1) 44%, rgba(153,109,1,1) 48%, rgba(140,101,0,1) 54%, rgba(111,79,0,1) 60%, rgba(111,79,0,1) 64%, rgba(143,99,2,1) 67%, rgba(143,99,2,1) 72%, rgba(164,117,1,1) 80%);">
<!-- Character name box deco; triangles at the end of the box -->
<i class="fa-solid fa-triangle fa-rotate-270 ml-4" style="position:absolute;color: black; font-size: 0.3em; right:9px; top:12px; z-index:1;"></i>
<i class="fa-solid fa-triangle fa-rotate-270 ml-4" style="position:absolute;color: black; font-size: 0.3em; right:9px; top:26px; z-index:1;"></i>
<i class="fa-solid fa-triangle fa-rotate-270 ml-4" style="position:absolute;color: black; font-size: 0.3em; right:9px; top:39px; z-index:1;"></i>
<i class="fa-solid fa-triangle fa-rotate-270 ml-4" style="position:absolute;color: black; font-size: 0.3em; right:9px; top:53px; z-index:1;"></i>
<!-- Character name box deco; triangles end -->
<!-- CHARACTER NAME GOES HERE -->
<div class="col-12 p-0" style="border:2px black solid; border-left: 2px black dashed; border-radius: 5px;">
<div class="col-12" style="border:4px #996D01 solid; border-radius:5px;color:black;letter-spacing:1px;font-variant:small-caps;text-shadow:1px 1px 0 black;">
Character
</div>
</div>
<!-- CHARACTER NAME END -->
</div>
<!-- Character name main body end -->
<!-- Character name deco; tassels at the end. Will not appear on small displays due to the layout getting messed up -->
<div class="col-2 d-sm-block d-none">
<div class="row d-flex no-wrap">
<div class="rounded-circle" style="background:#9C6F01; border:black solid;border-width:3px 4px 3px 5px;width:17px;height:15px;"></div>
<div class="col-9 d-sm-block d-none" style="clip-path: polygon(0% 11%, 97.5% 1%, 99.38% 5%, 100% 88.5%, 99.25% 96%, 0% 88.5%); background:black; height:15px; border-left: none; padding: 4px 5px 2px 1px;">
<div class="col-12 w-100 h-100" style="clip-path: polygon(0% 11%, 97.5% 1%, 99.38% 5%, 100% 88.5%, 99.25% 96%, 0% 88.5%); background: linear-gradient(58deg, rgba(164,117,1,1) 25%, rgba(143,99,2,1) 47%, rgba(111,79,0,1) 64%);"></div>
</div>
</div>
<div class="row d-flex no-wrap">
<div class="rounded-circle" style="background:#9C6F01; border:black solid;border-width:3px 4px 3px 4px;width:18px;height:18px;"></div>
<div class="col-9 d-sm-block d-none" style="clip-path: polygon(0% 11%, 97.5% 1%, 99.38% 5%, 100% 88.5%, 99.25% 96%, 0% 88.5%); background:black; height:16px; border-left: none; padding: 3px 4px 5px 1px; margin-top:2px;">
<div class="col-12 w-100 h-100" style="clip-path: polygon(0% 11%, 97.5% 1%, 99.38% 5%, 100% 88.5%, 99.25% 96%, 0% 88.5%); background: linear-gradient(58deg, rgba(164,117,1,1) 25%, rgba(143,99,2,1) 47%, rgba(111,79,0,1) 64%);"></div>
</div>
</div>
<div class="row d-flex no-wrap">
<div class="rounded-circle" style="background:#9C6F01; border:black solid;border-width:3px 4px 3px 4px;width:20px;height:18px;"></div>
<div class="col-9 d-sm-block d-none" style="clip-path: polygon(0% 11%, 97.5% 1%, 99.38% 5%, 100% 88.5%, 99.25% 96%, 0% 88.5%); background:black; height:18px; border-left: none; padding: 3px 4px 5px 1px;">
<div class="col-12 w-100 h-100" style="clip-path: polygon(0% 11%, 97.5% 1%, 99.38% 5%, 100% 88.5%, 99.25% 96%, 0% 88.5%); background: linear-gradient(58deg, rgba(164,117,1,1) 25%, rgba(143,99,2,1) 47%, rgba(111,79,0,1) 64%);"></div>
</div>
</div>
<div class="row d-flex no-wrap">
<div class="rounded-circle" style="background:#9C6F01; border:black solid;border-width:3px 4px 3px 3px;width:17px;height:16px;"></div>
<div class="col-9 d-sm-block d-none" style="clip-path: polygon(0% 11%, 97.5% 1%, 99.38% 5%, 100% 88.5%, 99.25% 96%, 0% 88.5%); background:black; height:16px; border-left: none; padding: 3px 4px 5px 1px; margin-top:2px;">
<div class="col-12 w-100 h-100" style="clip-path: polygon(0% 11%, 97.5% 1%, 99.38% 5%, 100% 88.5%, 99.25% 96%, 0% 88.5%); background: linear-gradient(58deg, rgba(164,117,1,1) 25%, rgba(143,99,2,1) 47%, rgba(111,79,0,1) 64%);"></div>
</div>
</div>
<div class="row d-flex no-wrap">
<div class="rounded-circle" style="background:#9C6F01; border:black solid;border-width:4px 4px 4px 3px;width:15px;height:15px;"></div>
<div class="col-9 d-sm-block d-none" style="clip-path: polygon(0% 11%, 97.5% 1%, 99.38% 5%, 100% 88.5%, 99.25% 96%, 0% 88.5%); background:black; height:18px; border-left: none; padding: 3px 4px 5px 1px;">
<div class="col-12 w-100 h-100" style="clip-path: polygon(0% 11%, 97.5% 1%, 99.38% 5%, 100% 88.5%, 99.25% 96%, 0% 88.5%); background: linear-gradient(58deg, rgba(164,117,1,1) 25%, rgba(143,99,2,1) 47%, rgba(111,79,0,1) 64%);"></div>
</div>
</div>
</div>
<!-- Character name deco; tassels end -->
</div>
<!-- Character name display end -->
<!-- CONTENT GOES HERE -->
<div style="filter: drop-shadow(-15px 18px 0 #171616) drop-shadow(12px 0px 0 #171616);">
<!-- Content body (outline) -->
<div class="col-12 p-1" style="
background: black;
clip-path: polygon(0.75% 0.75%, 10.38% 1.17%, 22.38% 1%, 42.13% 0.5%, 49.38% 0.67%, 58.13% 0.17%, 77.5% 1.17%, 88.25% 0.83%, 89.88% 2.17%, 91.38% 1.17%, 99% 1%, 99% 13.17%, 98.38% 15.67%, 98.88% 17.33%, 99.13% 52.83%, 100% 56.33%, 99.25% 58.5%, 99.38% 74.33%, 100% 81.83%, 99.25% 86.5%, 99.25% 91.83%, 100% 98.33%, 76.25% 97.83%, 43.63% 100%, 41.5% 99.5%, 40.5% 98.67%, 38.5% 100%, 6.25% 99.67%, 5.25% 96.67%, 4.38% 98.67%, 1.38% 98.33%, 0.75% 89%, 0.88% 72.17%, 2.13% 70.67%, 1% 70.17%, 1.25% 55%, 1.63% 45%, 1.5% 35.67%, 2% 34.83%, 1.38% 34.33%, 2.63% 33.83%, 1% 33.67%, 0.63% 23.67%, 1.25% 22.5%, 0.63% 21.17%, 0.75% 8.33%, 1.5% 7.5%, 0.5% 5.67%);">
<!-- Content fill; change fill colour here -->
<div class="col-12 d-flex flex-wrap pl-sm-5 pt-sm-5 pb-sm-4 py-5" style="
height: 100%;
background: linear-gradient(55deg, rgba(39,36,28,1) 0%, rgba(39,36,28,1) 5%, rgba(60,51,36,1) 5%, rgba(60,51,36,1) 7%, rgba(63,60,49,1) 7%, rgba(63,60,49,1) 11%, rgba(52,49,41,1) 39%, rgba(52,49,41,1) 53%, rgba(63,60,49,1) 82%, rgba(63,60,49,1) 92%, rgba(60,51,36,1) 92%, rgba(60,51,36,1) 94%, rgba(51,48,40,1) 94%, rgba(51,48,40,1) 96%, rgba(39,36,28,1) 96%);
clip-path: polygon(0.75% 0.75%, 10.38% 1.17%, 22.38% 1%, 42.13% 0.5%, 49.38% 0.67%, 58.13% 0.17%, 77.5% 1.17%, 88.25% 0.83%, 89.88% 2.17%, 91.38% 1.17%, 99% 1%, 99% 13.17%, 98.38% 15.67%, 98.88% 17.33%, 99.13% 52.83%, 100% 56.33%, 99.25% 58.5%, 99.38% 74.33%, 100% 81.83%, 99.25% 86.5%, 99.25% 91.83%, 100% 98.33%, 76.25% 97.83%, 43.63% 100%, 41.5% 99.5%, 40.5% 98.67%, 38.5% 100%, 6.25% 99.67%, 5.25% 96.67%, 4.38% 98.67%, 1.38% 98.33%, 0.75% 89%, 0.88% 72.17%, 2.13% 70.67%, 1% 70.17%, 1.25% 55%, 1.63% 45%, 1.5% 35.67%, 2% 34.83%, 1.38% 34.33%, 2.63% 33.83%, 1% 33.67%, 0.63% 23.67%, 1.25% 22.5%, 0.63% 21.17%, 0.75% 8.33%, 1.5% 7.5%, 0.5% 5.67%);">
<!-- Character Images; they're set up to be sticky but will not be sticky on this version of the code -->
<div class="position-sticky col-lg-2 col-md-3 col-11 p-0 my-sm-4 mt-4 mb-2 mx-auto">
<div class="tab-content">
<!-- Character Image 1 -->
<!-- Top container is for a background. Image is changed in the child container -->
<div class="p-0 rounded sticky-top tab-pane fade show active" id="image1" style="border: 2px #78592c solid;
background: linear-gradient(0deg, rgba(57,4,4,1) 32%, rgba(128,35,25,1) 100%);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
box-shadow: 0 0 5px black;">
<!-- Change image URL in styling below to character; position the background to show the image how you'd like -->
<div class="col-12 w-100 m-0 rounded" style="
background-image: url('https://i.imgur.com/BwiCt3X.png');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 450px;
filter: drop-shadow(0 0 3px black);"></div>
</div>
<!-- Character Image 1 end -->
<!-- Character Image 2 -->
<!-- Top container is for a background. Image is changed in the child container -->
<div class="p-0 rounded sticky-top tab-pane fade" id="image2" style="border: 2px #78592c solid;
background: linear-gradient(0deg, rgb(34,22,38) 32%, rgb(118,81,140) 100%);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
box-shadow: 0 0 5px black;">
<!-- Change image URL in styling below to character; position the background to show the image how you'd like -->
<div class="col-12 w-100 m-0 rounded" style="
background-image: url('https://i.ibb.co/nmP4THK/ezgif-com-webp-to-png-converter-1.png');
background-repeat: no-repeat;
background-size: cover;
background-position: 65%;
height: 450px;
filter: drop-shadow(0 0 3px black);"></div>
</div>
<!-- Character Image 2 end -->
<!-- Character Image 3 -->
<!-- Top container is for a background. Image is changed in the child container -->
<div class="p-0 rounded sticky-top tab-pane fade" id="image3" style="border: 2px #78592c solid;
background: linear-gradient(0deg, rgb(56,13,13) 10%, rgb(47,147,57) 100%);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
box-shadow: 0 0 5px black;">
<!-- Change image URL in styling below to character; position the background to show the image how you'd like -->
<div class="col-12 w-100 m-0 rounded" style="
background-image: url('https://i.ibb.co/FDhgRGq/ezgif-com-webp-to-png-converter.png');
background-repeat: no-repeat;
background-size: cover;
background-position: 65%;
height: 450px;
filter: drop-shadow(0 0 3px black);"></div>
</div>
<!-- Character Image 3 end -->
<!-- Character Image 4 -->
<!-- Top container is for a background. Image is changed in the child container -->
<div class="p-0 rounded sticky-top tab-pane fade" id="image4" style="border: 2px #78592c solid;
background: linear-gradient(0deg, rgb(67,36,56) 32%, rgb(84,45,63) 100%);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
box-shadow: 0 0 5px black;">
<!-- Change image URL in styling below to character; position the background to show the image how you'd like -->
<div class="col-12 w-100 m-0 rounded" style="
background-image: url('https://i.ibb.co/Vg6GCjf/ezgif-com-webp-to-png-converter-2.png');
background-repeat: no-repeat;
background-size: cover;
background-position: 40%;
height: 450px;
filter: drop-shadow(0 0 3px black);"></div>
</div>
<!-- Character Image 4 end -->
</div>
</div>
<!-- Character Images end -->
<!-- MAIN CONTENT GOES HERE; like your text and stuff -->
<div class="col-lg-10 col-md-7 col-12 py-4 pl-md-3 pr-md-2 px-0 h-100">
<!-- If you don't want to use the scrollbox, remove the styling from the below container -->
<div class="col-12" style="overflow-y: auto; height: 500px; scrollbar-width: thin; color: white;">
<div class="tab-content">
<!-- Tab 1 Content -->
<div class="tab-pane fade show active" id="tab1">
<h1 class="font-weight-bold mb-3" style="color: #EFB01C; font-variant: small-caps; font-size: 1.7em; letter-spacing: 1px;">
<i class="fa-duotone fa-wreath-laurel mr-2"></i> Section I.I
</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum vel ipsum nec ultricies. Vivamus vel sodales ex. In et ipsum non tellus venenatis aliquet vitae non massa. Vivamus sit amet augue in est tristique finibus vel ut ipsum. Nullam consequat lacinia ex, et lobortis tortor pulvinar volutpat. Praesent justo magna, tempus eu tristique at, interdum ac lacus. Nunc at odio malesuada, consequat mauris quis, bibendum enim. Suspendisse tristique sem mollis diam vehicula, gravida facilisis leo tempus. Nulla augue dui, pretium ut fermentum vel, rutrum sed turpis. Morbi tempus varius velit, sed cursus urna faucibus eget. Fusce elementum ante purus, non tincidunt diam lacinia sit amet.</p>
<p>Vestibulum eget lobortis ipsum. Aliquam sit amet lorem non lorem semper sodales. Nulla a vulputate turpis. Aenean semper ipsum non purus dapibus vehicula. Sed vel bibendum odio. Proin nec nisl quis odio aliquam molestie. Fusce imperdiet elit sit amet sem malesuada sodales.</p>
<hr class="col-11 mx-auto my-4"style="border-style: dashed; border-width: 2px; border-color: rgb(24,24,24,0.75);">
<h1 class="font-weight-bold mb-3" style="color: #EFB01C; font-variant: small-caps; font-size: 1.7em; letter-spacing: 1px;">
<i class="fa-duotone fa-wreath-laurel mr-2"></i> Section I.II
</h1>
<p>Integer condimentum, risus et sagittis blandit, ex metus molestie neque, in consequat ligula tellus sit amet ipsum. Nunc dignissim, turpis sed lobortis dignissim, mauris odio fringilla diam, sed pulvinar tortor lorem eget felis. Mauris turpis ante, pretium ac condimentum vel, interdum eget libero. Cras scelerisque augue facilisis nisl euismod, id ultricies elit posuere. Vestibulum eget efficitur lacus. Cras dui augue, varius in nulla pharetra, fermentum tempor urna. Donec ac tortor vel leo commodo posuere. Cras suscipit magna et maximus placerat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum vel ipsum nec ultricies. Vivamus vel sodales ex. In et ipsum non tellus venenatis aliquet vitae non massa. Vivamus sit amet augue in est tristique finibus vel ut ipsum. Nullam consequat lacinia ex, et lobortis tortor pulvinar volutpat. Praesent justo magna, tempus eu tristique at, interdum ac lacus. Nunc at odio malesuada, consequat mauris quis, bibendum enim. Suspendisse tristique sem mollis diam vehicula, gravida facilisis leo tempus. Nulla augue dui, pretium ut fermentum vel, rutrum sed turpis. Morbi tempus varius velit, sed cursus urna faucibus eget. Fusce elementum ante purus, non tincidunt diam lacinia sit amet.</p>
<p>Vestibulum eget lobortis ipsum. Aliquam sit amet lorem non lorem semper sodales. Nulla a vulputate turpis. Aenean semper ipsum non purus dapibus vehicula. Sed vel bibendum odio. Proin nec nisl quis odio aliquam molestie. Fusce imperdiet elit sit amet sem malesuada sodales.</p>
<hr class="col-11 mx-auto my-4"style="border-style: dashed; border-width: 2px; border-color: rgb(24,24,24,0.75);">
<h1 class="font-weight-bold mb-3" style="color: #EFB01C; font-variant: small-caps; font-size: 1.7em; letter-spacing: 1px;">
<i class="fa-duotone fa-wreath-laurel mr-2"></i> Section I.III
</h1>
<p>Integer condimentum, risus et sagittis blandit, ex metus molestie neque, in consequat ligula tellus sit amet ipsum. Nunc dignissim, turpis sed lobortis dignissim, mauris odio fringilla diam, sed pulvinar tortor lorem eget felis. Mauris turpis ante, pretium ac condimentum vel, interdum eget libero. Cras scelerisque augue facilisis nisl euismod, id ultricies elit posuere. Vestibulum eget efficitur lacus. Cras dui augue, varius in nulla pharetra, fermentum tempor urna. Donec ac tortor vel leo commodo posuere. Cras suscipit magna et maximus placerat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum vel ipsum nec ultricies. Vivamus vel sodales ex. In et ipsum non tellus venenatis aliquet vitae non massa. Vivamus sit amet augue in est tristique finibus vel ut ipsum. Nullam consequat lacinia ex, et lobortis tortor pulvinar volutpat. Praesent justo magna, tempus eu tristique at, interdum ac lacus. Nunc at odio malesuada, consequat mauris quis, bibendum enim. Suspendisse tristique sem mollis diam vehicula, gravida facilisis leo tempus. Nulla augue dui, pretium ut fermentum vel, rutrum sed turpis. Morbi tempus varius velit, sed cursus urna faucibus eget. Fusce elementum ante purus, non tincidunt diam lacinia sit amet.</p>
</div>
<!-- Tab 1 Content end -->
<!-- Tab 2 Content -->
<div class="tab-pane fade" id="tab2">
<h1 class="font-weight-bold mb-3" style="color: #EFB01C; font-variant: small-caps; font-size: 1.7em; letter-spacing: 1px;">
<i class="fa-duotone fa-wreath-laurel mr-2"></i> Section II.I
</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in gravida nisl. In eget dolor malesuada urna tempus consectetur. Praesent condimentum nibh elit, in pellentesque magna pulvinar ac. Nullam id vulputate tortor. Fusce porttitor nibh in leo condimentum malesuada. Donec fermentum condimentum velit cursus pellentesque. Phasellus commodo nunc a libero sollicitudin, tincidunt commodo tortor consectetur. </p>
<p>Cras nibh dolor, vulputate ac lacus at, iaculis pretium urna. Fusce eu efficitur metus. Nullam faucibus lacus ipsum, at luctus ante placerat ac. Integer sed condimentum velit, vitae finibus velit. Integer iaculis ultricies elit vulputate pharetra. In quis eros mi. Phasellus cursus, libero a interdum ultrices, orci sapien pretium sapien, auctor porttitor sem mauris eu velit. Pellentesque commodo massa eget arcu sollicitudin, ut imperdiet augue sollicitudin. Mauris ultricies, enim sed gravida aliquam, sem odio tempor sem, vitae hendrerit orci arcu eget orci. Quisque nec tortor nec urna accumsan sagittis nec id leo. Proin tincidunt tincidunt velit, sed viverra lorem tempor tincidunt. Duis id elit ut ligula tempor efficitur nec at justo. Duis vel tortor massa. Etiam nec nisl fringilla, scelerisque purus eu, consectetur felis. Nulla mattis elit ac aliquet blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>
<!-- Tab 2 Content end -->
<!-- Tab 3 Content -->
<div class="tab-pane fade" id="tab3">
<h1 class="font-weight-bold mb-3" style="color: #EFB01C; font-variant: small-caps; font-size: 1.7em; letter-spacing: 1px;">
<i class="fa-duotone fa-wreath-laurel mr-2"></i> Section III.I
</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas odio magna, dictum in venenatis eget, bibendum malesuada nisi. Maecenas varius elementum lorem nec molestie. Etiam consectetur molestie nulla rhoncus iaculis. Praesent tincidunt convallis urna quis egestas. Nulla sed iaculis erat, ac vulputate justo. Suspendisse eu nunc ac ex interdum bibendum ut tincidunt odio. Mauris tincidunt, nunc vehicula maximus tempor, turpis diam luctus nisi, eget ornare felis mi vitae nisi. Curabitur congue neque non dolor suscipit malesuada. Curabitur ullamcorper ipsum mauris, eget faucibus est sollicitudin sed. Curabitur vestibulum luctus velit, at elementum odio euismod ac. Sed commodo, arcu ac scelerisque malesuada, ante orci ultrices sapien, sed laoreet orci diam non turpis. Mauris consectetur ante rhoncus ligula lacinia posuere. Pellentesque mollis ac eros at semper. Aliquam vulputate libero condimentum, iaculis purus eget, elementum est. Fusce sed sapien mi. Sed gravida molestie leo. </p>
<p>Donec urna augue, posuere ut lacus vel, semper euismod augue. Pellentesque vel hendrerit risus, a sodales metus. Integer nec enim at dui vestibulum mattis ut eu purus. Phasellus eu arcu in risus suscipit vulputate at eu nisi. Ut nisl neque, molestie quis egestas nec, volutpat finibus lacus. Vivamus at gravida sem. Duis interdum augue ut odio auctor malesuada. </p>
</div>
<!-- Tab 3 Content end -->
<!-- Tab 4 Content -->
<div class="tab-pane fade" id="tab4">
<h1 class="font-weight-bold mb-3" style="color: #EFB01C; font-variant: small-caps; font-size: 1.7em; letter-spacing: 1px;">
<i class="fa-duotone fa-wreath-laurel mr-2"></i> Section IV.I
</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ullamcorper felis massa, varius eleifend nunc commodo sit amet. Vestibulum vitae cursus augue. Proin lectus velit, ullamcorper at ex vitae, placerat accumsan nibh. Nulla eget elit dapibus, posuere turpis a, tempus purus. Integer metus neque, porttitor rhoncus neque non, egestas blandit leo. Suspendisse convallis, augue et tempor dapibus, ex nunc pretium lorem, sed feugiat massa est eget mauris. Aliquam erat volutpat. Maecenas tellus turpis, suscipit sit amet sapien in, mollis elementum dui. Cras vehicula elit vestibulum volutpat aliquam. Nullam semper diam sed sem hendrerit dapibus. Nam fringilla sollicitudin eros, eget rhoncus magna posuere id. Pellentesque viverra, odio ut convallis lobortis, massa dolor mattis purus, in euismod velit erat ut lorem. Nulla in sapien at nunc varius egestas. Nulla a lectus ex. Duis nec porta lacus.</p>
<p>Fusce vel lacus vitae ligula rhoncus pharetra id vel velit. Sed porta ac erat id interdum. Nullam quam lorem, mattis nec tempus ut, efficitur vel mauris. Etiam tellus dolor, dapibus et quam vel, luctus ultrices sapien. In rhoncus condimentum felis, non sollicitudin sem euismod placerat. Cras feugiat dapibus venenatis. Vivamus enim purus, gravida laoreet cursus nec, gravida sed lectus. Morbi vel felis a enim pretium dictum sed at urna.</p>
</div>
<!-- Tab 4 Content end -->
</div>
</div>
</div>
<!-- MAIN CONTENT END -->
</div>
<!-- Content fill end -->
</div>
<!-- Content body end -->
</div>
<!-- CONTENT END -->
</div>
<!-- Character name & content end -->
</div>
<!-- Main body container fill end -->
</div>
<!-- Main body container end -->
</div>
<!-- CREDITS; DO NOT REMOVE -->
<div class="col-md-10 col-12 mx-auto text-right">
<!-- Remove or change the link for this first credit if you change the background! -->
<a class="text-light" data-toggle="tooltip" data-placement="top" title="Background © Supergiant Games" href="https://store.supergiantgames.com/"><i class="fa-regular fa-image"></i></a>
<a class="text-light" data-toggle="tooltip" data-placement="top" title="Code by dragon-heist" href="https://toyhou.se/dragon-heist"><i class="fa-regular fa-code"></i></a>
</div>
<!-- CREDITS end -->
</div>