Folder #3

<!-- CODE 3 ------------>
<div class="mx-auto text-muted p-1" style="max-width: 1200px; font-size: 13px;">
  <!-- Background Image ------------>
<div style="background:url(https://images.unsplash.com/photo-1465634836201-1d5651b9b6d6?ixlib=rb-1.2.1&auto=format&fit=crop&w=1267&q=80);background-position:center;background-size:cover;" class=" text-center rounded row no-gutters mb-1 p-2 mx-auto">
   <div class="col-md-2 col-1 w-100"></div>
   <div class="col-md-8 col-10 w-100 text-center">

         <div class=" px-md-3 mb-5 mt-5 w-100 mx-auto" style="font-weight:200;letter-spacing:2px;color:rgba(255, 255, 255, 0.9);">
            <div class="p-4" style="border-radius:5px;background-color:rgba(0, 0, 0, 0.8);">
               <h1 class="display-3 text-white">Folder Title</h1>
            </div>
         </div>
         <div class="col-md-2 col-1 w-100"></div>
      </div>
    </div>


 <!-- Content ------------>
   <div class="row no-gutters ">
      <!-- Aesthetic ------------>
      <div class="col-md-3 p-1">
         <div class="card h-100 rounded border-0" style="min-height: 250px;
            background: url(https://images.unsplash.com/photo-1552010099-5dc86fcfaa38?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80) center no-repeat;
            background-size: cover;">
         </div>
      </div>
      <!-- Folder Content ------------>
      <div class="col-md-6 p-1">
         <div class="character-description text-center bg-faded rounded p-3">
           <p class="text-center">
                     <span class="badge badge-primary" style="letter-spacing: .5px; font-size: .9em;">Genre</span>
                     <span class="badge badge-primary" style="letter-spacing: .5px; font-size: .9em;">Genre </span>
                     <span class="badge badge-primary" style="letter-spacing: .5px; font-size: .9em;">Genre </span>
                  </p>
                  <hr>
            <div class="m-1" style="overflow-y: auto; height: 130px;">
               <p>This box scrolls. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla at volutpat diam ut venenatis tellus in metus vulputate. Interdum consectetur libero id faucibus nisl tincidunt eget nullam. Cursus euismod quis viverra nibh. Placerat vestibulum lectus mauris ultrices eros in. Sit amet venenatis urna cursus. Orci porta non pulvinar neque.
            </div>
            <hr>
            Warnings: (list any content warnings)<br>
         </div>
      </div>
      <!-- Aesthetic ------------>
      <div class="col-md-3 p-1">
         <div class="card h-100 rounded border-0" style="min-height: 250px;
            background: url(https://images.unsplash.com/photo-1552089123-2d26226fc2b7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80) center no-repeat;
            background-size: cover;">
         </div>
         <p class="text-right small">HTML by @TheDemonicArtist</p>
      </div>
   </div>
  </div>