[F2U] Mangadex World + Folder Code

Custom ColorsHTMLFolderWorld

Line Count: 330

Difficulty:

World Version
Folder Version
Full Folder Version
Deluxe World - Front Page
Deluxe World - Group Page
Deluxe World - Lore Page

<!--MANGADEX WORLD CODE
I wanted to make a Mangadex code for AGES now, so I made one for worlds! This one is based off the Dracula color scheme, but it can easily be edited to any colors you like.

COLOR KEY: #282A36 - Background Color
           #A179C0 - Accent Color
           #383E48 - Main Button Color
           #343746 - Tags and Mini Button Color
           #8BE9FD - Dot Color
           #fff - Text
-->
<div class="container-fluid" style="font-size: 13pt; color: #fff;">
<div class="card rounded-0 border-0" style="background: #282A36;">

<!--COVER IMG-->
<div class="card border-0" style="background: url(
    
    https://dummyimage.com/250x350/FFF/000000
    
    ) center; background-size: contain; background-repeat: no-repeat; height: 350px; width: 250px; z-index: 99; position: absolute; left:5%; top: 2%;">
    
    <!--IMG CREDIT-->
        <a class="p-2 text-muted tooltipster m-4" title="IMG CREDIT" href="https://unsplash.com/photos/dome-building-near-trees-zY36f4ABhik" style="opacity:.6;"><i class="fas fa-image"></i></a>
    
    <!--COUNTRY OF ORIGIN FLAG-->
    <div class="card bg-transparent border-0 p-3" style="z-index: 100; text-align: right; top: 60%;">
        🇯🇵
    </div>
    <!--END OF COUNTRY OF ORIGIN FLAG-->
    
</div>
<!--END OF COVER IMG-->

<!--DESKTOP INFO-->
<div class="card bg-transparent hidden-sm-down border-0 p-3" style="z-index: 100; position: absolute; left: 30%; top: 5%; width: 65%;">

<h1 class="font-weight-bold" style="font-size: 50pt; text-shadow: 5px 5px 5px #000;">Manga Title</h1>
<h1 class="mb-5" style="text-shadow: 5px 5px 5px #000;">Byline or alternative title</h1>
<p class="mt-4" style="text-shadow: 5px 5px 5px #000;">Author Name</p>

<div class="row mt-3">
<!--BUTTON LINK-->
<div class="col-md-4">
<div class="card border-0 text-center justify-content-centerp-3 p-3" style="background-color: #A179C0;">
    <a class="btn btn-outline-secondary border-0" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a><h2 style="font-weight: bold;">Join World</h2>
</div>
</div>
<!--END OF BUTTON LINK-->

<!--BUTTON LINK-->
<div class="col-md-4">
<div class="card border-0 text-center justify-content-center p-3" style="background-color: #383E48;">
    <a class="btn btn-outline-secondary border-0" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a><h2 style="font-weight: bold;"><i class="fa-regular fa-book-open"></i> Read Lore</h2>
</div>
</div>
<!--END OF BUTTON LINK-->

<!--BUTTON LINK-->
<div class="col-sm-2">
<div class="card border-0 text-center justify-content-center p-3" style="background-color: #383E48;">
    <a class="btn btn-outline-secondary border-0" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a><h2 style="font-weight: bold;"><i class="fa-regular fa-flag"></i></h2>
</div>
</div>
<!--END OF BUTTON LINK-->

<!--BUTTON LINK-->
<div class="col-sm-2">
<div class="card border-0 text-center justify-content-center p-3" style="background-color: #383E48;">
    <a class="btn btn-outline-secondary border-0" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a><h2 style="font-weight: bold;"><i class="fa-regular fa-arrow-up-from-bracket"></i></h2>
</div>
</div>
<!--END OF BUTTON LINK-->
</div>

<!--TAGS
COLLAPSE AND DELETE IF YOU DO NOT WANT TO KEEP-->
<div class="row mt-3" style="font-size:10pt;">

    <div class="col- card m-2 p-2 border-0" style="background: #343746; border-radius: 10px;">
        <p>#story_tag</p>
    </div>
    
    <div class="col- card m-2 p-2 border-0" style="background: #343746; border-radius: 10px;">
        <p>#story_tag</p>
    </div>
    
    <div class="col- card m-2 p-2 border-0" style="background: #343746; border-radius: 10px;">
        <p>#this is a longer tag</p>
    </div>
    
    <div class="col- card m-2 p-2 border-0" style="background: #343746; border-radius: 10px;">
        <p>#story_tag</p>
    </div>

    <div class="col- card m-2 p-2 border-0" style="background: #343746; border-radius: 10px;">
        <p>#story_tag</p>
    </div>
    
    <div class="col- card m-2 p-2 border-0" style="background: #343746; border-radius: 10px;">
        <p>#story_tag</p>
    </div>

<!--PASTE MORE ABOVE HERE
I suggest not going voerboard with these; it'll look ugly if they get too long-->
</div>
<!--END OF TAGS-->

<p class="font-weight-bold" style="font-size: 12pt;"><i class="fas fa-circle" style="color: #8BE9FD"></i> Established: 2024</p>

</div>
<!--END OF DESKTOP INFO-->

<!--BLURRED COVER IMG-->
<div class="mb-5" style="background: url(https://dummyimage.com/250x350/FFF/000000) top; background-size: cover; min-height: 300px; filter: blur(5px); position: relative;">
</div>
<!--BLURRED COVER IMG-->

<!--MOBILE INFO-->
<div class="card bg-transparent d-lg-none border-0 pt-5 px-3 mt-5">

