Stor8

<!-----------------------------------------------------------------------------------
[ MOOODBOARD ] // default version
    f2u code by skysong
 
[ 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/29936589.03-moodboard

[ general instructions ]
    > To change an image, look for background:url() and put your image URL inside the parenthesis
    > background-position can be changed to things like "center", "top", "right", etc
    > background-size can also be changed to a percentage if you want the image to be more zoomed in
    > Other instructions are annotated within the code!
 
------------------------------------------------------------------------------------>

<div class="mx-auto" style="font-family:monospace; max-width:900px;">
    <!--[ if you're frankensteining this, you'll probably want to edit the width to match the original code ]-->

<!--------------------------------------------------------------------- [ ROW 1 ] -->
<div class="row mx-auto">

<!--TOP LEFT-->
    <div class="col-sm p-0 mr-sm-3 mb-3">
    <div style="border-radius:10px;
    
    background:url(https://empowher.org/wp-content/uploads/2021/03/image-placeholder-350x350-1.png);
    background-position:center;
    background-size:cover;
    
    ">
    <!--SPACER-->
        <img src="https://iili.io/Cayw31R.png" class="w-100">
    </div>
    </div>
    
<!--TOP RIGHT-->
    <div class="col-sm p-0 mb-3" style="border-radius:10px; overflow:hidden; position:relative">
    <div class="h-100 w-100 flex-column " style="position:absolute; top:0">
    <!--COLOR PALLETE-->
        <div class="row m-0 mb-3" style="flex:1">
        <!--COLOR-->
            <div class="col p-0" style="background-color:#313131"></div>
        <!--COLOR-->
            <div class="col p-0" style="background-color:#5c5c5c"></div>
        <!--COLOR-->
            <div class="col p-0" style="background-color:#898989"></div>
        <!--COLOR-->
            <div class="col p-0" style="background-color:#b2b2b2"></div>
        <!--[ copy and paste above this line ]-->
        </div>
    <!--IMAGE-->
        <div style="flex:6;
        
        background-image:url(https://empowher.org/wp-content/uploads/2021/03/image-placeholder-350x350-1.png);
        background-position:center;
        background-size:cover;
        
        "></div>
    </div>
    <!--SPACER-->
        <img src="https://iili.io/Cayw31R.png" class="w-100">
    </div>

</div> <!--end row 1-->
    
<!--------------------------------------------------------------------- [ ROW 2 ] -->
<div class="row mx-auto">

<!--BOTTOM LEFT-->
    <div class="col-sm p-0 mr-sm-3 mb-3" style="border-radius:10px; overflow:hidden; position:relative;">
    <div class="h-100 w-100 d-flex" style="position:absolute; top:0">    
    <!--IMAGE-->
        <div class="h-100" style="flex:1; 
        
        background-image:url(https://empowher.org/wp-content/uploads/2021/03/image-placeholder-350x350-1.png);
        background-position:center;
        background-size:cover;
        
        "></div>
    <!--ICON COL-->
        <div class="h-100 flex-column ml-3" style="flex:1">
        <!--ICON 1-->
            <div class="align-items-center justify-content-center mb-3" style="flex:1; background-color:#313131;"> 
                <i class="fa-sharp fa-moon" style="font-size:55px; color:#898989"></i>
                <!--[ replace fa-moon with the icon of your choice! ]-->
            </div>
        <!--ICON 2-->
            <div class="align-items-center justify-content-center" style="flex:1; background-color:#898989;">
                <i class="fa-sharp fa-star" style="font-size:55px; color:#313131"></i>
                <!--[ replace fa-star with the icon of your choice! ]-->
            </div>
        </div>
    </div>
    <!--SPACER-->
        <img src="https://iili.io/Cayw31R.png" class="w-100">
    </div>

    
<!--BOTTOM RIGHT-->
    <div class="col-sm mb-3 p-0 align-items-center justify-content-center" style="border-radius:10px; 
    
    background-image:url(https://empowher.org/wp-content/uploads/2021/03/image-placeholder-350x350-1.png);
    background-position:center;
    background-size:cover;">
    
    <!--QUOTE-->
        <div class="p-4 align-items-center justify-content-center flex-column text-left" style="position:absolute; border-radius:10px; height:80%; width:80%; opacity:0.9; background-color:#b2b2b2; color:#313131">
        <!--CONTENT-->
            <p class="w-100 m-0">
            <i class="fal fa-quote-left" style="color:#5c5c5c"></i>
            A quote. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            <i class="fal fa-quote-right" style="color:#5c5c5c"></i>
            </p>
        <!--CREDIT-->
            <p class="w-100 text-right font-italic text-uppercase" style="color:#5c5c5c">
            – Anonymous
            </p>
        </div>  
    <!--SPACER-->
        <img src="https://iili.io/Cayw31R.png" class="w-100">
    </div>

</div> <!--end row 2-->

<!-------------------------------------------------------------------- [ CREDITS ] -->
<div class="text-center faded">

<a href="https://toyhou.se/29936589.moodboard" data-toggle="tooltip" data-placement="right" title="code by sky">
    <i class="fa fa-ticket-airline text-muted"></i>
    <!--[ feel free to recolor and move around as long as it's visible and correctly linked! ]-->
</a>

</div> <!--end credits-->

<!----------------------------------------------------------------------------------->
    
</div> <!--end code-->