Stor8

<!-- ✦✦ 【F2U】NOTED by diadem

❥ Code Terms of Use: https://toyhou.se/32638528.
❥ Troubleshoot Server: https://discord.gg/QdyvxFjuhe
❥ Ribbon Masterlist: 
https://toyhou.se/20187371.ribbon-masterlist

꒰ა ˚₊ ✧・┈・╴﹕꒰ ᐢ｡- ༝ -｡ᐢ ꒱﹕╴・┈・𐑺 ‧₊˚໒꒱

♥︎ NOTES:
    - This code uses Variables. Meaning that if you edit
the hex/rgba codes and font family type, it'll change every
instance of the colours/fonts for the rest of the code

    - As a reminder, do not remove the parenthesis for image 
URLs. This is to make sure they work.

꒰ა ˚₊ ✧・┈・╴﹕꒰ ᐢ｡- ༝ -｡ᐢ ꒱﹕╴・┈・𐑺 ‧₊˚໒꒱

♥︎ DESCRIPTION OF VARIABLES:
    this is only to tell what each variable is responsible for
and to make your editing a little easier.

    bg: background
    text: primary text colour
    text2: accent text colour
    font: font family [unless CSS, must be TH Safe]
    acc: accent colour
    muted: muted colour
    
    notebook: inner notebook board colour
    notebook-dark: notebook board border colour
    line: page/paper line colour
    tape: decortive tape colour
    margin-line: far left line (like notebook paper)
    photo-bg: photograph background colour
    photo-border: border around photograph
    shadow: universal shadow [text + box]
    
    highlight: for highlighter divider + on L/D/S/P headers
    highlight-strong: darker accent colour for divider
    highlight-opacity: opacity of divider
    highlight-thickness: thickness of divider
    highlighter-dislike: line specifically for the dislike
    
    sticky: sticky note background
    sticky2: sticky note tape
    
꒰ა ˚₊ ✧・┈・╴﹕꒰ ᐢ｡- ༝ -｡ᐢ ꒱﹕╴・┈・𐑺 ‧₊˚໒꒱

♥︎ QUICK FINDS:
    CMD+F [MAC] / CTRL+F [WIN]!

> IMGLINK = put an img here
------>
<!-- ======== ✦✦ Variables! Edit here ============ ✦✦ -->
<div id="content-variables" style="

    --bg:#fffefa;
    --text:#464243;
    --text2:#fdfbf2;
    --font:courier;
    --acc:#312e2f;
    --muted:#434141;
    
    --notebook:#d6c3a3;
    --notebook-dark:#b8a07a;
    --line:#e9e4dc;
    --tape:#efe3c8;
    --margin-line:#d9b3b3;
    --photo-bg:#f6f2ea;
    --photo-border:#d8d2c8;
    --shadow:rgba(0,0,0,.18);
    
    --highlight:#b7ff6a;
    --highlight-strong:#8be170;
    --highlight-opacity:.7;
    --highlight-thickness:14px;
    --highlighter-dislike:#f45b70;
    
    --sticky:#fff9a6;
    --sticky2:#ffe8a3;
 
">

<!-- ==================================================== ✦✦
                       holding container
✧✧ ======================================================= -->
<div class="p-1 container" style="
background:var(--notebook);
padding:14px;
border-radius:8px;
box-shadow:0 6px 14px var(--shadow);
width:800px; max-width:100%;
font-family:var(--font);">

<!--                    inner paper                      -->
<div style="
background:
repeating-linear-gradient(to bottom, var(--bg), var(--bg) 24px,
var(--line) 25px);
border:2px solid var(--notebook-dark);
border-radius:6px;
padding:18px 16px 18px 26px;
position:relative;
color:var(--text);
min-height:500px;">

<div style="
position:absolute;
top:0; bottom:0; left:18px;
width:2px;
background:var(--margin-line);
opacity:.8;"></div>
<!-- ==================================================== ✦✦
                       Content goes here
✧✧ ====================================================== -->
<div style="position:relative; z-index:2;">

<!-- ==================================================== ✦✦
                    ROW / Basics and photo
✧✧ ====================================================== -->
<div class="row no-gutters" style="column-gap:10px">
    
<!-- ============== COL 1 / BASE ======================= -->
<div class="col-md-8">

