[F2U/D2U] Homestuck Redux Character Code
created by:BigGayFish
HTMLCustom ColorsMixed ColorsCharacter
Copy
<!--HOMESTUCK REDUX - MAIN CHARACTER (SBURB PLAYER) - CUSTOM COLORS
You ever get possessed and just create something larger than what you thought was possible? That's me with this code. Anyways no fancy talk here in the code notes, just indexing this shit cos it's 3AM and I'm tired...
NOTE: If you don't like howe some of the imgs look (icons, moodboards, accent imgs, etc), change "background-size: contain;" to "background-size: cover;" or vice versa.
COLORKEY: #e20000 - The MAIN color, this is litereally everything. I suggest making it your fancharacter's color
#000 - Main font color
#fff - Secondary font color and button color
#EFEFEF - Background Color to all boxes
#ff9e9e - Light Gradient, goes at the very top
#bf0000 - Medium Gradient, goes in the middle, make it sorta close to your MAIN color but not TOO close
#ae0000 - Dark Gradient, goes at the bottom
SIGN - The place you put the SIGN NAME and the IMG to go with it. DO NOT TOUCH THE ANIMATIONS, THEY ARE INCREDIBLY FINICKY!
CHARACTER NAME - Self explanatory. Cuts off a bit if the name is too many letters long, but fits within homestuck naming conventions.
ICONS - contains your MAIN SPRITE, LUNAR SPRITE, and GODTIER SPRITE
QUICK INFO - Contains all the main beats for your character and the PLAYLIST is underneath it
PLAYER DATA SECTION - Contains the following character info: TASTES (LIKES, DISLIKES, HOBBIES), TALKSPRITE (DESKTOP and MOBILE), TYPING QUIRK (has a carousal to go through several quotes), PERSONALITY, TRIVIA, and RIBBONS. It also includes the design portion and multitudes of IMAGEs. The design section is cut into REF IMAGE (contains a carousal that holds 3 imgs and a way to add more) and DESIGN NOTES / CHARACTER CREATION which further has the COLOR PALLETTE and DEFINING FEATURES
SBURB DATA SECTION - Contains all the stuff a SBURB player would need: STRIFE SPECIBUS, FETCH MODUS, PSIONICS (if applicable), ABILITY 1, ABILITY 2 (psioinics and abilities can be deleted if not applicable), COMBAT STYLE, LAND, DENIZEN, CONSORT, ELEMENT, LUNAR SWAY, CLASS, ASPECT, GODTIER (which is a more detailed ref page), and CLASSPECT (which contains the design notes and color pallette for the godtier)
MOODBOARD - There's three in total
BIOGRAPHY - A place to detail your character's story; the box scrolls
QUADRANTS - Contains MATESPRITE, MOIRAIL, AUSPISTICE, and KISMESIS in their respective colors
FAMILY - this is for LUSUS and ANCESTOR (which can be replaced with GUARDIAN and other relatives for fankids)
RELATIONSHIP - For all the other links you need, each block is labeled CHARA and can be repeated as many times as needed. I used bugs to give the idea of a "friendship" but you can use any fontawesome icons you prefer.
-->
<div class="container-fluid p-3" style="font-size:13pt; font-family: Courier, monospace; color: #000; border: #e20000 5px solid; border-radius: 15px; background: linear-gradient(#ff9e9e, #bf0000, #ae0000);">
<div class="card mx-n3 my-n3 border-0 p-3" style="border-radius: 15px; background: url(https://f2.toyhou.se/file/f2-toyhou-se/images/26019167_kciTvcQJ3CbjGH4.png);">
<div class="row no-gutters">
<!--SIGN-->
<div class="col-lg-12 card mt-n5 hidden-sm-down rounded-0 tooltipster" title="SIGN_NAME" style="border: #fff 5px solid; background: #000 url(
https://file.garden/ZVkTvzrahkhXWZYD/Image%20Hosting/Homestuck/unknown.png
) center; background-size: cover; background-repeat: no-repeat; height: 150px; width: 150px; z-index:100; position:absolute;left:70%;">
</div>
<!--ANIMATION DO NOT TOUCH-->
<div class="card mt-n5 hidden-sm-down rounded-0 fa-fade bg-transparent" style="height: 150px; width: 150px; z-index:10; box-shadow: 0 0 20px #fff; position:absolute; left:70%;">
</div>
<!--SIGN-->
<div class="col-lg-12 card border-0 p-2" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); z-index:1; letter-spacing: 15px;">
<h1 class="font-weight-bold ml-5 text-uppercase display-4">
Character Name
</h1>
</div>
<!--SPACING DO NOT TOUCH-->
<div class="col-lg-12 hidden-sm-down" style="height:70px;"></div>
<div class="row col-lg-12 align-items-center mb-3">
<div class="col-md-4">
<!--ICONS-->
<div class="card bg-transparent border-0 mb-3">
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="one" role="tabpanel">
<!--MAIN SPRITE-->
<div class="card bg-transparent border-0" style="background: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/8bebeefe-8fe5-4175-9579-446eb3cc2008/dgt56wt-f60fcbb1-3764-4fd7-83af-363db32e681a.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzhiZWJlZWZlLThmZTUtNDE3NS05NTc5LTQ0NmViM2NjMjAwOFwvZGd0NTZ3dC1mNjBmY2JiMS0zNzY0LTRmZDctODNhZi0zNjNkYjMyZTY4MWEucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.L_84jqRuar2fggll6zJsr-cFV6-4uh6FkRQqsYzRHFI) center; height: 350px; background-repeat: no-repeat; background-size: contain;">
</div>
<!--END OF MAIN SPRITE-->
</div>
<div class="tab-pane fade" id="two" role="tabpanel">
<!--LUNAR SPRITE-->
<div class="card bg-transparent border-0" style="background: url(https://f2.toyhou.se/file/f2-toyhou-se/images/28698341_yAfh3ClOrIWXeCL.png) center; height: 350px; background-repeat: no-repeat; background-size: contain;">
</div>
<!--END OF LUNAR SPRITE-->
</div>
<div class="tab-pane fade" id="three" role="tabpanel" aria-labelledby="pills-contact-tab">
<!--GODTIER SPRITE-->
<div class="card bg-transparent border-0" style="background: url(https://f2.toyhou.se/file/f2-toyhou-se/images/28698536_azSB4TjgfVA6psp.png) center; height: 350px; background-repeat: no-repeat; background-size: contain;">
</div>
<!--END OF GODTIER SPRITE-->
</div>
</div>
</div>
<!--END OF ICONS-->
<!--BUTTONS-->
<ul class="nav nav-pills justify-content-center text-center text-uppercase m-3" id="pills-tab" role="tablist">
<li class="nav-item mx-2 ">
<a class="nav-link active text-white" style="background: #e20000; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); border-radius:0px;" data-toggle="pill" href="#one" role="tab" ><i class="fal fa-bug"></i></a>
</li>
<li class="nav-item mx-2">
<a class="nav-link text-white" style="background: #e20000; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); border-radius:0px;" data-toggle="pill" href="#two" role="tab"><i class="fal fa-bug"></i></a>
</li>
<li class="nav-item mx-2">
<a class="nav-link text-white" style="background: #e20000; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); border-radius:0px;" data-toggle="pill" href="#three" role="tab"><i class="fal fa-bug"></i></a>
</li>
</ul>
<!--END OF BUTTONS-->
</div>
<!--QUICK INFO-->
<div class="col-md-4">
<!--HANDLE-->
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); z-index:1;">
<h1 class="font-weight-bold text-uppercase text-center">handle</h1>
</div>
<div class="card text-center m-3 p-2 rounded-0" style="border: #e20000 3px solid; background-color: #EFEFEF;">
<h1 class="text-center">content</h1>
</div>
<!--END OF HANDLE-->
<!--GENDER-->
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); z-index:1;">
<h1 class="font-weight-bold text-uppercase text-center">gender</h1>
</div>
<div class="card text-center m-3 p-2 rounded-0" style="border: #e20000 3px solid; background-color: #EFEFEF;">
<h1 class="text-center">content</h1>
</div>
<!--END OF GENDER-->
<!--SEXUALITY-->
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); z-index:1;">
<h1 class="font-weight-bold text-uppercase text-center">Sexuality</h1>
</div>
<div class="card text-center m-3 p-2 rounded-0" style="border: #e20000 3px solid; background-color: #EFEFEF;">
<h1 class="text-center">content</h1>
</div>
<!--END OF SEXUALITY-->
</div>
<div class="col-md-4">
<!--AGE-->
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); z-index:1;">
<h1 class="font-weight-bold text-uppercase text-center">age</h1>
</div>
<div class="card text-center m-3 p-2 rounded-0" style="border: #e20000 3px solid; background-color: #EFEFEF;">
<h1 class="text-center">content</h1>
</div>
<!--END OF AGE-->
<!--PRONOUNS-->
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); z-index:1;">
<h1 class="font-weight-bold text-uppercase text-center">pronouns</h1>
</div>
<div class="card text-center m-3 p-2 rounded-0" style="border: #e20000 3px solid; background-color: #EFEFEF;">
<h1 class="text-center">content</h1>
</div>
<!--END OF PRONOUNS-->
<!--VOICE CLAIM-->
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); z-index:1;">
<h1 class="font-weight-bold text-uppercase text-center">Voice Claim</h1>
</div>
<div class="card text-center m-3 p-2 rounded-0" style="border: #e20000 3px solid; background-color: #EFEFEF;">
<h1 class="text-center"><a href="#" style="color: #e20000;">content</a></h1>
</div>
<!--END OF VOICE CLAIM-->
</div>
<!--END OF QUICK INFO-->
<!--SPACING DO NOT TOUCH-->
<div class="col-sm-4 hidden-sm-down"></div>
<!--PLAYLIST-->
<div class="col-md-8 border-0 card p-2" style="background-color: #e20000; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); letter-spacing: 15px; opacity: .8;">
<a href="#" class="font-weight-bold text-center text-uppercase display-4" style="color: #fff; text-shadow: 0 0 10px #fff;">Playlist <i class="fas fa-play fa-beat"></i></a>
</div>
<!--END OF PLAYLIST-->
</div>
<!--PLAYER DATA - HEADER -->
<div class="col-lg-12 card border-0 p-2 mb-3" style="background-color: #e20000; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); letter-spacing: 15px; opacity: .8;">
<a data-toggle="collapse" style="color: #fff;" href="#playerdata">
<h1 class="font-weight-bold text-center text-uppercase display-4" style="text-shadow: 0 0 10px #fff;">Player Data
<i class="fa-solid fa-caret-down fa-beat"></i>
</h1>
</a>
</div>
<!--END OF SBURB DATA - HEADER -->
</div>
<!--PLAYER DATA SECTION-->
<div class="collapse mb-3" id="playerdata">
<div class="row no-gutters align-items-center">
<!--TASTES-->
<!--LIKES-->
<div class="col-md-4">
<div class="card m-3 my-2 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">LIKES</h1>
</div>
<div class="card m-3 p-2 rounded-0" style="border: #e20000 3px solid; background-color: #EFEFEF;">
<ul class="font-weight-bold my-2">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
<!--END OF LIKES-->
<!--IMAGE-->
<div class="col-md-4">
<div class="card rounded-0 m-3" style="border: #e20000 5px solid; background: #000 url(
https://f2.toyhou.se/file/f2-toyhou-se/images/55328923_7FXHd3mEDwVMWEs.png
) center; background-repeat: no-repeat; background-size: cover; height:350px; width:95%; z-index:100;">
<!--IMG CREDIT-->
<a class="p-2 tooltipster" title="IMG CREDIT" href="#" style="color: #fff; text-shadow: 0 0 5px #fff; opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--ANIMATION DO NOT TOUCH-->
<div class="card rounded-0 fa-fade bg-transparent m-3" style="height:350px; width:95%; z-index:10; box-shadow: 0 0 15px #fff; position: absolute; top:0;">
</div>
</div>
<!--END OF IMAGE-->
<!--DISLIKES-->
<div class="col-md-4">
<div class="card m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">DISLIKES</h1>
</div>
<div class="card m-3 p-2 rounded-0" style="border: #e20000 3px solid; background-color: #EFEFEF;">
<ul class="font-weight-bold my-2">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
<!--END OF DISLIKES-->
<!--HOBBIES-->
<div class="col-lg-8">
<div class="card m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">HOBBIES</h1>
</div>
<div class="card m-3 p-2 rounded-0" style="border: #e20000 3px solid; background-color: #EFEFEF;">
<ul class="font-weight-bold my-2">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
<!--END OF HOBBIES-->
<!--IMAGE-->
<div class="col-md-4">
<div class="card rounded-0 m-3" style="border: #e20000 5px solid; background: #000 url(
https://f2.toyhou.se/file/f2-toyhou-se/images/28699648_dS4zjwmskHPHyp2.png
) center; background-repeat: no-repeat; background-size: cover; height:350px; width:90%; z-index:100;">
<!--IMG CREDIT-->
<a class="p-2 tooltipster" title="IMG CREDIT" href="#" style="color: #fff; text-shadow: 0 0 5px #fff; opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--ANIMATION DO NOT TOUCH-->
<div class="card rounded-0 fa-fade bg-transparent m-3" style="height:350px; width:90%; z-index:10; box-shadow: 0 0 15px #fff; position: absolute; top:0;">
</div>
</div>
<!--END OF IMAGE-->
<!--END OF TASTES-->
<!--TALKSPRITE (DESKTOP)-->
<div class="col-sm-3 d-none d-sm-block">
<div class="card rounded-0 m-3" style="border: #e20000 5px solid; background: #000 url(
https://f2.toyhou.se/file/f2-toyhou-se/images/28698461_JdSRyTkxK6Aayko.png
) center; background-repeat: no-repeat; background-size: contain; height: 350px; width: 90%; z-index:100;">
</div>
<!--ANIMATION DO NOT TOUCH-->
<div class="card rounded-0 fa-fade bg-transparent m-3" style="height: 350px; width: 90%; z-index:10; box-shadow: 0 0 20px #fff; position: absolute; top:0;">
</div>
<div class="d-lg-none mb-5"></div>
</div>
<!--END OF TALKSPRITE-->
<!--TALKSPRITE (MOBILE)-->
<div class="col-sm-3 d-md-none">
<div class="card rounded-0 m-3" style="border: #e20000 5px solid; background: #000 url(
https://f2.toyhou.se/file/f2-toyhou-se/images/28698461_JdSRyTkxK6Aayko.png
) center; background-repeat: no-repeat; background-size: contain; height: 300px; width: 300px; z-index:100;">
</div>
<!--ANIMATION DO NOT TOUCH-->
<div class="card rounded-0 fa-fade bg-transparent m-3" style="height: 300px; width: 300px; z-index:10; box-shadow: 0 0 20px #fff; position: absolute; top:0;">
</div>
<div class="d-lg-none mb-5"></div>
</div>
<!--END OF TALKSPRITE-->
<!--TYPING QUIRK-->
<div class="col-lg-9">
<i class="fas fa-caret-up fa-4x d-lg-none" style="color: #e20000; position: absolute; bottom: 87%; left: 45%; z-index: 50;"></i>
<div class="d-none d-sm-block" style="position: absolute; top: 25%; right: 97%; z-index: 50;"><i class="fas fa-caret-left fa-4x" style="color: #e20000;"></i></div>
<div class="card text-center mx-3 p-2 rounded-0 font-weight-bold" style="border: #e20000 3px solid; background-color: #e20000; color: #fff; z-index: 100;">
<h1>Typing Quirk:</h1>
</div>
<div class="card text-center mx-3 mb-3 p-2 rounded-0 font-weight-bold" style="border: #e20000 6px solid; background-color: #EFEFEF; color: #e20000; z-index: 100;">
<div id="TQ" class="carousel slide m-3" data-ride="false" data-pause="true">
<div class="carousel-inner">
<!--QUOTE ONE-->
<div class="carousel-item active">
<p>Quote goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<!--QUOTE TWO-->
<div class="carousel-item">
<p>Quote goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<!--QUOTE THREE-->
<div class="carousel-item">
<p>Quote goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<!--BUTTON-->
<ul class="nav nav-pills" id="pills-tab" role="tablist">
<li class="nav-item mx-2">
<a class="nav-link" style="color:#e20000; position: absolute; right: 0%; bottom:5%;" data-slide="next" href="#TQ"><i class="fa-solid fa-caret-down fa-beat fa-2x"></i></a>
</li>
</ul>
<!--END OF BUTTON-->
</div>
</div>
<!--END OF TYPING QUIRK-->
<!--PERSONALITY-->
<div class="col-lg-8">
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">PERSONALITY</h1>
</div>
<div class="card m-3 p-3 rounded-0" style="border: #e20000 3px solid; background-color: #EFEFEF;">
<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. 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>
<!--END OF PERSONALITY-->
<!--IMAGE-->
<div class="col-md-4">
<div class="card rounded-0 m-3" style="border: #e20000 5px solid; background: #000 url(
https://f2.toyhou.se/file/f2-toyhou-se/images/62750550_mMFzWiEBl9y1iSG.png
) center; background-repeat: no-repeat; background-size: cover; height:350px; width:90%; z-index:100;">
<!--IMG CREDIT-->
<a class="p-2 tooltipster" title="IMG CREDIT" href="#" style="color: #fff; text-shadow: 0 0 5px #fff; opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--ANIMATION DO NOT TOUCH-->
<div class="card rounded-0 fa-fade bg-transparent m-3" style="height:350px; width:90%; z-index:10; box-shadow: 0 0 15px #fff; position: absolute; top:0;">
</div>
</div>
<!--END OF IMAGE-->
<!--TRIVIA-->
<div class="col-md-6">
<div class="card border-0 m-3" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">TRIVIA</h1>
</div>
<div class="card m-3 p-2 rounded-0" style="border: #e20000 3px solid; background-color: #EFEFEF;">
<ul class="font-weight-bold my-2">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
<!--END OF TRIVIA-->
<!--RIBBONS-->
<div class="col-md-6">
<div class="card border-0 m-3" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">RIBBONS</h1>
</div>
<div class="card m-3 p-2 rounded-0 overflow-auto" style="border: #e20000 3px solid; background-color: #EFEFEF; height:200px;">
<div class="card-text text-center">
<!--RIBBON-->
<img class="m-2 tooltipster" data-placement="top"
title="RIBBON_NAME"
src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
<!--END OF RIBBON-->
<!--RIBBON-->
<img class="m-2 tooltipster" data-placement="top"
title="RIBBON_NAME"
src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
<!--END OF RIBBON-->
<!--RIBBON-->
<img class="m-2 tooltipster" data-placement="top"
title="RIBBON_NAME"
src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
<!--END OF RIBBON-->
<!--RIBBON-->
<img class="m-2 tooltipster" data-placement="top"
title="RIBBON_NAME"
src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
<!--END OF RIBBON-->
<!--RIBBON-->
<img class="m-2 tooltipster" data-placement="top"
title="RIBBON_NAME"
src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
<!--END OF RIBBON-->
<!--RIBBON-->
<img class="m-2 tooltipster" data-placement="top"
title="RIBBON_NAME"
src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
<!--END OF RIBBON-->
<!--PASTE MORE AS NEEDED ABOVE THIS LINE-->
<p><small class="text-muted">Ribbon Credits</small></p>
<small><a href="#" style="color: #e20000;">x</a> | <a href="#" style="color: #e20000;">x</a></small>
</div>
</div>
</div>
<!--END OF RIBBONS-->
<!--REF IMAGE-->
<div class="col-md-6">
<!--CARASOUL-->
<div class="card border-0 rounded-0 bg-transparent" >
<div id="FORMS" class="carousel slide m-3" data-ride="false" data-pause="true">
<div class="carousel-inner">
<!--IMG ONE-->
<div class="carousel-item active">
<div style="min-height:600px; background-image:url(
https://f2.toyhou.se/file/f2-toyhou-se/images/51447264_Mgm0q4pkT62pq4S.png
); background-size:contain; background-repeat: no-repeat; background-position:center; position: relative; z-index:100;">
<!--IMG CREDIT-->
<a class="p-2 tooltipster" title="IMG CREDIT" href="#" style="color: #fff; text-shadow: 0 0 5px #fff; opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<h1 class="d-none d-md-block" style="display-4; font-size: 40pt; transform: rotate(-90deg); color: #fff; text-shadow: 0 0 5px #fff; position: absolute; top: 50%; left: 0%; right: 90%; z-index: 5;">Form/Outfit</h1>
<div class="card border-0 rounded-0" style="background-color: #e20000; min-height:600px; position: absolute; top:0; left: 5%; z-index: 1; width: 60%;">
</div>
</div>
<!--END OF IMG ONE-->
<!--IMG TWO-->
<div class="carousel-item">
<div style="min-height:600px; background-image:url(
https://f2.toyhou.se/file/f2-toyhou-se/images/28698341_yAfh3ClOrIWXeCL.png
); background-size:contain; background-repeat: no-repeat; background-position:center; position: relative; z-index:100;">
<!--IMG CREDIT-->
<a class="p-2 tooltipster" title="IMG CREDIT" href="#" style="color: #fff; text-shadow: 0 0 5px #fff; opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<h1 class="d-none d-md-block" style="display-4; font-size: 40pt; transform: rotate(-90deg); color: #fff; text-shadow: 0 0 5px #fff; position: absolute; top: 50%; left: 0%; right: 90%; z-index: 5;">Form/Outfit</h1>
<div class="card border-0 rounded-0" style="background-color: #e20000; min-height:600px; position: absolute; top:0; left: 5%; z-index: 1; width: 60%;">
</div>
</div>
<!--END OF IMG TWO-->
<!--IMG THREE-->
<div class="carousel-item">
<div style="min-height:600px; background-image:url(
https://f2.toyhou.se/file/f2-toyhou-se/images/28698637_VbWD09nForjWFdH.png
); background-size:contain; background-repeat: no-repeat; background-position:center; position: relative; z-index:100;">
<!--IMG CREDIT-->
<a class="p-2 tooltipster" title="IMG CREDIT" href="#" style="color: #fff; text-shadow: 0 0 5px #fff; opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<h1 class="d-none d-md-block" style="display-4; font-size: 40pt; transform: rotate(-90deg); color: #fff; text-shadow: 0 0 5px #fff; position: absolute; top: 50%; left: 0%; right: 90%; z-index: 5;">Form/Outfit</h1>
<div class="card border-0 rounded-0" style="background-color: #e20000; min-height:600px; position: absolute; top:0; left: 5%; z-index: 1; width: 60%;">
</div>
</div>
<!--END OF IMG THREE-->
<!--INSERT MORE SLIDES ABOVE HERE-->
</div>
</div>
</div>
<!--BUTTONS-->
<ul class="nav nav-pills justify-content-around text-center text-uppercase m-3" id="pills-tab" role="tablist">
<li class="nav-item mx-2 ">
<a class="nav-link active" style="background: #e20000; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); border-radius:0px; color: #fff;" data-slide="prev" href="#FORMS"><i class="fas fa-angle-left fa-beat" style="text-shadow: 0 0 10px #fff;"></i></a>
</li>
<li class="nav-item mx-2">
<a class="nav-link" style="background: #e20000; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); border-radius:0px; color: #fff;" data-slide="next" href="#FORMS"><i class="fas fa-angle-right fa-beat" style="text-shadow: 0 0 10px #fff;"></i></a>
</li>
</ul>
<!--END OF BUTTONS-->
<!--END OF CARASOUL-->
</div>
<!--END OF REF IMAGE-->
<!--DESIGN NOTES-->
<div class="col-md-6">
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">CHARACTER CREATION</h1>
</div>
<div class="card m-3 p-3 rounded-0 overflow-auto" style="border: #e20000 3px solid; max-height: 550px; background-color: #EFEFEF;">
<h1 class="font-weight-bold text-uppercase" style="color: #e20000;">NOTES:</h1>
<ul class="my-2">
<li>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.</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
<!--COLOR PALLETTE-->
<div class="row mx-3">
<div class="col-md-4 card p-2 border-0 mb-3" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
<div class="col-md-4 card p-2 border-0 mb-3" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
<div class="col-md-4 card p-2 border-0 mb-3" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
<div class="col-md-4 card p-2 border-0 mb-3" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
<div class="col-md-4 card p-2 border-0 mb-3" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
<div class="col-md-4 card p-2 border-0 mb-3" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
</div>
<!--END OF COLOR PALLETTE-->
<!--DEFINING FEATURES-->
<div class="row mx-3">
<div class="col-md-3 p-2 border-0 mb-3">
<h1 class="font-weight-bold" style="color: #e20000;"><i class="fas fa-person"></i> Species</h1>
<p>Content</p>
</div>
<div class="col-md-3 p-2 border-0 mb-3">
<h1 class="font-weight-bold" style="color: #e20000;"><i class="fas fa-dice-d20"></i> Alignment</h1>
<p>Content</p>
</div>
<div class="col-md-3 p-2 border-0 mb-3">
<h1 class="font-weight-bold" style="color: #e20000;"><i class="fas fa-barcode-read"></i> Status</h1>
<p>Content</p>
</div>
<div class="col-md-3 p-2 border-0 mb-3">
<h1 class="font-weight-bold" style="color: #e20000;"><i class="fas fa-droplet"></i> Blood Color</h1>
<p>#HexCode</p>
</div>
<div class="col-md-3 p-2 border-0 mb-3">
<h1 class="font-weight-bold" style="color: #e20000;"><i class="fas fa-eye"></i> Eye Color</h1>
<p>#HexCode</p>
</div>
<div class="col-md-3 p-2 border-0 mb-3">
<h1 class="font-weight-bold" style="color: #e20000;"><i class="fas fa-dumbbell"></i> Body Type</h1>
<p>Content</p>
</div>
<div class="col-md-3 p-2 border-0 mb-3">
<h1 class="font-weight-bold" style="color: #e20000;"><i class="fas fa-ruler-vertical"></i> Height</h1>
<p>Content</p>
</div>
<div class="col-md-3 p-2 border-0 mb-3">
<h1 class="font-weight-bold" style="color: #e20000;"><i class="fas fa-weight-scale"></i> Weight</h1>
<p>Content</p>
</div>
<!--SIGN/SYMBOL IMG-->
<div class="col-md-5">
<div class="card rounded-0 mb-3" style="border: #e20000 5px solid; background: #000 url(
https://file.garden/ZVkTvzrahkhXWZYD/Image%20Hosting/Homestuck/unknown.png
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width:250px;">
</div>
</div>
<!--END OF SIGN/SYMBOL IMG-->
<div class="col-lg-7 p-2 border-0 mb-3">
<h1 class="font-weight-bold" style="color: #e20000;"><i class="fas fa-symbols"></i> Sign/Symbol Meaning</h1>
<p>You can either just write the sign name or add a small explanation/lore here. 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>
<!--END OF DEFINING FEATURES-->
</div>
</div>
<!--END OF DESIGN NOTES-->
</div>
</div>
<!--END OF PLAYER DATA SECTION-->
<!--SBURB DATA - HEADER -->
<div class="col-lg-12 card border-0 p-2 mb-3" style="background-color: #e20000; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); letter-spacing: 15px; opacity: .8;">
<a data-toggle="collapse" style="color: #fff;" href="#sburbdata">
<h1 class="font-weight-bold text-center text-uppercase display-4" style="text-shadow: 0 0 10px #fff;">Sburb Data
<i class="fa-solid fa-caret-down fa-beat"></i>
</h1>
</a>
</div>
<!--END OF SBURB DATA - HEADER -->
<!--SBURB DATA SECTION-->
<div class="collapse mb-3" id="sburbdata">
<div class="row no-gutters align-items-center">
<!--STRIFE SPECIBUS-->
<div class="col-md-6" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">Strife Specibus</h1>
</div>
<!--IMAGE-->
<div class="card rounded-0 w-75 mb-n1" style="border: #e20000 5px solid; background: #EFEFEF url(
https://static.wikia.nocookie.net/mspaintadventures/images/b/b5/Strifecard_%282%29.png
) center; background-repeat: no-repeat; background-size: contain; height: 350px; max-width: 350px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #e20000; z-index: 100; position:relative"></i>
<div class="card mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #e20000 3px solid; max-height: 250px; background-color: #EFEFEF;">
<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. 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>
<!--END OF STRIFE SPECIBUS-->
<!--FETCH MODUS-->
<div class="col-md-6" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">Fetch Modus</h1>
</div>
<!--IMAGE-->
<div class="card rounded-0 w-75 mb-n1" style="border: #e20000 5px solid; background: #EFEFEF url(
https://static.wikia.nocookie.net/mspaintadventures/images/c/c0/StackModus.png
) center; background-repeat: no-repeat; background-size: contain; height: 350px; max-width: 350px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #e20000; z-index: 100; position:relative"></i>
<div class="card mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #e20000 3px solid; max-height: 250px; background-color: #EFEFEF;">
<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. 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>
<!--END OF FETCH MODUS-->
<!--PSIONICS-->
<div class="col-md-4" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">PSIONICS</h1>
</div>
<!--IMAGE-->
<div class="card rounded-0 w-75 mb-n1" style="border: #e20000 5px solid; background: #EFEFEF url(
https://f2.toyhou.se/file/f2-toyhou-se/images/28699195_WVRADMxItzvcSlJ.png
) top; background-repeat: no-repeat; background-size: cover; height: 350px; max-width: 350px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #e20000; z-index: 100; position:relative"></i>
<div class="card mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #e20000 3px solid; max-height: 250px; background-color: #EFEFEF;">
<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. 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>
<!--END OF PSIONICS-->
<!--ABILITY 1-->
<div class="col-md-4" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">ABILITY</h1>
</div>
<!--IMAGE-->
<div class="card rounded-0 w-75 mb-n1" style="border: #e20000 5px solid; background: #EFEFEF url(
https://f2.toyhou.se/file/f2-toyhou-se/images/44071539_IazHNscgmhZ0LOa.png
) top; background-repeat: no-repeat; background-size: cover; height: 350px; max-width: 350px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #e20000; z-index: 100; position:relative"></i>
<div class="card mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #e20000 3px solid; max-height: 250px; background-color: #EFEFEF;">
<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. 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>
<!--END OF ABILITY 1-->
<!--ABILITY 2-->
<div class="col-md-4" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">ABILITY</h1>
</div>
<!--IMAGE-->
<div class="card rounded-0 w-75 mb-n1" style="border: #e20000 5px solid; background: #EFEFEF url(
https://f2.toyhou.se/file/f2-toyhou-se/images/76960739_aMCmT8KeLTEkaMK.png
) top; background-repeat: no-repeat; background-size: cover; height: 350px; max-width: 350px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #e20000; z-index: 100; position:relative"></i>
<div class="card mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #e20000 3px solid; max-height: 250px; background-color: #EFEFEF;">
<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. 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>
<!--END OF ABILITY 2-->
<!--COMBAT STYLE-->
<div class="col-lg-8">
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">COMBAT STYLE</h1>
</div>
<div class="card m-3 p-3 rounded-0" style="border: #e20000 3px solid; background-color: #EFEFEF;">
<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. 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>
<!--END OF COMBAT STYLE-->
<!--IMAGE-->
<div class="col-md-4">
<div class="card rounded-0 m-3" style="border: #e20000 5px solid; background: #000 url(
https://f2.toyhou.se/file/f2-toyhou-se/images/44307071_diAEtpuX786Ams7.png
) center; background-repeat: no-repeat; background-size: cover; height:350px; width:95%; z-index:100;">
</div>
<!--ANIMATION DO NOT TOUCH-->
<div class="card rounded-0 fa-fade bg-transparent m-3" style="height:350px; width:95%; z-index:10; box-shadow: 0 0 15px #fff; position: absolute; top:0;">
</div>
</div>
<!--END OF IMAGE-->
<!--LAND-->
<div class="col-md-3" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">LAND</h1>
</div>
<!--IMAGE-->
<div class="card rounded-0 w-75 mb-n1" style="border: #e20000 5px solid; background: #EFEFEF url(
https://static.wikia.nocookie.net/mspaintadventures/images/d/d2/LohacPlanet.PNG
) center; background-repeat: no-repeat; background-size: contain; height: 350px; max-width: 350px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #e20000; z-index: 100; position:relative"></i>
<div class="card mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #e20000 3px solid; max-height: 250px; background-color: #EFEFEF;">
<h1 class="text-center" style="color: #e20000;">NAME</h1>
<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>
</div>
</div>
<!--END OF LAND-->
<!--DENIZEN-->
<div class="col-md-3" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">DENIZEN</h1>
</div>
<!--IMAGE-->
<div class="card rounded-0 w-75 mb-n1" style="border: #e20000 5px solid; background: #EFEFEF url(
https://static.wikia.nocookie.net/mspaintadventures/images/f/fe/YaldabaothBrowser.PNG
) center; background-repeat: no-repeat; background-size: contain; height: 350px; max-width: 350px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #e20000; z-index: 100; position:relative"></i>
<div class="card mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #e20000 3px solid; max-height: 250px; background-color: #EFEFEF;">
<h1 class="text-center" style="color: #e20000;">NAME</h1>
<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>
</div>
</div>
<!--END OF DENIZEN-->
<!--CONSORT-->
<div class="col-md-3" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">CONSORT</h1>
</div>
<!--IMAGE-->
<div class="card rounded-0 w-75 mb-n1" style="border: #e20000 5px solid; background: #EFEFEF url(
https://static.wikia.nocookie.net/mspaintadventures/images/d/d6/Crocodile.png
) center; background-repeat: no-repeat; background-size: contain; height: 350px; max-width: 350px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #e20000; z-index: 100; position:relative"></i>
<div class="card mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #e20000 3px solid; max-height: 250px; background-color: #EFEFEF;">
<h1 class="text-center" style="color: #e20000;">NAME</h1>
<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>
</div>
</div>
<!--END OF CONSORT-->
<!--ELEMENT-->
<div class="col-md-3" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">ELEMENT</h1>
</div>
<!--IMAGE-->
<div class="card rounded-0 w-75 mb-n1" style="border: #e20000 5px solid; background: #EFEFEF url(
https://static.wikia.nocookie.net/mspaintadventures/images/0/01/Amber.png
) center; background-repeat: no-repeat; background-size: contain; height: 350px; max-width: 350px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #e20000; z-index: 100; position:relative"></i>
<div class="card mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #e20000 3px solid; max-height: 250px; background-color: #EFEFEF;">
<h1 class="text-center" style="color: #e20000;">NAME</h1>
<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>
</div>
</div>
<!--END OF ELEMENT-->
<!--LUNAR SWAY-->
<div class="col-md-4 my-3" align="center">
<div class="card p-2 mx-3 mb-n1 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">LUNAR SWAY</h1>
</div>
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #e20000; z-index: 100; position:relative"></i>
<!--IMAGE-->
<div class="card rounded-0 w-75 mb-n1" style="border: #e20000 5px solid; background: #000 url(
https://f2.toyhou.se/file/f2-toyhou-se/images/73108517_7VLbRxzDLVOPv93.gif
) center; background-repeat: no-repeat; background-size: contain; height: 350px; max-width: 350px;">
</div>
<!--IMAGE-->
</div>
<!--END OF LUNAR SWAY-->
<!--CLASS-->
<div class="col-md-4 my-3" align="center">
<div class="card p-2 mx-3 mb-n1 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">CLASS</h1>
</div>
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #e20000; z-index: 100; position:relative"></i>
<!--IMAGE-->
<div class="card rounded-0 w-75 mb-n1" style="border: #e20000 5px solid; background: #000 url(
https://f2.toyhou.se/file/f2-toyhou-se/images/73072898_yzlTZNA98RMxkW8.gif
) center; background-repeat: no-repeat; background-size: contain; height: 350px; max-width: 350px;">
</div>
<!--IMAGE-->
</div>
<!--END OF CLASS-->
<!--ASPECT-->
<div class="col-md-4 my-3" align="center">
<div class="card p-2 mx-3 mb-n1 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">ASPECT</h1>
</div>
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #e20000; z-index: 100; position:relative"></i>
<!--IMAGE-->
<div class="card rounded-0 w-75 mb-n1" style="border: #e20000 5px solid; background: #000 url(
https://f2.toyhou.se/file/f2-toyhou-se/images/73067354_hdVRXQLArle8PjI.gif
) center; background-repeat: no-repeat; background-size: contain; height: 350px; max-width: 350px;">
</div>
<!--IMAGE-->
</div>
<!--END OF ASPECT-->
<!--GODTIER-->
<div class="col-md-6 my-3">
<div style="min-height:600px; background-image:url(
https://f2.toyhou.se/file/f2-toyhou-se/images/28698393_2YfD7Bu7HaG8w7i.png
); background-size:contain; background-repeat: no-repeat; background-position:center; position: relative; z-index:100;">
<!--IMG CREDIT-->
<a class="p-2 tooltipster" title="IMG CREDIT" href="#" style="color: #fff; text-shadow: 0 0 5px #fff; opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<h1 class="d-none d-md-block" style="display-4; font-size: 40pt; transform: rotate(-90deg); color: #fff; text-shadow: 0 0 5px #fff; position: absolute; top: 50%; left: 10%; right: 90%; z-index: 5;">CLASSPECT NAME</h1>
<div class="card border-0 rounded-0" style="background-color: #e20000; min-height:600px; position: absolute; top:1%; left: 10%; z-index: 1; width: 60%;">
</div>
</div>
<!--END OF GODTIER-->
<!--CLASSPECT-->
<div class="col-md-6">
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">CLASSPECT NAME</h1>
</div>
<div class="card m-3 p-3 rounded-0 overflow-auto" style="border: #e20000 3px solid; max-height: 550px; background-color: #EFEFEF;">
<h1 class="font-weight-bold text-uppercase" style="color: #e20000;">NOTES:</h1>
<ul class="my-2">
<li>Describe your character's classpect and godtier notes here in detail. Write as little or as much as you want. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
<!--COLOR PALLETTE-->
<div class="row mx-3">
<div class="col-md-4 card p-2 border-0 mb-3" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
<div class="col-md-4 card p-2 border-0 mb-3" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
<div class="col-md-4 card p-2 border-0 mb-3" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
<div class="col-md-4 card p-2 border-0 mb-3" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
<div class="col-md-4 card p-2 border-0 mb-3" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
<div class="col-md-4 card p-2 border-0 mb-3" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
</div>
<!--END OF COLOR PALLETTE-->
</div>
</div>
<!--END OF CLASSPECT-->
</div>
</div>
<!--END OF SBURB DATA SECTION-->
<div class="row no-gutters d-flex justify-content-center align-items-center">
<!--MOODBOARD 1-->
<div class="col-md-4">
<!--decoration-->
<div class="card my-3 border-0" style="background-color: #e20000; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); height: 10px; width:350px;"></div>
<!--img-->
<div class="card rounded-0 m-3" style="border: #e20000 5px solid; background: #000 url(
https://f2.toyhou.se/file/f2-toyhou-se/images/76959121_hP3camOAEkAfNeL.png
) center; background-repeat: no-repeat; background-size: contain; height: 320px; width: 320px; z-index:100;">
<!--IMG CREDIT-->
<a class="p-2 tooltipster" title="IMG CREDIT" href="#" style="color: #fff; text-shadow: 0 0 5px #fff; opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--ANIMATION DO NOT TOUCH-->
<div class="card rounded-0 fa-fade bg-transparent m-3" style="height:320px; width:320px; z-index:10; box-shadow: 0 0 15px #fff; position: absolute; top:7%;">
</div>
<!--decoration-->
<div class="card my-3 border-0" style="background-color: #e20000; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); height: 20px; width:350px;">
</div>
</div>
<!--END OF MOODBOARD 1-->
<!--MOODBOARD 2-->
<div class="col-md-4">
<!--decoration-->
<div class="card my-3 border-0" style="background-color: #e20000; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); height: 20px; width:350px;"></div>
<!--img-->
<div class="card rounded-0 m-3" style="border: #e20000 5px solid; background: #000 url(
https://f2.toyhou.se/file/f2-toyhou-se/images/68639442_ubW4097gksqWW7G.png
) center; background-repeat: no-repeat; background-size: contain; height: 320px; width: 320px; z-index:100;">
<!--IMG CREDIT-->
<a class="p-2 tooltipster" title="IMG CREDIT" href="#" style="color: #fff; text-shadow: 0 0 5px #fff; opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--ANIMATION DO NOT TOUCH-->
<div class="card rounded-0 fa-fade bg-transparent m-3" style="height:320px; width:320px; z-index:10; box-shadow: 0 0 15px #fff; position: absolute; top:9%;">
</div>
<!--decoration-->
<div class="card my-3 border-0" style="background-color: #e20000; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); height: 10px; width:350px;"></div>
</div>
<!--END OF MOODBOARD 2-->
<!--MOODBOARD 3-->
<div class="col-md-4">
<!--decoration-->
<div class="card my-3 border-0" style="background-color: #e20000; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); height: 10px; width:350px;"></div>
<!--img-->
<div class="card rounded-0 m-3" style="border: #e20000 5px solid; background: #000 url(
https://f2.toyhou.se/file/f2-toyhou-se/images/52937499_3hXCghkrCcTFZCt.png
) center; background-repeat: no-repeat; background-size: cover; height: 320px; width: 320px; z-index:100;">
<!--IMG CREDIT-->
<a class="p-2 tooltipster" title="IMG CREDIT" href="#" style="color: #fff; text-shadow: 0 0 5px #fff; opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--ANIMATION DO NOT TOUCH-->
<div class="card rounded-0 fa-fade bg-transparent m-3" style="height:320px; width:320px; z-index:10; box-shadow: 0 0 15px #fff; position: absolute; top:7%;">
</div>
<!--decoration-->
<div class="card my-3 border-0" style="background-color: #e20000; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); height: 20px; width:350px;">
</div>
</div>
<!--END OF MOODBOARD 3-->
<!--BIOGRAPHY -->
<div class="col-lg-12 card p-2 mb-3 border-0" style="background-color: #e20000; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); letter-spacing: 15px; opacity: .8;">
<h1 class="font-weight-bold text-center text-uppercase display-4" style="text-shadow: 0 0 10px #fff; color: #fff;">BIOGRAPHY</h1>
</div>
<div class="col-lg-12 card p-2 mb-3 overflow-auto rounded-0" style="border: #e20000 3px solid; max-height: 500px; background-color: #EFEFEF;">
<i class="text-center"><span class="card-title m-3" style="color: #e20000;"><i class="fas fa-quote-left"></i><span style="letter-spacing: 1.5px; font-size: 20pt;"> Quote or Lyrics</span><i class="fas fa-quote-right"></i></span></i>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla malesuada pellentesque elit eget gravida cum. Ac tortor dignissim convallis aenean et tortor at risus. Consectetur adipiscing elit pellentesque habitant morbi tristique. Pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Vitae sapien pellentesque habitant morbi tristique senectus. Neque ornare aenean euismod elementum nisi. Dignissim diam quis enim lobortis scelerisque fermentum dui faucibus. Ullamcorper eget nulla facilisi etiam. Quam pellentesque nec nam aliquam sem et. Nisl nunc mi ipsum faucibus vitae.</p>
<p>Velit scelerisque in dictum non consectetur. Integer malesuada nunc vel risus. A diam maecenas sed enim ut sem. Sed blandit libero volutpat sed cras ornare arcu dui vivamus. Nunc aliquet bibendum enim facilisis gravida. Amet volutpat consequat mauris nunc congue nisi. Tortor pretium viverra suspendisse potenti nullam ac tortor vitae. Viverra suspendisse potenti nullam ac tortor vitae purus. Mauris in aliquam sem fringilla ut morbi tincidunt augue interdum. Tincidunt tortor aliquam nulla facilisi cras.</p>
<h3 style="color: #e20000; border-bottom: #e20000 2px solid; text-shadow: 2px 2px 2px #000;"><i class="fas fa-globe-stand"></i> Subtitle</h3>
<p>Cras fermentum odio eu feugiat. Lacus vel facilisis volutpat est velit egestas. In hac habitasse platea dictumst vestibulum rhoncus est pellentesque. Purus faucibus ornare suspendisse sed nisi lacus sed viverra. Lectus arcu bibendum at varius. Dictum varius duis at consectetur. Quisque sagittis purus sit amet volutpat consequat mauris nunc congue. Sit amet commodo nulla facilisi. Porttitor eget dolor morbi non arcu. Enim sed faucibus turpis in eu mi.</p>
<p>Quis hendrerit dolor magna eget est. Et molestie ac feugiat sed lectus vestibulum. Eu feugiat pretium nibh ipsum consequat nisl vel. Ante metus dictum at tempor commodo ullamcorper a. Ornare quam viverra orci sagittis eu volutpat odio facilisis mauris. Feugiat in ante metus dictum at tempor commodo. Sodales ut etiam sit amet. Tristique et egestas quis ipsum suspendisse ultrices gravida. Gravida dictum fusce ut placerat orci nulla pellentesque. Eget mauris pharetra et ultrices neque. Ac tincidunt vitae semper quis lectus nulla. Et odio pellentesque diam volutpat commodo sed egestas egestas.</p>
<p>Nunc lobortis mattis aliquam faucibus purus. Sed blandit libero volutpat sed cras ornare arcu dui. Sollicitudin tempor id eu nisl nunc. Curabitur gravida arcu ac tortor dignissim convallis aenean et. Habitant morbi tristique senectus et. Urna nunc id cursus metus aliquam. Gravida in fermentum et sollicitudin ac orci phasellus. Tortor at risus viverra adipiscing. Lectus mauris ultrices eros in cursus turpis massa tincidunt. Adipiscing elit duis tristique sollicitudin nibh sit.</p>
</div>
<!--QUADRANTS
HEADER-->
<div class="col-lg-12 card p-2 my-3 border-0" style="background-color: #e20000; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); letter-spacing: 15px; opacity: .8;">
<h1 class="font-weight-bold text-center text-uppercase display-4" style="text-shadow: 0 0 10px #fff; color: #fff;">QUADRANTS</h1>
</div>
<!--MATESPRITE-->
<div class="col-md-3 mb-3" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #ff0000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">MATESPRITE <i class="fas fa-heart"></i></h1>
</div>
<!--IMAGE-->
<div class="card rounded-0 mb-n1" style="border: #ff0000 5px solid; background: #EFEFEF url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width: 250px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #ff0000; z-index: 100; position:relative;"></i>
<div class="card mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #ff0000 3px solid; max-height:350px; background-color: #EFEFEF;">
<a href="#" class="text-center" style="color: #ff0000;"><h1>NAME</h1></a>
<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>
</div>
</div>
<!--END OF MATESPRITE-->
<!--MOIRAIL-->
<div class="col-md-3 mb-3" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #ff8a8a; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">MOIRAIL <i class="fas fa-rhombus"></i></h1>
</div>
<!--IMAGE-->
<div class="card rounded-0 mb-n1" style="border: #ff8a8a 5px solid; background: #EFEFEF url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width: 250px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #ff8a8a; z-index: 100; position:relative;"></i>
<div class="card mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #ff8a8a 3px solid; max-height:350px; background-color: #EFEFEF;">
<a href="#" class="text-center" style="color: #ff8a8a;"><h1>NAME</h1></a>
<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>
</div>
</div>
<!--END OF MOIRAIL-->
<!--AUSPISTICE-->
<div class="col-md-3 mb-3" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #696969; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">AUSPISTICE <i class="fas fa-club"></i></h1>
</div>
<!--IMAGE-->
<div class="card rounded-0 mb-n1" style="border: #696969 5px solid; background: #EFEFEF url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width: 250px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #696969; z-index: 100; position:relative;"></i>
<div class="card mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #696969 3px solid; max-height:350px; background-color: #EFEFEF;">
<a href="#" class="text-center" style="color: #696969;"><h1>NAME</h1></a>
<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>
</div>
</div>
<!--END OF AUSPISTICE-->
<!--KISMESIS-->
<div class="col-md-3 mb-3" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #303030; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">KISMESIS <i class="fas fa-spade"></i></h1>
</div>
<!--IMAGE-->
<div class="card rounded-0 mb-n1" style="border: #303030 5px solid; background: #EFEFEF url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width: 250px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #303030; z-index: 100; position:relative;"></i>
<div class="card mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #303030 3px solid; max-height:350px; background-color: #EFEFEF;">
<a href="#" class="text-center" style="color: #303030;"><h1>NAME</h1></a>
<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>
</div>
</div>
<!--END OF KISMESIS-->
<!--END OF QUADRANTS-->
<!--FAMILY
HEADER-->
<div class="col-lg-12 card p-2 my-3 border-0" style="background-color: #e20000; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); letter-spacing: 15px; opacity: .8;">
<h1 class="font-weight-bold text-center text-uppercase display-4" style="text-shadow: 0 0 10px #fff; color: #fff;">Family</h1>
</div>
<!--ANCESTOR-->
<div class="col-md-6" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">ANCESTOR</h1>
</div>
<!--IMAGE-->
<div class="card rounded-0 mb-n1" style="border: #e20000 5px solid; background: #303030 url(
https://dummyimage.com/350/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 350px; max-width: 350px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #e20000; z-index: 100; position:relative;"></i>
<div class="card mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #e20000 3px solid; max-height:350px; background-color: #EFEFEF;">
<a href="#" class="text-center" style="color: #e20000;"><h1>NAME</h1></a>
<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. 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>
<!--END OF ANCESTOR-->
<!--LUSUS-->
<div class="col-md-6" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">LUSUS</h1>
</div>
<!--IMAGE-->
<div class="card rounded-0 mb-n1" style="border: #e20000 5px solid; background: #303030 url(
https://dummyimage.com/350/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 350px; max-width: 350px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #e20000; z-index: 100; position:relative;"></i>
<div class="card mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #e20000 3px solid; max-height:350px; background-color: #EFEFEF;">
<a href="#" class="text-center" style="color: #e20000;"><h1>NAME</h1></a>
<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. 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>
<!--END OF LUSUS-->
<!--END OF FAMILY-->
<!--RELATIONSHIPS
HEADER-->
<div class="col-lg-12 card p-2 my-3 border-0" style="background-color: #e20000; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); letter-spacing: 15px; opacity: .8;">
<h1 class="font-weight-bold text-center text-uppercase display-4" style="text-shadow: 0 0 10px #fff; color: #fff;">Relationships</h1>
</div>
<!--CHARA-->
<div class="col-md-4" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<a href="#" style="color: #fff; font-size: 20pt;" class="font-weight-bold text-uppercase text-center">Character_Name</a>
</div>
<!--IMAGE-->
<div class="card rounded-0 mb-n1" style="border: #e20000 5px solid; background: #303030 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width: 250px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #e20000; z-index: 100; position:relative;"></i>
<div class="card mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #e20000 3px solid; max-height:350px; background-color: #EFEFEF;">
<h1 class="text-center mb-3" style="color: #e20000;">
[relationship]
</h1>
<h1 class="text-center mb-2" style="color: #e20000;">
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fal fa-bug"></i>
</h1>
<p>Describe the relationship here; this box scrolls. 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>
<!--END OF CHARA-->
<!--CHARA-->
<div class="col-md-4" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<a href="#" style="color: #fff; font-size: 20pt;" class="font-weight-bold text-uppercase text-center">Character_Name</a>
</div>
<!--IMAGE-->
<div class="card rounded-0 mb-n1" style="border: #e20000 5px solid; background: #303030 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width: 250px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #e20000; z-index: 100; position:relative;"></i>
<div class="card mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #e20000 3px solid; max-height:350px; background-color: #EFEFEF;">
<h1 class="text-center mb-3" style="color: #e20000;">
[relationship]
</h1>
<h1 class="text-center mb-2" style="color: #e20000;">
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fal fa-bug"></i>
</h1>
<p>Describe the relationship here; this box scrolls. 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>
<!--END OF CHARA-->
<!--CHARA-->
<div class="col-md-4" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<a href="#" style="color: #fff; font-size: 20pt;" class="font-weight-bold text-uppercase text-center">Character_Name</a>
</div>
<!--IMAGE-->
<div class="card rounded-0 mb-n1" style="border: #e20000 5px solid; background: #303030 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width: 250px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #e20000; z-index: 100; position:relative;"></i>
<div class="card mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #e20000 3px solid; max-height:350px; background-color: #EFEFEF;">
<h1 class="text-center mb-3" style="color: #e20000;">
[relationship]
</h1>
<h1 class="text-center mb-2" style="color: #e20000;">
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fal fa-bug"></i>
</h1>
<p>Describe the relationship here; this box scrolls. 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>
<!--END OF CHARA-->
<!--CHARA-->
<div class="col-md-4" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<a href="#" style="color: #fff; font-size: 20pt;" class="font-weight-bold text-uppercase text-center">Character_Name</a>
</div>
<!--IMAGE-->
<div class="card rounded-0 mb-n1" style="border: #e20000 5px solid; background: #303030 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width: 250px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #e20000; z-index: 100; position:relative;"></i>
<div class="card mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #e20000 3px solid; max-height:350px; background-color: #EFEFEF;">
<h1 class="text-center mb-3" style="color: #e20000;">
[relationship]
</h1>
<h1 class="text-center mb-2" style="color: #e20000;">
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fal fa-bug"></i>
</h1>
<p>Describe the relationship here; this box scrolls. 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>
<!--END OF CHARA-->
<!--CHARA-->
<div class="col-md-4" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<a href="#" style="color: #fff; font-size: 20pt;" class="font-weight-bold text-uppercase text-center">Character_Name</a>
</div>
<!--IMAGE-->
<div class="card rounded-0 mb-n1" style="border: #e20000 5px solid; background: #303030 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width: 250px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #e20000; z-index: 100; position:relative;"></i>
<div class="card mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #e20000 3px solid; max-height:350px; background-color: #EFEFEF;">
<h1 class="text-center mb-3" style="color: #e20000;">
[relationship]
</h1>
<h1 class="text-center mb-2" style="color: #e20000;">
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fal fa-bug"></i>
</h1>
<p>Describe the relationship here; this box scrolls. 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>
<!--END OF CHARA-->
<!--CHARA-->
<div class="col-md-4" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<a href="#" style="color: #fff; font-size: 20pt;" class="font-weight-bold text-uppercase text-center">Character_Name</a>
</div>
<!--IMAGE-->
<div class="card rounded-0 mb-n1" style="border: #e20000 5px solid; background: #303030 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width: 250px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #e20000; z-index: 100; position:relative;"></i>
<div class="card mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #e20000 3px solid; max-height:350px; background-color: #EFEFEF;">
<h1 class="text-center mb-3" style="color: #e20000;">
[relationship]
</h1>
<h1 class="text-center mb-2" style="color: #e20000;">
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fal fa-bug"></i>
</h1>
<p>Describe the relationship here; this box scrolls. 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>
<!--END OF CHARA-->
<!--PASTE MORE ABOVE HERE
END OF RELATIONSHIPS-->
<!--CREDITS - DO NOT TOUCH UNLESS PROPERLY CREDITING DIFFERENT RESOURCES-->
<div class="col-md-2 card p-1 my-3 border-0" style="background-color: #e20000; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); letter-spacing: 3px; opacity: .8;">
<a href="https://toyhou.se/BigGayFish" class="font-weight-bold text-center text-uppercase" style="text-shadow: 0 0 10px #fff; color: #fff;"><i class="fas fa-star-sharp"></i>BigGayFish</a>
</div>
<div class="col-md-2 card p-1 my-3 border-0" style="background-color: #e20000; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); letter-spacing: 3px; opacity: .8;">
<a href="https://toyhou.se/6259293.-f2u-transparent-patterns" class="font-weight-bold text-center text-uppercase" style="text-shadow: 0 0 10px #fff; color: #fff;">BG Img</a>
</div>
<div class="col-md-2 card p-1 my-3 border-0" style="background-color: #e20000; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); letter-spacing: 3px; opacity: .8;">
<a href="https://toyhou.se/24224932.neps-classaspect-icons" class="font-weight-bold text-center text-uppercase" style="text-shadow: 0 0 10px #fff; color: #fff;">Classpect IMGS</a><a href="https://toyhou.se/24240671.neps-lunar-sway-icons" class="font-weight-bold text-center text-uppercase" style="text-shadow: 0 0 10px #fff; color: #fff;">Lunar Sway</a>
</div>
</div>
</div>
</div>Copy
<!--HOMESTUCK REDUX - MAIN CHARACTER (SBURB PLAYER) - BOOTSTRAPS
You ever get possessed and just create something larger than what you thought was possible? That's me with this code. Anyways no fancy talk here in the code notes, just indexing this shit cos it's 3AM and I'm tired...
NOTE: If you don't like how some of the imgs look (icons, moodboards, accent imgs, etc), change "background-size: contain;" to "background-size: cover;" or vice versa.
COLORKEY: premium - The MAIN color, this is litereally everything
text-white - Font color on any bg-premium sections (and some buttons)
rgba(255,158,158,0.75) - Light Gradient, goes at the very top, has some transparency
rgba(191,0,0,0.75) - Medium Gradient, goes in the middle, has some transparency. I suggest making it close to your fancharacter's color
rgba(174,0,0, 0.75) - Dark Gradient, goes at the bottom, has some transparency
SIGN - The place you put the SIGN NAME and the IMG to go with it. DO NOT TOUCH THE ANIMATIONS, THEY ARE INCREDIBLY FINICKY!
CHARACTER NAME - Self explanatory. Cuts off a bit if the name is too many letters long, but fits within homestuck naming conventions.
ICONS - contains your MAIN SPRITE, LUNAR SPRITE, and GODTIER SPRITE
QUICK INFO - Contains all the main beats for your character and the PLAYLIST is underneath it
PLAYER DATA SECTION - Contains the following character info: TASTES (LIKES, DISLIKES, HOBBIES), TALKSPRITE (DESKTOP and MOBILE), TYPING QUIRK (has a carousal to go through several quotes), PERSONALITY, TRIVIA, and RIBBONS. It also includes the design portion and multitudes of IMAGEs. The design section is cut into REF IMAGE (contains a carousal that holds 3 imgs and a way to add more) and DESIGN NOTES / CHARACTER CREATION which further has the COLOR PALLETTE and DEFINING FEATURES
SBURB DATA SECTION - Contains all the stuff a SBURB player would need: STRIFE SPECIBUS, FETCH MODUS, PSIONICS (if applicable), ABILITY 1, ABILITY 2 (psioinics and abilities can be deleted if not applicable), COMBAT STYLE, LAND, DENIZEN, CONSORT, ELEMENT, LUNAR SWAY, CLASS, ASPECT, GODTIER (which is a more detailed ref page), and CLASSPECT (which contains the design notes and color pallette for the godtier)
MOODBOARD - There's three in total
BIOGRAPHY - A place to detail your character's story; the box scrolls
QUADRANTS - Contains MATESPRITE, MOIRAIL, AUSPISTICE, and KISMESIS in their respective colors
FAMILY - this is for LUSUS and ANCESTOR (which can be replaced with GUARDIAN and other relatives for fankids)
RELATIONSHIP - For all the other links you need, each block is labeled CHARA and can be repeated as many times as needed. I used bugs to give the idea of a "friendship" but you can use any fontawesome icons you prefer.
-->
<div class="card card-outline-primary p-3" style="font-size:13pt; font-family: Courier, monospace; border-width: 5px; border-radius: 15px; background: linear-gradient(rgba(255,158,158,0.75), rgba(191,0,0,0.75), rgba(174,0,0, 0.75));">
<div class="card mx-n3 my-n3 border-0 p-3" style="border-radius: 15px; background: url(https://f2.toyhou.se/file/f2-toyhou-se/images/26019167_kciTvcQJ3CbjGH4.png);">
<div class="row no-gutters">
<!--SIGN-->
<div class="col-lg-12 card mt-n5 hidden-sm-down rounded-0 tooltipster text-white" title="SIGN_NAME" style="border: 5px solid; background: #000 url(
https://dummyimage.com/150/ffffff/000000
) center; background-size: cover; background-repeat: no-repeat; height: 150px; width: 150px; z-index:100; position:absolute;left:70%;">
</div>
<!--ANIMATION DO NOT TOUCH-->
<div class="card mt-n5 hidden-sm-down rounded-0 fa-fade bg-transparent text-white" style="height: 150px; width: 150px; z-index:10; box-shadow: 0 0 20px; position:absolute; left:70%;">
</div>
<!--SIGN-->
<div class="col-lg-12 card p-2 bg-primary border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); z-index:1; letter-spacing: 15px;">
<h1 class="font-weight-bold ml-5 text-uppercase display-4 text-white">Character Name</h1>
</div>
<!--SPACING DO NOT TOUCH-->
<div class="col-lg-12 hidden-sm-down" style="height:70px;"></div>
<div class="row col-lg-12 align-items-center mb-3">
<div class="col-md-4">
<!--ICONS-->
<div class="card bg-transparent border-0 mb-3">
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="one" role="tabpanel">
<!--MAIN SPRITE-->
<div class="card bg-transparent border-0" style="background: url(
https://dummyimage.com/250/ffffff/000000
) center; height: 350px; background-repeat: no-repeat; background-size: contain;">
</div>
<!--END OF MAIN SPRITE-->
</div>
<div class="tab-pane fade" id="two" role="tabpanel">
<!--LUNAR SPRITE-->
<div class="card bg-transparent border-0" style="background: url(
https://dummyimage.com/250/ffffff/000000
) center; height: 350px; background-repeat: no-repeat; background-size: contain;">
</div>
<!--END OF LUNAR SPRITE-->
</div>
<div class="tab-pane fade" id="three" role="tabpanel" aria-labelledby="pills-contact-tab">
<!--GODTIER SPRITE-->
<div class="card bg-transparent border-0" style="background: url(
https://dummyimage.com/250/ffffff/000000
) center; height: 350px; background-repeat: no-repeat; background-size: contain;">
</div>
<!--END OF GODTIER SPRITE-->
</div>
</div>
</div>
<!--END OF ICONS-->
<!--BUTTONS-->
<ul class="nav nav-pills justify-content-center text-center text-uppercase m-3" id="pills-tab" role="tablist">
<li class="nav-item mx-2">
<a class="nav-link active bg-primary text-white" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); border-radius:0px;" data-toggle="pill" href="#one" role="tab" ><i class="fas fa-bug"></i></a>
</li>
<li class="nav-item mx-2">
<a class="nav-link bg-primary text-white" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); border-radius:0px;" data-toggle="pill" href="#two" role="tab"><i class="fas fa-bug"></i></a>
</li>
<li class="nav-item mx-2">
<a class="nav-link bg-primary text-white" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); border-radius:0px;" data-toggle="pill" href="#three" role="tab"><i class="fas fa-bug"></i></a>
</li>
</ul>
<!--END OF BUTTONS-->
</div>
<!--END OF QUICK INFO-->
<div class="col-md-4">
<!--HANDLE-->
<div class="card p-2 m-3 border-0 bg-primary text-white" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); z-index:1;">
<h1 class="font-weight-bold text-uppercase text-center">handle</h1>
</div>
<div class="card card-outline-primary text-center m-3 p-2 rounded-0 bg-faded" style="border-width: 3px;">
<h1 class="text-center">content</h1>
</div>
<!--END OF HANDLE-->
<!--GENDER-->
<div class="card p-2 m-3 border-0 bg-primary text-white" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); z-index:1;">
<h1 class="font-weight-bold text-uppercase text-center">gender</h1>
</div>
<div class="card card-outline-primary text-center m-3 p-2 rounded-0 bg-faded" style="border-width: 3px;">
<h1 class="text-center">content</h1>
</div>
<!--END OF GENDER-->
<!--SEXUALITY-->
<div class="card p-2 m-3 border-0 bg-primary text-white" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); z-index:1;">
<h1 class="font-weight-bold text-uppercase text-center">Sexuality</h1>
</div>
<div class="card card-outline-primary text-center m-3 p-2 rounded-0 bg-faded" style="border-width: 3px;">
<h1 class="text-center">content</h1>
</div>
<!--END OF SEXUALITY-->
</div>
<div class="col-md-4">
<!--AGE-->
<div class="card p-2 m-3 border-0 bg-primary text-white" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); z-index:1;">
<h1 class="font-weight-bold text-uppercase text-center">age</h1>
</div>
<div class="card card-outline-primary text-center m-3 p-2 rounded-0 bg-faded" style="border-width: 3px;">
<h1 class="text-center">content</h1>
</div>
<!--END OF AGE-->
<!--PRONOUNS-->
<div class="card p-2 m-3 border-0 bg-primary text-white" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); z-index:1;">
<h1 class="font-weight-bold text-uppercase text-center">pronouns</h1>
</div>
<div class="card card-outline-primary text-center m-3 p-2 rounded-0 bg-faded" style="border-width: 3px;">
<h1 class="text-center">content</h1>
</div>
<!--END OF PRONOUNS-->
<!--VOICE CLAIM-->
<div class="card p-2 m-3 border-0 bg-primary text-white" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); z-index:1;">
<h1 class="font-weight-bold text-uppercase text-center">Voice Claim</h1>
</div>
<div class="card card-outline-primary text-center m-3 p-2 rounded-0 bg-faded" style="border-width: 3px;">
<h1 class="text-center"><a href="#">content</a></h1>
</div>
<!--END OF VOICE CLAIM-->
</div>
<!--END OF QUICK INFO-->
<!--SPACING DO NOT TOUCH-->
<div class="col-sm-4 hidden-sm-down"></div>
<!--PLAYLIST-->
<div class="col-md-8 card p-2 bg-primary border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); letter-spacing: 15px; opacity: .8;">
<a href="#" class="font-weight-bold text-center text-uppercase display-4 text-white" style="text-shadow: 0 0 10px;">Playlist <i class="fas fa-play fa-beat"></i></a>
</div>
<!--END OF PLAYLIST-->
</div>
<!--PLAYER DATA - HEADER -->
<div class="col-lg-12 card border-0 p-2 mb-3 bg-primary text-white" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); letter-spacing: 15px; opacity: .8;">
<a class="text-white" data-toggle="collapse" href="#playerdata">
<h1 class="font-weight-bold text-center text-uppercase display-4" style="text-shadow: 0 0 10px;">Player Data
<i class="fa-solid fa-caret-down fa-beat"></i>
</h1>
</a>
</div>
<!--END OF SBURB DATA - HEADER -->
</div>
<!--PLAYER DATA SECTION-->
<div class="collapse mb-3" id="playerdata">
<div class="row no-gutters align-items-center">
<!--TASTES-->
<!--LIKES-->
<div class="col-md-4">
<div class="card my-2 bg-primary text-white border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">LIKES</h1>
</div>
<div class="card card-outline-primary bg-faded m-3 p-2 rounded-0" style="border-width: 3px;">
<ul class="font-weight-bold my-2">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
<!--END OF LIKES-->
<!--IMAGE-->
<div class="col-md-4 text-white">
<div class="card rounded-0 m-3 card-outline-primary" style="border-width: 5px; background: #000 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height:350px; width:95%; z-index:100;">
<!--IMG CREDIT-->
<a class="p-2 tooltipster text-white" title="IMG CREDIT" href="#" style="text-shadow: 0 0 5px; opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--ANIMATION DO NOT TOUCH-->
<div class="card rounded-0 fa-fade bg-transparent m-3" style="height:350px; width:95%; z-index:10; box-shadow: 0 0 15px; position: absolute; top:0;">
</div>
</div>
<!--END OF IMAGE-->
<!--DISLIKES-->
<div class="col-md-4">
<div class="card my-2 bg-primary text-white border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">DISLIKES</h1>
</div>
<div class="card card-outline-primary bg-faded m-3 p-2 rounded-0" style="border-width: 3px;">
<ul class="font-weight-bold my-2">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
<!--END OF DISLIKES-->
<!--HOBBIES-->
<div class="col-lg-8">
<div class="card my-2 bg-primary text-white border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">HOBBIES</h1>
</div>
<div class="card card-outline-primary bg-faded m-3 p-2 rounded-0" style="border-width: 3px;">
<ul class="font-weight-bold my-2">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
<!--END OF HOBBIES-->
<!--IMAGE-->
<div class="col-md-4 text-white">
<div class="card rounded-0 m-3 card-outline-primary" style="border-width: 5px; background: #000 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height:350px; width:90%; z-index:100;">
<!--IMG CREDIT-->
<a class="p-2 tooltipster text-white" title="IMG CREDIT" href="#" style="text-shadow: 0 0 5px; opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--ANIMATION DO NOT TOUCH-->
<div class="card rounded-0 fa-fade bg-transparent m-3" style="height:350px; width:90%; z-index:10; box-shadow: 0 0 15px; position: absolute; top:0;">
</div>
</div>
<!--END OF IMAGE-->
<!--END OF TASTES-->
<!--TALKSPRITE (DESKTOP)-->
<div class="col-sm-3 d-none d-sm-block text-white">
<div class="card rounded-0 m-3 card-outline-primary" style="border-width: 5px; background: #000 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: contain; height: 350px; width: 90%; z-index:100;">
</div>
<!--ANIMATION DO NOT TOUCH-->
<div class="card rounded-0 fa-fade bg-transparent m-3" style="height: 350px; width: 90%; z-index:10; box-shadow: 0 0 20px; position: absolute; top:0;">
</div>
<div class="d-lg-none mb-5"></div>
</div>
<!--END OF TALKSPRITE-->
<!--TALKSPRITE (MOBILE)-->
<div class="col-sm-3 d-md-none">
<div class="card rounded-0 m-3 card-outline-primary" style="border-width: 5px; background: #000 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: contain; height: 300px; width: 300px; z-index:100;">
</div>
<!--ANIMATION DO NOT TOUCH-->
<div class="card rounded-0 fa-fade bg-transparent m-3 text-white" style="height: 300px; width: 300px; z-index:10; box-shadow: 0 0 20px; position: absolute; top:0;">
</div>
<div class="d-lg-none mb-5"></div>
</div>
<!--END OF TALKSPRITE-->
<!--TYPING QUIRK-->
<div class="col-lg-9">
<i class="fas fa-caret-up fa-4x d-lg-none text-primary" style="position: absolute; bottom: 87%; left: 45%; z-index: 50;"></i>
<div class="d-none d-sm-block text-primary" style="position: absolute; top: 25%; right: 97%; z-index: 50;"><i class="fas fa-caret-left fa-4x"></i></div>
<div class="card bg-primary mx-3 p-2 rounded-0 border-0 text-white" style="z-index: 100;">
<h1 class="font-weight-bold text-center">Typing Quirk:</h1>
</div>
<div class="card card-outline-primary bg-faded mx-3 mb-3 p-2 rounded-0" style="border-width: 6px; z-index: 100;">
<div class="card-text text-center text-primary font-weight-bold">
<div id="TQ" class="carousel slide m-3" data-ride="false" data-pause="true">
<div class="carousel-inner">
<!--QUOTE ONE-->
<div class="carousel-item active">
<p>Quote goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<!--QUOTE TWO-->
<div class="carousel-item">
<p>Quote goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<!--QUOTE THREE-->
<div class="carousel-item">
<p>Quote goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<!--BUTTON-->
<ul class="nav nav-pills" id="pills-tab" role="tablist">
<li class="nav-item mx-2">
<a class="nav-link text-primary" style="position: absolute; right: 0%; bottom:5%;" data-slide="next" href="#TQ"><i class="fa-solid fa-caret-down fa-beat fa-2x"></i></a>
</li>
</ul>
<!--END OF BUTTON-->
</div>
</div>
</div>
<!--END OF TYPING QUIRK-->
<!--PERSONALITY-->
<div class="col-lg-8">
<div class="card bg-primary p-2 m-3 border-0 text-white" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">PERSONALITY</h1>
</div>
<div class="card card-outline-primary bg-faded m-3 p-3 rounded-0" style="border-width: 3px;">
<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. 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>
<!--END OF PERSONALITY-->
<!--IMAGE-->
<div class="col-md-4 text-white">
<div class="card card-outline-primary rounded-0 m-3" style="border-width: 5px; background: #000 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height:350px; width:90%; z-index:100;">
<!--IMG CREDIT-->
<a class="p-2 tooltipster text-white" title="IMG CREDIT" href="#" style="text-shadow: 0 0 5px; opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--ANIMATION DO NOT TOUCH-->
<div class="card rounded-0 fa-fade bg-transparent m-3" style="height:350px; width:90%; z-index:10; box-shadow: 0 0 15px; position: absolute; top:0;">
</div>
</div>
<!--END OF IMAGE-->
<!--TRIVIA-->
<div class="col-md-6">
<div class="card bg-primary m-3 text-white border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">TRIVIA</h1>
</div>
<div class="card card-outline-primary bg-faded m-3 p-2 rounded-0" style="border-width: 3px;">
<ul class="font-weight-bold my-2">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
<!--END OF TRIVIA-->
<!--RIBBONS-->
<div class="col-md-6">
<div class="card bg-primary m-3 text-white border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">RIBBONS</h1>
</div>
<div class="card card-outline-primary bg-faded m-3 p-2 rounded-0 overflow-auto" style="border-width: 3px; height:200px;">
<div class="card-text text-center">
<!--RIBBON-->
<img class="m-2 tooltipster" data-placement="top"
title="RIBBON_NAME"
src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
<!--END OF RIBBON-->
<!--RIBBON-->
<img class="m-2 tooltipster" data-placement="top"
title="RIBBON_NAME"
src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
<!--END OF RIBBON-->
<!--RIBBON-->
<img class="m-2 tooltipster" data-placement="top"
title="RIBBON_NAME"
src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
<!--END OF RIBBON-->
<!--RIBBON-->
<img class="m-2 tooltipster" data-placement="top"
title="RIBBON_NAME"
src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
<!--END OF RIBBON-->
<!--RIBBON-->
<img class="m-2 tooltipster" data-placement="top"
title="RIBBON_NAME"
src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
<!--END OF RIBBON-->
<!--RIBBON-->
<img class="m-2 tooltipster" data-placement="top"
title="RIBBON_NAME"
src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
<!--END OF RIBBON-->
<!--PASTE MORE AS NEEDED ABOVE THIS LINE-->
<p><small class="text-muted">Ribbon Credits</small></p>
<small><a href="#">x</a> | <a href="#">x</a></small>
</div>
</div>
</div>
<!--END OF RIBBONS-->
<!--REF IMAGE-->
<div class="col-md-6">
<!--CARASOUL-->
<div class="card border-0 rounded-0 bg-transparent">
<div id="FORMS" class="carousel slide m-3" data-ride="false" data-pause="true">
<div class="carousel-inner">
<!--IMG ONE-->
<div class="carousel-item active">
<div style="min-height:600px; background-image:url(
https://dummyimage.com/250x600/ffffff/000000
); background-size:contain; background-repeat: no-repeat; background-position:center; position: relative; z-index:100;">
<!--IMG CREDIT-->
<a class="p-2 tooltipster text-white" title="IMG CREDIT" href="#" style="text-shadow: 0 0 5px; opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<h1 class="d-none d-md-block text-white" style="display-4; font-size: 40pt; transform: rotate(-90deg); text-shadow: 0 0 5px #fff; position: absolute; top: 50%; left: 0%; right: 90%; z-index: 5;">Outfit</h1>
<div class="card bg-primary border-0 rounded-0" style="min-height:600px; position: absolute; top:0; left: 5%; z-index: 1; width: 60%;">
</div>
</div>
<!--END OF IMG ONE-->
<!--IMG TWO-->
<div class="carousel-item">
<div style="min-height:600px; background-image:url(
https://dummyimage.com/250x600/ffffff/000000
); background-size:contain; background-repeat: no-repeat; background-position:center; position: relative; z-index:100;">
<!--IMG CREDIT-->
<a class="p-2 tooltipster text-white" title="IMG CREDIT" href="#" style="text-shadow: 0 0 5px; opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<h1 class="d-none d-md-block text-white" style="display-4; font-size: 40pt; transform: rotate(-90deg); text-shadow: 0 0 5px #fff; position: absolute; top: 50%; left: 0%; right: 90%; z-index: 5;">Outfit</h1>
<div class="card bg-primary border-0 rounded-0" style="min-height:600px; position: absolute; top:0; left: 5%; z-index: 1; width: 60%;">
</div>
</div>
<!--END OF IMG TWO-->
<!--IMG THREE-->
<div class="carousel-item">
<div style="min-height:600px; background-image:url(
https://dummyimage.com/250x600/ffffff/000000
); background-size:contain; background-repeat: no-repeat; background-position:center; position: relative; z-index:100;">
<!--IMG CREDIT-->
<a class="p-2 tooltipster text-white" title="IMG CREDIT" href="#" style="text-shadow: 0 0 5px; opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<h1 class="d-none d-md-block text-white" style="display-4; font-size: 40pt; transform: rotate(-90deg); text-shadow: 0 0 5px #fff; position: absolute; top: 50%; left: 0%; right: 90%; z-index: 5;">Outfit</h1>
<div class="card bg-primary border-0 rounded-0" style="min-height:600px; position: absolute; top:0; left: 5%; z-index: 1; width: 60%;">
</div>
</div>
<!--END OF IMG THREE-->
<!--INSERT MORE SLIDES ABOVE HERE-->
</div>
</div>
</div>
<!--BUTTONS-->
<ul class="nav nav-pills justify-content-around text-center text-uppercase m-3" id="pills-tab" role="tablist">
<li class="nav-item mx-2">
<a class="nav-link active bg-primary" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); border-radius:0px; color: #fff;" data-slide="prev" href="#FORMS"><i class="fas fa-angle-left fa-beat" style="text-shadow: 0 0 10px #fff;"></i></a>
</li>
<li class="nav-item mx-2">
<a class="nav-link bg-primary" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); border-radius:0px; color: #fff;" data-slide="next" href="#FORMS"><i class="fas fa-angle-right fa-beat" style="text-shadow: 0 0 10px #fff;"></i></a>
</li>
</ul>
<!--END OF BUTTONS-->
<!--END OF CARASOUL-->
</div>
<!--END OF REF IMAGE-->
<!--DESIGN NOTES-->
<div class="col-md-6">
<div class="card bg-primary p-2 m-3 border-0 text-white" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">CHARACTER CREATION</h1>
</div>
<div class="card card-outline-primary bg-faded m-3 p-3 rounded-0 overflow-auto" style="border-width: 3px; max-height: 550px;">
<h1 class="font-weight-bold text-uppercase text-primary">NOTES:</h1>
<ul class="my-2">
<li>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.</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
<!--COLOR PALLETTE-->
<div class="row mx-3">
<div class="col-md-4 card p-2 border-0 mb-3" style="background-color: #ff0000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
<div class="col-md-4 card p-2 border-0 mb-3" style="background-color: #ff0000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
<div class="col-md-4 card p-2 border-0 mb-3" style="background-color: #ff0000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
<div class="col-md-4 card p-2 border-0 mb-3" style="background-color: #ff0000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
<div class="col-md-4 card p-2 border-0 mb-3" style="background-color: #ff0000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
<div class="col-md-4 card p-2 border-0 mb-3" style="background-color: #ff0000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
</div>
<!--END OF COLOR PALLETTE-->
<!--DEFINING FEATURES-->
<div class="row mx-3">
<div class="col-md-3 p-2 border-0 mb-3">
<h1 class="font-weight-bold text-primary"><i class="fas fa-person"></i> Species</h1>
<p>Content</p>
</div>
<div class="col-md-3 p-2 border-0 mb-3">
<h1 class="font-weight-bold text-primary"><i class="fas fa-dice-d20"></i> Aligment</h1>
<p>Content</p>
</div>
<div class="col-md-3 p-2 border-0 mb-3">
<h1 class="font-weight-bold text-primary"><i class="fas fa-barcode-read"></i> Status</h1>
<p>Content</p>
</div>
<div class="col-md-3 p-2 border-0 mb-3">
<h1 class="font-weight-bold text-primary"><i class="fas fa-droplet"></i> Blood Color</h1>
<p>#HexCode</p>
</div>
<div class="col-md-3 p-2 border-0 mb-3">
<h1 class="font-weight-bold text-primary"><i class="fas fa-eye"></i> Eye Color</h1>
<p>#HexCode</p>
</div>
<div class="col-md-3 p-2 border-0 mb-3">
<h1 class="font-weight-bold text-primary"><i class="fas fa-dumbbell"></i> Body Type</h1>
<p>Content</p>
</div>
<div class="col-md-3 p-2 border-0 mb-3">
<h1 class="font-weight-bold text-primary"><i class="fas fa-ruler-vertical"></i> Height</h1>
<p>Content</p>
</div>
<div class="col-md-3 p-2 border-0 mb-3">
<h1 class="font-weight-bold text-primary"><i class="fas fa-weight-scale"></i> Weight</h1>
<p>Content</p>
</div>
<!--SIGN/SYMBOL IMG-->
<div class="col-md-5">
<div class="card card-outline-primary rounded-0 mb-3" style="border-width: 5px; background: #000 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width:250px;">
</div>
</div>
<!--END OF SIGN/SYMBOL IMG-->
<div class="col-lg-7 p-2 border-0 mb-3">
<h1 class="font-weight-bold text-primary"><i class="fas fa-symbols"></i> Sign/Symbol Meaning</h1>
<p>You can either just write the sign name or add a small explanation/lore here. 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>
<!--END OF DEFINING FEATURES-->
</div>
</div>
<!--END OF DESIGN NOTES-->
</div>
</div>
<!--END OF PLAYER DATA SECTION-->
<!--SBURB DATA - HEADER -->
<div class="col-lg-12 card p-2 mb-3 bg-primary border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); letter-spacing: 15px; opacity: .8;">
<a class="text-white" data-toggle="collapse" href="#sburbdata">
<h1 class="font-weight-bold text-center text-uppercase display-4" style="text-shadow: 0 0 10px #fff;">Sburb Data
<i class="fa-solid fa-caret-down fa-beat"></i>
</h1>
</a>
</div>
<!--END OF SBURB DATA - HEADER -->
<!--SBURB DATA SECTION-->
<div class="collapse mb-3" id="sburbdata">
<div class="row no-gutters align-items-center">
<!--STRIFE SPECIBUS-->
<div class="col-md-6" align="center">
<div class="card bg-primary p-2 m-3 border-0 text-white" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">Strife Specibus</h1>
</div>
<!--IMAGE-->
<div class="card card-outline-primary rounded-0 mb-n1" style="border-width: 5px; background: #EFEFEF url(
https://static.wikia.nocookie.net/mspaintadventures/images/b/b5/Strifecard_%282%29.png
) center; background-repeat: no-repeat; background-size: contain; height: 350px; max-width: 350px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4 text-primary" style="z-index: 100; position:relative"></i>
<div class="card card-outline-primary bg-faded mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border-width: 3px; max-height: 250px;">
<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. 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>
<!--END OF STRIFE SPECIBUS-->
<!--FETCH MODUS-->
<div class="col-md-6" align="center">
<div class="card bg-primary p-2 m-3 border-0 text-white" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">Fetch Modus</h1>
</div>
<!--IMAGE-->
<div class="card card-outline-primary rounded-0 mb-n1" style="border-width: 5px; background: #EFEFEF url(
https://static.wikia.nocookie.net/mspaintadventures/images/c/c0/StackModus.png
) center; background-repeat: no-repeat; background-size: contain; height: 350px; max-width: 350px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4 text-primary" style="z-index: 100; position:relative"></i>
<div class="card card-outline-primary bg-faded mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border-width: 3px; max-height: 250px;">
<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. 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>
<!--END OF FETCH MODUS-->
<!--PSIONICS-->
<div class="col-md-4" align="center">
<div class="card bg-primary p-2 m-3 border-0 text-white" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">PSIONICS</h1>
</div>
<!--IMAGE-->
<div class="card card-outline-primary rounded-0 w-75 mb-n1" style="border-width: 5px; background: #EFEFEF url(
https://dummyimage.com/250/ffffff/000000
) top; background-repeat: no-repeat; background-size: cover; height: 350px; max-width: 350px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4 text-primary" style=" z-index: 100; position:relative"></i>
<div class="card card-outline-primary bg-faded mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border-width: 3px; max-height: 250px;">
<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. 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>
<!--END OF PSIONICS-->
<!--ABILITY 1-->
<div class="col-md-4" align="center">
<div class="card bg-primary p-2 m-3 border-0 text-white" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">ABILITY</h1>
</div>
<!--IMAGE-->
<div class="card card-outline-primary rounded-0 w-75 mb-n1" style="border-width: 5px; background: #EFEFEF url(
https://dummyimage.com/250/ffffff/000000
) top; background-repeat: no-repeat; background-size: cover; height: 350px; max-width: 350px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4 text-primary" style=" z-index: 100; position:relative"></i>
<div class="card card-outline-primary bg-faded mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border-width: 3px; max-height: 250px;">
<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. 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>
<!--END OF ABILITY 1-->
<!--ABILITY 2-->
<div class="col-md-4" align="center">
<div class="card bg-primary p-2 m-3 border-0 text-white" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">ABILITY</h1>
</div>
<!--IMAGE-->
<div class="card card-outline-primary rounded-0 w-75 mb-n1" style="border-width: 5px; background: #EFEFEF url(
https://dummyimage.com/250/ffffff/000000
) top; background-repeat: no-repeat; background-size: cover; height: 350px; max-width: 350px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4 text-primary" style=" z-index: 100; position:relative"></i>
<div class="card card-outline-primary bg-faded mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border-width: 3px; max-height: 250px;">
<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. 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>
<!--END OF ABILITY 2-->
<!--COMBAT STYLE-->
<div class="col-lg-8">
<div class="card bg-primary p-2 m-3 border-0 text-white" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">COMBAT STYLE</h1>
</div>
<div class="card card-outline-primary bg-faded m-3 p-3 rounded-0" style="border-width: 3px;">
<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. 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>
<!--END OF COMBAT STYLE-->
<!--IMAGE-->
<div class="col-md-4">
<div class="card card-outline-primary rounded-0 m-3" style="border-width: 5px; background: #000 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height:350px; width:95%; z-index:100;">
<!--IMG CREDIT-->
<a class="p-2 tooltipster text-white" title="IMG CREDIT" href="#" style="text-shadow: 0 0 5px; opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--ANIMATION DO NOT TOUCH-->
<div class="card rounded-0 fa-fade bg-transparent m-3 text-white" style="height:350px; width:95%; z-index:10; box-shadow: 0 0 15px; position: absolute; top:0;">
</div>
</div>
<!--END OF IMAGE-->
<!--LAND-->
<div class="col-md-3" align="center">
<div class="card bg-primary p-2 m-3 border-0 text-white" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">LAND</h1>
</div>
<!--IMAGE-->
<div class="card card-outline-primary rounded-0 w-75 mb-n1" style="border-width: 5px; background: #EFEFEF url(
https://static.wikia.nocookie.net/mspaintadventures/images/d/d2/LohacPlanet.PNG
) center; background-repeat: no-repeat; background-size: contain; height: 350px; max-width: 350px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4 text-primary" style="z-index: 100; position:relative"></i>
<div class="card card-outline-primary bg-faded mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border-width: 3px; max-height: 250px;">
<h1 class="text-center text-primary">NAME</h1>
<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>
</div>
</div>
<!--END OF LAND-->
<!--DENIZEN-->
<div class="col-md-3" align="center">
<div class="card bg-primary p-2 m-3 border-0 text-white" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">DENIZEN</h1>
</div>
<!--IMAGE-->
<div class="card card-outline-primary rounded-0 w-75 mb-n1" style="border-width: 5px; background: #EFEFEF url(
https://static.wikia.nocookie.net/mspaintadventures/images/f/fe/YaldabaothBrowser.PNG
) center; background-repeat: no-repeat; background-size: contain; height: 350px; max-width: 350px;">
</div>
<!--IMAGE-->
<i class="fas text-primary fa-caret-down fa-4x mt-n4" style="z-index: 100; position:relative"></i>
<div class="card card-outline-primary bg-faded mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border-width: 3px; max-height: 250px;">
<h1 class="text-center text-primary">NAME</h1>
<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>
</div>
</div>
<!--END OF DENIZEN-->
<!--CONSORT-->
<div class="col-md-3" align="center">
<div class="card bg-primary p-2 m-3 border-0 text-white" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">CONSORT</h1>
</div>
<!--IMAGE-->
<div class="card card-outline-primary rounded-0 w-75 mb-n1" style="border-width: 5px; background: #EFEFEF url(
https://static.wikia.nocookie.net/mspaintadventures/images/d/d6/Crocodile.png
) center; background-repeat: no-repeat; background-size: contain; height: 350px; max-width: 350px;">
</div>
<!--IMAGE-->
<i class="fas text-primary fa-caret-down fa-4x mt-n4" style="z-index: 100; position:relative"></i>
<div class="card card-outline-primary bg-faded mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border-width: 3px; max-height: 250px;">
<h1 class="text-center text-primary">NAME</h1>
<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>
</div>
</div>
<!--END OF CONSORT-->
<!--ELEMENT-->
<div class="col-md-3" align="center">
<div class="card bg-primary p-2 m-3 border-0 text-white" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">ELEMENT</h1>
</div>
<!--IMAGE-->
<div class="card card-outline-primary rounded-0 w-75 mb-n1" style="border-width: 5px; background: #EFEFEF url(
https://static.wikia.nocookie.net/mspaintadventures/images/0/01/Amber.png
) center; background-repeat: no-repeat; background-size: contain; height: 350px; max-width: 350px;">
</div>
<!--IMAGE-->
<i class="fas text-primary fa-caret-down fa-4x mt-n4" style="z-index: 100; position:relative"></i>
<div class="card card-outline-primary bg-faded mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border-width: 3px; max-height: 250px;">
<h1 class="text-center text-primary">NAME</h1>
<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>
</div>
</div>
<!--END OF ELEMENT-->
<!--LUNAR SWAY-->
<div class="col-md-4 my-3" align="center">
<div class="card bg-primary p-2 mx-3 mb-n1 border-0 text-white" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">LUNAR SWAY</h1>
</div>
<i class="fas text-primary fa-caret-down fa-4x mt-n4" style="z-index: 100; position:relative"></i>
<!--IMAGE-->
<div class="card card-outline-primary rounded-0 w-75 mb-n1" style="border-width: 5px; background: #000 url(
https://f2.toyhou.se/file/f2-toyhou-se/images/73108517_7VLbRxzDLVOPv93.gif
) center; background-repeat: no-repeat; background-size: contain; height: 350px; max-width: 350px;">
</div>
<!--IMAGE-->
</div>
<!--END OF LUNAR SWAY-->
<!--CLASS-->
<div class="col-md-4 my-3" align="center">
<div class="card bg-primary p-2 mx-3 mb-n1 border-0 text-white" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">CLASS</h1>
</div>
<i class="fas text-primary fa-caret-down fa-4x mt-n4" style="z-index: 100; position:relative"></i>
<!--IMAGE-->
<div class="card card-outline-primary rounded-0 w-75 mb-n1" style="border-width: 5px; background: #000 url(
https://f2.toyhou.se/file/f2-toyhou-se/images/73072898_yzlTZNA98RMxkW8.gif
) center; background-repeat: no-repeat; background-size: contain; height: 350px; max-width: 350px;">
</div>
<!--IMAGE-->
</div>
<!--END OF CLASS-->
<!--ASPECT-->
<div class="col-md-4 my-3" align="center">
<div class="card bg-primary p-2 mx-3 mb-n1 border-0 text-white" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">ASPECT</h1>
</div>
<i class="fas text-primary fa-caret-down fa-4x mt-n4" style="z-index: 100; position:relative"></i>
<!--IMAGE-->
<div class="card card-outline-primary rounded-0 w-75 mb-n1" style="border-width: 5px; background: #000 url(
https://f2.toyhou.se/file/f2-toyhou-se/images/73067354_hdVRXQLArle8PjI.gif
) center; background-repeat: no-repeat; background-size: contain; height: 350px; max-width: 350px;">
</div>
<!--IMAGE-->
</div>
<!--END OF ASPECT-->
<!--GODTIER-->
<div class="col-md-6 my-3">
<div style="min-height:600px; background-image:url(
https://dummyimage.com/250x600/ffffff/000000
); background-size:contain; background-repeat: no-repeat; background-position:center; position: relative; z-index:100;">
<!--IMG CREDIT-->
<a class="p-2 tooltipster text-white" title="IMG CREDIT" href="#" style="text-shadow: 0 0 5px; opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<h1 class="d-none d-md-block text-white" style="display-4; font-size: 40pt; transform: rotate(-90deg); text-shadow: 0 0 5px #fff; position: absolute; top: 50%; left: 10%; right: 90%; z-index: 5;">CLASSPECT NAME</h1>
<div class="card bg-primary border-0 rounded-0" style="min-height:600px; position: absolute; top:1%; left: 10%; z-index: 1; width: 60%;">
</div>
</div>
<!--END OF GODTIER-->
<!--CLASSPECT-->
<div class="col-md-6">
<div class="card bg-primary p-2 m-3 border-0 text-white" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">CLASSPECT NAME</h1>
</div>
<div class="card card-outline-primary bg-faded m-3 p-3 rounded-0 overflow-auto" style="border-width: 3px; max-height: 550px;">
<h1 class="font-weight-bold text-uppercase text-primary">NOTES:</h1>
<ul class="my-2">
<li>Describe your character's classpect and godtier notes here in detail. Write as little or as much as you want. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
<!--COLOR PALLETTE-->
<div class="row mx-3">
<div class="col-md-4 card p-2 border-0 mb-3" style="background-color: #ff0000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
<div class="col-md-4 card p-2 border-0 mb-3" style="background-color: #ff0000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
<div class="col-md-4 card p-2 border-0 mb-3" style="background-color: #ff0000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
<div class="col-md-4 card p-2 border-0 mb-3" style="background-color: #ff0000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
<div class="col-md-4 card p-2 border-0 mb-3" style="background-color: #ff0000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
<div class="col-md-4 card p-2 border-0 mb-3" style="background-color: #ff0000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
</div>
<!--END OF COLOR PALLETTE-->
</div>
</div>
<!--END OF CLASSPECT-->
</div>
</div>
<!--END OF SBURB DATA SECTION-->
<div class="row no-gutters d-flex justify-content-center align-items-center">
<!--MOODBOARD 1-->
<div class="col-md-4">
<!--decoration-->
<div class="card bg-primary my-3 border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); height: 10px; width:350px;"></div>
<!--img-->
<div class="card rounded-0 m-3 card-outline-primary" style="border-width: 5px; background: #000 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: contain; height: 320px; width: 320px; z-index:100;">
<!--IMG CREDIT-->
<a class="p-2 tooltipster text-white" title="IMG CREDIT" href="#" style="text-shadow: 0 0 5px; opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--ANIMATION DO NOT TOUCH-->
<div class="card rounded-0 fa-fade bg-transparent m-3 text-white" style="height:320px; width:320px; z-index:10; box-shadow: 0 0 15px; position: absolute; top:7%;">
</div>
<!--decoration-->
<div class="card bg-primary my-3 border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); height: 20px; width:350px;">
</div>
</div>
<!--END OF MOODBOARD 1-->
<!--MOODBOARD 2-->
<div class="col-md-4">
<!--decoration-->
<div class="card bg-primary my-3 border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); height: 20px; width:350px;"></div>
<!--img-->
<div class="card rounded-0 m-3 card-outline-primary" style="border-width: 5px; background: #000 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: contain; height: 320px; width: 320px; z-index:100;">
<!--IMG CREDIT-->
<a class="p-2 tooltipster text-white" title="IMG CREDIT" href="#" style="text-shadow: 0 0 5px; opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--ANIMATION DO NOT TOUCH-->
<div class="card rounded-0 fa-fade bg-transparent m-3 text-white" style="height:320px; width:320px; z-index:10; box-shadow: 0 0 15px; position: absolute; top:9%;">
</div>
<!--decoration-->
<div class="card bg-primary my-3 border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); height: 10px; width:350px;"></div>
</div>
<!--END OF MOODBOARD 2-->
<!--MOODBOARD 3-->
<div class="col-md-4">
<!--decoration-->
<div class="card bg-primary my-3 border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); height: 10px; width:350px;"></div>
<!--img-->
<div class="card rounded-0 m-3 card-outline-primary" style="border-width: 5px; background: #000 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 320px; width: 320px; z-index:100;">
<!--IMG CREDIT-->
<a class="p-2 tooltipster text-white" title="IMG CREDIT" href="#" style="text-shadow: 0 0 5px; opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--ANIMATION DO NOT TOUCH-->
<div class="card rounded-0 fa-fade bg-transparent m-3 text-white" style="height:320px; width:320px; z-index:10; box-shadow: 0 0 15px; position: absolute; top:7%;">
</div>
<!--decoration-->
<div class="card bg-primary my-3 border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); height: 20px; width:350px;">
</div>
</div>
<!--END OF MOODBOARD 3-->
<!--BIOGRAPHY -->
<div class="col-lg-12 card bg-primary p-2 mb-3 border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); letter-spacing: 15px; opacity: .8;">
<h1 class="font-weight-bold text-center text-uppercase display-4 text-white" style="text-shadow: 0 0 10px;">BIOGRAPHY</h1>
</div>
<div class="col-lg-12 card card-outline-primary bg-faded p-2 mb-3 overflow-auto rounded-0" style="border-width: 3px; max-height: 500px;">
<i class="text-center text-primary"><span class="card-title m-3"><i class="fas fa-quote-left"></i><span style="letter-spacing: 1.5px; font-size: 20pt;"> Quote or Lyrics</span><i class="fas fa-quote-right"></i></span></i>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla malesuada pellentesque elit eget gravida cum. Ac tortor dignissim convallis aenean et tortor at risus. Consectetur adipiscing elit pellentesque habitant morbi tristique. Pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Vitae sapien pellentesque habitant morbi tristique senectus. Neque ornare aenean euismod elementum nisi. Dignissim diam quis enim lobortis scelerisque fermentum dui faucibus. Ullamcorper eget nulla facilisi etiam. Quam pellentesque nec nam aliquam sem et. Nisl nunc mi ipsum faucibus vitae.</p>
<p>Velit scelerisque in dictum non consectetur. Integer malesuada nunc vel risus. A diam maecenas sed enim ut sem. Sed blandit libero volutpat sed cras ornare arcu dui vivamus. Nunc aliquet bibendum enim facilisis gravida. Amet volutpat consequat mauris nunc congue nisi. Tortor pretium viverra suspendisse potenti nullam ac tortor vitae. Viverra suspendisse potenti nullam ac tortor vitae purus. Mauris in aliquam sem fringilla ut morbi tincidunt augue interdum. Tincidunt tortor aliquam nulla facilisi cras.</p>
<h3 class="text-primary" style="border-bottom: 2px solid; text-shadow: 2px 2px 2px #000;"><i class="fas fa-globe-stand"></i> Subtitle</h3>
<p>Cras fermentum odio eu feugiat. Lacus vel facilisis volutpat est velit egestas. In hac habitasse platea dictumst vestibulum rhoncus est pellentesque. Purus faucibus ornare suspendisse sed nisi lacus sed viverra. Lectus arcu bibendum at varius. Dictum varius duis at consectetur. Quisque sagittis purus sit amet volutpat consequat mauris nunc congue. Sit amet commodo nulla facilisi. Porttitor eget dolor morbi non arcu. Enim sed faucibus turpis in eu mi.</p>
<p>Quis hendrerit dolor magna eget est. Et molestie ac feugiat sed lectus vestibulum. Eu feugiat pretium nibh ipsum consequat nisl vel. Ante metus dictum at tempor commodo ullamcorper a. Ornare quam viverra orci sagittis eu volutpat odio facilisis mauris. Feugiat in ante metus dictum at tempor commodo. Sodales ut etiam sit amet. Tristique et egestas quis ipsum suspendisse ultrices gravida. Gravida dictum fusce ut placerat orci nulla pellentesque. Eget mauris pharetra et ultrices neque. Ac tincidunt vitae semper quis lectus nulla. Et odio pellentesque diam volutpat commodo sed egestas egestas.</p>
<p>Nunc lobortis mattis aliquam faucibus purus. Sed blandit libero volutpat sed cras ornare arcu dui. Sollicitudin tempor id eu nisl nunc. Curabitur gravida arcu ac tortor dignissim convallis aenean et. Habitant morbi tristique senectus et. Urna nunc id cursus metus aliquam. Gravida in fermentum et sollicitudin ac orci phasellus. Tortor at risus viverra adipiscing. Lectus mauris ultrices eros in cursus turpis massa tincidunt. Adipiscing elit duis tristique sollicitudin nibh sit.</p>
</div>
<!--QUADRANTS
HEADER-->
<div class="col-lg-12 card bg-primary p-2 mb-3 border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); letter-spacing: 15px; opacity: .8;">
<h1 class="font-weight-bold text-center text-uppercase display-4 text-white" style="text-shadow: 0 0 10px;">QUADRANTS</h1>
</div>
<!--MATESPRITE-->
<div class="col-md-3 mb-3" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #ff0000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">MATESPRITE <i class="fas fa-heart"></i></h1>
</div>
<!--IMAGE-->
<div class="card rounded-0 mb-n1" style="border: #ff0000 5px solid; background: #EFEFEF url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width: 250px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #ff0000; z-index: 100; position:relative;"></i>
<div class="card bg-faded mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #ff0000 3px solid; max-height:350px;">
<a href="#" class="text-center"><h1>NAME</h1></a>
<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>
</div>
</div>
<!--END OF MATESPRITE-->
<!--MOIRAIL-->
<div class="col-md-3 mb-3" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #ff8a8a; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center" style=" color: #000;">MOIRAIL <i class="fas fa-rhombus"></i></h1>
</div>
<!--IMAGE-->
<div class="card rounded-0 mb-n1" style="border: #ff8a8a 5px solid; background: #EFEFEF url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width: 250px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #ff8a8a; z-index: 100; position:relative;"></i>
<div class="card bg-faded mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #ff8a8a 3px solid; max-height:350px;">
<a href="#" class="text-center"><h1>NAME</h1></a>
<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>
</div>
</div>
<!--END OF MOIRAIL-->
<!--AUSPISTICE-->
<div class="col-md-3 mb-3" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #696969; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">AUSPISTICE <i class="fas fa-club"></i></h1>
</div>
<!--IMAGE-->
<div class="card rounded-0 mb-n1" style="border: #696969 5px solid; background: #EFEFEF url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width: 250px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #696969; z-index: 100; position:relative;"></i>
<div class="card bg-faded mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #696969 3px solid; max-height:350px;">
<a href="#" class="text-center"><h1>NAME</h1></a>
<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>
</div>
</div>
<!--END OF AUSPISTICE-->
<!--KISMESIS-->
<div class="col-md-3 mb-3" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #303030; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">KISMESIS <i class="fas fa-spade"></i></h1>
</div>
<!--IMAGE-->
<div class="card rounded-0 mb-n1" style="border: #303030 5px solid; background: #EFEFEF url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width: 250px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #303030; z-index: 100; position:relative;"></i>
<div class="card bg-faded mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #303030 3px solid; max-height:350px;">
<a href="#" class="text-center"><h1>NAME</h1></a>
<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>
</div>
</div>
<!--END OF KISMESIS-->
<!--END OF QUADRANTS-->
<!--FAMILY
HEADER-->
<div class="col-lg-12 card p-2 my-3 text-white bg-primary border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); letter-spacing: 15px; opacity: .8;">
<h1 class="font-weight-bold text-center text-uppercase display-4" style="text-shadow: 0 0 10px #fff; color: #fff;">Family</h1>
</div>
<!--ANCESTOR-->
<div class="col-md-6" align="center">
<div class="card bg-primary p-2 m-3 border-0 text-white" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">ANCESTOR</h1>
</div>
<!--IMAGE-->
<div class="card card-outline-primary rounded-0 mb-n1" style="border-width: 5px; background: #303030 url(
https://dummyimage.com/350/ffffff/000000
) center; background-repeat: no-repeat; backgr
ound-size: cover; height: 350px; max-width: 350px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4 text-primary" style="z-index: 100; position:relative;"></i>
<div class="card card-outline-primary bg-faded mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border-width: 3px; max-height:350px;">
<a href="#" class="text-center"><h1>NAME</h1></a>
<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. 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>
<!--END OF ANCESTOR-->
<!--LUSUS-->
<div class="col-md-6" align="center">
<div class="card p-2 m-3 border-0 bg-primary text-white" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">LUSUS</h1>
</div>
<!--IMAGE-->
<div class="card card-outline-primary rounded-0 mb-n1" style="border-width: 5px; background: #303030 url(
https://dummyimage.com/350/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 350px; max-width: 350px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4 text-primary" style="z-index: 100; position:relative;"></i>
<div class="card card-outline-primary bg-faded mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border-width: 3px; max-height:350px;">
<a href="#" class="text-center"><h1>NAME</h1></a>
<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. 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>
<!--END OF LUSUS-->
<!--END OF FAMILY-->
<!--RELATIONSHIPS
HEADER-->
<div class="col-lg-12 card p-2 my-3 text-white bg-primary border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); letter-spacing: 15px; opacity: .8;">
<h1 class="font-weight-bold text-center text-uppercase display-4" style="text-shadow: 0 0 10px;">Relationships</h1>
</div>
<!--CHARA-->
<div class="col-md-4" align="center">
<div class="card bg-primary p-2 m-3 border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<a href="#" style="font-size: 20pt;" class="font-weight-bold text-uppercase text-center text-white">Character_Name</a>
</div>
<!--IMAGE-->
<div class="card card-outline-primary rounded-0 mb-n1" style="border-width: 5px; background: #303030 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width: 250px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4 text-primary" style="z-index: 100; position:relative;"></i>
<div class="card card-outline-primary bg-faded mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border-width: 3px; max-height:350px;">
<h1 class="text-center mb-3 text-primary">
[relationship]
</h1>
<h1 class="text-center mb-2 text-primary">
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fal fa-bug"></i>
</h1>
<p>Describe the relationship here; this box scrolls. 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>
<!--END OF CHARA-->
<!--CHARA-->
<div class="col-md-4" align="center">
<div class="card bg-primary p-2 m-3 border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<a href="#" style="font-size: 20pt;" class="font-weight-bold text-uppercase text-center text-white">Character_Name</a>
</div>
<!--IMAGE-->
<div class="card card-outline-primary rounded-0 mb-n1" style="border-width: 5px; background: #303030 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width: 250px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4 text-primary" style="z-index: 100; position:relative;"></i>
<div class="card card-outline-primary bg-faded mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border-width: 3px; max-height:350px;">
<h1 class="text-center mb-3 text-primary">
[relationship]
</h1>
<h1 class="text-center mb-2 text-primary">
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fal fa-bug"></i>
</h1>
<p>Describe the relationship here; this box scrolls. 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>
<!--END OF CHARA-->
<!--CHARA-->
<div class="col-md-4" align="center">
<div class="card bg-primary p-2 m-3 border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<a href="#" style="font-size: 20pt;" class="font-weight-bold text-uppercase text-center text-white">Character_Name</a>
</div>
<!--IMAGE-->
<div class="card card-outline-primary rounded-0 mb-n1" style="border-width: 5px; background: #303030 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width: 250px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4 text-primary" style="z-index: 100; position:relative;"></i>
<div class="card card-outline-primary bg-faded mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border-width: 3px; max-height:350px;">
<h1 class="text-center mb-3 text-primary">
[relationship]
</h1>
<h1 class="text-center mb-2 text-primary">
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fal fa-bug"></i>
</h1>
<p>Describe the relationship here; this box scrolls. 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>
<!--END OF CHARA-->
<!--CHARA-->
<div class="col-md-4" align="center">
<div class="card bg-primary p-2 m-3 border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<a href="#" style="font-size: 20pt;" class="font-weight-bold text-uppercase text-center text-white">Character_Name</a>
</div>
<!--IMAGE-->
<div class="card card-outline-primary rounded-0 mb-n1" style="border-width: 5px; background: #303030 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width: 250px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4 text-primary" style="z-index: 100; position:relative;"></i>
<div class="card card-outline-primary bg-faded mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border-width: 3px; max-height:350px;">
<h1 class="text-center mb-3 text-primary">
[relationship]
</h1>
<h1 class="text-center mb-2 text-primary">
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fal fa-bug"></i>
</h1>
<p>Describe the relationship here; this box scrolls. 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>
<!--END OF CHARA-->
<!--CHARA-->
<div class="col-md-4" align="center">
<div class="card bg-primary p-2 m-3 border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<a href="#" style="font-size: 20pt;" class="font-weight-bold text-uppercase text-center text-white">Character_Name</a>
</div>
<!--IMAGE-->
<div class="card card-outline-primary rounded-0 mb-n1" style="border-width: 5px; background: #303030 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width: 250px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4 text-primary" style="z-index: 100; position:relative;"></i>
<div class="card card-outline-primary bg-faded mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border-width: 3px; max-height:350px;">
<h1 class="text-center mb-3 text-primary">
[relationship]
</h1>
<h1 class="text-center mb-2 text-primary">
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fal fa-bug"></i>
</h1>
<p>Describe the relationship here; this box scrolls. 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>
<!--END OF CHARA-->
<!--CHARA-->
<div class="col-md-4" align="center">
<div class="card bg-primary p-2 m-3 border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<a href="#" style="font-size: 20pt;" class="font-weight-bold text-uppercase text-center text-white">Character_Name</a>
</div>
<!--IMAGE-->
<div class="card card-outline-primary rounded-0 mb-n1" style="border-width: 5px; background: #303030 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width: 250px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4 text-primary" style="z-index: 100; position:relative;"></i>
<div class="card card-outline-primary bg-faded mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border-width: 3px; max-height:350px;">
<h1 class="text-center mb-3 text-primary">
[relationship]
</h1>
<h1 class="text-center mb-2 text-primary">
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fal fa-bug"></i>
</h1>
<p>Describe the relationship here; this box scrolls. 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>
<!--END OF CHARA-->
<!--PASTE MORE ABOVE HERE
END OF RELATIONSHIPS-->
<!--CREDITS - DO NOT TOUCH UNLESS PROPERLY CREDITING DIFFERENT RESOURCES-->
<div class="col-md-2 card bg-primary p-1 my-3 border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); letter-spacing: 3px; opacity: .8;">
<a href="https://toyhou.se/BigGayFish" class="font-weight-bold text-center text-uppercase text-white" style="text-shadow: 0 0 10px;"><i class="fas fa-star-sharp"></i>BigGayFish</a>
</div>
<div class="col-md-2 card bg-primary p-1 my-3 border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); letter-spacing: 3px; opacity: .8;">
<a href="https://toyhou.se/6259293.-f2u-transparent-patterns" class="font-weight-bold text-center text-uppercase text-white" style="text-shadow: 0 0 10px;">BG Img</a>
</div>
<div class="col-md-2 card bg-primary p-1 my-3 border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); letter-spacing: 3px; opacity: .8;">
<a href="https://toyhou.se/24224932.neps-classaspect-icons" class="font-weight-bold text-center text-uppercase text-white" style="text-shadow: 0 0 10px;">Classpect IMGS</a><a href="https://toyhou.se/24240671.neps-lunar-sway-icons" class="font-weight-bold text-center text-uppercase text-white" style="text-shadow: 0 0 10px;">Lunar Sway</a>
</div>
</div>
</div>
</div>Copy
<!--HOMESTUCK REDUX - SIDE CHARACTER - CUSTOM COLORS
You ever get possessed and just create something larger than what you thought was possible? That's me with this code. Anyways no fancy talk here in the code notes, just indexing this shit cos it's 3AM and I'm tired...
NOTE: If you don't like how some of the imgs look (icons, moodboards, accent imgs, etc), change "background-size: contain;" to "background-size: cover;" or vice versa.
COLORKEY: #e20000 - The MAIN color, this is litereally everything. I suggest making it your fancharacter's color
#000 - Main font color
#fff - Secondary font color and button color
#EFEFEF - Background Color to all boxes
#ff9e9e - Light Gradient, goes at the very top
#bf0000 - Medium Gradient, goes in the middle, make it sorta close to your MAIN color but not TOO close
#ae0000 - Dark Gradient, goes at the bottom
SIGN - The place you put the SIGN NAME and the IMG to go with it. DO NOT TOUCH THE ANIMATIONS, THEY ARE INCREDIBLY FINICKY!
CHARACTER NAME - Self explanatory. Cuts off a bit if the name is too many letters long, but fits within homestuck naming conventions.
ICONS - contains your MAIN SPRITE, LUNAR SPRITE, and GODTIER SPRITE
QUICK INFO - Contains all the main beats for your character and the PLAYLIST is underneath it
TASTES - Contains LIKES, DISLIKES, HOBBIES, and two IMAGEs
TALKSPRITE - The img of your character's talksprite, theres two versions: DESKTOP and MOBILE in order to make the imgs work on each screen size, so make sure you input the imgs on both.
TYPING QUIRK - This has a carousal to go through several quotes, you can add more or less as you want, but by default there's 3.
PERSONALITY - Pretty obvious; the box expands but doesn't scroll. Also has an IMAGE on the side.
TRIVIA - Just bullet point trivia, you can put stuff like what the reference to your OC's name there or headcanon ideas that you've got/gained.
RIBBONS - Contains a box that will expand and then scroll for ribbons, and the credits at the bottom.
DESIGN / CHARACTER CREATION - The design section is cut into REF IMAGE (this version does NOT contain a caraousal) and DESIGN NOTES which further has the COLOR PALLETTE and DEFINING FEATURES
STRIFE SPECIBUS - Contains an img box and a text box that scrolls so you can explain your character's weapon
FETCH MODUS - Contains an img box and a text box that scrolls so you can explain your character's inventory system
PSIONICS, ABILITY 1, ABILITY 2 - Similar structure to the strife n fetch cards; it has an img, a title (that you can rename to the psionics type or ability), and a box that scrolls for an explanation. If this isn't applicable (you have a fankid, or a guardian etc), they can be deleted, or converted for like mundane abilities.
COMBAT STYLE - If you have a specific idea for your character's fighting style, it can go here (i.e. they only use one weapon, they're over the top, they're very sneaky, etc etc), this too is deletable if you wish. Contains an IMAGE on the side.
MOODBOARD - There's three in total
BIOGRAPHY - A place to detail your character's story; the box scrolls
QUADRANTS - Contains MATESPRITE, MOIRAIL, AUSPISTICE, and KISMESIS in their respective colors
FAMILY - this is for LUSUS and ANCESTOR (which can be replaced with GUARDIAN and other relatives for fankids, or deleted in general if not applicable)
RELATIONSHIP - For all the other links you need, each block is labeled CHARA and can be repeated as many times as needed. I used bugs to give the idea of a "friendship" but you can use any fontawesome icons you prefer.
-->
<div class="container-fluid p-3" style="font-size:13pt; font-family: Courier, monospace; color: #000; border: #e20000 5px solid; border-radius: 15px; background: linear-gradient(#ff9e9e, #bf0000, #ae0000);">
<div class="card mx-n3 my-n3 border-0 p-3" style="border-radius: 15px; background: url(https://f2.toyhou.se/file/f2-toyhou-se/images/26019167_kciTvcQJ3CbjGH4.png);">
<div class="row no-gutters">
<!--SIGN-->
<div class="col-lg-12 card mt-n5 hidden-sm-down rounded-0 tooltipster" title="SIGN_NAME" style="border: #fff 5px solid; background: #000 url(
https://dummyimage.com/150/ffffff/000000
) center; background-size: cover; background-repeat: no-repeat; height: 150px; width: 150px; z-index:100; position:absolute;left:70%;">
</div>
<!--ANIMATION DO NOT TOUCH-->
<div class="card mt-n5 hidden-sm-down rounded-0 fa-fade bg-transparent" style="height: 150px; width: 150px; z-index:10; box-shadow: 0 0 20px #fff; position:absolute; left:70%;">
</div>
<!--SIGN-->
<div class="col-lg-12 card p-2 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); z-index:1; letter-spacing: 15px;">
<h1 class="font-weight-bold ml-5 text-uppercase display-4">Character Name</h1>
</div>
<!--SPACING DO NOT TOUCH-->
<div class="col-lg-12 hidden-sm-down" style="height:70px;"></div>
<div class="row col-lg-12 align-items-center mb-3">
<div class="col-md-4">
<!--ICON-->
<div class="card bg-transparent border-0" style="background: url(
https://dummyimage.com/250x450/ffffff/000000
) center; height: 450px; background-repeat: no-repeat; background-size: contain;">
</div>
<!--END OF ICON-->
</div>
<!--QUICK INFO-->
<div class="col-md-4">
<!--HANDLE-->
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); z-index:1;">
<h1 class="font-weight-bold text-uppercase text-center">handle</h1>
</div>
<div class="card text-center m-3 p-2 rounded-0" style="border: #e20000 3px solid; background-color: #EFEFEF;">
<h1 class="text-center">content</h1>
</div>
<!--END OF HANDLE-->
<!--GENDER-->
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); z-index:1;">
<h1 class="font-weight-bold text-uppercase text-center">gender</h1>
</div>
<div class="card text-center m-3 p-2 rounded-0" style="border: #e20000 3px solid; background-color: #EFEFEF;">
<h1 class="text-center">content</h1>
</div>
<!--END OF GENDER-->
<!--SEXUALITY-->
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); z-index:1;">
<h1 class="font-weight-bold text-uppercase text-center">Sexuality</h1>
</div>
<div class="card text-center m-3 p-2 rounded-0" style="border: #e20000 3px solid; background-color: #EFEFEF;">
<h1 class="text-center">content</h1>
</div>
<!--END OF SEXUALITY-->
</div>
<div class="col-md-4">
<!--AGE-->
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); z-index:1;">
<h1 class="font-weight-bold text-uppercase text-center">age</h1>
</div>
<div class="card text-center m-3 p-2 rounded-0" style="border: #e20000 3px solid; background-color: #EFEFEF;">
<h1 class="text-center">content</h1>
</div>
<!--END OF AGE-->
<!--PRONOUNS-->
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); z-index:1;">
<h1 class="font-weight-bold text-uppercase text-center">pronouns</h1>
</div>
<div class="card text-center m-3 p-2 rounded-0" style="border: #e20000 3px solid; background-color: #EFEFEF;">
<h1 class="text-center">content</h1>
</div>
<!--END OF PRONOUNS-->
<!--VOICE CLAIM-->
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); z-index:1;">
<h1 class="font-weight-bold text-uppercase text-center">Voice Claim</h1>
</div>
<div class="card text-center m-3 p-2 rounded-0" style="border: #e20000 3px solid; background-color: #EFEFEF;">
<h1 class="text-center"><a href="#" style="color: #e20000;">content</a></h1>
</div>
<!--END OF VOICE CLAIM-->
</div>
<!--END OF QUICK INFO-->
<!--SPACING DO NOT TOUCH-->
<div class="col-sm-4 hidden-sm-down"></div>
<!--PLAYLIST-->
<div class="col-md-8 card p-2" style="background-color: #e20000; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); letter-spacing: 15px; opacity: .8;">
<a href="#" class="font-weight-bold text-center text-uppercase display-4" style="color: #fff; text-shadow: 0 0 10px #fff;">Playlist <i class="fas fa-play fa-beat"></i></a>
</div>
<!--END OF PLAYLIST-->
</div>
</div>
<div class="row no-gutters d-flex justify-content-center align-items-center">
<!--TASTES-->
<!--LIKES-->
<div class="col-md-4">
<div class="card m-3 my-2 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">LIKES</h1>
</div>
<div class="card m-3 p-2 rounded-0" style="border: #e20000 3px solid; background-color: #EFEFEF;">
<ul class="font-weight-bold my-2">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
<!--END OF LIKES-->
<!--IMAGE-->
<div class="col-md-4">
<div class="card rounded-0 m-3" style="border: #e20000 5px solid; background: #000 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height:350px; width:95%; z-index:100;">
<!--IMG CREDIT-->
<a class="p-2 tooltipster" title="IMG CREDIT" href="#" style="color: #fff; text-shadow: 0 0 5px #fff; opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--ANIMATION DO NOT TOUCH-->
<div class="card rounded-0 fa-fade bg-transparent m-3" style="height:350px; width:95%; z-index:10; box-shadow: 0 0 15px #fff; position: absolute; top:0;">
</div>
</div>
<!--END OF IMAGE-->
<!--DISLIKES-->
<div class="col-md-4">
<div class="card m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">DISLIKES</h1>
</div>
<div class="card m-3 p-2 rounded-0" style="border: #e20000 3px solid; background-color: #EFEFEF;">
<ul class="font-weight-bold my-2">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
<!--END OF DISLIKES-->
<!--HOBBIES-->
<div class="col-lg-8">
<div class="card m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">HOBBIES</h1>
</div>
<div class="card m-3 p-2 rounded-0" style="border: #e20000 3px solid; background-color: #EFEFEF;">
<ul class="font-weight-bold my-2">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
<!--END OF HOBBIES-->
<!--IMAGE-->
<div class="col-md-4">
<div class="card rounded-0 m-3" style="border: #e20000 5px solid; background: #000 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height:350px; width:90%; z-index:100;">
<!--IMG CREDIT-->
<a class="p-2 tooltipster" title="IMG CREDIT" href="#" style="color: #fff; text-shadow: 0 0 5px #fff; opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--ANIMATION DO NOT TOUCH-->
<div class="card rounded-0 fa-fade bg-transparent m-3" style="height:350px; width:90%; z-index:10; box-shadow: 0 0 15px #fff; position: absolute; top:0;">
</div>
</div>
<!--END OF IMAGE-->
<!--END OF TASTES-->
<!--TALKSPRITE (DESKTOP)-->
<div class="col-sm-3 d-none d-sm-block">
<div class="card rounded-0 m-3" style="border: #e20000 5px solid; background: #000 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: contain; height: 350px; width: 90%; z-index:100;">
</div>
<!--ANIMATION DO NOT TOUCH-->
<div class="card rounded-0 fa-fade bg-transparent m-3" style="height: 350px; width: 90%; z-index:10; box-shadow: 0 0 20px #fff; position: absolute; top:0;">
</div>
<div class="d-lg-none mb-5"></div>
</div>
<!--END OF TALKSPRITE-->
<!--TALKSPRITE (MOBILE)-->
<div class="col-sm-3 d-md-none">
<div class="card rounded-0 m-3" style="border: #e20000 5px solid; background: #000 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: contain; height: 300px; width: 300px; z-index:100;">
</div>
<!--ANIMATION DO NOT TOUCH-->
<div class="card rounded-0 fa-fade bg-transparent m-3" style="height: 300px; width: 300px; z-index:10; box-shadow: 0 0 20px #fff; position: absolute; top:0;">
</div>
<div class="d-lg-none mb-5"></div>
</div>
<!--END OF TALKSPRITE-->
<!--TYPING QUIRK-->
<div class="col-lg-9">
<i class="fas fa-caret-up fa-4x d-lg-none" style="color: #e20000; position: absolute; bottom: 87%; left: 45%; z-index: 50;"></i>
<div class="d-none d-sm-block" style="position: absolute; top: 25%; right: 97%; z-index: 50;"><i class="fas fa-caret-left fa-4x" style="color: #e20000;"></i></div>
<div class="card text-center mx-3 p-2 rounded-0 font-weight-bold" style="border: #e20000 3px solid; background-color: #e20000; color: #fff; z-index: 100;">
<h1>Typing Quirk:</h1>
</div>
<div class="card text-center mx-3 mb-3 p-2 rounded-0 font-weight-bold" style="border: #e20000 6px solid; background-color: #EFEFEF; color: #e20000; z-index: 100;">
<div id="TQ" class="carousel slide m-3" data-ride="false" data-pause="true">
<div class="carousel-inner">
<!--QUOTE ONE-->
<div class="carousel-item active">
<p>Quote goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<!--QUOTE TWO-->
<div class="carousel-item">
<p>Quote goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<!--QUOTE THREE-->
<div class="carousel-item">
<p>Quote goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<!--BUTTON-->
<ul class="nav nav-pills" id="pills-tab" role="tablist">
<li class="nav-item mx-2">
<a class="nav-link" style="color:#e20000; position: absolute; right: 0%; bottom:5%;" data-slide="next" href="#TQ"><i class="fa-solid fa-caret-down fa-beat fa-2x"></i></a>
</li>
</ul>
<!--END OF BUTTON-->
</div>
</div>
<!--END OF TYPING QUIRK-->
<!--PERSONALITY-->
<div class="col-lg-8">
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">PERSONALITY</h1>
</div>
<div class="card m-3 p-3 rounded-0" style="border: #e20000 3px solid; background-color: #EFEFEF;">
<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. 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>
<!--END OF PERSONALITY-->
<!--IMAGE-->
<div class="col-md-4">
<div class="card rounded-0 m-3" style="border: #e20000 5px solid; background: #000 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height:350px; width:90%; z-index:100;">
<!--IMG CREDIT-->
<a class="p-2 tooltipster" title="IMG CREDIT" href="#" style="color: #fff; text-shadow: 0 0 5px #fff; opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--ANIMATION DO NOT TOUCH-->
<div class="card rounded-0 fa-fade bg-transparent m-3" style="height:350px; width:90%; z-index:10; box-shadow: 0 0 15px #fff; position: absolute; top:0;">
</div>
</div>
<!--END OF IMAGE-->
<!--TRIVIA-->
<div class="col-md-6">
<div class="card m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">TRIVIA</h1>
</div>
<div class="card m-3 p-2 rounded-0" style="border: #e20000 3px solid; background-color: #EFEFEF;">
<ul class="font-weight-bold my-2">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
<!--END OF TRIVIA-->
<!--RIBBONS-->
<div class="col-md-6">
<div class="card m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">RIBBONS</h1>
</div>
<div class="card m-3 p-2 rounded-0 overflow-auto" style="border: #e20000 3px solid; background-color: #EFEFEF; height:200px;">
<div class="card-text text-center">
<!--RIBBON-->
<img class="m-2 tooltipster" data-placement="top"
title="RIBBON_NAME"
src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
<!--END OF RIBBON-->
<!--RIBBON-->
<img class="m-2 tooltipster" data-placement="top"
title="RIBBON_NAME"
src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
<!--END OF RIBBON-->
<!--RIBBON-->
<img class="m-2 tooltipster" data-placement="top"
title="RIBBON_NAME"
src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
<!--END OF RIBBON-->
<!--RIBBON-->
<img class="m-2 tooltipster" data-placement="top"
title="RIBBON_NAME"
src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
<!--END OF RIBBON-->
<!--RIBBON-->
<img class="m-2 tooltipster" data-placement="top"
title="RIBBON_NAME"
src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
<!--END OF RIBBON-->
<!--RIBBON-->
<img class="m-2 tooltipster" data-placement="top"
title="RIBBON_NAME"
src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
<!--END OF RIBBON-->
<!--PASTE MORE AS NEEDED ABOVE THIS LINE-->
<p><small class="text-muted">Ribbon Credits</small></p>
<small><a href="#" style="color: #e20000;">x</a> | <a href="#" style="color: #e20000;">x</a></small>
</div>
</div>
</div>
<!--END OF RIBBONS-->
<!--REF IMAGE-->
<div class="col-md-6">
<div style="min-height:600px; background-image:url(
https://dummyimage.com/250x600/ffffff/000000
); background-size:contain; background-repeat: no-repeat; background-position:center; position: relative; z-index:100;">
<!--IMG CREDIT-->
<a class="p-2 tooltipster" title="IMG CREDIT" href="#" style="color: #fff; text-shadow: 0 0 5px #fff; opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<h1 class="d-none d-md-block" style="display-4; font-size: 40pt; transform: rotate(-90deg); color: #fff; text-shadow: 0 0 5px #fff; position: absolute; top: 50%; left: 0%; right: 90%; z-index: 5;">Form/Outfit</h1>
<div class="card border-0 rounded-0" style="background-color: #e20000; min-height:600px; position: absolute; top:0; left: 5%; z-index: 1; width: 60%;">
</div>
</div>
<!--END OF REF IMAGE-->
<!--DESIGN NOTES-->
<div class="col-md-6">
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">CHARACTER CREATION</h1>
</div>
<div class="card m-3 p-3 rounded-0 overflow-auto" style="border: #e20000 3px solid; max-height: 550px; background-color: #EFEFEF;">
<h1 class="font-weight-bold text-uppercase" style="color: #e20000;">NOTES:</h1>
<ul class="my-2">
<li>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.</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
<!--COLOR PALLETTE-->
<div class="row mx-3">
<div class="col-md-4 card p-2 border-0 mb-3" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
<div class="col-md-4 card p-2 border-0 mb-3" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
<div class="col-md-4 card p-2 border-0 mb-3" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
<div class="col-md-4 card p-2 border-0 mb-3" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
<div class="col-md-4 card p-2 border-0 mb-3" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
<div class="col-md-4 card p-2 border-0 mb-3" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
</div>
<!--END OF COLOR PALLETTE-->
<!--DEFINING FEATURES-->
<div class="row mx-3 d-flex" align="center">
<div class="col-md-4 p-2 border-0 mb-3">
<h1 class="font-weight-bold" style="color: #e20000;"><i class="fas fa-person"></i> Species</h1>
<p>Content</p>
</div>
<div class="col-md-4 p-2 border-0 mb-3">
<h1 class="font-weight-bold" style="color: #e20000;"><i class="fas fa-dice-d20"></i> Alignment</h1>
<p>Content</p>
</div>
<div class="col-md-4 p-2 border-0 mb-3">
<h1 class="font-weight-bold" style="color: #e20000;"><i class="fas fa-moon"></i> Lunar Sway</h1>
<p>Content</p>
</div>
<div class="col-md-4 p-2 border-0 mb-3">
<h1 class="font-weight-bold" style="color: #e20000;"><i class="fas fa-file-pen"></i> Aspect</h1>
<p>Content</p>
</div>
<div class="col-md-4 p-2 border-0 mb-3">
<h1 class="font-weight-bold" style="color: #e20000;"><i class="fas fa-barcode-read"></i> Status</h1>
<p>Content</p>
</div>
<div class="col-md-4 p-2 border-0 mb-3">
<h1 class="font-weight-bold" style="color: #e20000;"><i class="fas fa-droplet"></i> Blood Color</h1>
<p>#HexCode</p>
</div>
<div class="col-md-4 p-2 border-0 mb-3">
<h1 class="font-weight-bold" style="color: #e20000;"><i class="fas fa-eye"></i> Eye Color</h1>
<p>#HexCode</p>
</div>
<div class="col-md-4 p-2 border-0 mb-3">
<h1 class="font-weight-bold" style="color: #e20000;"><i class="fas fa-dumbbell"></i> Body Type</h1>
<p>Content</p>
</div>
<div class="col-md-4 p-2 border-0 mb-3">
<h1 class="font-weight-bold" style="color: #e20000;"><i class="fas fa-ruler-vertical"></i> Height</h1>
<p>Content</p>
</div>
<div class="col-lg-12 p-2 border-0 mb-3">
<h1 class="font-weight-bold" style="color: #e20000;"><i class="fas fa-weight-scale"></i> Weight</h1>
<p>Content</p>
</div>
<!--SIGN/SYMBOL IMG-->
<div class="col-md-5">
<div class="card rounded-0 mb-3" style="border: #e20000 5px solid; background: #000 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width:250px;">
</div>
</div>
<!--END OF SIGN/SYMBOL IMG-->
<div class="col-lg-7 p-2 border-0 mb-3">
<h1 class="font-weight-bold" style="color: #e20000;"><i class="fas fa-symbols"></i> Sign/Symbol Meaning</h1>
<p>You can either just write the sign name or add a small explanation/lore here. 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>
<!--END OF DEFINING FEATURES-->
</div>
</div>
<!--END OF DESIGN NOTES-->
<!--STRIFE SPECIBUS-->
<div class="col-md-6" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">Strife Specibus</h1>
</div>
<!--IMAGE-->
<div class="card rounded-0 mb-n1" style="border: #e20000 5px solid; background: #EFEFEF url(
https://static.wikia.nocookie.net/mspaintadventures/images/b/b5/Strifecard_%282%29.png
) center; background-repeat: no-repeat; background-size: contain; height: 350px; max-width: 350px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #e20000; z-index: 100; position:relative"></i>
<div class="card mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #e20000 3px solid; max-height: 250px; background-color: #EFEFEF;">
<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. 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>
<!--END OF STRIFE SPECIBUS-->
<!--FETCH MODUS-->
<div class="col-md-6" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">Fetch Modus</h1>
</div>
<!--IMAGE-->
<div class="card rounded-0 mb-n1" style="border: #e20000 5px solid; background: #EFEFEF url(
https://static.wikia.nocookie.net/mspaintadventures/images/c/c0/StackModus.png
) center; background-repeat: no-repeat; background-size: contain; height: 350px; max-width: 350px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #e20000; z-index: 100; position:relative"></i>
<div class="card mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #e20000 3px solid; max-height: 250px; background-color: #EFEFEF;">
<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. 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>
<!--END OF FETCH MODUS-->
<!--PSIONICS-->
<div class="col-md-4" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">PSIONICS</h1>
</div>
<!--IMAGE-->
<div class="card rounded-0 w-75 mb-n1" style="border: #e20000 5px solid; background: #EFEFEF url(
https://dummyimage.com/250/ffffff/000000
) top; background-repeat: no-repeat; background-size: cover; height: 350px; max-width: 350px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #e20000; z-index: 100; position:relative"></i>
<div class="card mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #e20000 3px solid; max-height: 250px; background-color: #EFEFEF;">
<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. 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>
<!--END OF PSIONICS-->
<!--ABILITY 1-->
<div class="col-md-4" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">ABILITY</h1>
</div>
<!--IMAGE-->
<div class="card rounded-0 w-75 mb-n1" style="border: #e20000 5px solid; background: #EFEFEF url(
https://dummyimage.com/250/ffffff/000000
) top; background-repeat: no-repeat; background-size: cover; height: 350px; max-width: 350px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #e20000; z-index: 100; position:relative"></i>
<div class="card mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #e20000 3px solid; max-height: 250px; background-color: #EFEFEF;">
<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. 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>
<!--END OF ABILITY 1-->
<!--ABILITY 2-->
<div class="col-md-4" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">ABILITY</h1>
</div>
<!--IMAGE-->
<div class="card rounded-0 w-75 mb-n1" style="border: #e20000 5px solid; background: #EFEFEF url(
https://dummyimage.com/250/ffffff/000000
) top; background-repeat: no-repeat; background-size: cover; height: 350px; max-width: 350px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #e20000; z-index: 100; position:relative"></i>
<div class="card mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #e20000 3px solid; max-height: 250px; background-color: #EFEFEF;">
<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. 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>
<!--END OF ABILITY 2-->
<!--COMBAT STYLE-->
<div class="col-lg-8">
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">COMBAT STYLE</h1>
</div>
<div class="card m-3 p-3 rounded-0" style="border: #e20000 3px solid; background-color: #EFEFEF;">
<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. 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>
<!--END OF COMBAT STYLE-->
<!--IMAGE-->
<div class="col-md-4">
<div class="card rounded-0 m-3" style="border: #e20000 5px solid; background: #000 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height:350px; width:95%; z-index:100;">
<!--IMG CREDIT-->
<a class="p-2 tooltipster" title="IMG CREDIT" href="#" style="color: #fff; text-shadow: 0 0 5px #fff; opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--ANIMATION DO NOT TOUCH-->
<div class="card rounded-0 fa-fade bg-transparent m-3" style="height:350px; width:95%; z-index:10; box-shadow: 0 0 15px #fff; position: absolute; top:0;">
</div>
</div>
<!--END OF IMAGE-->
<!--MOODBOARD 1-->
<div class="col-md-4">
<!--decoration-->
<div class="card my-3 border-0" style="background-color: #e20000; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); height: 10px; width:350px;"></div>
<!--img-->
<div class="card rounded-0 m-3" style="border: #e20000 5px solid; background: #000 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: contain; height: 320px; width: 320px; z-index:100;">
<!--IMG CREDIT-->
<a class="p-2 tooltipster" title="IMG CREDIT" href="#" style="color: #fff; text-shadow: 0 0 5px #fff; opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--ANIMATION DO NOT TOUCH-->
<div class="card rounded-0 fa-fade bg-transparent m-3" style="height:320px; width:320px; z-index:10; box-shadow: 0 0 15px #fff; position: absolute; top:7%;">
</div>
<!--decoration-->
<div class="card my-3 border-0" style="background-color: #e20000; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); height: 20px; width:350px;">
</div>
</div>
<!--END OF MOODBOARD 1-->
<!--MOODBOARD 2-->
<div class="col-md-4">
<!--decoration-->
<div class="card my-3 border-0" style="background-color: #e20000; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); height: 20px; width:350px;"></div>
<!--img-->
<div class="card rounded-0 m-3" style="border: #e20000 5px solid; background: #000 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: contain; height: 320px; width: 320px; z-index:100;">
<!--IMG CREDIT-->
<a class="p-2 tooltipster" title="IMG CREDIT" href="#" style="color: #fff; text-shadow: 0 0 5px #fff; opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--ANIMATION DO NOT TOUCH-->
<div class="card rounded-0 fa-fade bg-transparent m-3" style="height:320px; width:320px; z-index:10; box-shadow: 0 0 15px #fff; position: absolute; top:9%;">
</div>
<!--decoration-->
<div class="card my-3 border-0" style="background-color: #e20000; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); height: 10px; width:350px;"></div>
</div>
<!--END OF MOODBOARD 2-->
<!--MOODBOARD 3-->
<div class="col-md-4">
<!--decoration-->
<div class="card my-3 border-0" style="background-color: #e20000; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); height: 10px; width:350px;"></div>
<!--img-->
<div class="card rounded-0 m-3" style="border: #e20000 5px solid; background: #000 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 320px; width: 320px; z-index:100;">
<!--IMG CREDIT-->
<a class="p-2 tooltipster" title="IMG CREDIT" href="#" style="color: #fff; text-shadow: 0 0 5px #fff; opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--ANIMATION DO NOT TOUCH-->
<div class="card rounded-0 fa-fade bg-transparent m-3" style="height:320px; width:320px; z-index:10; box-shadow: 0 0 15px #fff; position: absolute; top:7%;">
</div>
<!--decoration-->
<div class="card my-3 border-0" style="background-color: #e20000; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); height: 20px; width:350px;">
</div>
</div>
<!--END OF MOODBOARD 3-->
<!--BIOGRAPHY -->
<div class="col-lg-12 card p-2 mb-3 border-0" style="background-color: #e20000; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); letter-spacing: 15px; opacity: .8;">
<h1 class="font-weight-bold text-center text-uppercase display-4" style="text-shadow: 0 0 10px #fff; color: #fff;">BIOGRAPHY</h1>
</div>
<div class="col-lg-12 card p-2 mb-3 overflow-auto rounded-0" style="border: #e20000 3px solid; max-height: 500px; background-color: #EFEFEF;">
<i class="text-center"><span class="card-title m-3" style="color: #e20000;"><i class="fas fa-quote-left"></i><span style="letter-spacing: 1.5px; font-size: 20pt;"> Quote or Lyrics</span><i class="fas fa-quote-right"></i></span></i>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla malesuada pellentesque elit eget gravida cum. Ac tortor dignissim convallis aenean et tortor at risus. Consectetur adipiscing elit pellentesque habitant morbi tristique. Pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Vitae sapien pellentesque habitant morbi tristique senectus. Neque ornare aenean euismod elementum nisi. Dignissim diam quis enim lobortis scelerisque fermentum dui faucibus. Ullamcorper eget nulla facilisi etiam. Quam pellentesque nec nam aliquam sem et. Nisl nunc mi ipsum faucibus vitae.</p>
<p>Velit scelerisque in dictum non consectetur. Integer malesuada nunc vel risus. A diam maecenas sed enim ut sem. Sed blandit libero volutpat sed cras ornare arcu dui vivamus. Nunc aliquet bibendum enim facilisis gravida. Amet volutpat consequat mauris nunc congue nisi. Tortor pretium viverra suspendisse potenti nullam ac tortor vitae. Viverra suspendisse potenti nullam ac tortor vitae purus. Mauris in aliquam sem fringilla ut morbi tincidunt augue interdum. Tincidunt tortor aliquam nulla facilisi cras.</p>
<h3 style="color: #e20000; border-bottom: #e20000 2px solid; text-shadow: 2px 2px 2px #000;"><i class="fas fa-globe-stand"></i> Subtitle</h3>
<p>Cras fermentum odio eu feugiat. Lacus vel facilisis volutpat est velit egestas. In hac habitasse platea dictumst vestibulum rhoncus est pellentesque. Purus faucibus ornare suspendisse sed nisi lacus sed viverra. Lectus arcu bibendum at varius. Dictum varius duis at consectetur. Quisque sagittis purus sit amet volutpat consequat mauris nunc congue. Sit amet commodo nulla facilisi. Porttitor eget dolor morbi non arcu. Enim sed faucibus turpis in eu mi.</p>
<p>Quis hendrerit dolor magna eget est. Et molestie ac feugiat sed lectus vestibulum. Eu feugiat pretium nibh ipsum consequat nisl vel. Ante metus dictum at tempor commodo ullamcorper a. Ornare quam viverra orci sagittis eu volutpat odio facilisis mauris. Feugiat in ante metus dictum at tempor commodo. Sodales ut etiam sit amet. Tristique et egestas quis ipsum suspendisse ultrices gravida. Gravida dictum fusce ut placerat orci nulla pellentesque. Eget mauris pharetra et ultrices neque. Ac tincidunt vitae semper quis lectus nulla. Et odio pellentesque diam volutpat commodo sed egestas egestas.</p>
<p>Nunc lobortis mattis aliquam faucibus purus. Sed blandit libero volutpat sed cras ornare arcu dui. Sollicitudin tempor id eu nisl nunc. Curabitur gravida arcu ac tortor dignissim convallis aenean et. Habitant morbi tristique senectus et. Urna nunc id cursus metus aliquam. Gravida in fermentum et sollicitudin ac orci phasellus. Tortor at risus viverra adipiscing. Lectus mauris ultrices eros in cursus turpis massa tincidunt. Adipiscing elit duis tristique sollicitudin nibh sit.</p>
</div>
<!--QUADRANTS
HEADER-->
<div class="col-lg-12 card p-2 my-3 border-0" style="background-color: #e20000; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); letter-spacing: 15px; opacity: .8;">
<h1 class="font-weight-bold text-center text-uppercase display-4" style="text-shadow: 0 0 10px #fff; color: #fff;">QUADRANTS</h1>
</div>
<!--MATESPRITE-->
<div class="col-md-3 mb-3" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #ff0000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">MATESPRITE <i class="fas fa-heart"></i></h1>
</div>
<!--IMAGE-->
<div class="card rounded-0 mb-n1" style="border: #ff0000 5px solid; background: #EFEFEF url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width: 250px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #ff0000; z-index: 100; position:relative;"></i>
<div class="card mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #ff0000 3px solid; max-height:350px; background-color: #EFEFEF;">
<a href="#" class="text-center" style="color: #ff0000;"><h1>NAME</h1></a>
<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>
</div>
</div>
<!--END OF MATESPRITE-->
<!--MOIRAIL-->
<div class="col-md-3 mb-3" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #ff8a8a; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">MOIRAIL <i class="fas fa-rhombus"></i></h1>
</div>
<!--IMAGE-->
<div class="card rounded-0 mb-n1" style="border: #ff8a8a 5px solid; background: #EFEFEF url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width: 250px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #ff8a8a; z-index: 100; position:relative;"></i>
<div class="card mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #ff8a8a 3px solid; max-height:350px; background-color: #EFEFEF;">
<a href="#" class="text-center" style="color: #ff8a8a;"><h1>NAME</h1></a>
<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>
</div>
</div>
<!--END OF MOIRAIL-->
<!--AUSPISTICE-->
<div class="col-md-3 mb-3" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #696969; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">AUSPISTICE <i class="fas fa-club"></i></h1>
</div>
<!--IMAGE-->
<div class="card rounded-0 mb-n1" style="border: #696969 5px solid; background: #EFEFEF url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width: 250px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #696969; z-index: 100; position:relative;"></i>
<div class="card mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #696969 3px solid; max-height:350px; background-color: #EFEFEF;">
<a href="#" class="text-center" style="color: #696969;"><h1>NAME</h1></a>
<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>
</div>
</div>
<!--END OF AUSPISTICE-->
<!--KISMESIS-->
<div class="col-md-3 mb-3" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #303030; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">KISMESIS <i class="fas fa-spade"></i></h1>
</div>
<!--IMAGE-->
<div class="card rounded-0 mb-n1" style="border: #303030 5px solid; background: #EFEFEF url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width: 250px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #303030; z-index: 100; position:relative;"></i>
<div class="card mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #303030 3px solid; max-height:350px; background-color: #EFEFEF;">
<a href="#" class="text-center" style="color: #303030;"><h1>NAME</h1></a>
<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>
</div>
</div>
<!--END OF KISMESIS-->
<!--END OF QUADRANTS-->
<!--FAMILY
HEADER-->
<div class="col-lg-12 card p-2 my-3 border-0" style="background-color: #e20000; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); letter-spacing: 15px; opacity: .8;">
<h1 class="font-weight-bold text-center text-uppercase display-4" style="text-shadow: 0 0 10px #fff; color: #fff;">Family</h1>
</div>
<!--ANCESTOR-->
<div class="col-md-6" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">ANCESTOR</h1>
</div>
<!--IMAGE-->
<div class="card rounded-0 mb-n1" style="border: #e20000 5px solid; background: #303030 url(
https://dummyimage.com/350/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 350px; max-width: 350px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #e20000; z-index: 100; position:relative;"></i>
<div class="card mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #e20000 3px solid; max-height:350px; background-color: #EFEFEF;">
<a href="#" class="text-center" style="color: #e20000;"><h1>NAME</h1></a>
<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. 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>
<!--END OF ANCESTOR-->
<!--LUSUS-->
<div class="col-md-6" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">LUSUS</h1>
</div>
<!--IMAGE-->
<div class="card rounded-0 mb-n1" style="border: #e20000 5px solid; background: #303030 url(
https://dummyimage.com/350/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 350px; max-width: 350px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #e20000; z-index: 100; position:relative;"></i>
<div class="card mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #e20000 3px solid; max-height:350px; background-color: #EFEFEF;">
<a href="#" class="text-center" style="color: #e20000;"><h1>NAME</h1></a>
<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. 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>
<!--END OF LUSUS-->
<!--END OF FAMILY-->
<!--RELATIONSHIPS
HEADER-->
<div class="col-lg-12 card p-2 my-3 border-0" style="background-color: #e20000; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); letter-spacing: 15px; opacity: .8;">
<h1 class="font-weight-bold text-center text-uppercase display-4" style="text-shadow: 0 0 10px #fff; color: #fff;">Relationships</h1>
</div>
<!--CHARA-->
<div class="col-md-4" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<a href="#" style="color: #fff; font-size: 20pt;" class="font-weight-bold text-uppercase text-center">Character_Name</a>
</div>
<!--IMAGE-->
<div class="card rounded-0 mb-n1" style="border: #e20000 5px solid; background: #303030 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width: 250px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #e20000; z-index: 100; position:relative;"></i>
<div class="card mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #e20000 3px solid; max-height:350px; background-color: #EFEFEF;">
<h1 class="text-center mb-3" style="color: #e20000;">
[relationship]
</h1>
<h1 class="text-center mb-2" style="color: #e20000;">
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fal fa-bug"></i>
</h1>
<p>Describe the relationship here; this box scrolls. 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>
<!--END OF CHARA-->
<!--CHARA-->
<div class="col-md-4" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<a href="#" style="color: #fff; font-size: 20pt;" class="font-weight-bold text-uppercase text-center">Character_Name</a>
</div>
<!--IMAGE-->
<div class="card rounded-0 mb-n1" style="border: #e20000 5px solid; background: #303030 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width: 250px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #e20000; z-index: 100; position:relative;"></i>
<div class="card mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #e20000 3px solid; max-height:350px; background-color: #EFEFEF;">
<h1 class="text-center mb-3" style="color: #e20000;">
[relationship]
</h1>
<h1 class="text-center mb-2" style="color: #e20000;">
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fal fa-bug"></i>
</h1>
<p>Describe the relationship here; this box scrolls. 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>
<!--END OF CHARA-->
<!--CHARA-->
<div class="col-md-4" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<a href="#" style="color: #fff; font-size: 20pt;" class="font-weight-bold text-uppercase text-center">Character_Name</a>
</div>
<!--IMAGE-->
<div class="card rounded-0 mb-n1" style="border: #e20000 5px solid; background: #303030 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width: 250px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #e20000; z-index: 100; position:relative;"></i>
<div class="card mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #e20000 3px solid; max-height:350px; background-color: #EFEFEF;">
<h1 class="text-center mb-3" style="color: #e20000;">
[relationship]
</h1>
<h1 class="text-center mb-2" style="color: #e20000;">
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fal fa-bug"></i>
</h1>
<p>Describe the relationship here; this box scrolls. 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>
<!--END OF CHARA-->
<!--CHARA-->
<div class="col-md-4" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<a href="#" style="color: #fff; font-size: 20pt;" class="font-weight-bold text-uppercase text-center">Character_Name</a>
</div>
<!--IMAGE-->
<div class="card rounded-0 mb-n1" style="border: #e20000 5px solid; background: #303030 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width: 250px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #e20000; z-index: 100; position:relative;"></i>
<div class="card mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #e20000 3px solid; max-height:350px; background-color: #EFEFEF;">
<h1 class="text-center mb-3" style="color: #e20000;">
[relationship]
</h1>
<h1 class="text-center mb-2" style="color: #e20000;">
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fal fa-bug"></i>
</h1>
<p>Describe the relationship here; this box scrolls. 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>
<!--END OF CHARA-->
<!--CHARA-->
<div class="col-md-4" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<a href="#" style="color: #fff; font-size: 20pt;" class="font-weight-bold text-uppercase text-center">Character_Name</a>
</div>
<!--IMAGE-->
<div class="card rounded-0 mb-n1" style="border: #e20000 5px solid; background: #303030 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width: 250px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #e20000; z-index: 100; position:relative;"></i>
<div class="card mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #e20000 3px solid; max-height:350px; background-color: #EFEFEF;">
<h1 class="text-center mb-3" style="color: #e20000;">
[relationship]
</h1>
<h1 class="text-center mb-2" style="color: #e20000;">
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fal fa-bug"></i>
</h1>
<p>Describe the relationship here; this box scrolls. 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>
<!--END OF CHARA-->
<!--CHARA-->
<div class="col-md-4" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<a href="#" style="color: #fff; font-size: 20pt;" class="font-weight-bold text-uppercase text-center">Character_Name</a>
</div>
<!--IMAGE-->
<div class="card rounded-0 mb-n1" style="border: #e20000 5px solid; background: #303030 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width: 250px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #e20000; z-index: 100; position:relative;"></i>
<div class="card mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #e20000 3px solid; max-height:350px; background-color: #EFEFEF;">
<h1 class="text-center mb-3" style="color: #e20000;">
[relationship]
</h1>
<h1 class="text-center mb-2" style="color: #e20000;">
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fal fa-bug"></i>
</h1>
<p>Describe the relationship here; this box scrolls. 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>
<!--END OF CHARA-->
<!--PASTE MORE ABOVE HERE
END OF RELATIONSHIPS-->
<!--CREDITS - DO NOT TOUCH UNLESS PROPERLY CREDITING DIFFERENT RESOURCES-->
<div class="col-md-2 card p-1 my-3 border-0" style="background-color: #e20000; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); letter-spacing: 3px; opacity: .8;">
<a href="https://toyhou.se/BigGayFish" class="font-weight-bold text-center text-uppercase" style="text-shadow: 0 0 10px #fff; color: #fff;"><i class="fas fa-star-sharp"></i>BigGayFish</a>
</div>
<div class="col-md-2 card p-1 my-3 border-0" style="background-color: #e20000; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); letter-spacing: 3px; opacity: .8;">
<a href="https://toyhou.se/6259293.-f2u-transparent-patterns" class="font-weight-bold text-center text-uppercase" style="text-shadow: 0 0 10px #fff; color: #fff;">BG Img</a>
</div>
</div>
</div>
</div>Copy
<!--HOMESTUCK REDUX - SIDE CHARACTER - BOOTSTRAPS
You ever get possessed and just create something larger than what you thought was possible? That's me with this code. Anyways no fancy talk here in the code notes, just indexing this shit cos it's 3AM and I'm tired...
NOTE: If you don't like how some of the imgs look (icons, moodboards, accent imgs, etc), change "background-size: contain;" to "background-size: cover;" or vice versa.
COLORKEY: premium - The MAIN color, this is litereally everything
text-white - Font color on any bg-premium sections (and some buttons)
rgba(255,158,158,0.75) - Light Gradient, goes at the very top, has some transparency
rgba(191,0,0,0.75) - Medium Gradient, goes in the middle, has some transparency. I suggest making it close to your fancharacter's color
rgba(174,0,0, 0.75) - Dark Gradient, goes at the bottom, has some transparency
SIGN - The place you put the SIGN NAME and the IMG to go with it. DO NOT TOUCH THE ANIMATIONS, THEY ARE INCREDIBLY FINICKY!
CHARACTER NAME - Self explanatory. Cuts off a bit if the name is too many letters long, but fits within homestuck naming conventions.
ICONS - contains your MAIN SPRITE, LUNAR SPRITE, and GODTIER SPRITE
QUICK INFO - Contains all the main beats for your character and the PLAYLIST is underneath it
TASTES - Contains LIKES, DISLIKES, HOBBIES, and two IMAGEs
TALKSPRITE - The img of your character's talksprite, theres two versions: DESKTOP and MOBILE in order to make the imgs work on each screen size, so make sure you input the imgs on both.
TYPING QUIRK - This has a carousal to go through several quotes, you can add more or less as you want, but by default there's 3.
PERSONALITY - Pretty obvious; the box expands but doesn't scroll. Also has an IMAGE on the side.
TRIVIA - Just bullet point trivia, you can put stuff like what the reference to your OC's name there or headcanon ideas that you've got/gained.
RIBBONS - Contains a box that will expand and then scroll for ribbons, and the credits at the bottom.
DESIGN / CHARACTER CREATION - The design section is cut into REF IMAGE (this version does NOT contain a caraousal) and DESIGN NOTES which further has the COLOR PALLETTE and DEFINING FEATURES
STRIFE SPECIBUS - Contains an img box and a text box that scrolls so you can explain your character's weapon
FETCH MODUS - Contains an img box and a text box that scrolls so you can explain your character's inventory system
PSIONICS, ABILITY 1, ABILITY 2 - Similar structure to the strife n fetch cards; it has an img, a title (that you can rename to the psionics type or ability), and a box that scrolls for an explanation. If this isn't applicable (you have a fankid, or a guardian etc), they can be deleted, or converted for like mundane abilities.
COMBAT STYLE - If you have a specific idea for your character's fighting style, it can go here (i.e. they only use one weapon, they're over the top, they're very sneaky, etc etc), this too is deletable if you wish. Contains an IMAGE on the side.
MOODBOARD - There's three in total
BIOGRAPHY - A place to detail your character's story; the box scrolls
QUADRANTS - Contains MATESPRITE, MOIRAIL, AUSPISTICE, and KISMESIS in their respective colors
FAMILY - this is for LUSUS and ANCESTOR (which can be replaced with GUARDIAN and other relatives for fankids, or deleted in general if not applicable)
RELATIONSHIP - For all the other links you need, each block is labeled CHARA and can be repeated as many times as needed. I used bugs to give the idea of a "friendship" but you can use any fontawesome icons you prefer.
-->
<div class="card card-outline-primary p-3" style="font-size:13pt; font-family: Courier, monospace; border-width: 5px; border-radius: 15px; background: linear-gradient(rgba(255,158,158,0.75), rgba(191,0,0,0.75), rgba(174,0,0, 0.75));">
<div class="card mx-n3 my-n3 border-0 p-3" style="border-radius: 15px; background: url(https://f2.toyhou.se/file/f2-toyhou-se/images/26019167_kciTvcQJ3CbjGH4.png);">
<div class="row no-gutters">
<!--SIGN-->
<div class="col-lg-12 card mt-n5 hidden-sm-down rounded-0 tooltipster text-white" title="SIGN_NAME" style="border: 5px solid; background: #000 url(
https://dummyimage.com/150/ffffff/000000
) center; background-size: cover; background-repeat: no-repeat; height: 150px; width: 150px; z-index:100; position:absolute;left:70%;">
</div>
<!--ANIMATION DO NOT TOUCH-->
<div class="card mt-n5 hidden-sm-down rounded-0 fa-fade bg-transparent text-white" style="height: 150px; width: 150px; z-index:10; box-shadow: 0 0 20px; position:absolute; left:70%;">
</div>
<!--SIGN-->
<div class="col-lg-12 card p-2 bg-primary border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); z-index:1; letter-spacing: 15px;">
<h1 class="font-weight-bold ml-5 text-uppercase display-4">Character Name</h1>
</div>
<!--SPACING DO NOT TOUCH-->
<div class="col-lg-12 hidden-sm-down" style="height:70px;"></div>
<div class="row col-lg-12 align-items-center mb-3">
<div class="col-md-4">
<!--ICON-->
<div class="card bg-transparent border-0" style="background: url(
https://dummyimage.com/250x450/ffffff/000000
) center; height: 450px; background-repeat: no-repeat; background-size: contain;">
</div>
<!--END OF ICON-->
</div>
<!--QUICK INFO-->
<div class="col-md-4">
<!--HANDLE-->
<div class="card p-2 m-3 border-0 bg-primary" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); z-index:1;">
<h1 class="font-weight-bold text-uppercase text-center">handle</h1>
</div>
<div class="card card-outline-primary text-center m-3 p-2 rounded-0 bg-faded" style="border-width: 3px;">
<h1 class="text-center">content</h1>
</div>
<!--END OF HANDLE-->
<!--GENDER-->
<div class="card p-2 m-3 border-0 bg-primary" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); z-index:1;">
<h1 class="font-weight-bold text-uppercase text-center">gender</h1>
</div>
<div class="card card-outline-primary text-center m-3 p-2 rounded-0 bg-faded" style="border-width: 3px;">
<h1 class="text-center">content</h1>
</div>
<!--END OF GENDER-->
<!--SEXUALITY-->
<div class="card p-2 m-3 border-0 bg-primary" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); z-index:1;">
<h1 class="font-weight-bold text-uppercase text-center">Sexuality</h1>
</div>
<div class="card card-outline-primary text-center m-3 p-2 rounded-0 bg-faded" style="border-width: 3px;">
<h1 class="text-center">content</h1>
</div>
<!--END OF SEXUALITY-->
</div>
<div class="col-md-4">
<!--AGE-->
<div class="card p-2 m-3 border-0 bg-primary" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); z-index:1;">
<h1 class="font-weight-bold text-uppercase text-center">age</h1>
</div>
<div class="card card-outline-primary text-center m-3 p-2 rounded-0 bg-faded" style="border-width: 3px;">
<h1 class="text-center">content</h1>
</div>
<!--END OF AGE-->
<!--PRONOUNS-->
<div class="card p-2 m-3 border-0 bg-primary" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); z-index:1;">
<h1 class="font-weight-bold text-uppercase text-center">pronouns</h1>
</div>
<div class="card card-outline-primary text-center m-3 p-2 rounded-0 bg-faded" style="border-width: 3px;">
<h1 class="text-center">content</h1>
</div>
<!--END OF PRONOUNS-->
<!--VOICE CLAIM-->
<div class="card p-2 m-3 border-0 bg-primary" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); z-index:1;">
<h1 class="font-weight-bold text-uppercase text-center">Voice Claim</h1>
</div>
<div class="card card-outline-primary text-center m-3 p-2 rounded-0 bg-faded" style="border-width: 3px;">
<h1 class="text-center"><a href="#">content</a></h1>
</div>
<!--END OF VOICE CLAIM-->
</div>
<!--END OF QUICK INFO-->
<!--SPACING DO NOT TOUCH-->
<div class="col-sm-4 hidden-sm-down"></div>
<!--PLAYLIST-->
<div class="col-md-8 card p-2 bg-primary border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); letter-spacing: 15px; opacity: .8;">
<a href="#" class="font-weight-bold text-center text-uppercase display-4 text-white" style="text-shadow: 0 0 10px;">Playlist <i class="fas fa-play fa-beat"></i></a>
</div>
<!--END OF PLAYLIST-->
</div>
</div>
<div class="row no-gutters d-flex justify-content-center align-items-center">
<!--TASTES-->
<!--LIKES-->
<div class="col-md-4">
<div class="card my-2 bg-primary border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">LIKES</h1>
</div>
<div class="card card-outline-primary bg-faded m-3 p-2 rounded-0" style="border-width: 3px;">
<ul class="font-weight-bold my-2">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
<!--END OF LIKES-->
<!--IMAGE-->
<div class="col-md-4 text-white">
<div class="card rounded-0 m-3 card-outline-primary" style="border-width: 5px; background: #000 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height:350px; width:95%; z-index:100;">
<!--IMG CREDIT-->
<a class="p-2 tooltipster text-white" title="IMG CREDIT" href="#" style="text-shadow: 0 0 5px; opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--ANIMATION DO NOT TOUCH-->
<div class="card rounded-0 fa-fade bg-transparent m-3" style="height:350px; width:95%; z-index:10; box-shadow: 0 0 15px; position: absolute; top:0;">
</div>
</div>
<!--END OF IMAGE-->
<!--DISLIKES-->
<div class="col-md-4">
<div class="card my-2 bg-primary border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">DISLIKES</h1>
</div>
<div class="card card-outline-primary bg-faded m-3 p-2 rounded-0" style="border-width: 3px;">
<ul class="font-weight-bold my-2">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
<!--END OF DISLIKES-->
<!--HOBBIES-->
<div class="col-lg-8">
<div class="card my-2 bg-primary border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">HOBBIES</h1>
</div>
<div class="card card-outline-primary bg-faded m-3 p-2 rounded-0" style="border-width: 3px;">
<ul class="font-weight-bold my-2">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
<!--END OF HOBBIES-->
<!--IMAGE-->
<div class="col-md-4 text-white">
<div class="card rounded-0 m-3 card-outline-primary" style="border-width: 5px; background: #000 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height:350px; width:90%; z-index:100;">
<!--IMG CREDIT-->
<a class="p-2 tooltipster text-white" title="IMG CREDIT" href="#" style="text-shadow: 0 0 5px; opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--ANIMATION DO NOT TOUCH-->
<div class="card rounded-0 fa-fade bg-transparent m-3" style="height:350px; width:90%; z-index:10; box-shadow: 0 0 15px; position: absolute; top:0;">
</div>
</div>
<!--END OF IMAGE-->
<!--END OF TASTES-->
<!--TALKSPRITE (DESKTOP)-->
<div class="col-sm-3 d-none d-sm-block text-white">
<div class="card rounded-0 m-3 card-outline-primary" style="border-width: 5px; background: #000 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: contain; height: 350px; width: 90%; z-index:100;">
</div>
<!--ANIMATION DO NOT TOUCH-->
<div class="card rounded-0 fa-fade bg-transparent m-3" style="height: 350px; width: 90%; z-index:10; box-shadow: 0 0 20px; position: absolute; top:0;">
</div>
<div class="d-lg-none mb-5"></div>
</div>
<!--END OF TALKSPRITE-->
<!--TALKSPRITE (MOBILE)-->
<div class="col-sm-3 d-md-none text-white">
<div class="card rounded-0 m-3 card-outline-primary" style="border-width: 5px; background: #000 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: contain; height: 300px; width: 300px; z-index:100;">
</div>
<!--ANIMATION DO NOT TOUCH-->
<div class="card rounded-0 fa-fade bg-transparent m-3" style="height: 300px; width: 300px; z-index:10; box-shadow: 0 0 20px; position: absolute; top:0;">
</div>
<div class="d-lg-none mb-5"></div>
</div>
<!--END OF TALKSPRITE-->
<!--TYPING QUIRK-->
<div class="col-lg-9">
<i class="fas fa-caret-up fa-4x d-lg-none text-primary" style="position: absolute; bottom: 87%; left: 45%; z-index: 50;"></i>
<div class="d-none d-sm-block text-primary" style="position: absolute; top: 25%; right: 97%; z-index: 50;"><i class="fas fa-caret-left fa-4x"></i></div>
<div class="card bg-primary mx-3 p-2 rounded-0 border-0 text-white" style="z-index: 100;">
<h1 class="font-weight-bold text-center">Typing Quirk:</h1>
</div>
<div class="card card-outline-primary bg-faded mx-3 mb-3 p-2 rounded-0" style="border-width: 6px; z-index: 100;">
<div class="card-text text-center text-primary font-weight-bold">
<div id="TQ" class="carousel slide m-3" data-ride="false" data-pause="true">
<div class="carousel-inner">
<!--QUOTE ONE-->
<div class="carousel-item active">
<p>Quote goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<!--QUOTE TWO-->
<div class="carousel-item">
<p>Quote goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<!--QUOTE THREE-->
<div class="carousel-item">
<p>Quote goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<!--BUTTON-->
<ul class="nav nav-pills" id="pills-tab" role="tablist">
<li class="nav-item mx-2">
<a class="nav-link text-primary" style="position: absolute; right: 0%; bottom:5%;" data-slide="next" href="#TQ"><i class="fa-solid fa-caret-down fa-beat fa-2x"></i></a>
</li>
</ul>
<!--END OF BUTTON-->
</div>
</div>
</div>
<!--END OF TYPING QUIRK-->
<!--PERSONALITY-->
<div class="col-lg-8">
<div class="card bg-primary p-2 m-3 border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">PERSONALITY</h1>
</div>
<div class="card card-outline-primary bg-faded m-3 p-3 rounded-0" style="border-width: 3px;">
<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. 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>
<!--END OF PERSONALITY-->
<!--IMAGE-->
<div class="col-md-4">
<div class="card card-outline-primary rounded-0 m-3" style="border-width: 5px; background: #000 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height:350px; width:90%; z-index:100;">
<!--IMG CREDIT-->
<a class="p-2 tooltipster text-white" title="IMG CREDIT" href="#" style="text-shadow: 0 0 5px; opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--ANIMATION DO NOT TOUCH-->
<div class="card rounded-0 fa-fade bg-transparent m-3" style="height:350px; width:90%; z-index:10; box-shadow: 0 0 15px; position: absolute; top:0;">
</div>
</div>
<!--END OF IMAGE-->
<!--TRIVIA-->
<div class="col-md-6">
<div class="card bg-primary m-3 border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">TRIVIA</h1>
</div>
<div class="card card-outline-primary bg-faded m-3 p-2 rounded-0" style="border-width: 3px;">
<ul class="font-weight-bold my-2">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
<!--END OF TRIVIA-->
<!--RIBBONS-->
<div class="col-md-6">
<div class="card bg-primary m-3 border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">RIBBONS</h1>
</div>
<div class="card card-outline-primary bg-faded m-3 p-2 rounded-0 overflow-auto" style="border-width: 3px; height:200px;">
<div class="card-text text-center">
<!--RIBBON-->
<img class="m-2 tooltipster" data-placement="top"
title="RIBBON_NAME"
src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
<!--END OF RIBBON-->
<!--RIBBON-->
<img class="m-2 tooltipster" data-placement="top"
title="RIBBON_NAME"
src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
<!--END OF RIBBON-->
<!--RIBBON-->
<img class="m-2 tooltipster" data-placement="top"
title="RIBBON_NAME"
src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
<!--END OF RIBBON-->
<!--RIBBON-->
<img class="m-2 tooltipster" data-placement="top"
title="RIBBON_NAME"
src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
<!--END OF RIBBON-->
<!--RIBBON-->
<img class="m-2 tooltipster" data-placement="top"
title="RIBBON_NAME"
src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
<!--END OF RIBBON-->
<!--RIBBON-->
<img class="m-2 tooltipster" data-placement="top"
title="RIBBON_NAME"
src="https://f2.toyhou.se/file/f2-toyhou-se/images/75655994_tQS8vA2mSWmtilT.png">
<!--END OF RIBBON-->
<!--PASTE MORE AS NEEDED ABOVE THIS LINE-->
<p><small class="text-muted">Ribbon Credits</small></p>
<small><a href="#">x</a> | <a href="#">x</a></small>
</div>
</div>
</div>
<!--END OF RIBBONS-->
<!--REF IMAGE-->
<div class="col-md-6">
<div style="min-height:600px; background-image:url(
https://dummyimage.com/250x600/ffffff/000000
); background-size:contain; background-repeat: no-repeat; background-position:center; position: relative; z-index:100;">
<!--IMG CREDIT-->
<a class="p-2 tooltipster text-white" title="IMG CREDIT" href="#" style="text-shadow: 0 0 5px; opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<h1 class="d-none d-md-block" style="display-4; font-size: 40pt; transform: rotate(-90deg); text-shadow: 0 0 5px; position: absolute; top: 50%; left: 0%; right: 90%; z-index: 5;">Form/Outfit</h1>
<div class="card bg-primary border-0 rounded-0" style="min-height:600px; position: absolute; top:0; left: 5%; z-index: 1; width: 60%;">
</div>
</div>
<!--END OF REF IMAGE-->
<!--DESIGN NOTES-->
<div class="col-md-6">
<div class="card bg-primary p-2 m-3 border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">CHARACTER CREATION</h1>
</div>
<div class="card card-outline-primary bg-faded m-3 p-3 rounded-0 overflow-auto" style="border-width: 3px; max-height: 550px;">
<h1 class="font-weight-bold text-uppercase text-primary">NOTES:</h1>
<ul class="my-2">
<li>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.</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
<!--COLOR PALLETTE-->
<div class="row mx-3">
<div class="col-md-4 card p-2 border-0 mb-3" style="background-color: #ff0000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
<div class="col-md-4 card p-2 border-0 mb-3" style="background-color: #ff0000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
<div class="col-md-4 card p-2 border-0 mb-3" style="background-color: #ff0000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
<div class="col-md-4 card p-2 border-0 mb-3" style="background-color: #ff0000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
<div class="col-md-4 card p-2 border-0 mb-3" style="background-color: #ff0000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
<div class="col-md-4 card p-2 border-0 mb-3" style="background-color: #ff0000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
</div>
<!--END OF COLOR PALLETTE-->
<!--DEFINING FEATURES-->
<div class="row mx-3 d-flex" align="center">
<div class="col-md-4 p-2 border-0 mb-3">
<h1 class="font-weight-bold text-primary"><i class="fas fa-person"></i> Species</h1>
<p>Content</p>
</div>
<div class="col-md-4 p-2 border-0 mb-3">
<h1 class="font-weight-bold text-primary"><i class="fas fa-dice-d20"></i> Aligment</h1>
<p>Content</p>
</div>
<div class="col-md-4 p-2 border-0 mb-3">
<h1 class="font-weight-bold text-primary"><i class="fas fa-moon"></i> Lunar Sway</h1>
<p>Content</p>
</div>
<div class="col-md-4 p-2 border-0 mb-3">
<h1 class="font-weight-bold text-primary"><i class="fas fa-file-pen"></i> Aspect</h1>
<p>Content</p>
</div>
<div class="col-md-4 p-2 border-0 mb-3">
<h1 class="font-weight-bold text-primary"><i class="fas fa-barcode-read"></i> Status</h1>
<p>Content</p>
</div>
<div class="col-md-4 p-2 border-0 mb-3">
<h1 class="font-weight-bold text-primary"><i class="fas fa-droplet"></i> Blood Color</h1>
<p>#HexCode</p>
</div>
<div class="col-md-4 p-2 border-0 mb-3">
<h1 class="font-weight-bold text-primary"><i class="fas fa-eye"></i> Eye Color</h1>
<p>#HexCode</p>
</div>
<div class="col-md-4 p-2 border-0 mb-3">
<h1 class="font-weight-bold text-primary"><i class="fas fa-dumbbell"></i> Body Type</h1>
<p>Content</p>
</div>
<div class="col-md-4 p-2 border-0 mb-3">
<h1 class="font-weight-bold text-primary"><i class="fas fa-ruler-vertical"></i> Height</h1>
<p>Content</p>
</div>
<div class="col-lg-12 p-2 border-0 mb-3">
<h1 class="font-weight-bold text-primary"><i class="fas fa-weight-scale"></i> Weight</h1>
<p>Content</p>
</div>
<!--SIGN/SYMBOL IMG-->
<div class="col-md-5">
<div class="card card-outline-primary rounded-0 mb-3" style="border-width: 5px; background: #000 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width:250px;">
</div>
</div>
<!--END OF SIGN/SYMBOL IMG-->
<div class="col-lg-7 p-2 border-0 mb-3">
<h1 class="font-weight-bold text-primary"><i class="fas fa-symbols"></i> Sign/Symbol Meaning</h1>
<p>You can either just write the sign name or add a small explanation/lore here. 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>
<!--END OF DEFINING FEATURES-->
</div>
</div>
<!--END OF DESIGN NOTES-->
<!--STRIFE SPECIBUS-->
<div class="col-md-6" align="center">
<div class="card bg-primary p-2 m-3 border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">Strife Specibus</h1>
</div>
<!--IMAGE-->
<div class="card card-outline-primary rounded-0 mb-n1" style="border-width: 5px; background: #EFEFEF url(
https://static.wikia.nocookie.net/mspaintadventures/images/b/b5/Strifecard_%282%29.png
) center; background-repeat: no-repeat; background-size: contain; height: 350px; max-width: 350px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4 text-primary" style="z-index: 100; position:relative"></i>
<div class="card card-outline-primary bg-faded mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border-width: 3px; max-height: 250px;">
<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. 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>
<!--END OF STRIFE SPECIBUS-->
<!--FETCH MODUS-->
<div class="col-md-6" align="center">
<div class="card bg-primary p-2 m-3 border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">Fetch Modus</h1>
</div>
<!--IMAGE-->
<div class="card card-outline-primary rounded-0 mb-n1" style="border-width: 5px; background: #EFEFEF url(
https://static.wikia.nocookie.net/mspaintadventures/images/c/c0/StackModus.png
) center; background-repeat: no-repeat; background-size: contain; height: 350px; max-width: 350px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4 text-primary" style="z-index: 100; position:relative"></i>
<div class="card card-outline-primary bg-faded mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border-width: 3px; max-height: 250px;">
<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. 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>
<!--END OF FETCH MODUS-->
<!--PSIONICS-->
<div class="col-md-4" align="center">
<div class="card bg-primary p-2 m-3 border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">PSIONICS</h1>
</div>
<!--IMAGE-->
<div class="card card-outline-primary rounded-0 w-75 mb-n1" style="border-width: 5px; background: #EFEFEF url(
https://dummyimage.com/250/ffffff/000000
) top; background-repeat: no-repeat; background-size: cover; height: 350px; max-width: 350px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4 text-primary" style=" z-index: 100; position:relative"></i>
<div class="card card-outline-primary bg-faded mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border-width: 3px; max-height: 250px;">
<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. 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>
<!--END OF PSIONICS-->
<!--ABILITY 1-->
<div class="col-md-4" align="center">
<div class="card bg-primary p-2 m-3 border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">ABILITY</h1>
</div>
<!--IMAGE-->
<div class="card card-outline-primary rounded-0 w-75 mb-n1" style="border-width: 5px; background: #EFEFEF url(
https://dummyimage.com/250/ffffff/000000
) top; background-repeat: no-repeat; background-size: cover; height: 350px; max-width: 350px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4 text-primary" style=" z-index: 100; position:relative"></i>
<div class="card card-outline-primary bg-faded mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border-width: 3px; max-height: 250px;">
<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. 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>
<!--END OF ABILITY 1-->
<!--ABILITY 2-->
<div class="col-md-4" align="center">
<div class="card bg-primary p-2 m-3 border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">ABILITY</h1>
</div>
<!--IMAGE-->
<div class="card card-outline-primary rounded-0 w-75 mb-n1" style="border-width: 5px; background: #EFEFEF url(
https://dummyimage.com/250/ffffff/000000
) top; background-repeat: no-repeat; background-size: cover; height: 350px; max-width: 350px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4 text-primary" style=" z-index: 100; position:relative"></i>
<div class="card card-outline-primary bg-faded mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border-width: 3px; max-height: 250px;">
<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. 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>
<!--END OF ABILITY 2-->
<!--COMBAT STYLE-->
<div class="col-lg-8">
<div class="card bg-primary p-2 m-3 border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">COMBAT STYLE</h1>
</div>
<div class="card card-outline-primary bg-faded m-3 p-3 rounded-0" style="border-width: 3px;">
<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. 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>
<!--END OF COMBAT STYLE-->
<!--IMAGE-->
<div class="col-md-4">
<div class="card card-outline-primary rounded-0 m-3" style="border-width: 5px; background: #000 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height:350px; width:95%; z-index:100;">
<!--IMG CREDIT-->
<a class="p-2 tooltipster text-white" title="IMG CREDIT" href="#" style="text-shadow: 0 0 5px; opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--ANIMATION DO NOT TOUCH-->
<div class="card rounded-0 fa-fade bg-transparent m-3 text-white" style="height:350px; width:95%; z-index:10; box-shadow: 0 0 15px; position: absolute; top:0;">
</div>
</div>
<!--END OF IMAGE-->
<!--MOODBOARD 1-->
<div class="col-md-4">
<!--decoration-->
<div class="card bg-primary my-3 border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); height: 10px; width:350px;"></div>
<!--img-->
<div class="card rounded-0 m-3 card-outline-primary" style="border-width: 5px; background: #000 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: contain; height: 320px; width: 320px; z-index:100;">
<!--IMG CREDIT-->
<a class="p-2 tooltipster text-white" title="IMG CREDIT" href="#" style="text-shadow: 0 0 5px; opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--ANIMATION DO NOT TOUCH-->
<div class="card rounded-0 fa-fade bg-transparent m-3 text-white" style="height:320px; width:320px; z-index:10; box-shadow: 0 0 15px; position: absolute; top:7%;">
</div>
<!--decoration-->
<div class="card bg-primary my-3 border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); height: 20px; width:350px;">
</div>
</div>
<!--END OF MOODBOARD 1-->
<!--MOODBOARD 2-->
<div class="col-md-4">
<!--decoration-->
<div class="card bg-primary my-3 border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); height: 20px; width:350px;"></div>
<!--img-->
<div class="card rounded-0 m-3 card-outline-primary" style="border-width: 5px; background: #000 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: contain; height: 320px; width: 320px; z-index:100;">
<!--IMG CREDIT-->
<a class="p-2 tooltipster text-white" title="IMG CREDIT" href="#" style="text-shadow: 0 0 5px; opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--ANIMATION DO NOT TOUCH-->
<div class="card rounded-0 fa-fade bg-transparent m-3 text-white" style="height:320px; width:320px; z-index:10; box-shadow: 0 0 15px; position: absolute; top:9%;">
</div>
<!--decoration-->
<div class="card bg-primary my-3 border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); height: 10px; width:350px;"></div>
</div>
<!--END OF MOODBOARD 2-->
<!--MOODBOARD 3-->
<div class="col-md-4">
<!--decoration-->
<div class="card bg-primary my-3 border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); height: 10px; width:350px;"></div>
<!--img-->
<div class="card rounded-0 m-3 card-outline-primary" style="border-width: 5px; background: #000 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 320px; width: 320px; z-index:100;">
<!--IMG CREDIT-->
<a class="p-2 tooltipster text-white" title="IMG CREDIT" href="#" style="text-shadow: 0 0 5px; opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--ANIMATION DO NOT TOUCH-->
<div class="card rounded-0 fa-fade bg-transparent m-3 text-white" style="height:320px; width:320px; z-index:10; box-shadow: 0 0 15px; position: absolute; top:7%;">
</div>
<!--decoration-->
<div class="card bg-primary my-3 border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); height: 20px; width:350px;">
</div>
</div>
<!--END OF MOODBOARD 3-->
<!--BIOGRAPHY -->
<div class="col-lg-12 card bg-primary p-2 mb-3 border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); letter-spacing: 15px; opacity: .8;">
<h1 class="font-weight-bold text-center text-uppercase display-4 text-white" style="text-shadow: 0 0 10px;">BIOGRAPHY</h1>
</div>
<div class="col-lg-12 card card-outline-primary bg-faded p-2 mb-3 overflow-auto rounded-0" style="border-width: 3px; max-height: 500px;">
<i class="text-center text-primary"><span class="card-title m-3"><i class="fas fa-quote-left"></i><span style="letter-spacing: 1.5px; font-size: 20pt;"> Quote or Lyrics</span><i class="fas fa-quote-right"></i></span></i>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla malesuada pellentesque elit eget gravida cum. Ac tortor dignissim convallis aenean et tortor at risus. Consectetur adipiscing elit pellentesque habitant morbi tristique. Pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Vitae sapien pellentesque habitant morbi tristique senectus. Neque ornare aenean euismod elementum nisi. Dignissim diam quis enim lobortis scelerisque fermentum dui faucibus. Ullamcorper eget nulla facilisi etiam. Quam pellentesque nec nam aliquam sem et. Nisl nunc mi ipsum faucibus vitae.</p>
<p>Velit scelerisque in dictum non consectetur. Integer malesuada nunc vel risus. A diam maecenas sed enim ut sem. Sed blandit libero volutpat sed cras ornare arcu dui vivamus. Nunc aliquet bibendum enim facilisis gravida. Amet volutpat consequat mauris nunc congue nisi. Tortor pretium viverra suspendisse potenti nullam ac tortor vitae. Viverra suspendisse potenti nullam ac tortor vitae purus. Mauris in aliquam sem fringilla ut morbi tincidunt augue interdum. Tincidunt tortor aliquam nulla facilisi cras.</p>
<h3 class="text-primary" style="border-bottom: 2px solid; text-shadow: 2px 2px 2px;"><i class="fas fa-globe-stand"></i> Subtitle</h3>
<p>Cras fermentum odio eu feugiat. Lacus vel facilisis volutpat est velit egestas. In hac habitasse platea dictumst vestibulum rhoncus est pellentesque. Purus faucibus ornare suspendisse sed nisi lacus sed viverra. Lectus arcu bibendum at varius. Dictum varius duis at consectetur. Quisque sagittis purus sit amet volutpat consequat mauris nunc congue. Sit amet commodo nulla facilisi. Porttitor eget dolor morbi non arcu. Enim sed faucibus turpis in eu mi.</p>
<p>Quis hendrerit dolor magna eget est. Et molestie ac feugiat sed lectus vestibulum. Eu feugiat pretium nibh ipsum consequat nisl vel. Ante metus dictum at tempor commodo ullamcorper a. Ornare quam viverra orci sagittis eu volutpat odio facilisis mauris. Feugiat in ante metus dictum at tempor commodo. Sodales ut etiam sit amet. Tristique et egestas quis ipsum suspendisse ultrices gravida. Gravida dictum fusce ut placerat orci nulla pellentesque. Eget mauris pharetra et ultrices neque. Ac tincidunt vitae semper quis lectus nulla. Et odio pellentesque diam volutpat commodo sed egestas egestas.</p>
<p>Nunc lobortis mattis aliquam faucibus purus. Sed blandit libero volutpat sed cras ornare arcu dui. Sollicitudin tempor id eu nisl nunc. Curabitur gravida arcu ac tortor dignissim convallis aenean et. Habitant morbi tristique senectus et. Urna nunc id cursus metus aliquam. Gravida in fermentum et sollicitudin ac orci phasellus. Tortor at risus viverra adipiscing. Lectus mauris ultrices eros in cursus turpis massa tincidunt. Adipiscing elit duis tristique sollicitudin nibh sit.</p>
</div>
<!--QUADRANTS
HEADER-->
<div class="col-lg-12 card bg-primary p-2 mb-3 border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); letter-spacing: 15px; opacity: .8;">
<h1 class="font-weight-bold text-center text-uppercase display-4 text-white" style="text-shadow: 0 0 10px;">QUADRANTS</h1>
</div>
<!--MATESPRITE-->
<div class="col-md-3 mb-3" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #ff0000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">MATESPRITE <i class="fas fa-heart"></i></h1>
</div>
<!--IMAGE-->
<div class="card rounded-0 mb-n1" style="border: #ff0000 5px solid; background: #EFEFEF url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width: 250px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #ff0000; z-index: 100; position:relative;"></i>
<div class="card bg-faded mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #ff0000 3px solid; max-height:350px;">
<a href="#" class="text-center"><h1>NAME</h1></a>
<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>
</div>
</div>
<!--END OF MATESPRITE-->
<!--MOIRAIL-->
<div class="col-md-3 mb-3" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #ff8a8a; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center" style=" color: #000;">MOIRAIL <i class="fas fa-rhombus"></i></h1>
</div>
<!--IMAGE-->
<div class="card rounded-0 mb-n1" style="border: #ff8a8a 5px solid; background: #EFEFEF url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width: 250px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #ff8a8a; z-index: 100; position:relative;"></i>
<div class="card bg-faded mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #ff8a8a 3px solid; max-height:350px;">
<a href="#" class="text-center"><h1>NAME</h1></a>
<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>
</div>
</div>
<!--END OF MOIRAIL-->
<!--AUSPISTICE-->
<div class="col-md-3 mb-3" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #696969; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">AUSPISTICE <i class="fas fa-club"></i></h1>
</div>
<!--IMAGE-->
<div class="card rounded-0 mb-n1" style="border: #696969 5px solid; background: #EFEFEF url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width: 250px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #696969; z-index: 100; position:relative;"></i>
<div class="card bg-faded mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #696969 3px solid; max-height:350px;">
<a href="#" class="text-center"><h1>NAME</h1></a>
<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>
</div>
</div>
<!--END OF AUSPISTICE-->
<!--KISMESIS-->
<div class="col-md-3 mb-3" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #303030; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">KISMESIS <i class="fas fa-spade"></i></h1>
</div>
<!--IMAGE-->
<div class="card rounded-0 mb-n1" style="border: #303030 5px solid; background: #EFEFEF url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width: 250px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #303030; z-index: 100; position:relative;"></i>
<div class="card bg-faded mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #303030 3px solid; max-height:350px;">
<a href="#" class="text-center"><h1>NAME</h1></a>
<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>
</div>
</div>
<!--END OF KISMESIS-->
<!--END OF QUADRANTS-->
<!--FAMILY
HEADER-->
<div class="col-lg-12 card p-2 my-3 text-white bg-primary border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); letter-spacing: 15px; opacity: .8;">
<h1 class="font-weight-bold text-center text-uppercase display-4" style="text-shadow: 0 0 10px #fff; color: #fff;">Family</h1>
</div>
<!--ANCESTOR-->
<div class="col-md-6" align="center">
<div class="card bg-primary p-2 m-3 border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">ANCESTOR</h1>
</div>
<!--IMAGE-->
<div class="card card-outline-primary rounded-0 mb-n1" style="border-width: 5px; background: #303030 url(
https://dummyimage.com/350/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 350px; max-width: 350px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4 text-primary" style="z-index: 100; position:relative;"></i>
<div class="card card-outline-primary bg-faded mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border-width: 3px; max-height:350px;">
<a href="#" class="text-center"><h1>NAME</h1></a>
<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. 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>
<!--END OF ANCESTOR-->
<!--LUSUS-->
<div class="col-md-6" align="center">
<div class="card p-2 m-3 border-0 bg-primary" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">LUSUS</h1>
</div>
<!--IMAGE-->
<div class="card card-outline-primary rounded-0 mb-n1" style="border-width: 5px; background: #303030 url(
https://dummyimage.com/350/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 350px; max-width: 350px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4 text-primary" style="z-index: 100; position:relative;"></i>
<div class="card card-outline-primary bg-faded mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border-width: 3px; max-height:350px;">
<a href="#" class="text-center"><h1>NAME</h1></a>
<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. 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>
<!--END OF LUSUS-->
<!--END OF FAMILY-->
<!--RELATIONSHIPS
HEADER-->
<div class="col-lg-12 card p-2 my-3 text-white bg-primary border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); letter-spacing: 15px; opacity: .8;">
<h1 class="font-weight-bold text-center text-uppercase display-4" style="text-shadow: 0 0 10px;">Relationships</h1>
</div>
<!--CHARA-->
<div class="col-md-4" align="center">
<div class="card bg-primary p-2 m-3 border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<a href="#" style="font-size: 20pt;" class="font-weight-bold text-uppercase text-center text-white">Character_Name</a>
</div>
<!--IMAGE-->
<div class="card card-outline-primary rounded-0 mb-n1" style="border-width: 5px; background: #303030 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width: 250px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4 text-primary" style="z-index: 100; position:relative;"></i>
<div class="card card-outline-primary bg-faded mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border-width: 3px; max-height:350px;">
<h1 class="text-center mb-3 text-primary">
[relationship]
</h1>
<h1 class="text-center mb-2 text-primary">
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fal fa-bug"></i>
</h1>
<p>Describe the relationship here; this box scrolls. 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>
<!--END OF CHARA-->
<!--CHARA-->
<div class="col-md-4" align="center">
<div class="card bg-primary p-2 m-3 border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<a href="#" style="font-size: 20pt;" class="font-weight-bold text-uppercase text-center text-white">Character_Name</a>
</div>
<!--IMAGE-->
<div class="card card-outline-primary rounded-0 mb-n1" style="border-width: 5px; background: #303030 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width: 250px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4 text-primary" style="z-index: 100; position:relative;"></i>
<div class="card card-outline-primary bg-faded mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border-width: 3px; max-height:350px;">
<h1 class="text-center mb-3 text-primary">
[relationship]
</h1>
<h1 class="text-center mb-2 text-primary">
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fal fa-bug"></i>
</h1>
<p>Describe the relationship here; this box scrolls. 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>
<!--END OF CHARA-->
<!--CHARA-->
<div class="col-md-4" align="center">
<div class="card bg-primary p-2 m-3 border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<a href="#" style="font-size: 20pt;" class="font-weight-bold text-uppercase text-center text-white">Character_Name</a>
</div>
<!--IMAGE-->
<div class="card card-outline-primary rounded-0 mb-n1" style="border-width: 5px; background: #303030 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width: 250px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4 text-primary" style="z-index: 100; position:relative;"></i>
<div class="card card-outline-primary bg-faded mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border-width: 3px; max-height:350px;">
<h1 class="text-center mb-3 text-primary">
[relationship]
</h1>
<h1 class="text-center mb-2 text-primary">
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fal fa-bug"></i>
</h1>
<p>Describe the relationship here; this box scrolls. 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>
<!--END OF CHARA-->
<!--CHARA-->
<div class="col-md-4" align="center">
<div class="card bg-primary p-2 m-3 border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<a href="#" style="font-size: 20pt;" class="font-weight-bold text-uppercase text-center text-white">Character_Name</a>
</div>
<!--IMAGE-->
<div class="card card-outline-primary rounded-0 mb-n1" style="border-width: 5px; background: #303030 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width: 250px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4 text-primary" style="z-index: 100; position:relative;"></i>
<div class="card card-outline-primary bg-faded mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border-width: 3px; max-height:350px;">
<h1 class="text-center mb-3 text-primary">
[relationship]
</h1>
<h1 class="text-center mb-2 text-primary">
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fal fa-bug"></i>
</h1>
<p>Describe the relationship here; this box scrolls. 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>
<!--END OF CHARA-->
<!--CHARA-->
<div class="col-md-4" align="center">
<div class="card bg-primary p-2 m-3 border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<a href="#" style="font-size: 20pt;" class="font-weight-bold text-uppercase text-center text-white">Character_Name</a>
</div>
<!--IMAGE-->
<div class="card card-outline-primary rounded-0 mb-n1" style="border-width: 5px; background: #303030 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width: 250px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4 text-primary" style="z-index: 100; position:relative;"></i>
<div class="card card-outline-primary bg-faded mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border-width: 3px; max-height:350px;">
<h1 class="text-center mb-3 text-primary">
[relationship]
</h1>
<h1 class="text-center mb-2 text-primary">
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fal fa-bug"></i>
</h1>
<p>Describe the relationship here; this box scrolls. 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>
<!--END OF CHARA-->
<!--CHARA-->
<div class="col-md-4" align="center">
<div class="card bg-primary p-2 m-3 border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<a href="#" style="font-size: 20pt;" class="font-weight-bold text-uppercase text-center text-white">Character_Name</a>
</div>
<!--IMAGE-->
<div class="card card-outline-primary rounded-0 mb-n1" style="border-width: 5px; background: #303030 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width: 250px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4 text-primary" style="z-index: 100; position:relative;"></i>
<div class="card card-outline-primary bg-faded mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border-width: 3px; max-height:350px;">
<h1 class="text-center mb-3 text-primary">
[relationship]
</h1>
<h1 class="text-center mb-2 text-primary">
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fal fa-bug"></i>
</h1>
<p>Describe the relationship here; this box scrolls. 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>
<!--END OF CHARA-->
<!--PASTE MORE ABOVE HERE
END OF RELATIONSHIPS-->
<!--CREDITS - DO NOT TOUCH UNLESS PROPERLY CREDITING DIFFERENT RESOURCES-->
<div class="col-md-2 card bg-primary p-1 my-3 border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); letter-spacing: 3px; opacity: .8;">
<a href="https://toyhou.se/BigGayFish" class="font-weight-bold text-center text-uppercase text-white" style="text-shadow: 0 0 10px;"><i class="fas fa-star-sharp"></i>BigGayFish</a>
</div>
<div class="col-md-2 card bg-primary p-1 my-3 border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); letter-spacing: 3px; opacity: .8;">
<a href="https://toyhou.se/6259293.-f2u-transparent-patterns" class="font-weight-bold text-center text-uppercase text-white" style="text-shadow: 0 0 10px;">BG Img</a>
</div>
</div>
</div>
</div>Copy
<!--HOMESTUCK REDUX - MINOR CHARACTER - CUSTOM COLORS
You ever get possessed and just create something larger than what you thought was possible? That's me with this code. Anyways no fancy talk here in the code notes, just indexing this shit cos it's 3AM and I'm tired...
NOTE: If you don't like how some of the imgs look (icons, moodboards, accent imgs, etc), change "background-size: contain;" to "background-size: cover;" or vice versa.
COLORKEY: #e20000 - The MAIN color, this is litereally everything. I suggest making it your fancharacter's color
#000 - Main font color
#fff - Secondary font color and button color
#EFEFEF - Background Color to all boxes
#ff9e9e - Light Gradient, goes at the very top
#bf0000 - Medium Gradient, goes in the middle, make it sorta close to your MAIN color but not TOO close
#ae0000 - Dark Gradient, goes at the bottom
SIGN - The place you put the SIGN NAME and the IMG to go with it. DO NOT TOUCH THE ANIMATIONS, THEY ARE INCREDIBLY FINICKY!
CHARACTER NAME - Self explanatory. Cuts off a bit if the name is too many letters long, but fits within homestuck naming conventions.
ICONS - contains your MAIN SPRITE, LUNAR SPRITE, and GODTIER SPRITE
QUICK INFO - Contains all the main beats for your character and the PLAYLIST is underneath it
TALKSPRITE - The img of your character's talksprite, theres two versions: DESKTOP and MOBILE in order to make the imgs work on each screen size, so make sure you input the imgs on both.
TYPING QUIRK - This has a carousal to go through several quotes, you can add more or less as you want, but by default there's 3.
TASTES - Contains LIKES, DISLIKES, HOBBIES, and two IMAGEs
PERSONALITY - Pretty obvious; the box expands but doesn't scroll. Also has an IMAGE on the side.
DESIGN / CHARACTER CREATION - The design section is cut into REF IMAGE (this version does NOT contain a caraousal) and DESIGN NOTES which further has the COLOR PALLETTE and DEFINING FEATURES
STRIFE SPECIBUS - Contains an img box and a text box that scrolls so you can explain your character's weapon
FETCH MODUS - Contains an img box and a text box that scrolls so you can explain your character's inventory system
PSIONICS - Similar structure to the strife n fetch cards; it has an img, a title (that you can rename to the psionics type or an ability), and a box that scrolls for an explanation. If this isn't applicable (you have a fankid, or a guardian etc), they can be deleted, or converted for like mundane abilities. If you delete it though, change "col-md-4" to "col-md-6" in STRIFE SPECIBUS and FETCH MODUS so that it fits neatly.
BIOGRAPHY - A place to detail your character's story; the box expands
QUADRANTS - Contains MATESPRITE, MOIRAIL, AUSPISTICE, and KISMESIS in their respective colors
FAMILY - this is for LUSUS and ANCESTOR (which can be replaced with GUARDIAN and other relatives for fankids, or deleted in general if not applicable)
RELATIONSHIP - For all the other links you need, each block is labeled CHARA and can be repeated as many times as needed. I used bugs to give the idea of a "friendship" but you can use any fontawesome icons you prefer.
-->
<div class="container-fluid">
<div class="row no-gutters d-flex justify-content-center">
<div class="col-md-4">
<!--ICON-->
<div class="card bg-transparent border-0" style="background: url(
https://dummyimage.com/250x600/ffffff/000000
) center; height: 600px; background-repeat: no-repeat; background-size: contain;">
</div>
<!--END OF ICON-->
</div>
<div class="col-lg-8 card p-3" style="font-size:13pt; font-family: Courier, monospace; color: #000; border: #e20000 5px solid; border-radius: 15px; background: linear-gradient(#ff9e9e, #bf0000, #ae0000); max-height:600px; overflow-x:hidden;">
<div class="card mx-n3 my-n3 border-0 p-3" style="border-radius: 15px; background: url(https://f2.toyhou.se/file/f2-toyhou-se/images/26019167_kciTvcQJ3CbjGH4.png);">
<div class="row no-gutters">
<!--SPACING DO NOT TOUCH-->
<div class="col-lg-12 hidden-sm-down" style="height:70px;"></div>
<!--SIGN-->
<div class="col-lg-12 card mt-n5 hidden-sm-down rounded-0 tooltipster" title="SIGN_NAME" style="border: #fff 5px solid; background: #000 url(
https://dummyimage.com/150/ffffff/000000
) center; background-size: cover; background-repeat: no-repeat; height: 150px; width: 150px; z-index:100; position:absolute;left:70%; top:1%;">
</div>
<!--ANIMATION DO NOT TOUCH-->
<div class="card mt-n5 hidden-sm-down rounded-0 fa-fade bg-transparent" style="height: 150px; width: 150px; z-index:10; box-shadow: 0 0 20px #fff; position:absolute; left:70%; top:1%;">
</div>
<!--SIGN-->
<div class="col-lg-12 card p-2" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); z-index:1; letter-spacing: 15px;">
<h1 class="font-weight-bold ml-5 text-uppercase display-4">Character Name</h1>
</div>
<!--SPACING DO NOT TOUCH-->
<div class="col-lg-12 hidden-sm-down" style="height:70px;"></div>
</div>
<div class="row no-gutters d-flex justify-content-center align-items-center">
<!--QUICK INFO-->
<div class="col-md-6">
<!--HANDLE-->
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); z-index:1;">
<h1 class="font-weight-bold text-uppercase text-center">handle</h1>
</div>
<div class="card text-center m-3 p-2 rounded-0" style="border: #e20000 3px solid; background-color: #EFEFEF;">
<h1 class="text-center">content</h1>
</div>
<!--END OF HANDLE-->
<!--GENDER-->
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); z-index:1;">
<h1 class="font-weight-bold text-uppercase text-center">gender</h1>
</div>
<div class="card text-center m-3 p-2 rounded-0" style="border: #e20000 3px solid; background-color: #EFEFEF;">
<h1 class="text-center">content</h1>
</div>
<!--END OF GENDER-->
<!--SEXUALITY-->
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); z-index:1;">
<h1 class="font-weight-bold text-uppercase text-center">Sexuality</h1>
</div>
<div class="card text-center m-3 p-2 rounded-0" style="border: #e20000 3px solid; background-color: #EFEFEF;">
<h1 class="text-center">content</h1>
</div>
<!--END OF SEXUALITY-->
</div>
<div class="col-md-6">
<!--AGE-->
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); z-index:1;">
<h1 class="font-weight-bold text-uppercase text-center">age</h1>
</div>
<div class="card text-center m-3 p-2 rounded-0" style="border: #e20000 3px solid; background-color: #EFEFEF;">
<h1 class="text-center">content</h1>
</div>
<!--END OF AGE-->
<!--PRONOUNS-->
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); z-index:1;">
<h1 class="font-weight-bold text-uppercase text-center">pronouns</h1>
</div>
<div class="card text-center m-3 p-2 rounded-0" style="border: #e20000 3px solid; background-color: #EFEFEF;">
<h1 class="text-center">content</h1>
</div>
<!--END OF PRONOUNS-->
<!--VOICE CLAIM-->
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); z-index:1;">
<h1 class="font-weight-bold text-uppercase text-center">Voice Claim</h1>
</div>
<div class="card text-center m-3 p-2 rounded-0" style="border: #e20000 3px solid; background-color: #EFEFEF;">
<h1 class="text-center"><a href="#" style="color: #e20000;">content</a></h1>
</div>
<!--END OF VOICE CLAIM-->
</div>
<!--END OF QUICK INFO-->
<!--PLAYLIST-->
<div class="col-lg-12 card p-2 border-0" style="background-color: #e20000; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); letter-spacing: 15px; opacity: .8;">
<a href="#" class="font-weight-bold text-center text-uppercase display-4" style="color: #fff; text-shadow: 0 0 10px #fff;">Playlist <i class="fas fa-play fa-beat"></i></a>
</div>
<!--END OF PLAYLIST-->
<!--TALKSPRITE (DESKTOP)-->
<div class="col-sm-4 d-none d-sm-block">
<div class="card rounded-0 m-3" style="border: #e20000 5px solid; background: #000 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: contain; height: 220px; width: 220px; z-index:100;">
</div>
<!--ANIMATION DO NOT TOUCH-->
<div class="card rounded-0 fa-fade bg-transparent m-3" style="height: 220px; width: 220px; z-index:10; box-shadow: 0 0 20px #fff; position: absolute; top:0;">
</div>
<div class="d-lg-none mb-5"></div>
</div>
<!--END OF TALKSPRITE-->
<!--TALKSPRITE (MOBILE)-->
<div class="col-sm-4 d-md-none" align="center">
<div class="card rounded-0 m-3" style="border: #e20000 5px solid; background: #000 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: contain; height: 250px; width: 250px; z-index:100;">
</div>
<!--ANIMATION DO NOT TOUCH-->
<div class="card rounded-0 fa-fade bg-transparent m-3" style="height: 250px; width: 250px; z-index:10; box-shadow: 0 0 20px #fff; position: absolute; top:0; left:5%;">
</div>
<div class="d-lg-none mb-5"></div>
</div>
<!--END OF TALKSPRITE-->
<!--TYPING QUIRK-->
<div class="col-lg-8">
<i class="fas fa-caret-up fa-4x d-lg-none" style="color: #e20000; position: absolute; bottom: 87%; left: 45%; z-index: 50;"></i>
<div class="d-none d-sm-block" style="position: absolute; top: 25%; right: 95%; z-index: 50;"><i class="fas fa-caret-left fa-4x" style="color: #e20000;"></i></div>
<div class="card text-center mx-3 p-2 rounded-0 font-weight-bold" style="border: #e20000 3px solid; background-color: #e20000; color: #fff; z-index: 100;">
<h1>Typing Quirk:</h1>
</div>
<div class="card text-center mx-3 mb-3 p-2 rounded-0 font-weight-bold" style="border: #e20000 6px solid; background-color: #EFEFEF; color: #e20000; z-index: 100;">
<div id="TQ" class="carousel slide m-3" data-ride="false" data-pause="true">
<div class="carousel-inner">
<!--QUOTE ONE-->
<div class="carousel-item active">
<p>Quote goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<!--QUOTE TWO-->
<div class="carousel-item">
<p>Quote goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<!--QUOTE THREE-->
<div class="carousel-item">
<p>Quote goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<!--BUTTON-->
<ul class="nav nav-pills" id="pills-tab" role="tablist">
<li class="nav-item mx-2">
<a class="nav-link" style="color:#e20000; position: absolute; right: 0%; bottom:5%;" data-slide="next" href="#TQ"><i class="fa-solid fa-caret-down fa-beat fa-2x"></i></a>
</li>
</ul>
<!--END OF BUTTON-->
</div>
</div>
<!--END OF TYPING QUIRK-->
<!--TASTES-->
<!--LIKES-->
<div class="col-md-4">
<div class="card m-3 my-2 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">LIKES</h1>
</div>
<div class="card m-3 p-2 rounded-0" style="border: #e20000 3px solid; background-color: #EFEFEF;">
<ul class="font-weight-bold my-2">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
<!--END OF LIKES-->
<!--IMAGE-->
<div class="col-md-4">
<div class="card rounded-0 m-3" style="border: #e20000 5px solid; background: #000 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height:350px; width:95%; z-index:100;">
<!--IMG CREDIT-->
<a class="p-2 tooltipster" title="IMG CREDIT" href="#" style="color: #fff; text-shadow: 0 0 5px #fff; opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--ANIMATION DO NOT TOUCH-->
<div class="card rounded-0 fa-fade bg-transparent m-3" style="height:350px; width:95%; z-index:10; box-shadow: 0 0 15px #fff; position: absolute; top:0;">
</div>
</div>
<!--END OF IMAGE-->
<!--DISLIKES-->
<div class="col-md-4">
<div class="card m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">DISLIKES</h1>
</div>
<div class="card m-3 p-2 rounded-0" style="border: #e20000 3px solid; background-color: #EFEFEF;">
<ul class="font-weight-bold my-2">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
<!--END OF DISLIKES-->
<!--END OF TASTES-->
<!--PERSONALITY-->
<div class="col-lg-12">
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">PERSONALITY</h1>
</div>
<div class="card m-3 p-3 rounded-0" style="border: #e20000 3px solid; background-color: #EFEFEF;">
<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. 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>
<!--END OF PERSONALITY-->
<!--REF IMAGE-->
<div class="col-md-5">
<div style="height:500px; background-image:url(
https://dummyimage.com/250x600/ffffff/000000
); background-size:contain; background-repeat: no-repeat; background-position:center; position: relative; z-index:100;">
<!--IMG CREDIT-->
<a class="p-2 tooltipster" title="IMG CREDIT" href="#" style="color: #fff; text-shadow: 0 0 5px #fff; opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<div class="card border-0 rounded-0" style="background-color: #e20000; height:500px; position: absolute; top:0; left: 5%; z-index: 1; width: 60%;">
</div>
</div>
<!--END OF REF IMAGE-->
<!--DESIGN NOTES-->
<div class="col-md-7">
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">CHARACTER CREATION</h1>
</div>
<div class="card m-3 p-3 rounded-0 overflow-auto" style="border: #e20000 3px solid; max-height: 450px; background-color: #EFEFEF;">
<!--COLOR PALLETTE-->
<div class="row d-flex mx-3">
<div class="col-md card p-2 border-0 mb-3" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
<div class="col-md card p-2 border-0 mb-3" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
<div class="col-md card p-2 border-0 mb-3" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
<div class="col-md card p-2 border-0 mb-3" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
<div class="col-md card p-2 border-0 mb-3" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
<div class="col-md card p-2 border-0 mb-3" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
</div>
<!--END OF COLOR PALLETTE-->
<!--DEFINING FEATURES-->
<div class="row mx-3 d-flex" align="center">
<div class="col-md-4 p-2 border-0 mb-3">
<h1 class="font-weight-bold" style="color: #e20000;"><i class="fas fa-moon"></i> Lunar Sway</h1>
<p>Content</p>
</div>
<div class="col-md-4 p-2 border-0 mb-3">
<h1 class="font-weight-bold" style="color: #e20000;"><i class="fas fa-file-pen"></i> Aspect</h1>
<p>Content</p>
</div>
<div class="col-md-4 p-2 border-0 mb-3">
<h1 class="font-weight-bold" style="color: #e20000;"><i class="fas fa-droplet"></i> Blood Color</h1>
<p>#HexCode</p>
</div>
<div class="col-lg-12 p-2 border-0 mb-3">
<h1 class="font-weight-bold" style="color: #e20000;"><i class="fas fa-symbols"></i> Sign/Symbol Meaning</h1>
<p>You can either just write the sign name or add a small explanation/lore here. 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>
<!--END OF DEFINING FEATURES-->
<h1 class="font-weight-bold text-uppercase" style="color: #e20000;">NOTES:</h1>
<ul class="my-2">
<li>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.</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
<!--END OF DESIGN NOTES-->
<!--STRIFE SPECIBUS-->
<div class="col-md-4" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">Strife Specibus</h1>
</div>
<!--IMAGE-->
<div class="card rounded-0 w-75 mb-n1" style="border: #e20000 5px solid; background: #EFEFEF url(
https://static.wikia.nocookie.net/mspaintadventures/images/b/b5/Strifecard_%282%29.png
) center; background-repeat: no-repeat; background-size: contain; height: 350px; max-width: 350px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #e20000; z-index: 100; position:relative"></i>
<div class="card mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #e20000 3px solid; max-height: 250px; background-color: #EFEFEF;">
<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. 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>
<!--END OF STRIFE SPECIBUS-->
<!--FETCH MODUS-->
<div class="col-md-4" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">Fetch Modus</h1>
</div>
<!--IMAGE-->
<div class="card rounded-0 w-75 mb-n1" style="border: #e20000 5px solid; background: #EFEFEF url(
https://static.wikia.nocookie.net/mspaintadventures/images/c/c0/StackModus.png
) center; background-repeat: no-repeat; background-size: contain; height: 350px; max-width: 350px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #e20000; z-index: 100; position:relative"></i>
<div class="card mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #e20000 3px solid; max-height: 250px; background-color: #EFEFEF;">
<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. 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>
<!--END OF FETCH MODUS-->
<!--PSIONICS-->
<div class="col-md-4" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">PSIONICS</h1>
</div>
<!--IMAGE-->
<div class="card rounded-0 w-75 mb-n1" style="border: #e20000 5px solid; background: #EFEFEF url(
https://dummyimage.com/250/ffffff/000000
) top; background-repeat: no-repeat; background-size: cover; height: 350px; max-width: 350px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #e20000; z-index: 100; position:relative"></i>
<div class="card mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #e20000 3px solid; max-height: 250px; background-color: #EFEFEF;">
<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. 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>
<!--END OF PSIONICS-->
<!--BIOGRAPHY -->
<div class="col-lg-12 card p-2 my-3 border-0" style="background-color: #e20000; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); letter-spacing: 15px; opacity: .8;">
<h1 class="font-weight-bold text-center text-uppercase display-4" style="text-shadow: 0 0 10px #fff; color: #fff;">BIOGRAPHY</h1>
</div>
<div class="col-lg-12 card p-2 mb-3 rounded-0" style="border: #e20000 3px solid; background-color: #EFEFEF;">
<i class="text-center"><span class="card-title m-3" style="color: #e20000;"><i class="fas fa-quote-left"></i><span style="letter-spacing: 1.5px; font-size: 20pt;"> Quote or Lyrics</span><i class="fas fa-quote-right"></i></span></i>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla malesuada pellentesque elit eget gravida cum. Ac tortor dignissim convallis aenean et tortor at risus. Consectetur adipiscing elit pellentesque habitant morbi tristique. Pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Vitae sapien pellentesque habitant morbi tristique senectus. Neque ornare aenean euismod elementum nisi. Dignissim diam quis enim lobortis scelerisque fermentum dui faucibus. Ullamcorper eget nulla facilisi etiam. Quam pellentesque nec nam aliquam sem et. Nisl nunc mi ipsum faucibus vitae.</p>
<p>Velit scelerisque in dictum non consectetur. Integer malesuada nunc vel risus. A diam maecenas sed enim ut sem. Sed blandit libero volutpat sed cras ornare arcu dui vivamus. Nunc aliquet bibendum enim facilisis gravida. Amet volutpat consequat mauris nunc congue nisi. Tortor pretium viverra suspendisse potenti nullam ac tortor vitae. Viverra suspendisse potenti nullam ac tortor vitae purus. Mauris in aliquam sem fringilla ut morbi tincidunt augue interdum. Tincidunt tortor aliquam nulla facilisi cras.</p>
<h3 style="color: #e20000; border-bottom: #e20000 2px solid; text-shadow: 2px 2px 2px #000;"><i class="fas fa-globe-stand"></i> Subtitle</h3>
<p>Cras fermentum odio eu feugiat. Lacus vel facilisis volutpat est velit egestas. In hac habitasse platea dictumst vestibulum rhoncus est pellentesque. Purus faucibus ornare suspendisse sed nisi lacus sed viverra. Lectus arcu bibendum at varius. Dictum varius duis at consectetur. Quisque sagittis purus sit amet volutpat consequat mauris nunc congue. Sit amet commodo nulla facilisi. Porttitor eget dolor morbi non arcu. Enim sed faucibus turpis in eu mi.</p>
<p>Quis hendrerit dolor magna eget est. Et molestie ac feugiat sed lectus vestibulum. Eu feugiat pretium nibh ipsum consequat nisl vel. Ante metus dictum at tempor commodo ullamcorper a. Ornare quam viverra orci sagittis eu volutpat odio facilisis mauris. Feugiat in ante metus dictum at tempor commodo. Sodales ut etiam sit amet. Tristique et egestas quis ipsum suspendisse ultrices gravida. Gravida dictum fusce ut placerat orci nulla pellentesque. Eget mauris pharetra et ultrices neque. Ac tincidunt vitae semper quis lectus nulla. Et odio pellentesque diam volutpat commodo sed egestas egestas.</p>
<p>Nunc lobortis mattis aliquam faucibus purus. Sed blandit libero volutpat sed cras ornare arcu dui. Sollicitudin tempor id eu nisl nunc. Curabitur gravida arcu ac tortor dignissim convallis aenean et. Habitant morbi tristique senectus et. Urna nunc id cursus metus aliquam. Gravida in fermentum et sollicitudin ac orci phasellus. Tortor at risus viverra adipiscing. Lectus mauris ultrices eros in cursus turpis massa tincidunt. Adipiscing elit duis tristique sollicitudin nibh sit.</p>
</div>
<!--RELATIONSHIPS
HEADER-->
<div class="col-lg-12 card p-2 my-3 border-0" style="background-color: #e20000; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); letter-spacing: 15px; opacity: .8;">
<h1 class="font-weight-bold text-center text-uppercase display-4" style="text-shadow: 0 0 10px #fff; color: #fff;">Relationships</h1>
</div>
<!--QUADRANTS-->
<!--MATESPRITE-->
<div class="col-md-6 mb-3" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #ff0000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">MATESPRITE <i class="fas fa-heart"></i></h1>
</div>
<!--IMAGE-->
<div class="card rounded-0 mb-n1" style="border: #ff0000 5px solid; background: #EFEFEF url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width: 250px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #ff0000; z-index: 100; position:relative;"></i>
<div class="card mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #ff0000 3px solid; max-height:350px; background-color: #EFEFEF;">
<a href="#" class="text-center" style="color: #ff0000;"><h1>NAME</h1></a>
<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>
</div>
</div>
<!--END OF MATESPRITE-->
<!--MOIRAIL-->
<div class="col-md-6 mb-3" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #ff8a8a; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">MOIRAIL <i class="fas fa-rhombus"></i></h1>
</div>
<!--IMAGE-->
<div class="card rounded-0 mb-n1" style="border: #ff8a8a 5px solid; background: #EFEFEF url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width: 250px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #ff8a8a; z-index: 100; position:relative;"></i>
<div class="card mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #ff8a8a 3px solid; max-height:350px; background-color: #EFEFEF;">
<a href="#" class="text-center" style="color: #ff8a8a;"><h1>NAME</h1></a>
<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>
</div>
</div>
<!--END OF MOIRAIL-->
<!--AUSPISTICE-->
<div class="col-md-6 mb-3" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #696969; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">AUSPISTICE <i class="fas fa-club"></i></h1>
</div>
<!--IMAGE-->
<div class="card rounded-0 mb-n1" style="border: #696969 5px solid; background: #EFEFEF url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width: 250px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #696969; z-index: 100; position:relative;"></i>
<div class="card mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #696969 3px solid; max-height:350px; background-color: #EFEFEF;">
<a href="#" class="text-center" style="color: #696969;"><h1>NAME</h1></a>
<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>
</div>
</div>
<!--END OF AUSPISTICE-->
<!--KISMESIS-->
<div class="col-md-6 mb-3" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #303030; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">KISMESIS <i class="fas fa-spade"></i></h1>
</div>
<!--IMAGE-->
<div class="card rounded-0 mb-n1" style="border: #303030 5px solid; background: #EFEFEF url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width: 250px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #303030; z-index: 100; position:relative;"></i>
<div class="card mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #303030 3px solid; max-height:350px; background-color: #EFEFEF;">
<a href="#" class="text-center" style="color: #303030;"><h1>NAME</h1></a>
<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>
</div>
</div>
<!--END OF KISMESIS-->
<!--END OF QUADRANTS-->
<!--FAMILY-->
<!--ANCESTOR-->
<div class="col-md-6" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">ANCESTOR</h1>
</div>
<!--IMAGE-->
<div class="card rounded-0 mb-n1" style="border: #e20000 5px solid; background: #303030 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width: 250px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #e20000; z-index: 100; position:relative;"></i>
<div class="card mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #e20000 3px solid; max-height:350px; background-color: #EFEFEF;">
<a href="#" class="text-center" style="color: #e20000;"><h1>NAME</h1></a>
<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. 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>
<!--END OF ANCESTOR-->
<!--LUSUS-->
<div class="col-md-6" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">LUSUS</h1>
</div>
<!--IMAGE-->
<div class="card rounded-0 mb-n1" style="border: #e20000 5px solid; background: #303030 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width: 250px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #e20000; z-index: 100; position:relative;"></i>
<div class="card mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #e20000 3px solid; max-height:350px; background-color: #EFEFEF;">
<a href="#" class="text-center" style="color: #e20000;"><h1>NAME</h1></a>
<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. 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>
<!--END OF LUSUS-->
<!--END OF FAMILY-->
<!--CHARA-->
<div class="col-md-6" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<a href="#" style="color: #fff; font-size: 20pt;" class="font-weight-bold text-uppercase text-center">Character_Name</a>
</div>
<!--IMAGE-->
<div class="card rounded-0 mb-n1" style="border: #e20000 5px solid; background: #303030 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width: 250px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #e20000; z-index: 100; position:relative;"></i>
<div class="card mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #e20000 3px solid; max-height:350px; background-color: #EFEFEF;">
<h1 class="text-center mb-3" style="color: #e20000;">
[relationship]
</h1>
<h1 class="text-center mb-2" style="color: #e20000;">
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fal fa-bug"></i>
</h1>
<p>Describe the relationship here; this box scrolls. 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>
<!--END OF CHARA-->
<!--CHARA-->
<div class="col-md-6" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #e20000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<a href="#" style="color: #fff; font-size: 20pt;" class="font-weight-bold text-uppercase text-center">Character_Name</a>
</div>
<!--IMAGE-->
<div class="card rounded-0 mb-n1" style="border: #e20000 5px solid; background: #303030 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width: 250px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #e20000; z-index: 100; position:relative;"></i>
<div class="card mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #e20000 3px solid; max-height:350px; background-color: #EFEFEF;">
<h1 class="text-center mb-3" style="color: #e20000;">
[relationship]
</h1>
<h1 class="text-center mb-2" style="color: #e20000;">
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fal fa-bug"></i>
</h1>
<p>Describe the relationship here; this box scrolls. 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>
<!--END OF CHARA-->
<!--PASTE MORE ABOVE HERE
END OF RELATIONSHIPS-->
</div>
</div>
</div>
<!--CREDITS - DO NOT TOUCH UNLESS PROPERLY CREDITING DIFFERENT RESOURCES-->
<div class="col-md-2 card p-1 my-3 border-0" style="background-color: #e20000; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); letter-spacing: 3px;">
<a href="https://toyhou.se/BigGayFish" class="font-weight-bold text-center text-uppercase" style="text-shadow: 0 0 10px #fff; color: #fff;"><i class="fas fa-star-sharp"></i>BigGayFish</a>
</div>
<div class="col-md-2 card p-1 my-3 border-0" style="background-color: #e20000; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); letter-spacing: 3px;">
<a href="https://toyhou.se/6259293.-f2u-transparent-patterns" class="font-weight-bold text-center text-uppercase" style="text-shadow: 0 0 10px #fff; color: #fff;">BG Img</a>
</div>
</div>
</div>Copy
<!--HOMESTUCK REDUX - MINOR CHARACTER - BOOTSTRAPS
You ever get possessed and just create something larger than what you thought was possible? That's me with this code. Anyways no fancy talk here in the code notes, just indexing this shit cos it's 3AM and I'm tired...
NOTE: If you don't like how some of the imgs look (icons, moodboards, accent imgs, etc), change "background-size: contain;" to "background-size: cover;" or vice versa.
COLORKEY: premium - The MAIN color, this is litereally everything
text-white - Font color on any bg-premium sections (and some buttons)
rgba(255,158,158,0.75) - Light Gradient, goes at the very top, has some transparency
rgba(191,0,0,0.75) - Medium Gradient, goes in the middle, has some transparency. I suggest making it close to your fancharacter's color
rgba(174,0,0, 0.75) - Dark Gradient, goes at the bottom, has some transparency
SIGN - The place you put the SIGN NAME and the IMG to go with it. DO NOT TOUCH THE ANIMATIONS, THEY ARE INCREDIBLY FINICKY!
CHARACTER NAME - Self explanatory. Cuts off a bit if the name is too many letters long, but fits within homestuck naming conventions.
ICONS - contains your MAIN SPRITE, LUNAR SPRITE, and GODTIER SPRITE
QUICK INFO - Contains all the main beats for your character and the PLAYLIST is underneath it
TALKSPRITE - The img of your character's talksprite, theres two versions: DESKTOP and MOBILE in order to make the imgs work on each screen size, so make sure you input the imgs on both.
TYPING QUIRK - This has a carousal to go through several quotes, you can add more or less as you want, but by default there's 3.
TASTES - Contains LIKES, DISLIKES, HOBBIES, and two IMAGEs
PERSONALITY - Pretty obvious; the box expands but doesn't scroll. Also has an IMAGE on the side.
DESIGN / CHARACTER CREATION - The design section is cut into REF IMAGE (this version does NOT contain a caraousal) and DESIGN NOTES which further has the COLOR PALLETTE and DEFINING FEATURES
STRIFE SPECIBUS - Contains an img box and a text box that scrolls so you can explain your character's weapon
FETCH MODUS - Contains an img box and a text box that scrolls so you can explain your character's inventory system
PSIONICS - Similar structure to the strife n fetch cards; it has an img, a title (that you can rename to the psionics type or an ability), and a box that scrolls for an explanation. If this isn't applicable (you have a fankid, or a guardian etc), they can be deleted, or converted for like mundane abilities. If you delete it though, change "col-md-4" to "col-md-6" in STRIFE SPECIBUS and FETCH MODUS so that it fits neatly.
BIOGRAPHY - A place to detail your character's story; the box expands
QUADRANTS - Contains MATESPRITE, MOIRAIL, AUSPISTICE, and KISMESIS in their respective colors
FAMILY - this is for LUSUS and ANCESTOR (which can be replaced with GUARDIAN and other relatives for fankids, or deleted in general if not applicable)
RELATIONSHIP - For all the other links you need, each block is labeled CHARA and can be repeated as many times as needed. I used bugs to give the idea of a "friendship" but you can use any fontawesome icons you prefer.
-->
<div class="container-fluid">
<div class="row no-gutters d-flex justify-content-center">
<div class="col-md-4">
<!--ICON-->
<div class="card bg-transparent border-0" style="background: url(
https://dummyimage.com/250x600/ffffff/000000
) center; height: 600px; background-repeat: no-repeat; background-size: contain;">
</div>
<!--END OF ICON-->
</div>
<div class="col-lg-8 card card-outline-primary p-3" style="font-size:13pt; font-family: Courier, monospace; border-width: 5px; border-radius: 15px; background: linear-gradient(rgba(255,158,158,0.75), rgba(191,0,0,0.75), rgba(174,0,0, 0.75)); max-height:600px; overflow-x:hidden;">
<div class="card mx-n3 my-n3 border-0 p-3" style="border-radius: 15px; background: url(https://f2.toyhou.se/file/f2-toyhou-se/images/26019167_kciTvcQJ3CbjGH4.png);">
<div class="row no-gutters">
<!--SPACING DO NOT TOUCH-->
<div class="col-lg-12 hidden-sm-down" style="height:70px;"></div>
<!--SIGN-->
<div class="col-lg-12 card mt-n5 hidden-sm-down rounded-0 tooltipster" title="SIGN_NAME" style="border: #fff 5px solid; background: #000 url(
https://dummyimage.com/150/ffffff/000000
) center; background-size: cover; background-repeat: no-repeat; height: 150px; width: 150px; z-index:100; position:absolute;left:70%; top:1%;">
</div>
<!--ANIMATION DO NOT TOUCH-->
<div class="card mt-n5 hidden-sm-down rounded-0 fa-fade bg-transparent" style="height: 150px; width: 150px; z-index:10; box-shadow: 0 0 20px #fff; position:absolute; left:70%; top:1%;">
</div>
<!--SIGN-->
<div class="col-lg-12 card p-2 bg-primary text-white border-0" style=" clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); z-index:1; letter-spacing: 15px;">
<h1 class="font-weight-bold ml-5 text-uppercase display-4">Character Name</h1>
</div>
<!--SPACING DO NOT TOUCH-->
<div class="col-lg-12 hidden-sm-down" style="height:70px;"></div>
</div>
<div class="row no-gutters d-flex justify-content-center align-items-center">
<!--QUICK INFO-->
<div class="col-md-6">
<!--HANDLE-->
<div class="card p-2 m-3 border-0 bg-primary text-white" style=" clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); z-index:1;">
<h1 class="font-weight-bold text-uppercase text-center">handle</h1>
</div>
<div class="card card-outline-primary bg-faded text-center m-3 p-2 rounded-0" style="border-width: 3px;">
<h1 class="text-center">content</h1>
</div>
<!--END OF HANDLE-->
<!--GENDER-->
<div class="card p-2 m-3 border-0 bg-primary text-white" style=" clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); z-index:1;">
<h1 class="font-weight-bold text-uppercase text-center">gender</h1>
</div>
<div class="card card-outline-primary bg-faded text-center m-3 p-2 rounded-0" style="border-width: 3px;">
<h1 class="text-center">content</h1>
</div>
<!--END OF GENDER-->
<!--SEXUALITY-->
<div class="card p-2 m-3 border-0 bg-primary text-white" style=" clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); z-index:1;">
<h1 class="font-weight-bold text-uppercase text-center">Sexuality</h1>
</div>
<div class="card card-outline-primary bg-faded text-center m-3 p-2 rounded-0" style="border-width: 3px;">
<h1 class="text-center">content</h1>
</div>
<!--END OF SEXUALITY-->
</div>
<div class="col-md-6">
<!--AGE-->
<div class="card p-2 m-3 border-0 bg-primary text-white" style=" clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); z-index:1;">
<h1 class="font-weight-bold text-uppercase text-center">age</h1>
</div>
<div class="card card-outline-primary bg-faded text-center m-3 p-2 rounded-0" style="border-width: 3px;">
<h1 class="text-center">content</h1>
</div>
<!--END OF AGE-->
<!--PRONOUNS-->
<div class="card p-2 m-3 border-0 bg-primary text-white" style=" clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); z-index:1;">
<h1 class="font-weight-bold text-uppercase text-center">pronouns</h1>
</div>
<div class="card card-outline-primary bg-faded text-center m-3 p-2 rounded-0" style="border-width: 3px;">
<h1 class="text-center">content</h1>
</div>
<!--END OF PRONOUNS-->
<!--VOICE CLAIM-->
<div class="card p-2 m-3 border-0 bg-primary text-white" style=" clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); z-index:1;">
<h1 class="font-weight-bold text-uppercase text-center">Voice Claim</h1>
</div>
<div class="card card-outline-primary bg-faded text-center m-3 p-2 rounded-0" style="border-width: 3px;">
<h1 class="text-center"><a href="#">content</a></h1>
</div>
<!--END OF VOICE CLAIM-->
</div>
<!--END OF QUICK INFO-->
<!--PLAYLIST-->
<div class="col-lg-12 card p-2 bg-primary border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); letter-spacing: 15px; opacity: .8;">
<a href="#" class="font-weight-bold text-center text-uppercase display-4 text-white" style="color: #fff; text-shadow: 0 0 10px #fff;">Playlist <i class="fas fa-play fa-beat"></i></a>
</div>
<!--END OF PLAYLIST-->
<!--TALKSPRITE (DESKTOP)-->
<div class="col-sm-4 d-none d-sm-block">
<div class="card card-outline-primary rounded-0 m-3" style="border-width: 5px; background: #000 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: contain; height: 220px; width: 220px; z-index:100;">
</div>
<!--ANIMATION DO NOT TOUCH-->
<div class="card rounded-0 fa-fade bg-transparent m-3" style="height: 220px; width: 220px; z-index:10; box-shadow: 0 0 20px #fff; position: absolute; top:0;">
</div>
<div class="d-lg-none mb-5"></div>
</div>
<!--END OF TALKSPRITE-->
<!--TALKSPRITE (MOBILE)-->
<div class="col-sm-4 d-md-none" align="center">
<div class="card card-outline-primary rounded-0 m-3" style="border-width: 5px; background: #000 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: contain; height: 250px; width: 250px; z-index:100;">
</div>
<!--ANIMATION DO NOT TOUCH-->
<div class="card rounded-0 fa-fade bg-transparent m-3" style="height: 250px; width: 250px; z-index:10; box-shadow: 0 0 20px #fff; position: absolute; top:0; left:5%;">
</div>
<div class="d-lg-none mb-5"></div>
</div>
<!--END OF TALKSPRITE-->
<!--TYPING QUIRK-->
<div class="col-lg-8">
<i class="fas fa-caret-up fa-4x d-lg-none text-primary" style="position: absolute; bottom: 87%; left: 45%; z-index: 50;"></i>
<div class="d-none d-sm-block" style="position: absolute; top: 25%; right: 95%; z-index: 50;"><i class="fas fa-caret-left fa-4x text-primary"></i></div>
<div class="card card-outline-primary bg-primary text-white text-center mx-3 p-2 rounded-0 font-weight-bold" style="border-width: 3px; z-index: 100;">
<h1>Typing Quirk:</h1>
</div>
<div class="card card-outline-primary bg-faded text-center text-primary mx-3 mb-3 p-2 rounded-0 font-weight-bold" style="border-width: 6px; z-index: 100;">
<div id="TQ" class="carousel slide m-3" data-ride="false" data-pause="true">
<div class="carousel-inner">
<!--QUOTE ONE-->
<div class="carousel-item active">
<p>Quote goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<!--QUOTE TWO-->
<div class="carousel-item">
<p>Quote goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<!--QUOTE THREE-->
<div class="carousel-item">
<p>Quote goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<!--BUTTON-->
<ul class="nav nav-pills" id="pills-tab" role="tablist">
<li class="nav-item mx-2">
<a class="nav-link text-primary" style="position: absolute; right: 0%; bottom:5%;" data-slide="next" href="#TQ"><i class="fa-solid fa-caret-down fa-beat fa-2x"></i></a>
</li>
</ul>
<!--END OF BUTTON-->
</div>
</div>
<!--END OF TYPING QUIRK-->
<!--TASTES-->
<!--LIKES-->
<div class="col-md-4">
<div class="card bg-primary text-white m-3 my-2 border-0" style=" clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">LIKES</h1>
</div>
<div class="card card-outline-primary bg-faded m-3 p-2 rounded-0" style="border-width: 3px;">
<ul class="font-weight-bold my-2">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
<!--END OF LIKES-->
<!--IMAGE-->
<div class="col-md-4">
<div class="card card-outline-primary rounded-0 m-3" style="border-width: 5px; background: #000 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height:350px; width:95%; z-index:100;">
<!--IMG CREDIT-->
<a class="p-2 tooltipster" title="IMG CREDIT" href="#" style="color: #fff; text-shadow: 0 0 5px #fff; opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--ANIMATION DO NOT TOUCH-->
<div class="card rounded-0 fa-fade bg-transparent m-3" style="height:350px; width:95%; z-index:10; box-shadow: 0 0 15px #fff; position: absolute; top:0;">
</div>
</div>
<!--END OF IMAGE-->
<!--DISLIKES-->
<div class="col-md-4">
<div class="card m-3 bg-primary text-white border-0" style=" clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">DISLIKES</h1>
</div>
<div class="card card-outline-primary bg-faded m-3 p-2 rounded-0" style="border-width: 3px;">
<ul class="font-weight-bold my-2">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
<!--END OF DISLIKES-->
<!--END OF TASTES-->
<!--PERSONALITY-->
<div class="col-lg-12">
<div class="card p-2 m-3 border-0 bg-primary text-white" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">PERSONALITY</h1>
</div>
<div class="card card-outline-primary bg-faded m-3 p-3 rounded-0" style="border-width: 3px;">
<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. 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>
<!--END OF PERSONALITY-->
<!--REF IMAGE-->
<div class="col-md-5">
<div style="height:500px; background-image:url(
https://dummyimage.com/250x600/ffffff/000000
); background-size:contain; background-repeat: no-repeat; background-position:center; position: relative; z-index:100;">
<!--IMG CREDIT-->
<a class="p-2 tooltipster" title="IMG CREDIT" href="#" style="color: #fff; text-shadow: 0 0 5px #fff; opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<div class="card border-0 rounded-0 bg-primary" style="height:500px; position: absolute; top:0; left: 5%; z-index: 1; width: 60%;">
</div>
</div>
<!--END OF REF IMAGE-->
<!--DESIGN NOTES-->
<div class="col-md-7">
<div class="card p-2 m-3 border-0 bg-primary text-white" style=" clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">CHARACTER CREATION</h1>
</div>
<div class="card card-outline-primary bg-faded m-3 p-3 rounded-0 overflow-auto" style="border-width: 3px; max-height: 450px;">
<!--COLOR PALLETTE-->
<div class="row d-flex mx-3">
<div class="col-md card p-2 border-0 mb-3" style="background-color: #ff0000; color:#fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
<div class="col-md card p-2 border-0 mb-3" style="background-color: #ff0000; color:#fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
<div class="col-md card p-2 border-0 mb-3" style="background-color: #ff0000; color:#fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
<div class="col-md card p-2 border-0 mb-3" style="background-color: #ff0000; color:#fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
<div class="col-md card p-2 border-0 mb-3" style="background-color: #ff0000; color:#fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
<div class="col-md card p-2 border-0 mb-3" style="background-color: #ff0000; color:#fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-center">#HexCode</h1>
</div>
</div>
<!--END OF COLOR PALLETTE-->
<!--DEFINING FEATURES-->
<div class="row mx-3 d-flex" align="center">
<div class="col-md-4 p-2 border-0 mb-3">
<h1 class="font-weight-bold text-primary"><i class="fas fa-moon"></i> Lunar Sway</h1>
<p>Content</p>
</div>
<div class="col-md-4 p-2 border-0 mb-3">
<h1 class="font-weight-bold text-primary"><i class="fas fa-file-pen"></i> Aspect</h1>
<p>Content</p>
</div>
<div class="col-md-4 p-2 border-0 mb-3">
<h1 class="font-weight-bold text-primary"><i class="fas fa-droplet"></i> Blood Color</h1>
<p>#HexCode</p>
</div>
<div class="col-lg-12 p-2 border-0 mb-3">
<h1 class="font-weight-bold text-primary"><i class="fas fa-symbols"></i> Sign/Symbol Meaning</h1>
<p>You can either just write the sign name or add a small explanation/lore here. 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>
<!--END OF DEFINING FEATURES-->
<h1 class="font-weight-bold text-uppercase text-primary">NOTES:</h1>
<ul class="my-2">
<li>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.</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
<!--END OF DESIGN NOTES-->
<!--STRIFE SPECIBUS-->
<div class="col-md-4" align="center">
<div class="card p-2 m-3 border-0 bg-primary text-white" style=" clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">Strife Specibus</h1>
</div>
<!--IMAGE-->
<div class="card card-outline-primary rounded-0 w-75 mb-n1" style="border-width: 5px; background: #EFEFEF url(
https://static.wikia.nocookie.net/mspaintadventures/images/b/b5/Strifecard_%282%29.png
) center; background-repeat: no-repeat; background-size: contain; height: 350px; max-width: 350px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x text-primary mt-n4" style="z-index: 100; position:relative"></i>
<div class="card card-outline-primary bg-faded mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border-width: 3px; max-height: 250px;">
<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. 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>
<!--END OF STRIFE SPECIBUS-->
<!--FETCH MODUS-->
<div class="col-md-4" align="center">
<div class="card p-2 m-3 border-0 bg-primary text-white" style=" clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">Fetch Modus</h1>
</div>
<!--IMAGE-->
<div class="card card-outline-primary rounded-0 w-75 mb-n1" style="border-width: 5px; background: #EFEFEF url(
https://static.wikia.nocookie.net/mspaintadventures/images/c/c0/StackModus.png
) center; background-repeat: no-repeat; background-size: contain; height: 350px; max-width: 350px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x text-primary mt-n4" style="z-index: 100; position:relative"></i>
<div class="card card-outline-primary bg-faded mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border-width: 3px; max-height: 250px;">
<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. 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>
<!--END OF FETCH MODUS-->
<!--PSIONICS-->
<div class="col-md-4" align="center">
<div class="card p-2 m-3 border-0 bg-primary text-white" style=" clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">PSIONICS</h1>
</div>
<!--IMAGE-->
<div class="card card-outline-primary rounded-0 w-75 mb-n1" style="border-width: 5px; background: #EFEFEF url(
https://dummyimage.com/250/ffffff/000000
) top; background-repeat: no-repeat; background-size: cover; height: 350px; max-width: 350px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x text-primary mt-n4" style="z-index: 100; position:relative"></i>
<div class="card card-outline-primary bg-faded mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border-width: 3px; max-height: 250px;">
<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. 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>
<!--END OF PSIONICS-->
<!--BIOGRAPHY -->
<div class="col-lg-12 bg-primary card p-2 my-3 border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); letter-spacing: 15px; opacity: .8;">
<h1 class="font-weight-bold text-center text-uppercase text-white display-4" style="text-shadow: 0 0 10px;">BIOGRAPHY</h1>
</div>
<div class="col-lg-12 card card-outline-primary bg-faded p-2 mb-3 rounded-0" style="border-width: 3px;">
<i class="text-center text-primary"><span class="card-title m-3"><i class="fas fa-quote-left"></i><span style="letter-spacing: 1.5px; font-size: 20pt;"> Quote or Lyrics</span><i class="fas fa-quote-right"></i></span></i>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla malesuada pellentesque elit eget gravida cum. Ac tortor dignissim convallis aenean et tortor at risus. Consectetur adipiscing elit pellentesque habitant morbi tristique. Pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Vitae sapien pellentesque habitant morbi tristique senectus. Neque ornare aenean euismod elementum nisi. Dignissim diam quis enim lobortis scelerisque fermentum dui faucibus. Ullamcorper eget nulla facilisi etiam. Quam pellentesque nec nam aliquam sem et. Nisl nunc mi ipsum faucibus vitae.</p>
<p>Velit scelerisque in dictum non consectetur. Integer malesuada nunc vel risus. A diam maecenas sed enim ut sem. Sed blandit libero volutpat sed cras ornare arcu dui vivamus. Nunc aliquet bibendum enim facilisis gravida. Amet volutpat consequat mauris nunc congue nisi. Tortor pretium viverra suspendisse potenti nullam ac tortor vitae. Viverra suspendisse potenti nullam ac tortor vitae purus. Mauris in aliquam sem fringilla ut morbi tincidunt augue interdum. Tincidunt tortor aliquam nulla facilisi cras.</p>
<h3 class="text-primary" style="border-bottom: 2px solid; text-shadow: 2px 2px 2px #000;"><i class="fas fa-globe-stand"></i> Subtitle</h3>
<p>Cras fermentum odio eu feugiat. Lacus vel facilisis volutpat est velit egestas. In hac habitasse platea dictumst vestibulum rhoncus est pellentesque. Purus faucibus ornare suspendisse sed nisi lacus sed viverra. Lectus arcu bibendum at varius. Dictum varius duis at consectetur. Quisque sagittis purus sit amet volutpat consequat mauris nunc congue. Sit amet commodo nulla facilisi. Porttitor eget dolor morbi non arcu. Enim sed faucibus turpis in eu mi.</p>
<p>Quis hendrerit dolor magna eget est. Et molestie ac feugiat sed lectus vestibulum. Eu feugiat pretium nibh ipsum consequat nisl vel. Ante metus dictum at tempor commodo ullamcorper a. Ornare quam viverra orci sagittis eu volutpat odio facilisis mauris. Feugiat in ante metus dictum at tempor commodo. Sodales ut etiam sit amet. Tristique et egestas quis ipsum suspendisse ultrices gravida. Gravida dictum fusce ut placerat orci nulla pellentesque. Eget mauris pharetra et ultrices neque. Ac tincidunt vitae semper quis lectus nulla. Et odio pellentesque diam volutpat commodo sed egestas egestas.</p>
<p>Nunc lobortis mattis aliquam faucibus purus. Sed blandit libero volutpat sed cras ornare arcu dui. Sollicitudin tempor id eu nisl nunc. Curabitur gravida arcu ac tortor dignissim convallis aenean et. Habitant morbi tristique senectus et. Urna nunc id cursus metus aliquam. Gravida in fermentum et sollicitudin ac orci phasellus. Tortor at risus viverra adipiscing. Lectus mauris ultrices eros in cursus turpis massa tincidunt. Adipiscing elit duis tristique sollicitudin nibh sit.</p>
</div>
<!--RELATIONSHIPS
HEADER-->
<div class="col-lg-12 card bg-primary p-2 my-3 border-0" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); letter-spacing: 15px; opacity: .8;">
<h1 class="font-weight-bold text-center text-uppercase text-white display-4" style="text-shadow: 0 0 10px;">Relationships</h1>
</div>
<!--QUADRANTS-->
<!--MATESPRITE-->
<div class="col-md-6 mb-3" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #ff0000; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">MATESPRITE <i class="fas fa-heart"></i></h1>
</div>
<!--IMAGE-->
<div class="card rounded-0 mb-n1" style="border: #ff0000 5px solid; background: #EFEFEF url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width: 250px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #ff0000; z-index: 100; position:relative;"></i>
<div class="card bg-faded mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #ff0000 3px solid; max-height:350px;">
<a href="#" class="text-center"><h1>NAME</h1></a>
<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>
</div>
</div>
<!--END OF MATESPRITE-->
<!--MOIRAIL-->
<div class="col-md-6 mb-3" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #ff8a8a; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center" style=" color: #000;">MOIRAIL <i class="fas fa-rhombus"></i></h1>
</div>
<!--IMAGE-->
<div class="card rounded-0 mb-n1" style="border: #ff8a8a 5px solid; background: #EFEFEF url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width: 250px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #ff8a8a; z-index: 100; position:relative;"></i>
<div class="card bg-faded mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #ff8a8a 3px solid; max-height:350px;">
<a href="#" class="text-center"><h1>NAME</h1></a>
<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>
</div>
</div>
<!--END OF MOIRAIL-->
<!--AUSPISTICE-->
<div class="col-md-6 mb-3" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #696969; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">AUSPISTICE <i class="fas fa-club"></i></h1>
</div>
<!--IMAGE-->
<div class="card rounded-0 mb-n1" style="border: #696969 5px solid; background: #EFEFEF url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width: 250px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #696969; z-index: 100; position:relative;"></i>
<div class="card bg-faded mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #696969 3px solid; max-height:350px;">
<a href="#" class="text-center"><h1>NAME</h1></a>
<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>
</div>
</div>
<!--END OF AUSPISTICE-->
<!--KISMESIS-->
<div class="col-md-6 mb-3" align="center">
<div class="card p-2 m-3 border-0" style="background-color: #303030; color: #fff; clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">KISMESIS <i class="fas fa-spade"></i></h1>
</div>
<!--IMAGE-->
<div class="card bg-faded rounded-0 mb-n1" style="border: #303030 5px solid; background: #EFEFEF url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width: 250px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x mt-n4" style="color: #303030; z-index: 100; position:relative;"></i>
<div class="card mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border: #303030 3px solid; max-height:350px;">
<a href="#" class="text-center"><h1>NAME</h1></a>
<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>
</div>
</div>
<!--END OF KISMESIS-->
<!--END OF QUADRANTS-->
<!--FAMILY-->
<!--ANCESTOR-->
<div class="col-md-6" align="center">
<div class="card p-2 m-3 border-0 bg-primary text-white" style=" clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">ANCESTOR</h1>
</div>
<!--IMAGE-->
<div class="card card-outline-primary rounded-0 mb-n1" style="border-width: 5px; background: #303030 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width: 250px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x text-primary mt-n4" style="z-index: 100; position:relative;"></i>
<div class="card card-outline-primary bg-faded mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border-width: 3px; max-height:350px;">
<a href="#" class="text-center"><h1>NAME</h1></a>
<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. 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>
<!--END OF ANCESTOR-->
<!--LUSUS-->
<div class="col-md-6" align="center">
<div class="card p-2 m-3 border-0 bg-primary text-white" style=" clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<h1 class="font-weight-bold text-uppercase text-center">LUSUS</h1>
</div>
<!--IMAGE-->
<div class="card card-outline-primary rounded-0 mb-n1" style="border-width: 5px; background: #303030 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width: 250px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x text-primary mt-n4" style="z-index: 100; position:relative;"></i>
<div class="card card-outline-primary bg-faded mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border-width: 3px; max-height:350px;">
<a href="#" class="text-center"><h1>NAME</h1></a>
<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. 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>
<!--END OF LUSUS-->
<!--END OF FAMILY-->
<!--CHARA-->
<div class="col-md-6" align="center">
<div class="card p-2 m-3 border-0 bg-primary text-white" style=" clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<a href="#" style="color: #fff; font-size: 20pt;" class="font-weight-bold text-uppercase text-center">Character_Name</a>
</div>
<!--IMAGE-->
<div class="card card-outline-primary rounded-0 mb-n1" style="border-width: 5px; background: #303030 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width: 250px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x text-primary mt-n4" style="z-index: 100; position:relative;"></i>
<div class="card card-outline-primary bg-faded mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border-width: 3px; max-height:350px;">
<h1 class="text-center text-primary mb-3">
[relationship]
</h1>
<h1 class="text-center text-primary mb-2">
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fal fa-bug"></i>
</h1>
<p>Describe the relationship here; this box scrolls. 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>
<!--END OF CHARA-->
<!--CHARA-->
<div class="col-md-6" align="center">
<div class="card p-2 m-3 border-0 bg-primary text-white" style=" clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);">
<a href="#" style="color: #fff; font-size: 20pt;" class="font-weight-bold text-uppercase text-center">Character_Name</a>
</div>
<!--IMAGE-->
<div class="card card-outline-primary rounded-0 mb-n1" style="border-width: 5px; background: #303030 url(
https://dummyimage.com/250/ffffff/000000
) center; background-repeat: no-repeat; background-size: cover; height: 250px; max-width: 250px;">
</div>
<!--IMAGE-->
<i class="fas fa-caret-down fa-4x text-primary mt-n4" style="z-index: 100; position:relative;"></i>
<div class="card card-outline-primary bg-faded mx-3 mt-n4 p-3 rounded-0 text-left overflow-auto" style="border-width: 3px; max-height:350px;">
<h1 class="text-center text-primary mb-3">
[relationship]
</h1>
<h1 class="text-center text-primary mb-2">
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fas fa-bug"></i>
<i class="fal fa-bug"></i>
</h1>
<p>Describe the relationship here; this box scrolls. 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>
<!--END OF CHARA-->
<!--PASTE MORE ABOVE HERE
END OF RELATIONSHIPS-->
</div>
</div>
</div>
<!--CREDITS - DO NOT TOUCH UNLESS PROPERLY CREDITING DIFFERENT RESOURCES-->
<div class="col-md-2 card bg-primary border-0 p-1 my-3" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); letter-spacing: 3px;">
<a href="https://toyhou.se/BigGayFish" class="font-weight-bold text-center text-uppercase" style="text-shadow: 0 0 10px #fff; color: #fff;"><i class="fas fa-star-sharp"></i>BigGayFish</a>
</div>
<div class="col-md-2 card bg-primary border-0 p-1 my-3" style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); letter-spacing: 3px;">
<a href="https://toyhou.se/6259293.-f2u-transparent-patterns" class="font-weight-bold text-center text-uppercase" style="text-shadow: 0 0 10px #fff; color: #fff;">BG Img</a>
</div>
</div>
</div>This code is password protected.
This code is password protected.
This code is password protected.
This code is password protected.
This code is password protected.
This code is password protected.