SB Ahri

<div class="container py-3" style="max-width:950px; margin-top:10px;">

<div class="card card-block p-2" style="border-top-left-radius:2.5em; border-top-right-radius:2.5em; border-bottom-left-radius:0.8em; border-bottom-right-radius:0.8em; box-shadow: 0px 0px 20px rgba(0,0,0,.08); background-color:#fff">

<!------ [ PATTERN ]  --------->
<div class="card-block rounded-0 mb-2" style="background: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/cb94e5c2-ba0d-4038-9193-db485f84207c/df612bw-6e560970-c40d-4d84-abb5-d3de82dc6811.jpg/v1/fill/w_1280,h_288,q_75,strp/league_of_legends_fantasy_4k_90_3840x2400_by_whyareyouthatsad_df612bw-fullview.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9Mjg4IiwicGF0aCI6IlwvZlwvY2I5NGU1YzItYmEwZC00MDM4LTkxOTMtZGI0ODVmODQyMDdjXC9kZjYxMmJ3LTZlNTYwOTcwLWM0MGQtNGQ4NC1hYmI1LWQzZGU4MmRjNjgxMS5qcGciLCJ3aWR0aCI6Ijw9MTI4MCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.jXOmAaATplPHeMdhjTpD-k_Y9kESUtlMWqJ8h-6CfU8);
        height: 200px;
        border-top-left-radius:2.5em;
        border-top-right-radius:2.5em;
        background-size: 100%;
        background-position:100% 15%"></div>

    <div class="card card-block border-0 p-0 col-md-12 rounded-0" style="height:400px; background:url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/cb94e5c2-ba0d-4038-9193-db485f84207c/df60xw4-aa91852c-aea3-4071-ae4c-a76e8e0ccf4a.jpg/v1/fill/w_1164,h_687,q_70,strp/1645e88b790e3c97204b0702da8e9416_by_whyareyouthatsad_df60xw4-pre.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9NzE3IiwicGF0aCI6IlwvZlwvY2I5NGU1YzItYmEwZC00MDM4LTkxOTMtZGI0ODVmODQyMDdjXC9kZjYweHc0LWFhOTE4NTJjLWFlYTMtNDA3MS1hZTRjLWE3NmU4ZTBjY2Y0YS5qcGciLCJ3aWR0aCI6Ijw9MTIxNSJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.03yJqiyx--4xxsCS9bWGGDNvJS_vbtuBdSI9xOg19x4); color:#855B58; border-bottom-left-radius:0.6em; border-bottom-right-radius:0.6em;">

        <div class="row no-gutters">
              <div class="col-md-3 p-0">

            <!-------- AVATAR | Square images look better ------->

                <img src="https://64.media.tumblr.com/469c84b9b8c62cc1f28f6ac2c348f92d/20cdf3e1aa04bf87-d5/s400x600/a144cf5c52bb3db3694b35eb71973793af801dde.pnj"
                    class="card border-0 p-2 rounded-circle ml-4 mb-0"
                    style="max-height: 190px; margin-top: -100px; border-radius:100%; background-color:#fff">

            <!------- ART STATUS -------------

                - For O P E N use:

                    fa-check

                - For C L O S E D use:

                    fa-times

                - For M A Y B E use:

                    fa-question

                - For F R I E N D S  O N L Y use:

                    fa-heart

            ---------------------------------->

        <div class="row no-gutters">
            <div class="col-12 mx-2 mt-3 row no-gutters">
                <div class="col-12 p-1">
                  <div class="card card-block p-2 h-100" style="background-color:#fff;">

                    <p style="letter-spacing:0.7px"> 𝐜𝐨𝐦𝐦𝐢𝐬𝐬𝐢𝐨𝐧𝐬  <a style="color:#b5d2d4">
                        <span data-toggle="tooltip" data-placement="right" title="closed" i class="fas fa-times pull-right px-1 pt-1"></i></a></span></p>

                  </div>
                </div>
                <div class="col-12 p-1">
                  <div class="card card-block p-2 h-100" style="background-color:#fff;">

                    <p style="letter-spacing:0.7px"> 𝐚𝐫𝐭 𝐭𝐫𝐚𝐝𝐞𝐬  <a style="color:#FFC4C5">
                        <span data-toggle="tooltip" data-placement="right" title="maybe" i class="fas fa-check pull-right px-1 pt-1" style="color:#c2e0e2"></i></a></span></p>

                  </div>
                </div>
                <div class="col-12 p-1">
                  <div class="card card-block p-2 h-100" style="background-color:#fff;">

                    <p style="letter-spacing:0.7px"> 𝐫𝐞𝐪𝐮𝐞𝐬𝐭𝐬  <a style="color:#FFC4C5">
                        <span data-toggle="tooltip" data-placement="right" title="friends only" i class="fas fa-question pull-right px-1 pt-1" style="color:#d3eced"></i></a></span></p>

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

    <!----- [ BUTTON LINK ] ------>
        <ul class="nav flex-column mb-4;">

            <li class="col-md-12 col-12 mb-3 px-1 mt-3 ml-2">
            <a class="btn btn-secondary text-uppercase btn-block btn-outline-secondary text-secondary" href="FOLDER-LINK">

            <i class="fal fa-tag"></i>  𝐔𝐅𝐓/𝐒 𝐅𝐎𝐋𝐃𝐄𝐑


            </a>
            </li>

        </ul><!----- [ //END BUTTON LINK// ] ------>

        <div class="flex-grow-1 rounded mb-1 mx-3" style="background:#fff url(&quot;https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/cb94e5c2-ba0d-4038-9193-db485f84207c/df612b1-ac4d7843-bc5d-493d-81b4-c7311ab78e42.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2NiOTRlNWMyLWJhMGQtNDAzOC05MTkzLWRiNDg1Zjg0MjA3Y1wvZGY2MTJiMS1hYzRkNzg0My1iYzVkLTQ5M2QtODFiNC1jNzMxMWFiNzhlNDIuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.tjx8_ciKUnqRpsmzs30mAakDHKCfWrE0HbX3dcmMl8c&quot;) no-repeat center; background-size:cover; min-height:88px; width:212px; border-width:1px; border-color:#ffff; border-radius: 0.5em; background-position:100% 18%"></div>


              </div><!---------- [ //END FIRST COLUMN// ] ------>




<!------- [ SONG CARD ] ----------

    Music Player by Bakucodes

    - How to Use:
    https://toyhou.se/8682081.all-music-players-wip/8682087.tutorial


--------------------------------->
<div class="col-md-9 p-1">
        <div class="card card-block p-0 my-2 mx-2" style="background-color:#fff;">


        <div class="row no-gutters mt-1 mb-0">
              <div class="col-1 p-1">

          <a class="p-0 mt-1 btn btn-outline-dark melody-embed" style="border:0;position:relative;height:1.5rem;width:1.9rem;z-index:2;color:#999;">

        <!---- playlist ID ----->
             <iframe style="opacity:.01;position:absolute;left:5;right:2;top:0;bottom:0;" class="h-100 w-100"
              src="

              https://www.youtube-nocookie.com/embed/hRGfo3K37zs

              "frameborder="0"></iframe>
              <i class="far fa-play fa-fw fa-2x ml-2" style="z-index:-1;position:absolute;left:0;top:0;font-size:1rem;text-align:center;height:100%;width:100%; color:#c2e0e2"></i>
              </a></div>

              <!--- line --->
              <div class="col-7 p-0">
              <hr class="mt-3 p-0" style="border-color: #e4e4e4">  </div>


              <!--- SONG INFO --->
              <div class="col-4 p-1 text-center mt-0 px-2">

              <!--- PLAYLIST CAROUSEL --->

              <div id="carousel1" class="carousel slide mx-auto p-0 mb-0" data-ride="carousel" style="color:#855B58;">
          <div class="carousel-inner">
            <!---- SONG INFO ---->
            <div class="carousel-item active text-truncate" style="font-size:16px; font-weight:lighter; color:#c2e0e2;">
               ✿   ✿   ✿
            </div>


    <!--- put more songs before this line --->


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


        <!----------------- [ THIRD COLUMN ] ------------------->
        <div class="row no-gutters pl-2">
            <div class="col-md-3 order-lg-1 px-2">

                                <!------- [ MOODBOARD CARD ] ---------->
                <div class="flex-grow-1 rounded mb-3 mt-2" style="background:#fff url(&quot;https://64.media.tumblr.com/42af9fee6494127aa8898217b3f60a3b/90c5e11d362279f0-1e/s400x600/5f64a1ee351b44f97bf21c2dc9a1928be0682f1a.pnj&quot;) no-repeat center; background-size:cover; min-height:90px; width:150px; border-width:0px; border-radius: 0.5em; background-position:100% 18%"></div>


                <!------- [ MOODBOARD CARD ] ---------->
                <div class="flex-grow-1 rounded mb-3 mt-2" style="background:#fff url(&quot;https://64.media.tumblr.com/73db11e4c0bfb8bce9c82f46225f77f9/90c5e11d362279f0-7f/s400x600/80385f20c3a9e12a2641d391f680accd3fb61200.pnj&quot;) no-repeat center; background-size:cover; min-height:90px; width:150px; border-width:0px; border-radius: 0.5em;"></div>


                <!------- [ MOODBOARD CARD ] ---------->
                <div class="flex-grow-1 rounded mb-2 mt-2" style="background:#fff url(&quot;https://64.media.tumblr.com/d1cb5f96f045eed966818ce4fbcedfa8/90c5e11d362279f0-51/s400x600/517c35e258b5cff89a96e65078dd987d9c8d0f2b.pnj&quot;) no-repeat center; background-size:cover; min-height:90px; width:150px; border-width:0px; border-radius: 0.5em;"></div>

            </div><!----------------- [ //END THIRD COLUMN// ] ------------------->


            <div class="col-md-9">
                <div class="card card-block p-3 mb-2" style="height:235px; overflow:auto; background-color:#fff;">

                <!------- [ ABOUT ME CARD ] ------------->

                <br>
                <p style="font-size:10px; letter-spacing:0.6px;">


                <span class="badge font-weight-normal" style="background-color:#a8c4c6;;font-size:7pt;padding:7px;">he/she</span>


                <span class="badge font-weight-normal" style="background-color:#b5d2d4;;font-size:7pt; padding:7px;">young adult</span>

                <span class="badge font-weight-normal" style="background-color:#c2e0e2;;font-size:7pt; padding:7px;">rus/eng</span>


                <span class="badge font-weight-normal" style="background-color:#d3eced;;font-size:7pt; padding:7px;">01/03</span>

                </p>
                <hr style="width:100%; border-color:#e4e4e4" class="my-0">


                <br>
                <p style="font-size:10px; letter-spacing:0.5px;">
                <b>Hello, I'm glad to see you on my profile!</b>  (o´ω`o)ﾉ

                <br><br>I draw in traditional and digital, and also do cross-stitch.
                I really like to collect various characters, and I love them all and use them in some ideas, so don't be afraid of the number of OCs on this account!

                <br><br>Also feel free to chat with me in the comments, dm or on the forum, I'm always glad to meet new people and I'm ready to participate in trades for art/characters. I speak a little badly in English and I can make mistakes, but I try to write as clearly and kindly as possible! ♡

                </p>

                </div><!------- [ //END ABOUT ME// ] ---------->


        <div class="card card-block p-2 mb-2" style="background-color:#fff;">

           <div style="text-align: center;">

            <!------- [ SOCIAL MEDIAS ] ---------->
            <a href="https://vk.com/whyareuthatsad" style="color: #a8c4c6; padding-left: 5px; padding-right: 5px;" data-toggle="tooltip"
                title="VK"><i class="fab fa-vk mx-2"></i></a>


            <a href="https://toyhou.se/soumiazoe" style="color: #b5d2d4; padding-left: 5px; padding-right: 5px;" data-toggle="tooltip"
                title="second acc"><i class="fas fa-home-heart mx-2"></i></a>

            <a href="LINK" style="color: #c2e0e2; padding-left: 5px; padding-right: 5px;" data-toggle="tooltip"
                title="furaffinity"><i class="fas fa-paw mx-2"></i></a>

            <a style="color: #d3eced; padding-left: 5px; padding-right: 5px;" data-toggle="tooltip"
                title="whyareuthatsad #3508"><i class="fab fa-discord mx-2"></i></a>

        </div>

        </div><!------- [ //END SOCIAL MEDIAS// ] ---------->


            <!---------------- [ OTHER ] ----------------------------------------->

            <ul class="nav row no-gutters text-center mb-0">
                <li class="col-md-4 mx-auto mb-2" style="">
                    <a class="btn btn-secondary text-muted py-2 nav-link" href="https://toyhou.se/15580296.--info" style="background-color:#fff; border-color:#fff">

                    𝐩𝐫𝐞𝐟𝐞𝐫𝐞𝐧𝐜𝐞𝐬, 𝐬𝐭𝐚𝐭𝐮𝐬</a></li>

                <li class="col-md-4 mx-auto mb-2 px-1" style="max-width:190px;">
                    <a class="btn btn-secondary text-muted py-2 nav-link" href="https://toyhou.se/14552269.sketch" style="background-color:#fff; border-color:#fff">

                        𝐭𝐫𝐚𝐝𝐢𝐭𝐢𝐨𝐧𝐚𝐥 𝐚𝐫𝐭</a></li>

                <li class="col-md-4 mx-auto mb-2" style="">
                    <a class="btn btn-secondary text-muted py-2 nav-link" href="https://toyhou.se/14555567.digital" style="background-color:#fff; border-color:#fff">

                    𝐝𝐢𝐠𝐢𝐭𝐚𝐥 𝐚𝐫𝐭</a></li>

            </ul>


                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--------- CREDITS | please don't delete or I'm gonna cry qoq; --------->
<p class="my-2 text-left mx-2" style="filter:opacity(75%); letter-spacing:1px; font-size:12.5px; font-weight:lighter;">

    <a href="https://toyhou.se/00Ishikawa00" style="color:#aaa;" data-toggle="tooltip" data-placement="bottom" title="code by 00Ishikawa00"> <i class="fal fa-code"></i></a>

    <span style="filter:opacity(45%)">|</span>

    <a href="https://toyhou.se/BakuCodes" data-toggle="tooltip" data-placement="bottom"  title="music player code by Bakucodes" style="color:#aaa"> <i class="fal fa-music"></i></a></p></div>