<!--
accent color: f5476a
to quickly replace:
select color code, contol+F, click [all], insert new color code
icons:
fontawesome.com
-->
<div class="card p-4" style="border: 0px solid #9899e2 ; border-radius:16px; background: #f5476a;">
<!-- name --->
<h1 style="color: white; font-size:32px; font-weight:800; letter-spacing:4px;" class="text-uppercase">
name
surname
<!-- change the icon -->
<i class="fa-solid fa-leaf-maple"></i>
</h1>
<!-- line/quote/title-->
<p style="color: white; font-weight:700; margin-bottom: 10px;" class="text-uppercase">
quote/line/title here. Lorem ipsum dolor sit amet, consectetur adipiscing elit
</p>
<!--
<div class="d-flex justify-content-between">
<div class="card p-3 m-2" style="border: 2px solid #9899e2; border-radius:10px; font-weight:900">basics</div>
<div class="card p-3 m-2" style="border: 2px solid #9899e2; border-radius:10px; font-weight:900">design</div>
<div class="card p-3 m-2" style="border: 2px solid #9899e2; border-radius:10px; font-weight:900">about</div>
<div class="card p-3 m-2" style="border: 2px solid #9899e2; border-radius:10px; font-weight:900">trivia</div>
<div class="card p-3 m-2" style="border: 2px solid #9899e2; border-radius:10px; font-weight:900">links</div>
</div>
-->
<!--
<div class="card p-2" style="border: 2px solid #a9cef8; border-radius:10px; overflow:auto;">
<p style="font-weight:900; letter-spacing:2px; font-size:2rem; text-align: center;">
NAME
</p>
</div>
-->
<div class="card p-3" style="border: 0px solid #9899e2; border-radius:10px; height: 560px; overflow:auto;">
<!--title: intro----------------------------------------------------------------------------------------------------------------------------------->
<div class="card p-3 mb-3 " style="border: 0px; border-radius:16px; background: #f5476a;">
<h1 class="mb-0" style="color: white;">
<i class="fa-solid fa-star"></i>
Intro</h1>
</div>
<div class="row">
<div class="col-sm-3 mb-0">
<div class="sticky-top" style="position:sticky">
<!---- profile image------------>
<center>
<img class="p-1 mx-auto mb-2"
src="https://cdn.discordapp.com/attachments/965593531311849493/1017833553091903548/genshin-impact-kazuha-picture349032-.jpg"
style=" border-radius: 10px; border: 2px solid #f5476a; user-drag: none;">
</center>
<!---- basic info------------>
<hr class="m-1">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Name</span>
<span>content</span>
</div>
<hr class="m-1">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Age</span>
<span>content</span>
</div>
<hr class="m-1">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Birthdate</span>
<span>content</span>
</div>
<hr class="m-1">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Gender</span>
<span>content</span>
</div>
<hr class="m-1">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Pronouns</span>
<span>content</span>
</div>
<hr class="m-1">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Orientation</span>
<span>content</span>
</div>
<hr class="m-1">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Species</span>
<span>content</span>
</div>
<hr class="m-1">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Race</span>
<span>content</span>
</div>
<hr class="m-1">
</div>
</div>
<div class="col-sm-9 mb-0">
<div class="sticky-top" style="position:sticky">
<!-- extra basic info-->
<div class="row">
<div class="col-sm-6 mb-0">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Nicknames</span>
<span>content</span>
</div>
<hr class="m-1">
</div>
<div class="col-sm-6 mb-0">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Titles</span>
<span>content</span>
</div>
<hr class="m-1">
</div>
<div class="col-sm-6 mb-0">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Occupation</span>
<span>content</span>
</div>
<hr class="m-1">
</div>
<div class="col-sm-6 mb-0">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Affiliation</span>
<span>content</span>
</div>
<hr class="m-1">
</div>
<div class="col-sm-6 mb-0">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Religion</span>
<span>content</span>
</div>
<hr class="m-1">
</div>
<div class="col-sm-6 mb-0">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Alignment</span>
<span>content</span>
</div>
<hr class="m-1">
</div>
<div class="col-sm-6 mb-0">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">MBTI</span>
<span>content</span>
</div>
<hr class="m-1">
</div>
<div class="col-sm-6 mb-0">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Zodiac</span>
<span>content</span>
</div>
<hr class="m-1">
</div>
<div class="col-sm-6 mb-0">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Residence</span>
<span>content</span>
</div>
<hr class="m-1">
</div>
<div class="col-sm-6 mb-0">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Dominant hand</span>
<span>content</span>
</div>
<hr class="m-1">
</div>
<div class="col-sm-6 mb-0">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Relationship status</span>
<span>content</span>
</div>
<hr class="m-1">
</div>
<div class="col-sm-6 mb-0">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Status</span>
<span>content</span>
</div>
<hr class="m-1">
</div>
</div>
<!-- intro -->
<hr>
<h1> <i class="fa-solid fa-bookmark"></i> Introduction</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Imperdiet dui accumsan sit amet nulla facilisi morbi tempus. Mattis rhoncus urna neque viverra justo nec ultrices dui. Lacus vestibulum sed arcu non odio euismod lacinia at. Pellentesque nec nam aliquam sem et tortor consequat id. Aliquam malesuada bibendum arcu vitae. Tortor vitae purus faucibus ornare. Lacus vel facilisis volutpat est velit. Commodo nulla facilisi nullam vehicula ipsum. At ultrices mi tempus imperdiet nulla malesuada. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor. Orci sagittis eu volutpat odio.
</p>
<hr>
<!-- likes and dislikes-->
<div class="row">
<div class="col-sm-4 mb-0">
<p style= "font-weight:bold;">
<i class="fa-light fa-heart"></i>
Likes
</p>
<ul>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
<div class="col-sm-4 mb-0">
<p style= "font-weight:bold;">
<i class="fa-light fa-heart-crack"></i>
Dislikes
</p>
<ul>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
<div class="col-sm-4 mb-0">
<p style= "font-weight:bold;">
<i class="fa-light fa-gamepad"></i>
Hobbies
</p>
<ul>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
<hr>
<!--personality------------>
<h1> <i class="fa-solid fa-bookmark"></i> Personality</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Imperdiet dui accumsan sit amet nulla facilisi morbi tempus. Mattis rhoncus urna neque viverra justo nec ultrices dui. Lacus vestibulum sed arcu non odio euismod lacinia at. Pellentesque nec nam aliquam sem et tortor consequat id. Aliquam malesuada bibendum arcu vitae. Tortor vitae purus faucibus ornare. Lacus vel facilisis volutpat est velit. Commodo nulla facilisi nullam vehicula ipsum. At ultrices mi tempus imperdiet nulla malesuada. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor. Orci sagittis eu volutpat odio.
</p>
<hr>
<!-- peronality stats---
solid: <i class="fa-solid fa-star"></i>
light: <i class="fa-light fa-star"></i>
-->
<div class="row">
<div class="col-sm-6 mb-0">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Extroversion</span>
<span>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-light fa-star"></i>
<i class="fa-light fa-star"></i>
<i class="fa-light fa-star"></i>
</span>
</div>
<hr class="m-1">
</div>
<div class="col-sm-6 mb-0">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Kindness</span>
<span>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-light fa-star"></i>
<i class="fa-light fa-star"></i>
<i class="fa-light fa-star"></i>
</span>
</div>
<hr class="m-1">
</div>
<div class="col-sm-6 mb-0">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Intellect</span>
<span>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-light fa-star"></i>
<i class="fa-light fa-star"></i>
<i class="fa-light fa-star"></i>
</span>
</div>
<hr class="m-1">
</div>
<div class="col-sm-6 mb-0">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Courage</span>
<span>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-light fa-star"></i>
<i class="fa-light fa-star"></i>
<i class="fa-light fa-star"></i>
</span>
</div>
<hr class="m-1">
</div>
<div class="col-sm-6 mb-0">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Confidence</span>
<span>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-light fa-star"></i>
<i class="fa-light fa-star"></i>
<i class="fa-light fa-star"></i>
</span>
</div>
<hr class="m-1">
</div>
<div class="col-sm-6 mb-0">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Humor</span>
<span>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-light fa-star"></i>
<i class="fa-light fa-star"></i>
<i class="fa-light fa-star"></i>
</span>
</div>
<hr class="m-1">
</div>
<div class="col-sm-6 mb-0">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Honesty</span>
<span>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-light fa-star"></i>
<i class="fa-light fa-star"></i>
<i class="fa-light fa-star"></i>
</span>
</div>
<hr class="m-1">
</div>
<div class="col-sm-6 mb-0">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Charisma</span>
<span>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-light fa-star"></i>
<i class="fa-light fa-star"></i>
<i class="fa-light fa-star"></i>
</span>
</div>
<hr class="m-1">
</div>
<div class="col-sm-6 mb-0">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Patience</span>
<span>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-light fa-star"></i>
<i class="fa-light fa-star"></i>
<i class="fa-light fa-star"></i>
</span>
</div>
<hr class="m-1">
</div>
<div class="col-sm-6 mb-0">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Optimism</span>
<span>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-light fa-star"></i>
<i class="fa-light fa-star"></i>
<i class="fa-light fa-star"></i>
</span>
</div>
<hr class="m-1">
</div>
</div>
</div>
</div>
</div>
<!--title: design------------------------------------------------------------------------------------------------------------------------------------>
<div class="card p-3 mb-3 my-3" style="border: 0px; border-radius:16px; background: #f5476a;">
<h1 class="mb-0" style="color: white;">
<i class="fa-solid fa-swatchbook"></i>
Design</h1>
</div>
<div class="row">
<div class="col-sm-4 mb-0">
<div class="sticky-top" style="position:sticky">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Height</span>
<span>content</span>
</div>
<hr class="m-1">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Weight</span>
<span>content</span>
</div>
<hr class="m-1">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Build</span>
<span>content</span>
</div>
<hr class="m-1">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Eyes</span>
<span>description</span>
</div>
<hr class="m-1">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Hair</span>
<span>description</span>
</div>
<hr class="m-1">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Skin</span>
<span>description</span>
</div>
<hr class="m-1">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">[trait/item]</span>
<span>description</span>
</div>
<hr class="m-1">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">[trait/item]</span>
<span>description</span>
</div>
<hr class="m-1">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">[trait/item]</span>
<span>description</span>
</div>
<hr class="m-1">
<hr>
<h3> <i class="fa-solid fa-pen-clip"></i> Design notes</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Imperdiet dui accumsan sit amet nulla facilisi morbi tempus. </li>
<li>Mattis rhoncus urna neque viverra justo nec ultrices dui. Lacus vestibulum sed arcu non odio euismod lacinia at. </li>
<li>Pellentesque nec nam aliquam sem et tortor consequat id. Aliquam malesuada bibendum arcu vitae. Tortor vitae purus faucibus ornare. </li>
</ul>
</div>
</div>
<div class="col-sm-8 mb-0">
<div class="sticky-top" style="position:sticky">
<div class="m-3" style="letter-spacing:10px;" >
<!-- color palette----------->
<span style="color:
#E2E2E2;" data-toggle="tooltip" title=" [content] | #colorcode"><i class="fa-solid fa-palette fa-3x"></i></span>
<span style="color:
#CFCFCF;" data-toggle="tooltip" title=" [content] | #colorcode"><i class="fa-solid fa-palette fa-3x"></i></span>
<span style="color:
#BCBCBC;" data-toggle="tooltip" title=" [content] | #colorcode"><i class="fa-solid fa-palette fa-3x"></i></span>
<span style="color:
#A9A9A9;" data-toggle="tooltip" title=" [content] | #colorcode"><i class="fa-solid fa-palette fa-3x"></i></span>
<span style="color:
#959595;" data-toggle="tooltip" title=" [content] | #colorcode"><i class="fa-solid fa-palette fa-3x"></i></span>
<span style="color:
#828282;" data-toggle="tooltip" title=" [content] | #colorcode"><i class="fa-solid fa-palette fa-3x"></i></span>
<span style="color:
#6F6F6F;" data-toggle="tooltip" title=" [content] | #colorcode"><i class="fa-solid fa-palette fa-3x"></i></span>
</div>
<!-- reference sheet image------------>
<img class="p-1 mx-auto mb-2"
src="https://images.unsplash.com/photo-1433259651738-0e74537aa8b5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1738&q=80"
style=" border-radius: 10px; user-drag: none;">
<h3> <i class="fa-solid fa-shirt"></i> Appearance</h3>
<p> description. Eu lobortis elementum nibh tellus molestie. Netus et malesuada fames ac turpis egestas sed tempus. Amet porttitor eget dolor morbi non arcu risus quis varius. Morbi enim nunc faucibus a pellentesque sit amet porttitor. Tincidunt lobortis feugiat vivamus at augue. Aliquet nibh praesent tristique magna sit. Malesuada pellentesque elit eget gravida cum sociis natoque penatibus et. Morbi leo urna molestie at elementum eu facilisis sed. Ultrices in iaculis nunc sed augue lacus viverra. In cursus turpis massa tincidunt dui ut ornare.</p>
</ul>
</div>
</div>
</div>
<!--title: about-------------------------------------------------------------------------------------------------------------------------------------------->
<div class="card p-3 mb-3 my-3" style="border: 0px; border-radius:16px; background: #f5476a;">
<h1 class="mb-0" style="color: white;">
<i class="fa-solid fa-books"></i>
About</h1>
</div>
<div class="row">
<div class="col-sm-8 mb-0">
<div class="sticky-top" style="position:sticky">
<h1> <i class="fa-solid fa-bookmark"></i> Header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Imperdiet dui accumsan sit amet nulla facilisi morbi tempus. Mattis rhoncus urna neque viverra justo nec ultrices dui. Lacus vestibulum sed arcu non odio euismod lacinia at. Pellentesque nec nam aliquam sem et tortor consequat id. Aliquam malesuada bibendum arcu vitae. Tortor vitae purus faucibus ornare. Lacus vel facilisis volutpat est velit. Commodo nulla facilisi nullam vehicula ipsum. At ultrices mi tempus imperdiet nulla malesuada. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor. Orci sagittis eu volutpat odio.</p>
<h2> <i class="fa-light fa-bookmark"></i> SubHeader</h2>
<p> Adipiscing bibendum est ultricies integer quis auctor elit. Id faucibus nisl tincidunt eget nullam non nisi est. Eget dolor morbi non arcu risus quis varius quam. Consectetur lorem donec massa sapien faucibus et. Amet purus gravida quis blandit turpis cursus in. Sed blandit libero volutpat sed. Tortor vitae purus faucibus ornare suspendisse sed nisi lacus. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin. Imperdiet proin fermentum leo vel orci. Tristique magna sit amet purus gravida. Adipiscing vitae proin sagittis nisl rhoncus. Id eu nisl nunc mi. Elementum tempus egestas sed sed risus pretium quam.</p>
<h1> <i class="fa-solid fa-bookmark"></i> Header</h1>
<p>Et malesuada fames ac turpis egestas maecenas. Sit amet risus nullam eget felis eget nunc lobortis. Amet consectetur adipiscing elit ut aliquam purus sit amet. Vitae et leo duis ut diam quam nulla porttitor. Senectus et netus et malesuada fames. Dui nunc mattis enim ut tellus elementum sagittis. Donec ultrices tincidunt arcu non sodales neque sodales. Ipsum suspendisse ultrices gravida dictum. Facilisis magna etiam tempor orci eu. Elit at imperdiet dui accumsan sit amet nulla. Lacus luctus accumsan tortor posuere ac. Vel facilisis volutpat est velit egestas dui id.</p>
<p>Et malesuada fames ac turpis egestas maecenas. Sit amet risus nullam eget felis eget nunc lobortis. Amet consectetur adipiscing elit ut aliquam purus sit amet. Vitae et leo duis ut diam quam nulla porttitor. Senectus et netus et malesuada fames. Dui nunc mattis enim ut tellus elementum sagittis. Donec ultrices tincidunt arcu non sodales neque sodales. Ipsum suspendisse ultrices gravida dictum. Facilisis magna etiam tempor orci eu. Elit at imperdiet dui accumsan sit amet nulla. Lacus luctus accumsan tortor posuere ac. Vel facilisis volutpat est velit egestas dui id.</p>
</div>
</div>
<div class="col-sm-4 mb-0">
<div class="sticky-top" style="position:sticky">
<!--decoration image----->
<img class="p-1 mx-auto mb-2"
src="https://images.unsplash.com/photo-1433259651738-0e74537aa8b5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1738&q=80" style=" border-radius: 10px; user-drag: none;">
</div>
</div>
</div>
<hr>
<!--title: trivia-------------------------------------------------------------------------------------------------------------------------------------------->
<div class="card p-3 mb-3 my-3" style="border: 0px; border-radius:16px; background: #f5476a;">
<h1 class="mb-0" style="color: white;">
<i class="fa-solid fa-circle-info"></i>
Trivia</h1>
</div>
<div class="row">
<div class="col-sm-12 mb-0">
<div class="sticky-top" style="position:sticky">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aenean pharetra magna ac placerat vestibulum lectus mauris ultrices eros. </li>
<li>Eget felis eget nunc lobortis mattis aliquam faucibus. </li>
<li>Pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus. Elementum eu facilisis sed odio morbi quis. Sodales ut etiam sit amet nisl purus. </li>
<li>Sed viverra ipsum nunc aliquet. Convallis aenean et tortor at risus viverra adipiscing. </li>
<li>Ullamcorper eget nulla facilisi etiam dignissim diam quis enim lobortis. Aenean sed adipiscing diam donec. Neque viverra justo nec ultrices dui sapien eget mi proin.</li>
<li>Aenean pharetra magna ac placerat vestibulum lectus mauris ultrices eros.</li>
<ul>
</div>
</div>
</div>
<!--- section:favorites---------------------------------------------------------------------------------------------------------------------------------------------->
<div class="card p-3 mb-3 my-3" style="border: 0px; border-radius:16px; background: #f5476a;">
<h1 class="mb-0" style="color: white;">
<i class="fa-solid fa-heart-pulse"></i>
Favorites</h1>
</div>
<div class="row">
<div class="col-sm-3 mb-0">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Food</span>
<span>content</span>
</div>
<hr class="m-1">
</div>
<div class="col-sm-3 mb-0">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Drink</span>
<span>content</span>
</div>
<hr class="m-1">
</div>
<div class="col-sm-3 mb-0">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Color</span>
<span>content</span>
</div>
<hr class="m-1">
</div>
<div class="col-sm-3 mb-0">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Time of day</span>
<span>content</span>
</div>
<hr class="m-1">
</div>
<div class="col-sm-3 mb-0">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Season</span>
<span>content</span>
</div>
<hr class="m-1">
</div>
<div class="col-sm-3 mb-0">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Weather</span>
<span>content</span>
</div>
<hr class="m-1">
</div>
<div class="col-sm-3 mb-0">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Clothing</span>
<span>content</span>
</div>
<hr class="m-1">
</div>
<div class="col-sm-3 mb-0">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Animal</span>
<span>content</span>
</div>
<hr class="m-1">
</div>
<div class="col-sm-3 mb-0">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Place</span>
<span>content</span>
</div>
<hr class="m-1">
</div>
<div class="col-sm-3 mb-0">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Music</span>
<span>content</span>
</div>
<hr class="m-1">
</div>
<div class="col-sm-3 mb-0">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Object</span>
<span>content</span>
</div>
<hr class="m-1">
</div>
<div class="col-sm-3 mb-0">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Genre</span>
<span>content</span>
</div>
<hr class="m-1">
</div>
</div>
<!--title: combat--------------------------------------------------------------------------------------------------------------------------------->
<div class="card p-3 mb-3 my-3" style="border: 0px; border-radius:16px; background: #f5476a;">
<h1 class="mb-0" style="color: white;">
<i class="fa-solid fa-swords"></i>
Combat</h1>
</div>
<div class="row">
<div class="col-sm-6 mb-0">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Tactic</span>
<span>content</span>
</div>
<hr class="m-1">
</div>
<div class="col-sm-6 mb-0">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Role</span>
<span>content</span>
</div>
<hr class="m-1">
</div>
<div class="col-sm-6 mb-0">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Weapon</span>
<span>content</span>
</div>
<hr class="m-1">
</div>
<div class="col-sm-6 mb-0">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Distance</span>
<span>content</span>
</div>
<hr class="m-1">
</div>
</div>
<hr>
<h1> <i class="fa-solid fa-bookmark"></i>
Skills </h1>
<hr class="m-1">
<div class="row">
<div class="col-sm-6 mb-0">
<h3>
skill name
<i class="fa-light fa-burst"></i> </h3>
<p> <i class="fa-solid fa-chevrons-right"></i>
skill description. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aenean pharetra magna ac placerat vestibulum lectus mauris ultrices eros. Eget felis eget nunc lobortis mattis aliquam faucibus. </p>
<hr class="m-1">
</div>
<div class="col-sm-6 mb-0">
<h3>
skill name
<i class="fa-light fa-burst"></i> </h3>
<p> <i class="fa-solid fa-chevrons-right"></i>
skill description. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aenean pharetra magna ac placerat vestibulum lectus mauris ultrices eros. Eget felis eget nunc lobortis mattis aliquam faucibus. </p>
<hr class="m-1">
</div>
<div class="col-sm-6 mb-0">
<h3>
skill name
<i class="fa-light fa-burst"></i> </h3>
<p> <i class="fa-solid fa-chevrons-right"></i>
skill description. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aenean pharetra magna ac placerat vestibulum lectus mauris ultrices eros. Eget felis eget nunc lobortis mattis aliquam faucibus. </p>
<hr class="m-1">
</div>
<div class="col-sm-6 mb-0">
<h3>
skill name
<i class="fa-light fa-burst"></i> </h3>
<p> <i class="fa-solid fa-chevrons-right"></i>
skill description. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aenean pharetra magna ac placerat vestibulum lectus mauris ultrices eros. Eget felis eget nunc lobortis mattis aliquam faucibus. </p>
<hr class="m-1">
</div>
</div>
<hr>
<!-- combat stats---
solid: <i class="fa-solid fa-star"></i>
light: <i class="fa-light fa-star"></i>
-->
<div class="row">
<div class="col-sm-6 mb-0">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Attack</span>
<span>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-light fa-star"></i>
<i class="fa-light fa-star"></i>
<i class="fa-light fa-star"></i>
</span>
</div>
<hr class="m-1">
</div>
<div class="col-sm-6 mb-0">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Attack speed</span>
<span>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-light fa-star"></i>
<i class="fa-light fa-star"></i>
<i class="fa-light fa-star"></i>
</span>
</div>
<hr class="m-1">
</div>
<div class="col-sm-6 mb-0">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Movement speed</span>
<span>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-light fa-star"></i>
<i class="fa-light fa-star"></i>
<i class="fa-light fa-star"></i>
</span>
</div>
<hr class="m-1">
</div>
<div class="col-sm-6 mb-0">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Defense</span>
<span>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-light fa-star"></i>
<i class="fa-light fa-star"></i>
<i class="fa-light fa-star"></i>
</span>
</div>
<hr class="m-1">
</div>
<div class="col-sm-6 mb-0">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Health</span>
<span>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-light fa-star"></i>
<i class="fa-light fa-star"></i>
<i class="fa-light fa-star"></i>
</span>
</div>
<hr class="m-1">
</div>
<div class="col-sm-6 mb-0">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Stamina</span>
<span>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-light fa-star"></i>
<i class="fa-light fa-star"></i>
<i class="fa-light fa-star"></i>
</span>
</div>
<hr class="m-1">
</div>
<div class="col-sm-6 mb-0">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Mastery</span>
<span>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-light fa-star"></i>
<i class="fa-light fa-star"></i>
<i class="fa-light fa-star"></i>
</span>
</div>
<hr class="m-1">
</div>
<div class="col-sm-6 mb-0">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Accuracy</span>
<span>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-light fa-star"></i>
<i class="fa-light fa-star"></i>
<i class="fa-light fa-star"></i>
</span>
</div>
<hr class="m-1">
</div>
</div>
<!--- section:Links---------------------------------------------------------------------------------------------------------------------------------------------->
<div class="card p-3 mb-3 my-3" style="border: 0px; border-radius:16px; background: #f5476a;">
<h1 class="mb-0" style="color: white;">
<i class="fa-solid fa-link"></i>
Links</h1>
</div>
<div class="row">
<!-- character link------------>
<div class="col-sm-6 mb-0">
<div class="row">
<div class="col-sm-3 mb-0">
<!-- image--->
<img class="p-1 mx-auto mb-2" src="https://cdn.discordapp.com/attachments/965593531311849493/1017824043237388378/grant-mccurdy-KOKxOB8550Q-unsplash.jpg" style=" max-height: 150px ; border-radius: 10px; border: 2px solid #f5476a; user-drag: none;">
</div>
<div class="col-sm-9 mb-0">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Name</span>
<span>relation</span>
</div>
<hr class="m-1">
<div style= "height: 100px; overflow:auto;">
<p>description. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aenean pharetra magna ac placerat vestibulum lectus mauris ultrices eros. Eget felis eget nunc lobortis mattis aliquam faucibus. Pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus. Elementum eu facilisis sed odio morbi quis. Sodales ut etiam sit amet nisl purus. </p>
</div>
<hr class="m-1">
</div>
</div>
</div>
<!--- end character link-->
<!-- character link------------>
<div class="col-sm-6 mb-0">
<div class="row">
<div class="col-sm-3 mb-0">
<!-- image--->
<img class="p-1 mx-auto mb-2" src="https://cdn.discordapp.com/attachments/965593531311849493/1017824043237388378/grant-mccurdy-KOKxOB8550Q-unsplash.jpg" style=" max-height: 150px ; border-radius: 10px; border: 2px solid #f5476a; user-drag: none;">
</div>
<div class="col-sm-9 mb-0">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Name</span>
<span>relation</span>
</div>
<hr class="m-1">
<div style= "height: 100px; overflow:auto;">
<p>description. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aenean pharetra magna ac placerat vestibulum lectus mauris ultrices eros. Eget felis eget nunc lobortis mattis aliquam faucibus. Pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus. Elementum eu facilisis sed odio morbi quis. Sodales ut etiam sit amet nisl purus. </p>
</div>
<hr class="m-1">
</div>
</div>
</div>
<!--- end character link-->
<!-- character link------------>
<div class="col-sm-6 mb-0">
<div class="row">
<div class="col-sm-3 mb-0">
<!-- image--->
<img class="p-1 mx-auto mb-2" src="https://cdn.discordapp.com/attachments/965593531311849493/1017824043237388378/grant-mccurdy-KOKxOB8550Q-unsplash.jpg" style=" max-height: 150px ; border-radius: 10px; border: 2px solid #f5476a; user-drag: none;">
</div>
<div class="col-sm-9 mb-0">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Name</span>
<span>relation</span>
</div>
<hr class="m-1">
<div style= "height: 100px; overflow:auto;">
<p>description. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aenean pharetra magna ac placerat vestibulum lectus mauris ultrices eros. Eget felis eget nunc lobortis mattis aliquam faucibus. Pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus. Elementum eu facilisis sed odio morbi quis. Sodales ut etiam sit amet nisl purus. </p>
</div>
<hr class="m-1">
</div>
</div>
</div>
<!--- end character link-->
<!-- character link------------>
<div class="col-sm-6 mb-0">
<div class="row">
<div class="col-sm-3 mb-0">
<!-- image--->
<img class="p-1 mx-auto mb-2" src="https://cdn.discordapp.com/attachments/965593531311849493/1017824043237388378/grant-mccurdy-KOKxOB8550Q-unsplash.jpg" style=" max-height: 150px ; border-radius: 10px; border: 2px solid #f5476a; user-drag: none;">
</div>
<div class="col-sm-9 mb-0">
<div class="d-flex justify-content-between">
<span style= "font-weight:bold;">Name</span>
<span>relation</span>
</div>
<hr class="m-1">
<div style= "height: 100px; overflow:auto;">
<p>description. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aenean pharetra magna ac placerat vestibulum lectus mauris ultrices eros. Eget felis eget nunc lobortis mattis aliquam faucibus. Pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus. Elementum eu facilisis sed odio morbi quis. Sodales ut etiam sit amet nisl purus. </p>
</div>
<hr class="m-1">
</div>
</div>
</div>
<!--- end character link-->
</div>
<!-- end box-->
</div>
</div>
<!-- code credit----->
<p style="font-size:12px">code by <a href="https://toyhou.se/EunaCodes" style="color: #f5476a"><i class="fa-solid fa-bolt-lightning"></i> EUNA</p>
<!-- code credit----->
