<!----
JURUKUNCI [F2U] DARK ROUND - graf-palaka original species profile code by rustbqr
not sure if this is that intuitive or easy to edit; i'm a total noob at coding and this is my first time creating a code from scratch... hopefully it's easy enough to understand!
---->
<!----
this code uses custom colours! use ctrl+f to replace these colours if you'd like :D
#302d33 | #111012 | #793f5d | #4e2a44 | #c8bfd7 | #eae7ef
---->
<!---- CODE START | BACKGROUND ---->
<div class="container mx p-2 col-md-11" style="background-color:#111012; border-radius: 20px; z-index: 20; overflow:hidden; box-shadow: 20px 0 0 #793f5d;">
<div class="row no-gutters">
<div class="col-md-5">
<div class="row no-gutters">
<!---- GIF BACKGROUND - replace IMG_URL with gif (or other bg image) ---->
<img src="https://i.pinimg.com/originals/42/4e/06/424e068cc5c322bbe28703f74ef5e1b9.gif" style="z-index:-3; position: relative; width:400px; height:400px; top:20px; left:-20px; object-fit:cover; border-radius: 15px;">
<!---- PAGEDOLL - replace IMG_URL with transparent image, adjust top and left values to move pagedoll ---->
<img src="IMG_URL" style="z-index: -2; position: absolute; max-width:650px; top:30px; left:-90px;">
</div>
<!---- MUSIC PLAYER - replace YOUTUBE_URL with youtube link ---->
<div class="p-2 text-center ml-2 mr-3" style="color:#111012; background:#c8bfd7; border-radius:15px; letter-spacing: 3px; font-family: georgia;">
<div class="row p-1 no-gutters" style="height:50px;">
<a href="YOUTUBE_URL"><i class="col-auto px-3 py-3 fa-solid fa-play fa-1x align-items-center" style="color:#793f5d; background:#c8bfd7"></i></a>
<div class="col pl-0 pr-1 my-auto" style="display:block; color:white">
<div style="font-size:120%; font-weight:700; line-height:1.2; color:#111012">Song Title
</div>
<div style="font-size:90%; color:#111012">Artist
</div>
</div>
<div class="col-auto align-items-center pr-2" style="line-height:0; color:white">
<i class="fa-solid fa-compact-disc fa-2x fa-spin" style="color:#793f5d"></i>
</div>
<hr style="border:none; opacity:0%">
</div>
</div>
</div>
<!---- CONTENT ---->
<div class="col-md-7">
<!---- NAME ---->
<h1 class="mt-3" style="font-family: georgia; letter-spacing: 5px; font-size: 40px; font-weight: 600; color:#c8bfd7">Name</h1>
<div class="font-italic d-flex align-items-center mb-2" style="font-family: georgia; font-size: 18px; letter-spacing:3px; color:#4e2a44;">
[ <b>GRAF - PALAKA</b> ]
<hr class="flex-fill mx-2 my-0" style="background-color:#4e2a44;"> <i class="fa-solid fa-seedling fa-fw"></i>
</div>
<hr style="border:none; opacity:0%">
<div class="col-md-12 p-1" style="height:400px">
<div class="card rounded-0 p-2 px-3" style="background: #111012; border-color: #4e2a44; border-radius:15px; box-shadow: 3px 3px 0 #793f5d; overflow: auto; height: 350px; color: #c8bfd7; font-family: georgia">
<div class="tab-content">
<!---- TAB ONE ---->
<div class="tab-pane fade active show" id="profile">
<!---- HEADER ONE ---->
<div class="row no-gutters" style="font-size: 34px;">
<div class="col-md-12">
<div style="font-weight: bold; letter-spacing: 3px; color: #c8bfd7">
Profile.
<span style="font-family: georgia; font-size: 13px; color:#793f5d; "><i>subtitle.</i></span>
</div>
</div>
</div>
<div class="row no-gutters mb-3">
<hr class="col-5 mt-3" style="background-color: #c8bfd7;">
<div class="col-1 mt-2 text-center"><i class="fa-regular fa-skull" style="color: #793f5d;"></i></div>
<hr class="col-5 mt-3" style="background-color: #c8bfd7;">
</div>
<!---- CONTENT ONE ---->
<div style="overflow: auto; height: 225px">
<div class="row no-gutters">
<!---- FIELDS ---->
<div class="col-6 p-1">
<div class="card border-0 p-2 px-3" style="border-radius:15px; background-color:#eae7ef;">
<div class="font-italic d-flex align-items-center mb-2" style="letter-spacing:1px; color:#302d33;">
name
<hr class="flex-fill mx-2 my-0" style="background-color:#111012; opacity:50%"> <i class="fa-solid fa-leaf fa-fw"></i>
</div>
<div class="faded" style="color:#302d33">
content
</div>
</div>
</div>
<div class="col-6 p-1">
<div class="card border-0 p-2 px-3" style="border-radius:15px; background-color:#c8bfd7;">
<div class="font-italic d-flex align-items-center mb-2" style="letter-spacing:1px; color:#302d33;">
pronouns
<hr class="flex-fill mx-2 my-0" style="background-color:#111012; opacity:50%"> <i class="fa-solid fa-leaf fa-fw"></i>
</div>
<div class="faded" style="color:#302d33">
content
</div>
</div>
</div>
<div class="col-6 p-1">
<div class="card border-0 p-2 px-3" style="border-radius:15px; background-color:#eae7ef;">
<div class="font-italic d-flex align-items-center mb-2" style="letter-spacing:1px; color:#302d33;">
alignment
<hr class="flex-fill mx-2 my-0" style="background-color:#111012; opacity:50%"> <i class="fa-solid fa-leaf fa-fw"></i>
</div>
<div class="faded" style="color:#302d33">
content
</div>
</div>
</div>
<div class="col-6 p-1">
<div class="card border-0 p-2 px-3" style="border-radius:15px; background-color:#c8bfd7;">
<div class="font-italic d-flex align-items-center mb-2" style="letter-spacing:1px; color:#302d33;">
subtype
<hr class="flex-fill mx-2 my-0" style="background-color:#111012; opacity:50%"> <i class="fa-solid fa-leaf fa-fw"></i>
</div>
<div class="faded" style="color:#302d33">
underworld/overworld
</div>
</div>
</div>
<div class="col-6 p-1">
<div class="card border-0 p-2 px-3" style="border-radius:15px; background-color:#eae7ef;">
<div class="font-italic d-flex align-items-center mb-2" style="letter-spacing:1px; color:#302d33;">
birthday
<hr class="flex-fill mx-2 my-0" style="background-color:#111012; opacity:50%"> <i class="fa-solid fa-leaf fa-fw"></i>
</div>
<div class="faded" style="color:#302d33">
content
</div>
</div>
</div>
<div class="col-6 p-1">
<div class="card border-0 p-2 px-3" style="border-radius:15px; background-color:#c8bfd7;">
<div class="font-italic d-flex align-items-center mb-2" style="letter-spacing:1px; color:#302d33;">
height
<hr class="flex-fill mx-2 my-0" style="background-color:#111012; opacity:50%"> <i class="fa-solid fa-leaf fa-fw"></i>
</div>
<div class="faded" style="color:#302d33">
content
</div>
</div>
</div>
<div class="col-6 p-1">
<div class="card border-0 p-2 px-3" style="border-radius:15px; background-color:#eae7ef;">
<div class="font-italic d-flex align-items-center mb-2" style="letter-spacing:1px; color:#302d33;">
species
<hr class="flex-fill mx-2 my-0" style="background-color:#111012; opacity:50%"> <i class="fa-solid fa-leaf fa-fw"></i>
</div>
<div class="faded" style="color:#302d33">
<a style="color:#302d33" href="https://toyhou.se/~world/148833.graf-palaka">graf-palaka</a>
</div>
</div>
</div>
<div class="col-6 p-1">
<div class="card border-0 p-2 px-3" style="border-radius:15px; background-color:#c8bfd7;">
<div class="font-italic d-flex align-items-center mb-2" style="letter-spacing:1px; color:#302d33;">
rarity
<hr class="flex-fill mx-2 my-0" style="background-color:#111012; opacity:50%"> <i class="fa-solid fa-leaf fa-fw"></i>
</div>
<div class="faded" style="color:#302d33">
lumrah/langka/luhur
</div>
</div>
</div>
<div class="col-6 p-1">
<div class="card border-0 p-2 px-3" style="border-radius:15px; background-color:#eae7ef;">
<div class="font-italic d-flex align-items-center mb-2" style="letter-spacing:1px; color:#302d33;">
masterlist
<hr class="flex-fill mx-2 my-0" style="background-color:#111012; opacity:50%"> <i class="fa-solid fa-leaf fa-fw"></i>
</div>
<div class="faded" style="color:#302d33">
<a style="color:#302d33" href="URL_HERE">GP-XXXX</a>
</div>
</div>
</div>
<div class="col-6 p-1">
<div class="card border-0 p-2 px-3" style="border-radius:15px; background-color:#c8bfd7;">
<div class="font-italic d-flex align-items-center mb-2" style="letter-spacing:1px; color:#302d33;">
designer
<hr class="flex-fill mx-2 my-0" style="background-color:#111012; opacity:50%"> <i class="fa-solid fa-leaf fa-fw"></i>
</div>
<div class="faded" style="color:#302d33">
<a style="color:#302d33" href="URL_HERE">content</a>
</div>
</div>
</div>
<!---- add more fields above this line ---->
<hr style="border:none; opacity:0%">
</div>
<br>
<div class="row no-gutters mb-3">
<hr class="col-5 mt-3" style="background-color: #c8bfd7;">
<div class="col-1 mt-2 text-center"><i class="fa-regular fa-skull" style="color: #793f5d;"></i>
</div>
<hr class="col-5 mt-3" style="background-color: #c8bfd7;">
</div>
<!---- QUOTE ---->
<div class="justify-content-between mb-3 mt-1">
<i class="fad fa-quote-left" style="color: #793f5d;"></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<i class="fad fa-quote-right" style="color: #793f5d;"></i>
</div>
<br>
<!---- ADJECTIVES ---->
<div class="mb-3 mt-1 justify-content-center">
<p style="font-family: georgia; font-size: 13px; letter-spacing:2px; color:#793f5d;"><b><i>adjective | adjective | adjective</i></b></p>
</div>
<!---- CONTENT ---->
<div class="mb-3 mt-1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
</div>
<div class="row no-gutters mb-3">
<hr class="col-5 mt-3" style="background-color: #c8bfd7;">
<div class="col-1 mt-2 text-center">
<i class="fa-regular fa-skull" style="color: #793f5d;"></i>
</div>
<hr class="col-5 mt-3" style="background-color: #c8bfd7;">
</div>
<!---- STAT SLIDERS - change the % values to adjust ---->
<div class="row no-gutters align-items-center">
<div class="col-4 pr-3">
<div class="font-italic" style="letter-spacing:2px">
<b>Kindness.</b>
</div>
</div>
<div class="col-8">
<div class="progress" style="height:5px; background-color:#c8bfd7;">
<div class="progress-bar" style="
width:50%;
background-color:#793f5d;">
</div>
</div>
</div>
</div>
<div class="row no-gutters align-items-center">
<div class="col-4 pr-3">
<div class="font-italic" style="letter-spacing:2px">
<b>Intellect.</b>
</div>
</div>
<div class="col-8">
<div class="progress" style="height:5px; background-color:#c8bfd7;">
<div class="progress-bar" style="
width:50%;
background-color:#793f5d;">
</div>
</div>
</div>
</div>
<div class="row no-gutters align-items-center">
<div class="col-4 pr-3">
<div class="font-italic" style="letter-spacing:2px">
<b>Wisdom.</b>
</div>
</div>
<div class="col-8">
<div class="progress" style="height:5px; background-color:#c8bfd7;">
<div class="progress-bar" style="
width:50%;
background-color:#793f5d;">
</div>
</div>
</div>
</div>
<div class="row no-gutters align-items-center">
<div class="col-4 pr-3">
<div class="font-italic" style="letter-spacing:2px">
<b>Charisma.</b>
</div>
</div>
<div class="col-8">
<div class="progress" style="height:5px; background-color:#c8bfd7;">
<div class="progress-bar" style="
width:50%;
background-color:#793f5d;">
</div>
</div>
</div>
</div>
<div class="row no-gutters align-items-center">
<div class="col-4 pr-3">
<div class="font-italic" style="letter-spacing:2px">
<b>Strength.</b>
</div>
</div>
<div class="col-8">
<div class="progress" style="height:5px; background-color:#c8bfd7;">
<div class="progress-bar" style="
width:50%;
background-color:#793f5d;">
</div>
</div>
</div>
</div>
<!---- add more sliders above this line ---->
<br>
<div class="row no-gutters mb-3">
<hr class="col-5 mt-3" style="background-color: #c8bfd7;">
<div class="col-1 mt-2 text-center">
<i class="fa-regular fa-skull" style="color: #793f5d;"></i>
</div>
<hr class="col-5 mt-3" style="background-color: #c8bfd7;">
</div>
<!---- LIKES & DISLIKES ----->
<div class="row no-gutters">
<div class="col-6 p-1">
<div class="card border-0 p-2 px-3" style="border-radius:15px; background-color:#eae7ef;">
<div class="font-italic d-flex align-items-center mb-2" style="letter-spacing:1px; color:#302d33;">
likes
<hr class="flex-fill mx-2 my-0" style="background-color:#111012; opacity:50%"> <i class="fa-solid fa-heart fa-fw"></i>
</div>
<div class="faded" style="color:#302d33">
<ul>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
</div>
<div class="col-6 p-1">
<div class="card border-0 p-2 px-3" style="border-radius:15px; background-color:#c8bfd7;">
<div class="font-italic d-flex align-items-center mb-2" style="letter-spacing:1px; color:#302d33;">
dislikes
<hr class="flex-fill mx-2 my-0" style="background-color:#111012; opacity:50%"> <i class="fa-solid fa-heart-crack fa-fw"></i>
</div>
<div class="faded" style="color:#302d33">
<ul>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!---- TAB TWO ---->
<div class="tab-pane fade" id="design">
<!---- HEADER TWO ---->
<div class="row no-gutters" style="font-size: 34px;">
<div class="col-md-12">
<div style="font-weight: bold; letter-spacing: 3px; color: #c8bfd7">
Design.
<span style="font-family: georgia; font-size: 13px; color:#793f5d;"><i>subtitle.</i></span>
</div>
</div>
</div>
<div class="row no-gutters mb-3">
<hr class="col-5 mt-3" style="background-color: #c8bfd7;">
<div class="col-1 mt-2 text-center"><i class="fa-regular fa-skull" style="color: #793f5d;"></i>
</div>
<hr class="col-5 mt-3" style="background-color: #c8bfd7;">
</div>
<!---- FIELDS ---->
<div style="overflow: auto; height: 225px">
<div class="row no-gutters">
<div class="col-md-6 p-1">
<!---- PALETTE - replace hex code to edit ---->
<center><p>
<i class="fas fa-circle fa-2x" style="color:#ffffff"></i>
<i class="fas fa-circle fa-2x" style="color:#ffffff"></i>
<i class="fas fa-circle fa-2x" style="color:#ffffff"></i>
<i class="fas fa-circle fa-2x" style="color:#ffffff"></i>
<i class="fas fa-circle fa-2x" style="color:#ffffff"></i>
<i class="fas fa-circle fa-2x" style="color:#ffffff"></i>
</p></center>
<!---- DESIGN NOTES FIELD ---->
<div class="col-12 p-1">
<div class="card border-0 p-2 px-3" style="border-radius:15px; background-color:#eae7ef;">
<div class="font-italic d-flex align-items-center mb-2" style="letter-spacing:1px; color:#302d33;">
design notes
<hr class="flex-fill mx-2 my-0" style="background-color:#111012; opacity:50%"> <i class="fa-solid fa-brush fa-fw"></i>
</div>
<div class="faded" style="color:#302d33">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
<li>Donec accumsan tempor lacus, et venenatis elit feugiat non.</li>
<li>Duis porta eros et velit blandit dapibus.</li>
</ul>
</div>
</div>
</div>
</div>
<!---- MAIN IMAGE - replace IMG_URL with reference image ---->
<div class="col-md-6 p-1">
<div class="card rounded-0 h-100" style="background-color: #111012; border-radius:15px; border-color: #302d33;
background-image:url(IMG_URL); background-position: center; background-size: cover">
</div>
</div>
</div>
<br>
<div class="row no-gutters mb-3">
<hr class="col-5 mt-3" style="background-color: #c8bfd7;">
<div class="col-1 mt-2 text-center"><i class="fa-regular fa-skull" style="color: #793f5d;"></i></div>
<hr class="col-5 mt-3" style="background-color: #c8bfd7;">
</div>
<!---- MORE INFO FIELD ---->
<div class="row no-gutters flex-row mx-n1">
<div class="col-md-3 p-1 flex-column">
<!---- GIFS - replace url with gif links if desired --->
<div class="flex-grow-1">
<div class="card bg-faded p-3 border-0 h-100" style="min-height:90px; border-radius:10px 0 0 0;
background-image:url(https://i.pinimg.com/originals/e8/df/68/e8df683a29a90dcbb56e6d0ff86016b8.gif);
background-size:cover; background-position:center;">
</div>
</div>
<div class="flex-grow-1 mt-2">
<div class="card bg-faded p-3 border-0 h-100" style="min-height:90px; border-radius:0;
background-image:url(https://i.pinimg.com/originals/3a/cc/2f/3acc2ff06b4a76d896276b43ba4b39ae.gif);
background-size:cover;background-position:center;">
</div>
</div>
<div class="flex-grow-1 mt-2">
<div class="card bg-faded p-3 border-0 h-100" style="min-height:90px; border-radius:0 0 0 10px;
background-image:url(https://i.pinimg.com/originals/2d/88/a7/2d88a7d0fdd3259a6e9a5a123c979cf2.gif);
background-size:cover; background-position:center;">
</div>
</div>
</div>
<!---- TEXT FIELD ----->
<div class="col-md-9 p-1">
<div class="card border-0 h-100 p-2 px-3" style="max-height:500px; border-radius:0 15px 15px 0; background-color:#c8bfd7;">
<div class="font-italic d-flex align-items-center mb-2" style="letter-spacing:1px; color:#302d33;">
<i class="fa-solid fa-brush fa-fw"></i> <hr class="flex-fill mx-2 my-0" style="background-color:#111012; opacity:50%">
more info
</div>
<div class="faded" style="color:#302d33">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!---- TAB THREE ---->
<div class="tab-pane fade" id="story">
<!---- HEADER THREE ---->
<div class="row no-gutters" style="font-size: 34px;">
<div class="col-md-12">
<div style="font-weight: bold; letter-spacing: 3px; color: #c8bfd7">
Story.
<span style="font-family: georgia; font-size: 13px; color:#793f5d; "><i>subtitle.</i></span>
</div>
</div>
</div>
<div class="row no-gutters mb-3">
<hr class="col-5 mt-3" style="background-color: #c8bfd7;">
<div class="col-1 mt-2 text-center"><i class="fa-regular fa-skull" style="color: #793f5d;"></i></div>
<hr class="col-5 mt-3" style="background-color: #c8bfd7;">
</div>
<!---- FIELDS ---->
<div style="overflow: auto; height: 225px">
<div class="row no-gutters">
<!---- NAVIGATION SIDEBAR ---->
<div class="col-md-4">
<div class="flex-grow-1 flex-column sticky-top">
<ul class="nav nav-tabs nav-justified card-header-tabs row mb-2">
<li class="col-10 mb-1 mt-2 nav-item"><a class="btn nav-link w-100 active" style="background-color:#793f5d; color:#302d33; border-radius:15px; font-family:georgia;" data-toggle="tab" href="#one">
<span class="font-italic d-flex align-items-center" style="letter-spacing:1px; color:#eae7ef;">
part one
</span>
</a></li>
<li class="col-10 mb-1 mt-2 nav-item"><a class="btn nav-link w-100" style="background-color:#eae7ef; color:#302d33; border-radius:15px; font-family:georgia;" data-toggle="tab" href="#two">
<span class="font-italic d-flex align-items-center" style="letter-spacing:1px; color:#302d33;">
part two
</span>
</a></li>
<li class="col-10 mb-1 mt-2 nav-item"><a class="btn nav-link w-100" style="background-color:#c8bfd7; color:#302d33; border-radius:15px; font-family:georgia;" data-toggle="tab" href="#three">
<span class="font-italic d-flex align-items-center" style="letter-spacing:1px; color:#302d33;">
part three
</span>
</a></li>
</ul>
</div>
</div>
<div class="col-md-8">
<div class="tab-content">
<!---- CONTENT TABS ---->
<div class="tab-pane fade active show" id="one">
<div class="font-italic d-flex align-items-center" style="font-family: georgia; font-size: 18px; letter-spacing:3px; color:#4e2a44;">
<b>part one.</b>
<hr class="flex-fill mx-2 my-0" style="background-color:#4e2a44;"> <i class="fa-solid fa-seedling fa-fw"></i>
</div>
<div class="mb-2">
<span style="font-family: georgia; font-size: 13px; color:#793f5d;"><i><b>subheading.</b></i>
</span>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
<div class="tab-pane fade" id="two">
<div class="font-italic d-flex align-items-center" style="font-family: georgia; font-size: 18px; letter-spacing:3px; color:#4e2a44;">
<b>part two.</b>
<hr class="flex-fill mx-2 my-0" style="background-color:#4e2a44;"> <i class="fa-solid fa-seedling fa-fw"></i>
</div>
<div class="mb-2">
<span style="font-family: georgia; font-size: 13px; color:#793f5d;"><i><b>subheading.</b></i>
</span>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
<div class="tab-pane fade" id="three">
<div class="font-italic d-flex align-items-center" style="font-family: georgia; font-size: 18px; letter-spacing:3px; color:#4e2a44;">
<b>part three.</b>
<hr class="flex-fill mx-2 my-0" style="background-color:#4e2a44;"> <i class="fa-solid fa-seedling fa-fw"></i>
</div>
<div class="mb-2">
<span style="font-family: georgia; font-size: 13px; color:#793f5d;"><i><b>subheading.</b></i>
</span>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!---- TAB FOUR ---->
<div class="tab-pane fade" id="links">
<!---- HEADER FOUR ---->
<div class="row no-gutters" style="font-size: 34px;">
<div class="col-md-12">
<div style="font-weight: bold; letter-spacing: 3px; color: #c8bfd7">
Relationships.
<span style="font-family: georgia; font-size: 13px; color:#793f5d; "><i>subtitle.</i></span>
</div>
</div>
</div>
<div class="row no-gutters mb-3">
<hr class="col-5 mt-3" style="background-color: #c8bfd7;">
<div class="col-1 mt-2 text-center"><i class="fa-regular fa-skull" style="color: #793f5d;"></i></div>
<hr class="col-5 mt-3" style="background-color: #c8bfd7;">
</div>
<!---- RELATIONSHIP ONE - replace placeholder images and urls as needed ---->
<div style="overflow: auto; height: 225px">
<div class="row no-gutters">
<div class="col-md-6">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<hr style="border:none; opacity:0%">
<div class="justify-content-center" style="letter-spacing: 2px; font-size: 16px; color:#eae7ef" class="mt-2">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
<hr style="border:none; opacity:0%">
</div>
<div class="col-md-6">
<div class="flex-grow-1 flex-column sticky-top">
<center>
<a href="URL_HERE"><img src="https://placehold.co/400" class="pull-center mr-3" style="width: 200px; height: 130px; box-shadow: 3px 3px 0 #4e2a44; border: 1px solid #4e2a44; border-radius:15px; object-fit:cover;"></a> <hr style="border:none; opacity:0%">
<div class="col-md-10">
<div class="font-italic d-flex align-items-center mb-2" style="font-family: georgia; font-size: 18px; letter-spacing:3px; color:#4e2a44;">
<i class="fa-solid fa-seedling fa-fw"></i> <hr class="flex-fill mx-2 my-0" style="background-color:#4e2a44;">
<a style="color:#4e2a44;" href="URL_HERE">name.</a>
</div>
<div class="font-italic" style="text-align:right; font-family: georgia; font-size: 13px; color:#793f5d;"><b>relationship.</b>
</div>
</div>
</center>
</div>
</div>
</div>
</div>
<div class="row no-gutters mb-3">
<hr class="col-5 mt-3" style="background-color: #c8bfd7;">
<div class="col-1 mt-2 text-center"><i class="fa-regular fa-skull" style="color: #793f5d;"></i></div>
<hr class="col-5 mt-3" style="background-color: #c8bfd7;">
</div>
<!---- RELATIONSHIP TWO - replace placeholder images and urls as needed ---->
<div style="overflow: auto; height: 225px">
<div class="row no-gutters">
<div class="col-md-6">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<hr style="border:none; opacity:0%">
<div class="justify-content-center" style="letter-spacing: 2px; font-size: 16px; color:#eae7ef" class="mt-2">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
<hr style="border:none; opacity:0%">
</div>
<div class="col-md-6">
<div class="flex-grow-1 flex-column sticky-top">
<center>
<a href="URL_HERE"><img src="https://placehold.co/400" class="pull-center mr-3" style="width: 200px; height: 130px; box-shadow: 3px 3px 0 #4e2a44; border: 1px solid #4e2a44; border-radius:15px; object-fit:cover;"></a> <hr style="border:none; opacity:0%">
<div class="col-md-10">
<div class="font-italic d-flex align-items-center mb-2" style="font-family: georgia; font-size: 18px; letter-spacing:3px; color:#4e2a44;">
<i class="fa-solid fa-seedling fa-fw"></i> <hr class="flex-fill mx-2 my-0" style="background-color:#4e2a44;">
<a style="color:#4e2a44;" href="URL_HERE">name.</a>
</div>
<div class="font-italic" style="text-align:right; font-family: georgia; font-size: 13px; color:#793f5d;"><b>relationship.</b>
</div>
</div>
</center>
</div>
</div>
</div>
</div>
<div class="row no-gutters mb-3">
<hr class="col-5 mt-3" style="background-color: #c8bfd7;">
<div class="col-1 mt-2 text-center"><i class="fa-regular fa-skull" style="color: #793f5d;"></i></div>
<hr class="col-5 mt-3" style="background-color: #c8bfd7;">
</div>
<!---- RELATIONSHIP THREE - replace placeholder images and urls as needed ---->
<div style="overflow: auto; height: 225px">
<div class="row no-gutters">
<div class="col-md-6">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<hr style="border:none; opacity:0%">
<div class="justify-content-center" style="letter-spacing: 2px; font-size: 16px; color:#eae7ef" class="mt-2">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart-half-stroke"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
<hr style="border:none; opacity:0%">
</div>
<div class="col-md-6">
<div class="flex-grow-1 flex-column sticky-top">
<center>
<a href="URL_HERE"><img src="https://placehold.co/400" class="pull-center mr-3" style="width: 200px; height: 130px; box-shadow: 3px 3px 0 #4e2a44; border: 1px solid #4e2a44; border-radius:15px; object-fit:cover;"></a> <hr style="border:none; opacity:0%">
<div class="col-md-10">
<div class="font-italic d-flex align-items-center mb-2" style="font-family: georgia; font-size: 18px; letter-spacing:3px; color:#4e2a44;">
<i class="fa-solid fa-seedling fa-fw"></i> <hr class="flex-fill mx-2 my-0" style="background-color:#4e2a44;">
<a style="color:#4e2a44;" href="URL_HERE">name.</a>
</div>
<div class="font-italic" style="text-align:right; font-family: georgia; font-size: 13px; color:#793f5d;"><b>relationship.</b>
</div>
</div>
</center>
</div>
</div>
</div>
</div>
<!---- add more relationship entries above this line ---->
</div>
</div>
</div>
</div>
<!---- BUTTONS ---->
<div class="container" style="top:-20px">
<div class="col-md-12">
<div class="mx-auto text-justify p-1">
<ul class="nav nav-pills nav-fill d-flex">
<li class="nav-item">
<a class="col border-0 text-center nav-link" style="background: #793f5d; color: #eae7ef; font-size: 15px; border-radius: 15px 0 0 15px;" data-toggle="tab" href="#profile">
<i class="far fa-address-card"></i></a>
</li>
<li class="nav-item">
<a class="col border-0 rounded-0 text-center nav-link" style="background: #4e2a44; color: #eae7ef; font-size: 15px; border-radius: 0" data-toggle="tab" href="#design">
<i class="far fa-brush"></i></a>
</li>
<li class="nav-item">
<a class="col border-0 rounded-0 text-center nav-link" style="background: #c8bfd7; color: #302d33; font-size: 15px; border-radius: 0" data-toggle="tab" href="#story">
<i class="far fa-feather"></i></a>
</li>
<li class="nav-item">
<a class="col border-0 text-center nav-link" style="background: #eae7ef; color: #302d33; font-size: 15px; border-radius: 0 15px 15px 0" data-toggle="tab" href="#links">
<i class="far fa-link"></i></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!---- CREDITS - please do not remove! you are free to move or restyle it as long as it is still visible :D ---->
<div class="justify-content-center faded">
<a href="https://toyhou.se/rustbqr" title="code by rustbqr"><i class="fa-light fa-code"></i> /</a>
<a href="URL_HERE" title="art by ___">/ <i class="fa-light fa-paintbrush"></i></a>
</div>
