Story Description (Full)

<div class="container-fluid my-1" style="color:#ffffff;max-width:1000px;">
 <div class="container">
  <div class="card card-block bg-faded">
<!-- Title text -->
   <p style="text-align: center;"><span style="font-size: 30px; letter-spacing:2px;"><i class="far fa-sword"></i>&nbsp;<strong>TITLE</strong>&nbsp;<i class="far fa-shield-alt"></i></span></p>
   <a style="text-align: center;"><span style="font-size: 20px;">[Insert media type]</span></a>
   <br>
<!-- Display image -->
   <div style="background: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/2de243d6-ec05-4a84-9349-779a25b48c92/deixvjm-eb7ff3c6-b999-4d07-804a-88ebfa8968aa.png/v1/fill/w_1147,h_696,q_70,strp/img_by_mcdogwarrior_deixvjm-pre.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9Nzc3IiwicGF0aCI6IlwvZlwvMmRlMjQzZDYtZWMwNS00YTg0LTkzNDktNzc5YTI1YjQ4YzkyXC9kZWl4dmptLWViN2ZmM2M2LWI5OTktNGQwNy04MDRhLTg4ZWJmYTg5NjhhYS5wbmciLCJ3aWR0aCI6Ijw9MTI4MCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.YG0ABhcre5NIwkjspfvti9Zi_SoHjly7SC-TZyNNLDk); background-repeat: no-repeat; background-size:cover; background-position: center; min-height:200px;" class="card-block h-0" >
  </div>
  <br>
   <div class="card card-block bg-faded" style="background-color:#0D052A;">
    <div class="row">
<!-- Description card -->
     <div class="col-9">
      <div class="card card-block bg-faded" style="background-color:#3577b4; min-height:200px; overflow:auto;">
        <p style="text-align: left;"><span style="font-size: 20px;"><i class="fad fa-stars"></i>&nbsp;<u>HEADER</u>&nbsp;<i class="fad fa-stars"></span></a>
        <p>Small description of the comic, plot, etc. Hook your audience with your absolutely amazing description (that may or may not be better than the story itself)</p>
        <p>Classic MC putting a second paragraph box. Yeah extra space write more you get the idea</p>
      </div>
    </div>
<!-- Pagedoll beside description -->
     <div class="col-3">
      <div style="background: url(IMGURL); background-repeat: no-repeat; background-size:cover; background-position: top center; min-height:200px; min-width:200px;" class="card-block h-0" >
      </div>
    </div>
  </div>
  <br>
<!-- Genres -->
  <div class="row">
    <div class="col-6">
      <div class="card bg-faded p-2" style="background-color:#3577b4; min-height:100px; max-height:130px;">
        <p style="text-align: center;"><span style="font-size: 20px;"><u>GENRE(S)</u></span></p>
         <p style="text-align: center;"><a class="btn btn-info">GENRE 1</a></a>
         <a style="text-align: center;"><a class="btn btn-info">GENRE 2</a></a>
         <a style="text-align: center;"><a class="btn btn-info">GENRE 3</a></a>
      </div>
    </div>
<!-- Rating (age group) -->
  <div class="col-6">
    <div class="card bg-faded p-2" style="background-color:#3577b4; min-height:100px; max-height:100px;">
      <p style="text-align: center;"><span style="font-size: 20px;"><u>RATING</u></span></p>
      <a style="text-align: center;"><a class="btn btn-primary my-3">AGE GROUP(s)</a></a>
    </div>
  </div>
 </div>
 <br>
<!-- Progress level -->
  <div class="card bg-faded p-2" style="background-color:#3577b4; min-height:75px; max-height:130px;">
    <p style="text-align: center;"><span style="font-size: 20px;"><u>PROGRESS</u></span></p>
    <a style="text-align: center;"><span style="font-size: 12px;" class="text-secondary">##%</span></a>
       <div class="progress">
        <div class="progress-bar progress-bar-striped my-1" style="width:100%;background-color:#5babea;"><br></div>
    </div>
  </div>
  <br>
 <a data-toggle="collapse" href="#collapse1" class="col-12 btn btn-lg text-center p-3"><i class="far fa-arrow-circle-down"></i> DETAILS <i class="far fa-arrow-circle-down"></i></a>
  <div id="collapse1" class="w-100 panel-collpase collapse">
