Ponyo magic
created by:GlitchyCodes
HTMLCustom ColorsCharacter
Copy
<!--
Background color is #9c4256
Accent color is #f57761
box shadow is -3px 3px 0 rgba(0,0,0,.4)
text shadow is -2px 2px 0 rgba(0,0,0,.2)
fesh are #ffa595 #f57761 #d73939, fesh do not share text shadow's ruleset.
font family is Brush Script MT
i'll probably udate this info here some day, for now... good luck finding yourself and i'm sorry <3
-->
<div class="container p-0 text-light" style="max-width: 800px;font-family: Brush Script MT">
<div class="px-4 py-2" style="position: relative; height: 100px; background: #9c4256 url(IMGLINK) bottom fixed; background-size: cover; box-shadow: -3px 3px 0 rgba(0,0,0,.4)">
</div>
<div class="row no-gutters pt-2">
<div class="col-md pl-md-2 pb-2 pb-md-0 order-md-3 order-1 h-100 my-n2 my-md-0">
<div class="card rounded-0 border-0 mt-md-n5 p-2 mx-3 mb-n3">
<img src="IMGLINK" style="box-shadow: -3px 3px 0 rgba(0,0,0,.4)" class="w-100">
</div>
<div class="pt-4 px-1 pb-2 mb-2" style="background: #9c4256; box-shadow: -3px 3px 0 rgba(0,0,0,.4)">
<div class="col-md px-2">
<h4 class="text-center">Name . Gender . Pronouns</h4>
<div class="justify-content-between">
<span><i class="fad fa-address-book"></i> Alias</span>
<span>content</span>
</div>
<div class="justify-content-between">
<span><i class="fad fa-coins"></i> Worth</span>
<span>content</span>
</div>
<div class="justify-content-between">
<span><i class="fad fa-dna"></i> Species</span>
<span>content</span>
</div>
<div class="justify-content-between">
<span><i class="fad fa-hashtag"></i> Masterlist</span>
<a class="text-light" href="LINK">content</a>
</div>
<div class="justify-content-between">
<span><i class="fad fa-key"></i> Owner</span>
<a class="text-light" href="LINK">content</a>
</div>
<div class="justify-content-between">
<span><i class="fad fa-paintbrush"></i> Designer</span>
<a class="text-light" href="LINK">content</a>
</div>
</div>
</div>
<img style="box-shadow: -3px 3px 0 rgba(0,0,0,.4)" src="IMGLINK">
</div>
<div class="col-md-8 order-2">
<div class="h-100" style="position: relative;">
<div class="mt-2 mt-md-0 p-3" style="background: #9c4256; height: 554px; overflow-y: auto; box-shadow: -3px 3px 0 rgba(0,0,0,.4)">
<div style="font-size:1.75rem; background-color: #f57761; color: white; text-shadow: -2px 2px 0 rgba(0,0,0,.2);position:relative" class="p-2 text-center mb-2"><i class="fad fa-quote-left" style="position:absolute;top:.25rem;left:.5rem"></i> <span>Ponyo wants ham!</span> <i class="fad fa-quote-right" style="position:absolute;bottom:.25rem;right:.5rem"></i></div>
<div class="card rounded-0 border-0 float-left text-center py-0 mr-2 mt-1" style="font-size: 1.5rem; background: #f57761; width: 30px; font-weight: 700; text-shadow: -2px 2px 0 rgba(0,0,0,.2)"> L </div> orem ipsum dolor sit amet, consectetur adipiscing elit. Nam sagittis dapibus facilisis. Donec quis sapien et metus bibendum finibus vitae et metus. Ut ac viverra nunc, eu pharetra ante. Praesent bibendum maximus nulla, ac semper urna posuere vitae. Etiam sit amet dapibus erat, in commodo nisl. Maecenas sed tempor nunc, ac posuere nisi. Etiam interdum ante vitae vestibulum euismod. Aenean sollicitudin luctus lorem id volutpat. Nunc dictum non ex eu interdum. <div class="row no-gutters mb-0 my-2" style="font-size: 1.25rem;">
<div class="col-auto"><i class="fad fa-palette"></i></div>
<div class="col"></div>
<div class="col-auto">Palette</div>
</div>
<hr class="mt-0" style="border: 1px solid #f8f9fa;">
<div class="row no-gutters">
<div class="col" style="background:#HEX;height:45px"></div>
<div class="col" style="background:#HEX;height:45px"></div>
<div class="col" style="background:#HEX;height:45px"></div>
<div class="col" style="background:#HEX;height:45px"></div>
<div class="col" style="background:#HEX;height:45px"></div>
<!-- you can keep adding and they'll fit automatically, for a new line simply copy from the </div> below to the <div class="row no-gutters">. -->
</div>
<div class="row no-gutters mb-0 mt-2" style="font-size: 1.25rem;">
<div class="col-auto">Design</div>
<div class="col"></div>
<div class="col-auto"><i class="fad fa-paintbrush"></i></div>
</div>
<hr class="mt-0" style="border: 1px solid #f8f9fa;">
<div class="w-100 justify-content-center" style="position:relative"><img class="m-auto" src="IMGLINK"><a class="text-light" style="position:absolute;bottom:0;right:.5rem;" href="LINK" data-toggle="tooltip" title="Image Link"><i class="fad fa-image fa-fw"></i></a></div>
<div class="row no-gutters mb-0 mt-2" style="font-size: 1.25rem;">
<div class="col-auto">Relationships</div>
<div class="col"></div>
<div class="col-auto"><i class="fad fa-users fa-fw"></i></div>
</div>
<hr class="mt-0" style="border: 1px solid #f8f9fa;">
<div class="container-fluid" style="font-size:large;color:white;text-shadow:-2px 2px 0 rgba(0,0,0,.2);">
<div class="row">
<div class="col-md-6 py-1 px-4 px-md-1">
<div class="card border-0" style="height:208px; background-color:#f57761; background-size:cover; background-position:left center; background-image:url('IMGLINK');">
<a class="h-100 btn btn-outline-secondary btn-block justify-content-end align-items-end" style="font-size:inherit;color:inherit;border:1px solid white;" href="LINK"><i class="fal fa-heart fa-fw fa-xs mb-2 mr-1"></i>name</a>
</div>
</div>
<!--ROW 1-->
<div class="col-md-6 h-100 row no-gutters">
<!--LEFT COLUMN-->
<div class="col-6 p-1">
<div class="card border-0" style="height:100px; background-color:#f57761; background-size:cover; background-position:left center; background-image:url('IMGLINK');">
<a class="h-100 btn btn-outline-secondary btn-block justify-content-end align-items-end" style="font-size:inherit;color:inherit;border:1px solid white;" href="LINK">name</a>
</div>
</div>
<!--RIGHT COLUMN-->
<div class="col-6 p-1">
<div class="card border-0" style="height:100px; background-color:#f57761; background-size:cover; background-position:left center; background-image:url('IMGLINK');">
<a class="h-100 btn btn-outline-secondary btn-block justify-content-end align-items-end" style="font-size:inherit;color:inherit;border:1px solid white;" href="LINK">name</a>
</div>
</div>
<!--LEFT COLUMN-->
<div class="col-6 p-1">
<div class="card border-0" style="height:100px; background-color:#f57761; background-size:cover; background-position:left center; background-image:url('IMGLINK');">
<a class="h-100 btn btn-outline-secondary btn-block justify-content-end align-items-end" style="font-size:inherit;color:inherit;border:1px solid white;" href="LINK">name</a>
</div>
</div>
<!--RIGHT COLUMN-->
<div class="col-6 p-1">
<div class="card border-0" style="height:100px; background-color:#f57761; background-size:cover; background-position:left center; background-image:url('IMGLINK');">
<a class="h-100 btn btn-outline-secondary btn-block justify-content-end align-items-end" style="font-size:inherit;color:inherit;border:1px solid white;" href="LINK">name</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Fesh decoration -->
<div style="text-shadow: 0 0 10px rgba(0,0,0,.6)">
<!-- Top fesh -->
<i class="fas fa-fish fa-fw ml-3 ml-md-0" style="font-size:1.75rem;;position:absolute;top:20px;left:-30px;transform:rotate(-50deg);color:#d73939"></i>
<i class="fas fa-fish fa-fw ml-3 ml-md-0" style="font-size:1.25rem;;position:absolute;top:0;left:0;transform:rotate(-35deg);color:#f57761"></i>
<i class="fas fa-fish fa-fw ml-3 ml-md-0" style="font-size:.75rem;;position:absolute;top:-10px;left:2rem;transform:rotate(-15deg);color:#ffa595"></i>
<!-- Bottom fesh-->
<i class="fas fa-fish fa-fw mr-4 mr-md-0" style="font-size:1.75rem;;position:absolute;bottom:20px;right:-30px;transform:rotate(-50deg);color:#d73939"></i>
<i class="fas fa-fish fa-fw mr-4 mr-md-0" style="font-size:1.25rem;;position:absolute;bottom:0;right:0;transform:rotate(-35deg);color:#f57761"></i>
<i class="fas fa-fish fa-fw mr-4 mr-md-0" style="font-size:.75rem;;position:absolute;bottom:-10px;right:2rem;transform:rotate(-15deg);color:#ffa595"></i>
</div>
<!-- Code credit, don't delete! -->
<a class="text-light" style="position:absolute;top:0;right:.25rem;text-shadow: -1px 1px 0 black;" href="https://toyhou.se/25351274" data-toggle="tooltip" title="Code by NullSeekerAce"><i class="far fa-code fa-fw"></i></a>
</div>