[F2U] Half-Baked (Code)

 
<!--Thank you for using my code!-->
<!--This is my first code, so please let me know if there are any errors! It's probably not moblie friendly, sorry-->
<!--Please favourite or comment if you're using it or plan to use it in the future! I'd love to see it in use!-->
<div class="row justify-content-center">
<div class="container card-outline-secondary no-gutters bg-primary rounded p-2" style="max-width: 700px; font-size: 30px; text-align: center">
    <p><b>NAME</b></p>
</div>
<div class="row no-gutters bg-primary rounded p-2" style="max-width: 700px; height:450px;">
<div class="accordion md-accordion col-md-6" id="accordion" role="tablist" aria-multiselectable="true">
  <div>
    <div class="card p-2 mb-2 col-md-12 bg-dark" role="tab" id="heading1">
      <a data-toggle="collapse" data-parent="#accordion" href="#about" aria-expanded="true"
        aria-controls="accordion1">
        <div class="mb-0" style="font-size: 25px">
          <i class="fas fa-question"></i> About
        </div>
      </a>
    </div>
    <div id="about" class="collapse show" role="tabpanel" aria-labelledby="heading1"
      data-parent="#accordion">
      <div class="card-body p-2 col-md-12" style="height: 250px; overflow: auto">
        A quick overview of the character. This box will scroll! 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.
      </div>
    </div>

  </div>
  <div>
    <div class="card p-2 mb-2 col-md-12 bg-dark" role="tab" id="heading2">
      <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#personality"
        aria-expanded="false" aria-controls="accordion2">
        <div class="mb-0" style="font-size: 25px">
          <i class="fas fa-pencil-alt"></i> Personality
        </div>
      </a>
    </div>
    <div id="personality" class="collapse" role="tabpanel" aria-labelledby="heading2"
      data-parent="#accordion">
      <div class="card-body p-2 col-md-12" style="height: 250px; overflow: auto">
        How the character acts and reacts to stuff. This box will scroll! 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.
      </div>
    </div>

  </div>
  <div>
    <div class="card p-2 mb-2 col-md-12 bg-dark" role="tab" id="heading3">
      <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#appearance"
        aria-expanded="false" aria-controls="accordion3">
        <div class="mb-0" style="font-size: 25px">
          <i class="fas fa-sparkles"></i> Appearance
        </div>
      </a>
    </div>
    <div id="appearance" class="collapse" role="tabpanel" aria-labelledby="heading3"
      data-parent="#accordion">
      <div class="card-body p-2 col-md-12" style="height: 250px; overflow: auto">
        How the character looks. This box will scroll! 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.
      </div>
    </div>
    
  </div>
  
</div>
    <div class="card col-md-1 p-2 bg-primary card-outline-primary">
</div>

<div class="card col-md-5 p-2 card-outline-secondary bg-light text-primary" style="font-size: 20px; height: 430px; text-align: center">
    <a href="Artist link">
        <img src="https://via.placeholder.com/350x500.png" width="350px" height="500px">
    </a> 
     <span>Caption</span>
</div>
<!--Credit- YOU CAN MOVE, BUT DO NOT REMOVE-->
<a href="https://toyhou.se/theplanisinruins" data-toggle="tooltip" title="Credit"><i class="fas fa-code p-2"></i></a>
</div>
</div>
</div>