Jade [TH]

<!---
    ╭── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╮

    J A D E
    2022 Code by Lairai, made for the November Coders' Quarters Challenge
    F2U, do not redistribute as a paid code, do not remove the credits

    ╰── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╯
------------------->

<div class="container py-2 rounded text-danger" style="background-color:#fafcfc;background-image:url('https://i.postimg.cc/gjmpJMqb/Textures-Tile.png');background-repeat:repeat;background-size:25%;font-family:'Tahoma';font-size:11px;line-height:1.3;letter-spacing:0.4px;"><div class="row no-gutters"><div class="col-sm-8 p-2">

<!---
    ╭── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╮
    CHARACTER NAME
    Replace "Name Surname" with, well, their name and surname.
    ╰── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╯
------------------->
<div class="col-sm text-right" style="font-family:'Garamond';font-size:3em;font-weight:bold;font-variant:small-caps;color:#55a390;text-shadow: 0px 1px #B1E3D7, 0px 2px #B1E3D7;"><i class="far fa-feather-pointed mr-2"></i>

        NAME SURNAME

</div><div class="px-2 py-1 rounded" style="background:#fafcfc;filter:drop-shadow(1px 3px 0px #B1E3D7);border-radius:0.2em;"><div class="col-sm p-2" style="border-width: 0 0.25em 0 0.25em;border-style:dashed;border-color:#B1E3D7;color:#19302A">
<div class="row no-gutters">
<div class="col-sm-7">
 <!---
    ╭── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╮
    BASIC INFORMATION
    Replace where indicated. This is the section with the dark green boxes in the top left.
    ╰── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╯
------------------->
      <div class="rounded p-2 my-1" style="background:#215A4D;color:#B1E3D7">
        <div class="row no-gutters">
        <div class="col-4 text-left my-auto" style="font-family:Garamond;font-variant:small-caps;font-size:1.2em;font-weight:bold;letter-spacing:0.7px">Nicknames</div>
        <div class="col-sm hidden-md-down my-auto text-center" style="color:#19302A;text-shadow: 0px 1.5px #36927D,0px -1.5px #36927D,-1.5px 0 #36927D,1.5px 0 #36927D;"><i class="fa-regular fa-signature fa-2x"></i></div>
        <div class="col-4 text-right my-auto" style="letter-spacing:0.6px">

            TEXT HERE

        </div></div></div>

      <div class="rounded p-2 my-1" style="background:#215A4D;color:#B1E3D7">
        <div class="row no-gutters">
        <div class="col-4 text-left my-auto" style="font-family:Garamond;font-variant:small-caps;font-size:1.2em;font-weight:bold;letter-spacing:0.7px">Age</div>
        <div class="col-sm hidden-md-down my-auto text-center" style="color:#19302A;text-shadow: 0px 1.5px #36927D,0px -1.5px #36927D,-1.5px 0 #36927D,1.5px 0 #36927D;"><i class="fa-regular fa-calendar fa-2x"></i></div>
        <div class="col-4 text-right my-auto" style="letter-spacing:0.6px">

            XX Years

        </div></div></div>

      <div class="rounded p-2 my-1" style="background:#215A4D;color:#B1E3D7">
        <div class="row no-gutters">
        <div class="col-4 text-left my-auto" style="font-family:Garamond;font-variant:small-caps;font-size:1.2em;font-weight:bold;letter-spacing:0.7px">Gender</div>
        <div class="col-sm hidden-md-down my-auto text-center" style="color:#19302A;text-shadow: 0px 1.5px #36927D,0px -1.5px #36927D,-1.5px 0 #36927D,1.5px 0 #36927D;"><i class="fa-regular fa-venus-mars fa-2x"></i></div>
        <div class="col-4 text-right my-auto" style="letter-spacing:0.6px">

            Gender (They / Them)

        </div></div></div>

      <div class="rounded p-2 my-1" style="background:#215A4D;color:#B1E3D7">
        <div class="row no-gutters">
        <div class="col-4 text-left my-auto" style="font-family:Garamond;font-variant:small-caps;font-size:1.2em;font-weight:bold;letter-spacing:0.7px">Species</div>
        <div class="col-sm hidden-md-down my-auto text-center" style="color:#19302A;text-shadow: 0px 1.5px #36927D,0px -1.5px #36927D,-1.5px 0 #36927D,1.5px 0 #36927D;"><i class="fa-regular fa-dna fa-2x"></i></div>
        <div class="col-4 text-right my-auto" style="letter-spacing:0.6px">

            TEXT HERE

        </div></div></div></div>
    <div class="col-sm-5 p-2 text-justify"><p class="mt-0 mb-2" style="font-family:'Garamond';font-size:2em;font-weight:bold;font-variant:small-caps;color:#55a390;text-shadow: 0px 1px #B1E3D7, 0px 2px #B1E3D7;"><i class="fa-regular fa-comment-dots mr-2 ml-3"></i>Trivia</p>
 <!---
    ╭── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╮
    TRIVIA
    Notes on the character! Ideally you will want to keep it to 3 notes maximum.
    ╰── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╯
