Stor8

<!--MAGE WORLD BUNDLE - FRONT PAGE - CARD VER (BOOTSTRAPS)
I made this code bc I felt like my folder codes was seriously lacking in the design department lol but I still wanted/needed my extra info, thus this code was born.

COLOR KEY: card-outline-primary - all the borders in this code; change primary to secondary / success / danger etc to change the bootstraps colors for the code (especially useful if your CSS doesn't have primary, it'll work with secondary/other colors)
           #C38A8B - Minor Accent Color, used for buttons and bg image colors

INDEX:

WORLD TITLE - The name for your world that should be front and center on the front page! If you're using this for a story project, I suggest using that instead of the fictional worlds your project may reside in.

SUMMARY BOX - Has the basic summary for your world, includes TAGS, STORY INFO, ACCENT IMG, and the titular SUMMARY / MAIN INFO BLOCK.
              TAGS - slightly inspired by mangadex's way of tagging their content, it's not just meant for genre but type of content and themes, even the media like if this is a species world or a comic world etc.
              STORY INFO - This is for if you're world is for a story so the rating, genre, and any content warnings you have. While deletable, I think it can still be applicable to species worlds. ^^
              SUMMARY / MAIN INFO BLOCK - What is says on the tin, it's just the overview text where you can talk about your world in detail!
              ACCENT IMG - Think of them as moodboards or aesthetics, but if you have a species world you can put your mascot in there!

SONG - I personally like having a theme for certain projects, it gives off a vibe yknow? This is deletable if you don't want to apply it to your code, but it includes the SONG TITLE, SONG QUOTE, and ofc the MUSIC PLAYER.

INFO BOX - This is for some straight forward information you need to display. Contains the following:
           OUTGOING LINKS - Contains the BUTTON LINKS which can be used if you wanna redirect someone to lore pages or your species trait page etc
           RULES - Quick rules for your world, like who can/can't join, age restrictions, general be nicies, etc
           FAQ - Quick lil questions and answers in case you want to clarify things for people
           
UPDATE BOX - AKA your news box, you can link bulletins or just write general updates (like working on x lore page etc etc)

PICTURE DIVIDER - What it says on the tin, just think of it as a moodboard or aesthetic piece; it's a divider but pretty :^)

STAFF HEADER  / STAFF LINEUP - These are images that work as buttons with text in the center. You can put your staff with their name/title inside the image itself so people know who they're clicking.

CAST LINEUP - This is the CARD version of the cast lineup that includes CSS written by user James_William_Novak, which allows you to "flip" a card of your character and display information in the back. You can't really click these (there IS a clickable version of this CSS available at the source) but it's good for more story oriented worlds and not species oriented worlds. There is the CAST HEADER as well as the CHARACTER CARD which holds the actual image and information.

