[14] doomscroll!
created by:skysong
HTMLCustom ColorsCharacter
Copy
<!-----------------------------------------------------------------------------------------
D O O M S C R O L L !
> default version
f2u code by skysong
r e s o u r c e s
icons https://fontawesome.com/
TH colors https://toyhou.se/7850218.bootstrap-color-combos
TH fonts https://toyhou.se/23372355.fonts
editing https://th.circlejourney.net/#
img hosting https://freeimage.host/
code link https://toyhou.se/36304665.14-doomscroll
things to edit (that aren't text)- if you're not customizing more- should be marked in brackets with instructions on what to change
------------------------------------------------------------------------------------------->
<div class="mx-auto" style="max-width:400px;
--main-bg:#fff;
--main-text:#000;
--accent:#99a2da">
<!--[ change these colors to edit everything else! ]-->
<!--[ notes: ]
main-bg is used for text on accent bg
accent is used at varying opacities
-->
<!----------------------------------------------------------- [ USERNAME / TITLE BLOCK ] -->
<div class="align-items-center my-1 p-2" style="font-family:monospace; font-weight:bold; font-size:20px; background:var(--accent); color:var(--main-bg)">
<!--NAME-->
<div style="flex:1; cursor:default">@ name</div>
<!--ICON-->
<div class="tooltipster mr-3" style="cursor:pointer" data-placement="bottom" title="tooltip">
<!--[ title="EDITHERE" | change this part to edit the tooltip text ]-->
<i class="fal fa-bell d-block"></i>
</div>
<!--PFP-->
<div style="height:30px; width:30px; border-radius:100%; background:url(https://placehold.co/500?text=:]); background-size:cover; background-position:center">
<!--[ background:url(EDITHERE) | replace with your image url ]-->
</div>
</div> <!--end username / title block-->
<!---------------------------------------------------------------------- [ IMAGE BLOCK ] -->
<div class="my-auto" style="height:400px; background:url(https://placehold.co/500?text=placeholder); background-size:cover; background-position:center; background-repeat:no-repeat">
<!--[ background:url(EDITHERE) | replace with your image url ]-->
</div> <!--end image block-->
<!---------------------------------------------------------- [ SEARCHBAR / QUOTE BLOCK ] -->
<div class="align-items-center p-2 my-1" style="font-family:monospace; background:var(--accent); color:var(--main-bg)">
<!--QUOTE-->
<div style="flex:1; overflow-x:scroll; scrollbar-width:none; white-space: nowrap;"><p>
area for a quote!! it scrolls if it gets too long
<!--CURSOR-->
<span class="fa-fade">|</span>
</p></div>
<!--ICON-->
<div>
<i class="fa fa-search ml-3 d-block" style="cursor:pointer"></i>
</div>
</div> <!--end searchbar / quote block-->
<!-------------------------------------------------------------------- [ SUMMARY BLOCK ] -->
<div class="p-3 my-1" style="background:var(--main-bg); color:var(--main-text)"><p>
A quick summary of your character. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</p></div> <!--end summary block-->
<!--------------------------------------------------------------------- [ BASICS BLOCK ] -->
<div class="my-1" style="background:var(--main-bg); color:var(--main-text)">
<!--HEADER AREA-->
<div class="align-items-center p-2" style="font-family:monospace; font-weight:bold; background:var(--accent); color:var(--main-bg)">
<!--HEADER-->
<div style="flex:1; cursor:default">basics</div>
<!--ICONS-->
<div style="cursor:default">
<i class="fa fa-minus fa-fw" style="cursor:pointer"></i>
<i class="far fa-window-restore fa-fw" style="cursor:pointer"></i>
<i class="fa fa-xmark fa-fw" style="cursor:pointer"></i>
</div>
</div>
<!--CONTENT CONTAINER-->
<div class="p-3">
<!--INFO ROW | NAME-->
<div class="d-flex">
<!--LABEL-->
<div class="px-1" style="font-family:monospace; font-weight:bold; border-radius:3px; background:var(--accent); color:var(--main-bg); opacity:0.7">name</div>
<!--CONTENT-->
<div class="text-right" style="flex:1">Something</div>
</div>
<!--INFO ROW | NICKNAME-->
<div class="d-flex mt-1">
<!--LABEL-->
<div class="px-1" style="font-family:monospace; font-weight:bold; border-radius:3px; background:var(--accent); color:var(--main-bg); opacity:0.7">nickname</div>
<!--CONTENT-->
<div class="text-right" style="flex:1">Thing</div>
</div>
<!--INFO ROW | SPECIES-->
<div class="d-flex mt-1">
<!--LABEL-->
<div class="px-1" style="font-family:monospace; font-weight:bold; border-radius:3px; background:var(--accent); color:var(--main-bg); opacity:0.7">species</div>
<!--CONTENT-->
<div class="text-right" style="flex:1">Creature</div>
</div>
<!--INFO ROW | AGE-->
<div class="d-flex mt-1">
<!--LABEL-->
<div class="px-1" style="font-family:monospace; font-weight:bold; border-radius:3px; background:var(--accent); color:var(--main-bg); opacity:0.7">age</div>
<!--CONTENT-->
<div class="text-right" style="flex:1">0 years</div>
</div>
<!--INFO ROW | BIRTHDAY-->
<div class="d-flex mt-1">
<!--LABEL-->
<div class="px-1" style="font-family:monospace; font-weight:bold; border-radius:3px; background:var(--accent); color:var(--main-bg); opacity:0.7">birthday</div>
<!--CONTENT-->
<div class="text-right" style="flex:1">1 Jan</div>
</div>
<!--INFO ROW | PRONOUNS-->
<div class="d-flex mt-1">
<!--LABEL-->
<div class="px-1" style="font-family:monospace; font-weight:bold; border-radius:3px; background:var(--accent); color:var(--main-bg); opacity:0.7">pronouns</div>
<!--CONTENT-->
<div class="text-right" style="flex:1">Any/all</div>
</div>
<!--INFO ROW | GENDER-->
<div class="d-flex mt-1">
<!--LABEL-->
<div class="px-1" style="font-family:monospace; font-weight:bold; border-radius:3px; background:var(--accent); color:var(--main-bg); opacity:0.7">gender</div>
<!--CONTENT-->
<div class="text-right" style="flex:1">Yes</div>
</div>
<!--INFO ROW | ORIENTATION-->
<div class="d-flex mt-1">
<!--LABEL-->
<div class="px-1" style="font-family:monospace; font-weight:bold; border-radius:3px; background:var(--accent); color:var(--main-bg); opacity:0.7">orientation</div>
<!--CONTENT-->
<div class="text-right" style="flex:1">Ramen</div>
</div>
<!--INFO ROW | OCCUPATION-->
<div class="d-flex mt-1">
<!--LABEL-->
<div class="px-1" style="font-family:monospace; font-weight:bold; border-radius:3px; background:var(--accent); color:var(--main-bg); opacity:0.7">occupation</div>
<!--CONTENT-->
<div class="text-right" style="flex:1">Unemployed</div>
</div>
<!--INFO ROW | STATUS-->
<div class="d-flex mt-1">
<!--LABEL-->
<div class="px-1" style="font-family:monospace; font-weight:bold; border-radius:3px; background:var(--accent); color:var(--main-bg); opacity:0.7">status</div>
<!--CONTENT-->
<div class="text-right" style="flex:1">Alive; dead inside</div>
</div>
<!--INFO ROW | THEME-->
<div class="d-flex mt-1">
<!--LABEL-->
<div class="px-1" style="font-family:monospace; font-weight:bold; border-radius:3px; background:var(--accent); color:var(--main-bg); opacity:0.7">theme</div>
<!--CONTENT-->
<div class="text-right" style="flex:1">The Logarithim Song</div>
</div>
<!--[ copy/paste above this line ]-->
</div> <!--end basics content-->
</div> <!--end basics block-->
<!----------------------------------------------------------------------- [ TAGS BLOCK ] -->
<div class="d-flex flex-wrap p-2" style="font-weight:bold; background:var(--accent)">
<!--TAG-->
<div class="py-1 px-2" style="flex-grow:1; margin:2px; cursor:default; border:1px solid var(--main-bg); color:var(--main-bg);">
# tag !!</div>
<!--TAG-->
<div class="py-1 px-2" style="flex-grow:1; margin:2px; cursor:default; border:1px solid var(--main-bg); color:var(--main-bg)">
# they resize themselves :)</div>
<!--TAG-->
<div class="py-1 px-2" style="flex-grow:1; margin:2px; cursor:default; border:1px solid var(--main-bg); color:var(--main-bg)">
# 2 rows looks best</div>
<!--TAG-->
<div class="py-1 px-2" style="flex-grow:1; margin:2px; cursor:default; border:1px solid var(--main-bg); color:var(--main-bg)">
# but more works!</div>
<!--[ copy/paste above this line ]-->
</div> <!--end tags block-->
<!------------------------------------------------------------------- [ MESSAGES BLOCK ] -->
<div class="my-1 p-2" style="background:var(--main-bg); color:var(--main-bg)">
<!--RECIEVED MESSAGE CONTAINER-->
<div class="d-flex">
<!--PFP-->
<div style="flex-shrink:0; height:30px; width:30px; border-radius:100%; background:url(https://placehold.co/500?text=:]); background-size:cover; background-position:center">
<!--[ background:url(EDITHERE) | replace with your image url ]-->
</div>
<!--MESSAGE AREA-->
<div class="mx-2">
<!--NAME-->
<p style="color:var(--main-text)">name
<!--TIMESTAMP-->
<span class="ml-1 faded">1 min</span>
</p>
<!--MESSAGE-->
<div class="mb-1 p-1 px-2" style="display:table; border-radius:0 5px 5px 5px; background:var(--main-bg); border:1px solid var(--main-text); color:var(--main-text)">
message
</div>
</div>
</div> <!--end recieved message-->
<!--SENT MESSAGE CONTAINER-->
<div class="mt-2 d-flex justify-content-end">
<!--MESSAGE AREA-->
<div class="mx-2">
<!--NAME-->
<p class="text-right" style="color:var(--main-text)">
<!--TIMESTAMP-->
<span class="ml-1 faded">1 min</span>
oc
</p>
<!--MESSAGE-->
<div class="mb-1 ml-auto p-1 px-2" style="display:table; background:var(--accent); border-radius:5px 0 5px 5px; opacity:0.8">
response!
</div>
</div>
<!--PFP-->
<div style="flex-shrink:0; height:30px; width:30px; border-radius:100%; background:url(https://placehold.co/500?text=:]); background-size:cover; background-position:center">
<!--[ background:url(EDITHERE) | replace with your image url ]-->
</div>
</div> <!--end sent message-->
<!--RECIEVED MESSAGE CONTAINER-->
<div class="mt-2 d-flex bg">
<!--PFP-->
<div style="flex-shrink:0; height:30px; width:30px; border-radius:100%; background:url(https://placehold.co/500?text=:]); background-size:cover; background-position:center">
<!--[ background:url(EDITHERE) | replace with your image url ]-->
</div>
<!--MESSAGE AREA-->
<div class="mx-2">
<!--NAME-->
<p style="color:var(--main-text)">name
<!--TIMESTAMP-->
<span class="ml-1 faded">now</span>
</p>
<!--MESSAGE-->
<div class="mb-1 p-1 px-2" style="display:table; border-radius:0 5px 5px 5px; background:var(--main-bg); border:1px solid var(--main-text); color:var(--main-text)">
message?
</div>
</div>
</div> <!--end recieved message-->
<!--[ copy/paste above this line ]-->
<!--TYPING LABEL-->
<p class="mt-3 faded" style="color:var(--main-text)">
<!--DOTS-->
<span class="fa-fade" style="font-weight:bold;">...</span>
oc is typing
</p>
</div> <!--end messages block-->
<!----------------------------------------------------------------- [ TO-DO LIST BLOCK ] -->
<div class="my-1" style="background:var(--main-bg); color:var(--main-text)">
<!--HEADER AREA-->
<div class="align-items-center p-2" style="font-family:monospace; font-weight:bold; background:var(--accent); color:var(--main-bg)">
<!--HEADER-->
<div style="flex:1; cursor:default">to-do</div>
<!--ICONS-->
<div style="cursor:default">
<i class="fa fa-minus fa-fw" style="cursor:pointer"></i>
<i class="far fa-window-restore fa-fw" style="cursor:pointer"></i>
<i class="fa fa-xmark fa-fw" style="cursor:pointer"></i>
</div>
</div>
<!--CONTENT CONTAINER-->
<div class="p-3">
<!--ITEM-->
<p class="m-0">
<!--ICON-->
<i class="far fa-square mr-2" style="color:var(--accent)"></i>
Item
</p>
<!--CHECKED ITEM-->
<p class="m-0" style="color:var(--accent)">
<!--ICON-->
<i class="far fa-square-check mr-2 faded"></i>
<s>Checked item</s>
</p>
<!--[ copy/paste above this line ]-->
</div> <!--end to-do list content-->
</div> <!--end to-do list block-->
<!---------------------------------------------------------------------- [ ABOUT BLOCK ] -->
<div class="my-1" style="background:var(--main-bg); color:var(--main-text)">
<!--HEADER AREA-->
<div class="align-items-center p-2" style="font-family:monospace; font-weight:bold; background:var(--accent); color:var(--main-bg)">
<!--HEADER-->
<div style="flex:1; cursor:default">about</div>
<!--ICONS-->
<div style="cursor:default">
<i class="fa fa-minus fa-fw" style="cursor:pointer"></i>
<i class="far fa-window-restore fa-fw" style="cursor:pointer"></i>
<i class="fa fa-xmark fa-fw" style="cursor:pointer"></i>
</div>
</div>
<!--CONTENT CONTAINER-->
<div class="p-3">
<!--SECTION-->
<!--HEADER-->
<h3 style="font-family:monospace; font-weight:bold; color:var(--accent)">
<!--ICON-->
<i class="fa fa-chevron-double-right faded"></i>
personality</h3>
<!--TEXT-->
<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>
<!--SUBHEADER-->
<h5 style="font-family:monospace; font-weight:bold;">
subheader</h5>
<!--TEXT-->
<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>
<!--TEXT-->
<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>
<!--SECTION-->
<!--HEADER-->
<h3 class="mt-4" style="font-family:monospace; font-weight:bold; color:var(--accent)">
<!--ICON-->
<i class="fa fa-chevron-double-right faded"></i>
history</h3>
<!--SUBHEADER-->
<h5 style="font-family:monospace; font-weight:bold;">
subheader</h5>
<!--TEXT-->
<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>
<!--SUBHEADER-->
<h5 style="font-family:monospace; font-weight:bold;">
subheader</h5>
<!--TEXT-->
<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>
<!--[ copy/paste above this line ]-->
</div> <!--end long text content-->
</div> <!--end long text block-->
<!------------------------------------------------------------------ [ INVENTORY BLOCK ] -->
<div class="my-1" style="background:var(--main-bg); color:var(--main-text)">
<!--HEADER AREA-->
<div class="align-items-center p-2" style="font-family:monospace; font-weight:bold; background:var(--accent); color:var(--main-bg)">
<!--HEADER-->
<div style="flex:1; cursor:default">inventory</div>
<!--ICONS-->
<div style="cursor:default">
<i class="fa fa-minus fa-fw" style="cursor:pointer"></i>
<i class="far fa-window-restore fa-fw" style="cursor:pointer"></i>
<i class="fa fa-xmark fa-fw" style="cursor:pointer"></i>
</div>
</div>
<!--CONTENT CONTAINER-->
<div class="p-3">
<!--ITEM-->
<div class="d-flex">
<!--ICON-->
<div class="align-items-center justify-content-center flex-shrink-0" style="height:45px; width:45px; border-radius:5px; background:var(--accent); color:var(--main-bg)">
<i class="far fa-square-xmark fa-2x fa-fw"></i>
</div>
<!--DESCRIPTION-->
<div class="ml-3" style="flex:1">
A description of the item. Two lines look best, but more works fine.
</div>
</div> <!--end item-->
<!--SUBITEM-->
<div class="d-flex mt-2 ml-3">
<!--ICON-->
<div class="align-items-center justify-content-center flex-shrink-0" style="height:45px; width:45px; border-radius:5px; opacity:0.7; background:var(--accent); color:var(--main-bg)">
<i class="far fa-square-xmark fa-2x fa-fw"></i>
</div>
<!--DESCRIPTION-->
<div class="ml-3" style="flex:1">
You can also have subitems! Lorem ipsum dolor sit amet.
</div>
</div> <!--end subitem-->
<!--[ copy/paste above this line ]-->
</div> <!--end inventory content-->
</div> <!--end inventory-->
<!--------------------------------------------------------------- [ IMG CAROUSEL BLOCK ] -->
<div class="my-1" style="background:var(--main-bg); color:var(--main-bg);">
<!--CONTENT CONTAINER-->
<div id="carousel" class="carousel slide" data-ride="0" data-interval="false">
<div class="carousel-inner">
<!--ITEM-->
<div class="carousel-item active">
<!--TOP BAR-->
<div class="p-2 align-items-center" style="font-family:monospace; font-weight:bold; border-bottom:2px solid var(--main-bg); background:var(--accent);">
<!--HEADER-->
<div style="flex:1; cursor:default; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;">untitled.png</div>
<!--ICONS-->
<div style="cursor:default">
<i class="far fa-heart fa-fw" style="cursor:pointer"></i>
<i class="far fa-comments fa-fw tooltipster" style="cursor:pointer" data-placement="bottom" title="tooltip"></i>
<!--[ title="EDITHERE" | change this part to edit the tooltip text ]-->
</div>
</div>
<!--IMAGE-->
<div style=" height:500px; background-image:url(https://placehold.co/500?text=placeholder); background-position:center; background-size:cover; background-repeat:no-repeat;"></div>
<!--[ background:url(EDITHERE) | replace with your image url ]-->
<!--BOTTOM BAR-->
<div class="p-2 d-flex" style="border-top:2px solid var(--main-bg); background:var(--accent);">
<!--LEFT-->
<a href="#carousel" data-slide="prev" style="color:var(--main-bg)">
<i class="fa fa-chevron-left"></i></a>
<!--CAPTION-->
<div class="mx-2 text-center" style="flex:1; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;">
caption</div>
<!--RIGHT-->
<a href="#carousel" data-slide="next" class="" style="color:var(--main-bg)">
<i class="fa fa-chevron-right"></i></a>
</div>
</div> <!--end carousel item-->
<!--ITEM-->
<div class="carousel-item">
<!--TOP BAR-->
<div class="p-2 align-items-center" style="font-family:monospace; font-weight:bold; border-bottom:2px solid var(--main-bg); background:var(--accent);">
<!--HEADER-->
<div style="flex:1; cursor:default; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;">untitled2.png</div>
<!--ICONS-->
<div style="cursor:default">
<i class="far fa-heart fa-fw" style="cursor:pointer"></i>
<i class="far fa-comments fa-fw tooltipster" style="cursor:pointer" data-placement="bottom" title="tooltip"></i>
<!--[ title="EDITHERE" | change this part to edit the tooltip text ]-->
</div>
</div>
<!--IMAGE-->
<div style="height:500px; background-image:url(https://placehold.co/500?text=placeholder); background-position:center; background-size:cover; background-repeat:no-repeat;"></div>
<!--[ background:url(EDITHERE) | replace with your image url ]-->
<!--BOTTOM BAR-->
<div class="p-2 d-flex" style="border-top:2px solid var(--main-bg); background:var(--accent);">
<!--LEFT-->
<a href="#carousel" data-slide="prev" style="color:var(--main-bg)">
<i class="fa fa-chevron-left"></i></a>
<!--CAPTION-->
<div class="mx-2 text-center" style="flex:1; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;">
caption</div>
<!--RIGHT-->
<a href="#carousel" data-slide="next" class="" style="color:var(--main-bg)">
<i class="fa fa-chevron-right"></i></a>
</div>
</div> <!--end carousel item-->
<!--[ copy/paste above this line ]-->
</div></div> <!-- end img carousel content-->
</div> <!--end img carousel block-->
<!---------------------------------------------------------------- [ LARGE QUOTE BLOCK ] -->
<div class="my-1 p-3" style="background:var(--main-bg); color:var(--accent); font-weight:bold; font-size:22px; font-style:italic">
<i class="fa-sharp fa-light fa-quote-left mr-2" style="opacity:0.7"></i>
LARGE QUOTE HERE. LOREM IPSUM DOLER SIT AMET.
</div> <!--end large quote block-->
<!-------------------------------------------------------------------- [ CREDITS BLOCK ] -->
<div class="my-1 p-2 text-right" style="background:var(--accent); font-family:monospace; cursor:default">
<!--[ you can change the style and placement, but please do not change its contents- thank you! ]-->
<a href="https://toyhou.se/36304665.14-doomscroll" style="color:var(--main-bg); text-decoration:none;">
<i class="fa fa-clouds-sun faded mr-2"></i>
code by skysong
</a>
</div> <!--end credits block-->
<!----------------------------------------------------------------------------------------->
</div> <!--end code-->Copy
<!-----------------------------------------------------------------------------------------
D O O M S C R O L L !
> blank version
f2u code by skysong
r e s o u r c e s
icons https://fontawesome.com/
TH colors https://toyhou.se/7850218.bootstrap-color-combos
TH fonts https://toyhou.se/23372355.fonts
editing https://th.circlejourney.net/#
img hosting https://freeimage.host/
code link https://toyhou.se/36304665.14-doomscroll
things to edit (that aren't text)- if you're not customizing more- should be marked in brackets with instructions on what to change
------------------------------------------------------------------------------------------->
<div class="mx-auto" style="max-width:400px;
--main-bg:#fff;
--main-text:#000;
--accent:#99a2da">
<!--[ change these colors to edit everything else! ]-->
<!--[ notes: ]
main-bg is used for text on accent bg
accent is used at varying opacities
-->
<!----------------------------------------------------------- [ USERNAME / TITLE BLOCK ] -->
<div class="align-items-center my-1 p-2" style="font-family:monospace; font-weight:bold; font-size:20px; background:var(--accent); color:var(--main-bg)">
<!--NAME-->
<div style="flex:1; cursor:default">@ name</div>
<!--ICON-->
<div class="tooltipster mr-3" style="cursor:pointer" data-placement="bottom" title="tooltip">
<!--[ title="EDITHERE" | change this part to edit the tooltip text ]-->
<i class="fal fa-bell d-block"></i>
</div>
<!--PFP-->
<div style="height:30px; width:30px; border-radius:100%; background:url(https://placehold.co/500?text=:]); background-size:cover; background-position:center">
<!--[ background:url(EDITHERE) | replace with your image url ]-->
</div>
</div> <!--end username / title block-->
<!-------------------------------------------------------------------- [ SUMMARY BLOCK ] -->
<div class="p-3 my-1" style="background:var(--main-bg); color:var(--main-text)"><p>
Hello, this is the blank version of <i>doomscroll!</i>- to use this, just get whatever you need from the list of blocks <a href="https://toyhou.se/36304665.14-doomscroll/36304785.blocks" style="color:var(--accent)"><b>here</b></a>, delete this block, and copy/paste below ^^
</p></div> <!--end summary block-->
<!-- [ copy/paste below this line ] ------------------------------------------------------->
<!-- [ copy/paste above this line ] ------------------------------------------------------->
<!-------------------------------------------------------------------- [ CREDITS BLOCK ] -->
<div class="my-1 p-2 text-right" style="background:var(--accent); font-family:monospace; cursor:default">
<!--[ you can change the style and placement, but please do not change its contents- thank you! ]-->
<a href="https://toyhou.se/36304665.14-doomscroll" style="color:var(--main-bg); text-decoration:none;">
<i class="fa fa-clouds-sun faded mr-2"></i>
code by skysong
</a>
</div> <!--end credits block-->
<!----------------------------------------------------------------------------------------->
</div> <!--end code-->