Stor8

<!-- ✦✦ 
        "MISSIVE" by Diadem (https://toyhou.se/diadem)

❥ Code Terms of Use: https://toyhou.se/32638528.
❥ Troubleshoot Server: https://fluxer.gg/aaKwuWIX

            ꒰ა ˚₊ 𓎟𓎟𓎟𓎟𓎟𓎟𓎟𓎟𓎟𓎟𓎟𓎟 ₊˚໒꒱

♥︎ 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.

    - Gingham by nice@TH / redridingheart
    - Change flower border color easily w/photopea
            https://www.photopea.com/

            ꒰ა ˚₊ 𓎟𓎟𓎟𓎟𓎟𓎟𓎟𓎟𓎟𓎟𓎟𓎟 ₊˚໒꒱

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

    bg - primary background color
    bg2 - secondary bg color
    speak-bg - primary speak container
    border - primary border color
    border2 - accent border color
    radius - overall border radius
    
    banner-bg-color - banner background
    banner - banner image url
    banner-height - banner container height
    banner-size - cover/auto/30% as an example
    banner-position - where the image is position
    banner-blend - optional blend mode for banner
for no blend, use NORMAL
    banner-shadow - top banner inset shadow
    banner-shadow2 - bottom banner inset shadow
    banner-shadow-overlay - inset full shadow overlay
    banner-text-shadow - banner header blurry text shadow

    scrollbox-height - height of the scrollbox

    text - primary text color 
    head - header/accent text color
    muted - muted text color
    link - in case you have a link / link color
    headfont - header font (Has to be TH safe/fallback)
    font - primary font (Has to be TH safe/fallback)

            ꒰ა ˚₊ 𓎟𓎟𓎟𓎟𓎟𓎟𓎟𓎟𓎟𓎟𓎟𓎟 ₊˚໒꒱

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

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

    --bg:#f4e9fd;
    --bg2:#e0cae7;
    --speak-bg:#fff;
    --border:#b89dc1;
    --border2:#9671a3;
    --radius:20px;
    
    --banner-bg-color:#dfcbeb;
    --banner:url(IMGLINK);
    --banner-height:130px;
    --banner-size:cover;
    --banner-position:center;
    --banner-blend:multiply;
    --banner-shadow:#FBF6FE;
    --banner-shadow2:var(--bg);
    --banner-shadow-overlay:rgba(251,246,254,0.58);
    --banner-text-shadow: 2px 0px 4px var(--head), -2px 0px 9px var(--head);
    
    --scrollbox-height:190px;
    
    --text:#725081;
    --head:#593869;
    --muted:#70637b;
    --link:#5914a9;
    --decorheart:rgba(255,255,255,0.7);
    --headfont:Manufacturing Consent, cursive;
    --font:Playball, cursive;
">
<!-- ==================================================== ✦✦
                       holding container
✧✧ ======================================================= -->
<div class="col-md-10 p-0 mx-auto mb-2" style="
background:var(--bg);
border-radius:var(--radius);
border-top:4px double var(--border);
border-bottom:4px double var(--border);
border-left:4px solid var(--border2);
border-right:4px solid var(--border2);
overflow:hidden">
<!-- ==================================================== ✦✦
                         Decor
✧✧ ======================================================= -->
<div style="color:var(--decorheart); position:absolute; 
font-size:100px; top:-70px; left:-40px; 
transform:rotate(145deg)">
    <i class="fa-solid fa-heart"></i>
</div>
<div style="color:var(--decorheart); position:absolute; 
font-size:100px; top:-70px; right:-40px; 
transform:rotate(-145deg)">
    <i class="fa-solid fa-heart"></i>
</div>
<div class="d-none d-md-block" style="color:var(--decorheart); position:absolute; 
font-size:100px; z-index:1; bottom:-70px; 
left:-40px; transform:rotate(50deg)">
    <i class="fa-solid fa-heart"></i>
</div>
<div class="d-none d-md-block" style="color:var(--decorheart);
position:absolute; font-size:100px; z-index:1;
bottom:-70px; right:-40px; transform:rotate(-50deg)">
    <i class="fa-solid fa-heart"></i>
</div>
<!-- ==================================================== ✦✦
                        Banner
✧✧ ======================================================= -->
<div class="p-1 d-flex flex-column text-center
align-items-center justify-content-center"
style="
border-radius:var(--radius) var(--radius) 0 0;
background-color:var(--banner-bg-color);
background-image:var(--banner);
height:var(--banner-height);
background-size:var(--banner-size);
background-position:var(--banner-position);
background-blend-mode:var(--banner-blend);
box-shadow: inset 0 0 0 9999px var(--banner-shadow-overlay), inset 0px 20px 20px -10px var(--banner-shadow), inset 0px -30px 15px -20px var(--banner-shadow2);">
<!--    header / decor name | feel free to change   -->
    <p class="mb-0" style="font-size:45px; 
    color:var(--head)!important;
    font-family:var(--headfont);
    text-shadow:var(--banner-text-shadow)">
        Angel's Newscast
    </p>
    <p style="margin-top:-16px; color:var(--head);
    font-family:var(--headfont)">
        posted 00.00.00
    </p>
</div>
<!-- ==================================================== ✦✦
                       Text Container
✧✧ ======================================================= -->
<div class="p-0">
<div class="pt-3 pl-2 pr-2 pb-0">
<!--    note    -->
<p class="text-center fa-fade" style="color:var(--muted);
text-shadow:0 0 5px var(--muted); animation-duration:5s;
font-size:13px; font-family:var(--font)">
    <i class="fa-thin fa-heart fa-fade"></i> you may need to scroll... <i class="fa-thin fa-heart fa-fade"></i>
</p>
<!--    border box    -->
<div class="text-left col p-0" style="
  border:20px solid transparent;
  border-image:url(https://i.postimg.cc/JnGCz4vX/flowerfr.png) 100 round;
  background-color:transparent;
  background-image:linear-gradient(var(--speak-bg),var(--speak-bg));
  background-repeat:no-repeat;
  background-position:center;
  background-clip:border-box;
  background-size:calc(100% + 27px) calc(100% + 27px);">
<!-- ==================================================== ✦✦
                        Text goes here
✧✧ ======================================================= -->
<div class="p-2" style="
 height:var(--scrollbox-height);
 overflow:auto; overflow-x:none;
 scrollbar-width:thin; scrollbar-color: var(--bg2)
rgba(0,0,0,0);  font-family:var(--font); font-size:13px; color:var(--text)">
      <a href="#" style="color:var(--link)">Lorem ipsum dolor sit amet,</a> 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.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. 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. 
      <br><br>
      Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. 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.
  </div>
</div>
</div>
<!-- ==================================================== ✦✦
                       Divider
✧✧ ======================================================= -->
<div class="row no-gutters mb-0" style="column-gap:10px;
margin-top:-3px">
<div class="my-auto col">
    <hr  style="border:2px solid var(--border2)">
</div>    
<div class="my-auto col-auto " style="color:var(--muted); font-size:19px">
    <i class="fa-regular fa-cloud-moon"></i>
</div>    
<div class="my-auto col">
    <hr style="border:2px solid var(--border2)">
</div>    
</div>
<!-- ==================================================== ✦✦
            SONG BOX | What are you listening to?
✧✧ ======================================================= -->
<div class="p-2" style="margin-top:-10px">
<div class="p-1 d-flex col justify-content-between mb-1" 
style="
background:var(--bg2);
border-radius:var(--radius);
border:2px solid var(--border);
background-image:url(https://i.postimg.cc/rpWwGXjP/redridingheart-diagonalgingham.png);
background-size:auto;
background-repeat:repeat">

<!--    listening to    -->
<div class="col pl-2 " style="color:var(--head);
font-family:var(--font)">
    <img src="IMGLINK" style="height:16px">
    <i>listening to...</i>
</div>
<!--    song + artist   -->
<div class="col-auto d-inline-flex align-items-center my-auto"
style="color:var(--muted); 
column-gap:10px; font-family:var(--font)">
    name <i class="fa-regular fa-heart fa-xs"></i> artist
</div>
</div>
<!-- ==================================================== ✦✦
                 CURRENT | MOOD / ACTIVITY
✧✧ ======================================================= -->
<div class="row no-gutters mb-1" style="column-gap:5px">
    
<!-- ============== COL 1 / MOOD ======================= -->
<div class="p-1 col text-center mb-1" 
style="
background:var(--bg2);
border-radius:var(--radius);
border:2px dashed var(--border);
background-image:url(https://i.postimg.cc/rpWwGXjP/redridingheart-diagonalgingham.png);
background-size:auto;
background-repeat:repeat">
<p class="mb-0" style="color:var(--head);
text-shadow:0px 0px 3px var(--head); font-family:var(--font)">
    <i class="fa-light fa-cloud"></i> I am feeling...
</p>
<p class="mb-0 " style="color:var(--muted); 
font-family:var(--font)">
    mood
</p>
</div>

<!-- ============== COL 2 / ACTIVITY ==================== -->
<div class="p-1 col text-center mb-1" 
style="
background:var(--bg2);
border-radius:var(--radius);
border:2px dashed var(--border);
background-image:url(https://i.postimg.cc/rpWwGXjP/redridingheart-diagonalgingham.png);
background-size:auto;
background-repeat:repeat">
<p class="mb-0" style="color:var(--head);
text-shadow:0px 0px 3px var(--head); font-family:var(--font)">
    <i class="fa-light fa-heart"></i> I am doing...
</p>
<p class="mb-0 " style="color:var(--muted); 
font-family:var(--font)">
    activity here
</p>
</div>
<!-- ============= ✦✦ End of code! ================== ✦✦ -->
</div>
</div>
</div>
</div>
</div>
<!-- ==================================================== ✦✦
                   credits / do not remove
                moving OK! Must be clickable
✧✧ ======================================================= -->
<p class="text-center" style="margin-top:-15px"><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>