starstruck
created by:8byte
HTMLMixed ColorsCharacter
Copy
<!--
==== Starstruck
==== HTML by 8byte, Base Code by Togo, Layout by SparklyCodes
----
==== Accent
---- For easier changes, use Ctrl F and then
---- click the plus icon at the bottom to
---- replace all.
====
#775192 - main accent
#ac83c8 - faded accent
-->
<div class="my-lg-4 mx-auto" style="max-width: 1100px;">
<div class="row no-gutters">
<div class="col-lg-3 pt-lg-4 pb-2 pb-lg-3" style="z-index: 1;">
<!--- main image --->
<div class="card mb-3" style="padding-bottom: 100%; background-image: url(IMGURL); background-color: #dccfe6; background-size: cover; background-position: center; border-radius: 15px 0 0 15px; box-shadow: -5px 5px #ac83c8; position: relative; border: 3px double #775192; border-right: none; border-bottom: none;">
<!--- decorative icons --->
<i class="fas fa-star fa-3x" style="position: absolute; bottom: -1rem; right: -1rem; color: #775192;"></i>
<i class="fas fa-star fa-2x" style="position: absolute; bottom: 2rem; right: -1rem; color: #ac83c8;"></i>
<i class="fas fa-star fa-2x" style="position: absolute; bottom: -1rem; right: 2rem; color: #ac83c8;"></i>
</div>
<!--- quote box --->
<div class="card mb-3 p-4 text-muted font-italic text-center" style="border-radius: 15px 0 0 15px; box-shadow: -5px 5px #ac83c8; position: relative; border-style: double; border-width: 3px;">
<i class="fas fa-quote-left" style="color: #775192; position: absolute; top: .5rem; left: .5rem;"></i>
<i class="fas fa-quote-right" style="color: #775192; position: absolute; bottom: .5rem; right: .5rem;"></i>
<!--- quote goes here --->
a quote or tagline. lorem ipsum dolor sit amet.
</div>
<!--- content block --->
<div class="card mb-2 overflow-hidden" style="border-radius: 15px 0 0 15px; box-shadow: -5px 5px #ac83c8; border-width: 3px; border-style: double; border-left: none; border-bottom: none;">
<div class="row no-gutters">
<!--- icon block --->
<div class="col-auto d-flex justify-content-center align-items-center text-white" style="min-height: 40px; width: 40px; font-size: 16px; background-color: #775192;">
<!--- change icon here --->
<i class="fa-fw fa-solid fa-user"></i>
</div>
<!--- content --->
<div class="col align-self-center py-2 px-3">
name
</div>
</div>
</div>
<!--- content block --->
<div class="card mb-2 overflow-hidden" style="border-radius: 15px 0 0 15px; box-shadow: -5px 5px #ac83c8; border-width: 3px; border-style: double; border-left: none; border-bottom: none;">
<div class="row no-gutters">
<!--- icon block --->
<div class="col-auto d-flex justify-content-center align-items-center text-white" style="min-height: 40px; width: 40px; font-size: 16px; background-color: #775192;">
<!--- change icon here --->
<i class="fa-fw fa-solid fa-venus-mars"></i>
</div>
<!--- content --->
<div class="col align-self-center py-2 px-3">
prn/prn
</div>
</div>
</div>
<!--- content block --->
<div class="card mb-2 overflow-hidden" style="border-radius: 15px 0 0 15px; box-shadow: -5px 5px #ac83c8; border-width: 3px; border-style: double; border-left: none; border-bottom: none;">
<div class="row no-gutters">
<!--- icon block --->
<div class="col-auto d-flex justify-content-center align-items-center text-white" style="min-height: 40px; width: 40px; font-size: 16px; background-color: #775192;">
<!--- change icon here --->
<i class="fa-fw fa-solid fa-cake-candles"></i>
</div>
<!--- content --->
<div class="col align-self-center py-2 px-3">
00
</div>
</div>
</div>
<!--- content block --->
<div class="card mb-2 overflow-hidden" style="border-radius: 15px 0 0 15px; box-shadow: -5px 5px #ac83c8; border-width: 3px; border-style: double; border-left: none; border-bottom: none;">
<div class="row no-gutters">
<!--- icon block --->
<div class="col-auto d-flex justify-content-center align-items-center text-white" style="min-height: 40px; width: 40px; font-size: 16px; background-color: #775192;">
<!--- change icon here --->
<i class="fa-fw fa-solid fa-dna"></i>
</div>
<!--- content --->
<div class="col align-self-center py-2 px-3">
species
</div>
</div>
</div>
<!--- content block --->
<div class="card mb-2 overflow-hidden" style="border-radius: 15px 0 0 15px; box-shadow: -5px 5px #ac83c8; border-width: 3px; border-style: double; border-left: none; border-bottom: none;">
<div class="row no-gutters">
<!--- icon block --->
<div class="col-auto d-flex justify-content-center align-items-center text-white" style="min-height: 40px; width: 40px; font-size: 16px; background-color: #775192;">
<!--- change icon here --->
<i class="fa-fw fa-solid fa-circle"></i>
</div>
<!--- content --->
<div class="col align-self-center py-2 px-3">
a longer description that will overflow over... this will cause the right to automatically grow :)
</div>
</div>
</div>
<!--- end of content --->
</div>
<div class="col-auto d-none d-lg-block ml-n5 mr-n4"></div>
<div class="col-lg">
<div class="card d-block d-lg-flex h-100 p-3 p-lg-4 bg-faded" style="min-height: 0; border-radius: 0 15px 15px 0; box-shadow: -10px 10px #775192; border-width: 3px; border-style: double;">
<div class="ml-lg-5 px-lg-4" style="flex: 1 1 600px; min-height: 0; overflow-y: auto;">
<div style="overflow-x: hidden;">
<div class="row no-gutters align-items-center mb-3">
<div class="col-auto d-flex justify-content-center align-items-center mr-3 text-white" style="height: 40px; width: 40px; font-size: 18px; background-color: #775192;">
<i class="fa-fw fa-regular fa-star"></i>
</div>
<div class="col">
<h1 class="font-weight-normal text-uppercase mb-0" style="font-size: 28px;">
<span style="color: #ac83c8;">I</span>ntroduction
</h1>
</div>
</div>
<!--- introduction --->
<div class="mb-4">
<div class="card overflow-hidden p-2" style="border-width: 3px; border-style: double; border-left: 5px solid #ac83c8; border-radius: 0 15px 15px 0;">
<!--- icon decor --->
<i class="fas fa-star fa-4x" style="position: absolute; bottom: -.5rem; right: -.5rem; color: #775192; opacity: .2;"></i>
<i class="fas fa-star fa-2x" style="position: absolute; bottom: 3rem; right: -1rem; color: #ac83c8; opacity: .2;"></i>
<i class="fas fa-star fa-2x" style="position: absolute; bottom: -.8rem; right: 3.5rem; color: #ac83c8; opacity: .2;"></i>
<!--- introduction text --->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In scelerisque a leo ut scelerisque. Cras suscipit vel leo eu hendrerit. Aliquam auctor mollis diam, vel pharetra turpis ultrices at. Phasellus ex diam, vestibulum quis vulputate molestie, egestas ac mauris. Quisque pulvinar diam et quam vehicula, feugiat malesuada velit tristique. Aenean tortor tellus, blandit vitae elit sit amet, tempor rutrum libero. Aenean a nulla auctor, molestie tortor a, vulputate lorem. Duis quis felis ut eros facilisis consectetur quis eu augue. Nam nec lacus ullamcorper, rutrum nisi sit amet, molestie turpis. Mauris pellentesque a augue a sagittis. Donec quis porta dolor. Duis maximus mauris eu justo eleifend efficitur. In mollis quam vitae eros venenatis, in malesuada purus porttitor. Aenean non euismod ligula.
</p>
</div>
</div>
<div class="d-flex d-lg-block flex-column mb-3">
<!--- character image --->
<div style="background-image: url(IMGURL); height: 300px; min-width: 35%; background-size: cover; background-position: top; border-radius: 0 15px 15px 15px; box-shadow: -5px 5px #775192; position: relative;" class="card mb-3 ml-3 float-right">
<!--- decorative icons --->
<i class="fas fa-star fa-3x" style="position: absolute; top: -1rem; left: -1.2rem; color: #775192;"></i>
<i class="fas fa-star fa-2x" style="position: absolute; top: 2rem; left: -1.2rem; color: #ac83c8;"></i>
<i class="fas fa-star fa-2x" style="position: absolute; top: -1rem; left: 1.8rem; color: #ac83c8;"></i>
</div>
<div class="row no-gutters align-items-center mb-3">
<div class="col-auto d-flex justify-content-center align-items-center mr-3 text-white" style="height: 40px; width: 40px; font-size: 18px; background-color: #775192;">
<i class="fa-fw fa-regular fa-comment"></i>
</div>
<div class="col">
<h1 class="font-weight-normal text-uppercase mb-0" style="font-size: 28px;">
<span style="color: #ac83c8;">P</span>ersonality
</h1>
</div>
</div>
<p>
Aliquam gravida, ex et pharetra tristique, justo risus pretium ligula, et eleifend leo lectus vitae tellus. Cras lorem nisi, condimentum ac ante eu, ornare varius augue. Vivamus congue eros vel urna porta, eget maximus massa aliquam. Donec commodo, mi id ullamcorper auctor, odio orci vulputate massa, eget fringilla est augue ac quam. Donec ac tristique libero. Suspendisse pellentesque eu quam quis sagittis. Donec accumsan orci nibh, sollicitudin interdum est euismod vel. Vestibulum vitae porttitor risus.
</p>
<p>
Nulla facilisi. Vestibulum vitae mattis lectus, a rutrum leo. Morbi ut lacus nulla. Donec eget velit eros. Etiam pharetra ultrices rhoncus. Integer nisi tortor, eleifend id est vitae, ultricies lobortis velit. Vivamus id turpis malesuada, mattis enim sit amet, aliquet sapien. Morbi vulputate sodales mattis. Cras maximus vitae risus vel eleifend. Aliquam sapien metus, euismod quis mollis porta, molestie ut tortor.
</p>
</div>
<div class="clearfix"></div>
<div class="d-flex align-items-center mb-3">
<hr class="flex-fill mr-2 my-0" style="border-top-width: 3px; border-top-style: double;">
<i class="far fa-star fa-2x fa-spin" style="color: #775192; animation-duration: 5s;"></i>
</div>
<div class="row mx-n1">
<div class="col-lg-3 mb-2 pl-3 pr-1">
<!--- like box --->
<div class="card overflow-hidden mb-2" style="border-radius: 15px 0 0 15px; box-shadow: -3px 3px #ac83c8;">
<div class="row no-gutters">
<div class="col-auto d-flex justify-content-center align-items-center text-white" style="min-height: 30px; width: 30px; background-color: #775192;">
<i class="fa-fw fa-regular fa-check"></i>
</div>
<div class="col align-self-center py-1 px-2">
like
</div>
</div>
</div>
<!--- like box --->
<div class="card overflow-hidden mb-2" style="border-radius: 15px 0 0 15px; box-shadow: -3px 3px #ac83c8;">
<div class="row no-gutters">
<div class="col-auto d-flex justify-content-center align-items-center text-white" style="min-height: 30px; width: 30px; background-color: #775192;">
<i class="fa-fw fa-regular fa-check"></i>
</div>
<div class="col align-self-center py-1 px-2">
like
</div>
</div>
</div>
<!--- like box --->
<div class="card overflow-hidden mb-2" style="border-radius: 15px 0 0 15px; box-shadow: -3px 3px #ac83c8;">
<div class="row no-gutters">
<div class="col-auto d-flex justify-content-center align-items-center text-white" style="min-height: 30px; width: 30px; background-color: #775192;">
<i class="fa-fw fa-regular fa-check"></i>
</div>
<div class="col align-self-center py-1 px-2">
like
</div>
</div>
</div>
<!--- end of likes --->
</div>
<div class="col-lg-3 mb-2 pl-3 pr-1">
<!--- dislike box --->
<div class="card overflow-hidden mb-2" style="border-radius: 15px 0 0 15px; box-shadow: -3px 3px #ac83c8;">
<div class="row no-gutters">
<div class="col-auto d-flex justify-content-center align-items-center text-white" style="min-height: 30px; width: 30px; background-color: #775192;">
<i class="fa-fw fa-regular fa-times"></i>
</div>
<div class="col align-self-center py-1 px-2">
dislike
</div>
</div>
</div>
<!--- dislike box --->
<div class="card overflow-hidden mb-2" style="border-radius: 15px 0 0 15px; box-shadow: -3px 3px #ac83c8;">
<div class="row no-gutters">
<div class="col-auto d-flex justify-content-center align-items-center text-white" style="min-height: 30px; width: 30px; background-color: #775192;">
<i class="fa-fw fa-regular fa-times"></i>
</div>
<div class="col align-self-center py-1 px-2">
dislike
</div>
</div>
</div>
<!--- dislike box --->
<div class="card overflow-hidden mb-2" style="border-radius: 15px 0 0 15px; box-shadow: -3px 3px #ac83c8;">
<div class="row no-gutters">
<div class="col-auto d-flex justify-content-center align-items-center text-white" style="min-height: 30px; width: 30px; background-color: #775192;">
<i class="fa-fw fa-regular fa-times"></i>
</div>
<div class="col align-self-center py-1 px-2">
dislike
</div>
</div>
</div>
<!--- end of dislikes --->
</div>
<div class="col-lg-6 mb-2 pl-3 pr-1">
<!--- trivia box --->
<div class="card overflow-hidden mb-2" style="border-radius: 15px 0 0 15px; box-shadow: -3px 3px #ac83c8;">
<div class="row no-gutters">
<div class="col-auto d-flex justify-content-center align-items-center text-white" style="min-height: 30px; width: 30px; background-color: #775192;">
<i class="fa-fw fa-regular fa-magnifying-glass"></i>
</div>
<div class="col align-self-center py-1 px-2">
trivia
</div>
</div>
</div>
<!--- trivia box --->
<div class="card overflow-hidden mb-2" style="border-radius: 15px 0 0 15px; box-shadow: -3px 3px #ac83c8;">
<div class="row no-gutters">
<div class="col-auto d-flex justify-content-center align-items-center text-white" style="min-height: 30px; width: 30px; background-color: #775192;">
<i class="fa-fw fa-regular fa-magnifying-glass"></i>
</div>
<div class="col align-self-center py-1 px-2">
trivia
</div>
</div>
</div>
<!--- trivia box --->
<div class="card overflow-hidden mb-2" style="border-radius: 15px 0 0 15px; box-shadow: -3px 3px #ac83c8;">
<div class="row no-gutters">
<div class="col-auto d-flex justify-content-center align-items-center text-white" style="min-height: 30px; width: 30px; background-color: #775192;">
<i class="fa-fw fa-regular fa-magnifying-glass"></i>
</div>
<div class="col align-self-center py-1 px-2">
these can also be multiple lines. second line.
</div>
</div>
</div>
<!--- end of trivia --->
</div>
</div>
<div class="d-flex align-items-center mb-3">
<hr class="flex-fill mr-2 my-0" style="border-top-width: 3px; border-top-style: double;">
</div>
<div class="row no-gutters align-items-center mb-3">
<div class="col-auto d-flex justify-content-center align-items-center mr-3 text-white" style="height: 40px; width: 40px; font-size: 18px; background-color: #775192;">
<i class="fa-fw fa-regular fa-book-open-cover"></i>
</div>
<div class="col">
<h1 class="font-weight-normal text-uppercase mb-0" style="font-size: 28px;">
<span style="color: #ac83c8;">S</span>tory
</h1>
</div>
</div>
<!--- focal quote --->
<div class="card text-center text-muted p-4 mb-3" style="border-width: 3px; border-style: double; border-left: 5px solid #ac83c8; border-radius: 0 15px 15px 0; position: relative;">
<i class="fas fa-quote-left" style="color: #775192; position: absolute; bottom: .5rem; left: .5rem;"></i>
<i class="fas fa-quote-right" style="color: #775192; position: absolute; top: .5rem; right: .55rem;"></i>
some quote or tagline can go here
</div>
<div class="mb-3">
<!--- story section --->
<p>
Nullam blandit posuere felis, eu finibus velit sagittis at. Quisque vel eleifend ligula. Maecenas quam lorem, mattis ut eros non, posuere accumsan sapien. In dignissim dui ut leo rutrum, non varius turpis mattis. Ut id sodales felis, id cursus libero. Aliquam fermentum efficitur augue, interdum porttitor nibh rutrum vel. Donec maximus, leo eget feugiat convallis, purus metus posuere quam, et tristique justo velit eu ante. Curabitur tempor, diam id auctor molestie, dolor turpis faucibus diam, vel pharetra felis lectus consectetur massa. Suspendisse tempor justo rutrum, lacinia ligula non, hendrerit eros. Curabitur eu neque nec metus dignissim hendrerit. Maecenas ac feugiat orci. Pellentesque gravida laoreet varius. Suspendisse aliquam leo vel tortor iaculis, in fringilla nisi aliquam. Morbi in ultrices arcu, a tincidunt risus.
</p>
<!--- subheader --->
<h3 class="mb-3 py-2 px-3 text-white d-flex" style="background-color: #775192; border-radius: 15px 0 0 15px; justify-content: space-between;">
<span class="font-weight-normal text-uppercase">Subheader</span>
<i class="fa-regular fa-bookmark"></i>
</h3>
<p>
Aenean eget egestas arcu. Duis scelerisque sagittis nunc, blandit sodales turpis finibus commodo. Maecenas tristique tellus quis pulvinar tempus. Etiam lacinia volutpat libero, quis aliquet lorem porta in. Morbi blandit venenatis lectus, id mattis felis sagittis ut. Sed suscipit nibh vel lectus placerat eleifend. Nam rhoncus quis tellus id cursus. Praesent a porta lacus. Nam cursus odio lectus, sed imperdiet eros blandit sit amet. Aenean sit amet pellentesque mauris, nec mollis tortor.
</p>
</div>
<div class="row no-gutters align-items-center mb-3">
<div class="col-auto d-flex justify-content-center align-items-center mr-3 text-white" style="height: 40px; width: 40px; font-size: 18px; background-color: #775192;">
<i class="fa-fw fa-regular fa-heartbeat"></i>
</div>
<div class="col">
<h1 class="font-weight-normal text-uppercase mb-0" style="font-size: 28px;">
<span style="color: #ac83c8;">R</span>elationships
</h1>
</div>
</div>
<div class="row mx-n2">
<!--- relationship --->
<div class="col-lg-6 px-3">
<div class="card mb-3" style="border-radius: 15px 0 0 15px; box-shadow: -5px 5px #ac83c8; border-width: 3px; border-style: double;">
<div class="row no-gutters">
<!--- character image --->
<div class="col-4" style="background: url(IMGURL); background-size: cover; background-position: center; border-radius: 15px 0 0 15px;"></div>
<div class="col-8 px-1 py-2">
<div class="py-1 px-2 text-white mr-n2" style="background-color: #775192; border-radius: 15px 0 0 15px;">
<i class="fa-fw fa-solid fa-heart"></i>
<!--- character name --->
<b>Name Surname</b>
<!--- relationship type --->
<span class="float-right d-none d-md-block">relationship</span>
</div>
<div class="container overflow-auto p-2" style="height: 100px;">
<!--- description of their relationship --->
<p>
Nullam ac lorem sit amet urna euismod lobortis. Aenean metus justo, feugiat quis tempor vitae, imperdiet in lacus. Aliquam ac velit rutrum, elementum magna quis, euismod orci. Vestibulum suscipit fringilla turpis id semper. Ut non sagittis ligula. Duis ut eleifend nulla, sit amet luctus nisl. Pellentesque sed urna erat. Donec quis tristique neque. Quisque lobortis semper aliquet. Pellentesque semper sem nisl, id imperdiet turpis elementum et.
</p>
</div>
</div>
</div>
</div>
</div>
<!--- relationship --->
<div class="col-lg-6 px-3">
<div class="card mb-3" style="border-radius: 15px 0 0 15px; box-shadow: -5px 5px #ac83c8; border-width: 3px; border-style: double;">
<div class="row no-gutters">
<!--- character image --->
<div class="col-4" style="background: url(IMGURL); background-size: cover; background-position: center; border-radius: 15px 0 0 15px;"></div>
<div class="col-8 px-1 py-2">
<div class="py-1 px-2 text-white mr-n2" style="background-color: #775192; border-radius: 15px 0 0 15px;">
<i class="fa-fw fa-solid fa-heart"></i>
<!--- character name --->
<b>Name Surname</b>
<!--- relationship type --->
<span class="float-right d-none d-md-block">relationship</span>
</div>
<div class="container overflow-auto p-2" style="height: 100px;">
<!--- description of their relationship --->
<p>
Nullam ac lorem sit amet urna euismod lobortis. Aenean metus justo, feugiat quis tempor vitae, imperdiet in lacus. Aliquam ac velit rutrum, elementum magna quis, euismod orci. Vestibulum suscipit fringilla turpis id semper. Ut non sagittis ligula. Duis ut eleifend nulla, sit amet luctus nisl. Pellentesque sed urna erat. Donec quis tristique neque. Quisque lobortis semper aliquet. Pellentesque semper sem nisl, id imperdiet turpis elementum et.
</p>
</div>
</div>
</div>
</div>
</div>
<!--- relationship --->
<div class="col-lg-6 px-3">
<div class="card mb-3" style="border-radius: 15px 0 0 15px; box-shadow: -5px 5px #ac83c8; border-width: 3px; border-style: double;">
<div class="row no-gutters">
<!--- character image --->
<div class="col-4" style="background: url(IMGURL); background-size: cover; background-position: center; border-radius: 15px 0 0 15px;"></div>
<div class="col-8 px-1 py-2">
<div class="py-1 px-2 text-white mr-n2" style="background-color: #775192; border-radius: 15px 0 0 15px;">
<i class="fa-fw fa-solid fa-heart"></i>
<!--- character name --->
<b>Name Surname</b>
<!--- relationship type --->
<span class="float-right d-none d-md-block">relationship</span>
</div>
<div class="container overflow-auto p-2" style="height: 100px;">
<!--- description of their relationship --->
<p>
Nullam ac lorem sit amet urna euismod lobortis. Aenean metus justo, feugiat quis tempor vitae, imperdiet in lacus. Aliquam ac velit rutrum, elementum magna quis, euismod orci. Vestibulum suscipit fringilla turpis id semper. Ut non sagittis ligula. Duis ut eleifend nulla, sit amet luctus nisl. Pellentesque sed urna erat. Donec quis tristique neque. Quisque lobortis semper aliquet. Pellentesque semper sem nisl, id imperdiet turpis elementum et.
</p>
</div>
</div>
</div>
</div>
</div>
<!--- relationship --->
<div class="col-lg-6 px-3">
<div class="card mb-3" style="border-radius: 15px 0 0 15px; box-shadow: -5px 5px #ac83c8; border-width: 3px; border-style: double;">
<div class="row no-gutters">
<!--- character image --->
<div class="col-4" style="background: url(IMGURL); background-size: cover; background-position: center; border-radius: 15px 0 0 15px;"></div>
<div class="col-8 px-1 py-2">
<div class="py-1 px-2 text-white mr-n2" style="background-color: #775192; border-radius: 15px 0 0 15px;">
<i class="fa-fw fa-solid fa-heart"></i>
<!--- character name --->
<b>Name Surname</b>
<!--- relationship type --->
<span class="float-right d-none d-md-block">relationship</span>
</div>
<div class="container overflow-auto p-2" style="height: 100px;">
<!--- description of their relationship --->
<p>
Nullam ac lorem sit amet urna euismod lobortis. Aenean metus justo, feugiat quis tempor vitae, imperdiet in lacus. Aliquam ac velit rutrum, elementum magna quis, euismod orci. Vestibulum suscipit fringilla turpis id semper. Ut non sagittis ligula. Duis ut eleifend nulla, sit amet luctus nisl. Pellentesque sed urna erat. Donec quis tristique neque. Quisque lobortis semper aliquet. Pellentesque semper sem nisl, id imperdiet turpis elementum et.
</p>
</div>
</div>
</div>
</div>
</div>
<!--- end of relationships --->
</div>
</div>
</div>
</div>
</div>
</div>
<div class="pt-2 pr-3 text-right text-uppercase text-muted">
<a href="https://toyhou.se/SparklyCodes" style="color: #775192;">Mockup</a>
<span class="mx-1">||</span>
<a href="https://toyhou.se/Togo" style="color: #775192;">Base</a>
<span class="mx-1">||</span>
<a href="https://toyhou.se/8byte" style="color: #775192;">Styling</a>
</div>
</div>Copy
<div style="max-width: 1100px;" class="my-lg-4 mx-auto">
<div class="row no-gutters">
<div style="z-index: 1;" class="col-lg-3 pt-lg-4 pb-2 pb-lg-3">
<div style="padding-bottom: 100%; background-image: url({{u!Profile Picture!}}); background-color: #dccfe6; background-size: cover; background-position: center; border-radius: 15px 0 0 15px; box-shadow: -5px 5px {{c!Faded Accent!}}; position: relative; border: 3px double {{c!Main Accent!}}; border-right: none; border-bottom: none;" class="card mb-3">
<i style="position: absolute; bottom: -1rem; right: -1rem; color: {{c!Main Accent!}};" class="fas fa-star fa-3x"></i>
<i style="position: absolute; bottom: 2rem; right: -1rem; color: {{c!Faded Accent!}};" class="fas fa-star fa-2x"></i>
<i style="position: absolute; bottom: -1rem; right: 2rem; color: {{c!Faded Accent!}};" class="fas fa-star fa-2x"></i>
</div>
<div style="border-radius: 15px 0 0 15px; box-shadow: -5px 5px {{c!Faded Accent!}}; position: relative; border-style: double; border-width: 3px;" class="card mb-3 p-4 text-muted font-italic text-center">
<i style="color: {{c!Main Accent!}}; position: absolute; top: .5rem; left: .5rem;" class="fas fa-quote-left"></i>
<i style="color: {{c!Main Accent!}}; position: absolute; bottom: .5rem; right: .5rem;" class="fas fa-quote-right"></i>
{{!Quote or Tagline!}}
</div>
{{%Basics%
<div style="border-radius: 15px 0 0 15px; box-shadow: -5px 5px {{c!Faded Accent!}}; border-width: 3px; border-style: double; border-left: none; border-bottom: none;" class="card mb-2 overflow-hidden">
<div class="row no-gutters">
<div style="min-height: 40px; width: 40px; font-size: 16px; background-color: {{c!Main Accent!}};" class="col-auto d-flex justify-content-center align-items-center text-white">
<i class="fa-fw fa-solid fa-{{%Icon%}}"></i>
</div>
<div class="col align-self-center py-2 px-3">
{{%Content%}}
</div>
</div>
</div>
%end%}}
</div>
<div class="col-auto d-none d-lg-block ml-n5 mr-n4"></div>
<div class="col-lg">
<div style="min-height: 0; border-radius: 0 15px 15px 0; box-shadow: -10px 10px {{c!Main Accent!}}; border-width: 3px; border-style: double;" class="card d-block d-lg-flex h-100 p-3 p-lg-4 bg-faded">
<div style="flex: 1 1 600px; min-height: 0; overflow-y: auto;" class="ml-lg-5 px-lg-4">
<div style="overflow-x: hidden;">
<div class="row no-gutters align-items-center mb-3">
<div style="height: 40px; width: 40px; font-size: 18px; background-color: {{c!Main Accent!}};" class="col-auto d-flex justify-content-center align-items-center mr-3 text-white">
<i class="fa-fw fa-regular fa-star"></i>
</div>
<div class="col">
<h1 style="font-size: 28px;" class="font-weight-normal text-uppercase mb-0">
<span style="color: {{c!Faded Accent!}};">I</span>ntroduction
</h1>
</div>
</div>
<div class="mb-4">
<div style="border-width: 3px; border-style: double; border-left: 5px solid {{c!Faded Accent!}}; border-radius: 0 15px 15px 0;" class="card overflow-hidden p-2">
<i style="position: absolute; bottom: -.5rem; right: -.5rem; color: {{c!Main Accent!}}; opacity: .2;" class="fas fa-star fa-4x"></i>
<i style="position: absolute; bottom: 3rem; right: -1rem; color: {{c!Faded Accent!}}; opacity: .2;" class="fas fa-star fa-2x"></i>
<i style="position: absolute; bottom: -.8rem; right: 3.5rem; color: {{c!Faded Accent!}}; opacity: .2;" class="fas fa-star fa-2x"></i>
{{l!Introduction Text!}}
</div>
</div>
<div class="d-flex d-lg-block flex-column mb-3">
<div class="card mb-3 ml-3 float-right" style="background-image: url({{u!Side Image!}}); height: 300px; min-width: 35%; background-size: cover; background-position: top; border-radius: 0 15px 15px 15px; box-shadow: -5px 5px {{c!Main Accent!}}; position: relative;">
<i style="position: absolute; top: -1rem; left: -1.2rem; color: {{c!Main Accent!}};" class="fas fa-star fa-3x"></i>
<i style="position: absolute; top: 2rem; left: -1.2rem; color: {{c!Faded Accent!}};" class="fas fa-star fa-2x"></i>
<i style="position: absolute; top: -1rem; left: 1.8rem; color: {{c!Faded Accent!}};" class="fas fa-star fa-2x"></i>
</div>
<div class="row no-gutters align-items-center mb-3">
<div style="height: 40px; width: 40px; font-size: 18px; background-color: {{c!Main Accent!}};" class="col-auto d-flex justify-content-center align-items-center mr-3 text-white">
<i class="fa-fw fa-regular fa-comment"></i>
</div>
<div class="col">
<h1 style="font-size: 28px;" class="font-weight-normal text-uppercase mb-0">
<span style="color: {{c!Faded Accent!}};">P</span>ersonality
</h1>
</div>
</div>
{{l!Personality Text!}}
</div>
<div class="clearfix"></div>
<div class="d-flex align-items-center mb-3">
<hr style="border-top-width: 3px; border-top-style: double;" class="flex-fill mr-2 my-0">
<i style="color: {{c!Main Accent!}}; animation-duration: 5s;" class="far fa-star fa-2x fa-spin"></i>
</div>
<div class="row mx-n1">
<div class="col-lg-3 mb-2 pl-3 pr-1">
{{%Likes%
<div style="border-radius: 15px 0 0 15px; box-shadow: -3px 3px {{c!Faded Accent!}};" class="card overflow-hidden mb-2">
<div class="row no-gutters">
<div style="min-height: 30px; width: 30px; background-color: {{c!Main Accent!}};" class="col-auto d-flex justify-content-center align-items-center text-white">
<i class="fa-fw fa-regular fa-check"></i>
</div>
<div class="col align-self-center py-1 px-2">
{{%Content%}}
</div>
</div>
</div>
%end%}}
</div>
<div class="col-lg-3 mb-2 pl-3 pr-1">
{{%Dislikes%
<div style="border-radius: 15px 0 0 15px; box-shadow: -3px 3px {{c!Faded Accent!}};" class="card overflow-hidden mb-2">
<div class="row no-gutters">
<div style="min-height: 30px; width: 30px; background-color: {{c!Main Accent!}};" class="col-auto d-flex justify-content-center align-items-center text-white">
<i class="fa-fw fa-regular fa-times"></i>
</div>
<div class="col align-self-center py-1 px-2">
{{%Content%}}
</div>
</div>
</div>
%end%}}
</div>
<div class="col-lg-6 mb-2 pl-3 pr-1">
{{%Trivia%
<div style="border-radius: 15px 0 0 15px; box-shadow: -3px 3px {{c!Faded Accent!}};" class="card overflow-hidden mb-2">
<div class="row no-gutters">
<div style="min-height: 30px; width: 30px; background-color: {{c!Main Accent!}};" class="col-auto d-flex justify-content-center align-items-center text-white">
<i class="fa-fw fa-regular fa-magnifying-glass"></i>
</div>
<div class="col align-self-center py-1 px-2">
{{%Content%}}
</div>
</div>
</div>
%end%}}
</div>
</div>
<div class="d-flex align-items-center mb-3">
<hr style="border-top-width: 3px; border-top-style: double;" class="flex-fill mr-2 my-0">
</div>
<div class="row no-gutters align-items-center mb-3">
<div style="height: 40px; width: 40px; font-size: 18px; background-color: {{c!Main Accent!}};" class="col-auto d-flex justify-content-center align-items-center mr-3 text-white">
<i class="fa-fw fa-regular fa-book-open-cover"></i>
</div>
<div class="col">
<h1 style="font-size: 28px;" class="font-weight-normal text-uppercase mb-0">
<span style="color: {{c!Faded Accent!}};">S</span>tory
</h1>
</div>
</div>
<div style="border-width: 3px; border-style: double; border-left: 5px solid {{c!Faded Accent!}}; border-radius: 0 15px 15px 0; position: relative;" class="card text-center text-muted p-4 mb-3">
<i style="color: {{c!Main Accent!}}; position: absolute; bottom: .5rem; left: .5rem;" class="fas fa-quote-left"></i>
<i style="color: {{c!Main Accent!}}; position: absolute; top: .5rem; right: .55rem;" class="fas fa-quote-right"></i>
{{!Another Quote or Tagline!}}
</div>
<div class="mb-3">
{{l!Story Text!}}
{{%Story Sections%
<h3 style="background-color: {{c!Main Accent!}}; border-radius: 15px 0 0 15px; justify-content: space-between;" class="mb-3 py-2 px-3 text-white d-flex">
<span class="font-weight-normal text-uppercase">{{%Subheader%}}</span>
<i class="fa-regular fa-bookmark"></i>
</h3>
{{l%Story Text%}}
%end%}}
</div>
<div class="row no-gutters align-items-center mb-3">
<div style="height: 40px; width: 40px; font-size: 18px; background-color: {{c!Main Accent!}};" class="col-auto d-flex justify-content-center align-items-center mr-3 text-white">
<i class="fa-fw fa-regular fa-heartbeat"></i>
</div>
<div class="col">
<h1 style="font-size: 28px;" class="font-weight-normal text-uppercase mb-0">
<span style="color: {{c!Faded Accent!}};">R</span>elationships
</h1>
</div>
</div>
<div class="row mx-n2">
{{%Relationships%
<div class="col-lg-6 px-3">
<div style="border-radius: 15px 0 0 15px; box-shadow: -5px 5px {{c!Faded Accent!}}; border-width: 3px; border-style: double;" class="card mb-3">
<div class="row no-gutters">
<div style="background: url({{u%Character Image%}}); background-size: cover; background-position: center; border-radius: 15px 0 0 15px;" class="col-4"></div>
<div class="col-8 px-1 py-2">
<div style="background-color: {{c!Main Accent!}}; border-radius: 15px 0 0 15px;" class="py-1 px-2 text-white mr-n2">
<i class="fa-fw fa-solid fa-heart"></i>
<b>{{%Character Name%}}</b>
<span class="float-right d-none d-md-block">{{%relationship%}}</span>
</div>
<div style="height: 100px;" class="container overflow-auto p-2">
{{l%Relationship Text%}}
</div>
</div>
</div>
</div>
</div>
%end%}}
</div>
</div>
</div>
</div>
</div>
</div>
<div class="pt-2 pr-3 text-right text-uppercase text-muted">
<a style="color: {{c!Main Accent!}};" href="https://toyhou.se/SparklyCodes">Mockup</a>
<span class="mx-1">||</span>
<a style="color: {{c!Main Accent!}};" href="https://toyhou.se/Togo">Base</a>
<span class="mx-1">||</span>
<a style="color: {{c!Main Accent!}};" href="https://toyhou.se/8byte">Styling</a>
</div>
</div>