Profile
<!-- THIS CODE USES SITE THEME COLORS + TWO CUSTOM COLORS
9. || Astrology || F2U
This code was inspired by SpiritX mockup and some
astrology themes because I've wanted a code featuring
constellations for a long time and the initial mockup
had the space for it's realization!
(It was hell don't try this at home)
ACCENT = #ccc
STARS + BOXES SHADOW = #000
NOTE: This code hides character profile header. If you don't want that, you
can take everything out of the first div and remove it then
-->
<!--
=======================================
MAIN CARD THAT HIDES PROFILE HEADER
=======================================
-->
<div class="card border-0 pt-5 pb-4" style="margin-top: -60px;">
<!--
=======================================
STARRY SKY BACKGROUND
=======================================
-->
<div class="container p-0 p-lg-5 pt-3 pt-lg-0 pb-3 pb-lg-0" style="font-family: Andale Mono, monospace;
background-image: url(https://images.unsplash.com/photo-1572191783453-62f99a6055ce?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80);
background-size: cover;
background-position: center;">
<!--
=======================================
MAIN PROFILE CONTAINER
=======================================
-->
<div class="container" style="max-width: 700px;">
<div class="mb-2" style="border-top: double 6px; font-size: 15px; color: white;"></div>
<div class="row no-gutters">
<!--
===================================
LEFT CARD (CHARACTER + QUOTE)
===================================
-->
<div class="col-12 col-lg-6 bg-faded p-2 mb-4 mb-lg-0">
<!-- LEFT CONSTELLATION -->
<div class="h-100 text-white hidden-md-down" style="position: absolute; left: -5px; z-index: 10; text-shadow: 0px 0px 12px #000;">
<i class="fas fa-star" style="font-size: 30px; position: absolute; top: 15%; transform: rotate(30deg);"></i>
<hr class="bg-white" style="position: absolute; left: -95px; top: 22%; height: 1px; width: 120px; transform: rotate(-47deg); box-shadow: 0px 0px 5px #000;">
<i class="fas fa-star" style="font-size: 45px; position: absolute; top: 29%; left: -115px; transform: rotate(-5deg);"></i>
<hr class="bg-white" style="position: absolute; left: -110px; top: 37.7%; height: 1px; width: 100px; transform: rotate(60deg); box-shadow: 0px 0px 5px #000;">
<i class="fas fa-star" style="font-size: 40px; position: absolute; top: 45%; left: -50px; transform: rotate(15deg);"></i>
<hr class="bg-white" style="position: absolute; left: -99px; top: 55.6%; height: 1px; width: 130px; transform: rotate(92deg); box-shadow: 0px 0px 5px #000;">
<i class="fas fa-star" style="font-size: 30px; position: absolute; top: 66%; left: -53px; transform: rotate(-35deg);"></i>
<hr class="bg-white" style="position: absolute; left: -31px; top: 69.5%; height: 1px; width: 63px; transform: rotate(33deg); box-shadow: 0px 0px 5px #000;">
<i class="fas fa-star" style="font-size: 35px; position: absolute; top: 72%; left: 25px; transform: rotate(30deg);"></i>
<hr class="bg-white" style="position: absolute; left: -71px; top: 78.3%; height: 1px; width: 120px; transform: rotate(-38deg); box-shadow: 0px 0px 5px #000;">
<i class="fas fa-star" style="font-size: 25px; position: absolute; top: 85%; left: -83px; transform: rotate(-5deg);"></i>
</div>
<!--
================================================
CHARACTER BANNER
Insert your image link instead of "URLHERE"
================================================
-->
<div class="card border-0 h-100 p-2" style="overflow: hidden; min-height: 450px; border-radius: 0px;
background-image: url(URLHERE);
background-position: top left;
background-size: cover;">
<div class="col-10 small card-flex align-items-center justify-content-center p-3 pr-4 text-justify text-dark" style="position: absolute; right: 0px; bottom: 7.5%; background: rgba(251, 249, 246, .8); box-shadow: 0px 0px 6px #000;">
<p>
<!-- QUOTE == TRY TO KEEP IT SHORT FOR BETTER LOOK -->
<i class="far fa-quote-left"></i>
Insert your quote here.
<i class="far fa-quote-right"></i>
</p>
</div>
<div class="h-100 text-white" style="border: solid 3px; box-shadow: 0px 0px 6px #000; z-index: 2;"></div>
<!-- BACKGROUND OR CHARACTER IMAGE CREDIT -->
<a class="text-white tooltipster"
title="Art by ArtistName"
href="LINK_HERE"
style="position: absolute; bottom: 10px; right: 15px; z-index: 2; text-shadow: 0px 0px 5px #000;">
<i class="far fa-image"></i></a>
<!-- ==================================== -->
</div>
</div>
<!--
===================================
RIGHT CARD (MAIN INFO LINE)
===================================
-->
<div class="col-12 col-lg-6 pl-0 pl-lg-5">
<!-- RIGHT CONSTELLATION -->
<div class="h-100 text-white hidden-md-down" style="position: absolute; right: -5px; z-index: 20; text-shadow: 0px 0px 12px #000;">
<i class="fas fa-star" style="font-size: 45px; position: absolute; top: 40.8%; right: -20px; transform: rotate(-25deg);"></i>
<hr class="bg-white" style="position: absolute; right: -161px; top: 24.9%; height: 1px; width: 140px; transform: rotate(67deg); box-shadow: 0px 0px 5px #000;">
<i class="fas fa-star" style="font-size: 40px; position: absolute; top: 35%; right: -150px; transform: rotate(15deg);"></i>
<hr class="bg-white" style="position: absolute; right: -110px; top: 38.2%; height: 1px; width: 95px; transform: rotate(-25deg); box-shadow: 0px 0px 5px #000;">
<i class="fas fa-star" style="font-size: 30px; position: absolute; top: 15%; right: -75px; transform: rotate(-10deg);"></i>
<hr class="bg-white" style="position: absolute; right: -148px; top: 58.4%; height: 1px; width: 240px; transform: rotate(78.3deg); box-shadow: 0px 0px 5px #000;">
<i class="fas fa-star" style="font-size: 35px; position: absolute; top: 38%; right: 125px; transform: rotate(-5deg);"></i>
<hr class="bg-white" style="position: absolute; right: 28px; top: 39.23%; height: 1px; width: 95px; transform: rotate(9deg); box-shadow: 0px 0px 5px #000;">
<i class="fas fa-star" style="font-size: 30px; position: absolute; top: 41.5%; right: 200px; transform: rotate(-35deg);"></i>
<hr class="bg-white" style="position: absolute; right: 164px; top: 39.7%; height: 1px; width: 35px; transform: rotate(-22deg); box-shadow: 0px 0px 5px #000;">
<i class="fas fa-star" style="font-size: 25px; position: absolute; top: 75%; right: -72px; transform: rotate(18deg);"></i>
</div>
<!--
======================================
CARD WITH BASIC INFO
======================================
-->
<div class="mb-5 bg-faded p-2" style="min-height: 300px;">
<div class="card p-3" style="border-radius: 0px;">
<div class="col p-0">
<div class="row no-gutters justify-content-between small">
<p class="text-uppercase"><span><i class="far fa-pencil fa-fw"></i></span>
Name
</p>
<p>
Content
</p>
</div>
<div class="row no-gutters justify-content-between small">
<p class="text-uppercase"><i class="far fa-venus-mars fa-fw"></i>
Gender
</p>
<p>
Content
</p>
</div>
<div class="row no-gutters justify-content-between small">
<p class="text-uppercase"><i class="far fa-hourglass fa-fw"></i>
Age
</p>
<p>
Content
</p>
</div>
<div class="row no-gutters justify-content-between small">
<p class="text-uppercase"><i class="far fa-birthday-cake fa-fw"></i>
DoB
</p>
<p>
Content
</p>
</div>
<div class="row no-gutters justify-content-between small">
<p class="text-uppercase"><i class="far fa-star-shooting fa-fw"></i>
Sign
</p>
<p>
Content
</p>
</div>
<!-- CONTENT DIVIDER -->
<div class="mb-3 mt-1" style="border-top: double 6px; font-size: 15px; color: #ccc;">
</div>
<div class="row no-gutters justify-content-between small">
<p class="text-uppercase"><i class="far fa-ruler-vertical fa-fw"></i>
Height
</p>
<p>
Content
</p>
</div>
<div class="row no-gutters justify-content-between small">
<p class="text-uppercase"><i class="far fa-hand-holding-magic fa-fw"></i>
Role
</p>
<p>
Content
</p>
</div>
<div class="row no-gutters justify-content-between small">
<p class="text-uppercase"><i class="far fa-music fa-fw"></i>
Theme
</p>
<div class="card border-0 align-items-center justify-content-center tooltipster" style="height: 20px; width: 26px; overflow: hidden;"
title="Artist - Song Name">
<i class="fal fa-play fa-fw"></i>
<iframe style="opacity: 0.001; height: 500%; width: 650%; position: absolute; bottom: -6px; left: -2px;"
src="https://www.youtube.com/embed/ID"></iframe>
<!-- YOUTUBE EMBED -- INSERT EMBED CODE (ID) OF YOUR VIDEO
If you are struggling with what YT video ID is, let
me show you an example on the song that is embedded
here in code's preview.
Here's the whole video link:
https://www.youtube.com/watch?v=bH5NlwQyLpA&ab_channel=ChannelName
And what we need is a string between "=" and "&":
https://www.youtube.com/watch?v= bH5NlwQyLpA &ab_channel=ChannelName
And we put it here:
https://www.youtube.com/embed/bH5NlwQyLpA
That's it!
-->
</div>
</div>
</div>
</div>
</div>
<!--
======================================
CARD WITH ACCORDION TABS
======================================
-->
<div class="bg-faded p-2 small">
<div class="accordion card" id="expand" style="height: 450px; border-radius: 0px;">
<!-- STATS COLLAPSE SECTION -->
<div class="p-2">
<div class="card border-0 pt-1" style="background: none;">
<a data-toggle="collapse" data-target="#stats" class="text-uppercase" style="font-size: 20px; font-weight: 300; font-family: Courier New, monospace;" aria-expanded="true">Stats
<span class="pull-right"><i class="fal fa-stars"></i></span></a>
<div style="border-top: double 6px; font-size: 15px; color: #ccc;"></div>
</div>
<div id="stats" class="collapse show" data-parent="#expand">
<div class="pt-1 pb-1 pl-3 pr-3 pl-lg-1 pr-lg-1" style="height: 285px; overflow: auto;">
<!-- CHARISMA STAT -->
<div class="row no-gutters align-items-center">
<div class="col">
<p>
Charisma
</p>
</div>
<div class="col">
<div class="progress" style="height: 8px;">
<!-- STAT BAR -- CHANGE VALUE FROM 0 TO 100% -->
<div class="progress-bar" style="background: #ccc;
width: 50%
;"></div>
</div>
</div>
</div>
<!-- KINDNESS STAT -->
<div class="row no-gutters align-items-center">
<div class="col">
<p>
Kindness
</p>
</div>
<div class="col">
<div class="progress" style="height: 8px;">
<!-- STAT BAR -- CHANGE VALUE FROM 0 TO 100% -->
<div class="progress-bar" style="background: #ccc;
width: 50%
;"></div>
</div>
</div>
</div>
<!-- PATIENCE STAT -->
<div class="row no-gutters align-items-center">
<div class="col">
<p>
Patience
</p>
</div>
<div class="col">
<div class="progress" style="height: 8px;">
<!-- STAT BAR -- CHANGE VALUE FROM 0 TO 100% -->
<div class="progress-bar" style="background: #ccc;
width: 50%
;"></div>
</div>
</div>
</div>
<!-- INTEGRITY STAT -->
<div class="row no-gutters align-items-center">
<div class="col">
<p>
Integrity
</p>
</div>
<div class="col">
<div class="progress" style="height: 8px;">
<!-- STAT BAR -- CHANGE VALUE FROM 0 TO 100% -->
<div class="progress-bar" style="background: #ccc;
width: 50%
;"></div>
</div>
</div>
</div>
<!-- INTELLECT STAT -->
<div class="row no-gutters align-items-center">
<div class="col">
<p>
Intellect
</p>
</div>
<div class="col">
<div class="progress" style="height: 8px;">
<!-- STAT BAR -- CHANGE VALUE FROM 0 TO 100% -->
<div class="progress-bar" style="background: #ccc;
width: 50%
;"></div>
</div>
</div>
</div>
<!-- MATURITY STAT -->
<div class="row no-gutters align-items-center">
<div class="col">
<p>
Maturity
</p>
</div>
<div class="col">
<div class="progress" style="height: 8px;">
<!-- STAT BAR -- CHANGE VALUE FROM 0 TO 100% -->
<div class="progress-bar" style="background: #ccc;
width: 50%
;"></div>
</div>
</div>
</div>
<!-- COURAGE STAT -->
<div class="row no-gutters align-items-center">
<div class="col">
<p>
Courage
</p>
</div>
<div class="col">
<div class="progress" style="height: 8px;">
<!-- STAT BAR -- CHANGE VALUE FROM 0 TO 100% -->
<div class="progress-bar" style="background: #ccc;
width: 50%
;"></div>
</div>
</div>
</div>
<!-- HUMOUR STAT -->
<div class="row no-gutters align-items-center">
<div class="col">
<p>
Humour
</p>
</div>
<div class="col">
<div class="progress" style="height: 8px;">
<!-- STAT BAR -- CHANGE VALUE FROM 0 TO 100% -->
<div class="progress-bar" style="background: #ccc;
width: 50%
;"></div>
</div>
</div>
</div>
<!-- TEMPER STAT -->
<div class="row no-gutters align-items-center">
<div class="col">
<p>
Temper
</p>
</div>
<div class="col">
<div class="progress" style="height: 8px;">
<!-- STAT BAR -- CHANGE VALUE FROM 0 TO 100% -->
<div class="progress-bar" style="background: #ccc;
width: 50%
;"></div>
</div>
</div>
</div>
<div class="row no-gutters mt-2">
<!-- LIKES CONTENT -->
<div class="col mr-1 bg-faded">
<p class="text-uppercase p-1" style="color: #ccc;">
Likes
<span class="pull-right"><i class="far fa-heartbeat"></i></span></i></p>
<ul class="list-group ml-4 pb-2">
<li class="list-item">Content</li>
<li class="list-item">Content</li>
<li class="list-item">Content</li>
<li class="list-item">Content</li>
</ul>
</div>
<!-- DISLIKES CONTENT -->
<div class="col bg-faded">
<p class="text-uppercase p-1" style="color: #ccc;">
Dislikes
<span class="pull-right"><i class="far fa-heart-crack"></i></span></i></p>
<ul class="list-group ml-4 pb-2">
<li class="list-item">Content</li>
<li class="list-item">Content</li>
<li class="list-item">Content</li>
<li class="list-item">Content</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- STORY COLLAPSE SECTION -->
<div class="p-2">
<div class="card border-0" style="background: none;">
<a data-toggle="collapse" data-target="#bio" class="text-uppercase" style="font-size: 20px; font-weight: 300; font-family: Courier New, monospace;" aria-expanded="true">
Story
<span class="pull-right"><i class="fal fa-scroll fa-flip-horizontal"></i></span></a>
<div style="border-top: double 6px; font-size: 15px; color: #ccc;"></div>
</div>
<div id="bio" class="collapse" data-parent="#expand">
<div class="pt-1 pb-1 pr-2 text-justify" style="height: 285px; overflow: auto;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo risus, mattis sed lorem sed, consequat varius libero. Fusce posuere consequat enim at dapibus. Nunc vulputate eros ut iaculis vestibulum. Sed libero diam, finibus at augue sit amet, cursus dictum ipsum.</p>
<p class="text-uppercase" style="color: #ccc;">Subheader<span class="pull-left mr-1"><i class="far fa-bookmark"></i></span></p>
<hr class="mt-n3 mb-1" style="border-top: double 3px #ccc;">
<p>Nunc sit amet tellus sed nisl hendrerit ultricies. Ut dignissim ex eget arcu condimentum, ut interdum metus condimentum. Curabitur ut tortor sit amet augue molestie tempus. Quisque laoreet consequat mi sollicitudin porttitor. Nulla nunc elit, tempor eu tellus nec, sollicitudin scelerisque dolor. Fusce at orci vel sapien mollis luctus vitae quis erat. Donec lacinia nibh et turpis feugiat, vitae laoreet mauris interdum.</p>
<p class="text-uppercase" style="color: #ccc;">Subheader<span class="pull-left mr-1"><i class="far fa-bookmark"></i></span></p>
<hr class="mt-n3 mb-1" style="border-top: double 3px #ccc;">
<p>Aliquam ante odio, sodales nec tortor ac, volutpat volutpat est. Donec ut interdum mauris. Cras hendrerit neque placerat massa tincidunt tempus. Etiam tempor, libero ut vestibulum tincidunt, ligula dui accumsan ligula, ac scelerisque sapien nisi non ex. Proin vitae elementum nunc, in semper libero. Praesent tincidunt lectus sed molestie feugiat. Quisque sapien mi, viverra quis neque eu, rhoncus malesuada nulla. Proin malesuada eros ac sem vehicula, in eleifend lorem consequat.</p>
</div>
</div>
</div>
<!-- RELATIONS COLLAPSE SECTION -->
<div class="p-2">
<div class="card border-0" style="background: none;">
<a data-toggle="collapse" data-target="#links" class="text-uppercase" style="font-size: 20px; font-weight: 300; font-family: Courier New, monospace;" aria-expanded="true">
Relations
<span class="pull-right"><i class="fal fa-link"></i></span></a>
<div style="border-top: double 6px; font-size: 15px; color: #ccc;"></div>
</div>
<div id="links" class="collapse" data-parent="#expand">
<div class="pt-1 pb-1 pl-3 pr-3 pl-lg-1 pr-lg-1" style="height: 285px; overflow: auto;">
<!-- (LEFT) RELATIONSHIP CARD START -->
<div class="row no-gutters pt-1 pb-2">
<!-- CHARACTER IMAGE == INSERT YOUR LINK INSTEAD OF "URLHERE" -->
<img class="d-block float-lg-left " style=" height: 125px; width: 100px; object-fit: cover; object-position: center"
src="URLHERE">
<div class="col p-0">
<!-- CHARACTER LINK == INSERT YOUR LINK INSTEAD OF "LINK_HERE" -->
<a style="color: #ccc;"
href="LINK_HERE"
><p class="ml-2 text-uppercase">
Character name
</p></a>
<hr class="mt-n3 ml-2 mb-1" style="border-top: double 3px #ccc;">
<p class="ml-2 small text-uppercase">
[ relationship ]
</p>
<!-- AFFECTION BAR -->
<div class="row no-gutters align-items-center">
<div class="col pl-2">
<p>
Affection
</p>
</div>
<div class="col">
<div class="progress" style="height: 8px;">
<!-- STAT BAR -- CHANGE VALUE FROM 0 TO 100% -->
<div class="progress-bar" style="background: #ccc;
width: 50%
;"></div>
</div>
</div>
</div>
<!-- RESPECT BAR -->
<div class="row no-gutters align-items-center">
<div class="col pl-2">
<p>
Respect
</p>
</div>
<div class="col">
<div class="progress" style="height: 8px;">
<!-- STAT BAR -- CHANGE VALUE FROM 0 TO 100% -->
<div class="progress-bar" style="background: #ccc;
width: 50%
;"></div>
</div>
</div>
</div>
<!-- TRUST BAR -->
<div class="row no-gutters align-items-center">
<div class="col pl-2">
<p>
Trust
</p>
</div>
<div class="col">
<div class="progress" style="height: 8px;">
<!-- STAT BAR -- CHANGE VALUE FROM 0 TO 100% -->
<div class="progress-bar" style="background: #ccc;
width: 50%
;"></div>
</div>
</div>
</div>
<!-- COMFORT BAR -->
<div class="row no-gutters align-items-center">
<div class="col pl-2">
<p>
Comfort
</p>
</div>
<div class="col">
<div class="progress" style="height: 8px;">
<!-- STAT BAR -- CHANGE VALUE FROM 0 TO 100% -->
<div class="progress-bar" style="background: #ccc;
width: 50%
;"></div>
</div>
</div>
</div>
<!-- CARENESS BAR -->
<div class="row no-gutters align-items-center">
<div class="col pl-2">
<p>
Careness
</p>
</div>
<div class="col">
<div class="progress" style="height: 8px;">
<!-- STAT BAR -- CHANGE VALUE FROM 0 TO 100% -->
<div class="progress-bar" style="background: #ccc;
width: 50%
;"></div>
</div>
</div>
</div>
</div>
</div>
<!--=========================-->
<!-- (RIGHT) RELATIONSHIP CARD START -->
<div class="row no-gutters pt-1 pb-2">
<div class="col pr-2">
<!-- CHARACTER LINK == INSERT YOUR LINK INSTEAD OF "LINK_HERE" -->
<a style="color: #ccc;"
href="LINK_HERE"
><p class="text-uppercase">
Character name
</p></a>
<hr class="mt-n3 ml- mb-1" style="border-top: double 3px #ccc;">
<p class="small text-uppercase">
[ relationship ]
</p>
<!-- AFFECTION BAR -->
<div class="row no-gutters align-items-center">
<div class="col pr-2">
<p>
Affection
</p>
</div>
<div class="col">
<div class="progress" style="height: 8px;">
<!-- STAT BAR -- CHANGE VALUE FROM 0 TO 100% -->
<div class="progress-bar" style="background: #ccc;
width: 50%
;"></div>
</div>
</div>
</div>
<!-- RESPECT BAR -->
<div class="row no-gutters align-items-center">
<div class="col pr-2">
<p>
Respect
</p>
</div>
<div class="col">
<div class="progress" style="height: 8px;">
<!-- STAT BAR -- CHANGE VALUE FROM 0 TO 100% -->
<div class="progress-bar" style="background: #ccc;
width: 50%
;"></div>
</div>
</div>
</div>
<!-- TRUST BAR -->
<div class="row no-gutters align-items-center">
<div class="col pr-2">
<p>
Trust
</p>
</div>
<div class="col">
<div class="progress" style="height: 8px;">
<!-- STAT BAR -- CHANGE VALUE FROM 0 TO 100% -->
<div class="progress-bar" style="background: #ccc;
width: 50%
;"></div>
</div>
</div>
</div>
<!-- COMFORT BAR -->
<div class="row no-gutters align-items-center">
<div class="col pr-2">
<p>
Comfort
</p>
</div>
<div class="col">
<div class="progress" style="height: 8px;">
<!-- STAT BAR -- CHANGE VALUE FROM 0 TO 100% -->
<div class="progress-bar" style="background: #ccc;
width: 50%
;"></div>
</div>
</div>
</div>
<!-- CARENESS BAR -->
<div class="row no-gutters align-items-center">
<div class="col pr-2">
<p>
Careness
</p>
</div>
<div class="col">
<div class="progress" style="height: 8px;">
<!-- STAT BAR -- CHANGE VALUE FROM 0 TO 100% -->
<div class="progress-bar" style="background: #ccc;
width: 50%
;"></div>
</div>
</div>
</div>
</div>
<!-- CHARACTER IMAGE == INSERT YOUR LINK INSTEAD OF "URLHERE" -->
<img class="d-block float-lg-right" style=" height: 125px; width: 100px; object-fit: cover; object-position: center"
src="URLHERE">
</div>
<!--=========================-->
<!-- (LEFT) RELATIONSHIP CARD START -->
<div class="row no-gutters pt-1 pb-2">
<!-- CHARACTER IMAGE == INSERT YOUR LINK INSTEAD OF "URLHERE" -->
<img class="d-block float-lg-left " style=" height: 125px; width: 100px; object-fit: cover; object-position: center"
src="URLHERE">
<div class="col p-0">
<!-- CHARACTER LINK == INSERT YOUR LINK INSTEAD OF "LINK_HERE" -->
<a style="color: #ccc;"
href="LINK_HERE"
><p class="ml-2 text-uppercase">
Character name
</p></a>
<hr class="mt-n3 ml-2 mb-1" style="border-top: double 3px #ccc;">
<p class="ml-2 small text-uppercase">
[ relationship ]
</p>
<!-- AFFECTION BAR -->
<div class="row no-gutters align-items-center">
<div class="col pl-2">
<p>
Affection
</p>
</div>
<div class="col">
<div class="progress" style="height: 8px;">
<!-- STAT BAR -- CHANGE VALUE FROM 0 TO 100% -->
<div class="progress-bar" style="background: #ccc;
width: 50%
;"></div>
</div>
</div>
</div>
<!-- RESPECT BAR -->
<div class="row no-gutters align-items-center">
<div class="col pl-2">
<p>
Respect
</p>
</div>
<div class="col">
<div class="progress" style="height: 8px;">
<!-- STAT BAR -- CHANGE VALUE FROM 0 TO 100% -->
<div class="progress-bar" style="background: #ccc;
width: 50%
;"></div>
</div>
</div>
</div>
<!-- TRUST BAR -->
<div class="row no-gutters align-items-center">
<div class="col pl-2">
<p>
Trust
</p>
</div>
<div class="col">
<div class="progress" style="height: 8px;">
<!-- STAT BAR -- CHANGE VALUE FROM 0 TO 100% -->
<div class="progress-bar" style="background: #ccc;
width: 50%
;"></div>
</div>
</div>
</div>
<!-- COMFORT BAR -->
<div class="row no-gutters align-items-center">
<div class="col pl-2">
<p>
Comfort
</p>
</div>
<div class="col">
<div class="progress" style="height: 8px;">
<!-- STAT BAR -- CHANGE VALUE FROM 0 TO 100% -->
<div class="progress-bar" style="background: #ccc;
width: 50%
;"></div>
</div>
</div>
</div>
<!-- CARENESS BAR -->
<div class="row no-gutters align-items-center">
<div class="col pl-2">
<p>
Careness
</p>
</div>
<div class="col">
<div class="progress" style="height: 8px;">
<!-- STAT BAR -- CHANGE VALUE FROM 0 TO 100% -->
<div class="progress-bar" style="background: #ccc;
width: 50%
;"></div>
</div>
</div>
</div>
</div>
</div>
<!--=========================-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- CREDIT -- DO NOT REMOVE!-->
<div class="row no-gutters">
<div class="col-9 mt-2" style="border-top: double 6px; font-size: 15px; color: white;"></div>
<div class="row no-gutters">
<a href="https://toyhou.se/SpiritX" title="Layout mockup by SpiritX" class="text-center text-white tooltipster" style=""><i class="far fa-table-layout pl-1 pr-1 pt-1"></i></a>
<a href="https://toyhou.se/ChiiAka" title="Code by ChiiAka" class="text-center text-white tooltipster" style=""><i class="far fa-code pr-1 pt-1"></i></a>
</div>
<div class="col mt-2" style="border-top: double 6px; font-size: 15px; color: white;"></div>
</div>
</div>
</div>
</div>
<!-- THIS CODE USES SITE THEME COLORS + TWO CUSTOM COLORS
9. || Astrology || F2U
This code was inspired by SpiritX mockup and some
astrology themes because I've wanted a code featuring
constellations for a long time and the initial mockup
had the space for it's realization!
(It was hell don't try this at home)
ACCENT = #ccc
STARS + BOXES SHADOW = #000
NOTE: This code hides character profile header. If you don't want that, you
can take everything out of the first div and remove it then
-->
<!--
=======================================
MAIN CARD THAT HIDES PROFILE HEADER
=======================================
-->
<div class="card border-0 pt-5 pb-4" style="margin-top: -60px;">
<!--
=======================================
STARRY SKY BACKGROUND
=======================================
-->
<div class="container p-0 p-lg-5 pt-3 pt-lg-0 pb-3 pb-lg-0" style="font-family: Andale Mono, monospace;
background-image: url(https://images.unsplash.com/photo-1572191783453-62f99a6055ce?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80);
background-size: cover;
background-position: center;">
<!--
=======================================
MAIN PROFILE CONTAINER
=======================================
-->
<div class="container" style="max-width: 700px;">
<div class="mb-2" style="border-top: double 6px; font-size: 15px; color: white;"></div>
<div class="row no-gutters">
<!--
===================================
LEFT CARD (CHARACTER + QUOTE)
===================================
-->
<div class="col-12 col-lg-6 bg-faded p-2 mb-4 mb-lg-0">
<!-- LEFT CONSTELLATION -->
<div class="h-100 text-white hidden-md-down" style="position: absolute; left: -5px; z-index: 10; text-shadow: 0px 0px 12px #000;">
<i class="fas fa-star" style="font-size: 30px; position: absolute; top: 15%; transform: rotate(30deg);"></i>
<hr class="bg-white" style="position: absolute; left: -95px; top: 22%; height: 1px; width: 120px; transform: rotate(-47deg); box-shadow: 0px 0px 5px #000;">
<i class="fas fa-star" style="font-size: 45px; position: absolute; top: 29%; left: -115px; transform: rotate(-5deg);"></i>
<hr class="bg-white" style="position: absolute; left: -110px; top: 37.7%; height: 1px; width: 100px; transform: rotate(60deg); box-shadow: 0px 0px 5px #000;">
<i class="fas fa-star" style="font-size: 40px; position: absolute; top: 45%; left: -50px; transform: rotate(15deg);"></i>
<hr class="bg-white" style="position: absolute; left: -99px; top: 55.6%; height: 1px; width: 130px; transform: rotate(92deg); box-shadow: 0px 0px 5px #000;">
<i class="fas fa-star" style="font-size: 30px; position: absolute; top: 66%; left: -53px; transform: rotate(-35deg);"></i>
<hr class="bg-white" style="position: absolute; left: -31px; top: 69.5%; height: 1px; width: 63px; transform: rotate(33deg); box-shadow: 0px 0px 5px #000;">
<i class="fas fa-star" style="font-size: 35px; position: absolute; top: 72%; left: 25px; transform: rotate(30deg);"></i>
<hr class="bg-white" style="position: absolute; left: -71px; top: 78.3%; height: 1px; width: 120px; transform: rotate(-38deg); box-shadow: 0px 0px 5px #000;">
<i class="fas fa-star" style="font-size: 25px; position: absolute; top: 85%; left: -83px; transform: rotate(-5deg);"></i>
</div>
<!--
================================================
CHARACTER BANNER
Insert your image link instead of "URLHERE"
================================================
-->
<div class="card border-0 h-100 p-2" style="overflow: hidden; min-height: 450px; border-radius: 0px;
background-image: url(URLHERE);
background-position: top left;
background-size: cover;">
<div class="col-10 small card-flex align-items-center justify-content-center p-3 pr-4 text-justify text-dark" style="position: absolute; right: 0px; bottom: 7.5%; background: rgba(251, 249, 246, .8); box-shadow: 0px 0px 6px #000;">
<p>
<!-- QUOTE == TRY TO KEEP IT SHORT FOR BETTER LOOK -->
<i class="far fa-quote-left"></i>
Insert your quote here.
<i class="far fa-quote-right"></i>
</p>
</div>
<div class="h-100 text-white" style="border: solid 3px; box-shadow: 0px 0px 6px #000; z-index: 2;"></div>
<!-- BACKGROUND OR CHARACTER IMAGE CREDIT -->
<a class="text-white tooltipster"
title="Art by ArtistName"
href="LINK_HERE"
style="position: absolute; bottom: 10px; right: 15px; z-index: 2; text-shadow: 0px 0px 5px #000;">
<i class="far fa-image"></i></a>
<!-- ==================================== -->
</div>
</div>
<!--
===================================
RIGHT CARD (MAIN INFO LINE)
===================================
-->
<div class="col-12 col-lg-6 pl-0 pl-lg-5">
<!-- RIGHT CONSTELLATION -->
<div class="h-100 text-white hidden-md-down" style="position: absolute; right: -5px; z-index: 20; text-shadow: 0px 0px 12px #000;">
<i class="fas fa-star" style="font-size: 45px; position: absolute; top: 40.8%; right: -20px; transform: rotate(-25deg);"></i>
<hr class="bg-white" style="position: absolute; right: -161px; top: 24.9%; height: 1px; width: 140px; transform: rotate(67deg); box-shadow: 0px 0px 5px #000;">
<i class="fas fa-star" style="font-size: 40px; position: absolute; top: 35%; right: -150px; transform: rotate(15deg);"></i>
<hr class="bg-white" style="position: absolute; right: -110px; top: 38.2%; height: 1px; width: 95px; transform: rotate(-25deg); box-shadow: 0px 0px 5px #000;">
<i class="fas fa-star" style="font-size: 30px; position: absolute; top: 15%; right: -75px; transform: rotate(-10deg);"></i>
<hr class="bg-white" style="position: absolute; right: -148px; top: 58.4%; height: 1px; width: 240px; transform: rotate(78.3deg); box-shadow: 0px 0px 5px #000;">
<i class="fas fa-star" style="font-size: 35px; position: absolute; top: 38%; right: 125px; transform: rotate(-5deg);"></i>
<hr class="bg-white" style="position: absolute; right: 28px; top: 39.23%; height: 1px; width: 95px; transform: rotate(9deg); box-shadow: 0px 0px 5px #000;">
<i class="fas fa-star" style="font-size: 30px; position: absolute; top: 41.5%; right: 200px; transform: rotate(-35deg);"></i>
<hr class="bg-white" style="position: absolute; right: 164px; top: 39.7%; height: 1px; width: 35px; transform: rotate(-22deg); box-shadow: 0px 0px 5px #000;">
<i class="fas fa-star" style="font-size: 25px; position: absolute; top: 75%; right: -72px; transform: rotate(18deg);"></i>
</div>
<!--
======================================
CARD WITH BASIC INFO
======================================
-->
<div class="mb-5 bg-faded p-2" style="min-height: 300px;">
<div class="card p-3" style="border-radius: 0px;">
<div class="col p-0">
<div class="row no-gutters justify-content-between small">
<p class="text-uppercase"><span><i class="far fa-pencil fa-fw"></i></span>
Name
</p>
<p>
Content
</p>
</div>
<div class="row no-gutters justify-content-between small">
<p class="text-uppercase"><i class="far fa-venus-mars fa-fw"></i>
Gender
</p>
<p>
Content
</p>
</div>
<div class="row no-gutters justify-content-between small">
<p class="text-uppercase"><i class="far fa-hourglass fa-fw"></i>
Age
</p>
<p>
Content
</p>
</div>
<div class="row no-gutters justify-content-between small">
<p class="text-uppercase"><i class="far fa-birthday-cake fa-fw"></i>
DoB
</p>
<p>
Content
</p>
</div>
<div class="row no-gutters justify-content-between small">
<p class="text-uppercase"><i class="far fa-star-shooting fa-fw"></i>
Sign
</p>
<p>
Content
</p>
</div>
<!-- CONTENT DIVIDER -->
<div class="mb-3 mt-1" style="border-top: double 6px; font-size: 15px; color: #ccc;">
</div>
<div class="row no-gutters justify-content-between small">
<p class="text-uppercase"><i class="far fa-ruler-vertical fa-fw"></i>
Height
</p>
<p>
Content
</p>
</div>
<div class="row no-gutters justify-content-between small">
<p class="text-uppercase"><i class="far fa-hand-holding-magic fa-fw"></i>
Role
</p>
<p>
Content
</p>
</div>
<div class="row no-gutters justify-content-between small">
<p class="text-uppercase"><i class="far fa-music fa-fw"></i>
Theme
</p>
<div class="card border-0 align-items-center justify-content-center tooltipster" style="height: 20px; width: 26px; overflow: hidden;"
title="Artist - Song Name">
<i class="fal fa-play fa-fw"></i>
<iframe style="opacity: 0.001; height: 500%; width: 650%; position: absolute; bottom: -6px; left: -2px;"
src="https://www.youtube.com/embed/ID"></iframe>
<!-- YOUTUBE EMBED -- INSERT EMBED CODE (ID) OF YOUR VIDEO
If you are struggling with what YT video ID is, let
me show you an example on the song that is embedded
here in code's preview.
Here's the whole video link:
https://www.youtube.com/watch?v=bH5NlwQyLpA&ab_channel=ChannelName
And what we need is a string between "=" and "&":
https://www.youtube.com/watch?v= bH5NlwQyLpA &ab_channel=ChannelName
And we put it here:
https://www.youtube.com/embed/bH5NlwQyLpA
That's it!
-->
</div>
</div>
</div>
</div>
</div>
<!--
======================================
CARD WITH ACCORDION TABS
======================================
-->
<div class="bg-faded p-2 small">
<div class="accordion card" id="expand" style="height: 450px; border-radius: 0px;">
<!-- STATS COLLAPSE SECTION -->
<div class="p-2">
<div class="card border-0 pt-1" style="background: none;">
<a data-toggle="collapse" data-target="#stats" class="text-uppercase" style="font-size: 20px; font-weight: 300; font-family: Courier New, monospace;" aria-expanded="true">Stats
<span class="pull-right"><i class="fal fa-stars"></i></span></a>
<div style="border-top: double 6px; font-size: 15px; color: #ccc;"></div>
</div>
<div id="stats" class="collapse show" data-parent="#expand">
<div class="pt-1 pb-1 pl-3 pr-3 pl-lg-1 pr-lg-1" style="height: 285px; overflow: auto;">
<!-- CHARISMA STAT -->
<div class="row no-gutters align-items-center">
<div class="col">
<p>
Charisma
</p>
</div>
<div class="col">
<div class="progress" style="height: 8px;">
<!-- STAT BAR -- CHANGE VALUE FROM 0 TO 100% -->
<div class="progress-bar" style="background: #ccc;
width: 50%
;"></div>
</div>
</div>
</div>
<!-- KINDNESS STAT -->
<div class="row no-gutters align-items-center">
<div class="col">
<p>
Kindness
</p>
</div>
<div class="col">
<div class="progress" style="height: 8px;">
<!-- STAT BAR -- CHANGE VALUE FROM 0 TO 100% -->
<div class="progress-bar" style="background: #ccc;
width: 50%
;"></div>
</div>
</div>
</div>
<!-- PATIENCE STAT -->
<div class="row no-gutters align-items-center">
<div class="col">
<p>
Patience
</p>
</div>
<div class="col">
<div class="progress" style="height: 8px;">
<!-- STAT BAR -- CHANGE VALUE FROM 0 TO 100% -->
<div class="progress-bar" style="background: #ccc;
width: 50%
;"></div>
</div>
</div>
</div>
<!-- INTEGRITY STAT -->
<div class="row no-gutters align-items-center">
<div class="col">
<p>
Integrity
</p>
</div>
<div class="col">
<div class="progress" style="height: 8px;">
<!-- STAT BAR -- CHANGE VALUE FROM 0 TO 100% -->
<div class="progress-bar" style="background: #ccc;
width: 50%
;"></div>
</div>
</div>
</div>
<!-- INTELLECT STAT -->
<div class="row no-gutters align-items-center">
<div class="col">
<p>
Intellect
</p>
</div>
<div class="col">
<div class="progress" style="height: 8px;">
<!-- STAT BAR -- CHANGE VALUE FROM 0 TO 100% -->
<div class="progress-bar" style="background: #ccc;
width: 50%
;"></div>
</div>
</div>
</div>
<!-- MATURITY STAT -->
<div class="row no-gutters align-items-center">
<div class="col">
<p>
Maturity
</p>
</div>
<div class="col">
<div class="progress" style="height: 8px;">
<!-- STAT BAR -- CHANGE VALUE FROM 0 TO 100% -->
<div class="progress-bar" style="background: #ccc;
width: 50%
;"></div>
</div>
</div>
</div>
<!-- COURAGE STAT -->
<div class="row no-gutters align-items-center">
<div class="col">
<p>
Courage
</p>
</div>
<div class="col">
<div class="progress" style="height: 8px;">
<!-- STAT BAR -- CHANGE VALUE FROM 0 TO 100% -->
<div class="progress-bar" style="background: #ccc;
width: 50%
;"></div>
</div>
</div>
</div>
<!-- HUMOUR STAT -->
<div class="row no-gutters align-items-center">
<div class="col">
<p>
Humour
</p>
</div>
<div class="col">
<div class="progress" style="height: 8px;">
<!-- STAT BAR -- CHANGE VALUE FROM 0 TO 100% -->
<div class="progress-bar" style="background: #ccc;
width: 50%
;"></div>
</div>
</div>
</div>
<!-- TEMPER STAT -->
<div class="row no-gutters align-items-center">
<div class="col">
<p>
Temper
</p>
</div>
<div class="col">
<div class="progress" style="height: 8px;">
<!-- STAT BAR -- CHANGE VALUE FROM 0 TO 100% -->
<div class="progress-bar" style="background: #ccc;
width: 50%
;"></div>
</div>
</div>
</div>
<div class="row no-gutters mt-2">
<!-- LIKES CONTENT -->
<div class="col mr-1 bg-faded">
<p class="text-uppercase p-1" style="color: #ccc;">
Likes
<span class="pull-right"><i class="far fa-heartbeat"></i></span></i></p>
<ul class="list-group ml-4 pb-2">
<li class="list-item">Content</li>
<li class="list-item">Content</li>
<li class="list-item">Content</li>
<li class="list-item">Content</li>
</ul>
</div>
<!-- DISLIKES CONTENT -->
<div class="col bg-faded">
<p class="text-uppercase p-1" style="color: #ccc;">
Dislikes
<span class="pull-right"><i class="far fa-heart-crack"></i></span></i></p>
<ul class="list-group ml-4 pb-2">
<li class="list-item">Content</li>
<li class="list-item">Content</li>
<li class="list-item">Content</li>
<li class="list-item">Content</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- STORY COLLAPSE SECTION -->
<div class="p-2">
<div class="card border-0" style="background: none;">
<a data-toggle="collapse" data-target="#bio" class="text-uppercase" style="font-size: 20px; font-weight: 300; font-family: Courier New, monospace;" aria-expanded="true">
Story
<span class="pull-right"><i class="fal fa-scroll fa-flip-horizontal"></i></span></a>
<div style="border-top: double 6px; font-size: 15px; color: #ccc;"></div>
</div>
<div id="bio" class="collapse" data-parent="#expand">
<div class="pt-1 pb-1 pr-2 text-justify" style="height: 285px; overflow: auto;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo risus, mattis sed lorem sed, consequat varius libero. Fusce posuere consequat enim at dapibus. Nunc vulputate eros ut iaculis vestibulum. Sed libero diam, finibus at augue sit amet, cursus dictum ipsum.</p>
<p class="text-uppercase" style="color: #ccc;">Subheader<span class="pull-left mr-1"><i class="far fa-bookmark"></i></span></p>
<hr class="mt-n3 mb-1" style="border-top: double 3px #ccc;">
<p>Nunc sit amet tellus sed nisl hendrerit ultricies. Ut dignissim ex eget arcu condimentum, ut interdum metus condimentum. Curabitur ut tortor sit amet augue molestie tempus. Quisque laoreet consequat mi sollicitudin porttitor. Nulla nunc elit, tempor eu tellus nec, sollicitudin scelerisque dolor. Fusce at orci vel sapien mollis luctus vitae quis erat. Donec lacinia nibh et turpis feugiat, vitae laoreet mauris interdum.</p>
<p class="text-uppercase" style="color: #ccc;">Subheader<span class="pull-left mr-1"><i class="far fa-bookmark"></i></span></p>
<hr class="mt-n3 mb-1" style="border-top: double 3px #ccc;">
<p>Aliquam ante odio, sodales nec tortor ac, volutpat volutpat est. Donec ut interdum mauris. Cras hendrerit neque placerat massa tincidunt tempus. Etiam tempor, libero ut vestibulum tincidunt, ligula dui accumsan ligula, ac scelerisque sapien nisi non ex. Proin vitae elementum nunc, in semper libero. Praesent tincidunt lectus sed molestie feugiat. Quisque sapien mi, viverra quis neque eu, rhoncus malesuada nulla. Proin malesuada eros ac sem vehicula, in eleifend lorem consequat.</p>
</div>
</div>
</div>
<!-- RELATIONS COLLAPSE SECTION -->
<div class="p-2">
<div class="card border-0" style="background: none;">
<a data-toggle="collapse" data-target="#links" class="text-uppercase" style="font-size: 20px; font-weight: 300; font-family: Courier New, monospace;" aria-expanded="true">
Relations
<span class="pull-right"><i class="fal fa-link"></i></span></a>
<div style="border-top: double 6px; font-size: 15px; color: #ccc;"></div>
</div>
<div id="links" class="collapse" data-parent="#expand">
<div class="pt-1 pb-1 pl-3 pr-3 pl-lg-1 pr-lg-1" style="height: 285px; overflow: auto;">
<!-- (LEFT) RELATIONSHIP CARD START -->
<div class="row no-gutters pt-1 pb-2">
<!-- CHARACTER IMAGE == INSERT YOUR LINK INSTEAD OF "URLHERE" -->
<img class="d-block float-lg-left " style=" height: 125px; width: 100px; object-fit: cover; object-position: center"
src="URLHERE">
<div class="col p-0">
<!-- CHARACTER LINK == INSERT YOUR LINK INSTEAD OF "LINK_HERE" -->
<a style="color: #ccc;"
href="LINK_HERE"
><p class="ml-2 text-uppercase">
Character name
</p></a>
<hr class="mt-n3 ml-2 mb-1" style="border-top: double 3px #ccc;">
<p class="ml-2 small text-uppercase">
[ relationship ]
</p>
<!-- AFFECTION BAR -->
<div class="row no-gutters align-items-center">
<div class="col pl-2">
<p>
Affection
</p>
</div>
<div class="col">
<div class="progress" style="height: 8px;">
<!-- STAT BAR -- CHANGE VALUE FROM 0 TO 100% -->
<div class="progress-bar" style="background: #ccc;
width: 50%
;"></div>
</div>
</div>
</div>
<!-- RESPECT BAR -->
<div class="row no-gutters align-items-center">
<div class="col pl-2">
<p>
Respect
</p>
</div>
<div class="col">
<div class="progress" style="height: 8px;">
<!-- STAT BAR -- CHANGE VALUE FROM 0 TO 100% -->
<div class="progress-bar" style="background: #ccc;
width: 50%
;"></div>
</div>
</div>
</div>
<!-- TRUST BAR -->
<div class="row no-gutters align-items-center">
<div class="col pl-2">
<p>
Trust
</p>
</div>
<div class="col">
<div class="progress" style="height: 8px;">
<!-- STAT BAR -- CHANGE VALUE FROM 0 TO 100% -->
<div class="progress-bar" style="background: #ccc;
width: 50%
;"></div>
</div>
</div>
</div>
<!-- COMFORT BAR -->
<div class="row no-gutters align-items-center">
<div class="col pl-2">
<p>
Comfort
</p>
</div>
<div class="col">
<div class="progress" style="height: 8px;">
<!-- STAT BAR -- CHANGE VALUE FROM 0 TO 100% -->
<div class="progress-bar" style="background: #ccc;
width: 50%
;"></div>
</div>
</div>
</div>
<!-- CARENESS BAR -->
<div class="row no-gutters align-items-center">
<div class="col pl-2">
<p>
Careness
</p>
</div>
<div class="col">
<div class="progress" style="height: 8px;">
<!-- STAT BAR -- CHANGE VALUE FROM 0 TO 100% -->
<div class="progress-bar" style="background: #ccc;
width: 50%
;"></div>
</div>
</div>
</div>
</div>
</div>
<!--=========================-->
<!-- (RIGHT) RELATIONSHIP CARD START -->
<div class="row no-gutters pt-1 pb-2">
<div class="col pr-2">
<!-- CHARACTER LINK == INSERT YOUR LINK INSTEAD OF "LINK_HERE" -->
<a style="color: #ccc;"
href="LINK_HERE"
><p class="text-uppercase">
Character name
</p></a>
<hr class="mt-n3 ml- mb-1" style="border-top: double 3px #ccc;">
<p class="small text-uppercase">
[ relationship ]
</p>
<!-- AFFECTION BAR -->
<div class="row no-gutters align-items-center">
<div class="col pr-2">
<p>
Affection
</p>
</div>
<div class="col">
<div class="progress" style="height: 8px;">
<!-- STAT BAR -- CHANGE VALUE FROM 0 TO 100% -->
<div class="progress-bar" style="background: #ccc;
width: 50%
;"></div>
</div>
</div>
</div>
<!-- RESPECT BAR -->
<div class="row no-gutters align-items-center">
<div class="col pr-2">
<p>
Respect
</p>
</div>
<div class="col">
<div class="progress" style="height: 8px;">
<!-- STAT BAR -- CHANGE VALUE FROM 0 TO 100% -->
<div class="progress-bar" style="background: #ccc;
width: 50%
;"></div>
</div>
</div>
</div>
<!-- TRUST BAR -->
<div class="row no-gutters align-items-center">
<div class="col pr-2">
<p>
Trust
</p>
</div>
<div class="col">
<div class="progress" style="height: 8px;">
<!-- STAT BAR -- CHANGE VALUE FROM 0 TO 100% -->
<div class="progress-bar" style="background: #ccc;
width: 50%
;"></div>
</div>
</div>
</div>
<!-- COMFORT BAR -->
<div class="row no-gutters align-items-center">
<div class="col pr-2">
<p>
Comfort
</p>
</div>
<div class="col">
<div class="progress" style="height: 8px;">
<!-- STAT BAR -- CHANGE VALUE FROM 0 TO 100% -->
<div class="progress-bar" style="background: #ccc;
width: 50%
;"></div>
</div>
</div>
</div>
<!-- CARENESS BAR -->
<div class="row no-gutters align-items-center">
<div class="col pr-2">
<p>
Careness
</p>
</div>
<div class="col">
<div class="progress" style="height: 8px;">
<!-- STAT BAR -- CHANGE VALUE FROM 0 TO 100% -->
<div class="progress-bar" style="background: #ccc;
width: 50%
;"></div>
</div>
</div>
</div>
</div>
<!-- CHARACTER IMAGE == INSERT YOUR LINK INSTEAD OF "URLHERE" -->
<img class="d-block float-lg-right" style=" height: 125px; width: 100px; object-fit: cover; object-position: center"
src="URLHERE">
</div>
<!--=========================-->
<!-- (LEFT) RELATIONSHIP CARD START -->
<div class="row no-gutters pt-1 pb-2">
<!-- CHARACTER IMAGE == INSERT YOUR LINK INSTEAD OF "URLHERE" -->
<img class="d-block float-lg-left " style=" height: 125px; width: 100px; object-fit: cover; object-position: center"
src="URLHERE">
<div class="col p-0">
<!-- CHARACTER LINK == INSERT YOUR LINK INSTEAD OF "LINK_HERE" -->
<a style="color: #ccc;"
href="LINK_HERE"
><p class="ml-2 text-uppercase">
Character name
</p></a>
<hr class="mt-n3 ml-2 mb-1" style="border-top: double 3px #ccc;">
<p class="ml-2 small text-uppercase">
[ relationship ]
</p>
<!-- AFFECTION BAR -->
<div class="row no-gutters align-items-center">
<div class="col pl-2">
<p>
Affection
</p>
</div>
<div class="col">
<div class="progress" style="height: 8px;">
<!-- STAT BAR -- CHANGE VALUE FROM 0 TO 100% -->
<div class="progress-bar" style="background: #ccc;
width: 50%
;"></div>
</div>
</div>
</div>
<!-- RESPECT BAR -->
<div class="row no-gutters align-items-center">
<div class="col pl-2">
<p>
Respect
</p>
</div>
<div class="col">
<div class="progress" style="height: 8px;">
<!-- STAT BAR -- CHANGE VALUE FROM 0 TO 100% -->
<div class="progress-bar" style="background: #ccc;
width: 50%
;"></div>
</div>
</div>
</div>
<!-- TRUST BAR -->
<div class="row no-gutters align-items-center">
<div class="col pl-2">
<p>
Trust
</p>
</div>
<div class="col">
<div class="progress" style="height: 8px;">
<!-- STAT BAR -- CHANGE VALUE FROM 0 TO 100% -->
<div class="progress-bar" style="background: #ccc;
width: 50%
;"></div>
</div>
</div>
</div>
<!-- COMFORT BAR -->
<div class="row no-gutters align-items-center">
<div class="col pl-2">
<p>
Comfort
</p>
</div>
<div class="col">
<div class="progress" style="height: 8px;">
<!-- STAT BAR -- CHANGE VALUE FROM 0 TO 100% -->
<div class="progress-bar" style="background: #ccc;
width: 50%
;"></div>
</div>
</div>
</div>
<!-- CARENESS BAR -->
<div class="row no-gutters align-items-center">
<div class="col pl-2">
<p>
Careness
</p>
</div>
<div class="col">
<div class="progress" style="height: 8px;">
<!-- STAT BAR -- CHANGE VALUE FROM 0 TO 100% -->
<div class="progress-bar" style="background: #ccc;
width: 50%
;"></div>
</div>
</div>
</div>
</div>
</div>
<!--=========================-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- CREDIT -- DO NOT REMOVE!-->
<div class="row no-gutters">
<div class="col-9 mt-2" style="border-top: double 6px; font-size: 15px; color: white;"></div>
<div class="row no-gutters">
<a href="https://toyhou.se/SpiritX" title="Layout mockup by SpiritX" class="text-center text-white tooltipster" style=""><i class="far fa-table-layout pl-1 pr-1 pt-1"></i></a>
<a href="https://toyhou.se/ChiiAka" title="Code by ChiiAka" class="text-center text-white tooltipster" style=""><i class="far fa-code pr-1 pt-1"></i></a>
</div>
<div class="col mt-2" style="border-top: double 6px; font-size: 15px; color: white;"></div>
</div>
</div>
</div>
</div>