Profile
<!--==========================================
[09] MISTY by TOGO
-- -- -- -- -- -- -- -- -- -- -- -- -- --
anything you need to edit should be
tabbed and clearly marked - feel free
to change any elements to your needs!
-- -- -- -- -- -- -- -- -- -- -- -- -- --
this code has 2 custom accent colours;
the easiest way to change them is to
mark one of the colours below, and
then use ctrl+f to find and replace
all instances of it in the code.
accent 1 (originally purple) :
#8f85a5
accent 2 (originally green) :
#4a917b
-- -- -- -- -- -- -- -- -- -- -- -- -- --
> do not use with WYSIWYG on, it will
break the code.
> keep my credit in.
> direct any questions to my comments,
PMs or discord. thank you!
===========================================-->
<div class="my-lg-4 mx-auto" style="max-width: 800px;">
<!-- HEADER ===============================-->
<div class="mb-3 text-white" style="position: relative; height: 140px;
background-color: #4a917b;
background-image: url(IMAGE URL);
background-size: 70%; background-position: right center; background-repeat: no-repeat; background-blend-mode: luminosity;">
<div class="d-flex align-items-end w-100 h-100 p-3 pb-5 pb-lg-3" style="position: absolute;
background-image: linear-gradient(to right, #8f85a5 30%, rgba(0,0,0,0));">
<!-- gradient overlay. just replace the hex colour, leave everything else as is! -->
<p class="font-italic" style="font-family: 'Courier New'; font-size: 28px; letter-spacing: 2px; mix-blend-mode: screen;">
<span style="color: #8f85a5;">N</span>ame <span style="color: #8f85a5;">S</span>urname
<!-- name. make sure to separate the first letters like above! -->
</h1>
</div>
</div>
<div class="row no-gutters flex-lg-row-reverse">
<!-- SIDEBAR ==============================-->
<div class="col-lg-4">
<div class="mt-n4 p-3">
<div class="card mt-n5 mb-n4 p-2 border-0 rounded-0" style="z-index: 1;">
<hr class="w-100 mt-0 mb-2" style="border-top-width: 2px; border-style: dashed;">
<img class="card mx-1 bg-faded rounded-0" style="border-width: 2px;"
src="IMAGE URL">
<hr class="w-100 mt-2 mb-0" style="border-top-width: 2px; border-style: dashed;">
</div>
</div>
<div class="card p-3 pt-4 bg-faded border-0 rounded-0">
<p class="mb-3 text-center font-italic">
a little blurb goes here.
</p>
<!-- FIELDS ==================================
> you can copy + paste or remove as many
fields as you'd like ! the tabs will
grow to fit the sidebar ovo) b
===========================================-->
<div class="row no-gutters align-items-center">
<div class="col-auto mr-2" style="color: #8f85a5;">
<i class="fal fa-signature" style="width: 20px;"></i>
</div>
<div class="col" style="font-family: 'Courier New';">
NICKNAME
</div>
<div class="col-auto ml-auto pl-2">
[ Content ]
</div>
</div>
<hr class="w-100 my-2">
<!--=======================================-->
<div class="row no-gutters align-items-center">
<div class="col-auto mr-2" style="color: #8f85a5;">
<i class="fal fa-calendar-alt" style="width: 20px;"></i>
</div>
<div class="col" style="font-family: 'Courier New';">
AGE
</div>
<div class="col-auto ml-auto pl-2">
[ Content ]
</div>
</div>
<hr class="w-100 my-2">
<!--=======================================-->
<div class="row no-gutters align-items-center">
<div class="col-auto mr-2" style="color: #8f85a5;">
<i class="fal fa-birthday-cake" style="width: 20px;"></i>
</div>
<div class="col" style="font-family: 'Courier New';">
D.O.B.
</div>
<div class="col-auto ml-auto pl-2">
[ Content ]
</div>
</div>
<hr class="w-100 my-2">
<!--=======================================-->
<div class="row no-gutters align-items-center">
<div class="col-auto mr-2" style="color: #8f85a5;">
<i class="fal fa-venus-mars" style="width: 20px;"></i>
</div>
<div class="col" style="font-family: 'Courier New';">
GENDER
</div>
<div class="col-auto ml-auto pl-2">
[ Content ]
</div>
</div>
<hr class="w-100 my-2">
<!--=======================================-->
<div class="row no-gutters align-items-center">
<div class="col-auto mr-2" style="color: #8f85a5;">
<i class="fal fa-comments-alt" style="width: 20px;"></i>
</div>
<div class="col" style="font-family: 'Courier New';">
PROUNOUNS
</div>
<div class="col-auto ml-auto pl-2">
[ Content ]
</div>
</div>
<hr class="w-100 my-2">
<!--=======================================-->
<div class="row no-gutters align-items-center">
<div class="col-auto mr-2" style="color: #8f85a5;">
<i class="fal fa-heart" style="width: 20px;"></i>
</div>
<div class="col" style="font-family: 'Courier New';">
ORIENTATION
</div>
<div class="col-auto ml-auto pl-2">
[ Content ]
</div>
</div>
<hr class="w-100 my-2">
<!--=======================================-->
<div class="row no-gutters align-items-center">
<div class="col-auto mr-2" style="color: #8f85a5;">
<i class="fal fa-paw" style="width: 20px;"></i>
</div>
<div class="col" style="font-family: 'Courier New';">
SPECIES
</div>
<div class="col-auto ml-auto pl-2">
[ Content ]
</div>
</div>
<hr class="w-100 my-2">
<!--=======================================-->
<div class="row no-gutters align-items-center">
<div class="col-auto mr-2" style="color: #8f85a5;">
<i class="fal fa-globe" style="width: 20px;"></i>
</div>
<div class="col" style="font-family: 'Courier New';">
NATIONALITY
</div>
<div class="col-auto ml-auto pl-2">
[ Content ]
</div>
</div>
<hr class="w-100 my-2">
<!--=======================================-->
<div class="row no-gutters align-items-center">
<div class="col-auto mr-2" style="color: #8f85a5;">
<i class="fal fa-home" style="width: 20px;"></i>
</div>
<div class="col" style="font-family: 'Courier New';">
RESIDENCE
</div>
<div class="col-auto ml-auto pl-2">
[ Content ]
</div>
</div>
<hr class="w-100 my-2">
<!--=======================================-->
<div class="row no-gutters align-items-center">
<div class="col-auto mr-2" style="color: #8f85a5;">
<i class="fal fa-briefcase" style="width: 20px;"></i>
</div>
<div class="col" style="font-family: 'Courier New';">
OCCUPATION
</div>
<div class="col-auto ml-auto pl-2">
[ Content ]
</div>
</div>
<hr class="w-100 my-2">
<!--=======================================-->
<div class="row no-gutters align-items-center">
<div class="col-auto mr-2" style="color: #8f85a5;">
<i class="fal fa-music" style="width: 20px;"></i>
</div>
<div class="col" style="font-family: 'Courier New';">
THEME
</div>
<div class="col-auto ml-auto pl-2">
[ <a href="https://www.youtube.com/watch?v=fEOSiZMiZiA" target="_blank" style="color: #4a917b;">Song Name</a> ]
</div>
</div>
<!--=======================================-->
</div>
<!-- CREDIT ===============================-->
<div class="d-flex justify-content-end align-items-center px-3" style="height: 40px; background-color: #4a917b;">
<a href="https://toyhou.se/Togo" class="text-white"><i class="fal fa-code"></i></a>
</div>
</div>
<!-- TABS =================================-->
<div class="col-lg flex-column mr-lg-3">
<div id="tabs" class="tab-content d-block d-lg-flex flex-column" style="flex: 1 1 0;">
<!-- OVERVIEW TAB =========================-->
<div id="about" class="tab-pane fade show active" style="min-height: 0; flex: 1 1 0;">
<div class="d-block d-lg-flex flex-column h-100">
<!-- QUOTE START ==========================-->
<div class="card mb-2 p-3 text-center bg-faded border-0 rounded-0">
<div class="flex-row" style="flex-wrap: no-wrap!important;">
<div class="col-auto p-0">
<i class="fad fa-quote-left" style="color: #8f85a5;"></i>
</div>
<div class="col-auto flex-shrink-1 mr-auto px-3 font-italic text-uppercase" style="font-family: 'Courier New'; font-size: 16px;">
Start of a quote...
</div>
<div class="col-auto align-self-end p-0">
<i class="fad fa-quote-right" style="color: #4a917b;"></i>
</div>
</div>
</div>
<!-- MOODBOARD ============================-->
<div class="row no-gutters align-items-start mx-lg-n1 mb-2">
<div class="col-6 col-lg mx-lg-1 p-1 bg-faded">
<div style="padding-bottom: 100%;
background-image: url(IMAGE URL);
background-size: cover; background-position: center;"></div>
</div>
<div class="col-6 col-lg mx-lg-1 p-1 bg-faded">
<div style="padding-bottom: 100%;
background-image: url(IMAGE URL);
background-size: cover; background-position: center;"></div>
</div>
<div class="col-6 col-lg mx-lg-1 p-1 bg-faded">
<div style="padding-bottom: 100%;
background-image: url(IMAGE URL);
background-size: cover; background-position: center;"></div>
</div>
<div class="col-6 col-lg mx-lg-1 p-1 bg-faded">
<div style="padding-bottom: 100%;
background-image: url(IMAGE URL);
background-size: cover; background-position: center;"></div>
</div>
</div>
<div class="row no-gutters" style="flex: 1 1 0;">
<!-- PAGEDOLL =============================-->
<div class="col-lg-5 d-block d-lg-flex flex-column mb-2 mb-lg-0 mr-lg-2">
<div style="flex: 1 1 0; height: 450px;
background-image: url(IMAGE URL);
/* | a transparent image looks best ! */;
background-size: contain; background-position: center; background-repeat: no-repeat;"></div>
</div>
<!-- TEXT BLOCK ===========================-->
<div class="col-lg d-block d-lg-flex flex-column">
<hr class="w-100 mt-0 mb-2" style="border-style: dashed; border-top-width: 2px;">
<div class="card mb-2 p-3 text-justify bg-faded border-0 rounded-0" style="flex: 1 1 0; overflow-y: auto;">
<p>
<i class="fal fa-pencil mr-2" style="color: #8f85a5;"></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean placerat vel orci viverra tristique. Nulla facilisi. Cras elementum eu ligula sed fringilla. Cras posuere consequat metus, eu suscipit sem consequat eget. Phasellus dictum metus vel massa sollicitudin, id tempus sem fermentum. Mauris lobortis arcu at feugiat rutrum. Vivamus ultrices convallis quam ac commodo.
</p>
<p>
<i class="fal fa-book mr-2" style="color: #8f85a5;"></i>
Nam et vulputate sem. Vivamus in ornare urna. Curabitur nulla mauris, pretium quis convallis at, posuere vitae massa. Mauris fringilla purus id lectus facilisis efficitur. Fusce ac metus vulputate, mattis purus eget, dictum purus. Phasellus rhoncus a nisl quis suscipit. Vestibulum rutrum, massa non vehicula finibus, mauris nisi viverra tellus, ut molestie nibh quam eget elit. Proin vitae rutrum ligula. Sed leo massa, ornare ac massa non, condimentum aliquet nunc. Quisque neque libero, eleifend sit amet dolor vel, pretium scelerisque arcu. Ut sit amet nisi leo. Aenean condimentum dignissim convallis. Suspendisse egestas risus elit, id fermentum orci suscipit auctor. In nec posuere sapien. In in convallis metus, at finibus nisi. Curabitur ac elit ut est porttitor tincidunt ut id erat.
</p>
</div>
<!-- QUOTE END ============================-->
<div class="card p-3 text-center bg-faded border-0 rounded-0">
<div class="flex-row" style="flex-wrap: no-wrap!important;">
<div class="col-auto p-0">
<i class="fad fa-quote-left" style="color: #8f85a5;"></i>
</div>
<div class="col-auto flex-shrink-1 ml-auto px-3 font-italic text-uppercase" style="font-family: 'Courier New'; font-size: 16px;">
...end of quote.
</div>
<div class="col-auto align-self-end p-0">
<i class="fad fa-quote-right" style="color: #4a917b;"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- PERSONALITY TAB ======================-->
<div id="persona" class="tab-pane fade" style="flex: 1 1 0; min-height: 0;">
<div class="d-block d-lg-flex flex-column h-100">
<div class="card mb-2 p-3 text-right font-italic text-uppercase bg-faded border-0 rounded-0" style="font-family: 'Courier New'; font-size: 16px;">
adjective, adjective, adjective.
</div>
<div class="row no-gutters" style="flex: 1 1 0;">
<div class="col-lg-4 align-self-center">
<div class="mb-2 p-1 text-muted">
<p>
<span class="font-italic text-uppercase" style="font-family: 'Courier New'; font-size: 18px; color: #8f85a5; line-height: 1em;">
Likes:
</span>
content, content, content. you can keep listing their likes for a while, but this box will not scroll so don't add massive amounts!
</p>
</div>
</div>
<div class="col-lg-auto mt-2 mt-lg-0 mx-lg-2 mb-2">
<div class="card h-100 border-left-0 border-bottom-0" style="border-width: 2px; border-style: dashed;"></div>
</div>
<!-- ABOUT ================================-->
<div class="col-lg d-block d-lg-flex flex-column">
<div class="card mb-2 p-3 text-justify bg-faded border-0 rounded-0" style="flex: 1 1 0; overflow-y: auto;">
<p class="mb-1 font-italic text-uppercase" style="font-family: 'Courier New'; font-size: 18px; color: #4a917b;">
About
</p>
<p>
Morbi facilisis nisi tincidunt, ornare dui nec, laoreet nisi. Aliquam tortor mi, porta sed lorem nec, scelerisque varius lacus. Donec convallis elit massa, sed fringilla augue volutpat eu. Ut ut diam vitae quam ultrices commodo at quis nunc. Curabitur vel luctus dolor.
</p>
<p>
Mauris aliquam porttitor enim, et pellentesque eros ornare non. Suspendisse feugiat a orci a condimentum. Maecenas faucibus efficitur porta. Integer porttitor tincidunt ultricies. Aliquam aliquet laoreet lectus, faucibus tincidunt justo luctus ac. Nam enim magna, congue a scelerisque vel, vestibulum vitae ex. Integer et magna pellentesque, eleifend neque ac, auctor ante.
</p>
<p>
Vestibulum lorem velit, venenatis vitae consequat eu, mattis mattis augue. Cras a diam enim. Aliquam erat volutpat. Fusce sit amet mauris quis justo varius pellentesque vulputate non nisl. Nam ultrices orci leo, ultricies ullamcorper dui placerat sit amet. Vivamus eu varius dolor. Aenean finibus sollicitudin orci, non pretium sem congue id. Nam vel est commodo, tempus libero et, eleifend ante.
</p>
</div>
</div>
</div>
<!-- STATS ================================-->
<div class="card mb-2 p-3 bg-faded border-0 rounded-0">
<div class="row no-gutters mx-n3 text-right">
<!--=======================================-->
<div class="col-lg-6 px-3">
<span class="font-italic text-uppercase float-left" style="font-family: 'Courier New';">
Charisma
</span>
<span style="color: #8f85a5;">
<!-- stat icons. fas means filled, fal means empty -->
<i class="fas fa-diamond"></i>
<i class="fas fa-diamond"></i>
<i class="fas fa-diamond"></i>
<i class="fal fa-diamond"></i>
<i class="fal fa-diamond"></i>
</span>
</div>
<!--=======================================-->
<div class="col-lg-6 px-3">
<span class="font-italic text-uppercase float-left" style="font-family: 'Courier New';">
Kindness
</span>
<span style="color: #8f85a5;">
<i class="fas fa-diamond"></i>
<i class="fas fa-diamond"></i>
<i class="fas fa-diamond"></i>
<i class="fal fa-diamond"></i>
<i class="fal fa-diamond"></i>
</span>
</div>
<!--=======================================-->
<div class="col-lg-6 px-3">
<span class="font-italic text-uppercase float-left" style="font-family: 'Courier New';">
Temper
</span>
<span style="color: #8f85a5;">
<i class="fas fa-diamond"></i>
<i class="fas fa-diamond"></i>
<i class="fas fa-diamond"></i>
<i class="fal fa-diamond"></i>
<i class="fal fa-diamond"></i>
</span>
</div>
<!--=======================================-->
<div class="col-lg-6 px-3">
<span class="font-italic text-uppercase float-left" style="font-family: 'Courier New';">
Honesty
</span>
<span style="color: #8f85a5;">
<i class="fas fa-diamond"></i>
<i class="fas fa-diamond"></i>
<i class="fas fa-diamond"></i>
<i class="fal fa-diamond"></i>
<i class="fal fa-diamond"></i>
</span>
</div>
<!--=======================================-->
<div class="col-lg-6 px-3">
<span class="font-italic text-uppercase float-left" style="font-family: 'Courier New';">
Intellect
</span>
<span style="color: #8f85a5;">
<i class="fas fa-diamond"></i>
<i class="fas fa-diamond"></i>
<i class="fas fa-diamond"></i>
<i class="fal fa-diamond"></i>
<i class="fal fa-diamond"></i>
</span>
</div>
<!--=======================================-->
<div class="col-lg-6 px-3">
<span class="font-italic text-uppercase float-left" style="font-family: 'Courier New';">
Humour
</span>
<span style="color: #8f85a5;">
<i class="fas fa-diamond"></i>
<i class="fas fa-diamond"></i>
<i class="fas fa-diamond"></i>
<i class="fal fa-diamond"></i>
<i class="fal fa-diamond"></i>
</span>
</div>
<!--=======================================-->
</div>
</div>
<div class="row no-gutters" style="flex: 1 1 0;">
<!-- PERSONALITY ==========================-->
<div class="col-lg d-block d-lg-flex flex-column">
<div class="card p-3 text-justify bg-faded border-0 rounded-0" style="flex: 1 1 0; overflow-y: auto;">
<p class="mb-1 font-italic text-uppercase" style="font-family: 'Courier New'; font-size: 18px; color: #8f85a5;">
Personality
</p>
<p>
Praesent ac sem id tortor cursus vehicula. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas cursus lectus sem, in tincidunt metus venenatis non. In venenatis mauris vel lectus sagittis mattis. Curabitur ullamcorper leo id dignissim aliquam. Integer non varius metus, ut interdum nisi. Suspendisse purus eros, eleifend a sem sit amet, sodales posuere arcu. Nulla facilisi. In cursus arcu vitae urna tempus ultricies. Suspendisse fermentum dolor vel turpis tempus, quis cursus mauris imperdiet. Pellentesque leo enim, venenatis sed sem sed, sollicitudin vulputate nulla.
</p>
<p>
Morbi eget lectus feugiat, dignissim turpis eget, mattis urna. In hac habitasse platea dictumst. Nam vehicula imperdiet massa. Aliquam efficitur eros eu condimentum aliquet. Vestibulum blandit, tortor quis blandit tristique, quam massa vehicula justo, quis cursus felis magna id urna. Sed rutrum nunc lectus, quis vehicula tellus facilisis quis. Duis tellus erat, iaculis at euismod a, eleifend ac nisl. Pellentesque consequat dolor sit amet eleifend vehicula. Donec vitae hendrerit ipsum. Fusce nisi purus, vehicula nec tincidunt sit amet, fringilla vitae ex. Sed dictum turpis eget nunc fringilla volutpat. Sed venenatis ac erat sit amet lacinia. Donec gravida ac purus vitae ullamcorper.
</p>
</div>
</div>
<div class="col-lg-auto mt-2 mt-lg-0 mx-lg-2 mb-2">
<div class="card h-100 border-left-0 border-bottom-0" style="border-width: 2px; border-style: dashed;"></div>
</div>
<div class="col-lg-4 align-self-center">
<div class="p-1 text-muted">
<p>
<span class="font-italic text-uppercase" style="font-family: 'Courier New'; font-size: 18px; color: #4a917b; line-height: 1em;">
Dislikes:
</span>
content, content, content.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- DESIGN TAB ===========================-->
<div id="design" class="tab-pane fade" style="min-height: 0; flex: 1 1 0;">
<!-- IMAGE ===================================
> a tall, transparent image looks best !
> the image will be cropped on mobile,
so this is more for decoration over
information! you'll be able to link
a full reference further down.
===========================================-->
<div class="d-block d-lg-flex flex-column justify-content-end h-100" style="position: relative;">
<img
src="IMAGE URL"
class="h-100" style="position: absolute; top: 0; object-fit: contain;">
<div class="row no-gutters justify-content-end" style="flex: 1 1 0; min-height: 0;">
<div class="col-lg-4 d-block d-lg-flex flex-column justify-content-end h-100">
<!-- PALETTE ==============================-->
<div class="card mb-2 p-1 mt-lg-0 bg-faded border-0 rounded-0" style="margin-top: 600px;">
<div class="row no-gutters" style="height: 30px;">
<!-- you can add or remove palette blocks as you like. just change background-color to edit the colours ! -->
<div class="col" style="background-color: #cccccc;"></div>
<div class="col" style="background-color: #aaaaaa;"></div>
<div class="col" style="background-color: #999999;"></div>
<div class="col" style="background-color: #777777;"></div>
<div class="col" style="background-color: #555555;"></div>
</div>
</div>
<!-- NOTES ================================-->
<div class="card justify-content-center mb-2 p-3 bg-faded border-0 rounded-0" style="flex: 0 1 auto; overflow-y: auto;">
<p>
<i class="fal fa-marker mr-1" style="color: #8f85a5;"></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
<i class="fal fa-ruler mr-1" style="color: #8f85a5;"></i>
Morbi ac nisl leo. Proin mollis sodales eros, id congue arcu tincidunt at.
</p>
<p>
<i class="fal fa-paint-roller mr-1" style="color: #8f85a5;"></i>
Mauris leo leo, dictum eu rutrum a, mollis eget urna. Duis nec mollis dui, a ornare dolor.
</p>
</div>
<hr class="w-100 mt-0 mb-2" style="border-style: dashed; border-top-width: 2px;">
</div>
</div>
<!-- INFO =================================-->
<div class="card mb-2 p-3 bg-faded border-0 rounded-0">
<div class="row">
<!--=======================================-->
<div class="col-lg-4">
<p class="mb-0" style="font-size: 10px;">
HEIGHT
</p>
<p style="font-size: 16px;">
Content
</p>
</div>
<!--=======================================-->
<div class="col-lg-4">
<p class="mb-0" style="font-size: 10px;">
BUILD
</p>
<p style="font-size: 16px;">
Content
</p>
</div>
<!--=======================================-->
<div class="col-lg-4">
<p class="mb-0" style="font-size: 10px;">
DESIGNER
</p>
<p style="font-size: 16px;">
<a href="DESIGNER URL" style="color: #4a917b;">
Designer Name
</a>
</p>
</div>
<!--=======================================-->
</div>
</div>
<div class="row no-gutters" style="font-family: 'Courier New';">
<div class="col-auto" style="background-color: #8f85a5;">
<a href="FULL REFERENCE URL"
class="btn btn-outline-warning d-flex align-items-center h-100 text-dark border-0 rounded-0" style="box-shadow: none; mix-blend-mode: luminosity;">
<i class="fal fa-image-polaroid mx-1"></i>
</a>
</div>
<div class="col">
<div class="card p-3 bg-faded border-0 rounded-0">
<div class="row no-gutters justify-content-between">
<div class="col-auto">
OBTAINED VIA [ <span style="color: #8f85a5;">creation</span> ]
</div>
<div class="col-auto">
WORTH [ <span style="color: #4a917b;">$0</span> ]
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- RELATIONSHIPS TAB ====================-->
<div id="links" class="tab-pane fade p-3 bg-faded" style="flex: 1 1 0; overflow-y: auto;">
<!--=======================================-->
<div class="row no-gutters">
<div class="col-auto mr-3">
<div class="card mb-1 rounded-0" style="border-width: 2px;">
<img
src="IMAGE URL"
style="width: 100px;">
</div>
<p class="text-center" style="color: #8f85a5;">
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fal fa-heart"></i>
<i class="fal fa-heart"></i>
</p>
</div>
<div class="col">
<div class="row no-gutters justify-content-between align-items-center mb-1" style="font-family: 'Courier New';">
<div class="col-auto">
<a href="CHARACTER URL"
style="font-size: 18px; letter-spacing: 1px; color: #8f85a5;">
Name Surname
</a>
</div>
<div class="col-auto pl-2" style="opacity: .4;">
[ relationship ]
</div>
</div>
<p class="pl-2 text-justify">
Relationship blurb. Keep it short! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec efficitur venenatis elit in bibendum. Nunc ut ullamcorper magna. Nam pretium malesuada venenatis.
</p>
</div>
</div>
<hr class="my-3" style="border-style: dashed; border-top-width: 2px;">
<!--=======================================-->
<div class="row no-gutters">
<div class="col-auto mr-3">
<div class="card mb-1 rounded-0" style="border-width: 2px;">
<img
src="IMAGE URL"
style="width: 100px;">
</div>
<p class="text-center" style="color: #8f85a5;">
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fal fa-heart"></i>
<i class="fal fa-heart"></i>
</p>
</div>
<div class="col">
<div class="row no-gutters justify-content-between align-items-center mb-1" style="font-family: 'Courier New';">
<div class="col-auto">
<a href="CHARACTER URL"
style="font-size: 18px; letter-spacing: 1px; color: #8f85a5;">
Name Surname
</a>
</div>
<div class="col-auto pl-2" style="opacity: .4;">
[ relationship ]
</div>
</div>
<p class="pl-2 text-justify">
Relationship blurb. Keep it short! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec efficitur venenatis elit in bibendum. Nunc ut ullamcorper magna. Nam pretium malesuada venenatis.
</p>
</div>
</div>
<hr class="my-3" style="border-style: dashed; border-top-width: 2px;">
<!--=======================================-->
<div class="row no-gutters">
<div class="col-auto mr-3">
<div class="card mb-1 rounded-0" style="border-width: 2px;">
<img
src="IMAGE URL"
style="width: 100px;">
</div>
<p class="text-center" style="color: #8f85a5;">
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fal fa-heart"></i>
<i class="fal fa-heart"></i>
</p>
</div>
<div class="col">
<div class="row no-gutters justify-content-between align-items-center mb-1" style="font-family: 'Courier New';">
<div class="col-auto">
<a href="CHARACTER URL"
style="font-size: 18px; letter-spacing: 1px; color: #8f85a5;">
Name Surname
</a>
</div>
<div class="col-auto pl-2" style="opacity: .4;">
[ relationship ]
</div>
</div>
<p class="pl-2 text-justify">
Relationship blurb. Keep it short! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec efficitur venenatis elit in bibendum. Nunc ut ullamcorper magna. Nam pretium malesuada venenatis.
</p>
</div>
</div>
<hr class="my-3" style="border-style: dashed; border-top-width: 2px;">
<!--=======================================-->
<div class="row no-gutters">
<div class="col-auto mr-3">
<div class="card mb-1 rounded-0" style="border-width: 2px;">
<img
src="IMAGE URL"
style="width: 100px;">
</div>
<p class="text-center" style="color: #8f85a5;">
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fal fa-heart"></i>
<i class="fal fa-heart"></i>
</p>
</div>
<div class="col">
<div class="row no-gutters justify-content-between align-items-center mb-1" style="font-family: 'Courier New';">
<div class="col-auto">
<a href="CHARACTER URL"
style="font-size: 18px; letter-spacing: 1px; color: #8f85a5;">
Name Surname
</a>
</div>
<div class="col-auto pl-2" style="opacity: .4;">
[ relationship ]
</div>
</div>
<p class="pl-2 text-justify">
Relationship blurb. Keep it short! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec efficitur venenatis elit in bibendum. Nunc ut ullamcorper magna. Nam pretium malesuada venenatis.
</p>
</div>
</div>
<!-- MORE RELATIONSHIPS ABOVE THIS LINE ===-->
</div>
</div>
<!-- TAB BUTTONS ==========================-->
<hr class="w-100 my-2" style="border-top-width: 2px; border-style: dashed;">
<ul class="nav row no-gutters font-italic" style="height: 40px; font-family: 'Courier New'; letter-spacing: 1px; background-image: linear-gradient(to right, #8f85a5, #4a917b);">
<li class="nav-item col">
<a href="#about" class="nav-link active btn btn-outline-warning d-flex justify-content-center align-items-center h-100 text-dark border-0 rounded-0" style="box-shadow: none; mix-blend-mode: luminosity;" data-toggle="tab">I.</a>
</li>
<li class="card p-1 border-0 rounded-0"></li>
<li class="nav-item col">
<a href="#persona" class="nav-link btn btn-outline-warning d-flex justify-content-center align-items-center h-100 text-dark border-0 rounded-0" style="box-shadow: none; mix-blend-mode: luminosity;" data-toggle="tab">II.</a>
</li>
<li class="card p-1 border-0 rounded-0"></li>
<li class="nav-item col">
<a href="#design" class="nav-link btn btn-outline-warning d-flex justify-content-center align-items-center h-100 text-dark border-0 rounded-0" style="box-shadow: none; mix-blend-mode: luminosity;" data-toggle="tab">III.</a>
</li>
<li class="card p-1 border-0 rounded-0"></li>
<li class="nav-item col">
<a href="#links" class="nav-link btn btn-outline-warning d-flex justify-content-center align-items-center h-100 text-dark border-0 rounded-0" style="box-shadow: none; mix-blend-mode: luminosity;" data-toggle="tab">IV.</a>
</li>
</ul>
</div>
</div>
</div>
Recent Images
No images.