<h1 class="font-weight-bold" style="font-size: 50pt; text-shadow: 5px 5px 5px #000;">Manga Title</h1>
<h1 style="text-shadow: 5px 5px 5px #000;">Byline or alternative title</h1>
<p style="text-shadow: 5px 5px 5px #000;">Author Name</p>

<!--MAIN LINKS-->
<div class="row">
<!--BUTTON LINK-->
<div class="col-md-4 card border-0 text-center justify-content-center m-2 p-3" style="background-color: #A179C0;">
    <a class="btn btn-outline-secondary border-0" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a><h2 style="font-weight: bold;">Join World</h2>
</div>
<!--END OF BUTTON LINK-->

<!--BUTTON LINK-->
<div class="col-md-4 card border-0 text-center justify-content-center m-2 p-3" style="background-color: #383E48;">
    <a class="btn btn-outline-secondary border-0" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a><h2 style="font-weight: bold;"><i class="fa-regular fa-book-open"></i> Read Lore</h2>
</div>
<!--END OF BUTTON LINK-->

<!--BUTTON LINK-->
<div class="col-sm-2 card border-0 text-center justify-content-center m-2 p-3" style="background-color: #383E48;">
    <a class="btn btn-outline-secondary border-0" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a><h2 style="font-weight: bold;"><i class="fa-regular fa-flag"></i></h2>
</div>
<!--END OF BUTTON LINK-->

<!--BUTTON LINK-->
<div class="col-sm-2 card border-0 text-center justify-content-center m-2 p-3" style="background-color: #383E48;">
    <a class="btn btn-outline-secondary border-0" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a><h2 style="font-weight: bold;"><i class="fa-regular fa-arrow-up-from-bracket"></i></h2>
</div>
<!--END OF BUTTON LINK-->
</div>
<!--END OF MAIN LINKS-->

<!--TAGS
COLLAPSE AND DELETE IF YOU DO NOT WANT TO KEEP-->
<div class="row" style="font-size:10pt;">

    <div class="col- card m-2 p-2 border-0" style="background: #343746; border-radius: 10px;">
        <p>#story_tag</p>
    </div>
    
    <div class="col- card m-2 p-2 border-0" style="background: #343746; border-radius: 10px;">
        <p>#story_tag</p>
    </div>
    
    <div class="col- card m-2 p-2 border-0" style="background: #343746; border-radius: 10px;">
        <p>#this is a longer tag</p>
    </div>
    
    <div class="col- card m-2 p-2 border-0" style="background: #343746; border-radius: 10px;">
        <p>#story_tag</p>
    </div>

    <div class="col- card m-2 p-2 border-0" style="background: #343746; border-radius: 10px;">
        <p>#story_tag</p>
    </div>
    
    <div class="col- card m-2 p-2 border-0" style="background: #343746; border-radius: 10px;">
        <p>#story_tag</p>
    </div>

<!--PASTE MORE ABOVE HERE
I suggest not going voerboard with these; it'll look ugly if they get too long-->
</div>
<!--END OF TAGS-->

<p class="font-weight-bold" style="font-size: 12pt;"><i class="fas fa-circle" style="color: #8BE9FD"></i> Established: 2024</p>
</div>
<!--END OF MOBILE INFO-->

<!--SPACING DO NOT DELETE/TOUCH-->
<div class="hidden-sm-down" style="height: 130px;"></div>
<!--SPACING DO NOT DELETE/TOUCH-->

<!--SUMMARY-->
<div class="card-text p-3">
    <p>This is the world summary or description. If it's too long, use the optional read more. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
    
    <!--READ MORE TEXT-->
    <div class="collapse mt-2" id="seemore">
    <p>Per tortor odio finibus nunc fringilla. Felis fusce torquent egestas nam et. Nascetur mollis nibh cursus torquent litora felis congue bibendum molestie. Rutrum tristique massa tempus; risus dis conubia lobortis platea. Parturient volutpat dictum dignissim cubilia ultrices fames. Amet dapibus ornare cubilia blandit semper litora posuere. Sit lorem lorem efficitur ex metus magna. Gravida eu dictumst quis vehicula taciti sapien urna pulvinar.</p>
    </div>
    <!--END OF READ MORE TEXT-->
    
    <!--READ MORE BUTTON-->
    <div class="card bg-transparent border-0 mt-2 align-items-center">
        <div class="card border-0 rounded-0" style="background-color: #A179C0; width: 100%; height: 1px;"></div>
        <div class="p-1" style="background-color: #A179C0; border-radius: 0px 0px 10px 10px;">
        <a data-toggle="collapse" href="#seemore" style="color: #fff;">
        <p class="font-weight-bold text-center">
            <i class="fa-solid fa-angles-down"></i>
            see more
            <i class="fa-solid fa-angles-down"></i>
        </p>
        </a>
        </div>
    </div>
    <!--END OF READ MORE BUTTON-->
    
</div>
<!--END OF SUMMARY-->

