RELATION SNIPPET (CODE)

<!--------------------------------
 
A. RELATION SNIPPET [ F2U ]
 
# To change the colours, press CTRL + F and replace all respective codes.
        White:      #fff
        Black:      #000
        Off-white:  #eee

--------------------------------->

<!-- RELATIONSHIP BOX -->
        
        <div class="mt-2 mx-auto justify-content-center">
        
        <div class="card border-0 col-auto p-0">
            <div style="height:100px; width:100px; background-color:#fff; background-image:url(https://via.placeholder.com/100.png); background-size:cover; background-position:center; background-repeat:no-repeat; background-attachment:scroll; border-color:#000; border-style: solid; border-width:1px;"></div>
        </div>
    
    <div class="card border-0 col-auto p-0" style="background-color:rgba(245, 245, 245, 0.0)">
        <br><br>
        <div class="row">
            <div class="col-auto">
                <div class="card rounded-0" style="margin-right:-30px; height:12px; max-width:45px;border-width:0px 0px 2px 0px; border-style: dotted; border-color:#000; background-color:rgba(245, 245, 245, 0.0)"></div>
            </div>
            <div class="col-auto">
                <!-- Change icon based on relationship! -->
                <i class="fas fa-heartbeat fa-xl" style="color:#000"></i>
            </div>
            <div class="col-auto">
                <div class="card rounded-0" style="margin-left:-30px; height:12px; max-width:45px;border-width:0px 0px 2px 0px; border-style: dotted; border-color:#000; background-color:rgba(245, 245, 245, 0.0)"></div>
            </div>
        </div>
        
    </div>
    
    <div class="card border-0 col-auto p-0">
        <a href="/LINK_HERE"><div style="height:100px; width:100px; background-color:#fff; background-image:url(https://via.placeholder.com/100.png); background-size:cover; background-position:center; background-repeat:no-repeat; background-attachment:scroll; border-color:#000; border-style: solid; border-width:1px;"></div></a>
    </div>
</div>
    
    <div class="col-12 mt-1">
        <div class="card rounded-0 mx-auto justify-content-center text-center p-2 text-uppercase" style="background-color:#000; color:#fff; font-size:13px; border:1px solid #000; height:30px; max-width:323px; letter-spacing:2px;">relationship</div>
    </div>
    <div class="col-12">
        <div class="card rounded-0 mx-auto text-justify p-2" style="background-color:#eee; color:#000; font-size:13px; border:1px solid #000; height:100px; max-width:323px; overflow:auto;">
            <p>Elaboration on relationship!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id semper mi. Curabitur placerat diam in mauris lacinia, sit amet sodales turpis imperdiet. Fusce tincidunt justo eget dictum viverra. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer at dolor egestas, pulvinar nulla nec, egestas nisl. Nunc vulputate at diam quis volutpat. Pellentesque vitae ex auctor, accumsan mi vitae, lobortis velit. Aliquam vel accumsan felis. Aenean dictum et nibh in finibus. Pellentesque malesuada ultricies neque, eu imperdiet massa pretium nec. Quisque fringilla vel elit et accumsan. Donec in elit vestibulum, lacinia tellus sed, pulvinar eros.</p>
        </div>
    </div>
    
         <!-- DONE -->