------------------->
    <p class="my-1"><i class="fa-regular fa-feather fa-lg mr-1" style="transform:rotate(-138deg);color:#55a390;"></i>

        A note on this character. You can make it longer or shorter.

    </p>
    <p class="my-1"><i class="fa-regular fa-feather fa-lg mr-1" style="transform:rotate(-138deg);color:#55a390;"></i>

        A note on this character. You can make it longer or shorter.

    </p>
    <p class="my-1"><i class="fa-regular fa-feather fa-lg mr-1" style="transform:rotate(-138deg);color:#55a390;"></i>

        A note on this character. You can make it longer or shorter.

    </p></div>
    </div><!--- END OF ROW --->
 <!---
    ╭── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╮
    PERSONALITY
    I usually have it divided,
    so I thought for this code I'd have a personality section that's in full sentences!
    Just replace the Lorem Ipsum with what you'd like to write.
    ╰── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╯
------------------->
    <p class="mt-2 mb-1" style="font-family:'Garamond';font-size:2em;font-weight:bold;font-variant:small-caps;color:#55a390;text-shadow: 0px 1px #B1E3D7, 0px 2px #B1E3D7;"><i class="fa-regular fa-pen-field mr-2 ml-3"></i>Personality</p><p class="mb-2" align="justify" style="color:#215A4D">

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tempus, ante id volutpat tempus, tortor orci consequat justo, quis congue nulla ligula nec nisl. Quisque sagittis quis justo nec dignissim. Proin sit amet nunc leo. Cras ut nibh vitae diam dignissim sodales. Donec vel odio sed risus cursus consectetur sed nec erat. Quisque dapibus rhoncus ultrices. Vivamus a orci sodales, dignissim nulla vitae, viverra odio. Donec vel enim convallis, iaculis magna id, accumsan ipsum. Ut ultrices venenatis tellus tempus rhoncus. Nam tellus mauris, mollis nec pulvinar ac, eleifend quis magna. Nullam consectetur enim id elementum ullamcorper. Cras sapien sapien, sodales sed orci in, luctus pellentesque justo. Maecenas venenatis purus interdum enim posuere bibendum. Donec blandit semper ipsum in blandit. Nullam facilisis sit amet ante eu placerat.

    </p></div>
 <!---
    ╭── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╮
    QUOTE
    This next section is the quote/divider in the middle of the left box.
    ╰── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╯