<div class="row p-3">
<!--LINKS/INFO-->
<div class="col-md-4">
    <h3 class="font-weight-bold">Staff</h3>
    
    <div class="row no-gutters" style="font-size:10pt;">
    
    <!--STAFF LINK-->
    <div class="col- card m-2 p-2 border-0" style="background: #343746; border-radius: 5px;">
        <a class="btn btn-outline-secondary border-0" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a><p style="font-weight: bold;">Name - Position</p>
    </div>
    <!--END OF STAFF LINK-->
    
    <!--STAFF LINK-->
    <div class="col- card m-2 p-2 border-0" style="background: #343746; border-radius: 5px;">
        <a class="btn btn-outline-secondary border-0" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a><p style="font-weight: bold;">Name - Position</p>
    </div>
    <!--END OF STAFF LINK-->
    
    <!--STAFF LINK-->
    <div class="col- card m-2 p-2 border-0" style="background: #343746; border-radius: 5px;">
        <a class="btn btn-outline-secondary border-0" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a><p style="font-weight: bold;">Longer Name - Position</p>
    </div>
    <!--END OF STAFF LINK-->
    
    <!--STAFF LINK-->
    <div class="col- card m-2 p-2 border-0" style="background: #343746; border-radius: 5px;">
        <a class="btn btn-outline-secondary border-0" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a><p style="font-weight: bold;">Name - Position</p>
    </div>
    <!--END OF STAFF LINK-->

    </div>
    
    <h3 class="font-weight-bold">Links</h3>
    
    <div class="row no-gutters" style="font-size:10pt;">
    
    <!--LINK-->
    <div class="col- card m-2 p-2 border-0" style="background: #343746; border-radius: 5px;">
        <a class="btn btn-outline-secondary border-0" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a><p style="font-weight: bold;">Link</p>
    </div>
    <!--END OF LINK-->
    
    <!--LINK-->
    <div class="col- card m-2 p-2 border-0" style="background: #343746; border-radius: 5px;">
        <a class="btn btn-outline-secondary border-0" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a><p style="font-weight: bold;">Link</p>
    </div>
    <!--END OF LINK-->
    
    <!--LINK-->
    <div class="col- card m-2 p-2 border-0" style="background: #343746; border-radius: 5px;">
        <a class="btn btn-outline-secondary border-0" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a><p style="font-weight: bold;">Link</p>
    </div>
    <!--END OF LINK-->
    
    <!--LINK-->
    <div class="col- card m-2 p-2 border-0" style="background: #343746; border-radius: 5px;">
        <a class="btn btn-outline-secondary border-0" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a><p style="font-weight: bold;">Link</p>
    </div>
    <!--END OF LINK-->

    </div>
    
    <h3 class="font-weight-bold">Updates</h3>
    
    <div class="card-text p-3">
    <p>This is an update. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    
    <div class="my-2" style="background: #343746; height: 1px;"></div>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    
    <div class="my-2" style="background: #343746; height: 1px;"></div>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    
</div>
<!--END OF LINKS/INFO-->

<!--MOODBOARD-->
<div class="col-lg-8">
<div class="row justify-content-center">
    <!--IMG-->
    <div class="col-md-4">
    <div class="card border-0 mb-3" style="background: url(https://dummyimage.com/250x350/FFF/000000) center; background-size: contain; background-repeat: no-repeat; height: 350px;">
        
        <!--IMG CREDIT-->
        <a class="p-2 text-muted tooltipster m-4" title="IMG CREDIT" href="https://unsplash.com/photos/dome-building-near-trees-zY36f4ABhik" style="opacity:.6;"><i class="fas fa-image"></i></a>
        
	  </div>
    </div>
    <!--END OF IMG-->
    
    <!--IMG-->
    <div class="col-md-4">
    <div class="card border-0 mb-3" style="background: url(https://dummyimage.com/250x350/FFF/000000) center; background-size: contain; background-repeat: no-repeat; height: 350px;">
        
        <!--IMG CREDIT-->
        <a class="p-2 text-muted tooltipster m-4" title="IMG CREDIT" href="https://unsplash.com/photos/dome-building-near-trees-zY36f4ABhik" style="opacity:.6;"><i class="fas fa-image"></i></a>
        
	  </div>
    </div>
    <!--END OF IMG-->
    
    <!--IMG-->
    <div class="col-md-4">
    <div class="card border-0 mb-3" style="background: url(https://dummyimage.com/250x350/FFF/000000) center; background-size: contain; background-repeat: no-repeat; height: 350px;">
        
        <!--IMG CREDIT-->
        <a class="p-2 text-muted tooltipster m-4" title="IMG CREDIT" href="https://unsplash.com/photos/dome-building-near-trees-zY36f4ABhik" style="opacity:.6;"><i class="fas fa-image"></i></a>
        
	  </div>
    </div>
    <!--END OF IMG-->
    
    <!--IMG-->
    <div class="col-md-4">
    <div class="card border-0 mb-3" style="background: url(https://dummyimage.com/250x350/FFF/000000) center; background-size: contain; background-repeat: no-repeat; height: 350px;">
        
        <!--IMG CREDIT-->
        <a class="p-2 text-muted tooltipster m-4" title="IMG CREDIT" href="https://unsplash.com/photos/dome-building-near-trees-zY36f4ABhik" style="opacity:.6;"><i class="fas fa-image"></i></a>
        
	  </div>
    </div>
    <!--END OF IMG-->
    
    <!--IMG-->
    <div class="col-md-4">
    <div class="card border-0 mb-3" style="background: url(https://dummyimage.com/250x350/FFF/000000) center; background-size: contain; background-repeat: no-repeat; height: 350px;">
        
        <!--IMG CREDIT-->
        <a class="p-2 text-muted tooltipster m-4" title="IMG CREDIT" href="https://unsplash.com/photos/dome-building-near-trees-zY36f4ABhik" style="opacity:.6;"><i class="fas fa-image"></i></a>
        
	  </div>
    </div>
    <!--END OF IMG-->
    
    <!--IMG-->
    <div class="col-md-4">
    <div class="card border-0 mb-3" style="background: url(https://dummyimage.com/250x350/FFF/000000) center; background-size: contain; background-repeat: no-repeat; height: 350px;">
        
        <!--IMG CREDIT-->
        <a class="p-2 text-muted tooltipster m-4" title="IMG CREDIT" href="https://unsplash.com/photos/dome-building-near-trees-zY36f4ABhik" style="opacity:.6;"><i class="fas fa-image"></i></a>
        
	  </div>
    </div>
    <!--END OF IMG-->
    
    <!--ADD MORE ABOVE HERE-->