<!--            game logo           -->
<div class="text-center">
<img src="IMGLINK" class=" mb-3" style="
max-width:200px; filter:grayscale(100)">
</div>

<!--            quote           -->
<h3 class="text-center" style="
color:var(--text);
font-family: var(--font);
text-shadow:1px 1px 2px var(--shadow)">
    <img src="IMGLINK" style="max-width:20px"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
</h3>

<!-- ================== [ DIVIDER ] ==================== -->
<div class="mb-4" style="
margin:14px 0;
height:var(--highlight-thickness);
background:
linear-gradient(to right, transparent 0%, 
var(--highlight) 10%, var(--highlight-strong) 45%,
var(--highlight) 80%, transparent 100%);
opacity:var(--highlight-opacity);
border-radius:6px;"></div>
<!-- ==================================================== ✦✦
                       ROW / BASICS PT2
✧✧ ====================================================== -->
<div class="row no-gutters mb-2" style="column-gap:10px">

<!-- ================== [ COL ONE ] ==================== -->
<div class="col-md-6">

<!--    name        -->
<div class="justify-content-between mb-0">
<div class="col-auto my-auto text-center" style="
border:1px solid var(--text);
font-family:var(--font); color:var(--text);
font-size:12px">
    <b>name</b>
</div> 
<div class="col-auto p-1" style="
font-family:var(--font); color:var(--text);
font-size:12px; text-shadow:1px 1px 3px var(--shadow)">
    content content
</div> 
</div>

<!--    age        -->
<div class="justify-content-between mb-0">
<div class="col-auto my-auto text-center" style="
border:1px solid var(--text);
font-family:var(--font); color:var(--text);
font-size:12px; ">
    <b>age</b>
</div> 
<div class="col-auto p-1" style="
font-family:var(--font); color:var(--text);
font-size:12px; text-shadow:1px 1px 3px var(--shadow)">
    00 yrs old
</div> 
</div>

<!--    date of birth        -->
<div class="justify-content-between mb-0">
<div class="col-auto my-auto text-center" style="
border:1px solid var(--text);
font-family:var(--font); color:var(--text);
font-size:12px; ">
    <b>DOB</b>
</div> 
<div class="col-auto p-1" style="
font-family:var(--font); color:var(--text);
font-size:12px; text-shadow:1px 1px 3px var(--shadow)">
    00/00/00
</div> 
</div>

<!--    species        -->
<div class="justify-content-between mb-0">
<div class="col-auto my-auto text-center" style="
border:1px solid var(--text);
font-family:var(--font); color:var(--text);
font-size:12px; ">
    <b>species</b>
</div> 
<div class="col-auto p-1" style="
font-family:var(--font); color:var(--text);
font-size:12px; text-shadow:1px 1px 3px var(--shadow)">
    or race
</div> 
</div>
<!-- ================= End of COL ONE ================= -->
</div>

<!-- ================== [ COL TWO ] ==================== -->
<div class="col">

<!--    sexuality        -->
<div class="justify-content-between mb-0">
<div class="col-auto my-auto text-center" style="
border:1px solid var(--text);
font-family:var(--font); color:var(--text);
font-size:12px">
    <b>sexuality</b>
</div> 
<div class="col-auto p-1" style="
font-family:var(--font); color:var(--text);
font-size:12px; text-shadow:1px 1px 3px var(--shadow)">
    content
</div> 
</div>

<!--    height        -->
<div class="justify-content-between mb-0">
<div class="col-auto my-auto text-center" style="
border:1px solid var(--text);
font-family:var(--font); color:var(--text);
font-size:12px; ">
    <b>height</b>
</div> 
<div class="col-auto p-1" style="
font-family:var(--font); color:var(--text);
font-size:12px; text-shadow:1px 1px 3px var(--shadow)">
    content
</div> 
</div>

<!--    weight        -->
<div class="justify-content-between mb-0">
<div class="col-auto my-auto text-center" style="
border:1px solid var(--text);
font-family:var(--font); color:var(--text);
font-size:12px; ">
    <b>weight</b>
</div> 
<div class="col-auto p-1" style="
font-family:var(--font); color:var(--text);
font-size:12px; text-shadow:1px 1px 3px var(--shadow)">
    content
</div> 
</div>

