[F2U] Get Oozed Idiot TMNT Profile
created by:BigGayFish
Custom ColorsHTMLCharacter
Copy
<!--GET OOZED BAKA - A TMNT Code
So as you can see I've made a TMNT code, and while it's not necessarily a beefy or "extensive" code, there's a lot of technical coding in here so be careful. This is custom colors, but it's not really meant for color change but regardless, I'll add the color index just in case you know what you're doing and wanna tweak stuff.
COLOR INDEX: #FFF - TEXT
#75C158 - BACKGROUND AND HEADERS TEXT
rgba(243,240,20,0.75) aka #f3f014 - TEXT AND BOX GLOW
#C3DA3C - LINKS
#04B65D - BORDERS AND ACCENT
#000 aka rgba(000, 000, 000, .8) - BACKGROUND AND BOX BACKGROUNDS
STEEL CANISTERS: rgba(127,127,127,.75) aka #7f7f7f - METAL SHADING
#C3C3C3 - METAL SHINE
OOZE: #75C158 aka rgba(117,193,88,0.75) - MAIN OOZE COLOR (BG) AND OOZE SHADING
rgba(29,171,94,0.75) aka #04B65D - OOZE SHADING
rgba(243,240,20,0.75) aka #f3f014 - GLOW AND INTERNAL SHINE
OOZE CANISTER - The entire left side of the code, it's the giant ooze canister that you can chuck a quote and your character image.
TOP OF CANISTER - Contains the CANISTER TEXT so don't touch anything but that.
CANISTER TEXT - You may have to fiddle with it if you want a particularly long quote (either making the margin smaller and breaking ur quote up with <br> breaks), or you can delete the section entirely.
OOZE - The actual ooze section, don't touch unless you're tweaking colors otherwise, you wanna go straight to the image
CHARACTER IMAGE (ooze canister editions) - You can delete it if you want otherwise a tall image works best to make your character look like they're floating in the ooze canister.
BOTTOM OF CANISTER - Same as the top but there's no text, ignore this part unless you're tweaking colors.
DATA PAD - This is the actual container (badum ptss) that has all the profile information. The actual column div tag has the background colors n shadows if you're tweaking colors.
QUICK INFO - All the main content for your character, it's got everything you wanna quick jot things down.
LIKES / DISLIKES - Quick boxes to jot down a list + a middle image
CHARACTER IMAGE (data pad edition) - These are floating images in your code, if you delete them, you should resize the columns of the text boxes they're next to from lg-7 to lg-12
ABOUT - A large box to write an about/summary for your character, it does scroll after a certain size so go crazy if you want. It also has a TRIVIA section!
PERSONALITY - Same as above but for personality
DESIGN - Extra large box, contains DESIGN NOTES, different FORMS, as well as a CARASOUL for your images
ABILITIES - Extra large box for your character abilities. Since I made this section for ROTTMNT in mind, you can delete it if you want an iteration neutral code. Or change it so it's not mystic based but mutant based. It has a subsection for WEAPON IMAGE and WEAPON DESCRIPTION as well as POWER/ABILITY IMAGE and POWER/ABILITY DESCRIPTION. You can add more of those in a row if you've got multiple.
BIO - Character biography, it's an extra large box.
RELATIONSHIPS - By default there's three CHARACTER LINKS which are the actual character relationships, but you can add more as you need it. Unlike the other boxes, this one expands instead of scroll.
-->
<div class="container" style="font-size:13pt; color: #fff;">
<div class="row no-gutters">
<!--OOZE CANISTER-->
<div class="col-md-4 mb-2">
<!--TOP OF CANISTER-->
<div class="card border-0 text-center" style="clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%); height:100px; background-image:linear-gradient(to right, rgba(127,127,127,.75), rgba(127,127,127,.75), #C3C3C3, rgba(127,127,127,.75), rgba(127,127,127,.75)); text-shadow: 0 0 10px #000;">
<!--CANISTER TEXT-->
<h1 class="mt-4">
CHARACTER NAME
<br>(or quote)
</h1>
<!--END OF CANISTER TEXT-->
</div>
<!--TOP OF CANISTER-->
<!--OOZE DO NOT TOUCH-->
<center><div class="card w-75 rounded-0" style="z-index:1; position:relative; border-left: #fff 3px solid; border-right: #fff 3px solid; background-color: #75C158; box-shadow: 0 0 15px rgba(243,240,20,0.75); height:500px; background-image:linear-gradient(to right, rgba(29,171,94,0.75), rgba(117,193,88,0.75), rgba(243,240,20,.75),
rgba(117,193,88,0.75), rgba(29,171,94,0.75));">
</div></center>
<!--CHARACTER IMAGE-->
<div class="card bg-transparent border-0" style="z-index:2; position:absolute; top:10; left:0; right:0; bottom:0; height: 600px; background-image: url(
https://dummyimage.com/600/ffffff/000000
); background-size: contain; background-repeat: no-repeat; background-position: center;">
</div>
<!--END OF CHARACTER IMAGE-->
<!--END OF OOZE-->
<!--BOTTOM OF CANISTER-->
<div class="card border-0" style="clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);height:100px; background-image:linear-gradient(to right, rgba(127,127,127,.75), rgba(127,127,127,.75), #C3C3C3, rgba(127,127,127,.75), rgba(127,127,127,.75));">
</div>
<!--BOTTOM OF CANISTER-->
</div>
<!--END OOZE CANISTER-->
<!--DATA PAD-->
<div class="col-lg-8 p-1" style="box-shadow: 0 0 15px rgba(243,240,20,0.75); background-color: #75C158;">
<div class="card rounded-0 p-2" style="height: 700px; overflow-x: hidden; overflow-y: auto; background: rgba(000, 000, 000, .8) url(https://file.garden/ZVkTvzrahkhXWZYD/Image%20Hosting/unique%20name.png) center; background-size: contain;">
<h1 class="display-3 font-weight-bold text-center" style="text-shadow: 0 0 5px rgba(243,240,20,0.75);">Character Name</h1>
<div class="row p-2">
<!--QUICK INFO-->
<div class="col-md-6">
<div class="card bg-transparent mb-2 rounded-0" style="border: #04B65D 2px solid; ">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="background-color: #04B65D; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
<i class="fa-solid fa-id-card"></i> alias
</div>
<div class="col card justify-content-center pr-2" style="background: rgba(000, 000, 000, .8); text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-transparent mb-2 rounded-0" style="border: #04B65D 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="background-color: #04B65D; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
<i class="fa-solid fa-calendar-days"></i> age
</div>
<div class="col card justify-content-center pr-2" style="background: rgba(000, 000, 000, .8); text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-transparent mb-2 rounded-0" style="border: #04B65D 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="background-color: #04B65D; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
<i class="fa-solid fa-dna"></i> species
</div>
<div class="col card justify-content-center pr-2" style="background: rgba(000, 000, 000, .8); text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-transparent mb-2 rounded-0" style="border: #04B65D 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="background-color: #04B65D; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
<i class="fa-solid fa-venus-mars"></i> gender
</div>
<div class="col card justify-content-center pr-2" style="background: rgba(000, 000, 000, .8); text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-transparent mb-2 rounded-0" style="border: #04B65D 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="background-color: #04B65D; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
<i class="fa-solid fa-pen-to-square"></i> pronouns
</div>
<div class="col card justify-content-center pr-2" style="background: rgba(000, 000, 000, .8); text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
</div>
<div class="col-md-6 mb-3">
<div class="card bg-transparent mb-2 rounded-0" style="border: #04B65D 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="background-color: #04B65D; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
<i class="fa-solid fa-heartbeat"></i> orientation
</div>
<div class="col card justify-content-center pr-2" style="background: rgba(000, 000, 000, .8); text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-transparent mb-2 rounded-0" style="border: #04B65D 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="background-color: #04B65D; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
<i class="fa-solid fa-ruler"></i> height
</div>
<div class="col card justify-content-center pr-2" style="background: rgba(000, 000, 000, .8); text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-transparent mb-2 rounded-0" style="border: #04B65D 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="background-color: #04B65D; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
<i class="fa-solid fa-user-tie"></i> occupation
</div>
<div class="col card justify-content-center pr-2" style="background: rgba(000, 000, 000, .8); text-align: right; border: none; border-radius: 0px;"> content</div>
</div>
</div>
<div class="card bg-transparent mb-2 rounded-0" style="border: #04B65D 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="background-color: #04B65D; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
<i class="fa-solid fa-microphone"></i> voice claim
</div>
<div class="col card justify-content-center pr-2" style="background: rgba(000, 000, 000, .8); text-align: right; border: none; border-radius: 0px;"> <a href="#" style="color: #C3DA3C; text-shadow: 0 0 5px rgba(243,240,20,0.75); font-weight: bold;">content</a></div>
</div>
</div>
<div class="card bg-transparent mb-2 rounded-0" style="border: #04B65D 2px solid;">
<div class="row no-gutters">
<div class="col-auto align-items-center" style="background-color: #04B65D; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
<i class="fa-solid fa-play"></i> theme
</div>
<div class="col card justify-content-center pr-2" style="background: rgba(000, 000, 000, .8); text-align: right; border: none; border-radius: 0px;"> <a href="#" style="color: #C3DA3C; text-shadow: 0 0 5px rgba(243,240,20,0.75); font-weight: bold;">content</a></div>
</div>
</div>
</div>
<!--END OF QUICK INFO-->
<!--LIKES-->
<div class="col-md-4">
<div class="card rounded-0 p-2" style="border: #04B65D 2px solid; box-shadow: 0 0 5px rgba(243,240,20,0.75); background: rgba(000, 000, 000, .8);">
<h1 class="display-3 font-weight-bold text-center" style="color: #75C158;">Likes</h1>
<ul>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
<!--END OF LIKES-->
<!--CHARACTER IMAGE-->
<div class="col-md-4 mb-3">
<div class="card bg-transparent border-0" style="height: 200px; background-image: url(
https://dummyimage.com/200/ffffff/000000
); background-size: contain; background-repeat: no-repeat; background-position: center;">
</div>
</div>
<!--END OF CHARACTER IMAGE-->
<!--DISLIKES-->
<div class="col-md-4 mb-3">
<div class="card rounded-0 p-2" style="border: #04B65D 2px solid; box-shadow: 0 0 5px rgba(243,240,20,0.75); background: rgba(000, 000, 000, .8);">
<h1 class="display-3 font-weight-bold text-center" style="color: #75C158;">Dislikes</h1>
<ul>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
<!--END OF DISLIKES-->
<!--ABOUT-->
<div class="col-lg-7">
<div class="card rounded-0 p-3" style="height:350px; overflow-y: auto; border: #04B65D 2px solid; box-shadow: 0 0 5px rgba(243,240,20,0.75); background: rgba(000, 000, 000, .8);">
<h1 class="display-3 font-weight-bold text-center" style="color: #75C158;">About</h1>
<p>Write your character's about/summary here. This box expands. 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>
<h1 class="font-weight-bold text-center" style="color: #75C158;">Trivia</h1>
<ul>
<li>Write some trivia points here!</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
<!--END OF ABOUT-->
<!--CHARACTER IMAGE-->
<div class="col-md-5 mb-3">
<div class="card bg-transparent border-0" style="height: 350px; background-image: url(
https://dummyimage.com/350/ffffff/000000
); background-size: contain; background-repeat: no-repeat; background-position: center;">
</div>
</div>
<!--END OF CHARACTER IMAGE-->
<!--CHARACTER IMAGE-->
<div class="col-md-5">
<div class="card bg-transparent border-0" style="height: 350px; background-image: url(
https://dummyimage.com/350/ffffff/000000
); background-size: contain; background-repeat: no-repeat; background-position: center;">
</div>
</div>
<!--END OF CHARACTER IMAGE-->
<!--PERSONALITY-->
<div class="col-lg-7 mb-3">
<div class="card rounded-0 p-3" style="height:350px; overflow-y: auto; border: #04B65D 2px solid; box-shadow: 0 0 5px rgba(243,240,20,0.75); background: rgba(000, 000, 000, .8);">
<h1 class="display-3 font-weight-bold text-center" style="color: #75C158;">Personality</h1>
<p>Write your character's personality here. This box expands. 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-->
<!--DESIGN-->
<div class="col-lg-12 mb-3">
<div class="card rounded-0 p-3" style="border: #04B65D 2px solid; box-shadow: 0 0 5px rgba(243,240,20,0.75); background: rgba(000, 000, 000, .8);">
<h1 class="display-3 font-weight-bold text-center" style="color: #75C158;">Design</h1>
<div class="row align-items-center">
<!--DESIGN NOTES-->
<div class="col-md-6" style="height:600px; overflow-y: auto;">
<h1 class="font-weight-bold text-center" style="color: #75C158;">Design Notes</h1>
<ul>
<li>Write some quick notes here!</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
<h1 class="font-weight-bold text-center" style="color: #75C158;">Form One</h1>
<p>You can expand on your notes here; either just basic description or form description. 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>
<h1 class="font-weight-bold text-center" style="color: #75C158;">Form Two</h1>
<p>You can expand on your notes here; either just basic description or form description. 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>
<!--END OF DESIGN NOTES-->
<!--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/600/ffffff/000000); background-size:cover; background-position:center;">
<!--IMG CREDIT-->
<a class="p-2 tooltipster" title="IMG CREDIT" href="#" style="color: #75C158; text-shadow: 0 0 5px rgba(243,240,20,0.75); opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<div class="carousel-caption d-none d-md-block">
<h5>Form/Outfit</h5>
</div>
</div>
<!--END OF IMG ONE-->
<!--IMG TWO-->
<div class="carousel-item">
<div style="min-height:600px; background-image:url(https://dummyimage.com/600/ffffff/000000); background-size:cover; background-position:center;">
<!--IMG CREDIT-->
<a class="p-2 tooltipster" title="IMG CREDIT" href="#" style="color: #75C158; text-shadow: 0 0 5px rgba(243,240,20,0.75); opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<div class="carousel-caption d-none d-md-block">
<h5>Form/Outfit</h5>
</div>
</div>
<!--END OF IMG TWO-->
<!--IMG THREE-->
<div class="carousel-item">
<div style="min-height:600px; background-image:url(https://dummyimage.com/600/ffffff/000000); background-size:cover; background-position:center;">
<!--IMG CREDIT-->
<a class="p-2 tooltipster" title="IMG CREDIT" href="#" style="color: #75C158; text-shadow: 0 0 5px rgba(243,240,20,0.75); opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<div class="carousel-caption d-none d-md-block">
<h5>Form/Outfit</h5>
</div>
</div>
<!--END OF IMG THREE-->
<!--INSERT MORE SLIDES ABOVE HERE-->
</div>
</div>
</div>
<!--BUMPER BUTTONS-->
<div class="row no-gutters w-100">
<!--LB BUTTON-->
<div class="col-sm-3 p-2">
<div class="col-md card m-1 text-center font-weight-bold p-1 rounded-0" style="background-color: #04B65D; box-shadow: 0 0 5px rgba(243,240,20,0.75); font-size:30px;"> <i class="fas fa-angle-left"></i>
<!--TOGGLE-->
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top:0; left:0; right:0; bottom:0;" data-slide="prev" href="#FORMS"></a>
</div>
</div>
<!--LB BUTTON END-->
<div class="col-lg-6 p-2">
</div>
<!--RB BUTTON-->
<div class="col-sm-3 p-2">
<div class="col-md card m-1 text-center font-weight-bold p-1 rounded-0" style="background-color: #04B65D; box-shadow: 0 0 5px rgba(243,240,20,0.75); font-size:30px;"> <i class="fas fa-angle-right"></i>
<!--TOGGLE-->
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top:0; left:0; right:0; bottom:0;" data-slide="next" href="#FORMS"></a>
</div>
</div>
<!--RB BUTTON END-->
</div>
<!--BUMPER BUTTONS END-->
<!--END OF CARASOUL-->
</div>
<!--END OF REF IMAGE-->
<!--PASTE MORE ABILITY IMGS/DESCRIPTION ABOVE HERE-->
</div>
</div>
</div>
<!--END OF DESIGN-->
<!--ABILITIES-->
<div class="col-lg-12 mb-3">
<div class="card rounded-0 p-3" style="height:400px; overflow-y: auto; overflow-x: hidden; border: #04B65D 2px solid; box-shadow: 0 0 5px rgba(243,240,20,0.75); background: rgba(000, 000, 000, .8);">
<h1 class="display-3 font-weight-bold text-center" style="color: #75C158;">Abilities</h1>
<div class="row align-items-center">
<!--WEAPON IMAGE-->
<div class="col-md-4 mt-n5">
<div style="height: 350px; background-image: url(
https://dummyimage.com/350/ffffff/000000
); background-size: contain; background-repeat: no-repeat; background-position: center;">
</div>
</div>
<!--END OF WEAPON IMAGE-->
<!--WEAPON DESCRIPTION-->
<div class="col-lg-8 mt-n5">
<h1 class="font-weight-bold text-center" style="color: #75C158;">Mystic Weapon</h1>
<p>Write about your characters weapon 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>
<!--END OF WEAPON DESCRIPTION-->
<!--POWER/ABILITY IMAGE-->
<div class="col-md-4 mt-n5">
<div style="height: 350px; background-image: url(
https://dummyimage.com/350/ffffff/000000
); background-size: contain; background-repeat: no-repeat; background-position: center;">
</div>
</div>
<!--END OF POWER/ABILITY IMAGE-->
<!--POWER/ABILITY DESCRIPTION-->
<div class="col-lg-8 mt-n5">
<h1 class="font-weight-bold text-center" style="color: #75C158;">Mystic Ability</h1>
<p>Write about your character's ability 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>
<!--END OF POWER/ABILITY DESCRIPTION-->
<!--PASTE MORE ABILITY IMGS/DESCRIPTION ABOVE HERE-->
</div>
</div>
</div>
<!--END OF ABILITIES-->
<!--BIO-->
<div class="col-lg-12 mb-3">
<div class="card rounded-0 p-3" style="height:350px; overflow-y: auto; border: #04B65D 2px solid; box-shadow: 0 0 5px rgba(243,240,20,0.75); background: rgba(000, 000, 000, .8);">
<h1 class="display-3 font-weight-bold text-center" style="color: #75C158;">Biography</h1>
<p>Write your character's story here. This box expands. 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>
<h1 style="color: #75C158;"><i class="fa-solid fa-turtle"></i> Subheader</h1>
<p>Pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. At varius vel pharetra vel turpis nunc eget lorem. Mauris ultrices eros in cursus turpis. Iaculis urna id volutpat lacus. Non consectetur a erat nam at lectus. Condimentum lacinia quis vel eros donec ac odio. Venenatis lectus magna fringilla urna porttitor rhoncus. Mattis nunc sed blandit libero volutpat. Lacus viverra vitae congue eu consequat. Mi bibendum neque egestas congue quisque egestas. Sit amet risus nullam eget felis eget nunc lobortis. Velit sed ullamcorper morbi tincidunt. Convallis tellus id interdum velit laoreet. Duis ultricies lacus sed turpis tincidunt id aliquet risus. Magna fermentum iaculis eu non diam. Vitae congue mauris rhoncus aenean vel elit scelerisque mauris pellentesque. Risus sed vulputate odio ut. Sodales ut eu sem integer. Semper viverra nam libero justo laoreet sit amet cursus sit.</p>
</div>
</div>
<!--END OF BIO-->
<!--RELATONSHIPS-->
<div class="col-lg-12 mb-3">
<div class="card rounded-0 p-2" style="border: #04B65D 2px solid; box-shadow: 0 0 5px rgba(243,240,20,0.75); background: rgba(000, 000, 000, .8);">
<h1 class="display-3 font-weight-bold text-center" style="color: #75C158;">Relationships</h1>
<!--CHARACTER LINK-->
<div class="row p-2 align-items-center">
<!--ICON-->
<div class="col-md-5 mb-2">
<div class="card rounded-0" style="border: #04B65D 2px solid; box-shadow: 0 0 5px rgba(243,240,20,0.75); min-height:250px; background-image:url(https://dummyimage.com/250/ffffff/000000); background-size:cover; background-position:center;">
</div>
</div>
<!--END OF ICON-->
<div class="col-lg mb-2">
<div class="card-body overflow-auto" style="max-height: 300px;">
<a href="#" class="font-weight-bold display-4" style="color: #C3DA3C; text-shadow: 0 0 5px rgba(243,240,20,0.75);">
Name
</a>
<div class="col-lg-12 mb-2" style="background-color: #04B65D; height:2px;"></div>
<h5 style="color: #75C158;">
Relationship <br class="d-lg-none mb-1">
<!--STATS
heart denotes love/family, skull denotes hatred/enemy, and user denotes neutrility/friend/ally. fas is filled and far is empty, change as you see fit. I suggest a total of 5 to fit.-->
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i></h5>
<!--END OF STATS-->
<!--DESCRIPTION-->
<p>Talk about the relationship here. This box scrolls if it gets too long. 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>
<!--END OF DESCRIPTION-->
</div>
</div>
</div>
<!--END OF CHARACTER LINK-->
<!--CHARACTER LINK-->
<div class="row p-2 align-items-center">
<!--ICON-->
<div class="col-md-5 mb-2">
<div class="card rounded-0" style="border: #04B65D 2px solid; box-shadow: 0 0 5px rgba(243,240,20,0.75); min-height:250px; background-image:url(https://dummyimage.com/250/ffffff/000000); background-size:cover; background-position:center;">
</div>
</div>
<!--END OF ICON-->
<div class="col-lg mb-2">
<div class="card-body overflow-auto" style="max-height: 300px;">
<a href="#" class="font-weight-bold display-4" style="color: #C3DA3C; text-shadow: 0 0 5px rgba(243,240,20,0.75);">
Name
</a>
<div class="col-lg-12 mb-2" style="background-color: #04B65D; height:2px;"></div>
<h5 style="color: #75C158;">
Relationship <br class="d-lg-none mb-1">
<!--STATS
heart denotes love/family, skull denotes hatred/enemy, and user denotes neutrility/friend/ally. fas is filled and far is empty, change as you see fit. I suggest a total of 5 to fit.-->
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i></h5>
<!--END OF STATS-->
<!--DESCRIPTION-->
<p>Talk about the relationship here. This box scrolls if it gets too long. 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>
<!--END OF DESCRIPTION-->
</div>
</div>
</div>
<!--END OF CHARACTER LINK-->
<!--CHARACTER LINK-->
<div class="row p-2 align-items-center">
<!--ICON-->
<div class="col-md-5 mb-2">
<div class="card rounded-0" style="border: #04B65D 2px solid; box-shadow: 0 0 5px rgba(243,240,20,0.75); min-height:250px; background-image:url(https://dummyimage.com/250/ffffff/000000); background-size:cover; background-position:center;">
</div>
</div>
<!--END OF ICON-->
<div class="col-lg mb-2">
<div class="card-body overflow-auto" style="max-height: 300px;">
<a href="#" class="font-weight-bold display-4" style="color: #C3DA3C; text-shadow: 0 0 5px rgba(243,240,20,0.75);">
Name
</a>
<div class="col-lg-12 mb-2" style="background-color: #04B65D; height:2px;"></div>
<h5 style="color: #75C158;">
Relationship <br class="d-lg-none mb-1">
<!--STATS
heart denotes love/family, skull denotes hatred/enemy, and user denotes neutrility/friend/ally. fas is filled and far is empty, change as you see fit. I suggest a total of 5 to fit.-->
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i></h5>
<!--END OF STATS-->
<!--DESCRIPTION-->
<p>Talk about the relationship here. This box scrolls if it gets too long. 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>
<!--END OF DESCRIPTION-->
</div>
</div>
</div>
<!--END OF CHARACTER LINK-->
<!--PASTE MORE CHARACTER LINKS ABOVE HERE-->
</div>
</div>
<!--END OF RELATONSHIPS-->
</div>
</div>
</div>
<!--END OF DATA PAD-->
</div>
<div class="card-text p-1 mt-3" style="background-color:#75C158; box-shadow: 0 0 5px rgba(243,240,20,0.75);">
<a href="https://toyhou.se/BigGayFish" style="color:#75C158; text-shadow: 0 0 5px rgba(243,240,20,0.75);" class="pull-right"><i class="fas fa-copyright"></i> BigGayFish</a>
</div>
</div>