</div>
</div>
<!--END OF MOODBOARD-->
    
</div>
    
    <a href="https://toyhou.se/BigGayFish" class="p-2 mt-n3 text-right" style="color: #A179C0; opacity: .5;"> <i class="fas fa-copyright"></i> BigGayFish</a>
    
</div>    
</div>

Copy

<!--MANGADEX FOLDER CODE
An alterante version of my Mangadex code that's meant for folders. This one is based off the Dracula color scheme, but it can easily be edited to any colors you like.

COLOR KEY: #282A36 - Background Color
           #A179C0 - Accent Color
           #383E48 - Main Button Color
           #343746 - Tags and Mini Button Color
           #8BE9FD - Dot Color
           #fff - Text
-->
<div class="container-fluid" style="font-size: 13pt; color: #fff;">
<div class="card rounded-0 border-0" style="background: #282A36;">

<!--COVER IMG-->
<div class="card border-0" style="background: url(
    
    https://dummyimage.com/250x350/FFF/000000
    
    ) center; background-size: contain; background-repeat: no-repeat; height: 350px; width: 250px; z-index: 99; position: absolute; left:5%; top: 4%;">
    
    <!--IMG CREDIT-->
        <a class="p-2 text-muted tooltipster m-4" title="IMG CREDIT" href="https://unsplash.com/photos/dome-building-near-trees-zY36f4ABhik" style="opacity:.6;"><i class="fas fa-image"></i></a>
    
    <!--COUNTRY OF ORIGIN FLAG-->
    <div class="card bg-transparent border-0 p-3" style="z-index: 100; text-align: right; top: 60%;">
        🇯🇵
    </div>
    <!--END OF COUNTRY OF ORIGIN FLAG-->
    
</div>
<!--END OF COVER IMG-->

<!--DESKTOP INFO-->
<div class="card bg-transparent hidden-sm-down border-0 p-3" style="z-index: 100; position: absolute; left: 30%; top: 11%; width: 65%;">

<h1 class="font-weight-bold" style="font-size: 50pt; text-shadow: 5px 5px 5px #000;">Manga Title</h1>
<h1 class="mb-5" style="text-shadow: 5px 5px 5px #000;">Byline or alternative title</h1>
<p class="mt-4" style="text-shadow: 5px 5px 5px #000;">Author Name</p>

<div class="row mt-3">
<!--BUTTON LINK-->
<div class="col-md-4">
<div class="card border-0 text-center justify-content-centerp-3 p-3" style="background-color: #A179C0;">
    <a class="btn btn-outline-secondary border-0" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a><h2 style="font-weight: bold;">Add to Library</h2>
</div>
</div>
<!--END OF BUTTON LINK-->

<!--BUTTON LINK-->
<div class="col-md-4">
<div class="card border-0 text-center justify-content-center p-3" style="background-color: #383E48;">
    <a class="btn btn-outline-secondary border-0" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a><h2 style="font-weight: bold;"><i class="fa-regular fa-book-open"></i> Start Reading</h2>
</div>
</div>
<!--END OF BUTTON LINK-->

<!--BUTTON LINK-->
<div class="col-sm-2">
<div class="card border-0 text-center justify-content-center p-3" style="background-color: #383E48;">
    <a class="btn btn-outline-secondary border-0" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a><h2 style="font-weight: bold;"><i class="fa-regular fa-flag"></i></h2>
</div>
</div>
<!--END OF BUTTON LINK-->

<!--BUTTON LINK-->
<div class="col-sm-2">
<div class="card border-0 text-center justify-content-center p-3" style="background-color: #383E48;">
    <a class="btn btn-outline-secondary border-0" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a><h2 style="font-weight: bold;"><i class="fa-regular fa-arrow-up-from-bracket"></i></h2>
</div>
</div>
<!--END OF BUTTON LINK-->
</div>

<!--TAGS
COLLAPSE AND DELETE IF YOU DO NOT WANT TO KEEP-->
<div class="row mt-3" style="font-size:10pt;">

    <div class="col- card m-2 p-2 border-0" style="background: #343746; border-radius: 10px;">
        <p>#story_tag</p>
    </div>
    
    <div class="col- card m-2 p-2 border-0" style="background: #343746; border-radius: 10px;">
        <p>#story_tag</p>
    </div>
    
    <div class="col- card m-2 p-2 border-0" style="background: #343746; border-radius: 10px;">
        <p>#this is a longer tag</p>
    </div>
    
    <div class="col- card m-2 p-2 border-0" style="background: #343746; border-radius: 10px;">
        <p>#story_tag</p>
    </div>

    <div class="col- card m-2 p-2 border-0" style="background: #343746; border-radius: 10px;">
        <p>#story_tag</p>
    </div>
    
    <div class="col- card m-2 p-2 border-0" style="background: #343746; border-radius: 10px;">
        <p>#story_tag</p>
    </div>

<!--PASTE MORE ABOVE HERE
I suggest not going voerboard with these; it'll look ugly if they get too long-->
</div>
<!--END OF TAGS-->

<p class="font-weight-bold" style="font-size: 12pt;"><i class="fas fa-circle" style="color: #8BE9FD"></i> Established: 2024</p>

</div>
<!--END OF DESKTOP INFO-->

<!--BLURRED COVER IMG-->
<div class="mb-5" style="background: url(https://dummyimage.com/250x350/FFF/000000) top; background-size: cover; min-height: 300px; filter: blur(5px); position: relative;">
</div>
<!--BLURRED COVER IMG-->

