hi hi! if you like my f2u codes, pls consider supporting with a kofi!
<!-------------------------------------------------
Lyrical — Bootstrap version (21/11/2022).
(code by jiko)
------------------------------
RULES
> Read this thoroughly please, and maybe drop a small comment saying that you've read it? :'3
thank youu [ https://toyhou.se/~bulletins/127417.code-rules ]
> turn OFF WYSIWYG (in display settings)
> turn ON Code Editor
------------------------------
TIPPY TIPS
> insert your img links INSIDE or quotation marks!!
> looking for a good online code editor? try [ https://th.circlejourney.net/# ] !
------------------------------
COLOUR PALETTE
> accent ----------------- [-primary]
you can choose from primary, warning, success, danger or info
use control/command + f to quickly change the colours!
------------------------------------------------->
<div class="my-4 mx-auto row no-gutters" style="max-width:900px; font-size:96%">
<!------------------------------------------------
THE ALMIGHTY SIDEBAR
------------------------------------------------->
<div class="col-lg-4 p-1 flex-column order-1">
<div class="flex-grow-1 flex-column sticky-top bg-faded p-3 py-sm-2 card-outline-primary" style="border-width:20px 0; border-style:solid; top:20px; max-height:calc(100vh - 40px); color:#fff;
background-image:url(https://images.unsplash.com/photo-1632231484562-3d2bed7e808d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1918&q=80);
background-size:cover;
background-position:left;">
<!-- DIVIDER
---------------------------------------------->
<div class="flex-grow-3">
<div class="row no-gutters align-items-center mx-n3">
<div class="col"><hr class="my-0" style="border-top:1px solid #fff"></div>
<div class="col-auto px-2">
✦
</div>
<div class="col"><hr class="my-0" style="border-top:1px solid #fff"></div>
</div>
</div>
<div class="flex-grow-1"><div class="h-100"></div></div>
<!-- AVATAR
---------------------------------------------->
<!--
> best if 200x200 or squared! it will auto-crop if any bigger
-->
<div class="flex-grow-2 mt-lg-0 mt-5">
<div class="mt-lg-0 mt-4 h-100">
<div class="text-center mb-3">
<!-- IMAGE HERE -->
<img src="IMG_URL_HERE"
class="img-thumbnail bg-transparent rounded-0 p-3"
style="height:180px; object-fit:cover; border:2px solid #fff">
</div>
<!-- DELETABLE DECOR -->
<div class="hidden-xs-down" style="position:relative; margin-top:-190px;">
<div class="mx-auto" style="border:1px solid #fff; height:170px; width:170px; transform:rotate(45deg);"></div>
</div>
</div>
</div>
<!-- SONG
---------------------------------------------->
<!--
> best if 200x200 or squared! it will crop if any bigger
> change the [width:20%] to move the position of the dot!
-->
<div class="flex-grow-2 mb-lg-0 mb-5">
<div class="h-100 mx-auto" style="max-width:200px;">
<div class="mt-5">
Wi ing Wi ing <br>
HYUKOH
</div>
<div class="progress mt-3 mb-2 rounded-0" style="height:2px; overflow:visible; background-color:rgba(255, 255, 255, 0.5);">
<div class="progress-bar" style="height:100%;
width:40%;
background-color:#fff;"></div>
<div class="shadow" style="background-color:#fff; height:8px;width:8px;margin:-3px 0 0 -4px;border-radius:70%;"></div>
</div>
<div class="justify-content-between mb-4 small">
<span>1:16</span>
<span>3:11</span>
</div>
<div class="justify-content-between" style="font-size:20px">
<i class="fa-regular fa-backward"></i>
<i class="fa-solid fa-play"></i>
<i class="fa-regular fa-forward"></i>
</div>
<!-- YOUTUBE ID HERE -------------------------------------->
<div class="w-100" style="position:relative; margin-top:-70px; margin-bottom:-25px; right:0px; height:100px; overflow:hidden;">
<!--
→ replace [ xuZF2kxzv0I ] with your youtube video (found after https://www.youtube.com/watch?v=)
→ keep the [ ?controls=0 ] at the end !!
-->
<iframe src="https://www.youtube.com/embed/xuZF2kxzv0I?controls=0"
class="w-100" style="position:absolute; top:-140px; left:0; height:400px; opacity:0.001" frameborder="0">
</iframe>
</div>
</div>
</div>
<!-- DIVIDER
---------------------------------------------->
<div class="flex-grow-1"><div class="h-100"></div></div>
<div class="flex-grow-3">
<div class="row no-gutters align-items-center fa-flip-vertical mx-n3">
<div class="col"><hr class="my-0" style="border-top:1px solid #fff"></div>
<div class="col-auto px-2">
✦
</div>
<div class="col"><hr class="my-0" style="border-top:1px solid #fff"></div>
</div>
</div>
</div>
</div>
<!------------------------------------------------
THE MINI SIDEBAR
(use the same image)
------------------------------------------------->
<div class="col-lg-1 p-1 flex-column order-3 hidden-md-down">
<div class="flex-grow-1 flex-column sticky-top bg-faded p-3 py-sm-2 card-outline-primary" style="border-width:20px 0; border-style:solid; top:20px; max-height:calc(100vh - 40px); color:#fff;
background-image:url(https://images.unsplash.com/photo-1632231484562-3d2bed7e808d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1918&q=80);
background-size:cover;
background-position:right;">
<!-- DIVIDER (TOP)
---------------------------------------------->
<div class="flex-grow-3">
<div class="row no-gutters align-items-center fa-flip-vertical mx-n3">
<div class="col"><hr class="my-0" style="border-top:1px solid #fff"></div>
<div class="col-auto px-2">
✦
</div>
<div class="col"><hr class="my-0" style="border-top:1px solid #fff"></div>
</div>
</div>
<div class="flex-grow-1"><div class="h-100"></div></div>
<!-- DIVIDER (BOTTOM)
---------------------------------------------->
<div class="flex-grow-3">
<div class="row no-gutters align-items-center fa-flip-vertical mx-n3">
<div class="col"><hr class="my-0" style="border-top:1px solid #fff"></div>
<div class="col-auto px-2">
✦
</div>
<div class="col"><hr class="my-0" style="border-top:1px solid #fff"></div>
</div>
</div>
</div>
</div>
<!------------------------------------------------
PROFILE CONTENT
------------------------------------------------->
<div class="col-lg-7 p-1 overflow-hidden order-2">
<div class="card rounded-0 border-0 bg-transparent px-lg-3 mt-lg-0 mt-4 text-justify">
<!------------------------------------------------
ABOUT
------------------------------------------------->
<div class="lyrical_about">
<!-- HEADER
---------------------------------------------->
<div class="mb-n1">
<div class="text-uppercase" style="font-size:25px; letter-spacing:2px; font-family:serif; font-weight:900;">
name
<!-- go to [fontawesome.com] to find more icons! -->
<i class="fa-duotone fa-cup-togo fa-fw fa-sm text-primary"></i>
</div>
</div>
<!-- SUBTITLE
---------------------------------------------->
<div class="mb-2" style="font-family:courier new; letter-spacing:0.5px">
species/race | gender | age
</div><div class="row no-gutters mx-n2">
<!-- SUMMARY
---------------------------------------------->
<div class="col-md-12 p-2">
<div class="card rounded-0 bg-faded p-3 h-100 text-primary" style="border-top:5px solid;">
<div class="text-muted">
<!-- place the first five words inside the span! -->
<p><span class="text-uppercase font-italic" style="letter-spacing:0.5px">Lorem ipsum dolor sit amet</span>, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.</p>
<p>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>
<!-- LIKES
---------------------------------------------->
<div class="col-sm-6 p-2">
<div class="d-flex justify-content-center" style="position:relative; z-index:2; margin-bottom:-25px;">
<div class="card rounded-0 pb-1 px-3 text-center text-uppercase border-top-0" style="font-family:times; font-weight:900">
Likes
</div>
</div>
<div class="card rounded-0 bg-faded text-primary p-3 h-100" style="border-top:5px solid;">
<ul class="mt-3 pl-3 mb-0 text-muted">
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
<!-- DISLIKES
---------------------------------------------->
<div class="col-sm-6 p-2">
<div class="d-flex justify-content-center" style="position:relative; z-index:2; margin-bottom:-25px;">
<div class="card rounded-0 pb-1 px-3 text-center text-uppercase border-top-0" style="font-family:times; font-weight:900">
Dislikes
</div>
</div>
<div class="card rounded-0 bg-faded text-primary p-3 h-100" style="border-top:5px solid;">
<ul class="mt-3 pl-3 mb-0 text-muted">
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
</div>
</div>
<!------------------------------------------------
LYRIC DIVIDER
------------------------------------------------->
<div class="my-4 mx-n4">
<hr class="mb-2 text-primary" style="border-top:2px solid">
<div class="card p-2 rounded-0 bg-primary border-0 text-center">
<div class="font-italic text-dark" style="font-size:90%; font-family:courier new; letter-spacing:0.5px;">
lyric here...
</div>
</div>
<hr class="mt-2 text-primary" style="border-top:2px solid">
</div>
<!------------------------------------------------
PERSONALITY
------------------------------------------------->
<div class="lyrical_personality">
<!-- HEADER
---------------------------------------------->
<div class="mb-n1">
<div class="text-uppercase" style="font-size:25px; letter-spacing:2px; font-family:serif; font-weight:900;">
PERSONALITY
<i class="fa-duotone fa-leaf-maple fa-sm fa-fw text-primary"></i>
</div>
</div>
<!-- SUBTITLE
---------------------------------------------->
<div class="mb-2" style="font-family:courier new; letter-spacing:0.5px">
alignment | mbti | zodiac | tarot
</div>
<div class="card rounded-0 bg-faded text-muted h-100 my-3 text-primary" style="border-top:5px solid; border-bottom:5px solid">
<div class="row no-gutters">
<!-- CONTENT BOX
---------------------------------------------->
<div class="col p-3">
<!-- TRAITS --------------------------------->
<div class="text-center">
<span class="badge bg-primary text-white border-0 p-1 px-2">trait</span>
<span class="badge bg-primary text-white border-0 p-1 px-2">trait</span>
<span class="badge bg-primary text-white border-0 p-1 px-2">trait</span>
</div><hr>
<!-- SUMMARY --------------------------------->
<div class="mt-3 text-muted">
<p>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>
<!-- DECOR
---------------------------------------------->
<div class="col-auto flex-column">
<div class="flex-grow-2">
<div style="position:relative; z-index:2;">
<div class="card rounded-0 p-3 text-center text-primary border-top-0 border-right-0 h-100" style="margin:-5px -1px 0 0; border-bottom-left-radius:30px; border-left:5px solid; border-bottom:5px solid">
<!-- TOP ICON -->
<i class="fa-light fa-envelope fa-lg text-body"
style="position:absolute; top:5px; right:0"></i>
</div>
</div>
</div>
<div class="flex-grow-1 mx-auto">
<div class="card bg-transparent h-100" style="border-width:0 2px 0 0; border-style:dashed;"></div>
</div>
<div class="flex-grow-2">
<div style="position:relative; z-index:2;">
<div class="card rounded-0 pl-4 p-3 text-center text-primary border-bottom-0 border-right-0 h-100" style="margin:0 -1px -5px 0; border-top-left-radius:30px; border-top:5px solid; border-left:5px solid">
<!-- BOTTOM ICON -->
<i class="fa-light fa-feather-alt fa-flip-vertical fa-lg text-body"
style="position:absolute; bottom:5px; right:0"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- PERSONALITY STATS
---------------------------------------------->
<!--
> change the [width:50%;] to any value from 0–100%
-->
<div class="mt-4">
<div class="row no-gutters align-items-center">
<div class="col-6 pr-3">
<div class="text-uppercase font-italic" style="letter-spacing:1px">
Confidence
</div>
</div>
<div class="col-6">
<div class="progress" style="height:5px;">
<div class="progress-bar" style="
width:50%;
"></div>
</div>
</div>
</div>
<!----------------------------------------->
<div class="row no-gutters align-items-center mt-2">
<div class="col-6 pr-3">
<div class="text-uppercase font-italic" style="letter-spacing:1px">
Charisma
</div>
</div>
<div class="col-6">
<div class="progress" style="height:5px;">
<div class="progress-bar" style="
width:50%;
"></div>
</div>
</div>
</div>
<!----------------------------------------->
<div class="row no-gutters align-items-center mt-2">
<div class="col-6 pr-3">
<div class="text-uppercase font-italic" style="letter-spacing:1px">
Honesty
</div>
</div>
<div class="col-6">
<div class="progress" style="height:5px;">
<div class="progress-bar" style="
width:50%;
"></div>
</div>
</div>
</div>
<!----------------------------------------->
<div class="row no-gutters align-items-center mt-2">
<div class="col-6 pr-3">
<div class="text-uppercase font-italic" style="letter-spacing:1px">
Intelligence
</div>
</div>
<div class="col-6">
<div class="progress" style="height:5px;">
<div class="progress-bar" style="
width:50%;
"></div>
</div>
</div>
</div>
<!----------------------------------------->
<div class="row no-gutters align-items-center mt-2">
<div class="col-6 pr-3">
<div class="text-uppercase font-italic" style="letter-spacing:1px">
Kindness
</div>
</div>
<div class="col-6">
<div class="progress" style="height:5px;">
<div class="progress-bar" style="
width:50%;
"></div>
</div>
</div>
</div>
<!-- add more above THIS line! -->
</div>
</div>
<!------------------------------------------------
LYRIC DIVIDER
------------------------------------------------->
<div class="my-4 mx-n4">
<hr class="mb-2 text-primary" style="border-top:2px solid">
<div class="card p-2 rounded-0 bg-primary border-0 text-center">
<div class="font-italic text-dark" style="font-size:90%; font-family:courier; letter-spacing:0.5px;">
lyric here...
</div>
</div>
<hr class="mt-2 text-primary" style="border-top:2px solid">
</div>
<!------------------------------------------------
APPEARANCE
------------------------------------------------->
<div class="lyrical_appearance">
<!-- HEADER
---------------------------------------------->
<div class="mb-n1">
<div class="text-uppercase" style="font-size:25px; letter-spacing:2px; font-family:serif; font-weight:900;">
Appearance
<i class="fa-duotone fa-swatchbook fa-sm fa-fw text-primary"></i>
</div>
</div>
<!-- SUBTITLE
---------------------------------------------->
<div class="mb-3" style="font-family:courier new; letter-spacing:0.5px;">
height | build | demeanour
</div><div class="row no-gutters flex-row-reverse mx-n1">
<!-- FOCAL IMAGE
---------------------------------------------->
<div class="col p-1">
<div class="card border-0 bg-faded h-100" style="min-height:500px; border-radius:0 10px 10px 0;
background-image:url(IMG_URL_HERE);
background-size:cover;
background-position:center;
background-repeat:no-repeat">
</div>
</div>
<!-- AESTHETICS
---------------------------------------------->
<div class="col-auto p-1 flex-column" style="width:60px;">
<!-- ONE --------------------------------->
<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://images.unsplash.com/photo-1578301978961-a526d6fb0d54?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1987&q=80);
background-size:cover;
background-position:center;">
</div>
</div>
<!-- TWO --------------------------------->
<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://images.unsplash.com/photo-1579541513287-3f17a5d8d62c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1952&q=80);
background-size:cover;
background-position:center;">
</div>
</div>
<!-- THREE --------------------------------->
<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://images.unsplash.com/photo-1578301978162-7aae4d755744?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1877&q=80);
background-size:cover;
background-position:center;">
</div>
</div>
<!-- add more above THIS line! though i think it looks the best minimally ovo)b -->
</div>
<!-- TIDBITS
---------------------------------------------->
<div class="col-12 p-1">
<div style="font-family:courier new; letter-spacing:0.5px;">
<!-- DESIGNER --------------------------------->
<a href="LINK_HERE">
designer
</a> |
<!-- IMAGE ARTIST --------------------------------->
<a href="LINK_HERE">
artist
</a> |
<!-- WORTH --------------------------------->
$$$
</div>
</div>
</div>
<!-- PALETTE
---------------------------------------------->
<div class="row no-gutters mt-3 mb-4" style="border-radius:10px; overflow:hidden">
<div class="col" style="height:20px; background-color:#f0e4d2"></div>
<div class="col" style="height:20px; background-color:#ddc6a0"></div>
<div class="col" style="height:20px; background-color:#af9771"></div>
<div class="col" style="height:20px; background-color:#746143"></div>
<!-- add more above this line! -->
</div>
<!-- DESIGN
---------------------------------------------->
<div class="mb-3">
<div class="d-flex justify-content-center" style="position:relative; z-index:2; margin-bottom:-25px;">
<div class="card rounded-0 pb-1 px-3 text-center text-uppercase border-top-0" style="font-family:times; font-weight:900">
Design
</div>
</div>
<div class="card rounded-0 bg-faded text-primary p-3 h-100" style="border-top:5px solid;">
<div class="mt-3 text-muted">
<p>Write a summary of your character's appearance.</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>
<!-- DESIGN NOTES
---------------------------------------------->
<div class="mb-0">
<div class="d-flex justify-content-center" style="position:relative; z-index:2; margin-bottom:-25px;">
<div class="card rounded-0 pb-1 px-3 text-center text-uppercase border-top-0" style="font-family:times; font-weight:900">
Important Notes
</div>
</div>
<div class="card rounded-0 bg-faded text-primary p-3 h-100" style="border-top:5px solid;">
<ul class="mt-3 pl-3 mb-0 text-muted">
<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>
</ul>
</div>
</div>
</div>
<!------------------------------------------------
LYRIC DIVIDER
------------------------------------------------->
<div class="my-4 mx-n4">
<hr class="mb-2 text-primary" style="border-top:2px solid">
<div class="card p-2 rounded-0 bg-primary border-0 text-center">
<div class="font-italic text-dark" style="font-size:90%; font-family:courier; letter-spacing:0.5px;">
lyric here...
</div>
</div>
<hr class="mt-2 text-primary" style="border-top:2px solid">
</div>
<!------------------------------------------------
BACKGROUND
------------------------------------------------->
<div class="lyrical_background">
<!-- HEADER
---------------------------------------------->
<div class="mb-n1">
<div class="text-uppercase" style="font-size:25px; letter-spacing:2px; font-family:serif; font-weight:900;">
BACKGROUND
<i class="fa-duotone fa-books fa-sm fa-fw text-primary"></i>
</div>
</div>
<!-- SUBTITLE
---------------------------------------------->
<div class="mb-3" style="font-family:courier new; letter-spacing:0.5px;">
a short subtitle here...
</div>
<!-- ONE
---------------------------------------------->
<div class="mt-4">
<!-- TITLE --------------------------------->
<div class="d-flex justify-content-center" style="position:relative; z-index:2; margin-bottom:-25px;">
<div class="card rounded-0 pb-1 px-3 text-center text-uppercase border-top-0" style="font-family:times; font-weight:900">
Subheader
</div>
</div>
<div class="card rounded-0 bg-faded text-primary h-100" style="border-top:5px solid; border-bottom:5px solid;">
<div class="row no-gutters">
<!-- WRITTEN STUFF --------------------------------->
<div class="col p-3 mt-3 text-muted">
<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>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>
<!-- CHAPTER NUMBER --------------------------------->
<div class="col-auto flex-column">
<div class="flex-grow-1 mx-auto">
<div class="card bg-transparent h-100" style="border-width:0 2px 0 0; border-style:dashed"></div>
</div>
<div class="flex-grow-2">
<div style="position:relative; z-index:2;">
<div class="card rounded-0 p-3 text-center text-primary border-bottom-0 border-right-0 h-100" style="margin:0 -1px -5px 0; border-top-left-radius:30px; border-left:5px solid; border-top:5px solid">
<!-- change the fa-1 to the "section number"! -->
<i class="fa-regular fa-1 fa-lg text-body"
style="position:absolute; bottom:5px; right:0"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- TWO
---------------------------------------------->
<div class="mt-4">
<!-- TITLE --------------------------------->
<div class="d-flex justify-content-center" style="position:relative; z-index:2; margin-bottom:-25px;">
<div class="card rounded-0 pb-1 px-3 text-center text-uppercase border-top-0" style="font-family:times; font-weight:900">
Subheader
</div>
</div>
<div class="card rounded-0 bg-faded text-primary h-100" style="border-top:5px solid; border-bottom:5px solid;">
<div class="row no-gutters">
<!-- WRITTEN STUFF --------------------------------->
<div class="col p-3 mt-3 text-muted">
<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>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>
<!-- CHAPTER NUMBER --------------------------------->
<div class="col-auto flex-column">
<div class="flex-grow-1 mx-auto">
<div class="card bg-transparent h-100" style="border-width:0 2px 0 0; border-style:dashed"></div>
</div>
<div class="flex-grow-2">
<div style="position:relative; z-index:2;">
<div class="card rounded-0 p-3 text-center text-primary border-bottom-0 border-right-0 h-100" style="margin:0 -1px -5px 0; border-top-left-radius:30px; border-left:5px solid; border-top:5px solid">
<!-- change the fa-2 to the "section number"! -->
<i class="fa-regular fa-2 fa-lg text-body"
style="position:absolute; bottom:5px; right:0"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- add more story sections above this line! -->
</div>
<!------------------------------------------------
LYRIC DIVIDER
------------------------------------------------->
<div class="my-4 mx-n4">
<hr class="mb-2 text-primary" style="border-top:2px solid">
<div class="card p-2 rounded-0 bg-primary border-0 text-center">
<div class="font-italic text-dark" style="font-size:90%; font-family:courier; letter-spacing:0.5px;">
lyric here...
</div>
</div>
<hr class="mt-2 text-primary" style="border-top:2px solid">
</div>
<!------------------------------------------------
RELATIONSHIP
------------------------------------------------->
<div class="lyrical_relationship">
<!-- HEADER
---------------------------------------------->
<div class="mb-n1">
<div class="text-uppercase" style="font-size:25px; letter-spacing:2px; font-family:serif; font-weight:900;">
Relationship
<i class="fa-duotone fa-heartbeat fa-sm fa-fw text-primary"></i>
</div>
</div>
<!-- SUBTITLE
---------------------------------------------->
<div class="mb-sm-5 mb-3" style="font-family:courier new; letter-spacing:0.5px;">
a short subtitle here...
</div>
<!-- RELATION ONE
---------------------------------------------->
<div class="row no-gutters mx-n1">
<div class="col-sm-12 p-1">
<div class="text-center">
<!-- IMAGE URL -->
<!--
> best if 200x200 or squared! it will auto-crop if any bigger
-->
<img src="IMG_URL_HERE"
class="img-thumbnail p-2 rounded-0"
style="width:160px;">
<!-- DELETABLE DECOR -->
<div class="hidden-xs-down" style="position:relative; margin-top:-165px; z-index:3">
<div class="mx-auto text-primary" style="border:1px solid; height:170px; width:170px; transform:rotate(45deg);"></div>
</div>
</div>
</div>
<div class="col-sm-12 p-1 mt-sm-5 mt-2">
<div class="d-flex justify-content-center" style="position:relative; z-index:2; margin-bottom:-25px;">
<div class="card rounded-0 pb-1 px-3 text-center text-uppercase border-top-0" style="font-family:times; font-weight:900">
<!-- CHARACTER PAGE -->
<a href="LINK_TO_CHARACTER" class="text-reset">
Character Name
</a>
</div>
</div>
<div class="card rounded-0 bg-faded text-primary p-3 h-100" style="border-top:5px solid;">
<div class="mt-3 text-center text-muted"><p>
<!-- STATS -->
<!--
> fa-solid ———— full heart
> fa-regular —— empty heart
-->
<i class="fa-solid fa-heart fa-fw"></i>
<i class="fa-solid fa-heart fa-fw"></i>
<i class="fa-solid fa-heart fa-fw"></i>
<i class="fa-regular fa-heart fa-fw"></i>
<i class="fa-regular fa-heart fa-fw"></i>
<!-- STATUS -->
<br><span class="font-italic" style="letter-spacing:1px">
relationship
</span>
</p></div>
<!-- SUMMARY -->
<div class="mt-3 text-muted">
<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.</p>
<p>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>
<!-- RELATION TWO
---------------------------------------------->
<div class="row no-gutters mx-n1 mt-sm-5 mt-4">
<div class="col-sm-12 p-1">
<div class="text-center">
<!-- IMAGE URL -->
<!--
> best if 200x200 or squared! it will auto-crop if any bigger
-->
<img src="IMG_URL_HERE"
class="img-thumbnail p-2 rounded-0"
style="width:160px;">
<!-- DELETABLE DECOR -->
<div class="hidden-xs-down" style="position:relative; margin-top:-165px; z-index:3">
<div class="mx-auto text-primary" style="border:1px solid; height:170px; width:170px; transform:rotate(45deg);"></div>
</div>
</div>
</div>
<div class="col-sm-12 p-1 mt-sm-5 mt-2">
<div class="d-flex justify-content-center" style="position:relative; z-index:2; margin-bottom:-25px;">
<div class="card rounded-0 pb-1 px-3 text-center text-uppercase border-top-0" style="font-family:times; font-weight:900">
<!-- CHARACTER PAGE -->
<a href="LINK_TO_CHARACTER" class="text-reset">
Character Name
</a>
</div>
</div>
<div class="card rounded-0 bg-faded text-primary p-3 h-100" style="border-top:5px solid;">
<div class="mt-3 text-center text-muted"><p>
<!-- STATS -->
<!--
> fa-solid ———— full heart
> fa-regular —— empty heart
-->
<i class="fa-solid fa-heart fa-fw"></i>
<i class="fa-solid fa-heart fa-fw"></i>
<i class="fa-solid fa-heart fa-fw"></i>
<i class="fa-regular fa-heart fa-fw"></i>
<i class="fa-regular fa-heart fa-fw"></i>
<!-- STATUS -->
<br><span class="font-italic" style="letter-spacing:1px">
relationship
</span>
</p></div>
<!-- SUMMARY -->
<div class="mt-3 text-muted">
<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.</p>
<p>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>
<!-- add more relation sections above this line! -->
</div>
<!------------------------------------------------
JIKO CREDIT DIVIDER
do not remove ty
------------------------------------------------->
<div class="mt-4 mx-n4">
<hr class="mb-2 text-primary" style="border-top:2px solid">
<div class="card p-2 rounded-0 bg-primary border-0 text-center">
<div class="font-italic text-dark" style="font-size:90%; font-family:courier; letter-spacing:0.5px;">
<a href="https://toyhou.se/18459294." class="text-dark" style="font-size:90%; font-family:courier; letter-spacing:0.5px;">
code by jiko
</a>
</div>
</div>
<hr class="mt-2 mb-0 text-primary" style="border-top:2px solid">
</div>
</div></div></div>
<!-- CODE ENDS -->