ketchie

created by:8byte

HTMLCustom ColorsCharacterUser

Line Count: 59

Difficulty:

Default
Safehou-se Version

<!---
==== Ketchie
==== HTML by 8byte
----
==== Colors
---- For easier changes, use Ctrl F and then
---- click the plus icon at the bottom to 
---- replace all.
====
#ffffff - card background
#ffb5c5 - border
#020202 - text color
#febb61 - icon color
--->
<!--- background --->
<div style="background:url(IMGURL); background-size: cover; background-position: fixed; position: absolute; top: 0; bottom: 0; left:0; width: 100%; z-index: -1;">
</div>
<!--- content --->
<div class="container p-0" style="max-width: 637px;">
  <div class="row no-gutters">
    <div class="col-md-4 col-12 p-3">
      <div class="container" style="background: url(IMGURL); background-size: contain; background-position: center; background-repeat: no-repeat; height: 400px;"></div>
    </div>
    <div class="col-md-8 col-12 p-3">
      <div class="container p-3" style="color: #020202; background: #ffffff; border: 5px solid #ffb5c5;">
        <!--- name/age/pronouns section --->
        <h1 class="text-center">
          <span>name</span>
          <span><i class="fas fa-star mx-1" style="color: #febb61;"></i></span>
          <span>age</span>
          <span><i class="fas fa-star mx-1" style="color: #febb61;"></i></span>
          <span>prn/prn</span>
        </h1>
        <!--- scrollable bio --->
        <div class="overflow-auto" style="height: 110px;">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </div>
        <!--- border, can be removed --->
        <hr>
        <!--- likes and dislikes --->
        <div class="row no-gutters">
          <div class="col-6 p-1">
            <!--- character likes --->
            <h3 class="text-center">likes</h3>
            <div class="overflow-auto" style="max-height: 110px;">
              <ul class="list-unstyled">
                <!--- copy and paste as needed --->
                <li><i class="fas fa-heart mr-1"></i> Character like</li>
                <li><i class="fas fa-heart mr-1"></i> Character like</li>
                <li><i class="fas fa-heart mr-1"></i> Character like</li>
              </ul>
            </div>
          </div>
          <div class="col-6 p-1">
            <!--- character dislikes --->
            <h3 class="text-center">dislikes</h3>
            <div class="overflow-auto" style="max-height: 110px;">
              <ul class="list-unstyled">
                <!--- copy and paste as needed --->
                <li><i class="fas fa-times mr-1"></i> Character dislike</li>
                <li><i class="fas fa-times mr-1"></i> Character dislike</li>
                <li><i class="fas fa-times mr-1"></i> Character dislike</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="text-right"><a class="tooltipster" title="code credits" href="/8byte" data-placement="bottom"><i class="fas fa-crow"></i></a></div>
    </div>
  </div>
</div>

Copy

<div style="background:url({{u!BG Image!}}); background-size: cover; background-position: fixed; position: absolute; top: 0; bottom: 0; left:0; width: 100%; z-index: -1;">
</div>
<div style="max-width: 637px;" class="container p-0">
  <div class="row no-gutters">
    <div class="col-md-4 col-12 p-3">
      <div style="background: url({{u!Pagedoll!}}); background-size: contain; background-position: center; background-repeat: no-repeat; height: 400px;" class="container"></div>
    </div>
    <div class="col-md-8 col-12 p-3">
      <div style="color: {{c!Text Color!}}; background: {{c!BG Color!}}; border: 5px solid {{c!Border Color!}};" class="container p-3">
        <h1 class="text-center">
          <span>{{!Name!}}</span>
          <span><i style="color: {{c!Icon Color!}};" class="fas fa-star mx-1"></i></span>
          <span>{{!Age!}}</span>
          <span><i style="color: {{c!Icon Color!}};" class="fas fa-star mx-1"></i></span>
          <span>{{!Pronouns!}}</span>
        </h1>
        <div style="height: 110px;" class="overflow-auto">
          {{l!Long Text!}}
        </div>
        <hr>
        <div class="row no-gutters">
          <div class="col-6 p-1">
            <h3 class="text-center">likes</h3>
            <div style="max-height: 110px;" class="overflow-auto">
              <ul class="list-unstyled">
                {{%Likes%
                <li><i class="fas fa-heart mr-1"></i> {{%Content%}}</li>
                %end%}}
              </ul>
            </div>
          </div>
          <div class="col-6 p-1">
            <h3 class="text-center">dislikes</h3>
            <div style="max-height: 110px;" class="overflow-auto">
              <ul class="list-unstyled">
                {{%Dislikes%
                <li><i class="fas fa-times mr-1"></i> {{%Content%}}</li>
                %end%}}
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="text-right"><a data-placement="bottom" href="/8byte" title="code credits" class="tooltipster"><i class="fas fa-crow"></i></a></div>
    </div>
  </div>
</div>

Stor8

ketchie

Password (optional)