<!--MOBILE INFO-->
<div class="card bg-transparent d-lg-none border-0 pt-5 px-3 mt-5">

<h1 class="font-weight-bold" style="font-size: 50pt; text-shadow: 5px 5px 5px #000;">Manga Title</h1>
<h1 style="text-shadow: 5px 5px 5px #000;">Byline or alternative title</h1>
<p style="text-shadow: 5px 5px 5px #000;">Author Name</p>

<!--MAIN LINKS-->
<div class="row">
<!--BUTTON LINK-->
<div class="col-md-4 card border-0 text-center justify-content-center m-2 p-3" style="background-color: #A179C0;">
    <a class="btn btn-outline-secondary border-0" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a><h2 style="font-weight: bold;">Add to Library</h2>
</div>
<!--END OF BUTTON LINK-->

<!--BUTTON LINK-->
<div class="col-md-4 card border-0 text-center justify-content-center m-2 p-3" style="background-color: #383E48;">
    <a class="btn btn-outline-secondary border-0" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a><h2 style="font-weight: bold;"><i class="fa-regular fa-book-open"></i> Start Reading</h2>
</div>
<!--END OF BUTTON LINK-->

<!--BUTTON LINK-->
<div class="col-sm-2 card border-0 text-center justify-content-center m-2 p-3" style="background-color: #383E48;">
    <a class="btn btn-outline-secondary border-0" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a><h2 style="font-weight: bold;"><i class="fa-regular fa-flag"></i></h2>
</div>
<!--END OF BUTTON LINK-->

<!--BUTTON LINK-->
<div class="col-sm-2 card border-0 text-center justify-content-center m-2 p-3" style="background-color: #383E48;">
    <a class="btn btn-outline-secondary border-0" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a><h2 style="font-weight: bold;"><i class="fa-regular fa-arrow-up-from-bracket"></i></h2>
</div>
<!--END OF BUTTON LINK-->
</div>
<!--END OF MAIN LINKS-->

<!--TAGS
COLLAPSE AND DELETE IF YOU DO NOT WANT TO KEEP-->
<div class="row" style="font-size:10pt;">

    <div class="col- card m-2 p-2 border-0" style="background: #343746; border-radius: 10px;">
        <p>#story_tag</p>
    </div>
    
    <div class="col- card m-2 p-2 border-0" style="background: #343746; border-radius: 10px;">
        <p>#story_tag</p>
    </div>
    
    <div class="col- card m-2 p-2 border-0" style="background: #343746; border-radius: 10px;">
        <p>#this is a longer tag</p>
    </div>
    
    <div class="col- card m-2 p-2 border-0" style="background: #343746; border-radius: 10px;">
        <p>#story_tag</p>
    </div>

    <div class="col- card m-2 p-2 border-0" style="background: #343746; border-radius: 10px;">
        <p>#story_tag</p>
    </div>
    
    <div class="col- card m-2 p-2 border-0" style="background: #343746; border-radius: 10px;">
        <p>#story_tag</p>
    </div>

<!--PASTE MORE ABOVE HERE
I suggest not going voerboard with these; it'll look ugly if they get too long-->
</div>
<!--END OF TAGS-->

<p class="font-weight-bold" style="font-size: 12pt;"><i class="fas fa-circle" style="color: #8BE9FD"></i> Established: 2024</p>
</div>
<!--END OF MOBILE INFO-->

<!--SPACING DO NOT DELETE/TOUCH-->
<div class="hidden-sm-down" style="height: 130px;"></div>
<!--SPACING DO NOT DELETE/TOUCH-->

<!--SUMMARY-->
<div class="card-text p-3">
    <p>This is the folder summary. If it's too long, use the optional read more. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
    
    <!--READ MORE TEXT-->
    <div class="collapse mt-2" id="seemore">
    <p>Per tortor odio finibus nunc fringilla. Felis fusce torquent egestas nam et. Nascetur mollis nibh cursus torquent litora felis congue bibendum molestie. Rutrum tristique massa tempus; risus dis conubia lobortis platea. Parturient volutpat dictum dignissim cubilia ultrices fames. Amet dapibus ornare cubilia blandit semper litora posuere. Sit lorem lorem efficitur ex metus magna. Gravida eu dictumst quis vehicula taciti sapien urna pulvinar.</p>
    </div>
    <!--END OF READ MORE TEXT-->
    
    <!--READ MORE BUTTON-->
    <div class="card bg-transparent border-0 mt-2 align-items-center">
        <div class="card border-0 rounded-0" style="background-color: #A179C0; width: 100%; height: 1px;"></div>
        <div class="p-1" style="background-color: #A179C0; border-radius: 0px 0px 10px 10px;">
        <a data-toggle="collapse" href="#seemore" style="color: #fff;">
        <p class="font-weight-bold text-center">
            <i class="fa-solid fa-angles-down"></i>
            see more
            <i class="fa-solid fa-angles-down"></i>
        </p>
        </a>
        </div>
    </div>
    <!--END OF READ MORE BUTTON-->
    
</div>
<!--END OF SUMMARY-->

<a href="https://toyhou.se/BigGayFish" class="p-2 mt-n3 text-right" style="color: #A179C0; opacity: .5;"> <i class="fas fa-copyright"></i> BigGayFish</a>
    
</div>    
</div>

Copy

<!--MANGADEX WORLD CODE
I wanted to make a Mangadex code for AGES now, so I made one for worlds! This one is based off the Dracula color scheme, but it can easily be edited to any colors you like.

