custom order - 𝚑𝚎𝚛𝚎𝚍𝚒𝚜 - writing snippet

<style>

    @import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap');

.container{
    width:429px;
    height:469px;
    background:#bd91d2;
    border: double 10px #bd91d2;
    padding:20px;
    background-image:url('https://i.imgur.com/Fhgic6l.png');
}

.leftSide{
    width:200px;
    height:429px;
    display: inline-block;
    vertical-align: top;
}

.rightSide{
    width:225px;
    height:429px;
    display: inline-block;
    vertical-align: top;
}

.titleHolder{
    width: 429px;
    height: 30px;
    font-family: Playfair Display;
    font-size: 22px;
    text-align: center;
    background: #c7aed7;
    text-transform: uppercase;
    color: #3d1b52;
    padding-top: 15px;
    box-shadow: 5px 10px #8a55ab;
    margin-bottom: 10px;
}

.pictureHolders{
    width:185px;
    height:190px;
    background:#fff;
    margin-top:10px;
    box-shadow: 5px 10px #8a55ab;
}

.quoteBox{
    width: 185px;
    height: 97px;
    background: #c7aed7;
    margin-bottom: 20px;
    padding: 10px;
    margin-top: 10px;
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    text-align: justify;
    letter-spacing: 2px;
    text-transform: uppercase;
    line-height: 25px;
    color:#3d1b52;
    box-shadow: 5px 10px #8a55ab;
}

.snippetHolder{
    width: 165px;
    height: 223px;
    padding: 20px;
    background: #c7aed7;
    font-family: 'Playfair Display', serif;
    font-size: 12px;
    text-align: justify;
    color: #3d1b52;
    overflow: auto;
    box-shadow: 5px 10px #8a55ab;
}



::-webkit-scrollbar-thumb:vertical {height:12px; background:#c7aed7; border-top:10px solid #bd91d2; border-bottom:10px solid #bd91d2;}
::-webkit-scrollbar-thumb:horizontal {background-color:#c7aed7;}
::-webkit-scrollbar {width:5px; height:7px;}

</style>

<center>
    <div class="container">
        <div class="titleHolder">
            Title of the writing snippet
        </div>
        <div class="leftSide">
            <div class="pictureHolders">
                <img src="https://i.imgur.com/wafH6Qz.png">
            </div>
            <div class="pictureHolders" style="margin-top:20px;">
                <img src="https://i.imgur.com/2q51Cbx.png">
            </div>
        </div>
        <div class="rightSide">
            <div class="quoteBox">
                 "Every family has a legacy and this is mine."
            </div>
            <div class="snippetHolder">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer malesuada nunc vel risus. Elit ut aliquam purus sit. Porttitor rhoncus dolor purus non enim praesent elementum facilisis. Ipsum suspendisse ultrices gravida dictum fusce. Enim praesent elementum facilisis leo vel fringilla est. Morbi tristique senectus et netus et malesuada fames ac. Egestas integer eget aliquet nibh praesent tristique. Adipiscing bibendum est ultricies integer quis auctor elit. Maecenas accumsan lacus vel facilisis volutpat est velit egestas. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum. Placerat in egestas erat imperdiet sed. Vitae auctor eu augue ut lectus arcu. Amet aliquam id diam maecenas ultricies mi eget mauris. Sed tempus urna et pharetra pharetra.
                <br><br>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer malesuada nunc vel risus. Elit ut aliquam purus sit. Porttitor rhoncus dolor purus non enim praesent elementum facilisis. Ipsum suspendisse ultrices gravida dictum fusce. Enim praesent elementum facilisis leo vel fringilla est. Morbi tristique senectus et netus et malesuada fames ac. Egestas integer eget aliquet nibh praesent tristique. Adipiscing bibendum est ultricies integer quis auctor elit. Maecenas accumsan lacus vel facilisis volutpat est velit egestas. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum. Placerat in egestas erat imperdiet sed. Vitae auctor eu augue ut lectus arcu. Amet aliquam id diam maecenas ultricies mi eget mauris. Sed tempus urna et pharetra pharetra.
                <br><br>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer malesuada nunc vel risus. Elit ut aliquam purus sit. Porttitor rhoncus dolor purus non enim praesent elementum facilisis. Ipsum suspendisse ultrices gravida dictum fusce. Enim praesent elementum facilisis leo vel fringilla est. Morbi tristique senectus et netus et malesuada fames ac. Egestas integer eget aliquet nibh praesent tristique. Adipiscing bibendum est ultricies integer quis auctor elit. Maecenas accumsan lacus vel facilisis volutpat est velit egestas. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum. Placerat in egestas erat imperdiet sed. Vitae auctor eu augue ut lectus arcu. Amet aliquam id diam maecenas ultricies mi eget mauris. Sed tempus urna et pharetra pharetra.
                <br><br>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer malesuada nunc vel risus. Elit ut aliquam purus sit. Porttitor rhoncus dolor purus non enim praesent elementum facilisis. Ipsum suspendisse ultrices gravida dictum fusce. Enim praesent elementum facilisis leo vel fringilla est. Morbi tristique senectus et netus et malesuada fames ac. Egestas integer eget aliquet nibh praesent tristique. Adipiscing bibendum est ultricies integer quis auctor elit. Maecenas accumsan lacus vel facilisis volutpat est velit egestas. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum. Placerat in egestas erat imperdiet sed. Vitae auctor eu augue ut lectus arcu. Amet aliquam id diam maecenas ultricies mi eget mauris. Sed tempus urna et pharetra pharetra.
            </div>
        </div>
    </div>
</center>