IMG CREDIT - This is found on all images used on this code as well as the footer of the code, please remember to actually credit your images and please don't change the codes credit save for the ACTUAL image credit that credits the images/art used in the header, footer, and music player.
-->
<div class="container" style="font-size:13pt;">
   <div class="card card-outline-primary w-100 text-center justify-content-center mb-3" style="background: #C38A8B url(
   
   https://f2.toyhou.se/file/f2-toyhou-se/images/23295036_LjVvRSw4rzNwbyJ.png
   
   ) center; background-size: cover; background-repeat: no-repeat; min-height: 200px; border-radius: 90px 0 0 0; border-width: 2px;">
       
        <!--WORLD TITLE-->
        <h1 class="display-1 font-weight-bold" style="text-shadow: 0 0 5px #000; z-index: 100; color: #fff; font-family: Century Gothic; font-variant: small-caps;">
           
            World / Project title
           
        </h1>
        <!--WORLD TITLE-->
        
    </div>
    
    <!--SUMMARY BOX-->
    <div class="card bg-faded rounded-0 border-0 mb-3 p-3">
        
        <!--TAGS
        COLLAPSE AND DELETE IF YOU DO NOT WANT TO KEEP-->
        <div class="row" style="z-index:50; position: absolute; right:0%; top: 95%;">

        <div class="col- card card-outline-primary text-muted bg-faded p-1 m-2 d-none d-sm-block" style="box-shadow: 5px 5px #C38A8B; font-size: 15pt;">
            <p>#story_tag</p>
        </div>
        
        <div class="col- card card-outline-primary text-muted bg-faded p-1 m-2 d-none d-sm-block" style="box-shadow: 5px 5px #C38A8B; font-size: 15pt;">
            <p>#story_tag</p>
        </div>
        
        <div class="col- card card-outline-primary text-muted bg-faded p-1 m-2 d-none d-sm-block" style="box-shadow: 5px 5px #C38A8B; font-size: 15pt;">
            <p>#story_tag</p>
        </div>
        
        <div class="col- card card-outline-primary text-muted bg-faded p-1 m-2 d-none d-sm-block" style="box-shadow: 5px 5px #C38A8B; font-size: 15pt;">
            <p>#story_tag</p>
        </div>
        
        <div class="col- card card-outline-primary text-muted bg-faded p-1 m-2 d-none d-sm-block" style="box-shadow: 5px 5px #C38A8B; font-size: 15pt;">
            <p>#longer 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-->
        
        <div class="row">
            <div class="col-md-6 mb-3">
                
                <!--ACCENT IMG-->
                <div class="card card-outline-primary rounded-0 mb-2" style="background: #C38A8B url(
                
                https://dummyimage.com/350/FFF/000000
                
                ) center; background-size: cover; background-repeat: no-repeat; height: 250px;">
                    
                    <!--IMG CREDIT-->
                    <a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="CREDIT_URL" style="opacity:.6;"><i class="fas fa-image"></i></a>
                </div>
                <!--END OF ACCENT IMG-->
                
                <!--STORY INFO-->
                <div class="card border-0 bg-transparent">
                    <h1 style="z-index: 100; text-shadow: 0 0 5px #000; font-family: Century Gothic; font-variant: small-caps; font-size: 20pt;">Rating</h1>
                    <div class="bg-primary" style="height: 10px; width: 35%; position: absolute; top: 50%; left: 1%; opacity: .8;"></div>
                </div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                
                <div class="card border-0 bg-transparent">
                    <h1 style="z-index: 100; text-shadow: 0 0 5px #000; font-family: Century Gothic; font-variant: small-caps; font-size: 20pt;">Genre</h1>
                    <div class="bg-primary" style="height: 10px; width: 35%; position: absolute; top: 50%; left: 1%; opacity: .8;"></div>
                </div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                
                <div class="card border-0 bg-transparent">
                    <h1 style="z-index: 100; text-shadow: 0 0 5px #000; font-family: Century Gothic; font-variant: small-caps; font-size: 20pt;">Content Warnings</h1>
                    <div class="bg-primary" style="height: 10px; width: 35%; position: absolute; top: 50%; left: 1%; opacity: .8;"></div>
                </div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                <!--END OF STORY INFO-->
                
            </div>
            
            <div class="col-md-6">
                
                <!--HEADER/TITLE-->
                <h1 style="font-size: 35pt; font-family: Century Gothic; font-variant: small-caps"><span class="display-1 text-primary font-weight-bold">S</span>ummary:</h1>
                <!--END OF HEADER/TITLE-->
                
                <!--SUMMARY / MAIN INFO BLOCK-->
                <p>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>
                
                <p>Risus luctus ut suspendisse varius consequat etiam ex. Taciti urna fermentum arcu egestas et penatibus inceptos facilisi. Tempus pharetra eget turpis rhoncus integer aliquam placerat. Maximus porttitor consectetur morbi pretium elit, fusce tempus sodales. Laoreet mollis laoreet semper aliquam egestas proin consectetur vivamus. Nulla maximus parturient mauris inceptos eu per. Pharetra vestibulum ex tellus sollicitudin posuere mollis condimentum eleifend inceptos. Aenean dignissim magna porttitor, nibh lectus felis eget elementum est.</p>
                <!--END OF SUMMARY / MAIN INFO BLOCK-->
                
            </div>
        </div>
    </div>
    <!--END OF SUMMARY BOX-->
    
    <!--SPACING FOR TAGS DO NOT DELETE!!-->
    <div class="d-none d-sm-block" style="height: 15px;"></div>
    <!--SPACING FOR TAGS DO NOT DELETE!!-->
    
    <!--SONG
    DELETE IF UNEEDED-->
    <div class="card bg-transparent border-0 mb-3">
        
        <!--SONG TITLE-->
        <div class="card border-0 bg-transparent text-center">
            <h1 style="z-index: 100; text-shadow: 0 0 5px #000; font-size: 40pt; font-weight: bold; font-family: Century Gothic; font-variant: small-caps">Song Name</h1>
            <div class="bg-primary" style="height: 10px; width: 100%; position: absolute; top: 50%; left: 0%; opacity: .8;"></div>
        </div>
        <!--END OF SONG TITLE-->
        
        <!--SONG QUOTE (DELETE IF YOU DON'T WANT IT)-->
        <h1 class="text-center mb-2" style="font-family: Century Gothic; font-style: oblique;">"Song quote. Lorem ipsum dolor sit amet, consectetur adipiscing elit."</h1>
        <!--END OF SONG QUOTE-->
        
        <!--MUSIC PLAYER-->
        <div class="card card-outline-primary justify-content-center p-2 rounded-0" style="background: #C38A8B url('https://f2.toyhou.se/file/f2-toyhou-se/images/23295036_LjVvRSw4rzNwbyJ.png'); background-size: cover; background-position: center; border-radius: 40px; border-width: 2px;">
            <audio class="w-100" controls="" style="mix-blend-mode: screen; border-radius: 40px;"><source src="https://file.garden/ZVkTvzrahkhXWZYD/Image%20Hosting/PorPan/UNDERTALE_but_its_on_vinyl_and_makes_me_nostalgic.mp3"></audio>
        </div>
        <!--MUSIC PLAYER-->
        
    </div>
    <!--END OF SONG-->
    
    <!--INFO BOXES-->
    <div class="row">
    
    <!--LINK AND INFO BOX-->
    <div class="col-md-6">
        <div class="card card-outline-primary rounded-0 bg-faded mb-3 p-3 overflow-auto" style="border-width: 2px; height: 350px;">
            
            <!--OUTGOING LINKS-->
            
            <!--BUTTON LINK-->
            <div class="card card-outline-primary text-center justify-content-center m-2 pt-2" style="background-color: #C38A8B;">
            <a class="btn btn-outline-primary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a><h2 style="font-weight: bold; font-family: Century Gothic; font-variant: small-caps">Link</h2>
            </div>
            <!--END OF BUTTON LINK-->
            
            <!--BUTTON LINK-->
            <div class="card card-outline-primary text-center justify-content-center m-2 pt-2" style="background-color: #C38A8B;">
            <a class="btn btn-outline-primary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a><h2 style="font-weight: bold; font-family: Century Gothic; font-variant: small-caps">Link</h2>
            </div>
            <!--END OF BUTTON LINK-->
            
            <!--BUTTON LINK-->
            <div class="card card-outline-primary text-center justify-content-center m-2 pt-2" style="background-color: #C38A8B;">
            <a class="btn btn-outline-primary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a><h2 style="font-weight: bold; font-family: Century Gothic; font-variant: small-caps">Link</h2>
            </div>
            <!--END OF BUTTON LINK-->
            
            <!--END OF OUTGOING LINKS // PASTE MORE ABOVE THIS LINE-->
           
            <!--DIVIDER-->
            <div class="card bg-primary my-2" style="height:1px;"></div>
            <!--END OF DIVIDER-->
            
            <!--HEADER-->
            <div class="card border-0 bg-transparent">
                <h1 style="z-index: 100; text-shadow: 0 0 5px #000; font-family: Century Gothic; font-variant: small-caps; font-size: 20pt;">Rules</h1>
                <div class="bg-primary" style="height: 10px; width: 35%; position: absolute; top: 50%; left: 1%; opacity: .8;"></div>
            </div>
            <!--END OF HEADER-->
            
            <!--RULES DELETE IF UNNEEDED-->
            <ul>
                <li>Rule</li>
                <li>Rule</li>
                <li>Rule</li>
                <li>Rule</li>
            </ul>
            <!--END OF RULES-->
            
            <!--DIVIDER-->
            <div class="card bg-primary my-2" style="height:1px;"></div>
            <!--END OF DIVIDER-->
            
            <!--HEADER-->
            <div class="card border-0 bg-transparent">
                <h1 style="z-index: 100; text-shadow: 0 0 5px #000; font-family: Century Gothic; font-variant: small-caps; font-size: 20pt;">FAQ</h1>
                <div class="bg-primary" style="height: 10px; width: 35%; position: absolute; top: 50%; left: 1%; opacity: .8;"></div>
            </div>
            <!--END OF HEADER-->
            
            <!--FAQ DELETE IF UNNEEDED-->
            
            <!--QUESTION AND ANSWER-->
            <p class="text-muted mb-n1"><i class="fad fa-comment-question"></i> This is a question?</p>
            <p class="ml-3"><i class="fad fa-comment-lines fa-flip-horizontal"></i> Yes, and this is an answer!</p>
            <!--END OF QUESTION AND ANSWER-->
            
            <!--QUESTION AND ANSWER-->
            <p class="text-muted mb-n1"><i class="fad fa-comment-question"></i> What if this is a more complicated question?</p>
            <p class="ml-3"><i class="fad fa-comment-lines fa-flip-horizontal"></i> Well this would be a longer answer! 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.</p>
            <!--END OF QUESTION AND ANSWER-->
            
            <!--END OF FAQ-->
        </div>
    </div>
    <!--END OF LINK AND INFO BOX-->
    
    <!--UPDATE BOX-->
    <div class="col-md-6">
        <div class="card card-outline-primary rounded-0 bg-faded mb-3 p-3 overflow-auto" style="border-width: 2px; height: 350px;">
            
            <!--HEADER-->
            <div class="card border-0 bg-transparent">
                <h1 style="z-index: 100; text-shadow: 0 0 5px #000; font-family: Century Gothic; font-variant: small-caps; font-size: 20pt;">Updates</h1>
                <div class="bg-primary" style="height: 10px; width: 35%; position: absolute; top: 50%; left: 1%; opacity: .8;"></div>
            </div>
            <!--END OF HEADER-->
            
            <ul>
                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
                <li>UPDATE</li>
                <li>UPDATE</li>
                <li>UPDATE</li>
                <li>UPDATE</li>
                <li>UPDATE</li>
                <li>UPDATE</li>
                <li>UPDATE</li>
            </ul>
            
        </div>
    </div>
    <!--END OF UPDATE BOX-->
    
    </div>
    <!--END OF INFO BOXES-->
    
    <!--PICTURE DIVIDER-->
    <div class="card card-outline-primary w-100" style="background: #C38A8B url(
    
    https://dummyimage.com/350/FFF/000000
    
    ) center; background-size: cover; background-repeat: no-repeat; height: 350px; border-width: 2px;">
        
        <!--IMG CREDIT-->
        <a class="p-2 text-muted tooltipster" title="IMG CREDIT" href="CREDIT_URL" style="opacity:.6;"><i class="fas fa-image"></i></a>
        
	</div>
	<!--END OF PICTURE DIVIDER-->
	
	<!--STAFF HEADER-->
    <div class="card text-center border-0 bg-transparent">
        <h1 style="z-index: 100; text-shadow: 0 0 5px #000; font-size: 50pt; font-weight: bold;  font-family: Century Gothic; font-variant: small-caps">Staff</h1>
        <div class="bg-primary" style="height: 10px; width: 100%; position: absolute; top: 50%; left: 0%; opacity: .8;"></div>
    </div>
    <!--END OF STAFF HEADER-->
    
    <!--STAFF LINEUP-->
    <div class="row m-2 justify-content-center">
    
    <!--STAFF MEMBER-->
    <div class="card card-outline-primary text-center justify-content-center m-2" style="height: 200px; width: 200px; background: url(
    
    https://dummyimage.com/350/FFF/000000
    
    ) center; background-size: cover; color: #fff; border-width: 2px;">
        <a class="btn btn-outline-primary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a><h1 style="text-shadow: 0 0 15px #000; font-weight:bold;">Name <br> Title</h1>
    </div>
    <!--END OF STAFF MEMBER-->
    
    <!--STAFF MEMBER-->
    <div class="card card-outline-primary text-center justify-content-center m-2" style="height: 200px; width: 200px; background: url(
    
    https://dummyimage.com/350/FFF/000000
    
    ) center; background-size: cover; color: #fff; border-width: 2px;">
        <a class="btn btn-outline-primary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a><h1 style="text-shadow: 0 0 15px #000; font-weight:bold;">Name <br> Title</h1>
    </div>
    <!--END OF STAFF MEMBER-->
    
    <!--STAFF MEMBER-->
    <div class="card card-outline-primary text-center justify-content-center m-2" style="height: 200px; width: 200px; background: url(
    
    https://dummyimage.com/350/FFF/000000
    
    ) center; background-size: cover; color: #fff; border-width: 2px;">
        <a class="btn btn-outline-primary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a><h1 style="text-shadow: 0 0 15px #000; font-weight:bold;">Name <br> Title</h1>
    </div>
    <!--END OF STAFF MEMBER-->
    
    <!--STAFF MEMBER-->
    <div class="card card-outline-primary text-center justify-content-center m-2" style="height: 200px; width: 200px; background: url(
    
    https://dummyimage.com/350/FFF/000000
    
    ) center; background-size: cover; color: #fff; border-width: 2px;">
        <a class="btn btn-outline-primary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a><h1 style="text-shadow: 0 0 15px #000; font-weight:bold;">Name <br> Title</h1>
    </div>
    <!--END OF STAFF MEMBER-->
    
    <!--STAFF MEMBER-->
    <div class="card card-outline-primary text-center justify-content-center m-2" style="height: 200px; width: 200px; background: url(
    
    https://dummyimage.com/350/FFF/000000
    
    ) center; background-size: cover; color: #fff; border-width: 2px;">
        <a class="btn btn-outline-primary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a><h1 style="text-shadow: 0 0 15px #000; font-weight:bold;">Name <br> Title</h1>
    </div>
    <!--END OF STAFF MEMBER-->
    
    <!--STAFF MEMBER-->
    <div class="card card-outline-primary text-center justify-content-center m-2" style="height: 200px; width: 200px; background: url(
    
    https://dummyimage.com/350/FFF/000000
    
    ) center; background-size: cover; color: #fff; border-width: 2px;">
        <a class="btn btn-outline-primary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a><h1 style="text-shadow: 0 0 15px #000; font-weight:bold;">Name <br> Title</h1>
    </div>
    <!--END OF STAFF MEMBER-->
    
    <!--PASTE MORE ABOVE HERE-->
    </div>
    <!--END OF STAFF LINEUP-->
    
    <!--CAST LINEUP-->
    <div class="text-center">
    
    <!--CAST HEADER-->
    <div class="card border-0 bg-transparent">
        <h1 style="z-index: 100; text-shadow: 0 0 5px #000; font-size: 50pt; font-weight: bold;  font-family: Century Gothic; font-variant: small-caps">Cast</h1>
        <div class="bg-primary" style="height: 10px; width: 100%; position: absolute; top: 50%; left: 0%; opacity: .8;"></div>
    </div>
    <!--END OF CAST HEADER-->
    
    <!--CHARACTER CARD-->
    <div class="flip">
    <div class="front card card-outline-primary" style="background-image: url(
    
    https://dummyimage.com/350/FFF/000000
    
    ); border-radius: 10px; border-width: 2px;">

    </div>
    <div class="back card card-outline-primary" style="border-radius: 10px; border-width: 2px;">
        <div class="card bg-faded border-0 p-2 text-left mx-n3 overflow-auto" style="height: 415px;">
        <h1 style="font-family: Century Gothic; font-variant: small-caps;">Character Name</h1>
        
        <p>Description/summary about the character. 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. 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>
       </div>
    </div>
    </div>
    <!--END OF CHARACTER CARD-->
    
    <!--CHARACTER CARD-->
    <div class="flip">
    <div class="front card card-outline-primary" style="background-image: url(
    
    https://dummyimage.com/350/FFF/000000
    
    ); border-radius: 10px; border-width: 2px;">

    </div>
    <div class="back card card-outline-primary" style="border-radius: 10px; border-width: 2px;">
        <div class="card bg-faded border-0 p-2 text-left mx-n3 overflow-auto" style="height: 415px;">
        <h1 style="font-family: Century Gothic; font-variant: small-caps;">Character Name</h1>
        
        <p>Description/summary about the character. 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. 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>
       </div>
    </div>
    </div>
    <!--END OF CHARACTER CARD-->
    
    <!--CHARACTER CARD-->
    <div class="flip">
    <div class="front card card-outline-primary" style="background-image: url(
    
    https://dummyimage.com/350/FFF/000000
    
    ); border-radius: 10px; border-width: 2px;">

    </div>
    <div class="back card card-outline-primary" style="border-radius: 10px; border-width: 2px;">
        <div class="card bg-faded border-0 p-2 text-left mx-n3 overflow-auto" style="height: 415px;">
        <h1 style="font-family: Century Gothic; font-variant: small-caps;">Character Name</h1>
        
        <p>Description/summary about the character. 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. 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>
       </div>
    </div>
    </div>
    <!--END OF CHARACTER CARD-->
    
    <!--CHARACTER CARD-->
    <div class="flip">
    <div class="front card card-outline-primary" style="background-image: url(
    
    https://dummyimage.com/350/FFF/000000
    
    ); border-radius: 10px; border-width: 2px;">

    </div>
    <div class="back card card-outline-primary" style="border-radius: 10px; border-width: 2px;">
        <div class="card bg-faded border-0 p-2 text-left mx-n3 overflow-auto" style="height: 415px;">
        <h1 style="font-family: Century Gothic; font-variant: small-caps;">Character Name</h1>
        
        <p>Description/summary about the character. 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. 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>
       </div>
    </div>
    </div>
    <!--END OF CHARACTER CARD-->
    
    <!--CHARACTER CARD-->
    <div class="flip">
    <div class="front card card-outline-primary" style="background-image: url(
    
    https://dummyimage.com/350/FFF/000000
    
    ); border-radius: 10px; border-width: 2px;">

    </div>
    <div class="back card card-outline-primary" style="border-radius: 10px; border-width: 2px;">
        <div class="card bg-faded border-0 p-2 text-left mx-n3 overflow-auto" style="height: 415px;">
        <h1 style="font-family: Century Gothic; font-variant: small-caps;">Character Name</h1>
        
        <p>Description/summary about the character. 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. 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>
       </div>
    </div>
    </div>
    <!--END OF CHARACTER CARD-->
    
    <!--CHARACTER CARD-->
    <div class="flip">
    <div class="front card card-outline-primary" style="background-image: url(
    
    https://dummyimage.com/350/FFF/000000
    
    ); border-radius: 10px; border-width: 2px;">

    </div>
    <div class="back card card-outline-primary" style="border-radius: 10px; border-width: 2px;">
        <div class="card bg-faded border-0 p-2 text-left mx-n3 overflow-auto" style="height: 415px;">
        <h1 style="font-family: Century Gothic; font-variant: small-caps;">Character Name</h1>
        
        <p>Description/summary about the character. 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. 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>
       </div>
    </div>
    </div>
    <!--END OF CHARACTER CARD-->
    
    <!--PASTE MORE ABOVE HERE-->
    </div>
    <!--END OF CAST LINEUP-->
    
    <!--CREDIT, DO NOT EDIT EXCEPT FOR IMG CREDIT-->
    <div class="card card-outline-primary w-100 p-3 justify-content-center mb-3" style="background: #C38A8B url(
    
    https://f2.toyhou.se/file/f2-toyhou-se/images/23295036_LjVvRSw4rzNwbyJ.png
    
    ) center; background-size: cover; background-repeat: no-repeat; height: 100px; border-radius: 0 0 90px 0; border-width: 2px;">
       
       <div class="card card-outline-primary bg-faded p-3" style="z-index: 100; border-radius: 0 0 90px 0; font-family: Century Gothic; font-variant: small-caps; border-width: 2px;">
           
       <p>code by @biggayfish | <a href="https://toyhou.se/10489719.f2u-htmlcss-card-flip" class="tooltipster" title="card flip css by James_William_Novak"><i class="fad fa-scissors"></i></a> | <a href="https://toyhou.se/6560537.music-player-tutorial-f2u" class="tooltipster" title="music player snippet"><i class="fad fa-scissors"></i></a> | 
       
       <!--IMG CREDIT-->
       <a href="https://toyhou.se/6259293.-f2u-transparent-patterns/gallery#23295036" class="tooltipster" title="IMG Pattern by CanadianLyynx"><i class="fad fa-image"></i></a>
       <!--END OF IMG CREDIT-->
       </p>
       
       </div>
    </div>
</div>