[TH] Lotte

<!--------------------------
--
-- Tan Pink #e39b9f
-- Brown #a98073
--
--------------------------->
<div style="background-image:url('https://i.pinimg.com/564x/22/07/2d/22072d47807f67dce355c4e3ecb1a692.jpg');max-width:1200px;" class="container-fluid px-lg-4 px-2 pt-4 pb-3 rounded">
<div class="container px-0">
    <div class="row no-gutters mb-2">

        <div class="col-lg-4 col-md-5 pr-md-2 mb-md-0 mb-2">
            <!-------- FOCAL IMAGE  ------------------>
            <div style="background-image:url('https://file.toyhou.se/watermarks/14410718_AHelgYvf3.png');
            background-size: cover; repeat:no-repeat; background-position: top center; min-height: 400px;" class="rounded card-block h-100"></div></div>

        <div class="col-lg-8 col-md-7">
            <ul class="nav nav-pills row no-gutters text-center text-uppercase" style="letter-spacing: 1px;">
                <!----------------- NAVIGATION BUTTONS ----- YOU CAN CHANGE THE TEXT ---- DO NOT ADD MORE ------------------------------------->
                <li class="nav-item col-md col-auto mr-1 mb-2 rounded" style="background:#a98073;"><a class="btn btn-outline-secondary border-0 text-white nav-link active" data-toggle="tab" href="#ONE">Intro</a></li>

                <li class="nav-item col-md col-auto mx-1 mb-2 rounded" style="background:#a98073;"><a class="btn btn-outline-secondary border-0 text-white nav-link" data-toggle="tab" href="#TWO">About</a></li>

                <li class="nav-item col-md col-auto mx-1 mb-2 rounded" style="background:#a98073;"><a class="btn btn-outline-secondary border-0 text-white nav-link" data-toggle="tab" href="#THREE">Extra</a></li>
            </ul>

            <div class="rounded tab-content" style="background: #fff;">
                <!------------------------------------ FIRST TAB ------------------------------------------------------------->
                <div class="tab-pane fade in active show" data-toggle="tab" id="ONE">
                    <div class="px-4 pt-3 pb-1" style="height: 630px; overflow: auto;">
                        <h1 style="color: #a98073; letter-spacing:1px;" class=" display-4 text-uppercase mb-3"><img width="50" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/eddc92fb-46cf-4017-8480-f397d15be8ee/dd51kwu-d1819b48-1426-448c-baf4-a79ad9d6e5dc.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2VkZGM5MmZiLTQ2Y2YtNDAxNy04NDgwLWYzOTdkMTViZThlZVwvZGQ1MWt3dS1kMTgxOWI0OC0xNDI2LTQ0OGMtYmFmNC1hNzlhZDlkNmU1ZGMuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.8zFmKFV7_7lFMjEQ_jxSLa2sfALzxlxCs1tyqzSKYbQ" class="pull-right">Basics</h1>

                      <p class="text-center mb-0" style="color: #e39b9f; font-weight: bold;"><em>❝ Dreams can still come true;
                      <br>you need a great deal of energy, determination, and a little bit of luck.❞</em></p>
                            <br>
                            <p class="text-center mb-0" style="color: #444;"><strong>Intelligent  •  Creative  •  Sweet  •  Social  •  Clumsy</strong>
                            <br>
                            <br>Lotte loves to read books on alchemy, magic and crafting materials.
                            <br>She mainly creates potions for customers in need, such as love potions, cures and etc.</p>
                            <br>
                            <hr class="mt-2 mb-3">
                        <div class="row">
                            <div class="col-sm-6">
                                <span class="text-uppercase" style="color:#e39b9f; font-weight: bold;">Name</span>
                                <span class="pull-right" style="color: #444;">Lotte</span>
                                <hr class="my-2">
                            </div>
                            <hr class="mt-2 mb-3">
                            <div class="col-sm-6">
                                <span class="text-uppercase" style="color:#e39b9f; font-weight: bold;">Birthdate</span>
                                <span class="pull-right" style="color: #444;">December 13th</span>
                                <hr class="my-2">
                            </div>

                            <div class="col-sm-6">
                                <span class="text-uppercase" style="color:#e39b9f; font-weight: bold;">Gender</span>
                                <span class="pull-right" style="color: #444;">Female</span>
                                <hr class="my-2">
                            </div>

                            <div class="col-sm-6">
                                <span class="text-uppercase" style="color:#e39b9f; font-weight: bold;">Age</span>
                                <span class="pull-right" style="color: #444;">16</span>
                                <hr class="my-2">
                            </div>

                            <div class="col-sm-6">
                                <span class="text-uppercase" style="color:#e39b9f; font-weight: bold;">Species</span>
                                <span class="pull-right" style="color: #444;">Bunny Kemonomimi</span>
                                <hr class="my-2">
                            </div>

                            <div class="col-sm-6">
                                <span class="text-uppercase" style="color:#e39b9f; font-weight: bold;">Body Type</span>
                                <span class="pull-right" style="color: #444;">Petite</span>
                                <hr class="my-2">
                            </div>

                            <div class="col-sm-6">
                                <span class="text-uppercase" style="color:#e39b9f; font-weight: bold;">Height</span>
                                <span class="pull-right" style="color: #444;">150cm</span>
                                <hr class="my-2 hidden-md-up">
                            </div>

                            <div class="col-sm-6">
                                <span class="text-uppercase" style="color:#e39b9f; font-weight: bold;">Job</span>
                                <span class="pull-right" style="color: #444;">Modern Day Alchemist</span>
                            </div>
                        </div>

                        <div>
                            <hr class="mt-2 mb-3">

      <!------------------------------- LIKES & DISLIKES ----------------------------------->
         <div class="row">
           <div class="col-sm-6 mb-2">
             <table style="width: 700px; border: none;">
              <tr>
               <td style="padding: 10px 20px 20px; width: 50%; vertical-align: top; text-align:justify; color: #444;">
                <h2 style="margin: 0;text-transform: uppercase;color: #e39b9f; font-size: 16px; font-weight: bold;letter-spacing: 1px;">
                  Likes
                </h2>
                   <br>
                   ✔  Books
                   <br>
                   ✔  Potion Making
                   <br>
                   ✔  Desserts
                   <br>
                   ✔  Soft fluffy plushies
                   <br>
                   ✔  Bubble Milk Tea ★
                   </td>
               <td style="padding: 10px 20px 20px;width: 50%;vertical-align: top;text-align:justify; color: #444;">
                   <h2 style="margin: 0;text-transform: uppercase;color: #e39b9f;font-size: 16px;font-weight: bold;letter-spacing: 1px;">
                  Dislikes
                   </h2>
                   <br>
                   ✘  Bitter foods
                   <br>
                   ✘  Dirty things
                   <br>
                   ✘  Arguments
                    </td>
                      </tr>
                       </table>
                          </div>
                        </div>
                      </div>
                    </div>
                 </div>

                <!------------------------------------ SECOND TAB ------------------------------------------------------------->
                <div class="tab-pane fade" data-toggle="tab" id="TWO">
                    <div class="px-4 pt-3 pb-1" style="height: 630px; overflow: auto; color: #444;">
                        <h1 style="color: #a98073; letter-spacing:1px;" class="display-4 text-uppercase mb-3"><img width="50" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/eddc92fb-46cf-4017-8480-f397d15be8ee/dd51kwu-d1819b48-1426-448c-baf4-a79ad9d6e5dc.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2VkZGM5MmZiLTQ2Y2YtNDAxNy04NDgwLWYzOTdkMTViZThlZVwvZGQ1MWt3dS1kMTgxOWI0OC0xNDI2LTQ0OGMtYmFmNC1hNzlhZDlkNmU1ZGMuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.8zFmKFV7_7lFMjEQ_jxSLa2sfALzxlxCs1tyqzSKYbQ" class="pull-right">About</h1>
                        <p>Appearing as a normal high school girl, Lotte is actually a modern day alchemist who makes potions upon her customers' requests. She graduated university at the young age of 13, aptly called a child-genius by people around her (they're not wrong!).</p>

                        <p>With the knowledge she learnt from the nation's best Department of Medicine and Science, along with traditional alchemy skills that were passed down to her by her ancestors', she makes high quality potions for people in need as her livelihood. However, how she is able to find the most absurd and rare ingredients for some of the strangest and strongest potions, we will never know.</p>
                    </div>
                </div>

                <!------------------------------------ THIRD TAB ------------------------------------------------------------->
                <div class="tab-pane fade" data-toggle="tab" id="THREE">
                    <div class="px-4 pt-3 pb-1" style="height: 630px; overflow: auto;">
                        <h1 style="color: #a98073; letter-spacing:1px;" class="display-4 text-uppercase mb-3"><img width="50" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/eddc92fb-46cf-4017-8480-f397d15be8ee/dd51kwu-d1819b48-1426-448c-baf4-a79ad9d6e5dc.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2VkZGM5MmZiLTQ2Y2YtNDAxNy04NDgwLWYzOTdkMTViZThlZVwvZGQ1MWt3dS1kMTgxOWI0OC0xNDI2LTQ0OGMtYmFmNC1hNzlhZDlkNmU1ZGMuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.8zFmKFV7_7lFMjEQ_jxSLa2sfALzxlxCs1tyqzSKYbQ" class="pull-right">Relationships</h1>

                        <div class="row">
                            <!--------------------------- CHARACTER LINK -------------------------------------->
                            <div class="col-12 mb-3">
                                <img src="https://file.toyhou.se/characters/3968082?1556037118" style="padding-right: 20px; padding-bottom: 30px; max-height:200px;" class="rounded float-sm-left ml-sm-2 d-block mx-auto" />

                                <p class="my-2" style="letter-spacing:1px; font-size: 14pt; font-weight: bold;"><a href="https://toyhou.se/3968082.-blaire" style="color: #e39b9f;">
                                Blaire</a>

                                <span class="text-muted small mt-1" style="letter-spacing:1px; font-weight:300; color: #444;">
                                [ best friend ]</span></p>

                                <p style="color: #444;">Lotte's best friend.
                                <br>They even have their own theme song together. <a style="color: #e39b9f;" href="https://www.youtube.com/watch?v=dBwjqSweKJk">♪♫</a>
                                <br><br><br><br><br><br>
                            <hr class="mt-2 mb-3"></p>
                            </div>

                            <h1 style="color: #a98073; letter-spacing:1px;" class="display-4 text-uppercase mb-3">  Commission Guide</h1>
                            <blockquote style="border-left:3px solid #e39b9f; padding:0px 0px 0px 10px;margin:0;"><p style="color: #444; font-size: 11pt;">
                          <i class="fas fa-flask-potion" style="color:#e39b9f;"></i>  She has her hair pulled to the side with 3 pink bobby pins (not  braided).
                          <br>
                          <br><i class="fas fa-flask-potion" style="color:#e39b9f;"></i>  She also has a big pink skinny ribbon bow in the back of her hair.
                          <br>
                          <br><i class="fas fa-flask-potion" style="color:#e39b9f;"></i>  She has a <a style="color: #e39b9f;" href="https://toyhou.se/3190065.-lotte/gallery#11023835">big brown messenger bag</a> and glasses, but both are optional!
                          </p></blockquote>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <p class="text-right small" style="color:#444;">HTML by @lowkeywicked  •  Edited by @elxyie  </p>
</div>