<!---- QUICK NOTE BEFORE STARTING; ------
Type ctrl+f to locate and replace the color of any of the item below.
- background color: #fffefe
- main color: #d1b6ad
- font color: #353535
- link color: #b7adac
- dividers color: #e2ccc4
- light background color: #f6e9e5
- stars colors: #e9d3cb
-------->
<!------------ START - background : Remove the image URL pattern if you want a solid color for the background.
You can also change the background size from "pattern" to "cover" if you want to use a full image as background! ------------>
<div class="card border-0 p-4" style="border-radius: 2em;
background: #f5e5e0 url(https://f2.toyhou.se/file/f2-toyhou-se/images/21853921_suhP81TgLmteMT4.png) center; background-size: pattern">
<!------------------------>
<div class="container mt-3 mb-3" style="max-width: 1100px; font-size: 13px; letter-spacing: 1px">
<!------------ FIRST COLUMN - IMAGE ------------>
<div class="row no-gutters"><div class="col-lg-4 p-1">
<div class="card p-3" style="box-shadow: -20px 20px 0 #d1b6ad; background: #fffefe; border-radius: 2em">
<!------------ MAIN IMAGE ------------>
<div class="card border-0" style="height: 432px;
background: url(IMG_URL) left; background-size: cover; border-radius: 2em">
<!------------ STAR DECO ------------>
<i class="fas fa-star fa-spin" style="animation-duration: 6s; font-size: 60px; color: #e9d3cb;
position: absolute; left: -20px; top: -40px; text-shadow: -2px 0 #fff , 0 2px #fff , 2px 0 #fff , 0 -2px #fff"></i>
<!------------ NAME TITLE(S) ------------>
<p class="text-uppercase" style="color: #fff; font-family: georgia; font-size: 40px; font-weight: 800; letter-spacing: -4px;
position: absolute; bottom: 15px; right: 20px;">
name here
</p>
<!------------ WRITE AGAIN THE SAME NAME SO IT CAN MIRROR ------------>
<p class="text-uppercase" style="color: #000; mix-blend-mode: screen; position: absolute; bottom: -1px; right: 20px; font-family: georgia; font-size: 40px; font-weight: 800; letter-spacing: -4px;
text-shadow: -1px 0 #fff , 0 1px #fff , 1px 0 #fff , 0 -1px #fff">
name here
</p>
<!------------ FIRST COLUMN END ------------>
</div></div></div>
<!------------ SECOND COLUMN - MAIN INFO ------------>
<div class="col-lg-6 p-1">
<div class="card p-2 text-justify" style="box-shadow: 0px 20px 0 #d1b6ad; background: #fffefe; border-radius: 2em">
<!------------ GUARDIAN DEX NUMBER ------------>
<p style="font-size: 30px; color: #353535; font-family: georgia; font-weight: 800">
<!------------------------>
<span style="color: #d1b6ad">
<i class="fad fa-angel"></i> G</span>UARDIAN
<!------------ DEX NUMBER ------------>
<span style="color: #d1b6ad; font-family: book antiqua">
#0000
</span>
<!------------ BARCODE ------------>
<span class="pull-right" style="color: #353535">
<i class="far fa-barcode"></i><i class="fal fa-barcode"></i><i class="fat fa-barcode"></i><i class="far fa-barcode"></i>
</span>
<!------------ GUARDIAN TITLE END ------------>
</p>
<hr class="mt-0 mb-2 w-100" style="border: 3px solid #e2ccc4; opacity: 0.6">
<!------------ CARD ------------>
<div class="card d-lg-flex d-block border-0 bg-transparent overflow-hidden" style="min-height: 100%; border-radius: 2em">
<div class="pr-lg-2 mr-lg-n4" style="height: 390px; overflow-y:scroll;">
<!------------ MAIN CONTENT START ------------>
<div class="p-2" style="color: #353535">
<!------------ BASICS ------------>
<div class="row no-gutters">
<div class="col-lg-6 p-1">
<!------------------------>
<div class="mb-2">
<div class="text-uppercase" style="background: #f6e9e5; color: #d1b6ad; font-size: 16px; font-weight: bold; line-height: 10px; letter-spacing: 2px">Name</div>
content
</div>
<!------------------------>
<div class="mb-2">
<div class="text-uppercase" style="background: #f6e9e5; color: #d1b6ad; font-size: 16px; font-weight: bold; line-height: 10px; letter-spacing: 2px">Age</div>
content
</div>
<!------------------------>
<div class="mb-2">
<div class="text-uppercase" style="background: #f6e9e5; color: #d1b6ad; font-size: 16px; font-weight: bold; line-height: 10px; letter-spacing: 2px">Pronouns</div>
con/tent
</div>
<!------------------------>
<div class="mb-2">
<div class="text-uppercase" style="background: #f6e9e5; color: #d1b6ad; font-size: 16px; font-weight: bold; line-height: 10px; letter-spacing: 2px">Species</div>
<a href="https://toyhou.se/~world/113661.angemos-peak" style="color: #b7adac">Angemo</a>
</div>
<!------------------------>
</div>
<div class="col-lg-6 p-1">
<!------------------------>
<div class="mb-2">
<div class="text-uppercase" style="background: #f6e9e5; color: #d1b6ad; font-size: 16px; font-weight: bold; line-height: 10px; letter-spacing: 2px">Subtype</div>
content
</div>
<!------------------------>
<div class="mb-2">
<div class="text-uppercase" style="background: #f6e9e5; color: #d1b6ad; font-size: 16px; font-weight: bold; line-height: 10px; letter-spacing: 2px">Rarity</div>
content
</div>
<!------------------------>
<div class="mb-2">
<div class="text-uppercase" style="background: #f6e9e5; color: #d1b6ad; font-size: 16px; font-weight: bold; line-height: 10px; letter-spacing: 2px">Masterlist</div>
<a href="LINK_URL" style="color: #b7adac">CONTENT #0000</a>
</div>
<!------------------------>
<div class="mb-2">
<div class="text-uppercase" style="background: #f6e9e5; color: #d1b6ad; font-size: 16px; font-weight: bold; line-height: 10px; letter-spacing: 2px">Light (magic)</div>
low / average / high
</div>
<!------------------------>
</div></div>
<!------------ EXTRA BASICS ------------>
<a class="collapsed" data-toggle="collapse" href="#more" style="color: #fff">
<div class="text-center" style="background: #d1b6ad; font-size: 14px; font-size: 19px; border-radius: 2em"><i class="fal fa-caret-down"></i></span>
</div></a>
<!------------ START ------------>
<div class="collapse" id="more">
<div class="row no-gutters mt-3"><div class="col-lg-6 p-1">
<!------------------------>
<div class="mb-2">
<div class="text-uppercase" style="background: #f6e9e5; color: #d1b6ad; font-size: 16px; font-weight: bold; line-height: 10px; letter-spacing: 2px">Orientation</div>
content
</div>
<!------------------------>
<div class="mb-2">
<div class="text-uppercase" style="background: #f6e9e5; color: #d1b6ad; font-size: 16px; font-weight: bold; line-height: 10px; letter-spacing: 2px">Role</div>
content
</div>
<!------------------------>
<div class="mb-2">
<div class="text-uppercase" style="background: #f6e9e5; color: #d1b6ad; font-size: 16px; font-weight: bold; line-height: 10px; letter-spacing: 2px">Alignment</div>
content
</div>
<!------------------------>
</div>
<div class="col-lg-6 p-1">
<!------------------------>
<div class="mb-2">
<div class="text-uppercase" style="background: #f6e9e5; color: #d1b6ad; font-size: 16px; font-weight: bold; line-height: 10px; letter-spacing: 2px">MBTI</div>
content
</div>
<!------------------------>
<div class="mb-2">
<div class="text-uppercase" style="background: #f6e9e5; color: #d1b6ad; font-size: 16px; font-weight: bold; line-height: 10px; letter-spacing: 2px">Alias</div>
content
</div>
<!------------------------>
<div class="mb-2">
<div class="text-uppercase" style="background: #f6e9e5; color: #d1b6ad; font-size: 16px; font-weight: bold; line-height: 10px; letter-spacing: 2px">Voice/song</div>
<a href="LINK_URL" style="color: #b7adac">content</a>
</div>
<!------------------------>
</div></div></div>
<!------------ EXTRA BASICS END ------------>
<!------------ QUOTE ------------>
<div class="row no-gutters">
<div class="col-lg-9 p-1">
<!------------------------>
<div class="card border-0 text-center px-4 p-3 mt-2" style="height: 100px; background: #d1b6ad; color: #fff; border-radius: 10em"><p class="mt-2">
<i class="far fa-quote-left" style="font-size: 50px; color: #fff; position: absolute; left: 20px; top: 20px; transform: rotate(-20deg); opacity: 0.2"></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<!------------------------>
</div></div>
<!------------------------>
<div class="col-lg-3 p-1">
<!------------ MINI ICON ------------>
<div class="card p-2 rounded-circle" style="height: 110px; border: 8px solid #f6e9e5;
background: #f6e9e5 url(IMG_URL) center; background-size: cover">
</div></div></div>
<!------------ QUOTE END ------------>
<hr class="mt-2 mb-3" style="border: 3px solid #e2ccc4; opacity: 0.6">
<!------------ CHARACTER DESC ------------>
<p class="p-1">
<span class="px-3" style="color: #d1b6ad; font-weight: bold">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante. Aliquam magna libero, dictum sit amet.<br><br>
Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante. Aliquam magna libero, dictum sit amet.
</p>
<!------------ CHARACTER DESC END ------------>
<hr class="mt-2 mb-3" style="border: 3px solid #e2ccc4; opacity: 0.6">
<div class="row no-gutters"><div class="col-lg-6 p-1">
<!------------ LIKES AND DISLIKES ------------>
<div class="row no-gutters">
<div class="col-lg-2 p-1 text-center" style="background: #d1b6ad; color: #fff; border-radius: 2em">
<!------------ LIKES ------------>
<i class="far fa-heart"></i></div>
<div class="col-lg-10 p-1 px-2">
<div class="text-uppercase text-center mb-2" style="font-size: 20px; background: #f6e9e5; color: #d1b6ad; font-family: georgia; font-weight: bold; line-height: 10px">
Likes
</div>
<!------------------------>
<ul class="mb-0">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
<!------------ LIKES END ------------>
</div></div></div>
<div class="col-lg-6 p-1">
<div class="row no-gutters">
<div class="col-lg-2 p-1 text-center" style="background: #d1b6ad; color: #fff; border-radius: 2em">
<!------------ DISLIKES ------------>
<i class="far fa-xmark"></i></div>
<div class="col-lg-10 p-1 px-2">
<div class="text-uppercase text-center mb-2" style="font-size: 20px; background: #f6e9e5; color: #d1b6ad; font-family: georgia; font-weight: bold; line-height: 10px">
Dislikes
</div>
<!------------------------>
<ul class="mb-0">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
<!------------ DISLIKES END ------------>
</div></div></div>
</div></div></div>
</div></div></div>
<!------------ SECOND COLUMN END ------------>
<!------------ THIRD COLUMN - IMAGES ------------>
<div class="col-lg-2 p-1">
<!------------ FIRST IMAGE ------------>
<div class="card border-0 mb-2" style="height: 150px; background: url(IMG_URL) center; background-size: cover; border-radius: 2em">
</div>
<!------------ ICON ------------>
<div class="card border-0 mb-2" style="height: 150px; background: #d1b6ad; font-size: 40px; border-radius: 0.6em"><div class="container align-items-center justify-content-center" style="height: 150px">
<i class="fal fa-clouds" style="color: #fff"></i>
</div></div>
<!------------ SECOND IMAGE ------------>
<div class="card rounded-0 border-0 mb-2" style="height: 150px; background: url(IMG_URL) center; background-size: cover; border-radius: 2em;
box-shadow: 0px 20px 0 #d1b6ad">
<!------------ STAR DECO ------------>
<i class="fas fa-star fa-spin" style="animation-duration: 2s; font-size: 50px; color: #e9d3cb;
position: absolute; right: -20px; bottom: -10px; text-shadow: -2px 0 #fff , 0 2px #fff , 2px 0 #fff , 0 -2px #fff"></i>
<!------------ THIRD COLUMN END ------------>
</div></div>
</div>
<!------------ CREDIT - DO NOT REMOVE PLS! FEEL FREE TO MOVE IT AS LONG AS IT'S STILL VISIBLE ^^ ------------>
<div class="text-right px-1 mt-2">
<a href="https://toyhou.se/burakkujakku" style="color: #d1b6ad; opacity: 0.5">
<i class="far fa-fish-bones tooltipster mr-1" title="code by burakkujakku"></i></a>
<a href="https://toyhou.se/6259293." style="color: #d1b6ad; opacity: 0.5">
<i class="far fa-image tooltipster" title="background pattern"></i></a>
</div>
<!------------ END ------------>
