Stor8

<!-- ✦✦ 【F2U】EASY by Diadem

❥ Code Terms of Use: https://toyhou.se/32638528.

=============== ✧✧  Colours used:
TIP!: use CTRL+F [WIN] / CMD+F [MAC] to quickly find the colour and replace it ~

୨୧ BG: #c4c4c4
୨୧ Borders: #ababab
୨୧ Main Text:#424242
୨୧ Accent One: #fff
୨୧ Shadows: #838383

୨୧ Font: Monospace

✦✦ ============ feel free to change the icons of course
------>
<!------------------------------------------------------------
  
                    ꒰ა໒꒱ Container Setup

------------------------------------------------------------->
<div class="col-md-8 container p-2" style="
border-radius:6px;
border:4px double #ababab;
background-image:url(IMG_URL);
background-size:auto;
background-attachment:fixed">
<!------------------------------------------------------------
  
                    ꒰ა໒꒱ Main container

------------------------------------------------------------->
<div class="row no-gutters justify-content-center" style="column-gap:5px">
<!--------------------- Basic Information ------------------->
<div class=" hidden-sm-down " style="height:200px; width:10px;border:2px solid #ababab;"> 
</div>
<div class="col-md-8 p-2 mb-2" style="
height:100%;
background: #c4c4c4;
border: 3px solid #ababab">
<ul class="text-left pt-2" style="list-style-type:none; padding-left:0; color:#424242; font-size:10px; font-family:monospace;">

<li class="mb-2"><i class="fas fa-chevron-right" style="color:#fff"></i><span style="color:#fff"> <b>NAME_</b></span> content content content</li>

<li class="mb-2"><i class="fas fa-chevron-right" style="color:#fff"></i><span style="color:#fff"> <b>AGE_</b></span> 00yrs | 0000XX</li>

<li class="mb-2"><i class="fas fa-chevron-right" style="color:#fff"></i><span style="color:#fff"> <b>PRONOUNS_</b></span> con/tent</li>

<li class="mb-2"><i class="fas fa-chevron-right" style="color:#fff"></i><span style="color:#fff"> <b>GENDER</b></span> content</li>

<li class="mb-2"><i class="fas fa-chevron-right" style="color:#fff"></i><span style="color:#fff"> <b>ORIENTATION</b></span> content</li>

<li class="mb-2"><i class="fas fa-chevron-right" style="color:#fff"></i><span style="color:#fff"> <b>STATUS_</b></span> living / dead</li>

<li class="mb-2"><i class="fas fa-chevron-right" style="color:#fff"></i><span style="color:#fff"> <b>OCCUPATION_</b></span> content</li>
</ul>
</div>
<!--------------------- B/I : CHARA IMAGE ------------------->
<div class="col p-2 text-center mb-2" style="
height:200px;
background-image:url(IMG_URL);
background-size:cover;
background-position:center;
border: 3px solid #ababab">
<!--------------------- Char Img Decor ~ ------------------->
<i class="fa-sharp fa-solid fa-flower fa-spin" style="color:#fff; text-shadow:0 0 5px #fff; animation-duration:6s; font-size:60px; position:absolute; left:0; right:0; top:70px"></i>
<i class="fa-sharp fa-solid fa-flower fa-spin-reverse" style="color:rgba(255,255,255,0.7764705882352941);  animation-duration8s; font-size:60px; position:absolute; left:0; right:0; top:70px"></i>
</div>
</div>
<!------------------------------------------------------------
  
                   ꒰ა໒꒱ About Box
                does not scroll : keep small