------------------->
    <div class="row no-gutters justify-content-center my-2"><div class="col-1 my-auto hidden-md-down" style="border-top:0.15em solid #36927D;color:#36927D"></div><div class="col-1 my-auto hidden-md-down" style="color:#36927D;text-shadow: 0px 1px #B1E3D7, 0px 2px #B1E3D7;"><i class="fa-regular fa-quotes fa-3x mt-n5 ml-2"></i></div><div class="col-md-6 col-12 text-justify p-1" style="color:#36927D;font-family:'Garamond';font-size:1.3em;line-height:1.1;font-variant:small-caps;">

        Put a quote here. It doesn't have to be short, but with every new line, this box will expand, so don't make it extremely long, either. The ideal length is 2-4 lines of text.

    </div><div class="col-3 my-auto" style="border-top:0.15em solid #36927D;color:#36927D"></div></div>
    <!--- END OF QUOTE DIVIDER--->

    <div class="col-sm p-2" style="border-width: 0 0.25em 0 0.25em;border-style:dashed;border-color:#B1E3D7;color:#19302A">
    <p class="mt-2 mb-1" style="font-family:'Garamond';font-size:2em;font-weight:bold;font-variant:small-caps;color:#55a390;text-shadow: 0px 1px #B1E3D7, 0px 2px #B1E3D7;"><i class="fa-regular fa-books mr-2 ml-3"></i>History</p>

    <div class="row no-gutters">
    <div class="justify-content-start align-items-center col-2 nav nav-pills flex-column" id="v-pills-tab" role="tablist" aria-orientation="vertical">
    <a class="btn btn-outline-secondary bg-transparent active w-75 m-1" data-placement="right" style="padding:0.3em;filter:brightness(0%)" id="v-pills-first-tab" data-toggle="pill" href="#v-pills-first" role="tab" aria-controls="v-pills-first" aria-selected="true">I.</a>
    <a class="btn btn-outline-secondary bg-transparent w-75 m-1" data-placement="right" style="padding:0.3em;filter:brightness(0%)" id="v-pills-second-tab" data-toggle="pill" href="#v-pills-second" role="tab" aria-controls="v-pills-second" aria-selected="true">II.</a>
    <a class="btn btn-outline-secondary bg-transparent w-75 m-1" data-placement="right" style="padding:0.3em;filter:brightness(0%)" id="v-pills-third-tab" data-toggle="pill" href="#v-pills-third" role="tab" aria-controls="v-pills-third" aria-selected="true">III.</a>
    </div><div class="col-10">

 <!---
    ╭── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╮
    HISTORY
    There are three tabs here, I, II and III.
    Each tab has a heading, but you can copy-paste that and have more of them. Here is the heading code:

    <div class="text-right rounded py-1 px-3 mb-1" style="color:#B1E3D7;font-family:'Garamond';font-size:1.3em;line-height:1.1;font-variant:small-caps;background:#215A4D"><i class="fas fa-book-open-cover mr-2" style="color:#36927D;"></i>

        Heading

    </div>

    ╰── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╯
