mispi
created by:8byte
HTMLCustom ColorsCharacter
Copy
<!---
==== Mispi V2
==== HTML by 8byte
----
==== Colors
---- For easier changes, use Ctrl F and then
---- click the plus icon at the bottom to
---- replace all.
====
#dfecf5 - main background
#3a3f4a - main font
#5c81d1 - link color
--->
<div class="container p-0" style="max-width: 800px; color: #3a3f4a;">
<!--- background image --->
<div class="container p-md-3 p-2" style="background: url(IMGURL); background-size: cover; border-radius: 30px;">
<div class="row no-gutters">
<div class="col-md-4 p-2 d-flex flex-column justify-content-center">
<!--- name card --->
<div class="container p-1 text-uppercase text-center" style="color: #3a3f4a; background: url(IMGURL); background-size: cover; border-radius: 30px 30px 0 0;">
<h1 class="mb-0" style="font-size: 1.8rem;">
<i class="fal fa-star fa-spin" style="animation-duration: 5s;"></i>
<!--- name --->
Name
</h1>
</div>
<!--- location card --->
<div class="container p-1 text-uppercase text-center mt-2" style="color: #3a3f4a; background: url(IMGURL); background-size: cover; border-radius: 0 0 30px 30px;">
<h1 class="font-italic mb-0">
<!--- location --->
location
</h1>
</div>
<!--- pagedoll --->
<div class="container p-0" style="background: url(IMGURL); background-size: contain; background-repeat: no-repeat; background-position: center; height: 250px;"></div>
</div>
<!--- tabbed section --->
<div class="col-md-8 p-2">
<ul class="nav nav-tabs" style="border-bottom: 0;">
<li class="nav-item" style="background: #dfecf5; border-radius: 10px 10px 0 0;">
<a class="nav-link btn-primary border-0 active" href="#ONE" data-toggle="tab" style="border-radius: 10px 10px 0 0; mix-blend-mode: luminosity;">Info</a>
</li>
<li class="nav-item" style="background: #dfecf5; border-radius: 10px 10px 0 0;">
<a class="nav-link btn-primary border-0" href="#TWO" data-toggle="tab" style="border-radius: 10px 10px 0 0; mix-blend-mode: luminosity;">About</a>
</li>
<li class="nav-item" style="background: #dfecf5; border-radius: 10px 10px 0 0;">
<a class="nav-link btn-primary border-0" href="#THREE" data-toggle="tab" style="border-radius: 10px 10px 0 0; mix-blend-mode: luminosity;">Relationships</a>
</li>
</ul>
<div class="tab-content">
<!--- basics tab --->
<div class="tab-pane active" id="ONE">
<div class="container p-md-3 p-2" style="background: #dfecf5; height: 250px;">
<div class="row no-gutters">
<!--- content --->
<div class="col-6 p-1 pl-md-5 text-uppercase"><strong>Name</strong></div>
<div class="col-6 p-1">Name</div>
<!--- content --->
<div class="col-6 p-1 pl-md-5 text-uppercase"><strong>Age</strong></div>
<div class="col-6 p-1">00</div>
<!--- content --->
<div class="col-6 p-1 pl-md-5 text-uppercase"><strong>Pronouns</strong></div>
<div class="col-6 p-1">prn/prn</div>
<!--- content --->
<div class="col-6 p-1 pl-md-5 text-uppercase"><strong>Tails</strong></div>
<div class="col-6 p-1">
<span class="m-n1">
<!--- list of tails --->
<span class="badge m-1" style="background: #000000;">Name</span>
<span class="badge m-1" style="background: #000000;">Name</span>
</span>
</div>
<!--- content --->
<div class="col-6 p-1 pl-md-5 text-uppercase"><strong>Designer</strong></div>
<div class="col-6 p-1"><a href="/designer" style="color: #5c81d1;"><i class="fi-torso user-name-icon"></i>designer</a></div>
<!--- content --->
<div class="col-6 p-1 pl-md-5 text-uppercase"><strong>Obtained Via</strong></div>
<div class="col-6 p-1">custom, adopt, myo, etc.</div>
<!--- end content --->
</div>
</div>
</div>
<!--- personality/likes/dislikes/story tab --->
<div class="tab-pane" id="TWO">
<div class="container overflow-auto p-md-3 p-2" style="background: #dfecf5; height: 250px;">
<h5>personality</h5>
<!--- personality --->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in porttitor sem. Sed iaculis non quam nec pretium. Suspendisse potenti. Nam finibus nunc elementum iaculis pellentesque. Maecenas a sollicitudin elit. Aliquam auctor velit lectus, id molestie urna mattis ac. Nulla vehicula mauris ex, vitae mollis nunc laoreet sed.</p>
<!--- likes + dislikes --->
<div class="row no-gutters mx-n1">
<div class="col-md p-1">
<h5>likes</h5>
<!--- likes --->
<ul class="pl-3">
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
<div class="col" style="min-width: 1px; max-width: 1px; background: #3a3f4a;"></div>
<div class="col-md p-1 pl-md-3">
<h5>dislikes</h5>
<!--- dislikes --->
<ul class="pl-3">
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
<h5 class="text-right">history</h5>
<!--- history/story --->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in porttitor sem. Sed iaculis non quam nec pretium. Suspendisse potenti. Nam finibus nunc elementum iaculis pellentesque. Maecenas a sollicitudin elit. Aliquam auctor velit lectus, id molestie urna mattis ac. Nulla vehicula mauris ex, vitae mollis nunc laoreet sed.</p>
</div>
</div>
<!--- relationships tab --->
<div class="tab-pane" id="THREE">
<div class="container overflow-auto p-md-3 p-2" style="background: #dfecf5; height: 250px;">
<div class="row no-gutters">
<!--- relationship, left image --->
<div class="col-md-3 p-1 text-center">
<!--- profile picture --->
<div class="container" style="background: url(IMGURL); background-size: cover; padding-top: 100%; border-radius: 30px; background-color: #5c81d1;"></div>
<small class="mt-2">
<i class="fas fa-circle"></i> <!--- solid heart --->
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="far fa-circle"></i> <!--- lined heart --->
<i class="far fa-circle"></i>
</small>
</div>
<div class="col-md-9 p-1">
<!--- character name and link --->
<a href="LINK" style="color: #5c81d1;"><h5>Name Surname</h5></a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in porttitor sem.</p>
</div>
<!--- relationship, right image --->
<div class="col-md-9 p-1">
<!--- character name and link --->
<a href="LINK" style="color: #5c81d1;"><h5>Name Surname</h5></a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in porttitor sem.</p>
</div>
<div class="col-md-3 p-1 text-center">
<!--- profile picture --->
<div class="container" style="background: url(IMGURL); background-size: cover; padding-top: 100%; border-radius: 30px; background-color: #5c81d1;"></div>
<small class="mt-2">
<i class="fas fa-circle"></i> <!--- solid heart --->
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="far fa-circle"></i> <!--- lined heart --->
<i class="far fa-circle"></i>
</small>
</div>
<!--- end relationships --->
</div>
</div>
</div>
</div>
<!--- color palette --->
<div class="d-flex flex-row mx-n1 mt-2">
<div class="container m-1" style="background: #000000; height: 25px; border-radius: 10px;"></div>
<div class="container m-1" style="background: #000000; height: 25px; border-radius: 10px;"></div>
<div class="container m-1" style="background: #000000; height: 25px; border-radius: 10px;"></div>
<div class="container m-1" style="background: #000000; height: 25px; border-radius: 10px;"></div>
<div class="container m-1" style="background: #000000; height: 25px; border-radius: 10px;"></div>
</div>
<!--- link to open species section --->
<div class="container p-2 mt-2" style="background: #dfecf5; color: #3a3f4a; border-radius: 15px;">
<p class="mb-0">
<i class="fal fa-star mr-2"></i>
Mispi are an open species by <span class="display-user"><a href="/Snowish" style="color: #5c81d1;"><i class="fi-torso user-name-icon"></i>Snowish</a></span>. <a href="LINK" style="color: #5c81d1;">More info here.</a>
</p>
</div>
</div>
</div>
</div>
<!--- credits --->
<div class="text-right py-1">
<!--- copy/paste as needed --->
<!--- credit --->
<a href="LINK" class="tooltipster" title="image credits" data-placement="bottom"><i class="fas fa-image"></i></a>
/
<!--- credit --->
<a href="LINK" class="tooltipster" title="image credits" data-placement="bottom"><i class="fas fa-image"></i></a>
/
<!--- paste additional credits before this line --->
<a href="/8byte" class="tooltipster" title="code credits" data-placement="bottom"><i class="fas fa-crow"></i></a>
</div>
</div>Copy
<!--- colors (ctrl f + replace all)
#3a3f4a - main font
#dfecf5 - background
#5c81d1 - link fonts
--->
<div class="container" style="max-width: 700px;">
<!--- the main background --->
<div class="card p-3" style="background:url(IMGURL); border: none; border-radius: 30px;">
<div class="row no-gutters">
<div class="col-md-4 col-12 p-1">
<!--- name card --->
<div class="card p-1 text-center" style="background:#dfecf5; border: none; border-top-left-radius: 30px; border-top-right-radius: 30px; border-bottom-left-radius: 0; border-bottom-right-radius: 0;">
<h1 style="font-weight: lighter; text-transform: uppercase; color:#3a3f4a;"><i class="far fa-star"></i> Name <i class="far fa-star"></i></h1>
</div>
<!--- location card --->
<div class="card mt-2 p-1 text-center" style="background:url(IMGURL); background-position: cover; background-position: center; border: none; border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 30px; border-bottom-right-radius: 30px;">
<h3 class="font-italic" style="font-weight: lighter; color:#3a3f4a;">location</h3>
</div>
<!--- character pagedoll --->
<div class="card mt-2 p-1 justify-content-center" style="border: none; background: transparent;">
<img src="IMGURL">
</div>
</div>
<div class="col-md-8 col-12 p-1">
<!--- tab nav --->
<ul class="nav nav-tabs">
<li class="nav-item mr-2">
<a class="nav-link active" data-toggle="tab" style="color:#3a3f4a; background:#dfecf5; width: 100px;" href="#ONE">Info</a>
</li>
<li class="nav-item mr-2">
<a class="nav-link" data-toggle="tab" style="color:#3a3f4a; background:#dfecf5; width: 100px;" href="#TWO">About</a>
</li>
<li class="nav-item mr-2">
<a class="nav-link" data-toggle="tab" style="color:#3a3f4a; background:#dfecf5; width: 100px;" href="#THREE">Extras</a>
</li>
</ul>
<div class="tab-content">
<!--- tab one --->
<div class="tab-pane active" id="ONE">
<div class="card overflow-auto p-3" style="color:#3a3f4a; background:#dfecf5; height: 250px; border: none; border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;">
<!--- profile info --->
<div class="row no-gutters px-3">
<div class="col-6 text-left" style="font-weight: bold;">
Name
</div>
<div class="col-6 text-right">
Name
</div>
<div class="col-6 text-left" style="font-weight: bold;">
Age
</div>
<div class="col-6 text-right">
Age
</div>
<div class="col-6 text-left" style="font-weight: bold;">
Pronouns
</div>
<div class="col-6 text-right">
prn/prn
</div>
<div class="col-6 text-left" style="font-weight: bold;">
Tails
</div>
<div class="col-6 text-right">
Tails
</div>
<div class="col-6 text-left" style="font-weight: bold;">
Worth
</div>
<div class="col-6 text-right">
Worth
</div>
<div class="col-6 text-left" style="font-weight: bold;">
Obtained Via
</div>
<div class="col-6 text-right">
Obtained Via
</div>
</div>
<hr class="w-100" style="border:1px solid #3a3f4a;">
<!--- color palette --->
<div class="row no-gutters" style="height: 55px;">
<div class="h-100 col" style="background:#35d6ed;"></div>
<div class="h-100 col" style="background:#65ddef;"></div>
<div class="h-100 col" style="background:#7ae5f5;"></div>
<div class="h-100 col" style="background:#97ebf4;"></div>
<div class="h-100 col" style="background:#c9f6ff;"></div>
</div>
</div>
</div>
<!--- tab two --->
<div class="tab-pane" id="TWO">
<div class="card overflow-auto p-3" style="color:#3a3f4a; background:#dfecf5; height: 250px; border: none; border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="tab-pane" id="THREE">
<div class="card overflow-auto p-3" style="color:#3a3f4a; background:#dfecf5; height: 250px; border: none; border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;">
An extra box!
</div>
</div>
</div>
<div class="card text-center mt-2 p-2" style="color:#3a3f4a; background:#dfecf5; border: none;">
<span>mispi are an open species by @SNOWISH! <a href="" style="color:#5c81d1;">More info here.</a></span>
</div>
</div>
</div>
</div>
<div class="pull-right">HTML by @friede99tarts</div>
</div>