COLOR KEY: #282A36 - Background Color
           #A179C0 - Accent Color
           #383E48 - Main Button Color
           #343746 - Tags and Mini Button Color
           #8BE9FD - Dot Color
           #fff - Text
-->
<div class="container-fluid" style="font-size: 13pt; color: #fff;">
<div class="card rounded-0 border-0" style="background: #282A36;">

<!--COVER IMG-->
<div class="card border-0" style="background: url(
    
    https://dummyimage.com/250x350/FFF/000000
    
    ) center; background-size: contain; background-repeat: no-repeat; height: 350px; width: 250px; z-index: 99; position: absolute; left:5%; top: 2%;">
    
    <!--IMG CREDIT-->
        <a class="p-2 text-muted tooltipster m-4" title="IMG CREDIT" href="https://unsplash.com/photos/dome-building-near-trees-zY36f4ABhik" style="opacity:.6;"><i class="fas fa-image"></i></a>
    
    <!--COUNTRY OF ORIGIN FLAG-->
    <div class="card bg-transparent border-0 p-3" style="z-index: 100; text-align: right; top: 60%;">
        🇯🇵
    </div>
    <!--END OF COUNTRY OF ORIGIN FLAG-->
    
</div>
<!--END OF COVER IMG-->

<!--DESKTOP INFO-->
<div class="card bg-transparent hidden-sm-down border-0 p-3" style="z-index: 100; position: absolute; left: 30%; top: 5%; width: 65%;">

<h1 class="font-weight-bold" style="font-size: 50pt; text-shadow: 5px 5px 5px #000;">Manga Title</h1>
<h1 class="mb-5" style="text-shadow: 5px 5px 5px #000;">Byline or alternative title</h1>
<p class="mt-4" style="text-shadow: 5px 5px 5px #000;">Author Name</p>

<div class="row mt-3">
<!--BUTTON LINK-->
<div class="col-md-4">
<div class="card border-0 text-center justify-content-centerp-3 p-3" style="background-color: #A179C0;">
    <a class="btn btn-outline-secondary border-0" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a><h2 style="font-weight: bold;">Add to Library</h2>
</div>
</div>
<!--END OF BUTTON LINK-->

<!--BUTTON LINK-->
<div class="col-md-4">
<div class="card border-0 text-center justify-content-center p-3" style="background-color: #383E48;">
    <a class="btn btn-outline-secondary border-0" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a><h2 style="font-weight: bold;"><i class="fa-regular fa-book-open"></i> Start Reading</h2>
</div>
</div>
<!--END OF BUTTON LINK-->

<!--BUTTON LINK-->
<div class="col-sm-2">
<div class="card border-0 text-center justify-content-center p-3" style="background-color: #383E48;">
    <a class="btn btn-outline-secondary border-0" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a><h2 style="font-weight: bold;"><i class="fa-regular fa-flag"></i></h2>
</div>
</div>
<!--END OF BUTTON LINK-->

<!--BUTTON LINK-->
<div class="col-sm-2">
<div class="card border-0 text-center justify-content-center p-3" style="background-color: #383E48;">
    <a class="btn btn-outline-secondary border-0" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a><h2 style="font-weight: bold;"><i class="fa-regular fa-arrow-up-from-bracket"></i></h2>
</div>
</div>
<!--END OF BUTTON LINK-->
</div>

<!--TAGS
COLLAPSE AND DELETE IF YOU DO NOT WANT TO KEEP-->
<div class="row mt-3" style="font-size:10pt;">

    <div class="col- card m-2 p-2 border-0" style="background: #343746; border-radius: 10px;">
        <p>#story_tag</p>
    </div>
    
    <div class="col- card m-2 p-2 border-0" style="background: #343746; border-radius: 10px;">
        <p>#story_tag</p>
    </div>
    
    <div class="col- card m-2 p-2 border-0" style="background: #343746; border-radius: 10px;">
        <p>#this is a longer tag</p>
    </div>
    
    <div class="col- card m-2 p-2 border-0" style="background: #343746; border-radius: 10px;">
        <p>#story_tag</p>
    </div>

    <div class="col- card m-2 p-2 border-0" style="background: #343746; border-radius: 10px;">
        <p>#story_tag</p>
    </div>
    
    <div class="col- card m-2 p-2 border-0" style="background: #343746; border-radius: 10px;">
        <p>#story_tag</p>
    </div>

<!--PASTE MORE ABOVE HERE
I suggest not going voerboard with these; it'll look ugly if they get too long-->
</div>
<!--END OF TAGS-->

<p class="font-weight-bold" style="font-size: 12pt;"><i class="fas fa-circle" style="color: #8BE9FD"></i> Established: 2024</p>

</div>
<!--END OF DESKTOP INFO-->

<!--BLURRED COVER IMG-->
<div class="mb-5" style="background: url(https://dummyimage.com/250x350/FFF/000000) top; background-size: cover; min-height: 300px; filter: blur(5px); position: relative;">
</div>
<!--BLURRED COVER IMG-->

<!--MOBILE INFO-->
<div class="card bg-transparent d-lg-none border-0 pt-5 px-3 mt-5">
    


<h1 class="font-weight-bold" style="font-size: 50pt; text-shadow: 5px 5px 5px #000;">Manga Title</h1>
<h1 style="text-shadow: 5px 5px 5px #000;">Byline or alternative title</h1>
<p style="text-shadow: 5px 5px 5px #000;">Author Name</p>

<!--MAIN LINKS-->
<div class="row">
<!--BUTTON LINK-->
<div class="col-md-4 card border-0 text-center justify-content-center m-2 p-3" style="background-color: #A179C0;">
    <a class="btn btn-outline-secondary border-0" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a><h2 style="font-weight: bold;">Add to Library</h2>
