TWILIGHT . f2u toyhouse code

  <!---------------

    [f2u] twilight - by raggedinsomnia

    accent color: #587478 [use ctrl+f to quickly find and replace the color!]
    need a live code editor? use [https://th.circlejourney.net/]!
    want more icons? check out [https://fontawesome.com/search]!

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


<div class="container py-4 px-0 mx-auto text-justify" style="max-width:600px; font-size:12.4px; letter-spacing:0.7px;">
   <div class="row no-gutters">

      <div class="col-lg-4 pb-2 w-100" style="height:200px;">

      <!--- icon ---->

       <div class="card rounded-0 bg-faded m-1 h-100">
           <div class="card rounded-0 m-1 p-1 h-100" style="background-image: url(IMAGE LINK);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: scroll;">

            </div>

       </div>

       </div>

       <!---- right main content box ------>

       <div class="col-lg-7 pb-2" style="height:200px;">
       <div class="card rounded-0 bg-faded m-1 p-1 h-100" style="max-height:192px;">
           <div class="card rounded-0 h-100 p-1" style="overflow:auto;">
               <div class="justify-content-between">

               <!------ username + icon ------>

               <h5 class="font-italic mt-1" style="color:#587478;">(user)name!!</h5>

               <h5 style="color:#587478;" class="mt-1"><i class="fa-solid fa-star-christmas"></i></h5>
                </div>

                <hr class="w-100 mt-1 mb-1">

               <p>write a bit about yourself here! box will scroll but i reccomend keeping it short. Primis lacinia dignissim gravida in vivamus eros torquent. Vulputate primis pharetra. Malesuada suspendisse nib.</p>

               <hr class="w-100 mt-2 mb-2">

               <!----- art statuses ----->

               <div class="justify-content-between">

               <h5 class="font-italic mt-1" style="color:#587478;">art status</h5>

               <h5 style="color:#587478;" class="mt-1"><i class="fa-solid fa-pencil-paintbrush"></i></h5>

                </div><hr class="w-100 mt-1 mb-1">

               <div class="justify-content-between">
                   <span style="color:#587478;"><b>commissions:</b></span>status
               </div>

               <div class="justify-content-between">
                   <span style="color:#587478;"><b>trades:</b></span>status
               </div>

               <div class="justify-content-between">
                   <span style="color:#587478;"><b>collabs:</b></span>status
               </div>

               <div class="justify-content-between">
                   <span style="color:#587478;"><b>requests:</b></span>status
               </div>

               <hr class="w-100 mt-2 mb-2">

               <!------ featured characters , can be friends if you want! ------->

               <div class="justify-content-between">

               <h5 class="font-italic mt-1" style="color:#587478;">featured</h5>

               <h5 style="color:#587478;" class="mt-1"><i class="fa-solid fa-heart"></i></h5>
                </div>
                <hr class="w-100 mt-1 mb-1">

                <div class="col p-1" style="height:100px;">
                  <div class="row no-gutters">

                  <!---- character one ----->

                  <a href="character link">
                   <div class="card rounded-0 bg-faded m-1">
                    <div data-toggle="tooltip" title="character name" class="card rounded-0 m-1" style="background-image: url(https://file.garden/YZgTmvtBp0P7hdNF/toyhouse/h/IMG_0509.jpeg); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: scroll; height:60px; width:60px;">
                    </div>
                   </div>
                   </a>

                   <!----- end ----->

                   <!---- character two ----->

                   <a href="character link">
                   <div class="card rounded-0 bg-faded m-1">
                    <div data-toggle="tooltip" title="character name" class="card rounded-0 m-1" style="background-image: url(https://file.garden/YZgTmvtBp0P7hdNF/toyhouse/h/IMG_0509.jpeg); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: scroll; height:60px; width:60px;">
                    </div>
                   </div>
                   </a>

                   <!----- end ------>

                   <!---- character three ----->

                   <a href="character link">
                   <div class="card rounded-0 bg-faded m-1">
                    <div data-toggle="tooltip" title="character name" class="card rounded-0 m-1" style="background-image: url(https://file.garden/YZgTmvtBp0P7hdNF/toyhouse/h/IMG_0509.jpeg); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: scroll; height:60px; width:60px;">
                    </div>
                   </div>
                   </a>

                   <!----- end ----->

                   <!---- character four ----->

                   <a href="character link">
                   <div class="card rounded-0 bg-faded m-1">
                    <div data-toggle="tooltip" title="character name" class="card rounded-0 m-1" style="background-image: url(https://file.garden/YZgTmvtBp0P7hdNF/toyhouse/h/IMG_0509.jpeg); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: scroll; height:60px; width:60px;">
                    </div>
                   </div>
                   </a>

                   <!---- end ... you can add more characters above this line if you want ---->

                  </div>
                </div>

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

        <div class="col-lg-1 pb-2">
            <div class="card rounded-0 bg-faded m-1 h-100">
                <div class="card rounded-0 m-1 p-1 h-100 text-center">

                    <!----- music! ----->

                <span>
                   <a data-toggle="tooltip" title="song - artist">

                       <!---- music embed - replace IDHERE with the string of numbers after the "watch?v=" in a yt link

                       example: https://www.youtube.com/watch?v=[*0I647GU3Jsc*]
                       ------->

                       <iframe frameborder="0" style="height:1rem; width:1rem; position:absolute; opacity:0.001;"
                       src="https://www.youtube.com/embed/IDHERE?controls=0"></iframe>

                 <i class="fa-light fa-star-christmas mt-1" style="color:#587478; font-size:19px;"></i>

                   </a>
               </span>


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

            <!----- links - you can change them to fit whatever links you have! replace LINKHERE with the corresponding link ----->

            <div class="card rounded-0 bg-faded m-1 w-100">
                <div class="card rounded-0 m-1 p-1">

                  <ul class="nav row text-center" style="letter-spacing:1.0px;">

                <li class="col">
                    <a class="card bg-faded p-1" style="color:#587478; border-radius:3px;" href="LINKHERE">
                        <i class="fa-brands fa-instagram"></i> instagram
                    </a>
               </li>

                <li class="col">
                    <a class="active card bg-faded p-1" style="color:#587478; border-radius:3px;" href="LINKHERE">
                        <i class="fa-brands fa-deviantart"></i>
                        deviantart
                    </a>
               </li>

               <li class="col">
                    <a class="active card bg-faded p-1" style="color:#587478; border-radius:3px;" href="LINKHERE">
                        <i class="fa-solid fa-pen-paintbrush"></i>
                        artfight
                    </a>
               </li>

               <!---- discord - if you wanna link a server, replace it with

               <li class="col">
                    <a class="active card bg-faded p-1" style="color:#587478; border-radius:3px;" href="SERVER LINK">
                        <i class="fab fa-discord"></i>
                        server
                    </a>
               </li>

               ------>

               <li class="col">
                     <a class="active card bg-faded p-1" style="color:#587478; border-radius:3px;">
                        <i class="fa-brands fa-discord"></i> @username
                    </a>
               </li>

               <!---- add more above THIS line ---->


               </ul>


            </div>
        </div>

        <!---- CREDITS --
        DO NOT REMOVE PLEASE!!!! ----->

        <div class="col ml-1">
          <p style="font-size:9.5px;">
          <a href="https://toyhou.se/raggedinsomnia" data-toggle="tooltip" title="code by raggedinsomnia" class="text-muted">
          <i class="fa-thin fa-comet"></i>
          </a>
          </p>
        </div>

        </div>

   </div>