Stor8

<!-----------------------------------------------------------------------------------------
[ MOOODBOARD MISALIGNED ] // 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/40213786.16-moodboard-misaligned

[ 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="max-width:800px;">

<!---------------------------------------------------------------------------- [ ROW 1 ] -->

<div class="row ml-sm-4 ml-0 mr-0">

<!--PANTONE CHIP-->
    <div class="col-sm-5 p-0">
    <div class="flex-column" style="height:450px">
    <!--IMAGE-->
        <div class="align-items-center justify-content-center" style="position:relative; flex:1;
        
        background:url(https://empowher.org/wp-content/uploads/2021/03/image-placeholder-350x350-1.png);
        background-position:center;
        background-size:cover;
        
        ">
        <!--OVERLAY-->
            <div style="position:absolute; top:0; right:0; bottom:0; left:0;
            opacity:0.5; background:#9b9b9b"></div>
            <!--[ depending on your image you might want to edit the opacity ]-->
        <!--ICON-->
            <i class="fa-thin fa-sharp fa-sparkle" style="font-size:120px; z-index:3;
            color:#ededed"></i>
            <!--[ fa-sparkle | replace sparkle with your icon ]-->
        </div>
    <!--LABEL-->
        <div class="p-2" style="background:#ededed; color:#000">
        <!--TITLE-->
            <span style="font-size:20pt; font-weight:800">
            OC NAME</span>
        <!--CODE-->
            <br>00-0000 TCX
        <!--COLOR NAME-->
            <br><b>Color Name</b>
        </div>
    </div>
    </div>

<!--IMAGE-->
    <div class="col-sm p-0 d-sm-flex">
    <!--AES DOTS-->
        <div class="h-sm-100 flex-sm-column justify-content-end mt-sm-0 mt-2 ml-2 mr-sm-n1 mr-2 mb-sm-0 mb-n3 pb-sm-2" style="z-index:3">
        <!---->
        <i class="fa fa-circle" style="color:#bababa"></i>
        <i class="fa fa-circle my-sm-2 mx-sm-0 mx-2" style="color:#9b9b9b"></i>
        <i class="fa fa-circle" style="color:#575757"></i>
        <!---->
        </div>
    <!--IMG-->
        <div class="d-flex mt-sm-5 mt-2 mr-sm-5" style="flex:1; min-height:200px;
        
        background:url(https://empowher.org/wp-content/uploads/2021/03/image-placeholder-350x350-1.png);
        background-position:center;
        background-size:cover;
        
        ;"> </div>
    </div>
    
</div> <!--row 1 end-->
    
<!---------------------------------------------------------------------------- [ ROW 2 ] -->

<div class="row mx-auto mt-3">

<!--LEFT SIDE START-->
    <div class="col-sm pr-sm-3 pr-0 pl-0 pb-sm-3 order-sm-0 order-2 flex-column">
    
<!--QUOTE-->            
    <div class="font-italic text-right text-uppercase order-sm-1 order-2" style="font-size:22px; position:relative; font-weight:bold; color:#9b9b9b">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
    
<!--LARGE IMAGE-->
    <div class="mt-sm-3 mb-sm-0 mb-3 bg-warning order-sm-2 order-1" style="height:200px; position:relative;
    
    background:url(https://empowher.org/wp-content/uploads/2021/03/image-placeholder-350x350-1.png);
        background-position:center;
        background-size:cover;
    
    "> </div>

<!--CODE CREDIT-->
    <div class="text-sm-right text-center mt-2 order-3">
    <!--[ feel free to change the color, styling, etc; just make sure it's visible and links properly! ]-->
    <a href="https://toyhou.se/40213786.16-moodboard-misaligned" style="color:#9b9b9b" data-toggle="tooltip" data-placement="left" title="code by sky">
    <i class="fa-sharp fa-ticket-airline"></i>
    </a> </div>    

</div> <!--left side end-->

<!--RIGHT SIDE START-->
    <div class="col-sm p-0 flex-column">

<!--COLOR PALETTE-->
    <div class="row mx-auto ml-sm-3 w-100" style="height:30px">
    <!--COLOR-->
        <div class="col p-0" style="background:#bababa"></div>
    <!--COLOR-->
        <div class="col p-0" style="background:#9b9b9b"></div>
    <!--COLOR-->
        <div class="col p-0" style="background:#6b6b6b"></div>
    <!--COLOR-->
        <div class="col p-0" style="background:#575757"></div>
    <!--[ copy and paste above this line! ]-->
    </div>
    
<!--LAST SET OF IMAGES(??)-->
    <div class="row mx-auto mt-3 w-100" style="flex:1">
    <!--THIN IMAGE-->
        <div class="col-sm-3 mr-sm-3 mb-sm-0 mb-3 bg-primary" style="min-height:100px;
        
        background:url(https://empowher.org/wp-content/uploads/2021/03/image-placeholder-350x350-1.png);
        background-position:center;
        background-size:cover;
        
        "> </div>
    <!--MED IMAGE-->
        <div class="col-sm mb-3 mr-sm-4 bg-secondary" style="min-height:200px;
        
        background:url(https://empowher.org/wp-content/uploads/2021/03/image-placeholder-350x350-1.png);
        background-position:center;
        background-size:cover;
        
        "> </div>
    </div>
        
</div> <!--right side end-->
</div> <!--row 2 end-->

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

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