Stor8

<!---
==== Rarity - Wide Version
==== HTML by 8byte
----
==== Colors
---- For easier changes, use Ctrl F and then
---- click the plus icon at the bottom to 
---- replace all.
====
#edf3f6 - card color
#020202 - text color
#5e51a3 - accent color
--->
<div class="mx-auto" style="max-width: 800px;">
  <!--- background image/pattern --->
  <div class="card p-1" style="background-image: url('IMGURL'); border-radius: 10px; color: #020202;">
    <div class="row no-gutters">
      <div class="col-md-5 align-items-center p-2">
        <!--- image --->
        <img src="IMGURL" class="w-100" />
      </div>
      <div class="col-md-7 align-items-center p-2">
        <div class="card overflow-hidden p-3" style="background: #edf3f6; border-radius: 10px; position: relative; box-shadow: 0 0 3px rgba(0,0,0,0.2);">
          <div class="card p-3" style="background: #5e51a3; position: absolute; top: 0; left: 0; border-radius: 0 0 2rem 0;">
            <!--- top icon --->
            <i class="fas fa-gem fa-fw fa-2x" style="color: #edf3f6;"></i>
          </div>
          <h1 class="text-uppercase text-right font-italic mb-0" style="color: #5e51a3; font-weight: 900; letter-spacing: 2px; font-size: 1.7rem;">
            <!--- character name --->
            Rarity
          </h1>
          <!--- divider ---><div class="p-3"></div>
          <div class="flex-row flex-md-nowrap flex-wrap m-n2">
            <div class="w-100 p-2">
              <!--- basic info --->
              <div class="row no-gutters m-n1">
                <!--- content --->
                <div class="col-md-6 justify-content-between align-items-center p-1">
                  <strong class="text-uppercase font-italic" style="color: #5e51a3; letter-spacing: 1px;">Name</strong>
                  <span class="text-lowercase" style="font-variant: small-caps;">content</span>
                </div>
                <!--- content --->
                <div class="col-md-6 justify-content-between align-items-center p-1">
                  <strong class="text-uppercase font-italic" style="color: #5e51a3; letter-spacing: 1px;">Nickname</strong>
                  <span class="text-lowercase" style="font-variant: small-caps;">content</span>
                </div>
                <!--- content --->
                <div class="col-md-6 justify-content-between align-items-center p-1">
                  <strong class="text-uppercase font-italic" style="color: #5e51a3; letter-spacing: 1px;">Birthday</strong>
                  <span class="text-lowercase" style="font-variant: small-caps;">content</span>
                </div>
                <!--- content --->
                <div class="col-md-6 justify-content-between align-items-center p-1">
                  <strong class="text-uppercase font-italic" style="color: #5e51a3; letter-spacing: 1px;">Pronouns</strong>
                  <span class="text-lowercase" style="font-variant: small-caps;">content</span>
                </div>
                <!--- content --->
                <div class="col-md-6 justify-content-between align-items-center p-1">
                  <strong class="text-uppercase font-italic" style="color: #5e51a3; letter-spacing: 1px;">Occupation</strong>
                  <span class="text-lowercase" style="font-variant: small-caps;">content</span>
                </div>
                <!--- content --->
                <div class="col-md-6 justify-content-between align-items-center p-1">
                  <strong class="text-uppercase font-italic" style="color: #5e51a3; letter-spacing: 1px;">Species</strong>
                  <span class="text-lowercase" style="font-variant: small-caps;">content</span>
                </div>
                <!--- end of content --->
              </div>
              <!--- divider --->
              <div class="flex-row align-items-center my-2">
                <hr class="flex-fill my-0" style="border-top-width: 3px; border-style: double; border-top-color: #020202; opacity: .125;" />
                <!--- decoration icon --->
                <i class="far fa-gem fa-fw mx-2" style="color: #5e51a3;"></i>
                <hr class="flex-fill my-0" style="border-top-width: 3px; border-style: double; border-top-color: #020202; opacity: .125;" />
              </div>
              <!--- quote box --->
              <div class="text-center font-italic font-weight-bold p-1" style="position: relative; letter-spacing: 1.5px;">
                <!--- decorative icons --->
                <i class="fas fa-quote-left fa-2x" style="color: #5e51a3; opacity: .2; top: -.5rem; left: -.25rem; position: absolute;"></i>
                <i class="fas fa-quote-right fa-2x" style="color: #5e51a3; opacity: .2; bottom: -.5rem; right: -.25rem; position: absolute;"></i>
                <!--- quote --->
                <h5 class="mb-0">Ut nec dolor at massa facilisis egestas.</h5>
              </div>
            </div>
            <div class="flex-fill flex-md-column flex-row justify-content-between p-2">
              <!--- color palette --->
              <i style="color: #000000;" class="fas fa-circle m-2"></i>
              <i style="color: #000000;" class="fas fa-circle m-2"></i>
              <i style="color: #000000;" class="fas fa-circle m-2"></i>
              <i style="color: #000000;" class="fas fa-circle m-2"></i>
              <i style="color: #000000;" class="fas fa-circle m-2"></i>
            </div>
          </div>
          <!--- divider ---><hr class="w-100 my-2" style="border-top-width: 3px; border-style: dotted; border-top-color: #020202; opacity: .125;" />
          <div class="row no-gutters m-n2">
            <div class="col-md-4 p-2">
              <div style="background-image: url('IMGURL'); background-size: cover; background-position: center; padding-top: 100%; border-radius: 10px;" class="bg-dark h-100"></div>
            </div>
            <div class="col-md-8 flex-column p-2">
              <!--- designer --->
              <div class="justify-content-between align-items-center p-1">
                <strong class="text-uppercase font-italic" style="color: #5e51a3; letter-spacing: 1px;">Designer</strong>
                <a href="LINK" class="text-lowercase" style="color: #020202; font-variant: small-caps;">username</span>
              </div>
              <!--- image credits --->
              <div class="justify-content-between align-items-center p-1">
                <strong class="text-uppercase font-italic" style="color: #5e51a3; letter-spacing: 1px;">Image Credits</strong>
                <a href="LINK" class="text-lowercase" style="color: #020202; font-variant: small-caps;">username</span>
              </div>
              <!--- moodboard --->
              <div class="card h-100 overflow-hidden flex-row flex-nowrap" style="border-radius: 10px; min-height: 75px;">
                <!--- image --->
                <div style="background-image: url('IMGURL'); background-size: cover; background-position: center;" class="col bg-dark"></div>
                <!--- image --->
                <div style="background-image: url('IMGURL'); background-size: cover; background-position: center;" class="col bg-dark"></div>
                <!--- image --->
                <div style="background-image: url('IMGURL'); background-size: cover; background-position: center;" class="col bg-dark"></div>
              </div>
            </div>
          </div>
          <!--- divider ---><div class="p-2"></div>
          <!--- design notes --->
          <ul class="list-unstyled mb-0">
            <!--- design note --->
            <li><i class="fas fa-diamond mr-2" style="color: #5e51a3; font-size: .5rem; position: relative; top: -.1rem;"></i> 
              Duis malesuada sapien a dolor ultricies, nec vulputate risus auctor.
            </li>
            <!--- design note --->
            <li><i class="fas fa-diamond mr-2" style="color: #5e51a3; font-size: .5rem; position: relative; top: -.1rem;"></i>
              Duis malesuada sapien a dolor ultricies, nec vulputate risus auctor.
            </li>
            <!--- design note --->
            <li><i class="fas fa-diamond mr-2" style="color: #5e51a3; font-size: .5rem; position: relative; top: -.1rem;"></i>
              Duis malesuada sapien a dolor ultricies, nec vulputate risus auctor.
            </li>
            <!--- end of design notes --->
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="text-right"><small style="font-variant: small-caps;">code by @8byte</small></div>
</div>