<!--    pronouns        -->
<div class="justify-content-between mb-0">
<div class="col-auto my-auto text-center" style="
border:1px solid var(--text);
font-family:var(--font); color:var(--text);
font-size:12px; ">
    <b>pronouns</b>
</div> 
<div class="col-auto p-1" style="
font-family:var(--font); color:var(--text);
font-size:12px; text-shadow:1px 1px 3px var(--shadow)">
    pro/noun
</div> 
</div>
<!-- ========= End of COL TWO, Row + Basics COL ========= -->
</div>
</div>
</div>


<!-- ============== COL 2 / PHOTO ======================= -->
<div class="col">

<div id="carousel1" class="carousel slide mx-auto p-1" 
data-ride="carousel" style="
max-width:400px;
font-family:var(--font);">

<!--                        photo frame                  -->
<div style="
background:var(--photo-bg);
padding:14px 14px 36px 14px;
border:1px solid var(--photo-border);
border-radius:6px;
box-shadow:0 10px 18px var(--shadow);
position:relative;
transform:rotate(-1deg);">

<!--                     paperclip decor                 -->
<i class="fas fa-paperclip" style="
position:absolute;
top:-10px; left:12px;
font-size:40px;
color:var(--acc);
z-index:1;
transform:rotate(-20deg); opacity:.85;"></i>

<!-- ==================================================== ✦✦
                          CAROUSEL
✧✧ ====================================================== -->
<div class="carousel-inner">

<!-- ================== [01] IMG ===================== -->
<div class="carousel-item active">
<div style="
background-image:url(IMGLINK);
height:200px;
background-position:center; background-size:cover;
border:1px solid var(--photo-border);"></div>
</div>

<!-- ================== [02] IMG ===================== -->
<div class="carousel-item">
<div style="
background-image:url(IMGLINK);
height:200px;
background-position:center; background-size:cover;
border:1px solid var(--photo-border);"></div>
</div>

<!-- ================== [03] IMG ===================== -->
<div class="carousel-item">
<div style="
background-image:url(IMGLINK);
height:200px;
background-position:center; background-size:cover;
border:1px solid var(--photo-border);"></div>
</div>

<!--------------------- add more above this line ----------->
</div>

<!--              [OPT] caption / short!                 -->
<div style="
position:absolute;
bottom:10px; left:14px; right:14px;
font-size:10px;
color:var(--muted);
font-family:var(--font);">
     Lorem ipsum dolor sit amet.
</div>
<!-- ============== End of Carousel, Col 2 + row ======== -->
</div>
</div>
</div>
</div>

<!-- ==================================================== ✦✦
         ROW / Likes, Dislikes, Skills + Personality
✧✧ ====================================================== -->
<div class="mx-auto my-3" style="
max-width:720px;
font-family:var(--font);
color:var(--text);
border-radius:8px;
padding:18px;
position:relative;">

<!--                     TAPE                          -->
<div style="
position:absolute;
top:6px; left:50%;
width:120px; height:26px;
margin-left:-60px;
background:var(--tape); opacity:.85;
transform:rotate(-2deg);
box-shadow:0 2px 5px rgba(0,0,0,.12);
z-index:1;"></div>

<!--                     PAPER                           -->
<div class="col" style="
background:repeating-linear-gradient(to bottom, var(--bg),
var(--bg) 24px, var(--line) 25px);
border:2px solid var(--notebook-dark);
border:1px solid var(--line);
border-radius:4px;
padding:34px 18px 0px 48px;
box-shadow:0 4px 10px rgba(0,0,0,.12);
position:relative;">

<div style="
position:absolute;
top:0; bottom:0; left:18px;
width:2px;
background:var(--margin-line);
opacity:.8;"></div>

<div class="row no-gutters">

<!-- ================== [01] LIKES ===================== -->
<div class="col-md-6 p-2">
<div style="
background:linear-gradient(to top, var(--highlight) 45%,
transparent 45%);">
    <b>LIKES</b>
</div>

<ul class="pl-0" style="
list-style-type:none; ">
    <li>content</li>
    <li>content</li>
    <li>content</li>

<!--------------------- add more above this line ----------->
<!-- =================  End of Likes ==================== -->
</ul>
</div>

