Character Warning [C] HTML (Bootstrap code)

<div class="container-fluid my-1" style="color:#ffffff;width:1000px;">

<!--Main warning box-->

  <div class="card bg-danger rounded-0" style="border-top-right-radius:15px; border-top-left-radius:15px; height:50px;">

  <p style="font-size: 30px; text-align: center; letter-spacing: 2px"> <i class="fad fa-exclamation-triangle"></i>&nbsp;<strong>CONTENT WARNING</strong>&nbsp;<i class="fad fa-exclamation-triangle"></i></p>

  </div>

    <div class="card rounded-0 p-2 bg-faded" style="max-height:150px; overflow:auto;">

<!--Disclaimer + list-->

    <p style="text-align: left; font-size: 16px;">When you view this character, make sure to expect...</p>

    <ul class="text-info" style="list-style-type: circle; font-size: 15px;">

     <li>something that may be sensitive content</li>

     <li>anything that you think may upset someone</li>

     <li>list them here basically</li>

     <li>and yes the box scrolls</li>

    </ul>

    </div>

     <div class="row">

<!--Allowed box-->

      <div class="col-6">

       <div class="card bg-success rounded-0 mt-2" style="height:50px;">

<!--Disclaimer + list-->

       <p style="font-size: 30px; text-align: center;"> <i class="fad fa-check-circle"></i>&nbsp;<strong>Stuff I allow</strong>&nbsp;<i class="fad fa-check-circle"></i></p>

       </div>

       <div class="card rounded-0 p-2 bg-faded" style="max-height:150px; overflow:auto;">

       <ul style="list-style-type: circle; font-size: 15px;">

        <li>something you are okay with</li>

        <li>people doing with this character</li>

        <li>and of course the box scrolls</li>

       </ul>

       </div>

      </div>

<!--Unpermitted box-->

      <div class="col-6">

       <div class="card bg-warning rounded-0 mt-2" style="height:50px;">

<!--Disclaimer + list-->

       <p style="font-size: 30px; text-align: center;"> <i class="fad fa-times-circle"></i>&nbsp;<strong>Stuff I don't encourage</strong>&nbsp;<i class="fad fa-times-circle"></i></p>

       </div>

        <div class="card rounded-0 p-2 bg-faded" style="max-height:150px; overflow:auto;">

        <ul style="list-style-type: circle; font-size: 15px;">

         <li>things that you do not want from your character</li>

         <li>maybe if someone draws them or something</li>

         <li>same case, box scrolls</li>

        </ul>

        </div>

       </div>

     </div>

<!--Etc box-->

     <div class="card bg-secondary rounded-0 mt-2" style="height:50px;">

     <p style="font-size: 30px; text-align: center;"><i class="fad fa-plus-square"></i>&nbsp;<strong>OTHER INFO...</strong>&nbsp;<i class="fad fa-plus-square"></i></p>

     </div>

     <div class="card rounded-0 p-2 bg-faded" style="max-height:200px; overflow:auto; border-bottom-right-radius:15px; border-bottom-left-radius:15px;">

<!--Extra info area-->

      <p style="text-align: justify; font-size: 15px;" class="my-1 p-1"><span>Some other brief things that you would like to note about this character. Maybe details you couldn't include that are VERY important (not) to be drawn. Box does indeed scroll</span></p>

     </div>

<!--Code credit (don't remove pls and ty)-->

      <p style="text-align: right;"><span style="font-size: 9px;">Code by <a href="https://toyhou.se/MCDogResource" id="">MCDogWarrior</a></span></p>

    </div>