<div style="max-width: 500px;" class="mx-auto">
  <div style="background-image: url('{{u!Background Pattern!}}'); border-radius: 10px; color: {{c!Text Color!}};" class="card p-1">
    <div class="row no-gutters">
      <div class="col-12 justify-content-center p-2">
        <img style="max-width: 300px;" class="w-100" src="{{u!Main Image!}}">
      </div>
      <div class="col-12 p-2">
        <div style="background: {{c!Card Color!}}; border-radius: 10px; position: relative; box-shadow: 0 0 3px rgba(0,0,0,0.2);" class="card overflow-hidden p-3">
          <div style="background: {{c!Accent Color!}}; position: absolute; top: 0; left: 0; border-radius: 0 0 2rem 0;" class="card p-3">
            <i style="color: {{c!Card Color!}};" class="{{i!Icon!}} fa-fw fa-2x"></i>
          </div>
          <h1 style="color: {{c!Accent Color!}}; font-weight: 900; letter-spacing: 2px; font-size: 1.7rem;" class="text-uppercase text-right font-italic mb-0">
            {{!Character Name!}}
          </h1>
          <div class="p-3"></div>
          <div class="flex-row flex-md-nowrap flex-wrap m-n2">
            <div class="w-100 p-2">
              <div class="row no-gutters m-n1">
                <div class="col-md-6 justify-content-between align-items-center p-1">
                  <strong style="color: {{c!Accent Color!}}; letter-spacing: 1px;" class="text-uppercase font-italic">Name</strong>
                  <span style="font-variant: small-caps;" class="text-lowercase">{{!Name!}}</span>
                </div>
                <div class="col-md-6 justify-content-between align-items-center p-1">
                  <strong style="color: {{c!Accent Color!}}; letter-spacing: 1px;" class="text-uppercase font-italic">Nickname</strong>
                  <span style="font-variant: small-caps;" class="text-lowercase">{{!Nickname!}}</span>
                </div>
                <div class="col-md-6 justify-content-between align-items-center p-1">
                  <strong style="color: {{c!Accent Color!}}; letter-spacing: 1px;" class="text-uppercase font-italic">Birthday</strong>
                  <span style="font-variant: small-caps;" class="text-lowercase">{{!Birthday!}}</span>
                </div>
                <div class="col-md-6 justify-content-between align-items-center p-1">
                  <strong style="color: {{c!Accent Color!}}; letter-spacing: 1px;" class="text-uppercase font-italic">Pronouns</strong>
                  <span style="font-variant: small-caps;" class="text-lowercase">{{!Pronouns!}}</span>
                </div>
                <div class="col-md-6 justify-content-between align-items-center p-1">
                  <strong style="color: {{c!Accent Color!}}; letter-spacing: 1px;" class="text-uppercase font-italic">Occupation</strong>
                  <span style="font-variant: small-caps;" class="text-lowercase">{{!Occupation!}}</span>
                </div>
                <div class="col-md-6 justify-content-between align-items-center p-1">
                  <strong style="color: {{c!Accent Color!}}; letter-spacing: 1px;" class="text-uppercase font-italic">Species</strong>
                  <span style="font-variant: small-caps;" class="text-lowercase">{{!Species!}}</span>
                </div>
              </div>
              <div class="flex-row align-items-center my-2">
                <hr style="border-top-width: 3px; border-style: double; border-top-color: {{c!Text Color!}}; opacity: .125;" class="flex-fill my-0"></hr>
                <i style="color: {{c!Accent Color!}};" class="{{i!Icon!}} fa-fw mx-2"></i>
                <hr style="border-top-width: 3px; border-style: double; border-top-color: {{c!Text Color!}}; opacity: .125;" class="flex-fill my-0"></hr>
              </div>
              <div style="position: relative; letter-spacing: 1.5px;" class="text-center font-italic font-weight-bold p-1">
                <i style="color: {{c!Accent Color!}}; opacity: .2; top: -.5rem; left: -.25rem; position: absolute;" class="fas fa-quote-left fa-2x"></i>
                <i style="color: {{c!Accent Color!}}; opacity: .2; bottom: -.5rem; right: -.25rem; position: absolute;" class="fas fa-quote-right fa-2x"></i>
                <h5 class="mb-0">Ut nec dolor at massa facilisis egestas.</h5>
              </div>
            </div>
            <div class="flex-fill flex-md-column flex-row justify-content-between p-2">
              {{%Color Palette%
              <i style="color: {{c%Color%}};" class="fas fa-circle m-2"></i>
              %end%}}
            </div>
          </div>
          <hr style="border-top-width: 3px; border-style: dotted; border-top-color: {{c!Text Color!}}; opacity: .125;" class="w-100 my-2"></hr>
          <div class="row no-gutters m-n2">
            <div class="col-md-4 p-2">
              <div class="bg-dark h-100" style="background-image: url('{{u!Cutie Mark Image!}}'); background-size: cover; background-position: center; padding-top: 100%; border-radius: 10px;"></div>
            </div>
            <div class="col-md-8 flex-column p-2">
              <div class="justify-content-between align-items-center p-1">
                {{%%Designer%
                <strong style="color: {{c!Accent Color!}}; letter-spacing: 1px;" class="text-uppercase font-italic">Designer</strong>
                <a style="color: {{c!Text Color!}}; font-variant: small-caps;" class="text-lowercase" href="{{%Link to Designer%}}">{{%Designer Username%}}</a>
                %end%}}
              </div>
              <div class="justify-content-between align-items-center p-1">
                {{%%Image Credit%
                <strong style="color: {{c!Accent Color!}}; letter-spacing: 1px;" class="text-uppercase font-italic">Image Credits</strong>
                <a style="color: {{c!Text Color!}}; font-variant: small-caps;" class="text-lowercase" href="{{%Link to Artist%}}">{{%Artist Username%}}</a>
                %end%}}
              </div>
              <div style="border-radius: 10px; min-height: 75px;" class="card h-100 overflow-hidden flex-row flex-nowrap">
                {{%Moodboard Images%
                <div class="col bg-dark" style="background-image: url('{{u%Image Link%}}'); background-size: cover; background-position: center;"></div>
                %end%}}
              </div>
            </div>
          </div>
          <div class="p-2"></div>
          <ul class="list-unstyled mb-0">
            {{%Design Notes%
            <li><i style="color: {{c!Accent Color!}}; font-size: .5rem; position: relative; top: -.1rem;" class="fas fa-diamond mr-2"></i> 
              {{%Design Note%}}
            </li>
            %end%}}
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="text-right"><small style="font-variant: small-caps;">code by @8byte</small></div>
</div>

