[F2U] Pokemon Legends Arceus Profile
created by:BigGayFish
Custom ColorsHTMLCharacter
Copy
<!--POKEMON LEGENDS: ARCEUS GALAXY EXPDITION TEAM SURVEY CORPS PROFILE CARD
That's right baybee, I finally made a card style profile! And it's for PL:A no less! I've finally made this bad boy mobile friendl! Well mostly; the buttons "disappear" on mobile view, but they're still there, you're just basically clicking blindly. Anyways, let's get right into this.
INDEX:
CARD NAME - As the name suggests (lol), it's the name of the card, which you can change
what corps your character is from (or not, it's your life).
CHARACTER IMAGE - This is the main icon/image that stays on the card of your character.
QUICK INFO - Your OC's quick info like their name; age, likes/dislikes, etc
BIOGRAPHY/JOURNAL - You characters bio/history
PERSONALITY - Quick summary of your character's personality; can also be intermixed with an about.
TRAITS - A set of personality traits that's done in a stat bar style. Does involve math, sorry.
POKEMON - Your characters main pokemon team. There's room for a name and level but not much else.
RELATIONSHIP - Same as the poke-tab, it holds your character's relationship, but they're small with
just the name and their relationship, plus a link.
STAR RANK - Located in the bottom section, this is your character's rank in PL:A!
BLURB - This is the little blurb that says what lvl pokemon you can command. Can be changed into a quote or smth.
-->
<div class="container-fluid" style="min-height: 745px; max-width: 1277px; background: #F9F4D8 url('https://f2.toyhou.se/file/f2-toyhou-se/images/72459814_Fjj4sAun68MOYZP.png'); background-size: cover; color: #364E66; font-size: 14pt; border-radius: 4px;">
<div class="row d-flex justify-content-center">
<div class="col-sm-3 d-none d-sm-block mt-5">
<div class="card mt-5 ml-5" style="background-color: #D4D3BC;"></div>
</div>
<!--CARD NAME
This is labeled as the Survey corps for the Galaxy team, but if your character is
in a different corps, it should be easy to edit the name. Otherwise PLEASE don't
mess with this, it's VERY finicky.-->
<div class="col-md-6"><center>
<div class="card text-uppercase font-weight-bold text-center justify-content-center mt-5" style="height: 115px; max-width: 520px; background: url('https://f2.toyhou.se/file/f2-toyhou-se/images/72459797_sG1YSHCR3cIe4kY.png') center; color: #F9F4D8; border: transparent;">
<h1>GALAXY EXPEDITION TEAM</h1>
<h1>SURVEY CORPS</h1>
</div></center>
</div>
<div class="col-sm-3 d-none d-sm-block mt-5">
<div class="card mt-5 mr-5" style="background-color: #D4D3BC;"></div>
</div>
</div>
<div class="row d-flext justify-content-center mt-3 ml-5 mr-5">
<!--CHARACTER IMAGE-->
<div class="col-md-4 mb-4">
<img class="card-img" src="https://archives.bulbagarden.net/media/upload/0/0c/Akari_Select_1.png" style="border: white 15px solid; width: 350px;">
</div>
<!--END OF CHARACTER IMAGE-->
<div class="col-lg-8">
<div class="card bg-transparent overflow-auto" style="max-height: 300px;">
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="KLEAVOR" role="tabpanel" aria-labelledby="pills-KLEAVOR" >
<!--QUICK INFO-->
<div class="card-body">
<h1 class="card-title text-uppercase font-weight-bold mb-3">Name</h1>
<h3 class="card-subtitle mb-2">Pokedex: # Registered</h3>
<div class="card m-1" style="background-color: #D4D3BC;"></div>
<div class="row no-gutters">
<div class="col-md-6">
<div class="card bg-transparent">
<p><b>Age:</b> content
<br>
<b>Species:</b> content
<br>
<b>Gender:</b> content
<br>
<b>Pronouns:</b> content
<br>
<b>Height:</b> content
<br>
<b>Orientation:</b> content
</p>
</div>
</div>
<div class="col-md-6">
<div class="card bg-transparent">
<p><b>Likes:</b> content, content, content
<br>
<b>Dislikes:</b> content, content, content
<br>
<b>Current Location:</b> content
<br>
<b>Current Mood:</b> content
<br>
<b>Trivia:</b> content, content, content
</p>
</div>
</div>
</div>
</div>
<!--END OF QUICK INFO-->
</div>
<!--BIOGRAPHY/JOURNAL TAB-->
<div class="tab-pane fade" id="LILLIGANT" role="tabpanel" aria-labelledby="pills-LILLIGANT">
<div class="card-body">
<h1 class="card-title text-uppercase font-weight-bold mb-1">JOURNAL</h1>
<div class="card mb-1" style="background-color: #D4D3BC;"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h3 class="card-subtitle text-uppercase mb-2"><i class="fa-solid fa-bookmark"></i> Header</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Risus commodo viverra maecenas accumsan lacus. Orci nulla pellentesque dignissim enim sit amet venenatis urna cursus. Praesent elementum facilisis leo vel fringilla est ullamcorper eget nulla. Tellus in hac habitasse platea dictumst. Netus et malesuada fames ac turpis egestas. Ac auctor augue mauris augue neque. Habitasse platea dictumst vestibulum rhoncus est pellentesque. Vel risus commodo viverra maecenas accumsan lacus vel facilisis. Dolor magna eget est lorem ipsum dolor sit. Pretium nibh ipsum consequat nisl vel.</p>
<h3 class="card-subtitle text-uppercase mb-2"><i class="fa-solid fa-bookmark"></i> Header</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Risus commodo viverra maecenas accumsan lacus. Orci nulla pellentesque dignissim enim sit amet venenatis urna cursus. Praesent elementum facilisis leo vel fringilla est ullamcorper eget nulla. Tellus in hac habitasse platea dictumst. Netus et malesuada fames ac turpis egestas. Ac auctor augue mauris augue neque. Habitasse platea dictumst vestibulum rhoncus est pellentesque. Vel risus commodo viverra maecenas accumsan lacus vel facilisis. Dolor magna eget est lorem ipsum dolor sit. Pretium nibh ipsum consequat nisl vel.</p>
</div>
</div>
<!--END OF BIOGRAPHY/JOURNAL TAB-->
<!--PERSONALITY AND TRAITS TAB-->
<div class="tab-pane fade" id="ARCININE" role="tabpanel" aria-labelledby="pills-ARCININE">
<div class="card-body">
<h1 class="card-title text-uppercase font-weight-bold mb-1">Personality</h1>
<div class="card mb-1" style="background-color: #D4D3BC;"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Risus commodo viverra maecenas accumsan lacus. Orci nulla pellentesque dignissim enim sit amet venenatis urna cursus. Praesent elementum facilisis leo vel fringilla est ullamcorper eget nulla. Tellus in hac habitasse platea dictumst. Netus et malesuada fames ac turpis egestas. Ac auctor augue mauris augue neque. Habitasse platea dictumst vestibulum rhoncus est pellentesque. Vel risus commodo viverra maecenas accumsan lacus vel facilisis. Dolor magna eget est lorem ipsum dolor sit. Pretium nibh ipsum consequat nisl vel.</p>
<!--PERSONALITY TRAIT STAT BARS
These stats are up to 5, so you need to take
whatever # out of 5 to get your percentage.
Luckily fractions of 5 are easy to know but here
they are if you wanna do this quickly:
1/5 = 20%, 2/5 = 40%, 3/5 = 60%, 4/5 = 80%; and ofc 5/5 is 100%.-->
<h1 class="card-title text-uppercase font-weight-bold mt-1 mb-1">TRAITS</h1>
<div class="card mb-1" style="background-color: #D4D3BC;"></div>
<!--CHANGE STAT VALUE AT WIDTH-->
<h6 class="card-title ml-2 text-uppercase">Courage</h6>
<div class="progress ml-2 mr-2 mb-2" style="height: 15px; background-color: #D4D3BC;">
<div class="progress-bar" role="progressbar" style="height: 15px;
width: 40%;
background-color: #364E66;"></div>
</div>
<!--CHANGE STAT VALUE AT WIDTH-->
<h6 class="card-title ml-2 text-uppercase">Intelligence</h6>
<div class="progress ml-2 mr-2 mb-2" style="height: 15px; background-color: #D4D3BC;">
<div class="progress-bar" role="progressbar" style="height: 15px;
width: 40%;
background-color: #364E66;"></div>
</div>
<!--CHANGE STAT VALUE AT WIDTH-->
<h6 class="card-title ml-2 text-uppercase">Sociability</h6>
<div class="progress ml-2 mr-2 mb-2" style="height: 15px; background-color: #D4D3BC;">
<div class="progress-bar" role="progressbar" style="height: 15px;
width: 40%;
background-color: #364E66;"></div>
</div>
<!--CHANGE STAT VALUE AT WIDTH-->
<h6 class="card-title ml-2 text-uppercase">Perserverence</h6>
<div class="progress ml-2 mr-2 mb-2" style="height: 15px; background-color: #D4D3BC;">
<div class="progress-bar" role="progressbar" style="height: 15px;
width: 40%;
background-color: #364E66;"></div>
</div>
<!--CHANGE STAT VALUE AT WIDTH-->
<h6 class="card-title ml-2 text-uppercase">Optimism</h6>
<div class="progress ml-2 mr-2 mb-2" style="height: 15px; background-color: #D4D3BC;">
<div class="progress-bar" role="progressbar" style="height: 15px;
width: 40%;
background-color: #364E66;"></div>
</div>
<!--CHANGE STAT VALUE AT WIDTH-->
<h6 class="card-title ml-2 text-uppercase">Diligence</h6>
<div class="progress ml-2 mr-2 mb-2" style="height: 15px; background-color: #D4D3BC;">
<div class="progress-bar" role="progressbar" style="height: 15px;
width: 40%;
background-color: #364E66;"></div>
</div>
<!--CHANGE STAT VALUE AT WIDTH-->
<h6 class="card-title ml-2 text-uppercase">Aim</h6>
<div class="progress ml-2 mr-2 mb-2" style="height: 15px; background-color: #D4D3BC;">
<div class="progress-bar" role="progressbar" style="height: 15px;
width: 40%;
background-color: #364E66;"></div>
</div>
<!--END OF PERSONALITY TRAIT STAT BARS-->
</div>
</div>
<!--END OF PERSONALITY AND TRAITS TAB-->
<!--POKEMON TAB
Please be VERY careful with this tab, as it's easy to
break the code when you don't know what you're doing.
(Miku knows I have when I was first figuring it out)-->
<div class="tab-pane fade" id="ELECTRODE" role="tabpanel" aria-labelledby="pills-ELECTRODE">
<div class="card-body">
<h1 class="card-title text-uppercase font-weight-bold mb-1">Pokemon Team</h1>
<div class="card mb-1" style="background-color: #D4D3BC;"></div>
<div class="card-deck">
<!--POKEMON-->
<div class="card mb-2 bg-transparent">
<div class="row no-gutters">
<div class="col-">
<!--POKEMON IMAGE-->
<a href="#"><img src="https://archives.bulbagarden.net/media/upload/4/4a/0025Pikachu.png" class="rounded-circle mx-auto d-block" style="border: white 2px solid; width: 100px;"></a>
<!--END OF POKEMON IMAGE-->
</div>
<div class="col-lg-8 mt-4">
<div class="card-body">
<!--POKEMON NAME GENDER LEVEL AND ALPHA-->
<h5 class="py-1">Pokemon
<!--GENDER
YOU CAN CHANGE TO THE MALE SYMBOL WITH THIS CODE:
<span class="pull-right p-1" style="background-color: #545CCB; color: #FFF7DF; border-radius:.5em;"><i class="fas fa-mars"></i></span>
-->
<span class="pull-right p-1" style="background-color: #E74B50; color: #FFF7DF; border-radius:.5em;"><i class="fas fa-venus"></i></span>
<!--END OF GENDER-->
</h5>
<div class="card mb-1" style="background-color: #D4D3BC;"></div>
<h5>Level #
<!--ALPHA SYMBOL; DELETE IF YOUR MON ISN'T AN ALPHA-->
<span class="pull-right"><img src="https://cdn.discordapp.com/attachments/301825165774290945/1155234231140749363/alpha_pokemon_symbol_by_jormxdos_dffxy6z-fullview.png" class="mx-auto d-block" style="width: 25px;"></span>
<!--END OF ALPHA SYMBOL-->
</h5>
<!--END OF POKEMON NAME GENDER LEVEL AND ALPHA-->
<!--MINI INFO BOX (DELETE TO END IF YOU DON'T WANT)-->
<div class="card-text overflow-auto" style="max-height: 150px;">
<p>Info here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Short is better, but will scroll upon longer, so go ham if you want.</p></div>
<!--END OF MINI INFO BOX-->
</div>
</div>
</div>
</div>
<!--END OF POKEMON-->
<!--POKEMON-->
<div class="card mb-2 bg-transparent">
<div class="row no-gutters">
<div class="col-">
<!--POKEMON IMAGE-->
<a href="#"><img src="https://archives.bulbagarden.net/media/upload/4/4a/0025Pikachu.png" class="rounded-circle mx-auto d-block" style="border: white 2px solid; width: 100px;"></a>
<!--END OF POKEMON IMAGE-->
</div>
<div class="col-lg-8 mt-4">
<div class="card-body">
<!--POKEMON NAME GENDER LEVEL AND ALPHA-->
<h5 class="py-1">Pokemon
<!--GENDER
YOU CAN CHANGE TO THE FEMALE SYMBOL WITH THIS CODE:
<span class="pull-right p-1" style="background-color: #E74B50; color: #FFF7DF; border-radius:.5em;"><i class="fas fa-venus"></i></span>
-->
<span class="pull-right p-1" style="background-color: #545CCB; color: #FFF7DF; border-radius:.5em;"><i class="fas fa-mars"></i></span>
<!--END OF GENDER-->
</h5>
<div class="card mb-1" style="background-color: #D4D3BC;"></div>
<h5>Level #
<!--ALPHA SYMBOL; ADD BELOW HERE IF YOUR POKEMON IS AN ALPHA
<span class="pull-right"><img src="https://cdn.discordapp.com/attachments/301825165774290945/1155234231140749363/alpha_pokemon_symbol_by_jormxdos_dffxy6z-fullview.png" class="mx-auto d-block" style="width: 25px;"></span>
-->
<!--END OF ALPHA SYMBOL (IF ADDED)-->
</h5>
<!--END OF POKEMON NAME GENDER LEVEL AND ALPHA-->
<!--MINI INFO BOX (DELETE TO END IF YOU DON'T WANT)-->
<div class="card-text overflow-auto" style="max-height: 150px;">
<p>Info here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Short is better, but will scroll upon longer, so go ham if you want.</p></div>
<!--END OF MINI INFO BOX-->
</div>
</div>
</div>
</div>
<!--END OF POKEMON-->
</div>
<div class="card-deck">
<!--POKEMON-->
<div class="card mb-2 bg-transparent">
<div class="row no-gutters">
<div class="col-">
<!--POKEMON IMAGE-->
<a href="#"><img src="https://archives.bulbagarden.net/media/upload/4/4a/0025Pikachu.png" class="rounded-circle mx-auto d-block" style="border: white 2px solid; width: 100px;"></a>
<!--END OF POKEMON IMAGE-->
</div>
<div class="col-lg-8 mt-4">
<div class="card-body">
<!--POKEMON NAME GENDER LEVEL AND ALPHA-->
<h5 class="py-1">Pokemon
<!--GENDER
YOU CAN CHANGE TO THE MALE SYMBOL WITH THIS CODE:
<span class="pull-right p-1" style="background-color: #545CCB; color: #FFF7DF; border-radius:.5em;"><i class="fas fa-mars"></i></span>
-->
<span class="pull-right p-1" style="background-color: #E74B50; color: #FFF7DF; border-radius:.5em;"><i class="fas fa-venus"></i></span>
<!--END OF GENDER-->
</h5>
<div class="card mb-1" style="background-color: #D4D3BC;"></div>
<h5>Level #
<!--ALPHA SYMBOL; DELETE IF YOUR MON ISN'T AN ALPHA-->
<span class="pull-right"><img src="https://cdn.discordapp.com/attachments/301825165774290945/1155234231140749363/alpha_pokemon_symbol_by_jormxdos_dffxy6z-fullview.png" class="mx-auto d-block" style="width: 25px;"></span>
<!--END OF ALPHA SYMBOL-->
</h5>
<!--END OF POKEMON NAME GENDER LEVEL AND ALPHA-->
<!--MINI INFO BOX (DELETE TO END IF YOU DON'T WANT)-->
<div class="card-text overflow-auto" style="max-height: 150px;">
<p>Info here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Short is better, but will scroll upon longer, so go ham if you want.</p></div>
<!--END OF MINI INFO BOX-->
</div>
</div>
</div>
</div>
<!--END OF POKEMON-->
<!--POKEMON-->
<div class="card mb-2 bg-transparent">
<div class="row no-gutters">
<div class="col-">
<!--POKEMON IMAGE-->
<a href="#"><img src="https://archives.bulbagarden.net/media/upload/4/4a/0025Pikachu.png" class="rounded-circle mx-auto d-block" style="border: white 2px solid; width: 100px;"></a>
<!--END OF POKEMON IMAGE-->
</div>
<div class="col-lg-8 mt-4">
<div class="card-body">
<!--POKEMON NAME GENDER LEVEL AND ALPHA-->
<h5 class="py-1">Pokemon
<!--GENDER
YOU CAN CHANGE TO THE FEMALE SYMBOL WITH THIS CODE:
<span class="pull-right p-1" style="background-color: #E74B50; color: #FFF7DF; border-radius:.5em;"><i class="fas fa-venus"></i></span>
-->
<span class="pull-right p-1" style="background-color: #545CCB; color: #FFF7DF; border-radius:.5em;"><i class="fas fa-mars"></i></span>
<!--END OF GENDER-->
</h5>
<div class="card mb-1" style="background-color: #D4D3BC;"></div>
<h5>Level #
<!--ALPHA SYMBOL; ADD BELOW HERE IF YOUR POKEMON IS AN ALPHA
<span class="pull-right"><img src="https://cdn.discordapp.com/attachments/301825165774290945/1155234231140749363/alpha_pokemon_symbol_by_jormxdos_dffxy6z-fullview.png" class="mx-auto d-block" style="width: 25px;"></span>
-->
<!--END OF ALPHA SYMBOL (IF ADDED)-->
</h5>
<!--END OF POKEMON NAME GENDER LEVEL AND ALPHA-->
<!--MINI INFO BOX (DELETE TO END IF YOU DON'T WANT)-->
<div class="card-text overflow-auto" style="max-height: 150px;">
<p>Info here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Short is better, but will scroll upon longer, so go ham if you want.</p></div>
<!--END OF MINI INFO BOX-->
</div>
</div>
</div>
</div>
<!--END OF POKEMON-->
</div>
<div class="card-deck">
<!--POKEMON-->
<div class="card mb-2 bg-transparent">
<div class="row no-gutters">
<div class="col-">
<!--POKEMON IMAGE-->
<a href="#"><img src="https://archives.bulbagarden.net/media/upload/4/4a/0025Pikachu.png" class="rounded-circle mx-auto d-block" style="border: white 2px solid; width: 100px;"></a>
<!--END OF POKEMON IMAGE-->
</div>
<div class="col-lg-8 mt-4">
<div class="card-body">
<!--POKEMON NAME GENDER LEVEL AND ALPHA-->
<h5 class="py-1">Pokemon
<!--GENDER
YOU CAN CHANGE TO THE MALE SYMBOL WITH THIS CODE:
<span class="pull-right p-1" style="background-color: #545CCB; color: #FFF7DF; border-radius:.5em;"><i class="fas fa-mars"></i></span>
-->
<span class="pull-right p-1" style="background-color: #E74B50; color: #FFF7DF; border-radius:.5em;"><i class="fas fa-venus"></i></span>
<!--END OF GENDER-->
</h5>
<div class="card mb-1" style="background-color: #D4D3BC;"></div>
<h5>Level #
<!--ALPHA SYMBOL; DELETE IF YOUR MON ISN'T AN ALPHA-->
<span class="pull-right"><img src="https://cdn.discordapp.com/attachments/301825165774290945/1155234231140749363/alpha_pokemon_symbol_by_jormxdos_dffxy6z-fullview.png" class="mx-auto d-block" style="width: 25px;"></span>
<!--END OF ALPHA SYMBOL-->
</h5>
<!--END OF POKEMON NAME GENDER LEVEL AND ALPHA-->
<!--MINI INFO BOX (DELETE TO END IF YOU DON'T WANT)-->
<div class="card-text overflow-auto" style="max-height: 150px;">
<p>Info here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Short is better, but will scroll upon longer, so go ham if you want.</p></div>
<!--END OF MINI INFO BOX-->
</div>
</div>
</div>
</div>
<!--END OF POKEMON-->
<!--POKEMON-->
<div class="card mb-2 bg-transparent">
<div class="row no-gutters">
<div class="col-">
<!--POKEMON IMAGE-->
<a href="#"><img src="https://archives.bulbagarden.net/media/upload/4/4a/0025Pikachu.png" class="rounded-circle mx-auto d-block" style="border: white 2px solid; width: 100px;"></a>
<!--END OF POKEMON IMAGE-->
</div>
<div class="col-lg-8 mt-4">
<div class="card-body">
<!--POKEMON NAME GENDER LEVEL AND ALPHA-->
<h5 class="py-1">Pokemon
<!--GENDER
YOU CAN CHANGE TO THE FEMALE SYMBOL WITH THIS CODE:
<span class="pull-right p-1" style="background-color: #E74B50; color: #FFF7DF; border-radius:.5em;"><i class="fas fa-venus"></i></span>
-->
<span class="pull-right p-1" style="background-color: #545CCB; color: #FFF7DF; border-radius:.5em;"><i class="fas fa-mars"></i></span>
<!--END OF GENDER-->
</h5>
<div class="card mb-1" style="background-color: #D4D3BC;"></div>
<h5>Level #
<!--ALPHA SYMBOL; ADD BELOW HERE IF YOUR POKEMON IS AN ALPHA
<span class="pull-right"><img src="https://cdn.discordapp.com/attachments/301825165774290945/1155234231140749363/alpha_pokemon_symbol_by_jormxdos_dffxy6z-fullview.png" class="mx-auto d-block" style="width: 25px;"></span>
-->
<!--END OF ALPHA SYMBOL (IF ADDED)-->
</h5>
<!--END OF POKEMON NAME GENDER LEVEL AND ALPHA-->
<!--MINI INFO BOX (DELETE TO END IF YOU DON'T WANT)-->
<div class="card-text overflow-auto" style="max-height: 150px;">
<p>Info here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Short is better, but will scroll upon longer, so go ham if you want.</p></div>
<!--END OF MINI INFO BOX-->
</div>
</div>
</div>
</div>
<!--END OF POKEMON-->
</div>
<!--ADD MORE POKEMON ABOVE HERE-->
</div>
</div>
<!--END OF POKEMON TAB-->
<!--RELATIONSHIP TAB
This works just like the pokemon tab, with the addition of needing a link.
Read everything carefully ok!-->
<div class="tab-pane fade" id="AVALUGG" role="tabpanel" aria-labelledby="pills-AVALUGG">
<div class="card-body">
<h1 class="card-title text-uppercase font-weight-bold mb-1">Relationships</h1>
<div class="card mb-1" style="background-color: #D4D3BC;"></div>
<!--RELATIONSHIP-->
<div class="card mb-2 bg-transparent">
<div class="row no-gutters">
<div class="col- m-2">
<!--CHARACTER LINK AND IMAGE-->
<a href="#"><img src="https://cdn.discordapp.com/attachments/301825165774290945/1155221131528249384/fsdfsdf.png" class="rounded-circle mx-auto d-block" style="border: white 2px solid; width: 100px;"></a>
<!--END OF CHARACTER LINK AND IMAGE-->
</div>
<div class="col-lg-8 mt-4">
<div class="card-body">
<!--CHARACTER NAME AND RELATIONSHIP-->
<h5>Name</h5>
<div class="card mb-1" style="background-color: #D4D3BC;"></div>
<h5>Relationship
<span class="pull-right">
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fad fa-heart"></i>
<i class="fad fa-heart"></i>
</span>
</h5>
<!--END OF CHARACTER NAME AND RELATIONSHIP-->
<!--MINI INFO BOX (DELETE TO END IF YOU DON'T WANT)-->
<div class="card-text">
<p>Relationship info 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 MINI INFO BOX-->
</div>
</div>
</div>
</div>
<!--END OF RELATIONSHIP-->
<!--RELATIONSHIP-->
<div class="card mb-2 bg-transparent">
<div class="row no-gutters">
<div class="col- m-2">
<!--CHARACTER LINK AND IMAGE-->
<a href="#"><img src="https://cdn.discordapp.com/attachments/301825165774290945/1155221131528249384/fsdfsdf.png" class="rounded-circle mx-auto d-block" style="border: white 2px solid; width: 100px;"></a>
<!--END OF CHARACTER LINK AND IMAGE-->
</div>
<div class="col-lg-8 mt-4">
<div class="card-body">
<!--CHARACTER NAME AND RELATIONSHIP-->
<h5>Name</h5>
<div class="card mb-1" style="background-color: #D4D3BC;"></div>
<h5>Relationship
<span class="pull-right">
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fad fa-heart"></i>
<i class="fad fa-heart"></i>
</span>
</h5>
<!--END OF CHARACTER NAME AND RELATIONSHIP-->
<!--MINI INFO BOX (DELETE TO END IF YOU DON'T WANT)-->
<div class="card-text">
<p>Relationship info 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 MINI INFO BOX-->
</div>
</div>
</div>
</div>
<!--END OF RELATIONSHIP-->
<!--RELATIONSHIP-->
<div class="card mb-2 bg-transparent">
<div class="row no-gutters">
<div class="col- m-2">
<!--CHARACTER LINK AND IMAGE-->
<a href="#"><img src="https://cdn.discordapp.com/attachments/301825165774290945/1155221131528249384/fsdfsdf.png" class="rounded-circle mx-auto d-block" style="border: white 2px solid; width: 100px;"></a>
<!--END OF CHARACTER LINK AND IMAGE-->
</div>
<div class="col-lg-8 mt-4">
<div class="card-body">
<!--CHARACTER NAME AND RELATIONSHIP-->
<h5>Name</h5>
<div class="card mb-1" style="background-color: #D4D3BC;"></div>
<h5>Relationship
<span class="pull-right">
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fad fa-heart"></i>
<i class="fad fa-heart"></i>
</span>
</h5>
<!--END OF CHARACTER NAME AND RELATIONSHIP-->
<!--MINI INFO BOX (DELETE TO END IF YOU DON'T WANT)-->
<div class="card-text">
<p>Relationship info 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 MINI INFO BOX-->
</div>
</div>
</div>
</div>
<!--END OF RELATIONSHIP-->
<!--RELATIONSHIP-->
<div class="card mb-2 bg-transparent">
<div class="row no-gutters">
<div class="col- m-2">
<!--CHARACTER LINK AND IMAGE-->
<a href="#"><img src="https://cdn.discordapp.com/attachments/301825165774290945/1155221131528249384/fsdfsdf.png" class="rounded-circle mx-auto d-block" style="border: white 2px solid; width: 100px;"></a>
<!--END OF CHARACTER LINK AND IMAGE-->
</div>
<div class="col-lg-8 mt-4">
<div class="card-body">
<!--CHARACTER NAME AND RELATIONSHIP-->
<h5>Name</h5>
<div class="card mb-1" style="background-color: #D4D3BC;"></div>
<h5>Relationship
<span class="pull-right">
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fad fa-heart"></i>
<i class="fad fa-heart"></i>
</span>
</h5>
<!--END OF CHARACTER NAME AND RELATIONSHIP-->
<!--MINI INFO BOX (DELETE TO END IF YOU DON'T WANT)-->
<div class="card-text">
<p>Relationship info 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 MINI INFO BOX-->
</div>
</div>
</div>
</div>
<!--END OF RELATIONSHIP-->
</div>
</div>
<!--END OF RELATIONSHIP TAB-->
</div>
</div>
<!--PROFILE BUTTONS
PLEASE DON'T TOUCH THESE, AS IT /WILL/ BREAK SOMETHING IF YOU DO!
I had to reference AviCode's ANCH profile code for the button setup because it was KILLING me how they looked default.
If I can find a way to edit the colors to be custom colors though, I'll prolly change this again, so please look out!-->
<ul class="nav nav-pills d-flex justify-content-center" style="max-height: 115px; max-width: 560px; background: url('https://f2.toyhou.se/file/f2-toyhou-se/images/72459810_DtiYhnpkflS75Gt.png') center;">
<!--KLEAVOR BUTTON-->
<li class="nav-item m-2" style="width:100px; height:100px;">
<a class="nav-link active btn btn-outline-primary border-0 btn-block h-100 justify-content-center align-items-center p-3" style="border-radius:2.2em;" data-toggle="pill" href="#KLEAVOR"><img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72459803_ML6AiXTkAFtUJwY.png"></a>
</li>
<!--END OF KLEAVOR BUTTON-->
<!--LILLIGANT BUTTON-->
<li class="nav-item m-2" style="width:100px; height:100px;">
<a class="nav-link btn btn-outline-primary border-0 btn-block h-100 justify-content-center align-items-center p-3" style="border-radius:2.2em; " data-toggle="pill" href="#LILLIGANT"><img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72459799_i3IDT9hT0mZg4Tr.png"></a>
</li>
<!--END OF LILLIGANT BUTTON-->
<!--ARCININE BUTTON-->
<li class="nav-item m-2" style="width:100px; height:100px;">
<a class="nav-link btn btn-outline-primary border-0 btn-block h-100 justify-content-center align-items-center p-3" style="border-radius:2.2em;" data-toggle="pill" href="#ARCININE"><img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72459794_qYekR6eKFRLan01.png"></a>
</li>
<!--END OF ARCININE BUTTON-->
<!--ELECTRODE BUTTON-->
<li class="nav-item m-2" style="width:100px; height:100px;">
<a class="nav-link btn btn-outline-primary border-0 btn-block h-100 justify-content-center align-items-center p-3" style="border-radius:2.2em;" data-toggle="pill" href="#ELECTRODE"><img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72459805_HrTvOaMpYGZMQsV.png"></a>
</li>
<!--END OF ELECTRODE BUTTON-->
<!--AVALUGG BUTTON-->
<li class="nav-item m-2" style="width:100px; height:100px;">
<a class="nav-link btn btn-outline-primary border-0 btn-block h-100 justify-content-center align-items-center p-3" style="border-radius:2.2em;" data-toggle="pill" href="#AVALUGG"><img src="https://f2.toyhou.se/file/f2-toyhou-se/images/72459819_YjOKcRX0wKbNYQm.png"></a>
</li>
<!--END OF AVALUGG BUTTON-->
</ul>
<!--PROFILE BUTTON ENDS-->
</div>
</div>
<div class="card ml-5 mr-5 mt-2 mb-3" style="background-color: #D4D3BC;"></div>
<!--BOTTOM SECTION-->
<div class="row d-flex justify-content-center">
<!--STAR RANK
In PL:A you gain star ranks for your progress instead of badges,
with a total of 10 stars. To edit your star rank, change the number
(dont worry the words one through ten fit), and then delete/add the star
or diamond icons to their appropiate section.-->
<div class="col-md-5">
<div class="card text-uppercase font-weight-bold text-center" style="max-height: 43px; max-width: 314px; background: url('https://f2.toyhou.se/file/f2-toyhou-se/images/72459795_k5FS8Ac96Tjz3mE.png') center; color: #F9F4D8; border: transparent; padding: 5px;">
<h1 class="mt-1">Eight Star Member</h1>
</div>
<div class="card-body ml-4">
<!--STARS
There is currently 8 stars here.-->
<i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i>
<!--END OF STARS-->
<!--DIAMONDS
There is currently 2 diamonds here.-->
<small style="color: #D4D3BC;"><i class="fa-solid fa-diamond"></i> <i class="fa-solid fa-diamond"></i></small></div>
<!--END OF DIAMONDS-->
</div>
<!--BLURB
In the original card/save file, this section tells you up to what level of pokemon will obey you,
but you can instead turn this into a mini blurb or quote from your character to fill up the space!-->
<div class="col-sm-3">
<div class="card-body">
<p>All Pokemon will obey you.</p>
</div>
</div>
<!--END OF BLURB-->
<!--CREDIT - DO NOT CHANGE UNDER ANY CIRCUMSTANCE-->
<div class="col-sm-3 ml-3 mt-3">
<div class="card text-uppercase font-weight-bold text-center" style="height: 80px; width: 330px; background: url('https://f2.toyhou.se/file/f2-toyhou-se/images/72459809_YFYVag9v4mq9Wpl.png') center; color: #5B6F7F; border: transparent; padding: 5px;">
<h1 class="mt-4"><i class="fa-solid fa-paintbrush"></i> <a href="https://toyhou.se/BigGayFish" style="color: #5B6F7F; font-weight: bold;">BigGayFish</a></h1>
</div>
</div>
<!--END OF CREDIT-->
</div>
<!--END OF BOTTOM SECTION-->
</div>