OC carrd F2U ToyHouse Character code

<!-------
CODE BY CLOWNIICAT ON TOYHOUSE
DO NOT STEAL/REMOVE CREDIT

IMPORTANT: have WYSIWYG off!! it probably will break if you have it on, and its difficult to edit with it

Palette to change colours!!
select the colour and press Ctrl+F to replace it

Main colour: #555555
Text Boxes: #dddddd
Basic Info Box: #444444
Tiny boxes in basic info box: #333333


-------->



<p class="d-block d-md-none faded text-secondary" style="text-align: center">
    hey! this code is a little wonky on mobile! I suggest viewing it on a tablet or desktop!
    </p>

<div class="mx-auto my-4 p-3" style="background-color:#555555;
border-top-right-radius: 50px;
border-top-left-radius: 50px;
border-bottom-right-radius: 25px;
border-bottom-left-radius: 25px;

max-width: 600px">

            <div class="m-2 p-3 mb-4 text-dark" style="background-color: #dddddd;
            border-top-right-radius: 25px;
            border-top-left-radius: 25px;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;

            "><p style=" text-align: center">quote or something</p></div>

    <div class="row no-gutters">

        <!------

        ICON


        ------->

  <div class="col-sm-4 p-3 mt-2 ml-4">

      <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/69400902_hnlOorrfYmpmrhh.png" style="height: 160px; border-radius: 25px; object-fit: cover;width: 160px">

            <p class="d-none d-md-block" style="text-align: center; font-size: 20px; color: #dddddd">⋆⋇⋆✦⋆⋇⋆</p>

            </div>
            <!--------

            BASIC INFO BOX

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


  <div class="col-6 p-1">


      <div class="m-2 p-3" style="background-color: #444444; border-radius: 25px; max-width: 320px; width: 310px">

<div class="row no-gutters" style="overflow: auto; height: 180px">
  <div class="col-sm-6 p-1 mt-1 pl-3" style="background-color:#333333; border-radius: 5px;font-family: Lucida Console, monospace; font-weight: bold;">NAME</div>
  <div class="col-sm-6 p-1 mt-1 pl-3">content</div>

    <div class="col-sm-6 p-1 mt-1 pl-3" style="background-color:#333333; border-radius: 5px;font-family: Lucida Console, monospace; font-weight: bold;">SPECIES</div>
  <div class="col-sm-6 p-1 mt-1 pl-3">content</div>

    <div class="col-sm-6 p-1 mt-1 pl-3" style="background-color:#333333; border-radius: 5px;font-family: Lucida Console, monospace; font-weight: bold;">GENDER</div>
  <div class="col-sm-6 p-1 mt-1 pl-3">content</div>

    <div class="col-sm-6 p-1 mt-1 pl-3" style="background-color:#333333; border-radius: 5px;font-family: Lucida Console, monospace; font-weight: bold;">ORIENTATION</div>
  <div class="col-sm-6 p-1 mt-1 pl-3">content</div>

      <div class="col-sm-6 p-1 mt-1 pl-3" style="background-color:#333333; border-radius: 5px;font-family: Lucida Console, monospace; font-weight: bold;">PRONOUNS</div>
  <div class="col-sm-6 p-1 mt-1 pl-3">content</div>

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

  </div>
  </div>
  </div>
<!-----

DESCRIPTION THINGY

------>



      <div class=" p-3 mx-auto mt-3" style="background-color: #333333;
      border-top-left-radius: 25px;
      border-top-right-radius: 25px;

      width: 500px">

          <p style="color: black; font-size: 18px;font-family: Lucida Console, monospace; font-weight: bold;">ABOUT •••••••</p>

      </div>
      <div class="p-3 mx-auto text-dark mb-4" style="background-color: #dddddd;
      border-bottom-left-radius: 25px;
      border-bottom-right-radius: 25px;

      width: 500px; height: 250px; overflow:auto">

          <p>

              <h2 style="padding-bottom: 5px;font-family: Lucida Console, monospace; font-weight: bold;">PERSONALITY</h2>

              THIS BOX SCROLLS!!! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.

<hr style="border-width: 2px; border-color: #444444">

              <h2 style="padding-bottom: 5px;font-family: Lucida Console, monospace; font-weight: bold;">STORY</h2>

              THIS BOX SCROLLS!!! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.


</p>


      </div>

<!-------

MOODBOARD/IMAGE THINGY


--------->
   <div class="row no-gutters">
        <div class="col-3 p-2">
            <div>
            <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/69400902_hnlOorrfYmpmrhh.png" style="height: 65px; width: 150px;object-fit: cover; border-radius: 10px">
            </div>
        </div>
        <div class="col-3 p-2">            <div>
            <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/69400902_hnlOorrfYmpmrhh.png" style="height: 65px; width: 150px;object-fit: cover; border-radius: 10px">
            </div>
</div>
        <div class="col-3 p-2">            <div>
            <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/69400902_hnlOorrfYmpmrhh.png" style="height: 65px; width: 150px;object-fit: cover; border-radius: 10px">
            </div>
</div>
        <div class="col-3 p-2">            <div>
            <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/69400902_hnlOorrfYmpmrhh.png" style="height: 65px; width: 150px;object-fit: cover; border-radius: 10px">
            </div>
</div>
    <!--
    CREDIT, DO NOT REMOVE
    --->
        <a href="https://toyhou.se/clowniicat" class="text-secondary">
        <i class="fas fa-code mt-2 ml-2 faded pull-right"></i>
</a>
</div>
</div>
</div>