Stor8

<div class="container p-0" style="max-width:800px; min-height:750px; margin-top:150px; color: #FFFFFE">
    <div class="row no-gutters h-100">
        <!-- straw deco left -->
        <div class="col-auto justify-content-end">
            <div class="row no-gutters h-100 align-items-center justify-content-end">
                <div class="col d-none d-lg-block" style="width:10px; height:55%; background:#DED39B;"></div>
                <div class="col d-none d-md-block mx-3" style="width:10px; height:80%; background:#DED39B;"></div>
                <div class="col col-md" style="width:10px; height:95%; background:#DED39B;"></div>
            </div>
        </div>
        <!-- content -->
        <div class="col mx-2 mx-md-3">
            <div class="row no-gutters">
                <!-- image box -->
                <div class="row no-gutters w-100">
                    <div class="row no-gutters w-100" style="position:absolute">
                        <!-- left icon -->
                        <div class="col-auto ml-3 d-none d-md-block" style="width:70px; height:100px; background-color:#BFC38A; bottom: -50px">
                            <div class="h-100 w-100 justify-content-center align-items-end pb-3">
                                <i class="fal fa-wheat fa-3x" style="color:#ffffff"></i>
                            </div>
                        </div>
                        
                        <!-- image -->
                        <div class="col mx-2 mx-md-3" style="height:300px; bottom:70px">
                            <div class="justify-content-center p-2" style="height:80%; background-color:#BFC38A">
                                <!-- the image url should be the image address (right click image and press copy image link) -->
                                <div class="w-100" style="background: url('https://f2.toyhou.se/file/f2-toyhou-se/images/128694554_gVQP5jfp1TK22yY.png'); background-repeat: no-repeat; background-size: contain; background-position: center"></div>
                            </div>
                        </div>
                        
                        <!-- right icon-->
                        <div class="col-auto mr-3 d-none d-md-block" style="width:70px; height:100px; background-color:#BFC38A; bottom:-50px">
                            <div class="h-100 w-100 justify-content-center align-items-end pb-3">
                                <i class="far fa-seedling fa-3x" style="color:#ffffff"></i>
                            </div>
                        </div>
                    </div>
                    <div class="w-100" style="height:180px; background-color:#E6D2AA"></div>
                </div>
                
                <!-- other three boxes -->
                <div class="accordion w-100" id="accordion" role="tablist" aria-multiselectable="true">
                    <!-- personality -->
                    <div class="w-100 mt-3" style="min-height:100px; background-color:#E4C793;">
                        <!-- button -->
                        <div class="card" role="tab" id="personality-heading" style="background:none; border:none">
                            <a data-toggle="collapse" data-parent="#accordion" href="#personality" class="mx-auto mt-3 justify-content-center align-items-center" style="width:90%; background-color:#BFC38A; height:30px;">
                                <span class="text-center" style="font-size:1.2em; color: #FFFFFE; font-variant:small-caps">Character Name</span>
                            </a>
                        </div>
                        
                        <!-- content -->
                        <div id="personality" class="collapse show" role="tabpanel" data-parent="#accordion">
                            <div class="card-body pt-2 px-3 pb-3">
                                <div class="row no-gutters">
                                    <div class="col-md mr-md-1">
                                        <p>Some personality or short description things can go here! 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.</p>
                                        <p>Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
                                    </div>
                                    <hr class="d-md-none w-100" style="background-color:#ffffff; opacity:0.5">
                                    <div class="col-md ml-md-1">
                                        <ul class="fa-ul">
                                            <li><span class="fa-li"><i class="fat fa-circle fa-2xs"></i></span>You can put some trivia here! Or maybe a likes/dislikes list. Could also have positive, neutral, and negative traits.</li>
                                            <li><span class="fa-li"><i class="fat fa-circle fa-2xs"></i></span>You can change the bullet icon as well, it's done with FontAwesome.</li>
                                            <li><span class="fa-li"><i class="fat fa-circle fa-2xs"></i></span> On mobile this list will appear under the text on the left!Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            
                        </div>
                    </div>
                    <!-- history -->
                    <div class="w-100 mt-3" style="min-height:100px; background-color:#E4BB89">
                        <!-- button -->
                        <div class="card" role="tab" id="history-heading" style="background:none; border:none">
                            <a data-toggle="collapse" data-parent="#accordion" href="#history" class="mx-auto mt-3 justify-content-center align-items-center" style="width:90%; background-color:#BFC38A; height:30px">
                                <span class="text-center" style="font-size:1.2em; color: #FFFFFE; font-variant:small-caps">History</span>
                            </a>
                        </div>
                        
                        <!-- content -->
                        <div id="history" class="collapse" role="tabpanel" data-parent="#accordion">
                            <div class="card-body p-3">
                                <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.</p>
                                <p class="text-right">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>
                    </div>
                    <!-- relationships -->
                    <div class="w-100 mt-3" style="min-height:100px; background-color:#E4B389">
                        <!-- button -->
                        <div class="card" role="tab" id="relationships-heading" style="background:none; border:none">
                            <a data-toggle="collapse" data-parent="#accordion" href="#relationships" class="mx-auto mt-3 justify-content-center align-items-center" style="width:90%; background-color:#BFC38A; height:30px;">
                                <span class="text-center" style="font-size:1.2em; color: #FFFFFE; font-variant:small-caps">Relationships</span>
                            </a>
                        </div>
                        
                        <!-- content -->
                        <div id="relationships" class="collapse" role="tabpanel" data-parent="#accordion">
                            <div class="card-body p-3">
                                <div class="row no-gutters justify-content-center">
                                    <div class="col-6 col-md-3 mb-2 mb-md-0">
                                        <a href="CHARACTER-LINK-HERE" style="color:#4c552f">
                                            <span class="justify-content-center">Character Name</span>
                                        </a>
                                        
                                        <div class="justify-content-center">
                                            <i class="fas fa-heart mr-1"></i>
                                            <i class="fas fa-heart mr-1"></i>
                                            <i class="far fa-heart-half-stroke mr-1"></i>
                                            <i class="far fa-heart mr-1"></i>
                                            <i class="far fa-heart"></i>
                                        </div>
                                        
                                        <div class="text-center">
                                            <p>Short bit of text here to describe the relationship.</p>
                                        </div>
                                    </div>
                                    <div class="col-6 col-md-3 mb-2 mb-md-0">
                                        <a href="CHARACTER-LINK-HERE" style="color:#4c552f">
                                            <span class="justify-content-center">Character Name</span>
                                        </a>
                                        
                                        <div class="justify-content-center">
                                            <i class="fas fa-heart-crack mr-1"></i>
                                            <i class="far fa-heart-crack mr-1"></i>
                                            <i class="far fa-heart-crack mr-1"></i>
                                            <i class="far fa-heart-crack mr-1"></i>
                                            <i class="far fa-heart-crack"></i>
                                        </div>
                                        
                                        <div class="text-center">
                                            <p>Up to two next to each other on phone, four next to each other on tablet and larger.</p>
                                        </div>
                                    </div>
                                    <div class="col-6 col-md-3">
                                        <a href="CHARACTER-LINK-HERE" style="color:#4c552f">
                                            <span class="justify-content-center">Character Name</span>
                                        </a>
                                        
                                        <div class="justify-content-center">
                                            <i class="fas fa-heart mr-1"></i>
                                            <i class="fas fa-heart mr-1"></i>
                                            <i class="fas fa-heart mr-1"></i>
                                            <i class="fas fa-heart mr-1"></i>
                                            <i class="far fa-heart-slash"></i>
                                        </div>
                                        
                                        <div class="text-center">
                                            <p>Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
                                        </div>
                                    </div>
                                    <div class="col-6 col-md-3">
                                        <a href="CHARACTER-LINK-HERE" style="color:#4c552f">
                                            <span class="justify-content-center">Character Name</span>
                                        </a>
                                        
                                        <div class="justify-content-center">
                                            <i class="fas fa-heart mr-1"></i>
                                            <i class="fas fa-heart mr-1"></i>
                                            <i class="fas fa-heart mr-1"></i>
                                            <i class="fas fa-heart mr-1"></i>
                                            <i class="fas fa-heart"></i>
                                        </div>
                                        
                                        <div class="text-center">
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- straw deco right -->
        <div class="col-auto justify-content-start">
            <div class="row  no-gutters h-100 align-items-center">
                <div class="col" style="width:10px; height:95%; background:#DED39B;"></div>
                <div class="col d-none d-md-block mx-3" style="width:10px; height:80%; background:#DED39B;"></div>
                <div class="col d-none d-lg-block" style="width:10px; height:55%; background:#DED39B;"></div>
            </div>
        </div>
    </div>
    <!-- CODE CREDIT, DO NOT REMOVE -->
    <div class="float-right mr-0 mr-lg-5 mr-md-4 mt-md-n3" style="font-size:1.5em;">
        <a href="https://toyhou.se/Persimoen" title="Code by Persimoen" style="color:#819672;"><i class="fal fa-tomato"></i></a>
    </div>
</div>