Stor8

<!---
==== Barry
==== HTML by 8byte
----
==== Colors
---- This code uses bootstrap colors.
--->
<div class="container p-0" style="max-width: 800px;">
  <div class="row no-gutters">
    <!--- top banner --->
    <div class="col-12 p-1">
      <div class="card p-0 bg-dark" style="border: 3px solid;">
        <!--- faded background image --->
        <div class="container h-100 w-100" style="background: url(IMGURL); background-size: cover; opacity: 0.5; position: absolute; z-index: 0;"></div>
        <h1 class="d-flex m-2 text-white" style="justify-content: space-between; position: relative; z-index: 9;">
          <i class="fas fa-star fa-fw"></i>
          <span>Title</span>
          <i class="fas fa-star fa-fw"></i>
        </h1>
      </div>
    </div>
    <!--- pagedoll --->
    <div class="col-md-3 p-1">
      <div style="margin-right: -50px; position: relative; z-index: 99;">
        <img src="IMGURL" style="height: 491px; margin-top: -20px;">
      </div>
    </div>
    <!--- main content --->
    <div class="col-md-6 p-1">
      <div class="card p-0 bg-dark" style="border: 3px solid;">
        <!--- faded background image --->
        <div class="container h-100 w-100" style="background: url(IMGURL); background-size: cover; opacity: 0.5; position: absolute; z-index: 0;"></div>
        <div class="d-flex flex-column p-2 text-white" style="height: 451px; position: relative; z-index: 9;">
          <!--- quote --->
          <div class="text-center">
            <i class="fas fa-quote-left mr-3"></i>
            <span class="font-italic" style="font-size: 15px;">barry, breakfast is ready</span>
            <i class="fas fa-quote-right ml-3"></i>
          </div>
          <hr style="border-top: 1px solid #FFFFFF; width: 30%">
          <!--- info --->
          <div class="row no-gutters" style="font-size: 18px;">
            <div class="col-md-3 col-6 px-2">Info</div>
            <div class="col-md-3 col-6 px-2 text-right">Content</div>
            <div class="col-md-3 col-6 px-2">Info</div>
            <div class="col-md-3 col-6 px-2 text-right">Content</div>
            <div class="col-md-3 col-6 px-2">Info</div>
            <div class="col-md-3 col-6 px-2 text-right">Content</div>
            <div class="col-md-3 col-6 px-2">Info</div>
            <div class="col-md-3 col-6 px-2 text-right">Content</div>
            <div class="col-md-3 col-6 px-2">Info</div>
            <div class="col-md-3 col-6 px-2 text-right">Content</div>
            <div class="col-md-3 col-6 px-2">Info</div>
            <div class="col-md-3 col-6 px-2 text-right">Content</div>
            <div class="col-md-3 col-6 px-2">Info</div>
            <div class="col-md-3 col-6 px-2 text-right">Content</div>
            <div class="col-md-3 col-6 px-2">Theme</div>
            <div class="col-md-3 col-6 px-2 text-right">Content</div>
          </div>
          <hr style="border-top: 1px solid #FFFFFF; width: 60%">
          <!--- paragraphs --->
          <div class="overflow-auto">
            <p>According to all known laws of aviation, there is no way that a bee should be able to fly. Its wings are too small to get its fat little body off the ground. The bee, of course, flies anyway. Because bees don’t care what humans think is impossible.” SEQ. 75 - “INTRO TO BARRY” INT. BENSON HOUSE - DAY ANGLE ON: Sneakers on the ground. Camera PANS UP to reveal BARRY BENSON’S BEDROOM ANGLE ON: Barry’s hand flipping through different sweaters in his closet. BARRY Yellow black, yellow black, yellow black, yellow black, yellow black, yellow black...oohh, black and yellow... ANGLE ON: Barry wearing the sweater he picked, looking in the mirror. BARRY (CONT’D) Yeah, let’s shake it up a little. He picks the black and yellow one. He then goes to the sink, takes the top off a CONTAINER OF HONEY, and puts some honey into his hair. He squirts some in his mouth and gargles. Then he takes the lid off the bottle, and rolls some on like deodorant. CUT TO: INT. BENSON HOUSE KITCHEN - CONTINUOUS Barry’s mother, JANET BENSON, yells up at Barry.</p>
          </div>
        </div>
      </div>
    </div>
    <!--- side boxes --->
    <div class="col-md-3 p-1">
      <div class="row no-gutters justify-content-center">
        <!--- likes --->
        <div class="col-md-12 col-6 p-md-0 p-1">
          <div class="card p-0 bg-dark" style="border: 3px solid;">
            <!--- faded background image --->
            <div class="container h-100 w-100" style="background: url(IMGURL); background-size: cover; opacity: 0.5; position: absolute; z-index: 0;"></div>
            <div class="d-flex flex-column p-2 text-white" style="position: relative; z-index: 9; height: 141px;">
              <!--- likes --->
              <h1 class="text-center"><i class="fas fa-check fa-fw mr-2"></i>Likes</h1>
              <hr class="mt-0 mb-2 w-100" style="border-top: 1px solid #FFFFFF;">
              <!--- list --->
              <div class="overflow-auto">
                <ul class="pl-3">
                  <li>content</li>
                  <li>content</li>
                  <li>content</li>
                  <li>content</li>
                  <li>content</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <!--- dislikes --->
        <div class="col-md-12 col-6 p-md-0 p-1">
          <div class="card p-0 bg-dark mt-md-2" style="border: 3px solid;">
            <!--- faded background image --->
            <div class="container h-100 w-100" style="background: url(IMGURL); background-size: cover; opacity: 0.5; position: absolute; z-index: 0;"></div>
            <div class="d-flex flex-column p-2 text-white" style="position: relative; z-index: 9; height: 141px;">
              <!--- dislikes --->
              <h1 class="text-center"><i class="fas fa-times fa-fw mr-2"></i>Dislikes</h1>
              <hr class="mt-0 mb-2 w-100" style="border-top: 1px solid #FFFFFF;">
              <!--- list --->
              <div class="overflow-auto">
                <ul class="pl-3">
                  <li>content</li>
                  <li>content</li>
                  <li>content</li>
                  <li>content</li>
                  <li>content</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <!--- notes/misc --->
        <div class="col-md-12 col-6 p-md-0 p-1">
          <div class="card p-0 bg-dark mt-md-2" style="border: 3px solid;">
            <!--- faded background image --->
            <div class="container h-100 w-100" style="background: url(IMGURL); background-size: cover; opacity: 0.5; position: absolute; z-index: 0;"></div>
            <div class="d-flex flex-column p-2 text-white" style="position: relative; z-index: 9; height: 141px;">
              <!--- notes --->
              <h1 class="text-center"><i class="fas fa-pencil fa-fw mr-2"></i>Misc</h1>
              <hr class="mt-0 mb-2 w-100" style="border-top: 1px solid #FFFFFF;">
              <!--- list --->
              <div class="overflow-auto">
                <ul class="pl-3">
                  <li>content</li>
                  <li>content</li>
                  <li>content</li>
                  <li>content</li>
                  <li>content</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <!--- end --->
      </div>
    </div>
  </div>
  <!--- credits --->
  <div class="text-right">
    <a href="LINK" class="tooltipster" title="pagedoll" data-placement="bottom"><i class="fas fa-ribbon fa-fw"></i></a>
    .
    <a href="LINK" class="tooltipster" title="images" data-placement="bottom"><i class="fas fa-images fa-fw"></i></a>
    .
    <a href="/8byte" class="tooltipster" title="code credits" data-placement="bottom"><i class="fas fa-crow fa-fw"></i></a>
  </div>
</div>