------------------->
    <div class="tab-content" id="pills-tabContent">
    <div class="tab-pane fade show active text-justify" id="v-pills-first" role="tabpanel" aria-labelledby="pills-first-tab" style="color:#215A4D">

    <div class="text-right rounded py-1 px-3 mb-1" style="color:#B1E3D7;font-family:'Garamond';font-size:1.3em;line-height:1.1;font-variant:small-caps;background:#215A4D"><i class="fas fa-book-open-cover mr-2" style="color:#36927D;"></i>

        Heading

    </div>

    Donec posuere libero ac mattis elementum. Nullam nec ex eu quam aliquam ullamcorper. Nulla scelerisque consectetur orci, nec ultrices ligula dapibus a. Maecenas rhoncus lobortis lacus, vitae malesuada purus cursus eu. Nam vehicula metus ante, ac venenatis est rhoncus a. Cras id laoreet ante. Fusce congue lorem vel urna scelerisque, nec sodales augue aliquet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam molestie quam nisi, a scelerisque quam imperdiet a. Vestibulum sed turpis ac nunc sodales tincidunt vitae ut sem. Praesent commodo lorem non risus convallis, non lacinia tellus consectetur. Nunc luctus dolor ipsum, eget varius mauris condimentum at.

    </div><div class="tab-pane fade text-justify" id="v-pills-second" role="tabpanel" aria-labelledby="pills-second-tab" style="color:#215A4D">
    <div class="text-right rounded py-1 px-3 mb-1" style="color:#B1E3D7;font-family:'Garamond';font-size:1.3em;line-height:1.1;font-variant:small-caps;background:#215A4D"><i class="fas fa-book-open-cover mr-2" style="color:#36927D;"></i>

        Heading

    </div>

    Curabitur odio odio, fermentum nec massa sit amet, tincidunt tincidunt dui. Sed enim felis, vulputate at tortor nec, blandit porta lorem. Vestibulum eleifend elementum arcu et fermentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis lorem magna, malesuada non justo et, aliquet mattis dui. Phasellus pharetra nunc at diam posuere, ut dapibus diam commodo. Vestibulum nibh est, efficitur quis risus ut, mollis lacinia ex. Proin a ligula congue, accumsan leo quis, rhoncus diam. Vestibulum pellentesque nibh odio, a consectetur orci porttitor non. Maecenas varius a nulla a sagittis. Quisque viverra consequat ex, a aliquet quam sollicitudin at. Aliquam erat volutpat.

    </div><div class="tab-pane fade text-justify" id="v-pills-third" role="tabpanel" aria-labelledby="pills-third-tab" style="color:#215A4D">
    <div class="text-right rounded py-1 px-3 mb-1" style="color:#B1E3D7;font-family:'Garamond';font-size:1.3em;line-height:1.1;font-variant:small-caps;background:#215A4D"><i class="fas fa-book-open-cover mr-2" style="color:#36927D;"></i>

        Heading

    </div>

    Nunc vel mattis tellus. Nulla et tortor vitae nisl porttitor tincidunt. Suspendisse potenti. Nam a tellus dapibus quam luctus aliquet sed id elit. Pellentesque consectetur magna vitae nunc sollicitudin accumsan quis quis erat. Maecenas congue metus sapien, ac tincidunt mi lobortis at. Morbi facilisis lorem elit, vel fringilla nibh iaculis nec. Aenean id ex congue, scelerisque ex eu, consequat lacus. Praesent felis dui, molestie ut nunc cursus, tristique pharetra lacus. Cras vitae metus tristique, luctus nisl sed, pulvinar tortor. In mattis, sapien a sagittis facilisis, tortor neque dictum erat, ac pretium risus nulla sit amet ex. Integer eget cursus lacus, sit amet interdum risus.

</div></div></div></div></div></div>
<a class="fas fa-code mt-4 fa-lg" style="color:#215A4D" href="https://toyhou.se/Lairai" target="_blank"></a>
</div><!--- END OF LEFT BOX--->

<!---
    ╭── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╮
    IMAGE & MOODBOARD
    The first image in this set is the big image in the top right - put a picture of your character there.
    Underneath it is a grid of 4 more images. You can put more images of the character there or use it as a moodboard.
    ╰── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╯
------------------->
<div class="col-md-4 p-2">
<div class="rounded w-100 col-sm-12" style="background-image:url('

    https://cdn.pixabay.com/photo/2020/07/29/02/33/cup-5446735_960_720.jpg

');height:200px;background-size:cover;"><i class="far fa-sparkles fa-5x my-2 ml-n2" style="color:#fafcfc;text-shadow: 0px 1px #36927D, 0px 2px #36927D;"></i></div>
<div class="row no-gutters"><div class="my-1 mr-1 rounded col-6" style="background-image:url(

    https://cdn.pixabay.com/photo/2021/10/03/12/10/spider-web-6677845_960_720.jpg

);background-size:cover;height:100px;"></div><div class="my-1 rounded col-sm" style="background-image:url(

    https://cdn.pixabay.com/photo/2020/10/12/14/11/meadow-5648849_960_720.jpg

);background-size:cover;height:100px;"></div></div><div class="row no-gutters"><div class="mr-1 rounded col-6" style="background-image:url(

    https://cdn.pixabay.com/photo/2022/02/03/18/49/blossoms-6991112_960_720.jpg

);background-size:cover;height:100px;"></div><div class="rounded col-sm" style="background-image:url(

    https://cdn.pixabay.com/photo/2018/08/05/12/10/chocolate-vine-3585490_960_720.jpg

);background-size:cover;height:100px;"></div></div>

