[F2U] Resident Evil Profile
created by:BigGayFish
Custom ColorsHTMLCharacter
Copy
<!--WELCOME TO THE RESIDENT EVIL 2/3 REMAKE FAN CODE! This is highly customizable, but also as a result, it might not be beginner friendly. Please refer to the index to hop around and figure things out. If you wish to make this custom colors, you'll have to manually add in style="background-color:#hexcode; color:#hexcode" into the places you wanna change the colors (like the buttons for example; if you do remember to delete bg-dark and text-light from the class section or it wont work).
INDEX:
CONTAINER BACKGROUND - This changes the background image to the entire code. I defaulted it to a screenshot of Raccoon City from RE2R, but if you want a different RE game
screenshot or background in general, you can put it in here. This is NOT for a patterened background, this is for a wallpaper style background. It will
change size in order to fit the container, but you want something relatively rectangular.
CHARACTER IMAGE - Your character's center focal image. It's sized accordingly to the box; as long as it's taller than it's wide (aka relatively rectangular), it'll look good.
I super suggest using a transparent image, it really makes it look nice.
CONDITION BOX - I defaulted to using the Virus condition box because I made this code with a friend and I's OCs in mind, but you can find the other condition boxes in this link here: https://residentevil.fandom.com/wiki/Health (This is already credited in the code btw, no need to worry about that.)
BUMPER BUTTONS - The buttons that turn the main info boxes around. I suggest NOT messing with these unless you know what you're doing or you're trying to change the colors.
Mostly because I barely understand how they work. (No like seriously, they took me an hour to figure out. Don't mess with them.)
LB BUTTON / RB BUTTON - The respective buttons in the bumper button section
INFO BOX - The actual different boxes of information you carasoul through.
DOSSIER - Contains the following elements: QUICK INFO (information like name age gender sexuality theme etc), PERSONALITY, BIOLOGY/MUTATION (in case your character isn't
human), SKILLS/ABILITIES, and TRIVIA.
BIOGRAPHY - Your character's history/story.
INVENTORY - Your character's inventory. Be careful there, as it may trip people up to add more items. You need to change the item number in all 3 places per item, otherwise
it'll register as open when you click on an item with the same item ID.
RELATIONSHIP - Contains RELATIONSHIP ROW ONE and RELATIONSHIP ROW TWO; theyre labelled under seperate GROUP NAME in case your character has enemies, allies, different groups
of people they work for, etc etc.
WEAPON BUTTONS - Contains WEAPON ONE, WEAPON TWO, WEAPON THREE, and WEAPON FOUR. This emulates the equip section of the game's UI, so they have info for actual weapons, but
you can change this to have completely different information. Whatever your lil heart desires can go into those dang lil buttons. By default the images are
knives, but seriously, change them to be whatever.
CREDIT - Normally I don't put this in the index, but there's a section to credit your images there. ONLY edit that and nothing else. If you're frankensteining this code,
please put the other coder(s) credits there.
-->
<!--CONTAINER BACKGROUND; ONLY CHANGE THE BACKGROUND-IMAGE URL OR ELSE THINGS WILL BREAK-->
<div class="container-fluid text-light" style="font-size: 13pt; background-image:url('https://i.pinimg.com/originals/ef/3f/f8/ef3ff80ce31455ba554bc40cf0b9994b.jpg'); background-size: cover; background-position: center;">
<div class="row align-items-center justify-content-center pt-2">
<div class="col-sm-4">
<!--CHARACTER IMAGE-->
<div class="card bg-transparent border-0" style="height: 500px;">
<div class="card bg-transparent border-0 h-100" style="position:absolute; top:0; left:0; right:0; bottom:0; z-index:1; background-size:contain; background-position: center; background-repeat: no-repeat; background-image:url('https://static.wikia.nocookie.net/residentevil/images/8/8b/Jill_Full_RE3make.png');"></div>
</div>
<!--END OF CHARACTER IMAGE-->
<!--CONDITION BOX-->
<div class="card border-0 rounded-0 p-1 w-75" style="height:200px; overflow:auto; position:absolute; top:80; left:0; right:0; bottom:0; z-index:2; background-image:url('https://static.wikia.nocookie.net/residentevil/images/c/cf/RE3_Virus.gif'); background-size: cover; background-position: center;">
<div class="card-text p-1"><br>
<h2 class="mt-5 ml-5">Name / Age / Gender</h2>
<h4 class="ml-5">Occupation/Position</h4>
<h4 class="ml-5">Health: ##/## (Condition)</h4>
</div>
</div>
<!--END OF CONDITION BOX-->
</div>
<div class="col-md-5">
<!--BUMPER BUTTONS-->
<div class="row no-gutters w-100">
<!--LB BUTTON-->
<div class="col-sm-3 p-2">
<div class="card d-flex flex-row justify-content-center align-items-center bg-dark text-light w-100" style="height:50px; border:2px solid;">
<p style="font-size:30px;">LB</p>
<!--TOGGLE-->
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top:0; left:0; right:0; bottom:0;" data-slide="prev" href="#BIO-INFO"></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="card d-flex flex-row justify-content-center align-items-center bg-dark text-light w-100" style="height:50px; border:2px solid;">
<p style="font-size:30px;">RB</p>
<!--TOGGLE-->
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top:0; left:0; right:0; bottom:0;" data-slide="next" href="#BIO-INFO"></a>
</div>
</div>
<!--RB BUTTON END-->
</div>
<!--BUMPER BUTTONS END-->
<!--INFO BOX-->
<div class="card border-0 rounded-0 bg-transparent">
<div id="BIO-INFO" class="carousel slide" data-ride="false" data-pause="true">
<div class="carousel-inner">
<!--DOSSIER-->
<div class="carousel-item active">
<h1 class="text-uppercase text-center">Dossier</h1>
<div class="card-body p-3" style="background-color:rgba(0,0,0,0.8); height:450px; overflow:auto;">
<!--QUICK INFO-->
<div class="card-deck">
<div class="card bg-transparent m-2" style="padding: 5px; border: 1px solid;">
<div class="card-text m-1 tooltipster" title="Alias" data-placement="top"> <i class="fas fa-id-card"></i> Alias</div>
</div>
<div class="card bg-transparent m-2" style="padding: 5px; border: 1px solid;">
<div class="card-text m-1 tooltipster" title="Pronouns" data-placement="top"> <i class="fas fa-venus-mars"></i> Pro/nouns</div>
</div>
</div>
<div class="card-deck">
<div class="card bg-transparent m-2" style="padding: 5px; border: 1px solid;">
<div class="card-text m-1 tooltipster" title="Birthday" data-placement="top"> <i class="fa-solid fa-cake-candles"></i> Birthday</div>
</div>
<div class="card bg-transparent m-2" style="padding: 5px; border: 1px solid;">
<div class="card-text m-1 tooltipster" title="Age" data-placement="top"> <i class="fas fa-calendar-alt"></i> Age</div>
</div>
</div>
<div class="card-deck">
<div class="card bg-transparent m-2" style="padding: 5px; border: 1px solid;">
<div class="card-text m-1 tooltipster" title="Zodiac" data-placement="top"> <i class="fa-solid fa-scale-balanced"></i> Zodiac</div>
</div>
<div class="card bg-transparent m-2" style="padding: 5px; border: 1px solid;">
<div class="card-text m-1 tooltipster" title="Tarot" data-placement="top"> <i class="fas fa-cards-blank"></i> Tarot</div>
</div>
</div>
<div class="card-deck">
<div class="card bg-transparent m-2" style="padding: 5px; border: 1px solid;">
<div class="card-text m-1 tooltipster" title="Race/Species" data-placement="top"> <i class="fas fa-globe"></i> Race/Species</div>
</div>
<div class="card bg-transparent m-2" style="padding: 5px; border: 1px solid;">
<div class="card-text m-1 tooltipster" title="Nationality" data-placement="top"> <i class="fas fa-location-dot"></i> Nationality</div>
</div>
</div>
<div class="card-deck">
<div class="card bg-transparent m-2" style="padding: 5px; border: 1px solid;">
<div class="card-text m-1 tooltipster" title="Height" data-placement="top"> <i class="fas fa-ruler"></i> Height</div>
</div>
<div class="card bg-transparent m-2" style="padding: 5px; border: 1px solid;">
<div class="card-text m-1 tooltipster" title="Weight" data-placement="top"> <i class="fas fa-weight-scale"></i> Weight</div>
</div>
</div>
<div class="card-deck">
<div class="card bg-transparent m-2" style="padding: 5px; border: 1px solid;">
<div class="card-text m-1 tooltipster" title="Blood Type" data-placement="top"> <i class="fas fa-droplet"></i> Blood Type</div>
</div>
<div class="card bg-transparent m-2" style="padding: 5px; border: 1px solid;">
<div class="card-text m-1 tooltipster" title="Temperment" data-placement="top"> <i class="fas fa-face-smile"></i> Temperment</div>
</div>
</div>
<div class="card-deck">
<div class="card bg-transparent m-2" style="padding: 5px; border: 1px solid;">
<div class="card-text m-1 tooltipster" title="Sexuality" data-placement="top"> <i class="fas fa-heartbeat"></i> Sexuality</div>
</div>
<div class="card bg-transparent m-2" style="padding: 5px; border: 1px solid;">
<div class="card-text font-weight-bold m-1"> <a href="LINK_HERE"> <i class="fas fa-play"></i> theme</a></div>
</div>
</div>
<!--END OF QUICK INFO-->
<!--PERSONALITY-->
<h1 class="text-uppercase text-center mt-2">Personality</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>
<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>
<!--END OF PERSONALITY-->
<!--BIOLOGY/MUTATION-->
<h1 class="text-uppercase text-center">Biology/Mutation</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>
<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>
<!--END OF BIOLOGY/MUTATION-->
<!--SKILLS/ABILITIES-->
<h1 class="text-uppercase text-center">Skills and Abilities</h1>
<p>Description/summary of your character skills and abilities. 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.</p>
<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>
<!--END OF SKILLS/ABILITIES-->
<!--TRIVIA-->
<h1 class="text-uppercase text-center mt-2">Trivia</h1>
<ul>
<li>info</li>
<li>info</li>
<li>info</li>
</ul>
<div class="row d-flex justify-content-center">
<div class="col-md-6">
<h1 class="text-uppercase text-center mt-2">Likes</h1>
<ul>
<li>info</li>
<li>info</li>
<li>info</li>
</ul>
</div>
<div class="col-md-6">
<h1 class="text-uppercase text-center mt-2">Dislikes</h1>
<ul>
<li>info</li>
<li>info</li>
<li>info</li>
</ul>
</div>
</div>
<!--END OF TRIVIA-->
</div>
</div>
<!--END OF DOSSIER-->
<!--BIOGRAPHY-->
<div class="carousel-item">
<h1 class="text-uppercase text-center">Biography</h1>
<div class="card-body p-3" style="background-color:rgba(0,0,0,0.8); height:450px; overflow:auto;">
<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>
<h2 class="text-uppercase text-muted">Subtitle</h2>
<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>
<h2 class="text-uppercase text-muted">Subtitle</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p>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 BIOGRAPHY-->
<!--INVENTORY-->
<div class="carousel-item">
<h1 class="text-uppercase text-center">Inventory</h1>
<div class="card-body p-2" style="height:450px; overflow-y:auto;">
<!--INVENTORY ROW ONE
NOTE: To add more rows of inventory, you need to change the #item_number to a new number, otherwise, when you open one box, it'll open all items with that same item# id-->
<div class="row d-flex justify-content-center m-2">
<!--ITEM ONE-->
<div class="col">
<div class="card bg-dark text-light w-100" style="border:2px solid;">
<img src="https://static.wikia.nocookie.net/residentevil/images/4/46/Greenherb7.jpg">
<a class="btn btn-outline-secondary" data-toggle="collapse" href="#item1" style="opacity:.5; position:absolute; top:0; left:0; right:0; bottom:0;"></a>
</div>
<!--MODAL CONTENT-->
<div class="collapse w-100 h-100 fade p-3" id="item1" style="position:absolute; top:0; left:0; z-index:4;">
<!--div aligns content to center of screen-->
<div class="mt-5 justify-content-center">
<!--CARD CONTENT-->
<div class="card w-100 p-3" style="background-color:rgba(0,0,0,0.8); border:2px solid;">
<!--CLOSE BUTTON-->
<a data-toggle="collapse" href="#item1" style="position:absolute; top:10px; right:15px;">Close</a>
<h4 class="card-title text-center text-uppercase m-3">Green Herb</h4>
<center><h5 class="card-subtitle text-lowercase mb-2">[Healing] | [25% health]</h5></center>
<p>"Restores a quarter of one's health. Its efficiency is greatly increased when combined with another herb."</p>
</div> <!--card content end-->
</div> <!--div to align to center of screen end-->
</div> <!--modal content end-->
</div>
<!--END OF ITEM ONE-->
<!--ITEM 2-->
<div class="col">
<div class="card bg-dark text-light W-100" style="border:2px solid;">
<img src="https://static.wikia.nocookie.net/residentevil/images/e/e6/Boulderrun.jpg">
<a class="btn btn-outline-secondary" data-toggle="collapse" href="#item2" style="opacity:.5; position:absolute; top:0; left:0; right:0; bottom:0;"></a>
</div>
<!--MODAL CONTENT-->
<div class="collapse w-100 h-100 fade p-3" id="item2" style="position:absolute; top:0; left:0; z-index:5;">
<!--div aligns content to center of screen-->
<div class="mt-5 justify-content-center">
<!--CARD CONTENT-->
<div class="card w-100 p-3" style="background-color:rgba(0,0,0,0.8); border:2px solid;">
<!--CLOSE BUTTON-->
<a data-toggle="collapse" href="#item2" style="position:absolute; top:10px; right:15px;">Close</a>
<h4 class="card-title text-center text-uppercase m-3">Item_Name</h4>
<h5 class="card-subtitle text-center text-lowercase mb-2">[element] | [effect]</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
</div> <!--card content end-->
</div> <!--div to align to center of screen end-->
</div> <!--modal content end-->
</div>
<!--END OF ITEM 2-->
</div>
<!--END OF INVENTORY ROW ONE-->
<!--INVENTORY ROW TWO-->
<div class="row d-flex justify-content-center m-2">
<!--ITEM ONE-->
<div class="col">
<div class="card bg-dark text-light w-100" style="border:2px solid;">
<img src="https://static.wikia.nocookie.net/residentevil/images/4/46/Greenherb7.jpg">
<a class="btn btn-outline-secondary" data-toggle="collapse" href="#item3" style="opacity:.5; position:absolute; top:0; left:0; right:0; bottom:0;"></a>
</div>
<!--MODAL CONTENT-->
<div class="collapse w-100 h-100 fade p-3" id="item3" style="position:absolute; top:0; left:0; z-index:6;">
<!--div aligns content to center of screen-->
<div class="mt-5 justify-content-center">
<!--CARD CONTENT-->
<div class="card w-100 p-3" style="background-color:rgba(0,0,0,0.8); border:2px solid;">
<!--CLOSE BUTTON-->
<a data-toggle="collapse" href="#item3" style="position:absolute; top:10px; right:15px;">Close</a>
<h4 class="card-title text-center text-uppercase m-3">Green Herb</h4>
<center><h5 class="card-subtitle text-lowercase mb-2">[Healing] | [25% health]</h5></center>
<p>"Restores a quarter of one's health. Its efficiency is greatly increased when combined with another herb."</p>
</div> <!--card content end-->
</div> <!--div to align to center of screen end-->
</div> <!--modal content end-->
</div>
<!--END OF ITEM ONE-->
<!--ITEM 2-->
<div class="col">
<div class="card bg-dark text-light W-100" style="border:2px solid;">
<img src="https://static.wikia.nocookie.net/residentevil/images/e/e6/Boulderrun.jpg">
<a class="btn btn-outline-secondary" data-toggle="collapse" href="#item4" style="opacity:.5; position:absolute; top:0; left:0; right:0; bottom:0;"></a>
</div>
<!--MODAL CONTENT-->
<div class="collapse w-100 h-100 fade p-3" id="item4" style="position:absolute; top:0; left:0; z-index:7;">
<!--div aligns content to center of screen-->
<div class="mt-5 justify-content-center">
<!--CARD CONTENT-->
<div class="card w-100 p-3" style="background-color:rgba(0,0,0,0.8); border:2px solid;">
<!--CLOSE BUTTON-->
<a data-toggle="collapse" href="#item4" style="position:absolute; top:10px; right:15px;">Close</a>
<h4 class="card-title text-center text-uppercase m-3">Item_Name</h4>
<h5 class="card-subtitle text-center text-lowercase mb-2">[element] | [effect]</h5>
<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> <!--card content end-->
</div> <!--div to align to center of screen end-->
</div> <!--modal content end-->
</div>
<!--END OF ITEM 2-->
</div>
<!--END OF INVENTORY ROW TWO (ADD MORE ROWS BELOW)-->
</div>
</div>
<!--INVENTORY-->
<!--RELATIONSHIP-->
<div class="carousel-item">
<h1 class="text-uppercase text-center">Relationships</h1>
<div class="card-body p-2" style="height:450px; overflow:auto;">
<!--RELATIONSHIP ROW ONE-->
<!--GROUP NAME-->
<h1 class="text-center mt-4">Relationship Type Name</h1>
<!--END OF GROUP NAME-->
<div class="card-deck">
<!--CHARACTER-->
<div class="card border-0 m-3 p-1" style="background-color: rgba(0,0,0,0.8);">
<a href="URL_HERE"><img src="https://static.wikia.nocookie.net/residentevil/images/1/16/Chris_%28Edonia_Outfit%29_in_Clan_Master.png" class="rounded mx-auto d-block m-2" style="max-height: 250px;"></a>
<h4 class="card-subtitle text-center m-1">Name</h4>
<h6 class="card-subtitle text-center m-1">[relationship]</h6>
<!--FEELINGS STATS-->
<h6 class="card-title ml-2">Trust</h6>
<div class="progress ml-2 mr-2 mb-2" style="height: 10px;">
<div class="progress-bar" role="progressbar" style="height: 10px; width: 20%; padding: 3px;"> </div>
</div>
<h6 class="card-title ml-2">Respect</h6>
<div class="progress ml-2 mr-2 mb-2" style="height: 10px;">
<div class="progress-bar" role="progressbar" style="height: 10px; width: 40%;padding: 3px;"> </div>
</div>
<h6 class="card-title ml-2">Camaraderie</h6>
<div class="progress ml-2 mr-2 mb-2" style="height: 10px;">
<div class="progress-bar" role="progressbar" style="height: 10px; width: 60%;padding: 3px;"> </div>
</div>
<h6 class="card-title ml-2">Lethality</h6>
<div class="progress ml-2 mr-2 mb-2" style="height: 10px;">
<div class="progress-bar" role="progressbar" style="height: 10px; width: 80%;padding: 3px;"> </div>
</div>
<!--END OF FEELINGS STATS-->
<!--INFO-->
<div class="card-text m-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut accumsan odio. Ut eu turpis ac mauris pellentesque vulputate. Etiam eu dui vehicula leo sollicitudin ultrices. Suspendisse id libero maximus, iaculis urna at, scelerisque turpis. Duis non diam augue. Ut vestibulum urna mattis elit maximus rhoncus. </p>
</div>
<!--END OF INFO-->
</div>
<!--END OF CHARACTER-->
<!--CHARACTER-->
<div class="card border-0 m-3 p-1" style="background-color: rgba(0,0,0,0.8);">
<a href="URL_HERE"><img src="https://static.wikia.nocookie.net/residentevil/images/1/16/Chris_%28Edonia_Outfit%29_in_Clan_Master.png" class="rounded mx-auto d-block m-2" style="max-height: 250px;"></a>
<h4 class="card-subtitle text-center m-1">Name</h4>
<h6 class="card-subtitle text-center m-1">[relationship]</h6>
<!--FEELINGS STATS-->
<h6 class="card-title ml-2">Trust</h6>
<div class="progress ml-2 mr-2 mb-2" style="height: 10px;">
<div class="progress-bar" role="progressbar" style="height: 10px; width: 20%; padding: 3px;"> </div>
</div>
<h6 class="card-title ml-2">Respect</h6>
<div class="progress ml-2 mr-2 mb-2" style="height: 10px;">
<div class="progress-bar" role="progressbar" style="height: 10px; width: 40%;padding: 3px;"> </div>
</div>
<h6 class="card-title ml-2">Camaraderie</h6>
<div class="progress ml-2 mr-2 mb-2" style="height: 10px;">
<div class="progress-bar" role="progressbar" style="height: 10px; width: 60%;padding: 3px;"> </div>
</div>
<h6 class="card-title ml-2">Lethality</h6>
<div class="progress ml-2 mr-2 mb-2" style="height: 10px;">
<div class="progress-bar" role="progressbar" style="height: 10px; width: 80%;padding: 3px;"> </div>
</div>
<!--END OF FEELINGS STATS-->
<!--INFO-->
<div class="card-text m-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut accumsan odio. Ut eu turpis ac mauris pellentesque vulputate. Etiam eu dui vehicula leo sollicitudin ultrices. Suspendisse id libero maximus, iaculis urna at, scelerisque turpis. Duis non diam augue. Ut vestibulum urna mattis elit maximus rhoncus. </p>
</div>
<!--END OF INFO-->
</div>
<!--END OF CHARACTER-->
</div>
<!--END OF RELATIONSHIP ROW ONE-->
<!--RELATIONSHIP ROW TWO-->
<!--GROUP NAME-->
<h1 class="text-center mt-4">Relationship Type Name</h1>
<!--END OF GROUP NAME-->
<div class="card-deck">
<!--CHARACTER-->
<div class="card border-0 m-3 p-1" style="background-color: rgba(0,0,0,0.8);">
<a href="URL_HERE"><img src="https://static.wikia.nocookie.net/residentevil/images/1/16/Chris_%28Edonia_Outfit%29_in_Clan_Master.png" class="rounded mx-auto d-block m-2" style="max-height: 250px;"></a>
<h4 class="card-subtitle text-center m-1">Name</h4>
<h6 class="card-subtitle text-center m-1">[relationship]</h6>
<!--FEELINGS STATS-->
<h6 class="card-title ml-2">Trust</h6>
<div class="progress ml-2 mr-2 mb-2" style="height: 10px;">
<div class="progress-bar" role="progressbar" style="height: 10px; width: 20%; padding: 3px;"> </div>
</div>
<h6 class="card-title ml-2">Respect</h6>
<div class="progress ml-2 mr-2 mb-2" style="height: 10px;">
<div class="progress-bar" role="progressbar" style="height: 10px; width: 40%;padding: 3px;"> </div>
</div>
<h6 class="card-title ml-2">Camaraderie</h6>
<div class="progress ml-2 mr-2 mb-2" style="height: 10px;">
<div class="progress-bar" role="progressbar" style="height: 10px; width: 60%;padding: 3px;"> </div>
</div>
<h6 class="card-title ml-2">Lethality</h6>
<div class="progress ml-2 mr-2 mb-2" style="height: 10px;">
<div class="progress-bar" role="progressbar" style="height: 10px; width: 80%;padding: 3px;"> </div>
</div>
<!--END OF FEELINGS STATS-->
<!--INFO-->I
<div class="card-text m-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut accumsan odio. Ut eu turpis ac mauris pellentesque vulputate. Etiam eu dui vehicula leo sollicitudin ultrices. Suspendisse id libero maximus, iaculis urna at, scelerisque turpis. Duis non diam augue. Ut vestibulum urna mattis elit maximus rhoncus. </p>
</div>
<!--END OF INFO-->
</div>
<!--END OF CHARACTER-->
<!--CHARACTER-->
<div class="card border-0 m-3 p-1" style="background-color: rgba(0,0,0,0.8);">
<a href="URL_HERE"><img src="https://static.wikia.nocookie.net/residentevil/images/1/16/Chris_%28Edonia_Outfit%29_in_Clan_Master.png" class="rounded mx-auto d-block m-2" style="max-height: 250px;"></a>
<h4 class="card-subtitle text-center m-1">Name</h4>
<h6 class="card-subtitle text-center m-1">[relationship]</h6>
<!--FEELINGS STATS-->
<h6 class="card-title ml-2">Trust</h6>
<div class="progress ml-2 mr-2 mb-2" style="height: 10px;">
<div class="progress-bar" role="progressbar" style="height: 10px; width: 20%; padding: 3px;"> </div>
</div>
<h6 class="card-title ml-2">Respect</h6>
<div class="progress ml-2 mr-2 mb-2" style="height: 10px;">
<div class="progress-bar" role="progressbar" style="height: 10px; width: 40%;padding: 3px;"> </div>
</div>
<h6 class="card-title ml-2">Camaraderie</h6>
<div class="progress ml-2 mr-2 mb-2" style="height: 10px;">
<div class="progress-bar" role="progressbar" style="height: 10px; width: 60%;padding: 3px;"> </div>
</div>
<h6 class="card-title ml-2">Lethality</h6>
<div class="progress ml-2 mr-2 mb-2" style="height: 10px;">
<div class="progress-bar" role="progressbar" style="height: 10px; width: 80%;padding: 3px;"> </div>
</div>
<!--END OF FEELINGS STATS-->
<!--INFO-->
<div class="card-text m-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut accumsan odio. Ut eu turpis ac mauris pellentesque vulputate. Etiam eu dui vehicula leo sollicitudin ultrices. Suspendisse id libero maximus, iaculis urna at, scelerisque turpis. Duis non diam augue. Ut vestibulum urna mattis elit maximus rhoncus. </p>
</div>
<!--END OF INFO-->
</div>
<!--END OF CHARACTER-->
</div>
<!--END OF RELATIONSHIP ROW TWO (ADD MORE BELOW)-->
</div>
</div>
<!--END OF RELATIONSHIP-->
</div>
</div>
</div>
<!--END OF INFO BOX-->
</div>
<!--WEAPON BUTTONS-->
<div class="col-sm-3">
<!--WEAPON ONE-->
<center>
<div class="card bg-dark text-light w-50" style="border:2px solid;">
<img src="https://static.wikia.nocookie.net/residentevil/images/c/c6/Knife.JPG">
<a class="btn btn-outline-secondary" data-toggle="collapse" href="#weapon1" style="opacity:.5; position:absolute; top:0; left:0; right:0; bottom:0;"></a>
</div>
<!--MODAL CONTENT-->
<div class="collapse w-100 h-100 fade p-3" id="weapon1" style="position:absolute; top:0; left:0; z-index:7;">
<!--div aligns content to center of screen-->
<div class="mt-5 justify-content-center">
<!--CARD CONTENT-->
<div class="card w-100 p-3" style="background-color:rgba(0,0,0,0.8); border:2px solid;">
<!--CLOSE BUTTON-->
<a data-toggle="collapse" href="#weapon1" style="position:absolute; top:10px; right:15px;">Close</a>
<h4 class="card-title text-center text-uppercase m-3">Combat Knife</h4>
<h5 class="card-subtitle text-center text-lowercase mb-2">power: 180</h5>
<p>A knife designed for self-defense.</p>
</div> <!--card content end-->
</div> <!--div to align to center of screen end-->
</div> <!--modal content end-->
</center>
<!--END OF WEAPON ONE-->
<div class="row justify-content-center my-2">
<!--WEAPON TWO-->
<div class="col-md-6">
<div class="card bg-dark text-light" style="border:2px solid;">
<img src="https://static.wikia.nocookie.net/residentevil/images/c/c6/Knife.JPG">
<a class="btn btn-outline-secondary" data-toggle="collapse" href="#weapon2" style="opacity:.5; position:absolute; top:0; left:0; right:0; bottom:0;"></a>
</div>
<!--MODAL CONTENT-->
<div class="collapse w-100 h-100 fade p-3" id="weapon2" style="position:absolute; top:0; left:0; z-index:7;">
<!--div aligns content to center of screen-->
<div class="mt-5 justify-content-center">
<!--CARD CONTENT-->
<div class="card w-100 p-3" style="background-color:rgba(0,0,0,0.8); border:2px solid;">
<!--CLOSE BUTTON-->
<a data-toggle="collapse" href="#weapon2" style="position:absolute; top:10px; right:15px;">Close</a>
<h4 class="card-title text-center text-uppercase m-3">Weapon</h4>
<h5 class="card-subtitle text-center text-lowercase mb-2">power: 180</h5>
<p>A knife designed for self-defense.</p>
</div> <!--card content end-->
</div> <!--div to align to center of screen end-->
</div> <!--modal content end-->
</div>
<!--END OF WEAPON TWO-->
<!--WEAPON THREE-->
<div class="col-md-6">
<div class="card bg-dark text-light" style="border:2px solid;">
<img src="https://static.wikia.nocookie.net/residentevil/images/c/c6/Knife.JPG">
<a class="btn btn-outline-secondary" data-toggle="collapse" href="#weapon3" style="opacity:.5; position:absolute; top:0; left:0; right:0; bottom:0;"></a>
</div>
<!--MODAL CONTENT-->
<div class="collapse w-100 h-100 fade p-3" id="weapon3" style="position:absolute; top:0; left:0; z-index:8;">
<!--div aligns content to center of screen-->
<div class="mt-5 justify-content-center">
<!--CARD CONTENT-->
<div class="card w-100 p-3" style="background-color:rgba(0,0,0,0.8); border:2px solid;">
<!--CLOSE BUTTON-->
<a data-toggle="collapse" href="#weapon3" style="position:absolute; top:10px; right:15px;">Close</a>
<h4 class="card-title text-center text-uppercase m-3">Weapon_Name</h4>
<h5 class="card-subtitle text-center text-lowercase mb-2">power: 180</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div> <!--card content end-->
</div> <!--div to align to center of screen end-->
</div> <!--modal content end-->
</div>
<!--END OF WEAPON THREE-->
</div>
<!--WEAPON FOUR-->
<center>
<div class="card bg-dark text-light w-50" style="border:2px solid;">
<img src="https://static.wikia.nocookie.net/residentevil/images/c/c6/Knife.JPG">
<a class="btn btn-outline-secondary" data-toggle="collapse" href="#weapon4" style="opacity:.5; position:absolute; top:0; left:0; right:0; bottom:0;"></a>
</div>
<!--MODAL CONTENT-->
<div class="collapse w-100 h-100 fade p-3" id="weapon4" style="position:absolute; top:0; left:0; z-index:9;">
<!--div aligns content to center of screen-->
<div class="mt-5 justify-content-center">
<!--CARD CONTENT-->
<div class="card w-100 p-3" style="background-color:rgba(0,0,0,0.8); border:2px solid;">
<!--CLOSE BUTTON-->
<a data-toggle="collapse" href="#weapon4" style="position:absolute; top:0px; right:15px;">Close</a>
<h4 class="card-title text-center text-uppercase m-3">Weapon_Name</h4>
<h5 class="card-subtitle text-center text-lowercase mb-2">power: 180</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div> <!--card content end-->
</div> <!--div to align to center of screen end-->
</div> <!--modal content end-->
</center>
<!--END OF WEAPON FOUR-->
</div>
<!--END OF WEAPON BUTTONS-->
<!--CREDITS, DO NOT TOUCH
ONLY CHANGE IMG CREDIT (FOR BG/MAIN IMG)-->
<div class="col-lg-12 p-0 order-lg-last">
<div class="card border-0 rounded-0" style="background-color: rgba(0,0,0,0.5);">
<div class="row">
<div class="col-lg-8">
</div>
<div class="col-md-4">
<div class="card-text border-0 bg-transparent p-1 m-3">
<a class="tooltipster" title="Code Credit - BigGayFish" data-placement="top" href="https://toyhou.se/BigGayFish"><i class="fa-solid fa-circle-x"></i> Move</a>
<a class="tooltipster" title="IMG Credit" data-placement="top" href="#"><i class="fa-solid fa-circle-a"></i> Confirm </a>
<a class="tooltipster" title="Condition Box Credit" data-placement="top" href="https://residentevil.fandom.com/wiki/Health"><i class="fa-solid fa-circle-b"></i> Close</a>
<a class="tooltipster" title="Code Snippet - Aurorean" data-placement="top" href="https://toyhou.se/7111301.-r-snippet-pop-up"><i class="fa-solid fa-scissors"></i></a>
</div>
</div>
</div>
</div>
</div>
<!--END OF CREDITS-->
</div>
</div>