<!-- ================== [02] Dislikes =================== -->
<div class="col p-2">
<div style="
background:linear-gradient(to top, var(--highlighter-dislike) 45%,
transparent 45%);">
    <b>DISLIKES</b>
</div>

<ul class="pl-0" style="
list-style-type:none; ">
    <li>content</li>
    <li>content</li>
    <li>content</li>

<!--------------------- add more above this line ----------->
<!-- =================  End of Dislikes ================= -->
</ul>
</div>

<!-- ================== [03] Skills =================== -->
<div class="col-md-6 p-2">
<div style="
background:linear-gradient(to top, var(--highlight) 45%,
transparent 45%);">
    <b>SKILLS</b>
</div>

<ul class="pl-0" style="
list-style-type:none; ">
    <li><i class="fas fa-sharp fa-check tooltipster" title="Excelled" data-toggle="tooltip" 
          style="color:var(--highlight)"></i> content</li>
    <li>content</li>
    <li>content</li>

<!--------------------- add more above this line ----------->
<!-- =================  End of Skills =================== -->
</ul>
</div>

<!-- ================== [04] Personality =============== -->
<div class="col p-2">
<div style="
background:linear-gradient(to top, var(--highlight) 45%,
transparent 45%);">
    <b>PERSONALITY</b>
</div>

<ul style="
list-style-type:none; 
padding-left:0;">
    <li>content</li>
    <li>content</li>
    <li>content</li>

<!--------------------- add more above this line ----------->
<!-- =============  End of Dislikes + Cont ============= -->
</ul>
</div>
</div>
</div>
</div>

<!-- ==================================================== ✦✦
                        BACKSTORY
            remove stickers if you dont want them! 
                 02, 03 + 04 hidden on mobile
✧✧ ====================================================== -->
<div class="mx-auto" style="
max-width:720px;
font-family:var(--font);
color:var(--text);
position:relative;">

<!-- ================== [01] WASHI TAPE ================= -->
<div style="
position:absolute;
top:-14px;
left:24px;
z-index:6;
background:var(--tape);
color:var(--muted);
font-size:11px;
padding:6px 14px;
border:1px dashed var(--shadow);
box-shadow:0 2px 4px var(--shadow);
transform:rotate(-6deg);
letter-spacing:.5px;
">
  BACKSTORY
</div>

<!-- ================== [02] DOODLE ===================== -->
<div class="hidden-sm-down" style="
position:absolute;
top:18px;
right:-10px;
z-index:6;
width:54px;
height:54px;
border:2px solid var(--muted);
border-radius:50%;
background:var(--bg);
display:flex;
align-items:center;
justify-content:center;
font-size:14px;
box-shadow:2px 3px 0 var(--shadow);
transform:rotate(8deg);">
 ^_^
</div>

<!-- ============= [03] HIGHLIGHTER BLOB =============== -->
<div class="hidden-sm-down" style="
position:absolute;
bottom:-10px;
left:40px;
z-index:5;
width:90px;
height:28px;
background:var(--highlight);
opacity:.75;
border-radius:14px;
transform:rotate(-8deg);">
</div>

<!-- ================== [04] STARS ===================== -->
<div class="hidden-sm-down" style="
position:absolute;
bottom:18px;
right:18px;
z-index:2;
color:var(--muted);
font-size:22px;
transform:rotate(-12deg);">
<i class="far fa-sharp fa-star"></i> 
<i class="far fa-sharp fa-star fa-xs"></i>
</div>

<!-- ================== [ STORY START ] ================ -->
<div style="
border-radius:10px;
padding:26px 22px 26px 52px;
max-height:340px;
overflow:auto;
scrollbar-width:none;
position:relative;">

<!-- ==================================================== ✦✦
               For new paragraphs, copy n paste!
✧✧ ====================================================== -->
<div style="
font-size:13px;
line-height:24.3px;
position:relative; z-index:1;">
    
    <p style="margin:0 0 36px 0;">
        This scrolls! Tried to make it match the notebook lines haha... if it gets too long where it doesnt look like part of the notebook lines, break it apart!
    </p>

    <p style="margin:0 0 20px 0;">
        Toy with the line-height OR remove the LH altogether...or mess w/the margin so it can float a little. Up to you!! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. 
    </p>

    <p style="margin:0 0 20px 0;">
        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 style="margin:0 ">
        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>
