Stor8

<!------------------------------------------------------------------------------------
[ LOADING ] // default version
    f2u code by skysong

[ color palette ]
    main bg         #fff
    main text       #000 (also header)
    accent 1        #bbb (text shadow, quote icons, progress bar)
    accent 2        #808080 (outlines, credit icons)

[ resources ]
    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

------------------------------------------------------------------------------------->

<!------------------------------------------------------------------------------------

    BANNER

------------------------------------------------------------------------------------->

<div class="p-3 row m-0" style="background:#fff; color:#000; font-family:monospace; border:3px double #808080">

<!--ICON-->
    <div class="col-auto p-0">
    <i class="fat fa-circle-exclamation fa-fw" style="font-size:50px; color:#808080"></i>
    </div>
    
<!--TEXT-->
    <div class="col pl-3" style="display:flex; align-items:center;"><p>
    This profile is a work in progress! Lorem ipsum dolor sit amet.
    </p></div>

</div> <!--end banner-->

<!------------------------------------------------------------------------------------

    MAIN CODE START

------------------------------------------------------------------------------------->

<div class="my-3" style="font-family:monospace; background:#fff; color:#000; position:relative; min-height:80vh;overflow:hidden;">

<!------------------------------------------------------------------------------------

    BG IMAGE

------------------------------------------------------------------------------------->

<div class="h-100 w-100" style="position:absolute; filter:blur(5px); background-image:url(URLHERE); background-size:cover; background-attachment:fixed; background-repeat:no-repeat"></div>
    <!--[ replace URLHERE with your image URL ]-->
    <!--[ you can remove filter:blur(5px) for no blur, but I'd suggest keeping it so that you don't have to worry about it being low quality on extremely large screens ]-->

<!------------------------------------------------------------------------------------

    INFO BOX

------------------------------------------------------------------------------------->

<div class="row m-0 p-5">

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

<div class="col-lg-3 col-md-4 col-sm-6 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 class="text-center" style="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-->
    <div class="mt-2" style="max-height:250px; overflow:scroll; scrollbar-width:thin; scrollbar-color: #bbb transparent">
    <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>
    </div>

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

<!------------------------------------------------------------------------------------

    CREDITS

------------------------------------------------------------------------------------->

<div class="float-right mt-2">

<!--OC ART-->
    <a href="https://toyhou.se/LINK_HERE"
        class="p-1" style="color:#808080; background:#fff; border-radius:3px; box-shadow:2px 2px #808080;"
        data-toggle="tooltip"  data-placement="left" title="art - credit">
        <!--[ href="EDITHERE" | replace with your link ]-->
        <!--[ title="EDITHERE" | edit tooltip text here ]-->
    <i class="fa fa-user"></i></a>
        <!--[ fa-user | replace user with your icon ]-->

<!--BG IMAGE-->
    <a href="https://toyhou.se/LINK_HERE" class="p-1" style="color:#808080; background:#fff; border-radius:3px; box-shadow:2px 2px #808080;"
        data-toggle="tooltip"  data-placement="left" title="bg - credit">
    <i class="fa fa-image"></i></a>
<!--CODE-->
    <!--[ do not edit! ]-->
    <a href="https://toyhou.se/32150623.6-loading" class="p-1" style="color:#808080; background:#fff; border-radius:3px; box-shadow:2px 2px #808080;"
        data-toggle="tooltip"  data-placement="left" title="code - skysong">
    <i class="fa fa-ticket-airline"></i></a>
</div>

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

<!------------------------------------------------------------------------------------

    ART AREA START

------------------------------------------------------------------------------------->

<div class="px-5 pb-5">

<!------------------------------------------------------------------------------------

    OC IMAGE

------------------------------------------------------------------------------------->

<div class="row m-0" style="min-height:100px;">

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

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

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

<!------------------------------------------------------------------------------------

    LOADING AREA

------------------------------------------------------------------------------------->
<div style="position:relative;">

<!--TEXT-->
    <p style="text-align:right; font-style:italic;">
    <span class="fa-fade" style="--fa-animation-duration: 2s;">
    LOADING...
        <!--[ remove fa-fade for no animation ]-->
    </span>
    </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>
        <!--[ remove progress-bar-animated for no animation ]-->

</div> <!--end bar-->
</div> <!--end loading area-->

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

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