SAFETY NOTICE F2U

<!-- COLORS
    Note: Lmao please comment if theres any problem... or just show me that you use my code i'd be very HAPPY if you do if you want

    Content Boxes (backgrounds of DNI & Warnings): #e5ffcc
    Main Card Background: #f4ffe6
    Bold Text & Header / Icons (like "WARNING!" & triangles thingys): #7dcb00
    Text : #2f5a00
    Borders (cards, stamps): #7dcb00


    -->


<div class="mx-auto py-2" style="max-width:820px; font-size:12.5px; letter-spacing:.3px; color:#2f5a00; font-family:'MS Gothic', monospace;">
  <div class="row g-1 d-flex justify-content-center align-items-stretch">

    <!-- LEFT IMAGE -->
    <div class="col-12 col-md-3 p-1">
      <div class="card h-100" style="min-height:180px; border:2px solid #7dcb00;
        background:url(https://64.media.tumblr.com/96b4af7e2ddb6a3dd1815edaf7987bdc/45e883029926d70e-cf/s400x600/150336868e6a56568734800b897e5082872a219a.gifv) center no-repeat;
        background-size:cover; border-radius:8px;">
      </div>
    </div>

    <!-- CENTER BOX -->
    <div class="col-12 col-md-6 p-1">
      <div class="card" style="border:2px solid #7dcb00; background:#f4ffe6; border-radius:8px;">

        <!-- HEADER BAR SECTION -->
        <div class="d-flex justify-content-center align-items-center px-2 text-center" style="
          font-size:1.1rem; letter-spacing:2px; color:#7dcb00; font-weight:600;
          border-bottom:5px solid #7dcb00; border-radius:6px 6px 0 0;">
          <span><i class="fas fa-exclamation-triangle"></i> WARNING!</span>
          <i class="fas fa-exclamation-triangle"></i>
        </div>

        <!-- INFO SECTION -->
        <div class="p-2 text-center d-flex flex-column justify-content-center align-items-center">
          <p>Username / Orient or Age / Pro/noun</p>

          <hr class="my-2" style="border-color:#7dcb00; border-width:2px; width: 100%; max-width: 700px;">

          <div class="row g-1" style="width:100%;">

            <!-- DO NOT / DNI SECTION -->
            <div class="col-12 col-md-6" style="background:#e5ffcc; color:#2f5a00; border-right:5px solid #7dcb00; border-radius:4px 0 0 4px; max-height:150px; overflow-y:scroll; scrollbar-width:none; -ms-overflow-style:none;">
              <h3 class="mt-2 text-center" style="font-size:14px; color:#7dcb00;">
                <i class="fas fa-ban fa-fw me-1"></i>Please Do Not / DNI
              </h3>
              <ul class="my-2" style="font-size:12px; padding-left:16px;">
                <li class="my-1">SCROLLABLE</li>
                <li class="my-1">Content</li>
                <li class="my-1">Content</li>
                <li class="my-1">Content</li>
                <li class="my-1">Content</li>
                <li style="color:#7dcb00; font-size:15px; font-weight:bold; list-style:none;">DNI</li>
                <li class="my-1">Content</li>
                <li class="my-1">Content</li>
                <li class="my-1">Content</li>
                <li class="my-1">Content</li>
                <li class="my-1">Content</li>
              </ul>
            </div>

            <!-- WARNINGS SECTION -->
            <div class="col-12 col-md-6" style="background:#e5ffcc; color:#2f5a00; border-radius:0 4px 4px 0; max-height:150px; overflow-y:scroll; scrollbar-width:none; -ms-overflow-style:none;">
              <h3 class="mt-2 text-center" style="font-size:14px; color:#7dcb00;">
                <i class="fas fa-exclamation-triangle fa-fw me-1"></i>Content Warnings
              </h3>
              <ul class="my-2" style="font-size:12px; padding-left:16px;">
                <li class="my-1">SCROLLABLE</li>
                <li class="my-1">Content</li>
                <li class="my-1">Content</li>
                <li class="my-1">Content</li>
                <li class="my-1">Content</li>
              </ul>
            </div>

          </div>

          <!-- STAMPS SECTION -->
          <div class="text-center pt-2 d-flex flex-wrap justify-content-center">
            <img src="https://64.media.tumblr.com/730750cf0ca9fd52af2c6081e0b23786/5f22ad1778b664dd-f1/s250x400/acfa23ffb5aa7e886ee0a14d165de5c13e817166.gifv" style="display:inline-block; margin:4px; border:2px solid #7dcb00; border-radius:4px; max-width:73px; height:auto;">
            <img src="https://64.media.tumblr.com/498d2dd7f9199a82a461167375a04491/994966584ab1fecf-96/s100x200/68272f4192bb5a1e100245f93760f9fe24a5f483.pnj" style="display:inline-block; margin:4px; border:2px solid #7dcb00; border-radius:4px; max-width:73px; height:auto;">
            <img src="https://64.media.tumblr.com/f096f9a5131b925f99a374087d07aae4/994966584ab1fecf-78/s100x200/7a5408876980f9733956a97b0abb4ca3cffee6cd.pnj" style="display:inline-block; margin:4px; border:2px solid #7dcb00; border-radius:4px; max-width:73px; height:auto;">
            <img src="https://64.media.tumblr.com/0871b9e413d76992afb233503862ae1e/5f22ad1778b664dd-0e/s250x400/167c38fabdc923e7b69b5aa900787c1fca6f2958.gifv" style="display:inline-block; margin:4px; border:2px solid #7dcb00; border-radius:4px; max-width:73px; height:auto;">
          </div>

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

    <!-- RIGHT IMAGE -->
    <div class="col-12 col-md-3 p-1">
      <div class="card h-100" style="min-height:180px; border:2px solid #7dcb00;
        background:url(https://64.media.tumblr.com/2d907b1f70b3340b295830d7035fccba/4b7d94ecb58fae3d-28/s400x600/7a25148950be63ceb904d7782aab5b7904c6680b.pnj) center no-repeat;
        background-size:cover; border-radius:8px;">
      </div>
    </div>

  </div>

    <!-- CREDIT DO NOT REMOVE -->
    <div class="text-center mx-1" style="font-size:15px;">
      <a href="https://toyhou.se/sokie_Visuvel">
        <i class="fas fa-cloud" style="color:#2f5a00"></i>
      </a>
  </div>
</div>