<!--------------------- add more above this line ----------->
<!-- ================= End of STORY area ================= -->
</div>
</div>
</div>

<!-- ==================================================== ✦✦
                  ROW / Trivia + Ribbons
✧✧ ====================================================== -->
<div class="row no-gutters mx-auto mt-3" style="
max-width:720px;
font-family:var(--font);
color:var(--text);">

<!-- ================== [01] TRIVIA ===================== -->
<div class="col-md-7 p-2 mb-1" style="position:relative;">

<!--                     tape decor                       -->
<div style="
position:absolute;
top:-2px; left:50%;
width:90px; height:20px;
margin-left:-45px;
background:var(--sticky2);
opacity:.85;
transform:rotate(-3deg);
box-shadow:0 2px 4px var(--shadow);
z-index:1;"></div>

<!--                    sticky                           -->
<div style="
background:var(--sticky);
border:1px solid var(--shadow);
box-shadow:4px 6px 10px var(--shadow);
padding:18px; height:180px;
overflow:auto;
scrollbar-width:none;
transform:rotate(-1.2deg);">

<!--    Header      -->
<div style="
 font-size:20px;
background:linear-gradient(to top, var(--highlight) 45%, transparent 45%);">
    <b>TRIVIA</b>
</div>

<!--    List of fun facts       -->
<ul class="mb-0 pl-0" style="
list-style:none;
margin:10px 0 0 0;
font-size:10px;">
    <li>- Hi!! I scroll!! Add as many as ya want! </li>
    <li>- Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>    
    <li>- Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li>- Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li>- Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li>- Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li>- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. </li>

<!--------------------- add more above this line ----------->
<!-- ================= End of Trivia part ============== -->
</ul>
</div>
</div>

<!-- ================== [02] RIBBONS ===================== -->
<div class="col p-2 mb-1" style="position:relative;">

<!--                     tape decor                       -->
<div style="
position:absolute;
top:-2px; right:24px;
width:80px; height:18px;
background:var(--sticky2);
opacity:.85;
transform:rotate(5deg);
box-shadow:0 2px 4px rgba(0,0,0,.12);
z-index:1;"></div>

<!--                    sticky                           -->
<div class="text-center" style="
background:var(--sticky);
border:1px solid var(--shadow);
box-shadow:4px 6px 10px var(--shadow);
padding:16px;
height:180px;
overflow:auto;
transform:rotate(1deg);">

<!--    Header      -->
<div style="
font-size:20px;
background:linear-gradient(to top, var(--highlight) 45%, transparent 45%);">
    <b>RIBBONS</b>
</div>

<!--    row of ribbons       -->
<div class="row no-gutters mt-3">

<!-- ================== [01] RIBBON ===================== -->
<div class="col-4 p-1">
<img src="IMGLINK" class="tooltipster" title="Placeholder" data-toggle="tooltip" style="max-width:100%;">
</div>

<!-- ================== [02] RIBBON ===================== -->
<div class="col-4 p-1">
<img src="IMGLINK" class="tooltipster" title="Placeholder" data-toggle="tooltip" style="max-width:100%;">
</div>

<!-- ================== [03] RIBBON ===================== -->
<div class="col-4 p-1">
<img src="IMGLINK"  class="tooltipster" title="Placeholder" data-toggle="tooltip" style="max-width:100%;">
</div>
<!-- ============= End of Ribbons and row  ============= -->
</div>
</div>
</div>
</div>

<!-- ==================================================== ✦✦
                       Franchise credits
                     edit the 'top' if needed!
✧✧ ====================================================== -->
<p class="text-center" style="
position:relative; top:9px;
color:var(--muted);
font-family:var(--font);
font-size:10px">
    Franchise owned by corporate/person here
</p>
<!-- ========== End of Franchise credits + code ========= -->
</div>
</div>
</div>
</div>
<!-- ==================================================== ✦✦
                   credits / do not remove
                moving OK! Must be clickable
✧✧ ======================================================= -->
<p class="text-center" style="margin-top:-7px"><a href="/diadem" class="text-muted" target="_BLANK" title="code by beel" data-toggle="tooltip" style="text-decoration:none; font-size:9px; font-family:monospace">✦✦✦</a></p>