</div>
<!--END OF BUTTON LINK-->

<!--BUTTON LINK-->
<div class="col-md-4 card border-0 text-center justify-content-center m-2 p-3" style="background-color: #383E48;">
    <a class="btn btn-outline-secondary border-0" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a><h2 style="font-weight: bold;"><i class="fa-regular fa-book-open"></i> Start Reading</h2>
</div>
<!--END OF BUTTON LINK-->

<!--BUTTON LINK-->
<div class="col-sm-2 card border-0 text-center justify-content-center m-2 p-3" style="background-color: #383E48;">
    <a class="btn btn-outline-secondary border-0" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a><h2 style="font-weight: bold;"><i class="fa-regular fa-flag"></i></h2>
</div>
<!--END OF BUTTON LINK-->

<!--BUTTON LINK-->
<div class="col-sm-2 card border-0 text-center justify-content-center m-2 p-3" style="background-color: #383E48;">
    <a class="btn btn-outline-secondary border-0" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a><h2 style="font-weight: bold;"><i class="fa-regular fa-arrow-up-from-bracket"></i></h2>
</div>
<!--END OF BUTTON LINK-->
</div>
<!--END OF MAIN LINKS-->

<!--TAGS
COLLAPSE AND DELETE IF YOU DO NOT WANT TO KEEP-->
<div class="row" style="font-size:10pt;">

    <div class="col- card m-2 p-2 border-0" style="background: #343746; border-radius: 10px;">
        <p>#story_tag</p>
    </div>
    
    <div class="col- card m-2 p-2 border-0" style="background: #343746; border-radius: 10px;">
        <p>#story_tag</p>
    </div>
    
    <div class="col- card m-2 p-2 border-0" style="background: #343746; border-radius: 10px;">
        <p>#this is a longer tag</p>
    </div>
    
    <div class="col- card m-2 p-2 border-0" style="background: #343746; border-radius: 10px;">
        <p>#story_tag</p>
    </div>

    <div class="col- card m-2 p-2 border-0" style="background: #343746; border-radius: 10px;">
        <p>#story_tag</p>
    </div>
    
    <div class="col- card m-2 p-2 border-0" style="background: #343746; border-radius: 10px;">
        <p>#story_tag</p>
    </div>

<!--PASTE MORE ABOVE HERE
I suggest not going voerboard with these; it'll look ugly if they get too long-->
</div>
<!--END OF TAGS-->

<p class="font-weight-bold" style="font-size: 12pt;"><i class="fas fa-circle" style="color: #8BE9FD"></i> Established: 2024</p>
</div>
<!--END OF MOBILE INFO-->

<!--SPACING DO NOT DELETE/TOUCH-->
<div class="hidden-sm-down" style="height: 130px;"></div>
<!--SPACING DO NOT DELETE/TOUCH-->

<!--SUMMARY-->
<div class="card-text p-3">
    <p>This is the world summary or description. If it's too long, use the optional read more. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
    
    <!--READ MORE TEXT-->
    <div class="collapse mt-2" id="seemore">
    <p>Per tortor odio finibus nunc fringilla. Felis fusce torquent egestas nam et. Nascetur mollis nibh cursus torquent litora felis congue bibendum molestie. Rutrum tristique massa tempus; risus dis conubia lobortis platea. Parturient volutpat dictum dignissim cubilia ultrices fames. Amet dapibus ornare cubilia blandit semper litora posuere. Sit lorem lorem efficitur ex metus magna. Gravida eu dictumst quis vehicula taciti sapien urna pulvinar.</p>
    </div>
    <!--END OF READ MORE TEXT-->
    
    <!--READ MORE BUTTON-->
    <div class="card bg-transparent border-0 mt-2 align-items-center">
        <div class="card border-0 rounded-0" style="background-color: #A179C0; width: 100%; height: 1px;"></div>
        <div class="p-1" style="background-color: #A179C0; border-radius: 0px 0px 10px 10px;">
        <a data-toggle="collapse" href="#seemore" style="color: #fff;">
        <p class="font-weight-bold text-center">
            <i class="fa-solid fa-angles-down"></i>
            see more
            <i class="fa-solid fa-angles-down"></i>
        </p>
        </a>
        </div>
    </div>
    <!--END OF READ MORE BUTTON-->
    
</div>
<!--END OF SUMMARY-->

<div class="row p-3">
<!--LINKS/INFO-->
<div class="col-md-4">
    
    <h3 class="font-weight-bold">Links</h3>
    
    <div class="row no-gutters" style="font-size:10pt;">
    
    <!--LINK-->
    <div class="col- card m-2 p-2 border-0" style="background: #343746; border-radius: 5px;">
        <a class="btn btn-outline-secondary border-0" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a><p style="font-weight: bold;">Link</p>
    </div>
    <!--END OF LINK-->
    
    <!--LINK-->
    <div class="col- card m-2 p-2 border-0" style="background: #343746; border-radius: 5px;">
        <a class="btn btn-outline-secondary border-0" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a><p style="font-weight: bold;">Link</p>
    </div>
    <!--END OF LINK-->
    
    <!--LINK-->
    <div class="col- card m-2 p-2 border-0" style="background: #343746; border-radius: 5px;">
        <a class="btn btn-outline-secondary border-0" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a><p style="font-weight: bold;">Link</p>
    </div>
    <!--END OF LINK-->
    
    <!--LINK-->
    <div class="col- card m-2 p-2 border-0" style="background: #343746; border-radius: 5px;">
        <a class="btn btn-outline-secondary border-0" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a><p style="font-weight: bold;">Link</p>
    </div>
    <!--END OF LINK-->

    </div>
    
    <h3 class="font-weight-bold">Content Warning</h3>
    
    <div class="card-text mt-n3 p-3">
    <p>This is a content warning. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    
    <div class="my-2" style="background: #343746; height: 1px;"></div>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    
    <div class="my-2" style="background: #343746; height: 1px;"></div>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    
    <h3 class="font-weight-bold">Notes</h3>
    
    <div class="card-text mt-n3 p-3">
    <p>This is a folder note. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    
    <div class="my-2" style="background: #343746; height: 1px;"></div>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    
    <div class="my-2" style="background: #343746; height: 1px;"></div>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    