<!-- Cast -->
   <div class="card bg-faded p-2" style="background-color:#31246c; min-height:75px;">
    <p style="text-align: center;"><span style="font-size: 20px;"><i class="fad fa-stars"></i>&nbsp;<u>CAST</u>&nbsp;<i class="fad fa-stars"></i></span></p>
    <br>
      <div class="row">
<!-- Character 1 -->
       <div class="col-4">
        <div class="card bg-faded p-2" style="background-color:#3577b4;height:430px;">
          <div style="background: url(IMGURL); background-repeat: no-repeat; background-size:cover; background-position: center; height:230px; width:230px;" class="card-block h-0 rounded-circle" >
          </div>
          <a style="text-align: center;"><a class="btn btn-secondary my-2" href="LINKHERE">CHARACTER NAME</a></a>
           <div class="card bg-primary">
             <a style="text-align: center;">Role</a>
          </div>
           <div class="card bg-faded my-1" style="background-color:#3577b4; height:110px; overflow:auto;">
          <p style="text-align: justify;" class="my-1"><span>Description of the character, general idea of what they do in the story, stuff like that. Try to make it brief if ya can</span></p>
          </div>
        </div>
      </div>
<!-- Character 2 -->
       <div class="col-4">
        <div class="card bg-faded p-2" style="background-color:#3577b4;height:430px;">
          <div style="background: url(IMGURL); background-repeat: no-repeat; background-size:cover; background-position: center; height:230px; width:230px;" class="card-block h-0 rounded-circle" >
          </div>
          <a style="text-align: center;"><a class="btn btn-secondary my-2" href="LINKHERE">CHARACTER NAME</a></a>
           <div class="card bg-secondary">
             <a style="text-align: center;">Role</a>
          </div>
           <div class="card bg-faded my-1" style="background-color:#3577b4; height:110px; overflow:auto;">
          <p style="text-align: justify;" class="my-1"><span>Description of the character</span></p>
          </div>
        </div>
      </div>
<!-- Character 3 -->
       <div class="col-4">
        <div class="card bg-faded p-2" style="background-color:#3577b4;height:430px;">
          <div style="background: url(IMGURL); background-repeat: no-repeat; background-size:cover; background-position: center; height:230px; width:230px;" class="card-block h-0 rounded-circle" >
          </div>
          <a style="text-align: center;"><a class="btn btn-secondary my-2" href="LINKHERE">CHARACTER NAME</a></a>
           <div class="card bg-secondary">
             <a style="text-align: center;">Role</a>
          </div>
           <div class="card bg-faded my-1" style="background-color:#3577b4; height:110px; overflow:auto;">
          <p style="text-align: justify;" class="my-1"><span>Description of the character</span></p>
          </div>
        </div>
      </div>
    </div>
<!-- Character folder -->
    <p style="text-align: center;"><a class="btn btn-info my-2" href="FOLDERLINK">OTHER CHARACTERS</a></a>
  </div>
  <br>
<!-- Other socials the media is on -->
  <div class="card bg-faded p-1" style="background-color:#31246c;">
  <p style="text-align: center;"><span style="font-size: 20px;"><u>OTHER SITES</u></span></p>
  <p class="secondary text-center" style="font-size:50px"> <a href="SOCIALLINK"> <i class="fab fa-deviantart fa-fw"></i></a></a>
  <a class="secondary text-center" style="font-size:50px"> <a href="SOCIALLINK"> <i class="fas fa-paw fa-fw"></i></a></a>
  <a class="secondary text-center" style="font-size:50px"> <a href="SOCIALLINK"> <i class="fab fa-twitter fa-fw"></i></a></a>
  <a class="secondary text-center" style="font-size:50px"> <a href="SOCIALLINK"> <i class="fab fa-youtube fa-fw"></i></a></a>
  </div>
 </div>
</div>
 <p style="text-align: right;"><span style="font-size: 9px;">Code by <a href="https://toyhou.se/MCDogWarrior" id="">MCDogWarrior</a></span></p>
</div>
</div>