GARDEN . f2u toyhouse code

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

       GARDEN - F2U TOYHOUSE CODE

       need a live code editor? use [https://th.circlejourney.net/]!
       need more icons? check [https://fontawesome.com/search]!
       replace IMAGELINK with the link to your image! keep it in parentheses or it wont work.

       accent colors - use ctrl + f to quickly find and replace the color!

       accent 1: #749939
       accent 2: #91AC48

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

<div class="mx-auto text-justify" style="filter:drop-shadow(0px 0px 1px black); max-width:600px; font-size:12px; letter-spacing:0.8px;">
    <div class="row no-gutters">

        <div class="col-md-4">
         <div class="card rounded-0 m-1 p-1 bg-faded" style="height:170px;">
             <div class="card rounded-0 p-1 h-100">
                 <div class="card rounded-0 p-1 border-0 h-100" style="

                 background-image: url(IMAGELINK);

                 background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: scroll;"></div>

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

        <div class="col-md-7">
          <div class="card rounded-0 m-1 p-1 bg-faded">
              <div class="card rounded-0 p-1">

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

                      <span style="font-variant:small-caps; font-size:1rem; color:#749939;">
                          Character Name<i>!</i>
                      </span>

                      <!--- fa icon --->

                      <span style="font-variant:small-caps; font-size:1rem; color:#749939;">
                          <i class="fa-solid fa-spa"></i>
                      </span>

                  </div>

              </div>
          </div>

          <div class="card rounded-0 m-1 p-1 bg-faded" style="height:122px;">
              <div class="card rounded-0 p-1 h-100" style="overflow:auto;">

                  <div class="row no-gutters">

                      <!--- name --->

                      <div class="col-md-6 pt-2 pl-2 pr-2">
                         <div class="justify-content-between">
                            <span style="color:#749939; font-weight:500;">
                               <i class="fa-light fa-signature"></i> name
                            </span> content
                       </div>
                     </div>

                     <!--- age --->

                      <div class="col-md-6 pt-2 pl-2 pr-2">
                         <div class="justify-content-between">
                            <span style="color:#749939; font-weight:500;">
                               <i class="fa-light fa-cake"></i> age
                            </span> ## (00/00)
                       </div>
                     </div>

                     <!--- gender --->

                      <div class="col-md-6 pt-2 pl-2 pr-2">
                         <div class="justify-content-between">
                            <span style="color:#749939; font-weight:500;">
                               <i class="fa-light fa-transgender"></i> gender
                            </span> content
                       </div>
                     </div>

                     <!--- pronouns --->

                      <div class="col-md-6 pt-2 pl-2 pr-2">
                         <div class="justify-content-between">
                            <span style="color:#749939; font-weight:500;">
                               <i class="fa-light fa-comments"></i> pronouns
                            </span> con/tent
                       </div>
                     </div>

                     <!--- orientation --->

                      <div class="col-md-6 pt-2 pl-2 pr-2">
                         <div class="justify-content-between">
                            <span style="color:#749939; font-weight:500;">
                               <i class="fa-light fa-heart"></i> orient.
                            </span> content
                       </div>
                     </div>

                     <!--- species/race --->

                      <div class="col-md-6 pt-2 pl-2 pr-2">
                         <div class="justify-content-between">
                            <span style="color:#749939; font-weight:500;">
                               <i class="fa-light fa-dna"></i> species
                            </span> or race
                       </div>
                     </div>

                     <!--- occupation --->

                      <div class="col-md-6 pt-2 pl-2 pr-2">
                         <div class="justify-content-between">
                            <span style="color:#749939; font-weight:500;">
                               <i class="fa-light fa-briefcase"></i> occup.
                            </span> content
                       </div>
                     </div>

                     <!--- designer --->


                      <div class="col-md-6 pt-2 pl-2 pr-2">
                         <div class="justify-content-between">
                            <span style="color:#749939; font-weight:500;">
                               <i class="fa-light fa-palette"></i> designer
                            </span> content
                       </div>
                     </div>

                     <!--- add/delete above THIS line! add as much as you want --->

                  </div>

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

        <!--- little decorative card --->

        <div class="col-md-1">
            <div class="card rounded-0 m-1 p-1 border-0" style="background:linear-gradient(0deg, #91AC48 50%, #749939 50%); height:170px;">
            </div>
        </div>
        <!--- little decorative card end --->

    </div>

    <div class="row no-gutters">
            <div class="col-md-7">
                <div class="card rounded-0 m-1 p-1 bg-faded" style="height:200px;">
                 <div class="card rounded-0 p-1 h-100" style="overflow:auto;">

                     <p>you can write about your character here! can be their backstory, about their personality, whatever! box will scroll. <b>bold</b> <i>italics</i> <s>strikethrough</s> <u>underline</u> <a href="LINKHERE" style="color:#749939;">link</a>. Eu suscipit dictum nulla urna libero consectetuer varius dui sollicitudin porta, potenti augue sed lobortis metus tincidunt auctor hendrerit hac. Conubia luctus. Tellus habitant ornare viverra ut ligula placerat vitae.</p>

                     <p>Justo leo, ridiculus pede nunc molestie eleifend. Sodales class dapibus platea, gravida vehicula laoreet condimentum praesent lacinia tortor. Bibendum. Suspendisse tortor tincidunt ligula lorem accumsan commodo litora. Magnis suspendisse non.</p>

                     <!--- add/delete paragraphs above THIS line! --->

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

            <div class="col-md-5">
                <div class="card rounded-0 m-1 p-1 bg-faded" style="height:96px;">
                    <div class="card rounded-0 p-1 h-100" style="overflow:auto;">

                        <!--- likes --->

                 <p class="mb-2">
                 <i class="fa-solid fa-heart mt-1 ml-1 mr-2 float-left" style="font-size:1rem; color:#749939;"></i>

                     some stuff your character likes here! box scrolls! thing, thing, <b>this thing</b>, thing

                     </p>

                     <!--- dislikes --->

                      <p>
                 <i class="fa-solid fa-heart-crack mt-1 ml-1 mr-2 float-left" style="font-size:1rem; color:#749939;"></i>

                     some stuff your character <i>doesn't</i> like here! thing, thing, <b>this thing</b>, thing

                     </p>

                    </div>
                </div>

                <div class="card rounded-0 m-1 p-1 bg-faded" style="height:100px;">
                    <div class="card rounded-0 p-1 h-100" style="overflow:auto;">

                        <!--- trivia --->

                        <ul class="ml-n3">

                            <li class="mb-1">
                                some trivia notes here!
                            </li>

                             <li class="mb-1">
                                box scrolls, btw! so add as much as you want
                            </li>

                            <ul class="ml-n4">subnote on the note above?
                            </ul>

                             <li class="mb-1">
                                note note note
                            </li>

                            <!--- add/delete above this line--->

                        </ul>

                        <!--- end trivia--->


                    </div>
                 </div>

            </div>
        </div>

        <!--- MOODBOARD --->

        <div class="row no-gutters">
          <div class="col-md-4">

          <!--- image one --->

              <div class="card rounded-0 m-1 p-1 bg-faded" style="height:70px;">
                 <div class="card rounded-0 p-1 h-100">
                  <div class="card rounded-0 p-1 border-0 h-100" style="

                 background-image: url(IMAGELINK);

                 background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: scroll;">

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

          </div>

           <!--- image one  end --->

            <!--- image two --->

          <div class="col-md-4">

              <div class="card rounded-0 m-1 p-1 bg-faded" style="height:70px;">
                 <div class="card rounded-0 p-1 h-100">
                  <div class="card rounded-0 p-1 border-0 h-100" style="

                 background-image: url(IMAGELINK);

                 background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: scroll;">

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

          </div>

           <!--- image two end --->

            <!--- image three --->

          <div class="col-md-4">

              <div class="card rounded-0 m-1 p-1 bg-faded" style="height:70px;">
                 <div class="card rounded-0 p-1 h-100">
                  <div class="card rounded-0 p-1 border-0 h-100" style="

                 background-image: url(IMAGELINK);

                 background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: scroll;">

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

               <!--- image three end --->
          </div>
        </div>

        <div class="card rounded-0 m-1 p-1 border-0" style="background:linear-gradient(90deg, #91AC48 36%, #749939 56%)">

            <!--- CREDIT - DONT TOUCH / REMOVE PLS --->

            <div class="text-right">
                <a data-toggle="tooltip" title="code by raggedinsomnia" href="https://toyhou.se/25717491.f2u-garden" style="color:#fff;"><i class="fa-light fa-comet"></i></a>
            </div>
        </div>
</div>