Stor8

<!---
==== Jesse Character
==== HTML by 8byte
----
==== Colors
---- For easier changes, use Ctrl F and then
---- click the plus icon at the bottom to 
---- replace all.
====
#daedfe - main background
#ffffff - white background
#959ad1 - accent
#1a1028 - text and borders
--->
<div class="mx-auto" style="color: #1a1028; max-width: 1000px;">
  <!--- background image --->
  <div class="bg-faded p-3" style="background-image: url('IMGURL'); background-size: cover;">
    <div class="flex-md-row flex-column justify-content-center align-items-center" style="margin-bottom: -4.5rem; position: relative; z-index: 99;">
      <div class="p-2 mr-2" style="background: #ffffff; color: #959ad1; border-radius: 5px;">
        <h1 class="text-uppercase d-md-block d-none mb-0" style="font-size: 8rem;">Indigo</h1>
        <h1 class="text-uppercase d-md-none d-block mb-0" style="font-size: 4rem;">Indigo</h1>
      </div>
      <div class="pb-md-4 pt-md-0 pt-3">
        <ul class="nav">
          <li class="nav-item rounded-circle justify-content-center align-items-center mx-1" style="background: #daedfe; border: 5px solid #1a1028; height: 40px; width: 40px; position: relative;">
            <i class="fas fa-heart fa-fw"></i>
            <a href="#ONE" data-toggle="tab" class="nav-link active btn-outline-primary rounded-circle w-100 h-100" style="position: absolute; mix-blend-mode: multiply; opacity: .3;"></a>
          </li>
          <li class="nav-item rounded-circle justify-content-center align-items-center mx-1" style="background: #daedfe; border: 5px solid #1a1028; height: 40px; width: 40px; position: relative;">
            <i class="fas fa-star fa-fw"></i>
            <a href="#TWO" data-toggle="tab" class="nav-link btn-outline-primary rounded-circle w-100 h-100" style="position: absolute; mix-blend-mode: multiply; opacity: .3;"></a>
          </li>
        </ul>
      </div>
    </div>
    <div class="row no-gutters justify-content-center">
      <div class="col-md col-6 align-items-center order-md-1 order-3">
        <div class="mr-md-n5" style="position: relative; z-index: 99;">
          <div class="mr-md-n5">
            <!--- character image --->
            <img src="IMGURL">
          </div>
        </div>
      </div>
      <div class="col-md-8 p-2 order-md-2 order-1">
        <div class="p-3" style="background: #daedfe; border: 10px solid #1a1028; border-radius: 15px;">
          <div style="height: 2.5rem;"></div>
          <div class="align-items-center">
            <hr class="flex-fill" style="border-top: 3px solid #1a1028;">
            <span style="font-size: 3rem;">🌸</span>
            <hr class="flex-fill" style="border-top: 3px solid #1a1028;">
          </div>
          <div class="tab-content px-md-5">
            <div class="tab-pane active" id="ONE">
              <div class="flex-column" style="height: 300px;">
                <div class="p-3 justify-content-between" style="background: #959ad1; color: #ffffff; border-radius: 15px;">
                  <i class="fas fa-quote-left"></i>
                  <!--- quote --->
                  <h1 class="mb-0">quote goes here</h1>
                  <i class="fas fa-quote-right"></i>
                </div>
                <div class="p-2"></div>
                <div class="overflow-auto h-100 p-3" style="background: #ffffff; border-radius: 15px;">
                  <!--- description --->
                  <p>Donec lobortis metus nunc, at vestibulum urna ultricies id. Curabitur dictum efficitur est at pharetra. Phasellus eleifend metus in lorem facilisis aliquam. Etiam sed eros augue. Nullam quam libero, accumsan at blandit vehicula, tristique at ipsum. Curabitur eu nibh finibus, viverra augue sit amet, molestie libero. Quisque vel fringilla ante. Proin hendrerit justo eu sapien laoreet, ac aliquam ex vehicula. Maecenas sit amet sapien elit. Morbi laoreet convallis sapien, eu convallis turpis. Donec feugiat ultrices ipsum, a tempus ex condimentum nec.</p>
                </div>
              </div>
            </div>
            <div class="tab-pane" id="TWO">
              <div class="flex-column p-2" style="background: #ffffff; border-radius: 15px; height: 300px;">
                <div class="overflow-auto">
                  <div class="row no-gutters">
                    <div class="col-md p-2">
                      <h1 class="text-center">Likes</h1>
                      <ul>
                        <!--- likes --->
                        <li>content</li>
                        <li>content</li>
                        <li>content</li>
                      </ul>
                      <hr style="border-top: 3px solid #1a1028;">
                      <h1 class="text-center">Dislikes</h1>
                      <ul>
                        <!--- dislikes --->
                        <li>content</li>
                        <li>content</li>
                        <li>content</li>
                      </ul>
                    </div>
                    <div class="col-md" style="max-width: 3px; border-left: 3px solid #1a1028;"></div>
                    <div class="col-md p-2">
                      <!--- change video here, make sure you get the embed link instead of the direct youtube URL --->
                      <iframe style="width: 100%;" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen src="https://www.youtube.com/embed/4MNbX4MRIFQ?modestbranding=1"></iframe>
                      <h3 class="text-center mb-0">Song Name</h3>
                      <h5 class="text-center font-italic">Song Artist(s)</h5>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--- moodboard --->
      <div class="col-md flex-column p-2 order-md-3 order-2">
        <!--- image --->
        <div class="bg-dark h-100" style="background-image: url('IMGURL'); background-size: cover; background-position: center; border-radius: 15px;"></div>
        <div class="p-2"></div>
        <!--- image --->
        <div class="bg-dark h-100" style="background-image: url('IMGURL'); background-size: cover; background-position: center; border-radius: 15px;"></div>
        <div class="p-2"></div>
        <!--- image --->
        <div class="bg-dark h-100" style="background-image: url('IMGURL'); background-size: cover; background-position: center; border-radius: 15px;"></div>
      </div>
    </div>
  </div>
  <div class="text-right"><small>code by @8byte</small></div>
</div>