</div>
<!--END OF LINKS/INFO-->

<!--CAST-->
<div class="col-lg-8">
<div class="row justify-content-center">
    
    <!--CAST MEMBER-->
    <div class="card text-center justify-content-center m-2" style="height: 250px; width: 200px; background: url('https://dummyimage.com/250x200/FFF/000000') top; background-size: contain; color: #fff; border: #A179C0 2px solid;">
        <a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a>
    
    <div class="card rounded-0 border-0" style="background-color: #A179C0; position:absolute; width: 100%; bottom: 0;"><p class="pt-1" style="font-weight:bold;">Name <br> 
    Character Title</p></div>
    </div>
    <!--END OF CAST MEMBER-->
    
    <!--CAST MEMBER-->
    <div class="card text-center justify-content-center m-2" style="height: 250px; width: 200px; background: url('https://dummyimage.com/250x200/FFF/000000') top; background-size: contain; color: #fff; border: #A179C0 2px solid;">
        <a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a>
    
    <div class="card rounded-0 border-0" style="background-color: #A179C0; position:absolute; width: 100%; bottom: 0;"><p class="pt-1" style="font-weight:bold;">Name <br> 
    Character Title</p></div>
    </div>
    <!--END OF CAST MEMBER-->
    
    <!--CAST MEMBER-->
    <div class="card text-center justify-content-center m-2" style="height: 250px; width: 200px; background: url('https://dummyimage.com/250x200/FFF/000000') top; background-size: contain; color: #fff; border: #A179C0 2px solid;">
        <a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a>
    
    <div class="card rounded-0 border-0" style="background-color: #A179C0; position:absolute; width: 100%; bottom: 0;"><p class="pt-1" style="font-weight:bold;">Name <br> 
    Character Title</p></div>
    </div>
    <!--END OF CAST MEMBER-->
    
    <!--CAST MEMBER-->
    <div class="card text-center justify-content-center m-2" style="height: 250px; width: 200px; background: url('https://dummyimage.com/250x200/FFF/000000') top; background-size: contain; color: #fff; border: #A179C0 2px solid;">
        <a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a>
    
    <div class="card rounded-0 border-0" style="background-color: #A179C0; position:absolute; width: 100%; bottom: 0;"><p class="pt-1" style="font-weight:bold;">Name <br> 
    Character Title</p></div>
    </div>
    <!--END OF CAST MEMBER-->
    
    <!--CAST MEMBER-->
    <div class="card text-center justify-content-center m-2" style="height: 250px; width: 200px; background: url('https://dummyimage.com/250x200/FFF/000000') top; background-size: contain; color: #fff; border: #A179C0 2px solid;">
        <a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a>
    
    <div class="card rounded-0 border-0" style="background-color: #A179C0; position:absolute; width: 100%; bottom: 0;"><p class="pt-1" style="font-weight:bold;">Name <br> 
    Character Title</p></div>
    </div>
    <!--END OF CAST MEMBER-->
    
    <!--CAST MEMBER-->
    <div class="card text-center justify-content-center m-2" style="height: 250px; width: 200px; background: url('https://dummyimage.com/250x200/FFF/000000') top; background-size: contain; color: #fff; border: #A179C0 2px solid;">
        <a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a>
    
    <div class="card rounded-0 border-0" style="background-color: #A179C0; position:absolute; width: 100%; bottom: 0;"><p class="pt-1" style="font-weight:bold;">Name <br> 
    Character Title</p></div>
    </div>
    <!--END OF CAST MEMBER-->
    
    <!--CAST MEMBER-->
    <div class="card text-center justify-content-center m-2" style="height: 250px; width: 200px; background: url('https://dummyimage.com/250x200/FFF/000000') top; background-size: contain; color: #fff; border: #A179C0 2px solid;">
        <a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a>
    
    <div class="card rounded-0 border-0" style="background-color: #A179C0; position:absolute; width: 100%; bottom: 0;"><p class="pt-1" style="font-weight:bold;">Name <br> 
    Character Title</p></div>
    </div>
    <!--END OF CAST MEMBER-->
    
    <!--CAST MEMBER-->
    <div class="card text-center justify-content-center m-2" style="height: 250px; width: 200px; background: url('https://dummyimage.com/250x200/FFF/000000') top; background-size: contain; color: #fff; border: #A179C0 2px solid;">
        <a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a>
    
    <div class="card rounded-0 border-0" style="background-color: #A179C0; position:absolute; width: 100%; bottom: 0;"><p class="pt-1" style="font-weight:bold;">Name <br> 
    Character Title</p></div>
    </div>
    <!--END OF CAST MEMBER-->
    
    
    <!--ADD MORE ABOVE HERE-->
</div>
</div>
<!--END OF CAST-->
    
</div>

<a href="https://toyhou.se/BigGayFish" class="p-2 mt-n3 text-right" style="color: #A179C0; opacity: .5;"> <i class="fas fa-copyright"></i> BigGayFish</a>
    
</div>    
</div>

This code is password protected.

Stor8

[F2U] Mangadex World + Folder Code

Password (optional)