Stor8

<!---
==== Ask Blog code
==== HTML by 8byte
----
==== Colors
---- For easier changes, use Ctrl F and then
---- click the plus icon at the bottom to 
---- replace all.
====
#003249 - background and text
#ccdbdc - speech bubbles
#007ea7 - accent
--->
<div class="mx-auto" style="max-width: 800px;">
  <div class="p-3" style="background-color: #003249; border-radius: 5px; box-shadow: 0 0 3px; color: #003249;">
    <!--- ask (caret left) --->
    <div>
      <!--- question box --->
      <div class="d-flex align-items-end">
        <div style="background-color: #ccdbdc; width: 30px; height: 30px; transform: rotate(45deg); margin-right: -15px; margin-bottom: 20px;"></div>
        <div class="flex-fill flex-column justify-content-between p-3" style="background-color: #ccdbdc; border-radius: 10px; min-height: 100px;">
          <!--- question --->
          <h1 class="mb-0">A question here, for characters to answer.</h1>
          <!--- asker username --->
          <div class="text-right">
            <span class="font-italic" style="opacity: .5;"><i class="far fa-dash mr-2"></i> username</span>
          </div>
        </div>
      </div>
      <!--- answers --->
      <div>
        <!--- character answer --->
        <div class="d-flex my-3">
          <div class="mr-2" style="min-width: 100px; max-width: 100px;">
            <!--- profile picture --->
            <div style="background-image: url('IMGURL'); background-size: cover; background-position: center; width: 50px; height: 50px; border-radius: 50%; border: 2px solid #007ea7;" class="mx-auto"></div>
            <!--- name --->
            <div class="text-center"><small class="text-uppercase font-weight-bold" style="color: #ccdbdc;">Character Name</small></div>
          </div>
          <div class="flex-fill p-2" style="background-color: #ccdbdc; border-radius: 10px;">
            <p>Character answer to the question.</p>
          </div>
        </div>
        <!--- character answer --->
        <div class="d-flex my-3">
          <div class="mr-2" style="min-width: 100px; max-width: 100px;">
            <!--- profile picture --->
            <div style="background-image: url('IMGURL'); background-size: cover; background-position: center; width: 50px; height: 50px; border-radius: 50%; border: 2px solid #007ea7;" class="mx-auto"></div>
            <!--- name --->
            <div class="text-center"><small class="text-uppercase font-weight-bold" style="color: #ccdbdc;">Character Name</small></div>
          </div>
          <div class="flex-fill p-2" style="background-color: #ccdbdc; border-radius: 10px;">
            <p>Character answer to the question. Maecenas egestas ligula erat, in suscipit odio vestibulum eu. Nam luctus nisl eleifend leo facilisis, vitae facilisis urna congue. Fusce pretium, dui id fringilla pretium, purus ante eleifend velit, ac gravida turpis augue vel risus. Nam euismod odio nisl. Nullam vulputate ornare enim sit amet tempus. In dictum, felis egestas vehicula pretium, ipsum velit vehicula metus, mattis pretium dolor sem sed odio. Nam dictum ligula massa, mattis bibendum urna eleifend cursus. Quisque gravida odio libero, nec scelerisque leo pretium vel. Ut iaculis rhoncus euismod. Nunc sodales leo non lobortis fringilla.</p>
          </div>
        </div>
        <!--- end --->
      </div>
    </div>
    <!--- ask (caret right) --->
    <div>
      <!--- question box --->
      <div class="d-flex align-items-end">
        <div class="flex-fill flex-column justify-content-between p-3" style="background-color: #ccdbdc; border-radius: 10px; min-height: 100px;">
          <!--- question --->
          <h1 class="mb-0">A question here, for characters to answer.</h1>
          <!--- asker username --->
          <div class="text-right">
            <span class="font-italic" style="opacity: .5;"><i class="far fa-dash mr-2"></i> username</span>
          </div>
        </div>
        <div style="background-color: #ccdbdc; width: 30px; height: 30px; transform: rotate(45deg); margin-left: -15px; margin-bottom: 20px;"></div>
      </div>
      <!--- answers --->
      <div>
        <!--- character answer --->
        <div class="d-flex my-3">
          <div class="mr-2" style="min-width: 100px; max-width: 100px;">
            <!--- profile picture --->
            <div style="background-image: url('IMGURL'); background-size: cover; background-position: center; width: 50px; height: 50px; border-radius: 50%; border: 2px solid #007ea7;" class="mx-auto"></div>
            <!--- name --->
            <div class="text-center"><small class="text-uppercase font-weight-bold" style="color: #ccdbdc;">Character Name</small></div>
          </div>
          <div class="flex-fill p-2" style="background-color: #ccdbdc; border-radius: 10px;">
            <p>Character answer to the question.</p>
          </div>
        </div>
        <!--- character answer --->
        <div class="d-flex my-3">
          <div class="mr-2" style="min-width: 100px; max-width: 100px;">
            <!--- profile picture --->
            <div style="background-image: url('IMGURL'); background-size: cover; background-position: center; width: 50px; height: 50px; border-radius: 50%; border: 2px solid #007ea7;" class="mx-auto"></div>
            <!--- name --->
            <div class="text-center"><small class="text-uppercase font-weight-bold" style="color: #ccdbdc;">Character Name</small></div>
          </div>
          <div class="flex-fill p-2" style="background-color: #ccdbdc; border-radius: 10px;">
            <p>Character answer to the question. Maecenas egestas ligula erat, in suscipit odio vestibulum eu. Nam luctus nisl eleifend leo facilisis, vitae facilisis urna congue. Fusce pretium, dui id fringilla pretium, purus ante eleifend velit, ac gravida turpis augue vel risus. Nam euismod odio nisl. Nullam vulputate ornare enim sit amet tempus. In dictum, felis egestas vehicula pretium, ipsum velit vehicula metus, mattis pretium dolor sem sed odio. Nam dictum ligula massa, mattis bibendum urna eleifend cursus. Quisque gravida odio libero, nec scelerisque leo pretium vel. Ut iaculis rhoncus euismod. Nunc sodales leo non lobortis fringilla.</p>
          </div>
        </div>
        <!--- end --->
      </div>
    </div>
    <!--- end of ask --->
  </div>
  <div class="text-center"><small>code by @8byte</small></div>
</div>