repeat
created by:8byte
Custom ColorsHTMLCharacter
Copy
<!---
==== Repeat - Feather Version
==== HTML by 8byte
----
==== Colors
---- For easier changes, use Ctrl F and then
---- click the plus icon at the bottom to
---- replace all.
====
#f1bcb2 - main accent
#f2ede6 - background
#4d261f - text
--->
<div class="mx-auto" style="max-width: 900px;">
<div class="row no-gutters" style="color: #4d261f;">
<div class="col-md-3">
<div class="overflow-hidden mr-md-n4 ml-md-5 mb-md-0 mb-3" style="border-radius: 20px; box-shadow: 0 0 3px rgba(0,0,0,0.2);">
<div class="p-2" style="background: #f1bcb2; color: #f2ede6;">
<h3 class="text-left mb-0"><i class="fas fa-heart mx-1"></i><i class="far fa-heart mx-1"></i><i class="fal fa-heart mx-1"></i></h3>
</div>
<!--- top image --->
<div style="background-image: url('IMGURL'); background-size: cover; height: 200px;" class="bg-dark"></div>
</div>
<div class="overflow-hidden mr-md-n5 mt-md-n5 mb-md-0 mb-3" style="border-radius: 20px; box-shadow: 0 0 3px rgba(0,0,0,0.2); position: relative; z-index: 99;">
<div class="p-2" style="background: #f1bcb2; color: #f2ede6;">
<h3 class="text-left mb-0" style="letter-spacing: 1px;">character name</h3>
</div>
<!--- bottom main image --->
<div style="background-image: url('IMGURL'); background-size: cover; height: 250px;" class="bg-dark"></div>
</div>
</div>
<div class="col-md-5">
<div class="overflow-hidden mt-md-5 mb-md-0 mb-3" style="border-radius: 20px; box-shadow: 0 0 3px rgba(0,0,0,0.2);">
<div class="p-2" style="background: #f1bcb2; color: #f2ede6;">
<h3 class="text-right mb-0" style="letter-spacing: 1px;">basics</h3>
</div>
<div class="p-3" style="background: #f2ede6;">
<!--- content --->
<div class="row no-gutters">
<div class="col-6 p-1 text-right"><strong style="color: #f1bcb2;">name</strong></div>
<div class="col-6 p-1"><span>content</span></div>
</div>
<!--- content --->
<div class="row no-gutters">
<div class="col-6 p-1 text-right"><strong style="color: #f1bcb2;">age</strong></div>
<div class="col-6 p-1"><span>content</span></div>
</div>
<!--- content --->
<div class="row no-gutters">
<div class="col-6 p-1 text-right"><strong style="color: #f1bcb2;">pronouns</strong></div>
<div class="col-6 p-1"><span>content</span></div>
</div>
<!--- content --->
<div class="row no-gutters">
<div class="col-6 p-1 text-right"><strong style="color: #f1bcb2;">race</strong></div>
<div class="col-6 p-1"><span>content</span></div>
</div>
<!--- content --->
<div class="row no-gutters">
<div class="col-6 p-1 text-right"><strong style="color: #f1bcb2;">birthday</strong></div>
<div class="col-6 p-1"><span>content</span></div>
</div>
<!--- content --->
<div class="row no-gutters">
<div class="col-6 p-1 text-right"><strong style="color: #f1bcb2;">hometown</strong></div>
<div class="col-6 p-1"><span>content</span></div>
</div>
<!--- content --->
<div class="row no-gutters">
<div class="col-6 p-1 text-right"><strong style="color: #f1bcb2;">mbti</strong></div>
<div class="col-6 p-1"><span>content</span></div>
</div>
<!--- content --->
<div class="row no-gutters">
<div class="col-6 p-1 text-right"><strong style="color: #f1bcb2;">tarot</strong></div>
<div class="col-6 p-1"><span>content</span></div>
</div>
<!--- content --->
<div class="row no-gutters">
<div class="col-6 p-1 text-right"><strong style="color: #f1bcb2;">alignment</strong></div>
<div class="col-6 p-1"><span>content</span></div>
</div>
<!--- content --->
<div class="row no-gutters">
<div class="col-6 p-1 text-right"><strong style="color: #f1bcb2;">theme</strong></div>
<div class="col-6 p-1"><span>content</span></div>
</div>
<!--- end of content --->
</div>
</div>
<div class="text-center font-weight-bold"><a href="/8byte" style="color: #f1bcb2;">code credits</a></div>
</div>
<div class="col-12"></div>
<div class="col-md-3">
<div class="mt-md-5"></div>
<div class="overflow-hidden mr-md-n4 ml-md-auto mx-auto mb-md-0 mb-3" style="border-radius: 20px; box-shadow: 0 0 3px rgba(0,0,0,0.2); width: 120px; position: relative; z-index: 100;">
<div class="p-2" style="background: #f1bcb2; color: #f2ede6;">
<h3 class="text-center mb-0" style="letter-spacing: 1px;"><i class="far fa-music mx-1"></i></h3>
</div>
<div class="p-2" style="background: #f2ede6;">
<div class="justify-content-center align-items-center" style="position: relative;">
<div class="h-100 w-100" style="position: absolute; z-index: 120;">
<!--- paste youtube code here, only the characters afters the watch?v= in the youtube link --->
<iframe class="flex-fill" style="height: 100%; width: 100%; opacity: 0.01;" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen src="https://www.youtube.com/embed/YOUTUBECODE?controls=0"></iframe>
</div>
<!--- song image --->
<div style="background-image: url('IMGURL'); background-size: cover; padding-top: 100%;" class="bg-dark w-100"></div>
<i class="fas fa-play fa-2x" style="color: #f1bcb2; position: absolute;"></i>
</div>
</div>
</div>
<div class="overflow-hidden mr-md-n5 mt-md-n3 mb-md-0 mb-3" style="border-radius: 20px; box-shadow: 0 0 3px rgba(0,0,0,0.2); position: relative; z-index: 100;">
<div class="p-2" style="background: #f1bcb2; color: #f2ede6;">
<h3 class="text-right mb-0"><i class="fal fa-heart mx-1"></i><i class="far fa-heart mx-1"></i><i class="fas fa-heart mx-1"></i></h3>
</div>
<div class="p-3" style="background: #f2ede6;">
<h3 class="font-weight-normal font-italic mb-0" style="position: relative;">
<i class="fas fa-quote-left" style="font-size: .6rem; color: #f1bcb2;"></i>
<!--- quote --->
<span>Nam in ipsum dictum, tristique elit sed, sagittis ipsum.</span>
<i class="fas fa-quote-right" style="font-size: .6rem; color: #f1bcb2;"></i>
</h3>
<div class="text-right mt-2">
<!--- quote source --->
<strong style="font-variant: small-caps;">- quote source</strong>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="overflow-hidden ml-md-3 mt-md-2 mb-md-0 mb-3" style="border-radius: 20px; box-shadow: 0 0 3px rgba(0,0,0,0.2); position: relative; z-index: 99;">
<div class="p-2" style="background: #f1bcb2; color: #f2ede6;">
<h3 class="text-right mb-0" style="letter-spacing: 1px;">story</h3>
</div>
<div class="p-2" style="background: #f2ede6;">
<!--- story --->
<div class="overflow-auto" style="height: 300px;">
<p>
<!--- section header --->
<span class="font-weight-bold mr-2" style="font-variant: small-caps;"><i class="fas fa-bookmark fa-fw mr-1" style="color: #f1bcb2;"></i> section title</span>
Phasellus massa turpis, faucibus ut hendrerit vel, vestibulum sed tortor. Sed rutrum finibus vulputate. Ut sagittis nec felis nec accumsan. Phasellus dignissim, nisi eget tristique egestas, ante magna porttitor dolor, nec mattis enim tortor varius quam. Aenean non pretium lacus. Phasellus sed molestie erat. Donec dapibus posuere pharetra.
</p>
<p>
<!--- section header --->
<span class="font-weight-bold mr-2" style="font-variant: small-caps;"><i class="fas fa-bookmark fa-fw mr-1" style="color: #f1bcb2;"></i> section title</span>
Phasellus massa turpis, faucibus ut hendrerit vel, vestibulum sed tortor. Sed rutrum finibus vulputate. Ut sagittis nec felis nec accumsan. Phasellus dignissim, nisi eget tristique egestas, ante magna porttitor dolor, nec mattis enim tortor varius quam. Aenean non pretium lacus. Phasellus sed molestie erat. Donec dapibus posuere pharetra.
</p>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="overflow-hidden mt-md-n5 ml-md-n5 mb-md-0 mb-3" style="border-radius: 20px; box-shadow: 0 0 3px rgba(0,0,0,0.2);">
<div class="p-2" style="background: #f1bcb2; color: #f2ede6;">
<h3 class="text-right mb-0" style="letter-spacing: 1px;">aesthetic</h3>
</div>
<div class="p-2" style="background: #f2ede6;">
<div class="row no-gutters">
<div class="col-5 flex-column p-1">
<!--- image --->
<div style="background: url(IMGURL); background-size: cover; height: 120px;" class="bg-dark bg-dark mb-2"></div>
<!--- image --->
<div style="background: url(IMGURL); background-size: cover; height: 100px;" class="bg-dark mb-2"></div>
<!-- image --->
<div style="background: url(IMGURL); background-size: cover;" class="bg-dark flex-fill"></div>
</div>
<div class="col-7 p-1">
<div class="row no-gutters mb-2">
<div class="col-8 pr-1">
<!--- image --->
<div style="background: url(IMGURL); background-size: cover; height: 50px;" class="bg-dark"></div>
</div>
<div class="col-4 pl-1">
<div style="background: url('IMGURL'); background-size: cover; height: 50px;" class="bg-dark"></div>
</div>
</div>
<!--- image --->
<div class="bg-dark mb-2" style="background: url(IMGURL); background-size: cover; height: 130px;"></div>
<div class="row no-gutters">
<div class="col-6 pr-1">
<!--- image --->
<div style="background: url(IMGURL); background-size: cover; height: 95px;" class="bg-dark"></div>
</div>
<div class="col-6 pl-1">
<!--- image --->
<div style="background: url(IMGURL); background-size: cover; height: 95px; border-bottom-right-radius: 20px;" class="bg-dark"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-4"></div>
<div class="col-md-3">
<div class="p-md-2"></div>
<div class="overflow-hidden mb-md-0 mb-3" style="border-radius: 20px; box-shadow: 0 0 3px rgba(0,0,0,0.2); position: relative; z-index: 99;">
<div class="p-2" style="background: #f1bcb2; color: #f2ede6;">
<h3 class="text-left mb-0" style="letter-spacing: 1px;">likes + dislikes</h3>
</div>
<div class="p-3" style="background: #f2ede6;">
<span>
<!--- likes --->
<i class="fas fa-heart fa-fw mr-2" style="color: #f1bcb2;"></i>
content, content, content
</span>
<div class="p-1"></div>
<span>
<!--- dislikes --->
<i class="fas fa-heart-broken fa-fw mr-2" style="color: #f1bcb2;"></i>
content, content, content
</span>
</div>
</div>
<div class="overflow-hidden mt-md-n2 mr-md-n3 ml-md-n5 mb-md-0 mb-3" style="border-radius: 20px; box-shadow: 0 0 3px rgba(0,0,0,0.2); position: relative; z-index: 100;">
<div class="p-2" style="background: #f1bcb2; color: #f2ede6;">
<h3 class="text-left mb-0" style="letter-spacing: 1px;">trivia</h3>
</div>
<div class="p-3" style="background: #f2ede6;">
<ul class="list-unstyled mb-0">
<!--- trivia --->
<li><i class="fas fa-minus mr-2" style="color: #f1bcb2;"></i> Nam in ipsum dictum, tristique elit sed, sagittis ipsum.</li>
<li><i class="fas fa-minus mr-2" style="color: #f1bcb2;"></i> Nam in ipsum dictum, tristique elit sed, sagittis ipsum.</li>
<li><i class="fas fa-minus mr-2" style="color: #f1bcb2;"></i> Nam in ipsum dictum, tristique elit sed, sagittis ipsum.</li>
<li><i class="fas fa-minus mr-2" style="color: #f1bcb2;"></i> Nam in ipsum dictum, tristique elit sed, sagittis ipsum.</li>
<li><i class="fas fa-minus mr-2" style="color: #f1bcb2;"></i> Nam in ipsum dictum, tristique elit sed, sagittis ipsum.</li>
</ul>
</div>
</div>
</div>
<div class="col-md-5">
<div class="p-md-4"></div>
<div class="overflow-hidden mb-md-0 mb-3" style="border-radius: 20px; box-shadow: 0 0 3px rgba(0,0,0,0.2); position: relative; z-index: 99;">
<div class="p-2" style="background: #f1bcb2; color: #f2ede6;">
<h3 class="text-right mb-0" style="letter-spacing: 1px;">personality</h3>
</div>
<div class="px-3 py-2" style="background: #f2ede6;">
<!--- stat --->
<div class="justify-content-between align-items-center">
<small class="font-weight-bold" style="font-variant: small-caps;"> stirs things up</small>
<small class="font-weight-bold" style="font-variant: small-caps; color: #f1bcb2;"> keeps the peace</small>
</div>
<div class="justify-content-around mt-2">
<i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs" style="color: #f1bcb2;"></i> <!--- colored circle --->
<i class="fas fa-circle fa-xs"></i>
</div>
<!--- divider ---><div class="p-2"></div>
<!--- stat --->
<div class="justify-content-between align-items-center">
<small class="font-weight-bold" style="font-variant: small-caps;"> team player</small>
<small class="font-weight-bold" style="font-variant: small-caps; color: #f1bcb2;"> lone wolf</small>
</div>
<div class="justify-content-around mt-2">
<i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs" style="color: #f1bcb2;"></i> <!--- colored circle --->
<i class="fas fa-circle fa-xs"></i>
</div>
<!--- divider ---><div class="p-2"></div>
<!--- stat --->
<div class="justify-content-between align-items-center">
<small class="font-weight-bold" style="font-variant: small-caps;"> wallflower</small>
<small class="font-weight-bold" style="font-variant: small-caps; color: #f1bcb2;"> star of the show</small>
</div>
<div class="justify-content-around mt-2">
<i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs" style="color: #f1bcb2;"></i> <!--- colored circle --->
<i class="fas fa-circle fa-xs"></i>
</div>
<!--- divider ---><div class="p-2"></div>
<!--- stat --->
<div class="justify-content-between align-items-center">
<small class="font-weight-bold" style="font-variant: small-caps;"> honest</small>
<small class="font-weight-bold" style="font-variant: small-caps; color: #f1bcb2;"> manipulative</small>
</div>
<div class="justify-content-around mt-2">
<i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs" style="color: #f1bcb2;"></i> <!--- colored circle --->
<i class="fas fa-circle fa-xs"></i>
</div>
<!--- divider ---><div class="p-2"></div>
<!--- stat --->
<div class="justify-content-between align-items-center">
<small class="font-weight-bold" style="font-variant: small-caps;"> ruled by the heart</small>
<small class="font-weight-bold" style="font-variant: small-caps; color: #f1bcb2;"> ruled by the mind</small>
</div>
<div class="justify-content-around mt-2">
<i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs" style="color: #f1bcb2;"></i> <!--- colored circle --->
<i class="fas fa-circle fa-xs"></i>
</div>
<!--- divider ---><div class="p-2"></div>
<!--- stat --->
<div class="justify-content-between align-items-center">
<small class="font-weight-bold" style="font-variant: small-caps;"> holds a grudge</small>
<small class="font-weight-bold" style="font-variant: small-caps; color: #f1bcb2;"> forgives easily</small>
</div>
<div class="justify-content-around mt-2">
<i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs" style="color: #f1bcb2;"></i> <!--- colored circle --->
<i class="fas fa-circle fa-xs"></i>
</div>
<!--- divider ---><div class="p-2"></div>
<!--- stat --->
<div class="justify-content-between align-items-center">
<small class="font-weight-bold" style="font-variant: small-caps;"> serious</small>
<small class="font-weight-bold" style="font-variant: small-caps; color: #f1bcb2;"> playful</small>
</div>
<div class="justify-content-around mt-2">
<i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs" style="color: #f1bcb2;"></i> <!--- colored circle --->
<i class="fas fa-circle fa-xs"></i>
</div>
<!--- divider ---><div class="p-2"></div>
<!--- end of stats --->
</div>
</div>
</div>
<div class="col-md-7">
<div class="p-md-1"></div>
<div class="overflow-hidden ml-md-3 mt-md-2 mb-md-0 mb-3" style="border-radius: 20px; box-shadow: 0 0 3px rgba(0,0,0,0.2); position: relative; z-index: 99;">
<div class="p-2" style="background: #f1bcb2; color: #f2ede6;">
<h3 class="text-left mb-0" style="letter-spacing: 1px;">relationships</h3>
</div>
<div class="p-3" style="background: #f2ede6;">
<div class="row no-gutters m-n2">
<!--- friend --->
<div class="col-md-3 col-6 text-center p-2">
<!--- character image --->
<div style="background-image: url('IMGURL'); background-size: cover; padding-top: 100%;" class="rounded-circle bg-dark"></div>
<h5 class="mt-2 mb-0 text-center">
<!--- link to character and name --->
<a href="LINK" style="color: #f1bcb2; letter-spacing: 1px;">character name</a>
</h5>
<!--- relationship type --->
<small class="font-italic" style="opacity: .7;">[ relationship ]</small>
</div>
<!--- friend --->
<div class="col-md-3 col-6 text-center p-2">
<!--- character image --->
<div style="background-image: url('IMGURL'); background-size: cover; padding-top: 100%;" class="rounded-circle bg-dark"></div>
<h5 class="mt-2 mb-0 text-center">
<!--- link to character and name --->
<a href="LINK" style="color: #f1bcb2; letter-spacing: 1px;">character name</a>
</h5>
<!--- relationship type --->
<small class="font-italic" style="opacity: .7;">[ relationship ]</small>
</div>
<!--- friend --->
<div class="col-md-3 col-6 text-center p-2">
<!--- character image --->
<div style="background-image: url('IMGURL'); background-size: cover; padding-top: 100%;" class="rounded-circle bg-dark"></div>
<h5 class="mt-2 mb-0 text-center">
<!--- link to character and name --->
<a href="LINK" style="color: #f1bcb2; letter-spacing: 1px;">character name</a>
</h5>
<!--- relationship type --->
<small class="font-italic" style="opacity: .7;">[ relationship ]</small>
</div>
<!--- friend --->
<div class="col-md-3 col-6 text-center p-2">
<!--- character image --->
<div style="background-image: url('IMGURL'); background-size: cover; padding-top: 100%;" class="rounded-circle bg-dark"></div>
<h5 class="mt-2 mb-0 text-center">
<!--- link to character and name --->
<a href="LINK" style="color: #f1bcb2; letter-spacing: 1px;">character name</a>
</h5>
<!--- relationship type --->
<small class="font-italic" style="opacity: .7;">[ relationship ]</small>
</div>
<!--- end of friends --->
</div>
</div>
</div>
</div>
<div class="col-md-2">
<div class="overflow-hidden mt-md-5 ml-md-n5" style="border-radius: 20px; box-shadow: 0 0 3px rgba(0,0,0,0.2); position: relative; z-index: 99;">
<div class="p-2" style="background: #f1bcb2; color: #f2ede6;">
<h3 class="text-left mb-0"><i class="fas fa-heart mx-1"></i><i class="far fa-heart mx-1"></i><i class="fal fa-heart mx-1"></i></h3>
</div>
<div class="p-3 text-center" style="background: #f2ede6;">
<!--- closest friend image --->
<div style="background-image: url('IMGURL'); background-size: cover; width: 125px; height: 125px;" class="bg-dark rounded-circle mx-auto"></div>
<h5 class="mt-2 mb-0 text-center">
<!--- link to character and name --->
<a href="LINK" style="color: #f1bcb2; letter-spacing: 1px;">character name</a>
</h5>
<!--- relationship type --->
<small class="font-italic" style="opacity: .7;">[ relationship ]</small>
</div>
</div>
</div>
</div>
</div>Copy
<!---
==== Repeat - Locals Version
==== HTML by 8byte
----
==== Colors
---- For easier changes, use Ctrl F and then
---- click the plus icon at the bottom to
---- replace all.
====
#5682af - main accent
rgba(6, 7, 12, 0.9) - background
#eaeaeb - text
--->
<div class="mx-auto" style="max-width: 900px;">
<div class="row no-gutters" style="color: #eaeaeb;">
<div class="col-md-3">
<div class="overflow-hidden mr-md-n4 ml-md-5 mb-md-0 mb-3" style="border: 1px solid #5682af; box-shadow: 0 0 3px rgba(0,0,0,0.2);">
<div class="p-2" style="border-bottom: 1px solid #5682af; background: rgba(6, 7, 12, 0.9); color: #5682af;">
<h3 class="text-left mb-0"><i class="fas fa-heart mx-1"></i><i class="far fa-heart mx-1"></i><i class="fal fa-heart mx-1"></i></h3>
</div>
<!--- top image --->
<div style="background-image: url('IMGURL'); background-size: cover; height: 200px;" class="bg-dark"></div>
</div>
<div class="overflow-hidden mr-md-n5 mt-md-n5 mb-md-0 mb-3" style="border: 1px solid #5682af; box-shadow: 0 0 3px rgba(0,0,0,0.2); position: relative; z-index: 99;">
<div class="p-2" style="border-bottom: 1px solid #5682af; background: rgba(6, 7, 12, 0.9); color: #5682af;">
<h3 class="text-left mb-0" style="letter-spacing: 1px;">character name</h3>
</div>
<!--- bottom main image --->
<div style="background-image: url('IMGURL'); background-size: cover; height: 250px;" class="bg-dark"></div>
</div>
</div>
<div class="col-md-5">
<div class="overflow-hidden mt-md-5 mb-md-0 mb-3" style="border: 1px solid #5682af; box-shadow: 0 0 3px rgba(0,0,0,0.2);">
<div class="p-2" style="border-bottom: 1px solid #5682af; background: rgba(6, 7, 12, 0.9); color: #5682af;">
<h3 class="text-right mb-0" style="letter-spacing: 1px;">basics</h3>
</div>
<div class="p-3" style="background: rgba(6, 7, 12, 0.9);">
<!--- content --->
<div class="row no-gutters">
<div class="col-6 p-1 text-right"><strong style="color: #5682af;">name</strong></div>
<div class="col-6 p-1"><span>content</span></div>
</div>
<!--- content --->
<div class="row no-gutters">
<div class="col-6 p-1 text-right"><strong style="color: #5682af;">age</strong></div>
<div class="col-6 p-1"><span>content</span></div>
</div>
<!--- content --->
<div class="row no-gutters">
<div class="col-6 p-1 text-right"><strong style="color: #5682af;">pronouns</strong></div>
<div class="col-6 p-1"><span>content</span></div>
</div>
<!--- content --->
<div class="row no-gutters">
<div class="col-6 p-1 text-right"><strong style="color: #5682af;">race</strong></div>
<div class="col-6 p-1"><span>content</span></div>
</div>
<!--- content --->
<div class="row no-gutters">
<div class="col-6 p-1 text-right"><strong style="color: #5682af;">birthday</strong></div>
<div class="col-6 p-1"><span>content</span></div>
</div>
<!--- content --->
<div class="row no-gutters">
<div class="col-6 p-1 text-right"><strong style="color: #5682af;">hometown</strong></div>
<div class="col-6 p-1"><span>content</span></div>
</div>
<!--- content --->
<div class="row no-gutters">
<div class="col-6 p-1 text-right"><strong style="color: #5682af;">mbti</strong></div>
<div class="col-6 p-1"><span>content</span></div>
</div>
<!--- content --->
<div class="row no-gutters">
<div class="col-6 p-1 text-right"><strong style="color: #5682af;">tarot</strong></div>
<div class="col-6 p-1"><span>content</span></div>
</div>
<!--- content --->
<div class="row no-gutters">
<div class="col-6 p-1 text-right"><strong style="color: #5682af;">alignment</strong></div>
<div class="col-6 p-1"><span>content</span></div>
</div>
<!--- content --->
<div class="row no-gutters">
<div class="col-6 p-1 text-right"><strong style="color: #5682af;">theme</strong></div>
<div class="col-6 p-1"><span>content</span></div>
</div>
<!--- end of content --->
</div>
</div>
<div class="text-center font-weight-bold"><a href="/8byte" style="color: #5682af;">code credits</a></div>
</div>
<div class="col-12"></div>
<div class="col-md-3">
<div class="mt-md-5"></div>
<div class="overflow-hidden mr-md-n4 ml-md-auto mx-auto mb-md-0 mb-3" style="border: 1px solid #5682af; box-shadow: 0 0 3px rgba(0,0,0,0.2); width: 120px; position: relative; z-index: 100;">
<div class="p-2" style="border-bottom: 1px solid #5682af; background: rgba(6, 7, 12, 0.9); color: #5682af;">
<h3 class="text-center mb-0" style="letter-spacing: 1px;"><i class="far fa-music mx-1"></i></h3>
</div>
<div class="p-2" style="background: rgba(6, 7, 12, 0.9);">
<div class="justify-content-center align-items-center" style="position: relative;">
<div class="h-100 w-100" style="position: absolute; z-index: 120;">
<!--- paste youtube code here, only the characters afters the watch?v= in the youtube link --->
<iframe class="flex-fill" style="height: 100%; width: 100%; opacity: 0.01;" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen src="https://www.youtube.com/embed/YOUTUBECODE?controls=0"></iframe>
</div>
<!--- song image --->
<div style="background-image: url('IMGURL'); background-size: cover; padding-top: 100%; border: 1px solid #5682af;" class="bg-dark w-100"></div>
<i class="fas fa-play fa-2x" style="color: #5682af; position: absolute;"></i>
</div>
</div>
</div>
<div class="overflow-hidden mr-md-n5 mt-md-n3 mb-md-0 mb-3" style="border: 1px solid #5682af; box-shadow: 0 0 3px rgba(0,0,0,0.2); position: relative; z-index: 100;">
<div class="p-2" style="border-bottom: 1px solid #5682af; background: rgba(6, 7, 12, 0.9); color: #5682af;">
<h3 class="text-right mb-0"><i class="fal fa-heart mx-1"></i><i class="far fa-heart mx-1"></i><i class="fas fa-heart mx-1"></i></h3>
</div>
<div class="p-3" style="background: rgba(6, 7, 12, 0.9);">
<h3 class="font-weight-normal font-italic mb-0" style="position: relative;">
<i class="fas fa-quote-left" style="font-size: .6rem; color: #5682af;"></i>
<!--- quote --->
<span>Nam in ipsum dictum, tristique elit sed, sagittis ipsum.</span>
<i class="fas fa-quote-right" style="font-size: .6rem; color: #5682af;"></i>
</h3>
<div class="text-right mt-2">
<!--- quote source --->
<strong style="font-variant: small-caps;">- quote source</strong>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="overflow-hidden ml-md-3 mt-md-2 mb-md-0 mb-3" style="border: 1px solid #5682af; box-shadow: 0 0 3px rgba(0,0,0,0.2); position: relative; z-index: 99;">
<div class="p-2" style="border-bottom: 1px solid #5682af; background: rgba(6, 7, 12, 0.9); color: #5682af;">
<h3 class="text-right mb-0" style="letter-spacing: 1px;">story</h3>
</div>
<div class="p-2" style="background: rgba(6, 7, 12, 0.9);">
<!--- story --->
<div class="overflow-auto" style="height: 300px;">
<p>
<!--- section header --->
<span class="font-weight-bold mr-2" style="font-variant: small-caps;"><i class="fas fa-bookmark fa-fw mr-1" style="color: #5682af;"></i> section title</span>
Phasellus massa turpis, faucibus ut hendrerit vel, vestibulum sed tortor. Sed rutrum finibus vulputate. Ut sagittis nec felis nec accumsan. Phasellus dignissim, nisi eget tristique egestas, ante magna porttitor dolor, nec mattis enim tortor varius quam. Aenean non pretium lacus. Phasellus sed molestie erat. Donec dapibus posuere pharetra.
</p>
<p>
<!--- section header --->
<span class="font-weight-bold mr-2" style="font-variant: small-caps;"><i class="fas fa-bookmark fa-fw mr-1" style="color: #5682af;"></i> section title</span>
Phasellus massa turpis, faucibus ut hendrerit vel, vestibulum sed tortor. Sed rutrum finibus vulputate. Ut sagittis nec felis nec accumsan. Phasellus dignissim, nisi eget tristique egestas, ante magna porttitor dolor, nec mattis enim tortor varius quam. Aenean non pretium lacus. Phasellus sed molestie erat. Donec dapibus posuere pharetra.
</p>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="overflow-hidden mt-md-n5 ml-md-n5 mb-md-0 mb-3" style="border: 1px solid #5682af; box-shadow: 0 0 3px rgba(0,0,0,0.2);">
<div class="p-2" style="border-bottom: 1px solid #5682af; background: rgba(6, 7, 12, 0.9); color: #5682af;">
<h3 class="text-right mb-0" style="letter-spacing: 1px;">aesthetic</h3>
</div>
<div class="p-2" style="background: rgba(6, 7, 12, 0.9);">
<div class="row no-gutters">
<div class="col-5 flex-column p-1">
<!--- image --->
<div style="background: url(IMGURL); background-size: cover; height: 120px;" class="bg-dark bg-dark mb-2"></div>
<!--- image --->
<div style="background: url(IMGURL); background-size: cover; height: 100px;" class="bg-dark mb-2"></div>
<!-- image --->
<div style="background: url(IMGURL); background-size: cover;" class="bg-dark flex-fill"></div>
</div>
<div class="col-7 p-1">
<div class="row no-gutters mb-2">
<div class="col-8 pr-1">
<!--- image --->
<div style="background: url(IMGURL); background-size: cover; height: 50px;" class="bg-dark"></div>
</div>
<div class="col-4 pl-1">
<div style="background: url('IMGURL'); background-size: cover; height: 50px;" class="bg-dark"></div>
</div>
</div>
<!--- image --->
<div class="bg-dark mb-2" style="background: url(IMGURL); background-size: cover; height: 130px;"></div>
<div class="row no-gutters">
<div class="col-6 pr-1">
<!--- image --->
<div style="background: url(IMGURL); background-size: cover; height: 95px;" class="bg-dark"></div>
</div>
<div class="col-6 pl-1">
<!--- image --->
<div style="background: url(IMGURL); background-size: cover; height: 95px;" class="bg-dark"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-4"></div>
<div class="col-md-3">
<div class="p-md-2"></div>
<div class="overflow-hidden mb-md-0 mr-md-n1 mb-3" style="border: 1px solid #5682af; box-shadow: 0 0 3px rgba(0,0,0,0.2); position: relative; z-index: 99;">
<div class="p-2" style="border-bottom: 1px solid #5682af; background: rgba(6, 7, 12, 0.9); color: #5682af;">
<h3 class="text-left mb-0" style="letter-spacing: 1px;">likes + dislikes</h3>
</div>
<div class="p-3" style="background: rgba(6, 7, 12, 0.9);">
<span>
<!--- likes --->
<i class="fas fa-heart fa-fw mr-2" style="color: #5682af;"></i>
content, content, content
</span>
<div class="p-1"></div>
<span>
<!--- dislikes --->
<i class="fas fa-heart-broken fa-fw mr-2" style="color: #5682af;"></i>
content, content, content
</span>
</div>
</div>
<div class="overflow-hidden mt-md-n2 mr-md-n3 ml-md-n5 mb-md-0 mb-3" style="border: 1px solid #5682af; box-shadow: 0 0 3px rgba(0,0,0,0.2); position: relative; z-index: 100;">
<div class="p-2" style="border-bottom: 1px solid #5682af; background: rgba(6, 7, 12, 0.9); color: #5682af;">
<h3 class="text-left mb-0" style="letter-spacing: 1px;">trivia</h3>
</div>
<div class="p-3" style="background: rgba(6, 7, 12, 0.9);">
<ul class="list-unstyled mb-0">
<!--- trivia --->
<li><i class="fas fa-minus mr-2" style="color: #5682af;"></i> Nam in ipsum dictum, tristique elit sed, sagittis ipsum.</li>
<li><i class="fas fa-minus mr-2" style="color: #5682af;"></i> Nam in ipsum dictum, tristique elit sed, sagittis ipsum.</li>
<li><i class="fas fa-minus mr-2" style="color: #5682af;"></i> Nam in ipsum dictum, tristique elit sed, sagittis ipsum.</li>
<li><i class="fas fa-minus mr-2" style="color: #5682af;"></i> Nam in ipsum dictum, tristique elit sed, sagittis ipsum.</li>
<li><i class="fas fa-minus mr-2" style="color: #5682af;"></i> Nam in ipsum dictum, tristique elit sed, sagittis ipsum.</li>
</ul>
</div>
</div>
</div>
<div class="col-md-5">
<div class="p-md-4"></div>
<div class="overflow-hidden mb-md-0 mb-3" style="border: 1px solid #5682af; box-shadow: 0 0 3px rgba(0,0,0,0.2); position: relative; z-index: 99;">
<div class="p-2" style="border-bottom: 1px solid #5682af; background: rgba(6, 7, 12, 0.9); color: #5682af;">
<h3 class="text-right mb-0" style="letter-spacing: 1px;">personality</h3>
</div>
<div class="px-3 py-2" style="background: rgba(6, 7, 12, 0.9);">
<!--- stat --->
<div class="justify-content-between align-items-center">
<small class="font-weight-bold" style="font-variant: small-caps;"> stirs things up</small>
<small class="font-weight-bold" style="font-variant: small-caps; color: #5682af;"> keeps the peace</small>
</div>
<div class="justify-content-around mt-2">
<i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs" style="color: #5682af;"></i> <!--- colored circle --->
<i class="fas fa-circle fa-xs"></i>
</div>
<!--- divider ---><div class="p-2"></div>
<!--- stat --->
<div class="justify-content-between align-items-center">
<small class="font-weight-bold" style="font-variant: small-caps;"> team player</small>
<small class="font-weight-bold" style="font-variant: small-caps; color: #5682af;"> lone wolf</small>
</div>
<div class="justify-content-around mt-2">
<i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs" style="color: #5682af;"></i> <!--- colored circle --->
<i class="fas fa-circle fa-xs"></i>
</div>
<!--- divider ---><div class="p-2"></div>
<!--- stat --->
<div class="justify-content-between align-items-center">
<small class="font-weight-bold" style="font-variant: small-caps;"> wallflower</small>
<small class="font-weight-bold" style="font-variant: small-caps; color: #5682af;"> star of the show</small>
</div>
<div class="justify-content-around mt-2">
<i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs" style="color: #5682af;"></i> <!--- colored circle --->
<i class="fas fa-circle fa-xs"></i>
</div>
<!--- divider ---><div class="p-2"></div>
<!--- stat --->
<div class="justify-content-between align-items-center">
<small class="font-weight-bold" style="font-variant: small-caps;"> honest</small>
<small class="font-weight-bold" style="font-variant: small-caps; color: #5682af;"> manipulative</small>
</div>
<div class="justify-content-around mt-2">
<i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs" style="color: #5682af;"></i> <!--- colored circle --->
<i class="fas fa-circle fa-xs"></i>
</div>
<!--- divider ---><div class="p-2"></div>
<!--- stat --->
<div class="justify-content-between align-items-center">
<small class="font-weight-bold" style="font-variant: small-caps;"> ruled by the heart</small>
<small class="font-weight-bold" style="font-variant: small-caps; color: #5682af;"> ruled by the mind</small>
</div>
<div class="justify-content-around mt-2">
<i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs" style="color: #5682af;"></i> <!--- colored circle --->
<i class="fas fa-circle fa-xs"></i>
</div>
<!--- divider ---><div class="p-2"></div>
<!--- stat --->
<div class="justify-content-between align-items-center">
<small class="font-weight-bold" style="font-variant: small-caps;"> holds a grudge</small>
<small class="font-weight-bold" style="font-variant: small-caps; color: #5682af;"> forgives easily</small>
</div>
<div class="justify-content-around mt-2">
<i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs" style="color: #5682af;"></i> <!--- colored circle --->
<i class="fas fa-circle fa-xs"></i>
</div>
<!--- divider ---><div class="p-2"></div>
<!--- stat --->
<div class="justify-content-between align-items-center">
<small class="font-weight-bold" style="font-variant: small-caps;"> serious</small>
<small class="font-weight-bold" style="font-variant: small-caps; color: #5682af;"> playful</small>
</div>
<div class="justify-content-around mt-2">
<i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs"></i>
<i class="fas fa-circle fa-xs" style="color: #5682af;"></i> <!--- colored circle --->
<i class="fas fa-circle fa-xs"></i>
</div>
<!--- divider ---><div class="p-2"></div>
<!--- end of stats --->
</div>
</div>
</div>
<div class="col-md-7">
<div class="p-md-1"></div>
<div class="overflow-hidden ml-md-3 mt-md-2 mb-md-0 mb-3" style="border: 1px solid #5682af; box-shadow: 0 0 3px rgba(0,0,0,0.2); position: relative; z-index: 99;">
<div class="p-2" style="border-bottom: 1px solid #5682af; background: rgba(6, 7, 12, 0.9); color: #5682af;">
<h3 class="text-left mb-0" style="letter-spacing: 1px;">relationships</h3>
</div>
<div class="p-3" style="background: rgba(6, 7, 12, 0.9);">
<div class="row no-gutters m-n2">
<!--- friend --->
<div class="col-md-3 col-6 text-center p-2">
<!--- character image --->
<div style="background-image: url('IMGURL'); background-size: cover; padding-top: 100%; border: 1px solid #5682af;" class="bg-dark"></div>
<h5 class="mt-2 mb-0 text-center">
<!--- link to character and name --->
<a href="LINK" style="color: #5682af; letter-spacing: 1px;">character name</a>
</h5>
<!--- relationship type --->
<small class="font-italic" style="opacity: .7;">[ relationship ]</small>
</div>
<!--- friend --->
<div class="col-md-3 col-6 text-center p-2">
<!--- character image --->
<div style="background-image: url('IMGURL'); background-size: cover; padding-top: 100%; border: 1px solid #5682af;" class="bg-dark"></div>
<h5 class="mt-2 mb-0 text-center">
<!--- link to character and name --->
<a href="LINK" style="color: #5682af; letter-spacing: 1px;">character name</a>
</h5>
<!--- relationship type --->
<small class="font-italic" style="opacity: .7;">[ relationship ]</small>
</div>
<!--- friend --->
<div class="col-md-3 col-6 text-center p-2">
<!--- character image --->
<div style="background-image: url('IMGURL'); background-size: cover; padding-top: 100%; border: 1px solid #5682af;" class="bg-dark"></div>
<h5 class="mt-2 mb-0 text-center">
<!--- link to character and name --->
<a href="LINK" style="color: #5682af; letter-spacing: 1px;">character name</a>
</h5>
<!--- relationship type --->
<small class="font-italic" style="opacity: .7;">[ relationship ]</small>
</div>
<!--- friend --->
<div class="col-md-3 col-6 text-center p-2">
<!--- character image --->
<div style="background-image: url('IMGURL'); background-size: cover; padding-top: 100%; border: 1px solid #5682af;" class="bg-dark"></div>
<h5 class="mt-2 mb-0 text-center">
<!--- link to character and name --->
<a href="LINK" style="color: #5682af; letter-spacing: 1px;">character name</a>
</h5>
<!--- relationship type --->
<small class="font-italic" style="opacity: .7;">[ relationship ]</small>
</div>
<!--- end of friends --->
</div>
</div>
</div>
</div>
<div class="col-md-2">
<div class="overflow-hidden mt-md-5 ml-md-n5" style="border: 1px solid #5682af; box-shadow: 0 0 3px rgba(0,0,0,0.2); position: relative; z-index: 99;">
<div class="p-2" style="border-bottom: 1px solid #5682af; background: rgba(6, 7, 12, 0.9); color: #5682af;">
<h3 class="text-left mb-0"><i class="fas fa-heart mx-1"></i><i class="far fa-heart mx-1"></i><i class="fal fa-heart mx-1"></i></h3>
</div>
<div class="p-3 text-center" style="background: rgba(6, 7, 12, 0.9);">
<!--- closest friend image --->
<div style="background-image: url('IMGURL'); background-size: cover; width: 125px; height: 125px; border: 1px solid #5682af;" class="bg-dark mx-auto"></div>
<h5 class="mt-2 mb-0 text-center">
<!--- link to character and name --->
<a href="LINK" style="color: #5682af; letter-spacing: 1px;">character name</a>
</h5>
<!--- relationship type --->
<small class="font-italic" style="opacity: .7;">[ relationship ]</small>
</div>
</div>
</div>
</div>
</div>