Stor8

<!-------------------------------------------------------------------------------------
C E N T R A L
> requested by @NepMilk
                                                                    f2u code by skysong
 
c o l o r   p a l e t t e
text            text-dark
accent text     text-warning
accent bg       bg-dark

*it's hard to find bootstrap colors that work well on all themes so I reccomend
    just setting it to text-dark or text-light
(ctrl + f to change)

r e s o u r c e s
icons           https://fontawesome.com/
TH colors       https://toyhou.se/7850218.bootstrap-color-combos
editing         https://th.circlejourney.net/#
img hosting     https://freeimage.host/

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="p-5 m-4" style="position:relative; min-height:700px; display:flex; justify-content:center; align-items:center; background-image:url(https://iili.io/39WsjcJ.png); background-position:center; background-size:cover; border-radius:20px;">
    <!--[ background-image:url(EDITHERE) | replace with your image URL ]-->
    <!--[ if you want to change the text font, add font-family:EDITHERE; right after border-radius:20px; ]-->

<div style="max-width:450px;">

<!---------------------------------------------------------------------------CONTENT-->

<!--USERNAME / HEADER-->
    <h1 class="text-dark" style="font-size:50px; font-family:MS Gothic; text-align:center">
        <!--[ font-family:EDITHERE | you can change the header font if you want ]-->
    USERNAME</h1>

<!--QUICK INFO-->
    <p class="text-dark" style="text-align:center">
    quick | info | here
    </p>
    
<!--PARAGRAPH 1-->
    <p class="text-dark mt-5" style="text-align:center;">
    Space for a paragraph- the main container will expand to fit everything, so write as much as you want! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
    </p>
    
<!--DIVIDER-->
    <div class="bg-dark" style="width:20%; height:1px; margin:0 auto"></div>
        <!--[ you can edit the width and height if you want ]-->
    
<!--PARAGRAPH 2-->
    <p class="text-dark mt-3" style="text-align:center;">
    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>

<!---------------------------------------------------------------------------BUTTONS-->
<div class="row mt-5" style="margin:0 auto">
    <!--[ copy and paste this entire <div> for more rows ]-->

<!--BUTTON 1-->
    <div class="col-sm p-2">
    <a class="btn bg-dark text-warning w-100" href="https://toyhou.se/">
        <!--[ href="EDITHERE" | replace with your link ]-->
    art trades
    </a></div>
    
<!--BUTTON 2-->
    <div class="col-sm-2 p-2 tooltipster" data-placement="bottom" title="discord">
        <!--[ title="EDITHERE" | replace with your tooltip text ]-->
    <a class="btn bg-dark text-warning w-100" href="https://toyhou.se/">
        <!--[ href="EDITHERE" | replace with your link ]-->
    <!--ICON-->
        <i class="fa-brands fa-discord"></i>
            <!--[ fa fa-EDIT | replace with a different icon if you want ]-->
            <!--[ fa-brands is only for brands! do not keep it in for regular icons! ]-->
    </a></div>
    
<!--BUTTON 3-->
    <div class="col-sm p-2">
    <a class="btn bg-dark text-warning w-100" href="https://toyhou.se/">
        <!--[ href="EDITHERE" | replace with your link ]-->
    commissions
    </a></div>
    
<!--TOOLTIP VERSION
    [ replace the first <div> in the button's section with this ]
    <div class="col-sm p-2 tooltipster" data-placement="bottom" title="TEXTHERE">
        [ title="EDITHERE" | replace with your tooltip text ]
-->

</div>

<!---------------------------------------------------------------------------CREDITS-->
<div class="row m-2" style="position:absolute; bottom:0; right:0">

<!--PHOTO-->
    <div class="col-auto p-0 tooltipster" data-placement="left" title="image - insert">
        <!--[ title="image - EDITHERE" | put where you got the image ]-->
    <a class="btn text-dark p-0" href="https://toyhou.se/" style="font-size:20px">
    <!--ICON-->
        <i class="fa fa-image-polaroid fa-fw"></i>
    </a></div>
    
<!--LAYOUT / DO NOT EDIT-->
    <div class="col-auto p-0 tooltipster" data-placement="left" title="layout - NepMilk">
    <a class="btn text-dark p-0" href="https://toyhou.se/NepMilk" style="font-size:20px">
    <!--ICON-->
        <i class="fa fa-table-layout fa-fw"></i>
    </a></div>
    
<!--CODE / DO NOT EDIT-->
    <div class="col-auto p-0 tooltipster" data-placement="left" title="code - skysong">
    <a class="btn text-dark p-0" href="https://toyhou.se/31741533" style="font-size:20px">
    <!--ICON-->
        <i class="fa fa-square-code fa-fw"></i>
    </a></div>

</div>

<!------------------------------------------------------------------------------------>
</div></div>