puppycat
created by:8byte
HTMLCustom ColorsCharacter
Copy
<!---
==== Puppycat
==== HTML by 8byte
----
==== Colors
---- For easier changes, use Ctrl F and then
---- click the plus icon at the bottom to
---- replace all.
====
#ff9cc8 - dark pink
#ffd4e5 - pink
#faedf1 - light pink
#93d4d6 - teal
#fff7a2 - yellow
#ffffff - picture frames
#000000 - text
#cccccc - shadow
--->
<div class="container" style="max-width: 800px; color: #000000;">
<!--- background image --->
<div class="container p-3" style="background: url(IMGURL); background-size: cover; border-radius: 20px;">
<div class="row no-gutters">
<div class="col-md-4 p-1">
<div class="rounded-circle p-1" style="background: transparent; border: 3px dashed #93d4d6; position: relative;">
<!--- icon/sticker --->
<i class="fas fa-heart fa-4x" style="color: #ff9cc8; position: absolute; transform: rotate(-45deg); text-shadow: 0 0 5px #ffffff;"></i>
<!--- icon/sticker --->
<i class="fas fa-star fa-3x" style="color: #fff7a2; position: absolute; top: 60px; left: -15px; text-shadow: 0 0 5px #ffffff;"></i>
<!--- icon/sticker --->
<i class="fas fa-moon fa-4x" style="color: #ffd4e5; position: absolute; bottom: 10px; right: 0; transform: rotate(-15deg); text-shadow: 0 0 5px #ffffff;"></i>
<!--- profile picture --->
<div class="rounded-circle" style="background: url(IMGURL); background-size: cover; padding-top: 100%;"></div>
</div>
<div class="container p-2 mt-3" style="background: #ffd4e5; box-shadow: 0 0 5px #cccccc;">
<!--- basic info --->
<div class="container p-3" style="border: 3px dotted #ffffff;">
<!--- content --->
<span class="d-flex flex-row" style="justify-content: space-between;">
<strong>name</strong>
<span>name</span>
</span>
<!--- content --->
<span class="d-flex flex-row" style="justify-content: space-between;">
<strong>pronouns</strong>
<span>prn/prn</span>
</span>
<!--- content --->
<span class="d-flex flex-row" style="justify-content: space-between;">
<strong>age</strong>
<span>00</span>
</span>
<!--- content --->
<span class="d-flex flex-row" style="justify-content: space-between;">
<strong>race</strong>
<span>race</span>
</span>
<!--- content --->
<span class="d-flex flex-row" style="justify-content: space-between;">
<strong>occupation</strong>
<span>occupation</span>
</span>
<!--- content --->
<span class="d-flex flex-row" style="justify-content: space-between;">
<strong>status</strong>
<span>uft/ufs/nft</span>
</span>
<!--- end of content --->
<div class="p-1"></div>
</div>
<!--- color palette --->
<div class="row no-gutters" style="width: 200px; height: 50px; position: absolute; bottom: -25px; right: 2px;">
<!--- color swatch --->
<div class="col mx-1 mt-n1 mb-1" style="background: #F5B0BC; border-bottom: 10px solid #ffffff; box-shadow: 0 0 5px #cccccc;"></div>
<!--- color swatch --->
<div class="col mx-1" style="background: #faedf1; border-bottom: 10px solid #ffffff; box-shadow: 0 0 5px #cccccc;"></div>
<!--- color swatch --->
<div class="col mx-1 mt-n1 mb-1" style="background: #FAD184; border-bottom: 10px solid #ffffff; box-shadow: 0 0 5px #cccccc;"></div>
<!--- color swatch --->
<div class="col mx-1" style="background: #C29586; border-bottom: 10px solid #ffffff; box-shadow: 0 0 5px #cccccc;"></div>
<!--- end of color swatches --->
</div>
</div>
</div>
<div class="col-md-8 p-1 mt-md-0 mt-5">
<!--- main info box --->
<div class="container p-2" style="background: #fff7a2; box-shadow: 0 0 5px #cccccc;">
<div class="tab-content">
<!--- story tab --->
<div class="tab-pane active" id="ONE">
<div class="container p-3 d-flex flex-column" style="border: 3px dotted; height: 200px;">
<div class="container" style="position: absolute; top: -10px; left: -30px; transform: rotate(-10deg); z-index: 99; background: #93d4d6; width: 200px; box-shadow: 0 0 5px #cccccc;">
<h1 class="display-4 text-center">Story</h1>
</div>
<div class="overflow-auto mt-3">
<!--- story --->
<p>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.</p>
<p>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.</p>
</div>
</div>
</div>
<!--- personality tab --->
<div class="tab-pane" id="TWO">
<div class="container p-3 d-flex flex-column" style="border: 3px dotted; height: 200px;">
<div class="container" style="position: absolute; top: -10px; left: -30px; transform: rotate(-10deg); z-index: 99; background: #93d4d6; width: 200px; box-shadow: 0 0 5px #cccccc;">
<h1 class="display-4 text-center">Personality</h1>
</div>
<div class="mt-3" style="overflow-y: auto; overflow-x: hidden;">
<div class="row no-gutters">
<!--- stats --->
<div class="col-md-7 p-1">
<!--- stat --->
<div class="row no-gutters">
<!--- stat name --->
<div class="col-4 py-1"><h3 class="text-uppercase mb-0">stat</h3></div>
<div class="col-8 align-items-center py-1">
<div class="progress w-100 rounded-0" style="height: 8px; background: #ffd4e5;">
<!--- change progress bar here --->
<div class="progress-bar" role="progressbar" style="width: 25%; background: #ff9cc8;"></div>
</div>
</div>
</div>
<!--- stat --->
<div class="row no-gutters">
<!--- stat name --->
<div class="col-4 py-1"><h3 class="text-uppercase mb-0">stat</h3></div>
<div class="col-8 align-items-center py-1">
<div class="progress w-100 rounded-0" style="height: 8px; background: #ffd4e5;">
<!--- change progress bar here --->
<div class="progress-bar" role="progressbar" style="width: 25%; background: #ff9cc8;"></div>
</div>
</div>
</div>
<!--- stat --->
<div class="row no-gutters">
<!--- stat name --->
<div class="col-4 py-1"><h3 class="text-uppercase mb-0">stat</h3></div>
<div class="col-8 align-items-center py-1">
<div class="progress w-100 rounded-0" style="height: 8px; background: #ffd4e5;">
<!--- change progress bar here --->
<div class="progress-bar" role="progressbar" style="width: 25%; background: #ff9cc8;"></div>
</div>
</div>
</div>
<!--- stat --->
<div class="row no-gutters">
<!--- stat name --->
<div class="col-4 py-1"><h3 class="text-uppercase mb-0">stat</h3></div>
<div class="col-8 align-items-center py-1">
<div class="progress w-100 rounded-0" style="height: 8px; background: #ffd4e5;">
<!--- change progress bar here --->
<div class="progress-bar" role="progressbar" style="width: 25%; background: #ff9cc8;"></div>
</div>
</div>
</div>
<!--- stat --->
<div class="row no-gutters">
<!--- stat name --->
<div class="col-4 py-1"><h3 class="text-uppercase mb-0">stat</h3></div>
<div class="col-8 align-items-center py-1">
<div class="progress w-100 rounded-0" style="height: 8px; background: #ffd4e5;">
<!--- change progress bar here --->
<div class="progress-bar" role="progressbar" style="width: 25%; background: #ff9cc8;"></div>
</div>
</div>
</div>
<!--- stat --->
<div class="row no-gutters">
<!--- stat name --->
<div class="col-4 py-1"><h3 class="text-uppercase mb-0">stat</h3></div>
<div class="col-8 align-items-center py-1">
<div class="progress w-100 rounded-0" style="height: 8px; background: #ffd4e5;">
<!--- change progress bar here --->
<div class="progress-bar" role="progressbar" style="width: 25%; background: #ff9cc8;"></div>
</div>
</div>
</div>
<!--- end stats --->
</div>
<div class="col-md-5 p-1">
<div class="container p-2 mt-2 h-100" style="background: #ffffff; border-bottom: 20px solid #ffffff; box-shadow: 0 0 5px #cccccc; transform: rotate(5deg); min-height: 150px;">
<!--- image --->
<div class="container h-100" style="background: url(IMGURL); background-size: cover;"></div>
</div>
</div>
<!--- description --->
<div class="col-12 p-1">
<p>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. </p>
</div>
</div>
</div>
</div>
</div>
<!--- other notes tab --->
<div class="tab-pane" id="THREE">
<div class="container p-3 d-flex flex-column" style="border: 3px dotted; height: 200px;">
<div class="container" style="position: absolute; top: -10px; left: -30px; transform: rotate(-10deg); z-index: 99; background: #93d4d6; width: 200px; box-shadow: 0 0 5px #cccccc;">
<h1 class="display-4 text-center">Notes</h1>
</div>
<div class="overflow-auto mt-3">
<div class="row no-gutters">
<div class="col-md-6 p-md-1 p-0">
<ul class="list-unstyled mb-0">
<!--- notes --->
<li><i class="fal fa-pencil fa-flip-horizontal mr-2"></i> content</li>
<li><i class="fal fa-pencil fa-flip-horizontal mr-2"></i> content</li>
<li><i class="fal fa-pencil fa-flip-horizontal mr-2"></i> content</li>
<li><i class="fal fa-pencil fa-flip-horizontal mr-2"></i> content</li>
<li><i class="fal fa-pencil fa-flip-horizontal mr-2"></i> content</li>
<li><i class="fal fa-pencil fa-flip-horizontal mr-2"></i> content</li>
<li><i class="fal fa-pencil fa-flip-horizontal mr-2"></i> content</li>
<li><i class="fal fa-pencil fa-flip-horizontal mr-2"></i> content</li>
<li><i class="fal fa-pencil fa-flip-horizontal mr-2"></i> content</li>
<li><i class="fal fa-pencil fa-flip-horizontal mr-2"></i> content</li>
</ul>
</div>
<div class="col-md-6 p-md-1 p-0">
<ul class="list-unstyled">
<!--- more notes --->
<li><i class="fal fa-pencil fa-flip-horizontal mr-2"></i> content</li>
<li><i class="fal fa-pencil fa-flip-horizontal mr-2"></i> content</li>
<li><i class="fal fa-pencil fa-flip-horizontal mr-2"></i> content</li>
<li><i class="fal fa-pencil fa-flip-horizontal mr-2"></i> content</li>
<li><i class="fal fa-pencil fa-flip-horizontal mr-2"></i> content</li>
<li><i class="fal fa-pencil fa-flip-horizontal mr-2"></i> content</li>
<li><i class="fal fa-pencil fa-flip-horizontal mr-2"></i> content</li>
<li><i class="fal fa-pencil fa-flip-horizontal mr-2"></i> content</li>
<li><i class="fal fa-pencil fa-flip-horizontal mr-2"></i> content</li>
<li><i class="fal fa-pencil fa-flip-horizontal mr-2"></i> content</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!--- navigation --->
<ul class="nav" style="position: absolute; bottom: -15px; right: 15px;">
<li class="nav-item mx-1"><a href="#ONE" class="nav-link active btn rounded-0" style="color: #ffffff; background: #93d4d6; box-shadow: 0 0 5px #cccccc; letter-spacing: 1px;" data-toggle="tab">Story</a></li>
<li class="nav-item mx-1"><a href="#TWO" class="nav-link btn rounded-0" style="color: #ffffff; background: #93d4d6; box-shadow: 0 0 5px #cccccc; letter-spacing: 1px;" data-toggle="tab">Personality</a></li>
<li class="nav-item mx-1"><a href="#THREE" class="nav-link btn rounded-0" style="color: #ffffff; background: #93d4d6; box-shadow: 0 0 5px #cccccc; letter-spacing: 1px;" data-toggle="tab">Notes</a></li>
</ul>
</div>
<!--- likes and dislikes --->
<div class="row no-gutters mt-4">
<div class="col-md-6">
<div class="container p-3 mr-n2" style="background: #faedf1; box-shadow: 0 0 5px #cccccc;">
<!--- likes box --->
<div class="overflow-auto" style="max-height: 170px;">
<ul class="list-unstyled">
<!--- likes --->
<li><i class="fal fa-heart mr-2"></i>content</li>
<li><i class="fal fa-heart mr-2"></i>content</li>
<li><i class="fal fa-heart mr-2"></i>content</li>
<li><i class="fal fa-heart mr-2"></i>content</li>
<li><i class="fal fa-heart mr-2"></i>content</li>
<li><i class="fal fa-heart mr-2"></i>content</li>
</ul>
</div>
<!--- title card --->
<div class="container p-2 mb-n4 ml-0 mr-auto" style="background: #ffd4e5; max-width: 150px; box-shadow: 0 0 5px #cccccc;">
<i class="fal fa-heart fa-3x" style="color: #faedf1; position: absolute; top: -2px; left: -2px; transform: rotate(-30deg);"></i>
<h5 class="mb-0 text-right">likes</h5>
</div>
</div>
</div>
<div class="col-md-6 mt-4 mb-n4">
<div class="container p-2 ml-n2 h-100" style="background: #ffd4e5; box-shadow: 0 0 5px #cccccc;">
<!--- title card --->
<div class="container p-2 mt-n4 mr-0 ml-auto" style="background: #faedf1; max-width: 150px; box-shadow: 0 0 5px #cccccc;">
<i class="fal fa-heart-broken fa-3x" style="color: #ffd4e5; position: absolute; top: -2px; right: -2px; transform: rotate(30deg);"></i>
<h5 class="mb-0">dislikes</h5>
</div>
<!--- dislikes box --->
<div class="overflow-auto" style="max-height: 170px;">
<ul class="list-unstyled">
<!--- dislikes --->
<li><i class="fal fa-heart-broken mr-2"></i>content</li>
<li><i class="fal fa-heart-broken mr-2"></i>content</li>
<li><i class="fal fa-heart-broken mr-2"></i>content</li>
<li><i class="fal fa-heart-broken mr-2"></i>content</li>
<li><i class="fal fa-heart-broken mr-2"></i>content</li>
<li><i class="fal fa-heart-broken mr-2"></i>content</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!--- divider --->
<div class="container" style="height: 50px;"></div>
<!--- relationship --->
<div class="col-md-3 col-6 p-1">
<div class="container px-2 pt-2 pb-0" style="background: #ffffff; transform: rotate(-5deg); box-shadow: 0 0 5px #cccccc;">
<div class="container" style="position: absolute; top: 0; left: -55px; transform: rotate(-20deg); z-index: 99;">
<!--- character name and link --->
<h1 class="display-4 text-center"><a href="LINK" style="color: #000000;">Name</a></h1>
</div>
<!--- image --->
<div class="container" style="background: url(IMGURL); background-size: cover; height: 150px;"></div>
<div class="container p-1" style="background: #ffffff;">
<!--- relationship level stat --->
<span>
<i class="fas fa-heart" style="color: #93d4d6;"></i> <!--- solid heart --->
<i class="fas fa-heart" style="color: #93d4d6;"></i>
<i class="fas fa-heart" style="color: #93d4d6;"></i>
<i class="fal fa-heart" style="color: #93d4d6;"></i> <!--- lined heart --->
<i class="fal fa-heart" style="color: #93d4d6;"></i>
</span>
</div>
</div>
</div>
<!--- relationship --->
<div class="col-md-3 col-6 p-1">
<div class="container px-2 pt-2 pb-0" style="background: #ffffff; transform: rotate(5deg); box-shadow: 0 0 5px #cccccc;">
<div class="container" style="position: absolute; top: 0; left: -55px; transform: rotate(-20deg); z-index: 99;">
<!--- character name and link --->
<h1 class="display-4 text-center"><a href="LINK" style="color: #000000;">Name</a></h1>
</div>
<!--- image --->
<div class="container" style="background: url(IMGURL); background-size: cover; height: 150px;"></div>
<div class="container p-1" style="background: #ffffff;">
<!--- relationship level stat --->
<span>
<i class="fas fa-heart" style="color: #93d4d6;"></i>
<i class="fas fa-heart" style="color: #93d4d6;"></i>
<i class="fas fa-heart" style="color: #93d4d6;"></i>
<i class="fal fa-heart" style="color: #93d4d6;"></i>
<i class="fal fa-heart" style="color: #93d4d6;"></i>
</span>
</div>
</div>
</div>
<!--- relationship --->
<div class="col-md-3 col-6 p-1">
<div class="container px-2 pt-2 pb-0" style="background: #ffffff; transform: rotate(-5deg); box-shadow: 0 0 5px #cccccc;">
<div class="container" style="position: absolute; top: 0; left: -55px; transform: rotate(-20deg); z-index: 99;">
<!--- character name and link --->
<h1 class="display-4 text-center"><a href="LINK" style="color: #000000;">Name</a></h1>
</div>
<!--- image --->
<div class="container" style="background: url(IMGURL); background-size: cover; height: 150px;"></div>
<div class="container p-1" style="background: #ffffff;">
<!--- relationship level stat --->
<span>
<i class="fas fa-heart" style="color: #93d4d6;"></i> <!--- solid heart --->
<i class="fas fa-heart" style="color: #93d4d6;"></i>
<i class="fas fa-heart" style="color: #93d4d6;"></i>
<i class="fal fa-heart" style="color: #93d4d6;"></i> <!--- lined heart --->
<i class="fal fa-heart" style="color: #93d4d6;"></i>
</span>
</div>
</div>
</div>
<!--- relationship --->
<div class="col-md-3 col-6 p-1">
<div class="container px-2 pt-2 pb-0" style="background: #ffffff; transform: rotate(5deg); box-shadow: 0 0 5px #cccccc;">
<div class="container" style="position: absolute; top: 0; left: -55px; transform: rotate(-20deg); z-index: 99;">
<!--- character name and link --->
<h1 class="display-4 text-center"><a href="LINK" style="color: #000000;">Name</a></h1>
</div>
<!--- image --->
<div class="container" style="background: url(IMGURL); background-size: cover; height: 150px;"></div>
<div class="container p-1" style="background: #ffffff;">
<!--- relationship level stat --->
<span>
<i class="fas fa-heart" style="color: #93d4d6;"></i>
<i class="fas fa-heart" style="color: #93d4d6;"></i>
<i class="fas fa-heart" style="color: #93d4d6;"></i>
<i class="fal fa-heart" style="color: #93d4d6;"></i>
<i class="fal fa-heart" style="color: #93d4d6;"></i>
</span>
</div>
</div>
</div>
<!--- end relationship --->
</div>
</div>
<div class="container text-center font-italic mr-4 ml-auto p-2 mt-n3" style="max-width: 200px; background: rgba(255,255,255,0.5); box-shadow: 0 0 5px #cccccc;"><a href="/8byte" class="text-uppercase" style="color: #93d4d6;">code credits</a></div>
</div>