<div style="max-width: 800px;" class="mx-auto">
  <div style="background-image: url('{{u!Background Pattern!}}'); border-radius: 10px; color: {{c!Text Color!}};" class="card p-1">
    <div class="row no-gutters">
      <div class="col-md-5 align-items-center p-2">
        <img style="max-width: 300px;" class="w-100" src="{{u!Main Image!}}">
      </div>
      <div class="col-md-7 align-items-center p-2">
        <div style="background: {{c!Card Color!}}; border-radius: 10px; position: relative; box-shadow: 0 0 3px rgba(0,0,0,0.2);" class="card overflow-hidden p-3">
          <div style="background: {{c!Accent Color!}}; position: absolute; top: 0; left: 0; border-radius: 0 0 2rem 0;" class="card p-3">
            <i style="color: {{c!Card Color!}};" class="{{i!Icon!}} fa-fw fa-2x"></i>
          </div>
          <h1 style="color: {{c!Accent Color!}}; font-weight: 900; letter-spacing: 2px; font-size: 1.7rem;" class="text-uppercase text-right font-italic mb-0">
            {{!Character Name!}}
          </h1>
          <div class="p-3"></div>
          <div class="flex-row flex-md-nowrap flex-wrap m-n2">
            <div class="w-100 p-2">
              <div class="row no-gutters m-n1">
                <div class="col-md-6 justify-content-between align-items-center p-1">
                  <strong style="color: {{c!Accent Color!}}; letter-spacing: 1px;" class="text-uppercase font-italic">Name</strong>
                  <span style="font-variant: small-caps;" class="text-lowercase">{{!Name!}}</span>
                </div>
                <div class="col-md-6 justify-content-between align-items-center p-1">
                  <strong style="color: {{c!Accent Color!}}; letter-spacing: 1px;" class="text-uppercase font-italic">Nickname</strong>
                  <span style="font-variant: small-caps;" class="text-lowercase">{{!Nickname!}}</span>
                </div>
                <div class="col-md-6 justify-content-between align-items-center p-1">
                  <strong style="color: {{c!Accent Color!}}; letter-spacing: 1px;" class="text-uppercase font-italic">Birthday</strong>
                  <span style="font-variant: small-caps;" class="text-lowercase">{{!Birthday!}}</span>
                </div>
                <div class="col-md-6 justify-content-between align-items-center p-1">
                  <strong style="color: {{c!Accent Color!}}; letter-spacing: 1px;" class="text-uppercase font-italic">Pronouns</strong>
                  <span style="font-variant: small-caps;" class="text-lowercase">{{!Pronouns!}}</span>
                </div>
                <div class="col-md-6 justify-content-between align-items-center p-1">
                  <strong style="color: {{c!Accent Color!}}; letter-spacing: 1px;" class="text-uppercase font-italic">Occupation</strong>
                  <span style="font-variant: small-caps;" class="text-lowercase">{{!Occupation!}}</span>
                </div>
                <div class="col-md-6 justify-content-between align-items-center p-1">
                  <strong style="color: {{c!Accent Color!}}; letter-spacing: 1px;" class="text-uppercase font-italic">Species</strong>
                  <span style="font-variant: small-caps;" class="text-lowercase">{{!Species!}}</span>
                </div>
              </div>
              <div class="flex-row align-items-center my-2">
                <hr style="border-top-width: 3px; border-style: double; border-top-color: {{c!Text Color!}}; opacity: .125;" class="flex-fill my-0"></hr>
                <i style="color: {{c!Accent Color!}};" class="{{i!Icon!}} fa-fw mx-2"></i>
                <hr style="border-top-width: 3px; border-style: double; border-top-color: {{c!Text Color!}}; opacity: .125;" class="flex-fill my-0"></hr>
              </div>
              <div style="position: relative; letter-spacing: 1.5px;" class="text-center font-italic font-weight-bold p-1">
                <i style="color: {{c!Accent Color!}}; opacity: .2; top: -.5rem; left: -.25rem; position: absolute;" class="fas fa-quote-left fa-2x"></i>
                <i style="color: {{c!Accent Color!}}; opacity: .2; bottom: -.5rem; right: -.25rem; position: absolute;" class="fas fa-quote-right fa-2x"></i>
                <h5 class="mb-0">Ut nec dolor at massa facilisis egestas.</h5>
              </div>
            </div>
            <div class="flex-fill flex-md-column flex-row justify-content-between p-2">
              {{%Color Palette%
              <i style="color: {{c%Color%}};" class="fas fa-circle m-2"></i>
              %end%}}
            </div>
          </div>
          <hr style="border-top-width: 3px; border-style: dotted; border-top-color: {{c!Text Color!}}; opacity: .125;" class="w-100 my-2"></hr>
          <div class="row no-gutters m-n2">
            <div class="col-md-4 p-2">
              <div class="bg-dark h-100" style="background-image: url('{{u!Cutie Mark Image!}}'); background-size: cover; background-position: center; padding-top: 100%; border-radius: 10px;"></div>
            </div>
            <div class="col-md-8 flex-column p-2">
              <div class="justify-content-between align-items-center p-1">
                {{%%Designer%
                <strong style="color: {{c!Accent Color!}}; letter-spacing: 1px;" class="text-uppercase font-italic">Designer</strong>
                <a style="color: {{c!Text Color!}}; font-variant: small-caps;" class="text-lowercase" href="{{%Link to Designer%}}">{{%Designer Username%}}</a>
                %end%}}
              </div>
              <div class="justify-content-between align-items-center p-1">
                {{%%Image Credit%
                <strong style="color: {{c!Accent Color!}}; letter-spacing: 1px;" class="text-uppercase font-italic">Image Credits</strong>
                <a style="color: {{c!Text Color!}}; font-variant: small-caps;" class="text-lowercase" href="{{%Link to Artist%}}">{{%Artist Username%}}</a>
                %end%}}
              </div>
              <div style="border-radius: 10px; min-height: 75px;" class="card h-100 overflow-hidden flex-row flex-nowrap">
                {{%Moodboard Images%
                <div class="col bg-dark" style="background-image: url('{{u%Image Link%}}'); background-size: cover; background-position: center;"></div>
                %end%}}
              </div>
            </div>
          </div>
          <div class="p-2"></div>
          <ul class="list-unstyled mb-0">
            {{%Design Notes%
            <li><i style="color: {{c!Accent Color!}}; font-size: .5rem; position: relative; top: -.1rem;" class="fas fa-diamond mr-2"></i> 
              {{%Design Note%}}
            </li>
            %end%}}
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="text-right"><small style="font-variant: small-caps;">code by @8byte</small></div>
</div>