Profile
<!----------
Use ctrl f to replace the colors used
> accent 1 ( for text & icons ) : #8385cc
> accent 2 ( for buttons ) : #9c9edb
----------->
<!----- BACKGROUND IMAGE !---->
<div class="container mx p-2" style="max-width: 900px; background:url(img url); background-size:cover; background-position:center; background-repeat:no-repeat; border-radius: 20px; z-index: 20;">
<div class="row no-gutters">
<div class="col-md-5">
<!----
FOR THE PAGEDOLL
- make sure that the image is a transparent png
FOR THE QUOTE
- you can adjust the margin-top to make sure it doesn't cover the pagedoll
------>
<img src="IMG URL" style="z-index: -2;">
<div class="p-2 text-center text-light ml-2 mr-3" style="background-color: black; letter-spacing: 2px; font-family: georgia; margin-top: -200px;"><i>"insert fancy quote hereee"</i></div>
</div>
<div class="col-md-7">
<!---- NAME HEADER AND TITLE!---->
<h1 class="mt-3" style="font-family: georgia; letter-spacing: 5px; font-size: 36px; font-weight: 600;">name surname. <span style="font-family: georgia; font-size: 13px; color:#9c9edb; "><i>title here.</i></span></h1>
<!---- NAV BUTTONS ------>
<ul class="nav nav-tabs card-header-tabs row mb-1">
<li class="col-3 mb-1 mt-2"><a class="btn bg-faded btn-outline-secondary active w-100 p-1" data-toggle="tab" href="#profile" style="height: 30px;"><i class="fa-solid fa-stars"></i></a></li>
<li class="col-3 mb-1 mt-2"><a class="btn bg-faded w-100 btn-outline-secondary p-1" data-toggle="tab" href="#design" style="height: 30px;"><i class="fa-solid fa-paintbrush"></i></a></li>
<li class="col-3 mb-1 mt-2"><a class="btn bg-faded w-100 btn-outline-secondary p-1" data-toggle="tab" href="#history" style="height: 30px;"><i class="fa-solid fa-bookmark"></i></a></li>
<li class="col-3 mb-1 mt-2"><a class="btn bg-faded w-100 btn-outline-secondary p-1" data-toggle="tab" href="#relations" style="height: 30px;"><i class="fa-solid fa-heart-half-stroke"></i></a></li>
</ul>
<div class="tab-content">
<!-------
PROFILE
--------->
<div class="tab-pane fade active show" id="profile">
<div class="p-0 mt-3">
<div class="card p-2" style="height: 300px; overflow-y: scroll; scroll-behavior: smooth;">
<div id="basics"> <!----- BASICS SECTION ! ---->
<div class="row no-gutters">
<div class="col-6 p-2">
<div class="row no-gutters">
<div class="col-6">
<span class="text-lowercase" style=" font-size: 18px; font-family: georgia; letter-spacing: 1px; color: #8385cc;">nickname</span>
</div>
<div class="col-6 text-right text-muted">
<span style=" font-size: 16px; letter-spacing: 1px;">content</span>
</div>
</div>
<div class="row no-gutters mt-2">
<div class="col-6">
<span class="text-lowercase" style=" font-size: 18px; font-family: georgia; letter-spacing: 1px; color: #8385cc;">age</span>
</div>
<div class="col-6 text-right text-muted">
<span style=" font-size: 16px; letter-spacing: 1px;">content</span>
</div>
</div>
<div class="row no-gutters mt-2">
<div class="col-6">
<span class="text-lowercase" style=" font-size: 18px; font-family: georgia; letter-spacing: 1px; color: #8385cc;">birthday</span>
</div>
<div class="col-6 text-right text-muted">
<span style=" font-size: 16px; letter-spacing: 1px;">content</span>
</div>
</div>
<div class="row no-gutters mt-2">
<div class="col-6">
<span class="text-lowercase" style=" font-size: 18px; font-family: georgia; letter-spacing: 1px; color: #8385cc;">starsign</span>
</div>
<div class="col-6 text-right text-muted">
<span style=" font-size: 16px; letter-spacing: 1px;">content</span>
</div>
</div>
<div class="row no-gutters mt-2">
<div class="col-6">
<span class="text-lowercase" style=" font-size: 18px; font-family: georgia; letter-spacing: 1px; color: #8385cc;">gender</span>
</div>
<div class="col-6 text-right text-muted">
<span style=" font-size: 16px; letter-spacing: 1px;">content</span>
</div>
</div>
</div>
<div class="col-6 p-2">
<div class="row no-gutters">
<div class="col-6">
<span class="text-lowercase" style=" font-size: 18px; font-family: georgia; letter-spacing: 1px; color: #8385cc;">pronouns</span>
</div>
<div class="col-6 text-right text-muted">
<span style=" font-size: 16px; letter-spacing: 1px;">content</span>
</div>
</div>
<div class="row no-gutters mt-2">
<div class="col-6">
<span class="text-lowercase" style=" font-size: 18px; font-family: georgia; letter-spacing: 1px; color: #8385cc;">orientation</span>
</div>
<div class="col-6 text-right text-muted">
<span style=" font-size: 16px; letter-spacing: 1px;">content</span>
</div>
</div>
<div class="row no-gutters mt-2">
<div class="col-6">
<span class="text-lowercase" style=" font-size: 18px; font-family: georgia; letter-spacing: 1px; color: #8385cc;">species</span>
</div>
<div class="col-6 text-right text-muted">
<span style=" font-size: 16px; letter-spacing: 1px;">content</span>
</div>
</div>
<div class="row no-gutters mt-2">
<div class="col-6">
<span class="text-lowercase" style=" font-size: 18px; font-family: georgia; letter-spacing: 1px; color: #8385cc;">occupation</span>
</div>
<div class="col-6 text-right text-muted">
<span style=" font-size: 16px; letter-spacing: 1px;">content</span>
</div>
</div>
<div class="row no-gutters mt-2">
<div class="col-6">
<span class="text-lowercase" style=" font-size: 18px; font-family: georgia; letter-spacing: 1px; color: #8385cc;">height</span>
</div>
<div class="col-6 text-right text-muted">
<span style=" font-size: 16px; letter-spacing: 1px;">content</span>
</div>
</div>
</div>
</div>
<!---- SHORT SUMMARY --->
<div class="mt-2 pl-2">
<span class="text-justify" style=" font-size: 14px; letter-spacing: 1px;"> Put a short character summary here. It can be long too if you want tho. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque egestas scelerisque magna et luctus. Cras in rutrum lectus. In vulputate ipsum dignissim, pulvinar arcu ut.</span>
</div>
</div>
<!-------- border ------->
<div class="row no-gutters mt-2">
<hr class="col-5 mt-3" style="background-color: #60594e;">
<div class="col-1 mt-2 text-center"><i class="fa-solid fa-sickle" style="color: #8385cc;"></i></div>
<hr class="col-5 mt-3" style="background-color: #60594e;">
</div>
<!----- personality section ----->
<div id="personality">
<div class="row no-gutters">
<div class="col-6 pl-2">
<span class="text-lowercase" style="font-family: georgia; font-size: 20px; letter-spacing: 1px; color: #8385cc;">personality</span>
</div>
<div class="col-6 pr-2 text-right text-muted">
<span style=" font-size: 18px; letter-spacing: 1px;">trait . trait . trait</span>
</div>
</div>
<div class="mt-2 p-2 text-justify">
<span style=" font-size: 14px; letter-spacing: 1px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque egestas scelerisque magna et luctus. Cras in rutrum lectus. In vulputate ipsum dignissim, pulvinar arcu ut, imperdiet nisi. Suspendisse vitae diam non elit dignissim pharetra ut eget sem. Ut tristique hendrerit nisl, et porta elit.
<br><br>
Nam imperdiet lorem eros, nec pulvinar est malesuada at. Suspendisse mattis neque volutpat suscipit accumsan. Suspendisse potenti. Pellentesque at nisl sed tellus interdum ultrices. Mauris tincidunt, libero ultricies porta venenatis, libero ante gravida dolor, sed eleifend arcu purus non orci. Vestibulum ut tincidunt est.</span>
</div>
</div>
<!-------- border ------->
<div class="row no-gutters ">
<hr class="col-5 mt-3" style="background-color: #60594e;">
<div class="col-1 mt-2 text-center"><i class="fa-solid fa-sickle" style="color: #8385cc;"></i></div>
<hr class="col-5 mt-3" style="background-color: #60594e;">
</div>
<!---- stats, likes, trivia, etc---->
<div id="stats">
<div class="row no-gutters"> <!----- STATS ---->
<div class="col-6 p-1">
<!----
FOR THE STATS :
- change the fa-solid to fa-regular so the icon can be hollow
- works vice versa to fill in the icon
- you can change the stat 'titles' to anything u want !
------>
<div class="row no-gutters">
<div class="col-md-6 p-1">
<span class="text-lowercase" style="font-family: georgia; font-size: 16px; letter-spacing: 1px; color: #8385cc;">charisma</span>
</div>
<div class="col-md-6 p-1" style="letter-spacing: 0.5px; margin-top: 3px;">
<i class="fa-solid fa-square"></i>
<i class="fa-solid fa-square"></i>
<i class="fa-solid fa-square"></i>
<i class="fa-regular fa-square"></i>
<i class="fa-regular fa-square"></i>
<i class="fa-regular fa-square"></i>
</div>
</div>
<div class="row no-gutters mt-2">
<div class="col-md-6 p-1">
<span class="text-lowercase" style="font-family: georgia; font-size: 16px; letter-spacing: 1px; color: #8385cc;">intelligence</span>
</div>
<div class="col-md-6 p-1" style="letter-spacing: 0.5px; margin-top: 3px;">
<i class="fa-solid fa-square"></i>
<i class="fa-solid fa-square"></i>
<i class="fa-solid fa-square"></i>
<i class="fa-regular fa-square"></i>
<i class="fa-regular fa-square"></i>
<i class="fa-regular fa-square"></i>
</div>
</div>
<div class="row no-gutters mt-2">
<div class="col-md-6 p-1">
<span class="text-lowercase" style="font-family: georgia; font-size: 16px; letter-spacing: 1px; color: #8385cc;">confidence</span>
</div>
<div class="col-md-6 p-1" style="letter-spacing: 0.5px; margin-top: 3px;">
<i class="fa-solid fa-square"></i>
<i class="fa-solid fa-square"></i>
<i class="fa-solid fa-square"></i>
<i class="fa-regular fa-square"></i>
<i class="fa-regular fa-square"></i>
<i class="fa-regular fa-square"></i>
</div>
</div>
<div class="row no-gutters mt-2">
<div class="col-md-6 p-1">
<span class="text-lowercase" style="font-family: georgia; font-size: 16px; letter-spacing: 1px; color: #8385cc;">warmth</span> <!---- as in the warm, friendly kinda way, not like warm temperature kinda way, tho its up to u----->
</div>
<div class="col-md-6 p-1" style="letter-spacing: 0.5px; margin-top: 3px;">
<i class="fa-solid fa-square"></i>
<i class="fa-solid fa-square"></i>
<i class="fa-solid fa-square"></i>
<i class="fa-regular fa-square"></i>
<i class="fa-regular fa-square"></i>
<i class="fa-regular fa-square"></i>
</div>
</div>
</div>
<div class="col-6 p-1">
<div class="row no-gutters">
<div class="col-md-6 p-1">
<span class="text-lowercase" style="font-family: georgia; font-size: 16px; letter-spacing: 1px; color: #8385cc;">patience</span>
</div>
<div class="col-md-6 p-1" style="letter-spacing: 0.5px; margin-top: 3px;">
<i class="fa-solid fa-square"></i>
<i class="fa-solid fa-square"></i>
<i class="fa-solid fa-square"></i>
<i class="fa-regular fa-square"></i>
<i class="fa-regular fa-square"></i>
<i class="fa-regular fa-square"></i>
</div>
</div>
<div class="row no-gutters mt-2">
<div class="col-md-6 p-1">
<span class="text-lowercase" style="font-family: georgia; font-size: 16px; letter-spacing: 1px; color: #8385cc;">curiousity</span>
</div>
<div class="col-md-6 p-1" style="letter-spacing: 0.5px; margin-top: 3px;">
<i class="fa-solid fa-square"></i>
<i class="fa-solid fa-square"></i>
<i class="fa-solid fa-square"></i>
<i class="fa-regular fa-square"></i>
<i class="fa-regular fa-square"></i>
<i class="fa-regular fa-square"></i>
</div>
</div>
<div class="row no-gutters mt-2">
<div class="col-md-6 p-1">
<span class="text-lowercase" style="font-family: georgia; font-size: 16px; letter-spacing: 1px; color: #8385cc;">organized</span>
</div>
<div class="col-md-6 p-1" style="letter-spacing: 0.5px; margin-top: 3px;">
<i class="fa-solid fa-square"></i>
<i class="fa-solid fa-square"></i>
<i class="fa-solid fa-square"></i>
<i class="fa-regular fa-square"></i>
<i class="fa-regular fa-square"></i>
<i class="fa-regular fa-square"></i>
</div>
</div>
<div class="row no-gutters mt-2">
<div class="col-md-6 p-1">
<span class="text-lowercase" style="font-family: georgia; font-size: 16px; letter-spacing: 1px; color: #8385cc;">honesty</span> <!---- as in the warm, friendly kinda way, not like warm temperature kinda way, tho its up to u----->
</div>
<div class="col-md-6 p-1" style="letter-spacing: 0.5px; margin-top: 3px;">
<i class="fa-solid fa-square"></i>
<i class="fa-solid fa-square"></i>
<i class="fa-solid fa-square"></i>
<i class="fa-regular fa-square"></i>
<i class="fa-regular fa-square"></i>
<i class="fa-regular fa-square"></i>
</div>
</div>
</div>
</div>
</div>
<!-------- border ------->
<div class="row no-gutters ">
<hr class="col-5 mt-3" style="background-color: #60594e;">
<div class="col-1 mt-2 text-center"><i class="fa-solid fa-sickle" style="color: #8385cc;"></i></div>
<hr class="col-5 mt-3" style="background-color: #60594e;">
</div>
<div class="row no-gutters">
<div class="col-6 p-2"> <!--- LIKES ----->
<span class="text-lowercase" style="font-family: georgia; font-size: 18px; letter-spacing: 1px; color: #8385cc;">likes</span>
<ul type="circle" class="text-muted text-justify" style="font-size: 14px; margin-left: -20px;">
<li>content here</li>
<li>content here</li>
<li>content here</li>
<li>content here</li>
</ul>
</div>
<div class="col-6 p-2"> <!--- DISLIKES ----->
<span class="text-lowercase" style="font-family: georgia; font-size: 18px; letter-spacing: 1px; color: #8385cc;">dislikes</span>
<ul type="circle" class="text-muted text-justify" style="font-size: 14px; margin-left: -20px;">
<li>content here</li>
<li>content here</li>
<li>content here</li>
<li>content here</li>
</ul>
</div>
</div>
<div class="pl-2 pr-2"> <!--- TRIVIA ----->
<span class="text-lowercase" style="font-family: georgia; font-size: 18px; letter-spacing: 1px; color: #8385cc;">trivia</span>
<ul type="circle" class="text-muted text-justify" style="font-size: 14px; margin-left: -20px;">
<li>content here</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Pellentesque egestas scelerisque magna et luctus. Cras in rutrum lectus. In vulputate ipsum dignissim, pulvinar arcu ut, imperdiet nisi</li>
<li>content here</li>
</ul>
</div>
</div>
</div>
<!---- SCROLL NAV BUTTONS ---->
<ul class="nav row mb-1 ml-2 mr-2" style="margin-top: -6px;">
<li class="col-4"><a class="btn bg-faded btn-block active w-100 p-1 text-light" href="#basics" style="height: 30px; background-color: #9c9edb; font-family: georgia;">basics</a></li>
<li class="col-4"><a class="btn bg-faded btn-block w-100 btn-block p-1 text-light" href="#personality" style="height: 30px; background-color: #9c9edb; font-family: georgia;">personality</a></li>
<li class="col-4"><a class="btn bg-faded btn-block w-100 btn-block p-1 text-light" href="#stats" style="height: 30px; background-color: #9c9edb; font-family: georgia;">stats</a></li>
</ul>
</div>
<!------
DESIGN
------->
<div class="tab-pane fade" id="design">
<div class="p-0 mt-3">
<div class="card p-2" style="height: 300px; overflow-y: scroll; scroll-behavior: smooth;">
<div id="design">
<!--- IMAGE ---->
<div class="row no-gutters">
<div class="col-md-7 p-2">
<div class = "card p-0 mx" style ="height: 300px; background:url(img url); background-size:cover; background-position:center; background-repeat:no-repeat;"></div>
</div>
<!----
FOR THE COLOR PALETTE
- to add more, just copy paste the <div class="col-md-12 col w-100 and so on and paste it below the others
- change the #HEXCODE to ur characters color
---->
<div class="col-md-5 p-1">
<div class="row no-gutters">
<div class="col-md-12 col w-100 p-2"><div style="height: 30px; background-color: #HEXCODE; border-radius: 10px;" class="w-100"></div></div>
<div class="col-md-12 col w-100 p-2"><div style="height: 30px; background-color: #HEXCODE; border-radius: 10px;" class="w-100"></div></div>
<div class="col-md-12 col w-100 p-2"><div style="height: 30px; background-color: #HEXCODE; border-radius: 10px;" class="w-100"></div></div>
<div class="col-md-12 col w-100 p-2"><div style="height: 30px; background-color: #HEXCODE; border-radius: 10px;" class="w-100"></div></div>
<div class="col-md-12 col w-100 p-2"><div style="height: 30px; background-color: #HEXCODE; border-radius: 10px;" class="w-100"></div></div>
<div class="col-md-12 col w-100 p-2"><div style="height: 30px; background-color: #HEXCODE; border-radius: 10px;" class="w-100"></div></div>
</div>
</div>
</div>
</div>
<!-------- border ------->
<div class="row no-gutters ">
<hr class="col-5 mt-3" style="background-color: #60594e;">
<div class="col-1 mt-2 text-center"><i class="fa-solid fa-sickle" style="color: #8385cc;"></i></div>
<hr class="col-5 mt-3" style="background-color: #60594e;">
</div>
<!---- moodboards and design notes ----->
<div id="notes">
<div class="row no-gutters">
<div class="col-md-4 p-2">
<span class="text-lowercase" style="font-family: georgia; font-size: 18px; letter-spacing: 1px; color: #8385cc;">design notes</span>
<ul type="circle" class="text-muted text-justify" style="font-size: 14px; margin-left: -20px;">
<li>content here</li>
<li>content here</li>
<li>content here</li>
<li>content here</li>
</ul>
</div>
<div class="col-md-8">
<div class="row no-gutters">
<div class="col-6">
<div class="p-2">
<div class = "card p-0 mx" style ="height: 100px; background:url(img url); background-size:cover; background-position:center; background-repeat:no-repeat;"></div>
</div>
<div class="p-2">
<div class = "card p-0 mx" style ="height: 100px; background:url(img url); background-size:cover; background-position:center; background-repeat:no-repeat;"></div>
</div>
</div>
<div class="col-6">
<div class="p-2">
<div class = "card p-0 mx" style ="height: 100px; background:url(img url); background-size:cover; background-position:center; background-repeat:no-repeat;"></div>
</div>
<div class="p-2">
<div class = "card p-0 mx" style ="height: 100px; background:url(img url); background-size:cover; background-position:center; background-repeat:no-repeat;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<ul class="nav row mb-1 ml-2 mr-2" style="margin-top: -6px;">
<li class="col-6"><a class="btn bg-faded btn-block active w-100 p-1 text-light" href="#design" style="height: 30px; background-color: #9c9edb; font-family: georgia;">design</a></li>
<li class="col-6"><a class="btn bg-faded btn-block w-100 btn-block p-1 text-light" href="#notes" style="height: 30px; background-color: #9c9edb; font-family: georgia;">moodboard</a></li>
</ul>
</div>
</div>
<!------
HISTORY
------->
<div class="tab-pane fade" id="history">
<div class="p-0 mt-3">
<div class="card p-2" style="height: 300px; overflow-y: scroll; scroll-behavior: smooth;">
<div id="i">
<div class="row no-gutters">
<div class="col-6 pl-2">
<span class="text-lowercase" style="font-family: georgia; font-size: 20px; letter-spacing: 1px; color: #8385cc;">subheader i</span>
</div>
<div class="col-6 pr-2 text-right mt-2">
<!-----
FOR THE ICON
- you can change it to any icon from FontAwesome
- just add style="font-size: 25px; letter-spacing: 1px; color: #COLOR;"
------->
<i class="fa-solid fa-dagger" style="font-size: 25px; letter-spacing: 1px; color: #8385cc;"></i>
</div>
</div>
<div class="pl-2 pr-2 mt-1 text-left text-muted" style="letter-spacing: 2px; font-family: georgia;"><i>"insert fancy quote hereee" or somethingggg</i></div>
<div class="pl-2 pr-2"><hr style="background-color: #9c9edb;"></div>
<div class="mt-2 p-2 text-justify">
<span style=" font-size: 14px; letter-spacing: 1px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque egestas scelerisque magna et luctus. Cras in rutrum lectus. In vulputate ipsum dignissim, pulvinar arcu ut, imperdiet nisi. Suspendisse vitae diam non elit dignissim pharetra ut eget sem. Ut tristique hendrerit nisl, et porta elit.
<br><br>
Nam imperdiet lorem eros, nec pulvinar est malesuada at. Suspendisse mattis neque volutpat suscipit accumsan. Suspendisse potenti. Pellentesque at nisl sed tellus interdum ultrices. Mauris tincidunt, libero ultricies porta venenatis, libero ante gravida dolor, sed eleifend arcu purus non orci. Vestibulum ut tincidunt est.</span>
</div>
</div>
<!-------- border ------->
<div class="row no-gutters ">
<hr class="col-5 mt-3" style="background-color: #60594e;">
<div class="col-1 mt-2 text-center"><i class="fa-solid fa-sickle" style="color: #8385cc;"></i></div>
<hr class="col-5 mt-3" style="background-color: #60594e;">
</div>
<!----- SUBHEADER 2 ----->
<div id="ii">
<div class="row no-gutters">
<div class="col-6 pl-2">
<span class="text-lowercase" style="font-family: georgia; font-size: 20px; letter-spacing: 1px; color: #8385cc;">subheader ii</span>
</div>
<div class="col-6 pr-2 text-right mt-2">
<!-----
FOR THE ICON
- you can change it to any icon from FontAwesome
- just add style="font-size: 25px; letter-spacing: 1px; color: #COLOR;"
------->
<i class="fa-solid fa-dagger" style="font-size: 25px; letter-spacing: 1px; color: #8385cc;"></i>
</div>
</div>
<div class="pl-2 pr-2 mt-1 text-left text-muted" style="letter-spacing: 2px; font-family: georgia;"><i>"insert fancy quote hereee" or somethingggg</i></div>
<div class="pl-2 pr-2"><hr style="background-color: #9c9edb;"></div>
<div class="mt-2 p-2 text-justify">
<span style=" font-size: 14px; letter-spacing: 1px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque egestas scelerisque magna et luctus. Cras in rutrum lectus. In vulputate ipsum dignissim, pulvinar arcu ut, imperdiet nisi. Suspendisse vitae diam non elit dignissim pharetra ut eget sem. Ut tristique hendrerit nisl, et porta elit.
<br><br>
Nam imperdiet lorem eros, nec pulvinar est malesuada at. Suspendisse mattis neque volutpat suscipit accumsan. Suspendisse potenti. Pellentesque at nisl sed tellus interdum ultrices. Mauris tincidunt, libero ultricies porta venenatis, libero ante gravida dolor, sed eleifend arcu purus non orci. Vestibulum ut tincidunt est.</span>
</div>
</div>
<!-------- border ------->
<div class="row no-gutters ">
<hr class="col-5 mt-3" style="background-color: #60594e;">
<div class="col-1 mt-2 text-center"><i class="fa-solid fa-sickle" style="color: #8385cc;"></i></div>
<hr class="col-5 mt-3" style="background-color: #60594e;">
</div>
<!----- SUBHEADER 3 ----->
<div id="iii">
<div class="row no-gutters">
<div class="col-6 pl-2">
<span class="text-lowercase" style="font-family: georgia; font-size: 20px; letter-spacing: 1px; color: #8385cc;">subheader iii</span>
</div>
<div class="col-6 pr-2 text-right mt-2">
<!-----
FOR THE ICON
- you can change it to any icon from FontAwesome
- just add style="font-size: 25px; letter-spacing: 1px; color: #COLOR;"
------->
<i class="fa-solid fa-dagger" style="font-size: 25px; letter-spacing: 1px; color: #8385cc;"></i>
</div>
</div>
<div class="pl-2 pr-2 mt-1 text-left text-muted" style="letter-spacing: 2px; font-family: georgia;"><i>"insert fancy quote hereee" or somethingggg</i></div>
<div class="pl-2 pr-2"><hr style="background-color: #9c9edb;"></div>
<div class="mt-2 p-2 text-justify">
<span style=" font-size: 14px; letter-spacing: 1px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque egestas scelerisque magna et luctus. Cras in rutrum lectus. In vulputate ipsum dignissim, pulvinar arcu ut, imperdiet nisi. Suspendisse vitae diam non elit dignissim pharetra ut eget sem. Ut tristique hendrerit nisl, et porta elit.
<br><br>
Nam imperdiet lorem eros, nec pulvinar est malesuada at. Suspendisse mattis neque volutpat suscipit accumsan. Suspendisse potenti. Pellentesque at nisl sed tellus interdum ultrices. Mauris tincidunt, libero ultricies porta venenatis, libero ante gravida dolor, sed eleifend arcu purus non orci. Vestibulum ut tincidunt est.</span>
</div>
</div>
</div>
</div>
<ul class="nav row mb-1 ml-2 mr-2" style="margin-top: -6px;">
<li class="col-4"><a class="btn bg-faded btn-block active w-100 p-1 text-light" href="#i" style="height: 30px; background-color: #9c9edb; font-family: georgia;">I</a></li>
<li class="col-4"><a class="btn bg-faded btn-block w-100 btn-block p-1 text-light" href="#ii" style="height: 30px; background-color: #9c9edb; font-family: georgia;">II</a></li>
<li class="col-4"><a class="btn bg-faded btn-block w-100 btn-block p-1 text-light" href="#iii" style="height: 30px; background-color: #9c9edb; font-family: georgia;">III</a></li>
</ul>
</div>
<!------
RELATIONSHIPS
------->
<div class="tab-pane fade" id="relations">
<div class="p-0 mt-3">
<div class="card p-2" style="height: 300px; overflow-y: scroll; scroll-behavior: smooth;">
<div id="relationship1"> <!---- RELATIONSHIP 1 ---->
<div class="row no-gutters">
<div class="col-3 p-2">
<div class="card p-2 card-outline-secondary" style="height: 120px; width: 120px;">
<div class = "card p-0 mx" style ="height: 100px; width: 100px; background:url(IMG URL); background-size:cover; background-position:center; background-repeat:no-repeat;"></div>
</div>
</div>
<div class="col-9 mt-3" style="padding: 0px 0px 0px 20px;">
<a href="CHARACTER URL" class="text-lowercase" style="font-family: georgia; font-size: 30px; letter-spacing: 1px; color: #8385cc;">name surname.</a>
<div class="mt-1 text-left text-muted" style="letter-spacing: 2px; font-family: georgia;"><i>relationship status</i></div>
<!----
FOR THE RELATIONSHIP STATS :
- change the fa-solid to fa-regular so the icon can be hollow
- works vice versa to fill in the icon
------>
<div style="letter-spacing: 2px; font-size: 16px;" class="mt-2">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<div class="mt-2 pr-2 pl-2 text-justify">
<span style=" font-size: 14px; letter-spacing: 1px;">Description of relationship with character here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque egestas scelerisque magna et luctus. Cras in rutrum lectus. In vulputate ipsum dignissim, pulvinar arcu ut, imperdiet nisi. Suspendisse vitae diam non elit dignissim pharetra ut eget sem. Ut tristique hendrerit nisl, et porta elit.</span>
</div>
</div>
<!-------- border ------->
<div class="row no-gutters ">
<hr class="col-5 mt-3" style="background-color: #60594e;">
<div class="col-1 mt-2 text-center"><i class="fa-solid fa-sickle" style="color: #8385cc;"></i></div>
<hr class="col-5 mt-3" style="background-color: #60594e;">
</div>
<div id="relationship2"> <!---- RELATIONSHIP 2 ---->
<div class="row no-gutters">
<div class="col-3 p-2">
<div class="card p-2 card-outline-secondary" style="height: 120px; width: 120px;">
<div class = "card p-0 mx" style ="height: 100px; width: 100px; background:url(IMG URL); background-size:cover; background-position:center; background-repeat:no-repeat;"></div>
</div>
</div>
<div class="col-9 mt-3" style="padding: 0px 0px 0px 20px;">
<a href="CHARACTER URL" class="text-lowercase" style="font-family: georgia; font-size: 30px; letter-spacing: 1px; color: #8385cc;">name surname.</a>
<div class="mt-1 text-left text-muted" style="letter-spacing: 2px; font-family: georgia;"><i>relationship status</i></div>
<!----
FOR THE RELATIONSHIP STATS :
- change the fa-solid to fa-regular so the icon can be hollow
- works vice versa to fill in the icon
------>
<div style="letter-spacing: 2px; font-size: 16px;" class="mt-2">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<div class="mt-2 pr-2 pl-2 text-justify">
<span style=" font-size: 14px; letter-spacing: 1px;">Description of relationship with character here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque egestas scelerisque magna et luctus. Cras in rutrum lectus. In vulputate ipsum dignissim, pulvinar arcu ut, imperdiet nisi. Suspendisse vitae diam non elit dignissim pharetra ut eget sem. Ut tristique hendrerit nisl, et porta elit.</span>
</div>
</div>
<!-------- border ------->
<div class="row no-gutters ">
<hr class="col-5 mt-3" style="background-color: #60594e;">
<div class="col-1 mt-2 text-center"><i class="fa-solid fa-sickle" style="color: #8385cc;"></i></div>
<hr class="col-5 mt-3" style="background-color: #60594e;">
</div>
<div id="relationship3"> <!---- RELATIONSHIP 3 ---->
<div class="row no-gutters">
<div class="col-3 p-2">
<div class="card p-2 card-outline-secondary" style="height: 120px; width: 120px;">
<div class = "card p-0 mx" style ="height: 100px; width: 100px; background:url(IMG URL); background-size:cover; background-position:center; background-repeat:no-repeat;"></div>
</div>
</div>
<div class="col-9 mt-3" style="padding: 0px 0px 0px 20px;">
<a href="CHARACTER URL" class="text-lowercase" style="font-family: georgia; font-size: 30px; letter-spacing: 1px; color: #8385cc;">name surname.</a>
<div class="mt-1 text-left text-muted" style="letter-spacing: 2px; font-family: georgia;"><i>relationship status</i></div>
<!----
FOR THE RELATIONSHIP STATS :
- change the fa-solid to fa-regular so the icon can be hollow
- works vice versa to fill in the icon
------>
<div style="letter-spacing: 2px; font-size: 16px;" class="mt-2">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</div>
</div>
</div>
<div class="mt-2 pr-2 pl-2 text-justify" style="margin-bottom: 55px;">
<span style=" font-size: 14px; letter-spacing: 1px;">Description of relationship with character here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque egestas scelerisque magna et luctus. Cras in rutrum lectus. In vulputate ipsum dignissim, pulvinar arcu ut, imperdiet nisi. Suspendisse vitae diam non elit dignissim pharetra ut eget sem. Ut tristique hendrerit nisl, et porta elit.</span>
</div>
</div>
</div>
<ul class="nav row mb-1 ml-2 mr-2" style="margin-top: -6px;">
<li class="col-4"><a class="btn bg-faded btn-block active w-100 p-1 text-light" href="#relationship1" style="height: 30px; background-color: #9c9edb; font-family: georgia;"><img src="CHARACTER IMG URL HERE" style="height: 80px; margin-top: -55px;"></a></li>
<li class="col-4"><a class="btn bg-faded btn-block w-100 btn-block p-1 text-light" href="#relationship2" style="height: 30px; background-color: #9c9edb; font-family: georgia;"><img src="CHARACTER IMG URL HERE" style="height: 80px; margin-top: -55px;"></a></li>
<li class="col-4"><a class="btn bg-faded btn-block w-100 btn-block p-1 text-light" href="#relationship3" style="height: 30px; background-color: #9c9edb; font-family: georgia;"><img src="CHARACTER IMG URL HERE" style="height: 80px; margin-top: -55px;"></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
Recent Images
No images.