<div class="px-2 py-1 rounded mt-2" style="background:#215A4D;filter:drop-shadow(1px 3px 0px #B1E3D7);border-radius:0.2em;">
<div class="col-sm p-2" style="border-width: 0 0.25em 0 0.25em;border-style:dashed;border-color:#36927D;color:#B1E3D7">
<p class=" mb-1" style="font-family:'Garamond';font-size:2em;font-weight:bold;font-variant:small-caps;color:#B1E3D7;text-shadow: 0px 1px #2F806D, 0px 2px #2F806D;"><i class="fa-regular fa-hands-holding-heart mr-2 ml-3"></i>Relationships</p>

 <!---
    ╭── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╮
    RELATIONSHIPS
    The information you should paste in is in this order:
    - Image
    - Name
    - Relationship
    - Relationship Description
    Yes, the box only has room for two relationships, so pick the two most important ones!
    You could copy and paste the whole relationship div class, but then it wouldn't match the other side of the code length-wise.

    ╰── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╯
------------------->

    <div class="row no-gutters rounded px-3" style="background-image:url(

        https://cdn.pixabay.com/photo/2022/10/07/06/39/lotus-7504269_960_720.jpg

        );min-height:20px;background-size:cover;background-position:50%;filter:drop-shadow(0 2px 3px #19302A)">
    <div class="col-sm my-auto" style="border-top:1px solid #B1E3D7;height:1px;"></div>
    <div class="col-sm text-right my-auto" style="color:#fafcfc;font-family:'Garamond';font-size:1.3em;line-height:1.1;font-variant:small-caps;font-weight:bold;text-shadow:0 1px #36927D,0 2px #36927D">

        Name Surname

    </div></div>

    <div class="p-1">
      <p class="mt-1 mb-1" style="color:#B1E3D7;font-family:'Garamond';font-size:1.3em;line-height:1.1;font-variant:small-caps;"><span style="color:#19302A">[</span>

        Relationship

        <span style="color:#19302A">]</span></p><p align="justify" style="color:#fafcfc">

        Relationship description goes here.Donec posuere libero ac mattis elementum. Nullam nec ex eu quam aliquam ullamcorper. Nulla scelerisque consectetur orci, nec ultrices ligula dapibus a. Maecenas rhoncus lobortis lacus, vitae malesuada purus cursus eu.

        </p></div>
  <!---
    ╭── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╮
    SECOND CHARACTER RELATIONSHIP
    ╰── ⋅ ⋅ ─────────── ✩ ─────────── ⋅ ⋅ ──╯
------------------->
    <div class="row no-gutters rounded px-3" style="background-image:url(

        https://cdn.pixabay.com/photo/2022/10/07/06/39/lotus-7504269_960_720.jpg

        );min-height:20px;background-size:cover;background-position:50%;filter:drop-shadow(0 2px 3px #19302A)">
    <div class="col-sm my-auto" style="border-top:1px solid #B1E3D7;height:1px;"></div>
    <div class="col-sm text-right my-auto" style="color:#fafcfc;font-family:'Garamond';font-size:1.3em;line-height:1.1;font-variant:small-caps;font-weight:bold;text-shadow:0 1px #36927D,0 2px #36927D">

        Name Surname

    </div></div>

    <div class="p-1">
      <p class="mt-1 mb-1" style="color:#B1E3D7;font-family:'Garamond';font-size:1.3em;line-height:1.1;font-variant:small-caps;"><span style="color:#19302A">[</span>

        Relationship

        <span style="color:#19302A">]</span></p><p align="justify" style="color:#fafcfc">

        Relationship description goes here.Donec posuere libero ac mattis elementum. Nullam nec ex eu quam aliquam ullamcorper. Nulla scelerisque consectetur orci, nec ultrices ligula dapibus a. Maecenas rhoncus lobortis lacus, vitae malesuada purus cursus eu.

    </p></div></div></div></div></div></div><!--- END OF FLEX ROW---></div>