[TH] Macaron

<!--Font colors

BABY PINK #fee9eb
DARK PINK #fc9aab

-->


<!--You can change background pattern here. I suggest you to visit Coulour Lovers. You can create pattern with your own palette.-->
  <div style="width: 830px;margin: 0 auto;background-image: url('https://i.imgur.com/XWhBXBX.png');padding: 40px;border-top: 3px solid #fc9aab;border-bottom: 3px solid #fc9aab;font-family: Roboto;">

    <!--CHARACTER NAME-->
    <h1 style="font-size: 30px;letter-spacing: 8px;color: #fc9aab;">
        🌸 Macaron
    </h1>

    <table style="border:0; background: transparent;border-collapse: collapse;background-color:#fbfbfb;border-width:1px;border-style:solid;border-color:#fee9eb;position:relative;">
      <tr>
        <td style="padding: 20px 0;width: 30%;vertical-align: top;background-color:#fee9eb;text-align:center;">

          <!--Little image above basics. Will be automatically resized-->
          <div style="width: 70%; margin: auto;">
            <img src="https://file.toyhou.se/thumbnails/12911891_C4r.png" style="padding-top:3px;padding-bottom:3px;padding-right:3px;padding-left:3px;border-width:1px;border-style:solid;border-color:#fbfbfb;" >
          </div>


          <!--BASICS

          A "basics" item starts at <div> and ends at </div>-->
          <div style="width:70%;margin:15px auto 2px;text-transform:uppercase;font-size:9px;background-color:#fbfbfb;padding:4px 0;font-weight: bold;color: #fc9aab;letter-spacing: 1px;line-height: 12px;" >
            species
            <br />
            <span style="font-size: 11px;font-weight: normal;color: #666;letter-spacing: 0px;text-transform: none;">
              <a href="https://www.deviantart.com/sawaiidoll/journal/PUFFYPOURI-Closed-Species-578521109" style="color:#666;">puffypouri</a>
            </span>
          </div>
          <div style="width:70%;margin:2px auto;text-transform:uppercase;font-size:9px;background-color:#fbfbfb;padding: 4px 0;font-weight: bold;color: #fc9aab;letter-spacing: 1px;line-height: 12px;" >
            age
            <br />
            <span style="font-size: 11px;font-weight: normal;color: #666;letter-spacing: 0px;text-transform: none;">
              here
            </span>
          </div>
          <div style="width:70%;margin:2px auto;text-transform:uppercase;font-size:9px;background-color:#fbfbfb;padding: 4px 0;font-weight: bold;color: #fc9aab;letter-spacing: 1px;line-height: 12px;" >
            gender
            <br />
            <span style="font-size: 11px;font-weight: normal;color: #666;letter-spacing: 0px;text-transform: none;">
              female
            </span>
          </div>
          <div style="width:70%;margin:2px auto;text-transform:uppercase;font-size:9px;background-color:#fbfbfb;padding: 4px 0;font-weight: bold;color: #fc9aab;letter-spacing: 1px;line-height: 12px;" >
            birthdate
            <br />
            <span style="font-size: 11px;font-weight: normal;color: #666;letter-spacing: 0px;text-transform: none;">
              here
            </span>
          </div>
          <div style="width:70%;margin:2px auto;text-transform:uppercase;font-size:9px;background-color:#fbfbfb;padding: 4px 0;font-weight: bold;color: #fc9aab;letter-spacing: 1px;line-height: 12px;" >
            co-owner
            <br />
            <span style="font-size: 11px;font-weight: normal;color: #666;letter-spacing: 0px;text-transform: none;">
              <a href="https://toyhou.se/cutesu" style="color:#666;">cutesu</a>
            </span>
          </div>

          <!--END OF BASICS-->


        </td>
        <td style="padding: 0;width: 70%;">
          <div style="padding:20px 30px;height:100%;text-align:justify;" >

              <!--TEXT GOES HERE-->
              <!--You can use <p> to create paragraphs or you can use <br> to create a line break-->
              <p style="font-size:12px; text-align: center;">
              <img src="https://i.imgur.com/xB1wyJm.gif"/>
              <br><br>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
              <!--END OF TEXT-->

            </div>
          </td>
        </tr>
    </table>

    <!--LIKES AND DISLIKES-->
    <table style="width:750px;background-color:#fbfbfb;border:1px solid #fee9eb;border-collapse: collapse; margin-top: 20px;">
      <tr>
        <td style="padding: 10px 20px 20px;width: 50%;vertical-align: top;text-align:justify; font-size: 12px;">
          <h2 style="margin: 0;text-transform: uppercase;color: #fc9aab;font-size: 14px;font-weight: bold;letter-spacing: 1px;">
            Likes
          </h2>
            <br>
          <!--Use <br> to create line breaks in your lists-->
          ♡  Text
          <br>
          ♡  Text
          <br>
          ♡  Text
          <br>
          ♡  Text
        </td>
        <td style="padding: 10px 20px 20px;width: 50%;vertical-align: top;text-align:justify; font-size: 12px;">
          <h2 style="margin: 0;text-transform: uppercase;color: #fc9aab;font-size: 14px;font-weight: bold;letter-spacing: 1px;">
            Dislikes
          </h2>
            <br>
          ✕  Text
          <br>
          ✕  Text
          <br>
          ✕  Text
          <br>
          ✕  Text
        </td>
      </tr>
    </table>
    <!--END OF LIKES AND DISLIKES-->

    <!--RELATIONSHIPS-->
    <div style="width:750px;padding: 20px;background-color:#fbfbfb;border:1px solid #fee9eb; margin-top: 20px;">
      <h2 style="margin: 0;text-transform: uppercase;color: #fc9aab;font-size: 14px;font-weight: bold;letter-spacing: 1px;">
        Relationships
      </h2>

      <!--Beginning of relationship item-->
      <table style="background-color:#fbfbfb;border:0;background: transparent;border-collapse: collapse;margin-top: 10px;">
        <tr>
          <td style="padding: 0; width:100px;vertical-align: top;" rowspan="2">
            <a href="#"><img src="http://placehold.it/100x100/fee9eb/fc9aab" style="padding:3px;border:1px solid #fee9eb;"></a>
          </td>
          <td style="padding: 0;vertical-align: top;">
            <div style="margin:0 0 2px 2px;text-transform:uppercase;font-size:10px;background-color:#fee9eb;padding: 4px 20px;font-weight: bold;color: #fc9aab;letter-spacing: 1px;line-height: 13px;" >
              Name
              <br />
              <span style="font-size: 10px;font-weight: normal;color: #666;text-transform: none;">
                relationship
              </span>
            </div>
          </td>
        </tr>
        <tr style="background: transparent;">
          <td style="padding:0 0 0 10px;text-align:justify;line-height:13px;font-size:10px;vertical-align: top;font-family: arial;">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </td>
        </tr>
      </table>
      <!--End of relationship item-->

    </div>
    <!--END OF RELATIONSHIPS-->


    <!--CREDITS-->
    <div style="width: 750px;text-align: right; color:#fc9aab; font-size: 10px;">
    Coding by <b><a href="https://toyhou.se/Awful" style="color:#fc9aab;">Awful</a></b>  |  Editing by <b><a href="https://toyhou.se/Elxyie" style="color:#fc9aab;">Elxyie</a></b>
    </div>
    <!--END OF CREDITS-->
  </div>
</div>
<!--FANCY SPACE LAYOUT ENDS HERE-->