Stor8

<!-----------------------------------------------------------------------------------
M O O D B O A R D
> couldn't come up with an actual name ;-;
                                                                  f2u code by skysong
 
things to edit (if you're not customizing more) should be marked in all caps with
instructions on what to change
 
r e s o u r c e s
editing code    https://th.circlejourney.net/
icons           https://fontawesome.com/
image hosting   https://freeimage.host/

g u i d e
· (ignore brackets)
· IMAGES: ctrl+f for [background-url] and replace them with your own
· IMAGE POSITIONING: ctrl+f for [background-position] and change the first number for horizontal, second number for vertical
· ICONS: in the sections marked [icon 1] and [icon 2], change the <i class"..."> to the icon of your choosing
 
------------------------------------------------------------------------------------>

<div class="container my-3 p-3" style="font-family:monospace;">
    <div class="row justify-content-md-center">
        <!--TOP LEFT-->
            <div class="col-sm-6 my-3">
            <div class="h-100 w-100" style="padding-bottom:100%; border-radius:10px; background-image:url(https://iili.io/2Cce1N2.png); background-size:cover; background-position:0% 20%;">
            </div>
            </div>
        <!--TOP RIGHT-->
            <div class="col-sm-6 my-3">
            <div class="w-100" style="height:0; padding-bottom:100%; width:100%; overflow:hidden;">
            <div class="container px-0" style="height:100%; padding-bottom:100%; width:100%;">
                <!--COLOR PALLETE-->
                    <div class="row m-0 w-100" style="height:20%; position:absolute; top:0; border-radius: 10px 10px 0 0; overflow:hidden;">
                        <div class="col" style="background-color:#414a6b"></div>
                        <div class="col" style="background-color:#78749e"></div>
                        <div class="col" style="background-color:#ca95ad"></div>
                        <div class="col" style="background-color:#debdbd"></div>
                    </div>    
                <!--IMAGE-->
                    <div class="row m-0 w-100" style="height:75%; position:absolute; bottom:0; border-radius: 0 0 10px 10px; overflow:hidden;">
                    <div class="h-100 w-100" style="background-image:url(https://iili.io/2C1VRCg.png); background-size:cover; background-position:0% 20%;"></div>
                    </div>
            </div></div></div>
    </div>
    <div class="row">
        <!--BOTTOM LEFT-->
            <div class="col-sm-6 my-3">
            <div class="ratio ratio-1x1" style="height:0; padding-bottom:100%; width:100%; border-radius:10px; overflow:hidden; position:relative;">
            <!--IMAGE-->
                <div style="width:54%; padding-bottom:100%; background-image:url(https://iili.io/2CEVSX1.png); background-size:cover; background-position:30% 0%;"></div>
            <!--ICON 1-->
                <div style="width:40%; height:47%; background-color:#debdbd; position:absolute; top:0; right:0; align-content:center; text-align:center;"> 
                    <i class="fal fa-moon" style="font-size:55px; color:#414a6b"></i>
                </div>
            <!--ICON 2-->
                <div style="width:40%; height:47%; background-color:#debdbd; position:absolute; bottom:0; right:0; align-content:center; text-align:center;">
                    <i class="fal fa-star" style="font-size:55px; color:#414a6b"></i>
                </div>
            </div>
            </div>
        <!--BOTTOM RIGHT-->
            <div class="col-sm-6 my-3">
            <div class="ratio ratio-1x1 bg-faded px-4" style="height:0; padding-bottom:100%; width:100%; border-radius:10px; overflow:hidden; background-image:url(https://iili.io/2CEu5XV.png); background-size:cover; background-position:0% 70%;">
                <!--QUOTE-->
                    <div class="p-3" style="width:75%; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); background-color:#debdbd">
                    <i class="far fa-quote-left" style="color:#78749e"></i>
                    <span style="color:#414a6b"> A quote. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
                    <i class="far fa-quote-right" style="color:#78749e"></i>
                    <p style="text-align:right; color:#78749e"><i><br>
                        – Anonymous
                    </i></p></div>
            </div></div>
    </div>
</div>

<!--CREDITS-->
    <div class="tooltipster pb-4" data-placement="right" title="code by sky" style="margin:0 auto; height:10px; width:50px; text-align:center;">
        <a href="https://toyhou.se/29936589.moodboard"><i class="fas fa-clouds-sun text-muted" style="font-size:10px"></i></a>
    </div>