hellsarcade
created by:8byte
Mixed ColorsHTMLCharacter
Copy
<!---
==== hellsarcade Character
==== HTML by 8byte
----
==== Accent
---- For easier changes, use Ctrl F and then
---- click the plus icon at the bottom to
---- replace all.
====
#63bda4 - teal
--->
<div class="mx-auto" style="max-width: 350px;">
<h5 class="display-4 font-weight-bold" style="letter-spacing: 3px; color: #63bda4;">Character Name</h5>
<div class="bg-faded px-md-4 pt-md-4 px-3 pt-3" style="border-radius: 5px 5px 0 0;">
<!--- art --->
<div class="card" style="background-image: url('IMGURL'); background-size: cover; height: 175px;"></div>
<div class="p-md-3 p-2"></div>
<div class="tab-content">
<!--- basic info --->
<div class="tab-pane active" id="ONE">
<div class="card overflow-auto p-2" style="height: 250px; border-radius: 5px 5px 0 0; border-bottom: none;">
<!--- content --->
<div class="justify-content-between align-items-center">
<strong style="color: #63bda4;">Name</strong>
<hr class="flex-fill my-0 mx-2" />
<span>info</span>
</div>
<!--- content --->
<div class="justify-content-between align-items-center">
<strong style="color: #63bda4;">Pronouns</strong>
<hr class="flex-fill my-0 mx-2" />
<span>info</span>
</div>
<!--- content --->
<div class="justify-content-between align-items-center">
<strong style="color: #63bda4;">Gender</strong>
<hr class="flex-fill my-0 mx-2" />
<span>info</span>
</div>
<!--- content --->
<div class="justify-content-between align-items-center">
<strong style="color: #63bda4;">Orientation</strong>
<hr class="flex-fill my-0 mx-2" />
<span>info</span>
</div>
<!--- content --->
<div class="justify-content-between align-items-center">
<strong style="color: #63bda4;">Age</strong>
<hr class="flex-fill my-0 mx-2" />
<span>info</span>
</div>
<!--- content --->
<div class="justify-content-between align-items-center">
<strong style="color: #63bda4;">Species</strong>
<hr class="flex-fill my-0 mx-2" />
<span>info</span>
</div>
<!--- end of content --->
</div>
</div>
<!--- about, likes + dislikes --->
<div class="tab-pane" id="TWO">
<div class="card overflow-auto p-2" style="height: 250px; border-radius: 5px 5px 0 0; border-bottom: none;">
<!--- title --->
<div class="justify-content-between align-items-center mb-2">
<h5 class="mb-0" style="color: #63bda4;">About</h5>
<hr class="flex-fill my-0 mx-2" />
</div>
<!--- about text --->
<p>Aliquam mattis augue in metus gravida tristique. Nulla sit amet lectus ante. Duis semper id nisl sodales euismod. Duis aliquam libero felis, eget luctus magna commodo nec. </p>
<!--- divider ---><hr class="w-100 my-2" />
<!--- likes and dislikes --->
<div class="row no-gutters m-n2">
<div class="col-md col-12 p-2">
<h5 style="color: #63bda4;">Likes</h5>
<!--- likes --->
<ul class="pl-3 mb-0">
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
<div class="card my-2 rounded-0" style="width: 1px; border-right: none; border-top: none; border-bottom: none;"></div>
<div class="col-md col-12 p-2">
<h5 style="color: #63bda4;">Dislikes</h5>
<!--- dislikes --->
<ul class="pl-3 mb-0">
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
</div>
</div>
<!--- design notes --->
<div class="tab-pane" id="THREE">
<div class="card overflow-auto p-2" style="height: 250px; border-radius: 5px 5px 0 0; border-bottom: none;">
<!--- title --->
<div class="justify-content-between align-items-center mb-2">
<h5 class="mb-0" style="color: #63bda4;">Design Notes</h5>
<hr class="flex-fill my-0 mx-2" />
</div>
<!--- design notes --->
<ul class="pl-3 mb-0">
<li>Proin a venenatis dolor. Praesent bibendum quam sit amet rhoncus malesuada.</li>
<li>Proin a venenatis dolor. Praesent bibendum quam sit amet rhoncus malesuada.</li>
<li>Proin a venenatis dolor. Praesent bibendum quam sit amet rhoncus malesuada.</li>
<li>Proin a venenatis dolor. Praesent bibendum quam sit amet rhoncus malesuada.</li>
<li>Proin a venenatis dolor. Praesent bibendum quam sit amet rhoncus malesuada.</li>
</ul>
</div>
</div>
<!--- relationships --->
<div class="tab-pane" id="FOUR">
<div class="card overflow-auto p-2" style="height: 250px; border-radius: 5px 5px 0 0; border-bottom: none;">
<!--- left image relationship --->
<div class="row no-gutters mx-n1">
<div class="col-4 p-1">
<!--- character image --->
<div class="bg-dark" style="background-image: url(''); background-size: cover; padding-top: 100%;"></div>
</div>
<div class="col-8 p-1">
<!--- link to character and name --->
<a href="LINK" class="font-weight-bold" style="color: #63bda4;">Character Name</a><br />
<!--- relation --->
<span class="text-muted font-weight-bold">relation</span><br />
<!--- description of their relationship --->
<small>Suspendisse commodo viverra dolor, eu pharetra enim semper non. </small>
</div>
</div>
<!--- divider ---><hr class="my-2 w-100" />
<!--- right image relationship --->
<div class="row no-gutters mx-n1">
<div class="col-4 order-md-2 p-1">
<!--- character image --->
<div class="bg-dark" style="background-image: url(''); background-size: cover; padding-top: 100%;"></div>
</div>
<div class="col-8 text-right order-md-1 p-1">
<!--- link to character and name --->
<a href="LINK" class="font-weight-bold" style="color: #63bda4;">Character Name</a><br />
<!--- relation --->
<span class="text-muted font-weight-bold">relation</span><br />
<!--- description of their relationship --->
<small>Suspendisse commodo viverra dolor, eu pharetra enim semper non. </small>
</div>
</div>
<!--- divider ---><hr class="my-2 w-100" />
<!--- left image relationship --->
<div class="row no-gutters mx-n1">
<div class="col-4 p-1">
<!--- character image --->
<div class="bg-dark" style="background-image: url(''); background-size: cover; padding-top: 100%;"></div>
</div>
<div class="col-8 p-1">
<!--- link to character and name --->
<a href="LINK" class="font-weight-bold" style="color: #63bda4;">Character Name</a><br />
<!--- relation --->
<span class="text-muted font-weight-bold">relation</span><br />
<!--- description of their relationship --->
<small>Suspendisse commodo viverra dolor, eu pharetra enim semper non. </small>
</div>
</div>
<!--- end of relationships --->
</div>
</div>
<!--- end of tabs --->
</div>
</div>
<ul class="nav nav-fill" style="background: #63bda4;">
<li class="nav-item"><a href="#ONE" data-toggle="tab" class="nav-link btn-outline-primary active" style="mix-blend-mode: multiply;"><i class="fas fa-star"></i></a></li>
<li class="nav-item"><a href="#TWO" data-toggle="tab" class="nav-link btn-outline-primary" style="mix-blend-mode: multiply;"><i class="fas fa-heart"></i></a></li>
<li class="nav-item"><a href="#THREE" data-toggle="tab" class="nav-link btn-outline-primary" style="mix-blend-mode: multiply;"><i class="fas fa-palette"></i></a></li>
<li class="nav-item"><a href="#FOUR" data-toggle="tab" class="nav-link btn-outline-primary" style="mix-blend-mode: multiply;"><i class="fas fa-users"></i></a></li>
</ul>
<div class="text-center">
<small><a href="/8byte" style="color: #63bda4;">code by 8byte</a></small>
</div>
</div>Copy
<div class="mx-auto" style="max-width: 350px;">
<h5 class="display-4 font-weight-bold" style="letter-spacing: 3px; color: {{c!Accent Color!}};">{{!Character Name!}}</h5>
<div class="bg-faded px-md-4 pt-md-4 px-3 pt-3" style="border-radius: 5px 5px 0 0;">
<div class="card" style="background-image: url('{{u!Main Image!}}'); background-size: cover; height: 175px;"></div>
<div class="p-md-3 p-2"></div>
<div class="tab-content">
<div class="tab-pane active" id="ONE">
<div class="card overflow-auto p-2" style="height: 250px; border-radius: 5px 5px 0 0; border-bottom: none;">
{{%Basic Info%
<div class="justify-content-between align-items-center">
<strong style="color: {{c!Accent Color!}};">{{%Title%}}</strong>
<hr class="flex-fill my-0 mx-2" />
<span>{{%Content%}}</span>
</div>
%end%}}
</div>
</div>
<div class="tab-pane" id="TWO">
<div class="card overflow-auto p-2" style="height: 250px; border-radius: 5px 5px 0 0; border-bottom: none;">
<div class="justify-content-between align-items-center mb-2">
<h5 class="mb-0" style="color: {{c!Accent Color!}};">About</h5>
<hr class="flex-fill my-0 mx-2" />
</div>
<p>{{l!About Text!}}</p>
<hr class="w-100 my-2" />
<div class="row no-gutters m-n2">
<div class="col-md col-12 p-2">
<h5 style="color: {{c!Accent Color!}};">Likes</h5>
<ul class="pl-3 mb-0">
{{%Likes%
<li>{{%Content%}}</li>
%end%}}
</ul>
</div>
<div class="card my-2 rounded-0" style="width: 1px; border-right: none; border-top: none; border-bottom: none;"></div>
<div class="col-md col-12 p-2">
<h5 style="color: {{c!Accent Color!}};">Dislikes</h5>
<ul class="pl-3 mb-0">
{{%Dislikes%
<li>{{%Content%}}</li>
%end%}}
</ul>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="THREE">
<div class="card overflow-auto p-2" style="height: 250px; border-radius: 5px 5px 0 0; border-bottom: none;">
<div class="justify-content-between align-items-center mb-2">
<h5 class="mb-0" style="color: {{c!Accent Color!}};">Design Notes</h5>
<hr class="flex-fill my-0 mx-2" />
</div>
<ul class="pl-3 mb-0">
{{%Design Notes%
<li>{{%Content%}}</li>
%end%}}
</ul>
</div>
</div>
<div class="tab-pane" id="FOUR">
<div class="card overflow-auto p-2" style="height: 250px; border-radius: 5px 5px 0 0; border-bottom: none;">
{{%%Left Image Relationship%
<div class="row no-gutters mx-n1">
<div class="col-4 p-1">
<div class="bg-dark" style="background-image: url('{{u%Character Image%}}'); background-size: cover; padding-top: 100%;"></div>
</div>
<div class="col-8 p-1">
<a href="{{u%Character Link%}}" class="font-weight-bold" style="color: {{c!Accent Color!}};">{{%Character Name%}}</a><br />
<span class="text-muted font-weight-bold">{{%Relationship%}}</span><br />
<small>{{%Description%}}</small>
</div>
</div>
%end%}}
<hr class="my-2 w-100" />
{{%%Right Image Relationship%
<div class="row no-gutters mx-n1">
<div class="col-4 order-md-2 p-1">
<div class="bg-dark" style="background-image: url('{{u%Character Image%}}'); background-size: cover; padding-top: 100%;"></div>
</div>
<div class="col-8 text-right order-md-1 p-1">
<a href="{{u%Character Link%}}" class="font-weight-bold" style="color: {{c!Accent Color!}};">{{%Character Name%}}</a><br />
<span class="text-muted font-weight-bold">{{%Relationship%}}</span><br />
<small>{{%Description%}}</small>
</div>
</div>
%end%}}
</div>
</div>
</div>
</div>
<ul class="nav nav-fill" style="background: {{c!Accent Color!}};">
<li class="nav-item"><a href="#ONE" data-toggle="tab" class="nav-link btn-outline-primary active" style="mix-blend-mode: multiply;"><i class="fas fa-star"></i></a></li>
<li class="nav-item"><a href="#TWO" data-toggle="tab" class="nav-link btn-outline-primary" style="mix-blend-mode: multiply;"><i class="fas fa-heart"></i></a></li>
<li class="nav-item"><a href="#THREE" data-toggle="tab" class="nav-link btn-outline-primary" style="mix-blend-mode: multiply;"><i class="fas fa-palette"></i></a></li>
<li class="nav-item"><a href="#FOUR" data-toggle="tab" class="nav-link btn-outline-primary" style="mix-blend-mode: multiply;"><i class="fas fa-users"></i></a></li>
</ul>
<div class="text-center">
<small><a href="/8byte" style="color: {{c!Accent Color!}};">code by 8byte</a></small>
</div>
</div>