collectible

created by:8byte

HTMLCustom ColorsCharacter

Line Count: 60

Difficulty:

Default
Safehou-se Version

<!--- colors (ctrl f and replace all
#d8e2dc - main background
#2D1410 - font color
#93ab9c - badges/pills
--->
<div class="container" style="max-width: 400px;">
  <!--- main card --->
  <div class="card p-3 border-0" style="background: #d8e2dc; border-top-left-radius: 20px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;">
    <!--- name --->
    <h1 class="mx-1" style="color: #2D1410;">Character Name <i class="fas fa-star pull-right"></i></h1>
    <!--- main image --->
    <div class="mb-2 mx-1" style="background:url(IMGURL); background-size: cover; height: 200px;"></div>
    <!--- color palette --->
    <div class="row no-gutters" style="height: 25px;">
      <div class="col m-1 w-100 h-100" style="background: #fec5bb;"></div>
      <div class="col m-1 w-100 h-100" style="background: #f8edeb;"></div>
      <div class="col m-1 w-100 h-100" style="background: #ece4db;"></div>
      <div class="col m-1 w-100 h-100" style="background: #ffd7ba;"></div>
    </div>
    <!--- basic info --->
    <div class="row no-gutters my-1 p-2" style="color: #2D1410;">
      <div class="col-6 p-1 text-left">
        <strong>pronouns</strong>
      </div>
      <div class="col-6 p-1 text-right">
        prn/prn
      </div>
      <div class="col-6 p-1 text-left">
        <strong>worth</strong>
      </div>
      <div class="col-6 p-1 text-right">
        $$$
      </div>
      <div class="col-6 p-1 text-left">
        <strong>status</strong>
      </div>
      <div class="col-6 p-1">
        <!--- trade/sell status, add/delete badges as needed --->
        <div class="d-flex flex-row flex-wrap justify-content-end">
          <span class="badge badge-pill mx-1" style="color: #2D1410; background: #93ab9c;">UFS</span>
          <span class="badge badge-pill mx-1" style="color: #2D1410; background: #93ab9c;">UFT</span>
          <span class="badge badge-pill mx-1" style="color: #2D1410; background: #93ab9c;">UFO</span>
        </div>
      </div>
    </div>
    <!--- design notes --->
    <div class="container my-2 overflow-auto" style="color: #2D1410; max-height: 150px; font-size: 16px;">
      <ul class="list-unstyled">
        <li><i class="fas fa-star"></i> Design note</li>
        <li><i class="fas fa-star"></i> Design note</li>
        <li><i class="fas fa-star"></i> Design note</li>
      </ul>
    </div>
    <!--- gallery --->
    <div class="row no-gutters flex-wrap overflow-auto" style="max-height: 250px;">
      <!--- ideally, in threes --->
      <div class="col m-1" style="background:url(IMGURL); background-size: cover; height: 100px; min-width: 100px;"></div>
      <div class="col m-1" style="background:url(IMGURL); background-size: cover; height: 100px; min-width: 100px;"></div>
      <div class="col m-1" style="background:url(IMGURL); background-size: cover; height: 100px; min-width: 100px;"></div>
    </div>
  </div>
  <div class="pull-right"><a class="tooltipster" title="code credits" href="https://toyhou.se/8byte"><i class="fas fa-crow"></i></a></div>
</div>

Copy

<div class="container" style="max-width: 400px;">
  <!--- main card --->
  <div class="card p-3 border-0" style="background: {{c!BG Color!}}; border-top-left-radius: 20px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;">
    <!--- name --->
    <h1 class="mx-1" style="color: {{c!Text Color!}};">Character Name <i class="fas fa-star pull-right"></i></h1>
    <!--- main image --->
    <div class="mb-2 mx-1" style="background:url({{u!Main Image!}}); background-size: cover; height: 200px;"></div>
    <!--- color palette --->
    <div class="row no-gutters" style="height: 25px;">
      {{%Color Palette%
      <div class="col m-1 w-100 h-100" style="background: {{c%Color Swatch%}};"></div>
      %end%}}
    </div>
    <!--- basic info --->
    <div class="row no-gutters my-1 p-2" style="color: {{c!Text Color!}};">
      <div class="col-6 p-1 text-left">
        <strong>pronouns</strong>
      </div>
      <div class="col-6 p-1 text-right">
        {{!Pronouns!}}
      </div>
      <div class="col-6 p-1 text-left">
        <strong>worth</strong>
      </div>
      <div class="col-6 p-1 text-right">
        {{!Worth!}}
      </div>
      <div class="col-6 p-1 text-left">
        <strong>status</strong>
      </div>
      <div class="col-6 p-1">
        <!--- trade/sell status, add/delete badges as needed --->
        <div class="d-flex flex-row flex-wrap justify-content-end">
          {{%Trade Status%
          <span class="badge badge-pill mx-1" style="color: {{c!Text Color!}}; background: {{c!Badge Color!}};">{{%Trade Status Text%}}</span>
          %end%}}
        </div>
      </div>
    </div>
    <!--- design notes --->
    <div class="container my-2 overflow-auto" style="color: {{c!Text Color!}}; max-height: 150px; font-size: 16px;">
      <ul class="list-unstyled">
        {{%Design Notes%
        <li><i class="fas fa-star"></i> {{%Note%}}</li>
        %end%}}
      </ul>
    </div>
    <!--- gallery --->
    <div class="row no-gutters flex-wrap overflow-auto" style="max-height: 250px;">
      <!--- ideally, in threes --->
      {{%Image Gallery%
      <div class="col m-1" style="background:url({{u%Image%}}); background-size: cover; height: 100px; min-width: 100px;"></div>
      %end%}}
    </div>
  </div>
  <div class="text-right"><a class="tooltipster" title="code credits" href="https://toyhou.se/8byte"><i class="fas fa-crow"></i></a></div>
</div>

Stor8

collectible

Password (optional)