Stor8

<!------------------------------------------------------------------------------------
L O A D I N G
                                                                   f2u code by skysong
 
c o l o r   p a l e t t e
main bg         #fff (textbox bg, icon bg, progress bg)
main text       #000 (text, header)
accent 1        #bbb (text shadow, quote icons, progress bar)
accent 2        #808080 (outlines/shadows, credit icons)
(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
TH fonts        https://toyhou.se/23372355.fonts
editing         https://th.circlejourney.net/#
img hosting     https://freeimage.host/
code link       https://toyhou.se/32150623.6-loading

things to edit (that aren't text)- if you're not customizing more- should be marked in brackets with instructions on what to change
 
------------------------------------------------------------------------------------->

<!------------------------------------------------------------- [ MAIN CONTAINER ] -->
<div class="my-3" style="position:relative; min-height:80vh; display:flex; flex-direction:column; overflow:hidden; font-family:monospace; background:#fff; color:#000;">

<!----------------------------------------------------------- [ BACKGROUND IMAGE ] -->
<div class="h-100 w-100" style="position:absolute; z-index:0; background-image:url(URLHERE); background-size:cover; background-attachment:fixed; background-repeat:no-repeat; filter:blur(5px);"></div>
    <!-- [ replace URLHERE with your image URL ] -->
    <!-- [ remove filter:blur(5px) for no blur ] -->

<!------------------------------------------------------------------- [ INFO BOX ] -->
<div class="row w-100 m-0 p-5" style="position:relative">

<!--SPACER-->
    <div class="col"></div>

<div class="col-sm-4 p-0">
<div class="p-3 w-100" style="background:#fff; min-height:350px; border:3px double #808080">

<!--NAME-->
    <h1 style="text-align:center; font-size:30px; font-family:serif; font-style:italic; text-shadow:2px 2px #bbb">
    NAME
    </h1>

<!--QUOTE-->
    <p style="text-align:center; opacity:0.6;">
    <i class="fa fa-quote-left" style="color:#bbb"></i>
    Lorem ipsum dolor sit amet
    <i class="fa fa-quote-right" style="color:#bbb"></i>
    </p>
    
<!--TEXT-->
    <p style="max-height:250px; overflow:scroll; scrollbar-width:none;">
    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>

</div> <!--end info box-->

<!--CREDITS-->
    <div class="float-right mt-2">
    <!--OC ART-->
        <a href="https://toyhou.se/LINK_HERE">
            <!-- [ replace the TH link with your link ] -->
        <i class="fa fa-user p-1 tooltipster" data-placement="left" style="color:#808080; background:#fff; border-radius:3px; box-shadow:2px 2px #808080;" title="oc art - credits"></i></a>
    <!--BG IMAGE-->
        <a href="https://toyhou.se/LINK_HERE">
            <!-- [ replace the TH link with your link ] -->
        <i class="fa fa-image p-1 tooltipster" data-placement="left" style="color:#808080; background:#fff; border-radius:3px; box-shadow:2px 2px #808080;" title="bg image - credits"></i></a>
    <!--CODE-->
        <a href="https://toyhou.se/32150623.6-loading">
            <!-- [ do not edit! ] -->
        <i class="fa fa-code p-1 tooltipster" data-placement="left" style="color:#808080; background:#fff; border-radius:3px; box-shadow:2px 2px #808080;" title="code - skysong"></i></a>
    </div>

</div></div> <!--end info container-->

<!------------------------------------------------------- [ BOTTOM AREA CONTAINER] -->
<div class="w-100" style="position:relative; margin-top:auto;">

<!----------------------------------------------------------------- [ IMAGE AREA ] -->
<div class="row m-0 w-100 px-5" style="position:relative; min-height:100px;">

<!--IMAGE-->
    <div class="col-sm-auto mx-auto p-0" style="max-width:250px;">
    <img src="https://placehold.co/600x400?text=placeholder" class="fa-bounce">
        <!-- [ img src="EDITHERE" | replace the URL with your image URL ] -->
        <!-- [ remove class="fa-bounce" for no animation ] -->
    </div>

<!--SPACER-->
    <div class="col-sm"></div>

</div> <!--end image area-->

<!--------------------------------------------------------------- [ LOADING AREA ] -->
<div class="px-5 pb-5" style="position:relative;">

<!--TEXT-->
    <p class="fa-fade" style="text-align:right; font-style:italic;">
    LOADING...
        <!-- [ remove class="fa-fade" for no animation ] -->
    </p>

<div class="progress" style="box-shadow:3px 3px #808080; background:#fff">
    
<!--BAR-->
    <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:70%; background-color:#bbb;"></div>
        <!-- [ width:70% | change the number for a different width ] -->

</div> <!--end bar-->
</div> <!--end container-->

<!----------------------------------------------------------------------------------->
</div> <!--end bottom area-->
</div> <!--end everything-->