------------------------------------------------------------->
<p class="text-right hidden-sm-down" style="font-size:20px;color:#ababab; font-family:monospace; position:absolute; z-index:999; right:15px; top:200px">About <i class="fa-solid fa-sparkle"></i> Chara</p>
<div class="col p-2 mb-2" style="
border: 1px solid #ababab;
background-image:url(https://i.pinimg.com/736x/12/98/c4/1298c4d8e44beeb2a2fe0424208dfff0.jpg)">
<div class="col p-2" style="background:rgba(196,196,196,0.81)">
<p class="text-left" style="color:#424242; font-family:monospace; font-size:10px">
<span style="color:#fff;">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. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
</div>
</div>
<!------------------------------------------------------------
  
                  ꒰ა໒꒱ Family + Stories row

------------------------------------------------------------->
<div class="row no-gutters" style="column-gap:6px">
<div class="col p-2" style="
border:2px solid #ababab;
background-image:url(https://i.pinimg.com/736x/f4/53/8e/f4538efab9e9ce79d0336faecbff95a2.jpg);
background-size:auto;
background-attachment:fixed">
<div class="row no-gutters justify-content-center" style="column-gap:5px;">
<!------------------------------------------------------------
  
                    ꒰ა໒꒱Relationships

------------------------------------------------------------->
<!---------------------- Relationship 1 --------------------->
<div class="col-md-6 p-2 mb-1" style="
box-shadow:0 5px 0 #838383;
border:4px solid #ababab;
height:190px;background:#c4c4c4; 
font-family:monospace; font-size:9px; 
min-height:100px;overflow:auto; 
scrollbar-color:#fff rgba(0,0,0,0); 
scrollbar-border-radius:0px;">
    
<!--------------------character 01 ----------------->
<div class="col-12 mb-2">
<div class="justify-content-between align-items-center py-2" style="line-height:1;letter-spacing:1px;">
<a href="#" style="color:#fff;font-family:monospace;font-size:11pt;">
  Character</a>
<span class="small">
<i class="fa-solid fa-rings-wedding fa-beat" style="color:#424242; text-shadow:0 0 5px #fff"></i>
</span>
</div>
<p class="text-justify" style="color:#424242;font-size:8px;font-family:monospace;"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante. 
</p>
</div>

<!--------------------character 02 ----------------->
<div class="col-12 mb-2">
<div class="justify-content-between align-items-center py-2" style="line-height:1;letter-spacing:1px;">
<a href="#" style="color:#fff;font-family:monospace;font-size:11pt;">
  Character</a>
<span class="small">
<i class="fa-solid fa-heart fa-beat" style="color:#424242; text-shadow:0 0 5px #fff"></i>
</span>
</div>
<p class="text-justify" style="color:#424242;font-size:8px;font-family:monospace;"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante. 
</p>
</div>

<!--------------------character 03 ----------------->
<div class="col-12 mb-2">
<div class="justify-content-between align-items-center py-2" style="line-height:1;letter-spacing:1px;">
<a href="#" style="color:#fff;font-family:monospace;font-size:11pt;">
  Character</a>
<span class="small">
<i class="fa-solid fa-skull fa-beat" style="color:#424242; text-shadow:0 0 5px #fff"></i>
</span>
</div>
<p class="text-justify" style="color:#424242;font-size:8px;font-family:monospace;"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante. 
</p>
</div>

<!--------------------character 04 ----------------->
<div class="col-12 mb-2">
<div class="justify-content-between align-items-center py-2" style="line-height:1;letter-spacing:1px;">
<a href="#" style="color:#fff;font-family:monospace;font-size:11pt;">
  Character</a>
<span class="small">
<i class="fa-solid fa-question fa-beat" style="color:#424242; text-shadow:0 0 5px #fff"></i>
</span>
</div>
<p class="text-justify" style="color:#424242;font-size:8px;font-family:monospace;"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante. 
</p>
</div>

<!----------------------- add more above this line --------->
</div>
<!------------------------------------------------------------
  
                    ꒰ა໒꒱Stories

------------------------------------------------------------->
<div class="col-md-5 p-2 mb-1" style="
box-shadow:0 5px 0 #838383;
border:4px solid #ababab;
height:190px;background:#c4c4c4; 
font-family:monospace; font-size:9px; 
min-height:100px;overflow:auto; 
scrollbar-color:#fff rgba(0,0,0,0); 
scrollbar-border-radius:0px;">
<!---------------- Story One - MAIN --------------->
<div class="col p-2 mb-1" style=" height:50px;
border-radius: 20px 0 0 20px;
background-image:url(IMG_URL);
background-position:center;">

<h1 class="text-center" style="margin-top:4px;"><i class="fa-sharp fa-solid fa-sparkle tooltipster" style="color:#fff; text-shadow:0 0 6px #fff" title="MAIN" data-toggle="tooltip"></i> <a href="#" target="_BLANK" style="color:#fff">Story Name</a></h1>
</div>

<!---------------- Story Two ----------------------->
<div class="col p-2 mb-1" style=" height:50px;
border-radius: 20px 0 0 20px;
background-image:url(IMG_URL);
background-position:center;">

<h1 class="text-center" style="margin-top:4px;"><i class="fa-sharp fa-solid fa-bookmark tooltipster" style="color:#fff; text-shadow:0 0 6px #fff"  title="SECONDARY" data-toggle="tooltip"></i> <a href="#" target="_BLANK" style="color:#fff">Story Name</a></h1>
</div>

<!---------------- Story Three ----------------------->
<div class="col p-2 mb-1" style=" height:50px;
border-radius: 20px 0 0 20px;
background-image:url(IMG_URL);
background-position:center;">

<h1 class="text-center" style="margin-top:4px;"><i class="fa-sharp fa-solid fa-key tooltipster" style="color:#fff; text-shadow:0 0 6px #fff"  title="TERTIARY" data-toggle="tooltip"></i> <a href="#" target="_BLANK" style="color:#fff">Story Name</a></h1>
</div>

<!---------------- Story Four ----------------------->
<div class="col p-2 mb-1" style=" height:50px;
border-radius: 20px 0 0 20px;
background-image:url(IMG_URL);
background-position:center;">

<h1 class="text-center" style="margin-top:4px;"><i class="fa-sharp fa-solid fa-skull tooltipster" style="color:#fff; text-shadow:0 0 6px #fff"  title="QUATERNARY" data-toggle="tooltip"></i> <a href="#" target="_BLANK" style="color:#fff">Story Name</a></h1>
</div>

<!------------------- add more above this line ----------->
</div>
<!----------------------- End of Family/Stories ------------->
</div>
</div>
<!----------------------- light decor ----------------------->
<div class=" hidden-sm-down " style="height:230px; width:10px;border:2px solid #ababab;"> 
</div>
<!------------------------------------------------------------
  
                    ꒰ა໒꒱ End of code + creds

------------------------------------------------------------->
</div>
<!------------------------------------------------------------
  
                    ꒰ა໒꒱ Credits
                    [ do not remove ]

------------------------------------------------------------->
<p class="text-center" style="margin-top:-7px"><a href="/diadem" target="_BLANK" title="code by beel" data-toggle="tooltip" style="text-decoration:none; color:#000; font-size:9px; font-family:monospace">✦✦✦</a></p>
</div>
</div>