fancylad
created by:8byte
HTMLCustom ColorsCharacter
Copy
<!---
==== Fancylad
==== HTML by 8byte
----
==== Colors
---- For easier changes, use Ctrl F and then
---- click the plus icon at the bottom to
---- replace all.
====
#1b1c1a - header
#222321 - boxes
#52545c - borders
---- Text Colors
#ffffff - text
#93948e - faded text
#96ac46 - main accent
#e99d7e - second accent
--->
<div class="mx-auto" style="max-width: 900px;">
<div class="row no-gutters mx-n1">
<div class="col-md-8 order-md-1 order-2 p-1">
<div class="card p-2" style="border-radius: 5px 5px 0 0; background: #1b1c1a; color: #96ac46; border-top: none; border-left: none; border-right: none; border-bottom: 1px solid #52545c;">
<!--- basics box --->
<h1 class="justify-content-between align-items-center text-uppercase mb-0">
<span>Info</span>
<span class="fa-stack" style="font-size: .5rem;">
<i class="far fa-diamond fa-fw fa-stack-2x" style="color: #ffffff;"></i>
<i class="fas fa-diamond fa-fw fa-stack-1x" style="color: #ffffff;"></i>
</span>
</h1>
</div>
<div class="card p-md-3 p-2 overflow-auto border-0" style="border-radius: 0 0 5px 5px; background: #222321; color: #ffffff; max-height: 250px;">
<div class="row no-gutters">
<!--- content --->
<div class="col-md-6 p-1">
<div class="justify-content-between align-items-center">
<span class="text-uppercase" style="color: #e99d7e;">Gender</span>
<span style="color: #93948e;">content</span>
</div>
<hr class="w-100 my-0" style="border-color: #52545c;">
</div>
<!--- content --->
<div class="col-md-6 p-1">
<div class="justify-content-between align-items-center">
<span class="text-uppercase" style="color: #e99d7e;">Pronouns</span>
<span style="color: #93948e;">content</span>
</div>
<hr class="w-100 my-0" style="border-color: #52545c;">
</div>
<!--- content --->
<div class="col-md-6 p-1">
<div class="justify-content-between align-items-center">
<span class="text-uppercase" style="color: #e99d7e;">Age</span>
<span style="color: #93948e;">content</span>
</div>
<hr class="w-100 my-0" style="border-color: #52545c;">
</div>
<!--- content --->
<div class="col-md-6 p-1">
<div class="justify-content-between align-items-center">
<span class="text-uppercase" style="color: #e99d7e;">Birthday</span>
<span style="color: #93948e;">content</span>
</div>
<hr class="w-100 my-0" style="border-color: #52545c;">
</div>
<!--- content --->
<div class="col-md-6 p-1">
<div class="justify-content-between align-items-center">
<span class="text-uppercase" style="color: #e99d7e;">Sexuality</span>
<span style="color: #93948e;">content</span>
</div>
<hr class="w-100 my-0" style="border-color: #52545c;">
</div>
<!--- content --->
<div class="col-md-6 p-1">
<div class="justify-content-between align-items-center">
<span class="text-uppercase" style="color: #e99d7e;">Occupation</span>
<span style="color: #93948e;">content</span>
</div>
<hr class="w-100 my-0" style="border-color: #52545c;">
</div>
<!--- content --->
<div class="col-md-6 p-1">
<div class="justify-content-between align-items-center">
<span class="text-uppercase" style="color: #e99d7e;">Species</span>
<span style="color: #93948e;">content</span>
</div>
<hr class="w-100 my-0" style="border-color: #52545c;">
</div>
<!--- content --->
<div class="col-md-6 p-1">
<div class="justify-content-between align-items-center">
<span class="text-uppercase" style="color: #e99d7e;">Theme</span>
<a href="LINK" style="color: #93948e;">Link</a>
</div>
<hr class="w-100 my-0" style="border-color: #52545c;">
</div>
<!--- end of content --->
</div>
<div class="p-1">
<p>Vivamus sed sem arcu. Donec tincidunt commodo lacus ut euismod. Donec sed molestie mauris. Vestibulum vestibulum neque sit amet lorem suscipit, in maximus metus semper. Vivamus quam sem, porta ut tortor vitae, finibus accumsan tellus. Aenean semper felis massa, nec luctus mi tincidunt et. Donec auctor, urna quis dignissim volutpat, dui quam suscipit massa, sed mollis mi felis a mauris. Aenean a leo malesuada, sollicitudin risus et, semper est. Duis sollicitudin, eros ac euismod tempus, tellus odio hendrerit mauris, eget bibendum urna sapien placerat augue. Vivamus ultricies justo id lorem hendrerit consectetur. Nam sit amet molestie turpis. Donec id ultrices ex.</p>
</div>
</div>
</div>
<div class="col-md-4 flex-column order-md-2 order-1 p-1">
<div class="card p-2" style="border-radius: 5px 5px 0 0; background: #1b1c1a; color: #96ac46; border-top: none; border-left: none; border-right: none; border-bottom: 1px solid #52545c;">
<h1 class="justify-content-center align-items-center text-uppercase mb-0">
<span class="mx-2" style="color: #ffffff; font-size: .8rem;">✦</span>
<!--- character name --->
<span>Name</span>
<span class="mx-2" style="color: #ffffff; font-size: .8rem;">✦</span>
</h1>
</div>
<!--- profile picture --->
<div style="background: url(IMGURL); background-size: cover; min-height: 200px; border-radius: 0 0 5px 5px;" class="card border-0 h-100"></div>
</div>
</div>
<div class="row no-gutters mx-n1">
<div class="col-12 p-1">
<div class="card border-0 overflow-hidden">
<!--- design section --->
<div class="card p-1" style="border-radius: 5px 5px 0 0; background: #1b1c1a; border-top: none; border-left: none; border-right: none; border-bottom: 1px solid #52545c;">
<!--- color palette --->
<div class="d-flex overflow-hidden" style="border-radius: 5px; height: 30px;">
<div style="background: #000;" class="flex-fill"></div>
<div style="background: #000;" class="flex-fill"></div>
<div style="background: #000;" class="flex-fill"></div>
<div style="background: #000;" class="flex-fill"></div>
<div style="background: #000;" class="flex-fill"></div>
<div style="background: #000;" class="flex-fill"></div>
<div style="background: #000;" class="flex-fill"></div>
<div class="align-items-center justify-content-center">
<!--- toggle --->
<a href="#DESIGN" data-toggle="collapse" class="btn" style="color: #ffffff;"><i class="fas fa-palette fa-fw"></i></a>
</div>
</div>
</div>
<div class="card border-0" style="border-radius: 0 0 5px 5px; background: #222321; color: #ffffff;">
<div class="collapse p-md-3 p-2" id="DESIGN">
<div class="row no-gutters">
<div class="col-md-4 p-1">
<!--- main reference --->
<div style="background: url(IMGURL); background-size: 300px; background-repeat: no-repeat; background-position: center; min-height: 300px;"></div>
</div>
<div class="col-md-8 p-1">
<!--- content --->
<div class="p-1">
<div class="justify-content-between align-items-center">
<span class="text-uppercase" style="color: #e99d7e;">Height</span>
<span style="color: #93948e;">content</span>
</div>
<hr class="w-100 my-0" style="border-color: #52545c;">
</div>
<!--- content --->
<div class="p-1">
<div class="justify-content-between align-items-center">
<span class="text-uppercase" style="color: #e99d7e;">Weight</span>
<span style="color: #93948e;">content</span>
</div>
<hr class="w-100 my-0" style="border-color: #52545c;">
</div>
<!--- content --->
<div class="p-1">
<div class="justify-content-between align-items-center">
<span class="text-uppercase" style="color: #e99d7e;">Eyes</span>
<span style="color: #93948e;">content</span>
</div>
<hr class="w-100 my-0" style="border-color: #52545c;">
</div>
<!--- content --->
<div class="p-1">
<div class="justify-content-between align-items-center">
<span class="text-uppercase" style="color: #e99d7e;">Skin Tone</span>
<span style="color: #93948e;">content</span>
</div>
<hr class="w-100 my-0" style="border-color: #52545c;">
</div>
<!--- content --->
<div class="p-1">
<div class="justify-content-between align-items-center">
<span class="text-uppercase" style="color: #e99d7e;">Hair Color</span>
<span style="color: #93948e;">content</span>
</div>
<hr class="w-100 my-0" style="border-color: #52545c;">
</div>
<!--- content --->
<div class="p-1">
<div class="justify-content-between align-items-center">
<span class="text-uppercase" style="color: #e99d7e;">Aesthetic</span>
<span style="color: #93948e;">content</span>
</div>
<hr class="w-100 my-0" style="border-color: #52545c;">
</div>
<!--- content --->
<div class="p-1">
<div class="justify-content-between align-items-center">
<span class="text-uppercase" style="color: #e99d7e;">Alignment</span>
<span style="color: #93948e;">content</span>
</div>
<hr class="w-100 my-0" style="border-color: #52545c;">
</div>
<!--- end of content --->
<div class="p-1">
<h3 class="text-uppercase mb-0" style="color: #96ac46;">
Design Notes
</h3>
<!--- design notes --->
<ul class="mb-0 pl-2">
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--- row --->
<div class="col-md-8 p-1">
<div class="card p-2" style="border-radius: 5px 5px 0 0; background: #1b1c1a; color: #96ac46; border-top: none; border-left: none; border-right: none; border-bottom: 1px solid #52545c;">
<!--- about box --->
<h1 class="justify-content-between align-items-center text-uppercase mb-0">
<span>About</span>
<i class="fas fa-books fa-fw" style="color: #ffffff; font-size: .9rem;"></i>
</h1>
</div>
<div class="card p-md-3 p-2 overflow-auto border-0" style="border-radius: 0 0 5px 5px; background: #222321; color: #ffffff; height: 300px;">
<p>Sed elementum urna eget dapibus lacinia. Etiam vel ligula quis turpis fermentum pretium quis non diam. Cras id sapien nec urna viverra posuere ac non odio. Pellentesque cursus tellus arcu. Proin sodales vulputate consectetur. Pellentesque bibendum orci at mauris venenatis rutrum. Quisque ac ipsum posuere, lacinia massa eu, ullamcorper mauris. Aliquam dignissim, elit eu bibendum placerat, nunc mauris iaculis erat, sit amet efficitur nibh mauris ultrices tortor. Duis arcu sem, vestibulum eu placerat sed, fringilla sit amet risus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis consequat vehicula diam, a pretium augue feugiat nec. Donec sed purus odio. Cras aliquam at felis in dapibus. Ut sit amet turpis arcu. Nulla posuere augue bibendum, maximus metus vitae, tincidunt nisi. Aenean sed libero massa.</p>
<p>Vestibulum vitae ligula pharetra, euismod neque id, consectetur purus. Aliquam vitae luctus turpis. Etiam efficitur interdum varius. Donec condimentum quis neque ac efficitur. Mauris eu pretium sapien. In sagittis eros in mi semper, quis tristique quam posuere. Morbi vel nulla vel leo pretium tristique. Vivamus fringilla magna lobortis dolor interdum cursus. In in maximus velit. Sed iaculis ipsum ac sollicitudin pellentesque. Ut rhoncus metus a nunc eleifend pellentesque gravida non odio. Aliquam vel sapien interdum, ultricies ante gravida, viverra odio. Mauris ultrices suscipit nibh. Aliquam volutpat diam et pretium consectetur. Praesent id eros at enim cursus gravida. Mauris ultrices porta lectus, a auctor libero gravida nec.</p>
</div>
</div>
<div class="col-md-4 p-1">
<!--- likes and dislikes --->
<div class="card p-2" style="border-radius: 5px 5px 0 0; background: #1b1c1a; color: #96ac46; border-top: none; border-left: none; border-right: none; border-bottom: 1px solid #52545c;">
<!--- likes box --->
<h1 class="justify-content-between align-items-center text-uppercase mb-0">
<span>Likes</span>
<i class="fas fa-heart fa-fw" style="color: #ffffff; font-size: .9rem;"></i>
</h1>
</div>
<div class="card py-2 overflow-auto border-0" style="border-radius: 0 0 5px 5px; background: #222321; color: #ffffff; height: 125px;">
<!--- likes --->
<ul class="mb-0">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
<!--- dislikes ---><div class="p-1"></div>
<div class="card p-2" style="border-radius: 5px 5px 0 0; background: #1b1c1a; color: #96ac46; border-top: none; border-left: none; border-right: none; border-bottom: 1px solid #52545c;">
<!--- dislikes box --->
<h1 class="justify-content-between align-items-center text-uppercase mb-0">
<span>Dislikes</span>
<i class="fas fa-times fa-fw" style="color: #ffffff; font-size: .9rem;"></i>
</h1>
</div>
<div class="card py-2 overflow-auto border-0" style="border-radius: 0 0 5px 5px; background: #222321; color: #ffffff; height: 125px;">
<!--- dislikes --->
<ul class="mb-0">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
<!--- row --->
<div class="col-md-7 p-1">
<div class="card p-2" style="border-radius: 5px 5px 0 0; background: #1b1c1a; color: #96ac46; border-top: none; border-left: none; border-right: none; border-bottom: 1px solid #52545c;">
<!--- personality box --->
<h1 class="justify-content-between align-items-center text-uppercase mb-0">
<span>Personality</span>
<i class="fas fa-face-smile fa-fw" style="color: #ffffff; font-size: .9rem;"></i>
</h1>
</div>
<div class="card p-md-3 p-2 overflow-auto border-0" style="border-radius: 0 0 5px 5px; background: #222321; color: #ffffff; height: 200px;">
<!--- personality --->
<p>Nunc at suscipit elit, eget molestie velit. In pellentesque magna vel turpis consequat, vel porttitor nunc rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris condimentum quis ipsum at pretium. Sed scelerisque dapibus porta. Phasellus non pretium arcu. Nam iaculis faucibus dolor, vitae tristique massa tincidunt non. Aenean id justo quis sem aliquet accumsan a non libero. Curabitur mauris elit, facilisis non risus vel, placerat dictum turpis. Praesent lobortis tristique nibh, ac cursus est efficitur sed. Donec ornare congue placerat. Sed erat justo, tempor vel laoreet ac, hendrerit vitae odio.</p>
<p>Morbi imperdiet pretium elit, tristique porttitor leo facilisis non. Phasellus lectus turpis, bibendum at iaculis sit amet, pretium in ante. Etiam et maximus dolor. Etiam ac lacus et enim fringilla euismod vel vel tortor. Duis tincidunt nisl velit, non elementum diam convallis quis. Vestibulum nec facilisis lacus. Etiam malesuada dui quis sem placerat, id tristique urna maximus. Pellentesque metus orci, bibendum vitae lectus vulputate, vulputate tincidunt nulla. Nam sed leo sed dolor dapibus semper.</p>
</div>
</div>
<div class="col-md-5 p-1">
<div class="card p-2" style="border-radius: 5px 5px 0 0; background: #1b1c1a; color: #96ac46; border-top: none; border-left: none; border-right: none; border-bottom: 1px solid #52545c;">
<!--- trivia box --->
<h1 class="justify-content-between align-items-center text-uppercase mb-0">
<span>Trivia</span>
<i class="fas fa-question fa-fw" style="color: #ffffff; font-size: .9rem;"></i>
</h1>
</div>
<div class="card py-2 overflow-auto border-0" style="border-radius: 0 0 5px 5px; background: #222321; color: #ffffff; height: 200px;">
<!--- trivia --->
<ul class="mb-0">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
<div class="col-12 p-1">
<!--- music box --->
<div class="d-flex">
<div class="card flex-row flex-fill align-items-center p-2 overflow-auto border-0" style="border-radius: 5px 0 0 5px; background: #222321; color: #ffffff;">
<div class="mx-3" style="position: relative;">
<div style="position: absolute; left: -3px; z-index: 99;">
<!--- paste in ONLY the code following the watch?v= in the YOUTUBECODE spot --->
<iframe class="flex-fill" style="height: 20px; width: 20px; border-radius: 50%; opacity: 0.01;" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen src="https://www.youtube.com/embed/YOUTUBECODE?modestbranding=1"></iframe>
</div>
<i class="far fa-play"></i>
</div>
<hr class="flex-fill my-0" style="border-color: #52545c;">
</div>
<div class="card flex-row py-2 px-4" style="border-radius: 0 5px 5px 0; background: #1b1c1a; color: #ffffff; border-top: none; border-bottom: none; border-right: none; border-left: 1px solid #52545c;">
<!--- song information --->
<span class="mr-1">Name - </span><span style="color: #93948e;"> Song</span>
</div>
</div>
</div>
</div>
<div class="text-right px-1 mt-n1">
<a href="/8byte" style="color: #96ac46;"><small>code credits</small></a>
</div>
</div>Copy
<div class="mx-auto" style="max-width: 900px;">
<div class="row no-gutters mx-n1">
<div class="col-md-8 order-md-1 order-2 p-1">
<div class="card p-2" style="border-radius: 5px 5px 0 0; background: {{c!Header Color!}}; color: {{c!Accent One!}}; border-top: none; border-left: none; border-right: none; border-bottom: 1px solid {{c!Borders Color!}};">
<!--- basics box --->
<h1 class="justify-content-between align-items-center text-uppercase mb-0">
<span>Info</span>
<span class="fa-stack" style="font-size: .5rem;">
<i class="far fa-diamond fa-fw fa-stack-2x" style="color: {{c!Main Text!}};"></i>
<i class="fas fa-diamond fa-fw fa-stack-1x" style="color: {{c!Main Text!}};"></i>
</span>
</h1>
</div>
<div class="card p-md-3 p-2 overflow-auto border-0" style="border-radius: 0 0 5px 5px; background: {{c!Boxes Color!}}; color: {{c!Main Text!}}; max-height: 250px;">
<div class="row no-gutters">
<!--- content --->
<div class="col-md-6 p-1">
<div class="justify-content-between align-items-center">
<span class="text-uppercase" style="color: {{c!Accent Two!}};">Gender</span>
<span style="color: {{c!Faded Text!}};">{{!Gender!}}</span>
</div>
<hr class="w-100 my-0" style="border-color: {{c!Borders Color!}};">
</div>
<!--- content --->
<div class="col-md-6 p-1">
<div class="justify-content-between align-items-center">
<span class="text-uppercase" style="color: {{c!Accent Two!}};">Pronouns</span>
<span style="color: {{c!Faded Text!}};">{{!Pronouns!}}</span>
</div>
<hr class="w-100 my-0" style="border-color: {{c!Borders Color!}};">
</div>
<!--- content --->
<div class="col-md-6 p-1">
<div class="justify-content-between align-items-center">
<span class="text-uppercase" style="color: {{c!Accent Two!}};">Age</span>
<span style="color: {{c!Faded Text!}};">{{!Age!}}</span>
</div>
<hr class="w-100 my-0" style="border-color: {{c!Borders Color!}};">
</div>
<!--- content --->
<div class="col-md-6 p-1">
<div class="justify-content-between align-items-center">
<span class="text-uppercase" style="color: {{c!Accent Two!}};">Birthday</span>
<span style="color: {{c!Faded Text!}};">{{!Birthday!}}</span>
</div>
<hr class="w-100 my-0" style="border-color: {{c!Borders Color!}};">
</div>
<!--- content --->
<div class="col-md-6 p-1">
<div class="justify-content-between align-items-center">
<span class="text-uppercase" style="color: {{c!Accent Two!}};">Sexuality</span>
<span style="color: {{c!Faded Text!}};">{{!Sexuality!}}</span>
</div>
<hr class="w-100 my-0" style="border-color: {{c!Borders Color!}};">
</div>
<!--- content --->
<div class="col-md-6 p-1">
<div class="justify-content-between align-items-center">
<span class="text-uppercase" style="color: {{c!Accent Two!}};">Occupation</span>
<span style="color: {{c!Faded Text!}};">{{!Occupation!}}</span>
</div>
<hr class="w-100 my-0" style="border-color: {{c!Borders Color!}};">
</div>
<!--- content --->
<div class="col-md-6 p-1">
<div class="justify-content-between align-items-center">
<span class="text-uppercase" style="color: {{c!Accent Two!}};">Species</span>
<span style="color: {{c!Faded Text!}};">{{!Species!}}</span>
</div>
<hr class="w-100 my-0" style="border-color: {{c!Borders Color!}};">
</div>
<!--- content --->
<div class="col-md-6 p-1">
<div class="justify-content-between align-items-center">
<span class="text-uppercase" style="color: {{c!Accent Two!}};">Theme</span>
<a href="{{u!Link to First Song!}}" style="color: {{c!Faded Text!}};">{{!First Song Name!}}</a>
</div>
<hr class="w-100 my-0" style="border-color: {{c!Borders Color!}};">
</div>
<!--- end of content --->
</div>
<div class="p-1">
{{l!Basics Text!}}
</div>
</div>
</div>
<div class="col-md-4 flex-column order-md-2 order-1 p-1">
<div class="card p-2" style="border-radius: 5px 5px 0 0; background: {{c!Header Color!}}; color: {{c!Accent One!}}; border-top: none; border-left: none; border-right: none; border-bottom: 1px solid {{c!Borders Color!}};">
<h1 class="justify-content-center align-items-center text-uppercase mb-0">
<span class="mx-2" style="color: {{c!Main Text!}}; font-size: .8rem;">✦</span>
<!--- character name --->
<span>{{!Character Name!}}</span>
<span class="mx-2" style="color: {{c!Main Text!}}; font-size: .8rem;">✦</span>
</h1>
</div>
<!--- profile picture --->
<div style="background: url({{u!Profile Picture!}}); background-size: cover; min-height: 200px; border-radius: 0 0 5px 5px;" class="card border-0 h-100"></div>
</div>
</div>
<div class="row no-gutters mx-n1">
<div class="col-12 p-1">
<div class="card border-0 overflow-hidden">
<!--- design section --->
<div class="card p-1" style="border-radius: 5px 5px 0 0; background: {{c!Header Color!}}; border-top: none; border-left: none; border-right: none; border-bottom: 1px solid {{c!Borders Color!}};">
<!--- color palette --->
<div class="d-flex overflow-hidden" style="border-radius: 5px; height: 30px;">
{{%Color Palette%
<div style="background: {{c%Color%}};" class="flex-fill"></div>
%end%}}
<div class="align-items-center justify-content-center">
<!--- toggle --->
<a href="#DESIGN" data-toggle="collapse" class="btn" style="color: {{c!Main Text!}};"><i class="fas fa-palette fa-fw"></i></a>
</div>
</div>
</div>
<div class="card border-0" style="border-radius: 0 0 5px 5px; background: {{c!Boxes Color!}}; color: {{c!Main Text!}};">
<div class="collapse p-md-3 p-2" id="DESIGN">
<div class="row no-gutters">
<div class="col-md-4 p-1">
<!--- main reference --->
<div style="background: url({{u!Main Reference!}}); background-size: 300px; background-repeat: no-repeat; background-position: center; min-height: 300px;"></div>
</div>
<div class="col-md-8 p-1">
<!--- content --->
<div class="p-1">
<div class="justify-content-between align-items-center">
<span class="text-uppercase" style="color: {{c!Accent Two!}};">Height</span>
<span style="color: {{c!Faded Text!}};">{{!Height!}}</span>
</div>
<hr class="w-100 my-0" style="border-color: {{c!Borders Color!}};">
</div>
<!--- content --->
<div class="p-1">
<div class="justify-content-between align-items-center">
<span class="text-uppercase" style="color: {{c!Accent Two!}};">Weight</span>
<span style="color: {{c!Faded Text!}};">{{!Weight!}}</span>
</div>
<hr class="w-100 my-0" style="border-color: {{c!Borders Color!}};">
</div>
<!--- content --->
<div class="p-1">
<div class="justify-content-between align-items-center">
<span class="text-uppercase" style="color: {{c!Accent Two!}};">Eyes</span>
<span style="color: {{c!Faded Text!}};">{{!Eyes!}}</span>
</div>
<hr class="w-100 my-0" style="border-color: {{c!Borders Color!}};">
</div>
<!--- content --->
<div class="p-1">
<div class="justify-content-between align-items-center">
<span class="text-uppercase" style="color: {{c!Accent Two!}};">Skin Tone</span>
<span style="color: {{c!Faded Text!}};">{{!Skin Tone!}}</span>
</div>
<hr class="w-100 my-0" style="border-color: {{c!Borders Color!}};">
</div>
<!--- content --->
<div class="p-1">
<div class="justify-content-between align-items-center">
<span class="text-uppercase" style="color: {{c!Accent Two!}};">Hair Color</span>
<span style="color: {{c!Faded Text!}};">{{!Hair Color!}}</span>
</div>
<hr class="w-100 my-0" style="border-color: {{c!Borders Color!}};">
</div>
<!--- content --->
<div class="p-1">
<div class="justify-content-between align-items-center">
<span class="text-uppercase" style="color: {{c!Accent Two!}};">Aesthetic</span>
<span style="color: {{c!Faded Text!}};">{{!Aesthetic!}}</span>
</div>
<hr class="w-100 my-0" style="border-color: {{c!Borders Color!}};">
</div>
<!--- content --->
<div class="p-1">
<div class="justify-content-between align-items-center">
<span class="text-uppercase" style="color: {{c!Accent Two!}};">Alignment</span>
<span style="color: {{c!Faded Text!}};">{{!Alignment!}}</span>
</div>
<hr class="w-100 my-0" style="border-color: {{c!Borders Color!}};">
</div>
<!--- end of content --->
<div class="p-1">
<h3 class="text-uppercase mb-0" style="color: {{c!Accent One!}};">
Design Notes
</h3>
<!--- design notes --->
<ul class="mb-0 pl-2">
{{%Design Notes%
<li>{{%note%}}</li>
%end%}}
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--- row --->
<div class="col-md-8 p-1">
<div class="card p-2" style="border-radius: 5px 5px 0 0; background: {{c!Header Color!}}; color: {{c!Accent One!}}; border-top: none; border-left: none; border-right: none; border-bottom: 1px solid {{c!Borders Color!}};">
<!--- about box --->
<h1 class="justify-content-between align-items-center text-uppercase mb-0">
<span>About</span>
<i class="fas fa-books fa-fw" style="color: {{c!Main Text!}}; font-size: .9rem;"></i>
</h1>
</div>
<div class="card p-md-3 p-2 overflow-auto border-0" style="border-radius: 0 0 5px 5px; background: {{c!Boxes Color!}}; color: {{c!Main Text!}}; height: 300px;">
{{l!About Text!}}
</div>
</div>
<div class="col-md-4 p-1">
<!--- likes and dislikes --->
<div class="card p-2" style="border-radius: 5px 5px 0 0; background: {{c!Header Color!}}; color: {{c!Accent One!}}; border-top: none; border-left: none; border-right: none; border-bottom: 1px solid {{c!Borders Color!}};">
<!--- likes box --->
<h1 class="justify-content-between align-items-center text-uppercase mb-0">
<span>Likes</span>
<i class="fas fa-heart fa-fw" style="color: {{c!Main Text!}}; font-size: .9rem;"></i>
</h1>
</div>
<div class="card py-2 overflow-auto border-0" style="border-radius: 0 0 5px 5px; background: {{c!Boxes Color!}}; color: {{c!Main Text!}}; height: 125px;">
<!--- likes --->
<ul class="mb-0">
{{%Likes%
<li>{{%Like%}}</li>
%end%}}
</ul>
</div>
<!--- dislikes ---><div class="p-1"></div>
<div class="card p-2" style="border-radius: 5px 5px 0 0; background: {{c!Header Color!}}; color: {{c!Accent One!}}; border-top: none; border-left: none; border-right: none; border-bottom: 1px solid {{c!Borders Color!}};">
<!--- dislikes box --->
<h1 class="justify-content-between align-items-center text-uppercase mb-0">
<span>Dislikes</span>
<i class="fas fa-times fa-fw" style="color: {{c!Main Text!}}; font-size: .9rem;"></i>
</h1>
</div>
<div class="card py-2 overflow-auto border-0" style="border-radius: 0 0 5px 5px; background: {{c!Boxes Color!}}; color: {{c!Main Text!}}; height: 125px;">
<!--- dislikes --->
<ul class="mb-0">
{{%Dislikes%
<li>{{%Dislike%}}</li>
%end%}}
</ul>
</div>
</div>
<!--- row --->
<div class="col-md-7 p-1">
<div class="card p-2" style="border-radius: 5px 5px 0 0; background: {{c!Header Color!}}; color: {{c!Accent One!}}; border-top: none; border-left: none; border-right: none; border-bottom: 1px solid {{c!Borders Color!}};">
<!--- personality box --->
<h1 class="justify-content-between align-items-center text-uppercase mb-0">
<span>Personality</span>
<i class="fas fa-face-smile fa-fw" style="color: {{c!Main Text!}}; font-size: .9rem;"></i>
</h1>
</div>
<div class="card p-md-3 p-2 overflow-auto border-0" style="border-radius: 0 0 5px 5px; background: {{c!Boxes Color!}}; color: {{c!Main Text!}}; height: 200px;">
<!--- personality --->
{{l!Personality Text!}}
</div>
</div>
<div class="col-md-5 p-1">
<div class="card p-2" style="border-radius: 5px 5px 0 0; background: {{c!Header Color!}}; color: {{c!Accent One!}}; border-top: none; border-left: none; border-right: none; border-bottom: 1px solid {{c!Borders Color!}};">
<!--- trivia box --->
<h1 class="justify-content-between align-items-center text-uppercase mb-0">
<span>Trivia</span>
<i class="fas fa-question fa-fw" style="color: {{c!Main Text!}}; font-size: .9rem;"></i>
</h1>
</div>
<div class="card py-2 overflow-auto border-0" style="border-radius: 0 0 5px 5px; background: {{c!Boxes Color!}}; color: {{c!Main Text!}}; height: 200px;">
<!--- trivia --->
<ul class="mb-0">
{{%Trivia%
<li>{{%Item%}}</li>
%end%}}
</ul>
</div>
</div>
<div class="col-12 p-1">
<!--- music box --->
<div class="d-flex">
<div class="card flex-row flex-fill align-items-center p-2 overflow-auto border-0" style="border-radius: 5px 0 0 5px; background: {{c!Boxes Color!}}; color: {{c!Main Text!}};">
<div class="mx-3" style="position: relative;">
<div style="position: absolute; left: -3px; z-index: 99;">
<!--- paste in ONLY the code following the watch?v= in the YOUTUBECODE spot --->
<iframe class="flex-fill" style="height: 20px; width: 20px; border-radius: 50%; opacity: 0.01;" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen src="https://www.youtube.com/embed/{{y!Youtube Code!}}?modestbranding=1"></iframe>
</div>
<i class="far fa-play"></i>
</div>
<hr class="flex-fill my-0" style="border-color: {{c!Borders Color!}};">
</div>
<div class="card flex-row py-2 px-4" style="border-radius: 0 5px 5px 0; background: {{c!Header Color!}}; color: {{c!Main Text!}}; border-top: none; border-bottom: none; border-right: none; border-left: 1px solid {{c!Borders Color!}};">
<!--- song information --->
<span class="mr-1">{{!Second Song Name!}} - </span><span style="color: {{c!Faded Text!}};"> {{!Second Song Artist!}}</span>
</div>
</div>
</div>
</div>
<div class="text-right px-1 mt-n1">
<a href="/8byte" style="color: {{c!Accent One!}};"><small>code credits</small></a>
</div>
</div>