Freebie - RP Meme

<!------------
Use font awesome icons + bootstrap color classes for your check box

- Yes: fas fa-check-square fa-fw text-success

- No: fas fa-minus-square fa-fw text-danger

- Nuetral: fas fa-square fa-fw text-muted
------------>

<div class="container px-0" style="max-width: 900px; letter-spacing: .5px; line-height: 1.8; font-family:helvetica;">
  <h1 class="bg-faded p-2 text-muted text-uppercase text-center" style="letter-spacing:2px;">
    About Me</h1>

  <div class="row no-gutters">
    <div class="col-md-4 mb-4">
      <div class="row no-gutters">
        <div class="col-auto pr-2">
          <i class="fal fa-user fa-fw text-primary" />
        </div>
        <div class="col">
          your name
        </div>
        </div><div class="row no-gutters">
        <div class="col-auto pr-2">
          <i class="fal fa-birthday-cake fa-fw text-primary" />
        </div>
        <div class="col">
          your age
        </div>
        </div><div class="row no-gutters">
        <div class="col-auto pr-2">
          <i class="fal fa-venus-mars fa-fw text-primary" />
        </div>
        <div class="col">
          your pronouns
        </div>
        </div><div class="row no-gutters">
        <div class="col-auto pr-2">
          <i class="fal fa-envelope fa-fw text-primary" />
        </div>
        <div class="col">
          <a href="LINK HERE" target="_BLANK" class="text-muted">contact link</a>
        <br><a href="LINK HERE" target="_BLANK" class="text-muted">secondary link</a>
        </div>
      </div>

    </div>

    <div class="col-md-7 pl-md-3 mb-4">
      <p>Write about yourself here. Or you can do a bulleted list</p>

      <ul>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li>
        <li>Suspendisse a felis molestie, porttitor est eget, euismod mauris. </li>
        <li>Integer fermentum est vitae dui pretium fermentum. </li>
      </ul>
    </div>
  </div>

  <h1 class="bg-faded p-2 text-muted text-uppercase text-center" style="letter-spacing:2px;">Basics</h1>
  <!---------------------------------------------------------------------------------------->
  <p class="text-uppercase text-primary mb-0" style="letter-spacing: 2px;">
    Locations</p>
  <hr class="mt-0 mb-1">
  <div class="row no-gutters">
    <div class="col-md-4 mb-4">
      <p><i class="fas fa-check-square fa-fw text-success" />
      Chats

      <br><i class="fas fa-minus-square fa-fw text-danger" />
      Notes

      <br><i class="fas fa-square fa-fw text-muted" />
      Forum

      <br><i class="fas fa-square fa-fw text-muted" />
      Discord

      <br><i class="fas fa-square fa-fw text-muted" />
      Google Docs

      <br><i class="fas fa-square fa-fw text-muted" />
      Other
      </p>
    </div>
    <div class="col-md-8 pl-md-3 mb-4">
      <p clas="text-uppercase" style="letter-spacing:1px;">Notes:</p>
      <ul>
        <li>write any comments ya got here</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li>
        <li>Suspendisse a felis molestie, porttitor est eget, euismod mauris. </li>
        <li>Integer fermentum est vitae dui pretium fermentum. </li>
      </ul>
    </div>
  </div>
  <!---------------------------------------------------------------------------------------->
  <p class="text-uppercase text-primary mb-0" style="letter-spacing: 2px;">
    Participants</p>
  <hr class="mt-0 mb-1">
  <div class="row no-gutters">
    <div class="col-md-4 mb-4">
      <p><i class="fas fa-check-square fa-fw text-success" />
      One on one

      <br><i class="fas fa-minus-square fa-fw text-danger" />
      Up to 3 people

      <br><i class="fas fa-square fa-fw text-muted" />
      Up to 5 people

      <br><i class="fas fa-square fa-fw text-muted" />
      5+ people

      <br><i class="fas fa-square fa-fw text-muted" />
      As big as possible

      </p>
    </div>
    <div class="col-md-8 pl-md-3 mb-4">
      <p clas="text-uppercase" style="letter-spacing:1px;">Notes:</p>
      <ul>
        <li>write any comments ya got here</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li>
        <li>Suspendisse a felis molestie, porttitor est eget, euismod mauris. </li>
        <li>Integer fermentum est vitae dui pretium fermentum. </li>
      </ul>
    </div>
  </div>
  <!---------------------------------------------------------------------------------------->
  <p class="text-uppercase text-primary mb-0" style="letter-spacing: 2px;">
    Post Length</p>
  <hr class="mt-0 mb-1">
  <div class="row no-gutters">
    <div class="col-md-4 mb-4">
      <p><i class="fas fa-check-square fa-fw text-success" />
      1 or 2 sentences

      <br><i class="fas fa-minus-square fa-fw text-danger" />
      1 or 2 paragraphs

      <br><i class="fas fa-square fa-fw text-muted" />
      2 to 5 paragraphs

      <br><i class="fas fa-square fa-fw text-muted" />
      5+ paragraphs

      <br><i class="fas fa-square fa-fw text-muted" />
      A few pages worth
      </p>
    </div>

    <div class="col-md-8 pl-md-3 mb-4">
      <p clas="text-uppercase" style="letter-spacing:1px;">Notes:</p>
      <ul>
        <li>write any comments ya got here</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li>
        <li>Suspendisse a felis molestie, porttitor est eget, euismod mauris. </li>
        <li>Integer fermentum est vitae dui pretium fermentum. </li>
      </ul>
    </div>
  </div>
  <!---------------------------------------------------------------------------------------->
  <p class="text-uppercase text-primary mb-0" style="letter-spacing: 2px;">
    Character Types</p>
  <hr class="mt-0 mb-1">
  <div class="row no-gutters">
    <div class="col-md-4 mb-4">
      <p><i class="fas fa-check-square fa-fw text-success" />
      Human

      <br><i class="fas fa-minus-square fa-fw text-danger" />
      Humanoid

      <br><i class="fas fa-square fa-fw text-muted" />
      Anthro

      <br><i class="fas fa-square fa-fw text-muted" />
      Feral

      <br><i class="fas fa-square fa-fw text-muted" />
      CS

      <br><i class="fas fa-square fa-fw text-muted" />
      Other
      </p>
    </div>
    <div class="col-md-8 pl-md-3 mb-4">
      <p clas="text-uppercase" style="letter-spacing:1px;">Notes:</p>
      <ul>
        <li>write any comments ya got here</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li>
        <li>Suspendisse a felis molestie, porttitor est eget, euismod mauris. </li>
        <li>Integer fermentum est vitae dui pretium fermentum. </li>
      </ul>
    </div>
  </div>
  <!---------------------------------------------------------------------------------------->
  <p class="text-uppercase text-primary mb-0" style="letter-spacing: 2px;">
    Character Setting</p>
  <hr class="mt-0 mb-1">
  <div class="row no-gutters">
    <div class="col-md-4 mb-4">
      <p><i class="fas fa-check-square fa-fw text-success" />
      Modern

      <br><i class="fas fa-minus-square fa-fw text-danger" />
      Futuristic

      <br><i class="fas fa-square fa-fw text-muted" />
      Historical

      <br><i class="fas fa-square fa-fw text-muted" />
      Slice of Life

      <br><i class="fas fa-square fa-fw text-muted" />
      Fantasy/Sci-fi

      <br><i class="fas fa-square fa-fw text-muted" />
      Other
      </p>
    </div>
    <div class="col-md-8 pl-md-3 mb-4">
      <p clas="text-uppercase" style="letter-spacing:1px;">Notes:</p>
      <ul>
        <li>write any comments ya got here</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li>
        <li>Suspendisse a felis molestie, porttitor est eget, euismod mauris. </li>
        <li>Integer fermentum est vitae dui pretium fermentum. </li>
      </ul>
    </div>
  </div>


  <h1 class="bg-faded p-2 text-muted text-uppercase text-center" style="letter-spacing:2px;">Interactions</h1>
  <!---------------------------------------------------------------------------------------->
  <p class="text-uppercase text-primary mb-0" style="letter-spacing: 2px;">
    Shipping</p>
  <hr class="mt-0 mb-1">
  <div class="row no-gutters">
    <div class="col-md-4 mb-4">
      <p><i class="fas fa-check-square fa-fw text-success" />
      Never

      <br><i class="fas fa-minus-square fa-fw text-danger" />
      Only if planned beforehand

      <br><i class="fas fa-square fa-fw text-muted" />
      Always

      <br><i class="fas fa-square fa-fw text-muted" />
      If the characters become close

      <br><i class="fas fa-square fa-fw text-muted" />
      It depends on the character
      </p>
    </div>

    <div class="col-md-8 pl-md-3 mb-4">
      <p clas="text-uppercase" style="letter-spacing:1px;">Notes:</p>
      <ul>
        <li>write any comments ya got here</li>
        <li>There was like a shipping planning question? in the original meme but it felt like you could just state that in these here comments </li>
        <li>Suspendisse a felis molestie, porttitor est eget, euismod mauris. </li>
      </ul>
    </div>
  </div>
  <!---------------------------------------------------------------------------------------->
  <p class="text-uppercase text-primary mb-0" style="letter-spacing: 2px;">
    Shipping Speed</p>
  <hr class="mt-0 mb-1">
  <div class="row no-gutters">
    <div class="col-md-4 mb-4">
      <p><i class="fas fa-check-square fa-fw text-success" />
      Immediately

      <br><i class="fas fa-minus-square fa-fw text-danger" />
      Quickly

      <br><i class="fas fa-square fa-fw text-muted" />
      Over a few months

      <br><i class="fas fa-square fa-fw text-muted" />
      Slow and steady

      <br><i class="fas fa-square fa-fw text-muted" />
      Snails pace

      <br><i class="fas fa-square fa-fw text-muted" />
      No set speed; happens naturally
      </p>
    </div>

    <div class="col-md-8 pl-md-3 mb-4">
      <p clas="text-uppercase" style="letter-spacing:1px;">Notes:</p>
      <ul>
        <li>write any comments ya got here</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li>
        <li>Suspendisse a felis molestie, porttitor est eget, euismod mauris. </li>
        <li>Integer fermentum est vitae dui pretium fermentum. </li>
      </ul>
    </div>
  </div>
  <!---------------------------------------------------------------------------------------->
  <p class="text-uppercase text-primary mb-0" style="letter-spacing: 2px;">
    Smut</p>
  <hr class="mt-0 mb-1">
  <div class="row no-gutters">
    <div class="col-md-4 mb-4">
      <p><i class="fas fa-check-square fa-fw text-success" />
      No smut

      <br><i class="fas fa-minus-square fa-fw text-danger" />
      Skip writing the act entirely

      <br><i class="fas fa-square fa-fw text-muted" />
      Write the build up, skip the act

      <br><i class="fas fa-square fa-fw text-muted" />
      Write the act if it is special

      <br><i class="fas fa-square fa-fw text-muted" />
      Write the act all the way through
      </p>
    </div>

    <div class="col-md-8 pl-md-3 mb-4">
      <p clas="text-uppercase" style="letter-spacing:1px;">Notes:</p>
      <ul>
        <li>write any comments ya got here</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li>
        <li>Suspendisse a felis molestie, porttitor est eget, euismod mauris. </li>
        <li>Integer fermentum est vitae dui pretium fermentum. </li>
      </ul>
    </div>
  </div>
  <!---------------------------------------------------------------------------------------->
  <p class="text-uppercase text-primary mb-0" style="letter-spacing: 2px;">
    Romantic Artwork</p>
  <hr class="mt-0 mb-1">
  <div class="row no-gutters">
    <div class="col-md-4 mb-4">
      <p><i class="fas fa-check-square fa-fw text-success" />
      Do not post without talking to me

      <br><i class="fas fa-minus-square fa-fw text-danger" />
      Posting okay if it is cuddles and hugs

      <br><i class="fas fa-square fa-fw text-muted" />
      Posting okay if it is NSFW

      <br><i class="fas fa-square fa-fw text-muted" />
      Do not post if it is NSFW

      <br><i class="fas fa-square fa-fw text-muted" />
      Do not post where I can see it
      </p>
    </div>

    <div class="col-md-8 pl-md-3 mb-4">
      <p clas="text-uppercase" style="letter-spacing:1px;">Notes:</p>
      <ul>
        <li>write any comments ya got here</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li>
        <li>Suspendisse a felis molestie, porttitor est eget, euismod mauris. </li>
        <li>Integer fermentum est vitae dui pretium fermentum. </li>
      </ul>
    </div>
  </div>
  <!---------------------------------------------------------------------------------------->
  <p class="text-uppercase text-primary mb-0" style="letter-spacing: 2px;">
    Violence</p>
  <hr class="mt-0 mb-1">
  <div class="row no-gutters">
    <div class="col-md-4 mb-4">
      <p><i class="fas fa-check-square fa-fw text-success" />
      None

      <br><i class="fas fa-minus-square fa-fw text-danger" />
      Verbal arguments

      <br><i class="fas fa-square fa-fw text-muted" />
      Minor violence (smacking, pushing)

      <br><i class="fas fa-square fa-fw text-muted" />
      Mild violence (punching, kicking)

      <br><i class="fas fa-square fa-fw text-muted" />
      Extreme Violence (stabbing, torture)

      </p>
    </div>

    <div class="col-md-8 pl-md-3 mb-4">
      <p clas="text-uppercase" style="letter-spacing:1px;">Notes:</p>
      <ul>
        <li>write any comments ya got here</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li>
        <li>Suspendisse a felis molestie, porttitor est eget, euismod mauris. </li>
        <li>Integer fermentum est vitae dui pretium fermentum. </li>
      </ul>
    </div>
  </div>
  <!---------------------------------------------------------------------------------------->
  <p class="text-uppercase text-primary mb-0" style="letter-spacing: 2px;">
    Violent Artwork</p>
  <hr class="mt-0 mb-1">
  <div class="row no-gutters">
    <div class="col-md-4 mb-4">
      <p><i class="fas fa-check-square fa-fw text-success" />
      Do not post without talking to me

      <br><i class="fas fa-minus-square fa-fw text-danger" />
      Do not post where I can see it

      <br><i class="fas fa-square fa-fw text-muted" />
      Never Post

      <br><i class="fas fa-square fa-fw text-muted" />
      Posting is okay

      </p>
    </div>

    <div class="col-md-8 pl-md-3 mb-4">
      <p clas="text-uppercase" style="letter-spacing:1px;">Notes:</p>
      <ul>
        <li>write any comments ya got here</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li>
        <li>Suspendisse a felis molestie, porttitor est eget, euismod mauris. </li>
        <li>Integer fermentum est vitae dui pretium fermentum. </li>
      </ul>
    </div>
  </div>

  <div class="bg-faded p-2 text-right small" style="letter-spacing: 2px;">
    Credit: <a href="https://www.deviantart.com/elfsama/journal/The-RP-Comfort-Meme-624457392" target="_BLANK">Meme</a> // <a href="https://toyhou.se/6930117.-freebie-rp-comf-meme" target="_BLANK">Code</a>
  </div>

</div>