F2U Postcard

<!-----------------------------------------------------------------
      POSTCARD - Character Profile
      Profile by HTMLobster (noll)


      Replace to change
      Text color: #3f2917
      Icon: ICON_URL


      TOS:
      Do not remove my credit. You may edit it, however.
      You may edit code/frankenstein with others as long as their TOS allows!
      Turn off WYSIWYG and turn on Code Editor.
      Ask me if you want to redistribute edits. Must be F2U.
------------------------------------------------------------------>
<div class="container" style="max-width:700px;">
  <!-- Text color + postcard background -->
  <div class="rounded p-3" style="color:#3f2917; background:url(https://i.imgur.com/cBaj9Dv.png) center; background-size:cover;">
    <div class="row no-gutters">
      <!-- left column -->
      <div class="col-sm mr-sm-3 order-sm-1 order-3">
        <!-- description - does not scroll -->
        <div style="min-height:375px; font-family:Courier,monospace;">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam finibus odio vitae ante molestie, ut ornare tortor porttitor. Donec at laoreet arcu. Sed venenatis felis at scelerisque blandit. Vestibulum egestas quam at lorem rhoncus iaculis. Suspendisse dignissim orci vitae magna facilisis imperdiet. </p>
          <p>Aliquam ullamcorper molestie vehicula. In imperdiet odio neque, eu elementum elit malesuada et. Pellentesque luctus lobortis justo et accumsan. Suspendisse vel feugiat augue, ac hendrerit tellus. Vestibulum molestie hendrerit semper. Aenean elit arcu, malesuada a mollis in, dignissim at massa. </p>
        </div>
      </div>
      <!-- divider -->
      <div class="col-auto my-3 hidden-xs-down order-2" style="border-left:1px solid;"></div>
      <div class="col-12 my-3 hidden-sm-up order-2" style="border-bottom:1px solid;"></div>
      <!-- right column -->
      <div class="col-sm ml-sm-3 order-sm-3 order-1">
        <div class="justify-content-end">
          <!-- icon -->
          <div style="clip-path:url(#stamp); height:118px; width:106px; background:url(https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/37198611_BnK.png) center; background-size:cover;">
          </div>
        </div>
        <!-- "address" lines -->
        <div class="mt-4" style="font-family:Courier,monospace;">
          <p style="border-bottom:1px dashed;">text here</p>
          <p style="border-bottom:1px dashed;">text here</p>
          <p style="border-bottom:1px dashed;">text here</p>
          <div class="row no-gutters justify-content-end mt-5">
            <div class="col-6" style="border-bottom:1px dashed;">
              text here
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="text-center mt-2">
    <a href="https://toyhou.se/HTMLobster" data-toggle="tooltip" title="code by noll"><i class="far fa-code"></i></a>
  </div>
