<!------------------------------------------------
NOTES!:
Comments with "❤" means to add information/links/hexcolors
(Control + F and replace text!)
None
------------------------------------------------>
<div class="row no-gutters bg-dark text-light col-md-12" style="clip-path: polygon(0 0, 100% 75%, 100% 100%, 0% 100%);">
<!--------------- ❤ Name Title -------------->
<p> <span style="font-size: 45px;">K</span><span style="font-size: 25px;">agome Higurash</span> </p>
</div>
<div class="row no-gutters bg-primary col-md-12" style="height: 5px;">
</div>
<!-------------\\\First Column\\\------------->
<div class="row no-gutters">
<div class="bg-dark col-md-3 p-1 order-2 order-lg-1 h-100">
<div class="bg-faded p-2" style="max-height: 460px; overflow: auto;">
<!--------------- ❤ Header (Dulicated - Copy & Paste) -------------->
<p class="bg-info text-dark" style="padding: 2px; text-indent: 2px; font-size: 18px;"><i class="fa-regular fa-bookmark"></i> Header </p>
<!--------------- ❤ Paragraph -------------->
<p style="text-indent: 20px;">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>
<!--------------- ❤ Header (Dulicated - Copy & Paste) -------------->
<p class="bg-info text-dark" style="padding: 2px; text-indent: 2px; font-size: 18px;"><i class="fa-regular fa-bookmark"></i> Header </p>
<!--------------- ❤ Paragraph -------------->
<p style="text-indent: 20px;">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 style="text-indent: 20px;">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>
<!-------------\\\Second Column\\\------------->
<div class="row no-gutters bg-dark col-md-4 p-1 order-1 order-lg-1">
<!-----------Col 2 Row 1---------------->
<!--------------- ❤ Icon IMG HERE -------------->
<div class="bg-faded col-md-12 p-3" style="min-height: 250px; background-image:url(https://media.discordapp.net/attachments/1027458626991956090/1074458632420343898/tumblr_525c184a2b318e9cf6af691413acb3a9_426a2254_500.gif); background-size:cover; background-position:center; ">
<!--------------- Credit (Do not delete. Thank you!) -------------->
<a href="https://toyhou.se/PinkyDoggy"><i class="fa-solid fa-code" style="color: #ffffff; font-size: 20px;position: absolute; bottom:6px; right:8px;"></i></a>
</div>
<!-----------Col 2 Row 2 Part 1---------------->
<div class="bg-primary col-md-10">
<!--------------- Basic Information Box -------------->
<div class="row no-gutters">
<div class="col-md-12">
<div class="bg-faded p-2 h-100">
<p>
<!-------- ❤ NAME info -------->
<span style="font-weight: 700; letter-spacing: 1px;"> Name </span> <span style="float: right;"> Content </span>
</p>
</div>
</div>
<div class="col-md-12">
<div class="bg-faded p-2 h-100">
<p>
<!-------- ❤ AGE info -------->
<span style="font-weight: 700; letter-spacing: 1px;"> Age </span> <span style="float: right;"> Content </span>
</p>
</div>
</div>
<div class="col-md-12">
<div class="bg-faded p-2 h-100">
<p>
<!-------- ❤ BIRTHDAY info -------->
<span style="font-weight: 700; letter-spacing: 1px;"> Pronouns </span> <span style="float: right;"> Content </span>
</p>
</div>
</div>
<div class="col-md-12">
<div class="bg-faded p-2 h-100">
<p>
<!-------- ❤ SPECIES info -------->
<span style="font-weight: 700; letter-spacing: 1px;"> DOB </span> <span style="float: right;"> Content </span>
</p>
</div>
</div>
</div>
</div>
<!-----------Col 2 Row 2 Part 2---------------->
<div class="bg-faded col-md-2 p-2">
<!--------------- ❤ Music player LINK HERE) -------------->
<a href="LINK_HERE"><i class="fa-solid fa-compact-disc fa-spin" style="font-size: 45px;"></i></a>
</div>
<!-----------Col 2 Row 3---------------->
<div class="bg-info text-dark col-md-12 p-3" style="height: 59px; border-top: 4px solid">
<p class="text-dark" style="text-align: center;"><i class="fa-solid fa-lg fa-quote-left" style="float: left;"></i>
<!------------- ❤ Quote HERE ------------->
<span style="font-size: 18px;"> ...I'll always be by your side. </span>
<i class="fa-solid fa-quote-right fa-lg" style="float: right;"></i></p>
</div>
</div>
<!-------------\\\Third Column\\\------------->
<div class="row no-gutters bg-dark col-md-4 p-1 order-2 order-lg-1">
<!-----------Col 3 Row 1---------------->
<div class="bg-faded col-md-12 p-3" style="height: 200px; overflow: auto;">
<!--------------- About/Description -------------->
<p class="bg-info text-dark" style="padding: 2px; text-indent: 2px; font-size: 18px;"><i class="fa-regular fa-user"></i> About </p>
<p style="text-indent: 20px;">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 class="row no-gutters">
<div class=" col-6 p-1">
<p class="bg-info" style="text-align: center; font-size: 18px;"><i class="fa-regular fa-heart"></i></p>
<ul>
<!--------- ❤ Likes--------------->
<li> Item </li>
<li> Item </li>
<li> Item </li>
<li> Item </li>
<li> Item </li>
</ul>
</div>
<div class=" col-6 p-1">
<p class="bg-info" style="text-align: center; font-size: 18px;"><i class="fa-regular fa-heart-crack"></i></p>
<ul>
<!--------- ❤ Dislikes--------------->
<li> Item </li>
<li> Item </li>
<li> Item </li>
<li> Item </li>
<li> Item </li>
</ul>
</div>
</div>
<br>
<!------ Trivia ---------->
<p class="bg-info text-dark" style="padding: 2px; text-indent: 2px; font-size: 18px;"><i class="fa-regular fa-pencil"></i> Trivia </p>
<br>
<!---------- ❤ Trivia Contents --------->
<ul>
<li> Content </li>
<li> Content </li>
<li> Content </li>
<li> Content </li>
<li> Content </li>
<li> Content </li>
</ul>
</div>
<!-----------Col 3 Row 2---------------->
<!----- ❤ Reference IMG HERE --------->
<div class="bg-success col-md-12 p-3" style="height: 260px; background-image:url(https://media.discordapp.net/attachments/1027458626991956090/1074481943174991932/tumblr_ozhp43Nbrc1rqshvdo1_r1_540.png?width=493&height=519); background-size:cover; background-position: top;">
<!----- ❤ Ref LINK LINK HERE --------->
<a href="https://characterdesignreferences.com/art-of-animation-3/moomin" class="text-primary" style="position:absolute; bottom:3px; left:8px; font-size: 18px" data-toggle="tooltip"><i class="fas fa-image"></i> Full Version </a>
</div>
</div>
<!-------------\\\Fourth Column\\\------------->
<div class="bg-dark col-md-1 p-1 order-2 order-lg-1">
<div class="bg-dark" style=" overflow: auto">
<!------ Relationships -------->
<!------ ❤ First Character -------->
<h1 class="m-0"><a href="LINK_HERE" class="my-9 p-1 col-12 btn btn-primary" style="height: 90px; background-image:url(https://media.discordapp.net/attachments/1027458626991956090/1074476786576019507/a298f6645b96ab6a12cc58479f45ad1a4984de6e8c737b21e080641bcfa30cde_thumb.png); background-size:cover; background-position:center;"> </a></h1>
<!------ ❤ Second Character LINK AND IMG HERE -------->
<h1 class="m-0"><a href="LINK_HERE" class="my-9 p-1 col-12 btn btn-primary" style="height: 90px; background-image:url(https://media.discordapp.net/attachments/1027458626991956090/1074478839234834522/Screen_Shot_2023-02-12_at_3.55.06_PM.png?width=522&height=519); background-size:cover; background-position:center;"> </a></h1>
<!------ ❤ Third Character LINK AND IMG HERE -------->
<h1 class="m-0"><a href="LINK_HERE" class="my-9 p-1 col-12 btn btn-primary" style="height: 90px; background-image:url(https://media.discordapp.net/attachments/1027458626991956090/1074478631688077422/Screen_Shot_2023-02-12_at_3.54.17_PM.png); background-size:cover; background-position:center;"> </a></h1>
<!------ ❤ Fourth Character LINK AND IMG HERE -------->
<h1 class="m-0"><a href="LINK_HERE" class="my-9 p-1 col-12 btn btn-primary" style="height: 90px; background-image:url(https://media.discordapp.net/attachments/1027458626991956090/1074478385151099001/Screen_Shot_2023-02-12_at_3.53.18_PM.png); background-size:cover; background-position:center;"> </a></h1>
<!------ ❤ More Characters (Link to full character folder) LINK HERE -------->
<h1 class="m-0"><a href="LINK_HERE" class="my-9 p-1 col-12 btn btn-primary" style="height: 90px; vertical-align: middle;"> <i class="fa-solid fa-plus" style="font-size: 80px;"></i> </a></h1>
</div>
</div>
</div>
<div class="row no-gutters bg-primary col-md-12" style="height: 5px;">
</div>
<div class="row no-gutters bg-dark col-md-12" style="height: 55px;clip-path: polygon(0 0, 100% 0, 100% 100%, 0 23%);">
</div>
<!------ Hello! Good to see you at the end! Thanks so much for checking out my code! <3------>