</div>
<!-- CLIP-PATH INFO DO NOT TOUCH -->
<svg height="0" width="0" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <clipPath id="stamp">
    <path d="M83.3,117.7c-2.7,0.5-2.6-5.6-5.3-6.2c-2.7-0.6-3.8,4.4-6.4,3.8c-2.7-0.6-1.6-5.6-4.3-6.2c-2.7-0.6-3.8,4.4-6.4,3.8
      s-1.6-5.6-4.3-6.2c-2.7-0.6-3.1,4.6-6.4,3.8c-1.5-0.3-2.3-5.7-4.3-6.2c-1.7-0.4-4.6,4.2-6.4,3.8c-1.7-0.4-2.5-5.8-4.3-6.2
      c-1.8-0.4-4.6,4.2-6.4,3.8c-1.8-0.4-2.5-5.8-4.3-6.2c-1.8-0.4-4.7,4.2-6.5,3.8c-1.9-0.4-2.6-5.8-4.3-6.2c-2-0.4-4.9,4.2-6.4,3.8
      c-3.3-0.7-2-1.2-2.3-3.9c-0.3-3.2-4.4-3.4-3.7-6.6S7,89,7.6,85.8S3.3,81.6,4,78.4c0.7-3.2,5.7-2.1,6.4-5.2C11,70,6,69,6.7,65.8
      c0.7-3.2,5.7-2.1,6.4-5.2c0.7-3.2-4.3-4.2-3.6-7.4c0.7-3.2,5.7-2.1,6.4-5.2c0.7-3.1-4.3-4.2-3.6-7.4s5.7-2.1,6.4-5.2
      c0.7-3.2-4.3-4.2-3.6-7.4s5.7-2.1,6.4-5.2s-4.3-4.2-3.6-7.4s5.7-2.1,6.4-5.3s-5.3-6.9-2.7-8.9c2.2-1.7,3.7,5.1,6.4,5.7
      s3.8-4.4,6.4-3.8s1.6,5.6,4.3,6.2c2.7,0.6,3.1-4.6,6.4-3.8c1.5,0.3,2.3,5.7,4.3,6.2c1.7,0.4,4.5-4.2,6.4-3.8
      c1.7,0.4,2.4,5.8,4.3,6.2c1.7,0.4,4.6-4.2,6.4-3.8c1.8,0.4,2.5,5.8,4.3,6.2c1.8,0.4,4.7-4.2,6.4-3.8c1.8,0.4,2.5,5.8,4.3,6.2
      c1.9,0.4,4.7-4.2,6.4-3.8c1.9,0.4,2.6,5.8,4.3,6.2c2,0.4,4.9-4.2,6.4-3.8c3.3,0.7,2,1.2,2.3,3.9c0.3,3.2,4.4,3.4,3.7,6.6
      c-0.7,3.2-5.5,1.3-6.4,5.2c-0.4,1.8,4.1,5,3.6,7.4c-0.4,1.9-5.9,3-6.4,5.2c-0.4,2,4.1,5.2,3.6,7.4c-0.4,2-5.9,3.1-6.4,5.2
      c-0.4,2.1,4.1,5.3,3.6,7.4c-0.5,2.1-5.9,3.1-6.4,5.2c-0.5,2.1,4.1,5.3,3.6,7.4C93,80,87.6,81,87.1,83.1c-0.5,2.2,4.1,5.3,3.6,7.4
      c-0.5,2.2-5.9,3.2-6.4,5.3c-0.5,2.3,4.1,5.4,3.6,7.4c-0.5,2.4-6,3.4-6.4,5.2C80.9,112.3,86.5,117.1,83.3,117.7L83.3,117.7z"/>
    <path d="M83.3,117.7c-2.7,0.5-2.6-5.6-5.3-6.2c-2.7-0.6-3.8,4.4-6.4,3.8c-2.7-0.6-1.6-5.6-4.3-6.2
      c-2.7-0.6-3.8,4.4-6.4,3.8s-1.6-5.6-4.3-6.2c-2.7-0.6-3.1,4.6-6.4,3.8c-1.5-0.3-2.3-5.7-4.3-6.2c-1.7-0.4-4.6,4.2-6.4,3.8
      c-1.7-0.4-2.5-5.8-4.3-6.2c-1.8-0.4-4.6,4.2-6.4,3.8c-1.8-0.4-2.5-5.8-4.3-6.2c-1.8-0.4-4.7,4.2-6.5,3.8c-1.9-0.4-2.6-5.8-4.3-6.2
      c-2-0.4-4.9,4.2-6.4,3.8c-3.3-0.7-2-1.2-2.3-3.9c-0.3-3.2-4.4-3.4-3.7-6.6S7,89,7.6,85.8S3.3,81.6,4,78.4c0.7-3.2,5.7-2.1,6.4-5.2
      C11,70,6,69,6.7,65.8c0.7-3.2,5.7-2.1,6.4-5.2c0.7-3.2-4.3-4.2-3.6-7.4c0.7-3.2,5.7-2.1,6.4-5.2c0.7-3.1-4.3-4.2-3.6-7.4
      s5.7-2.1,6.4-5.2c0.7-3.2-4.3-4.2-3.6-7.4s5.7-2.1,6.4-5.2s-4.3-4.2-3.6-7.4s5.7-2.1,6.4-5.3s-5.3-6.9-2.7-8.9
      c2.2-1.7,3.7,5.1,6.4,5.7s3.8-4.4,6.4-3.8s1.6,5.6,4.3,6.2c2.7,0.6,3.1-4.6,6.4-3.8c1.5,0.3,2.3,5.7,4.3,6.2
      c1.7,0.4,4.5-4.2,6.4-3.8c1.7,0.4,2.4,5.8,4.3,6.2c1.7,0.4,4.6-4.2,6.4-3.8c1.8,0.4,2.5,5.8,4.3,6.2c1.8,0.4,4.7-4.2,6.4-3.8
      c1.8,0.4,2.5,5.8,4.3,6.2c1.9,0.4,4.7-4.2,6.4-3.8c1.9,0.4,2.6,5.8,4.3,6.2c2,0.4,4.9-4.2,6.4-3.8c3.3,0.7,2,1.2,2.3,3.9
      c0.3,3.2,4.4,3.4,3.7,6.6c-0.7,3.2-5.5,1.3-6.4,5.2c-0.4,1.8,4.1,5,3.6,7.4c-0.4,1.9-5.9,3-6.4,5.2c-0.4,2,4.1,5.2,3.6,7.4
      c-0.4,2-5.9,3.1-6.4,5.2c-0.4,2.1,4.1,5.3,3.6,7.4c-0.5,2.1-5.9,3.1-6.4,5.2c-0.5,2.1,4.1,5.3,3.6,7.4C93,80,87.6,81,87.1,83.1
      c-0.5,2.2,4.1,5.3,3.6,7.4c-0.5,2.2-5.9,3.2-6.4,5.3c-0.5,2.3,4.1,5.4,3.6,7.4c-0.5,2.4-6,3.4-6.4,5.2
      C80.9,112.3,86.5,117.1,83.3,117.7L83.3,117.7z"/>
  </clipPath>
</svg>