[F2U] Fishy (Code)

<!-- Colors - Use the find and replace function to quickly swap out the colors

    Fish body: #ddd
    Fish eye: #fff
    Text + border color: #000
    Content area tint: rgba(0,0,0,0.2)

-->

<!-- NOTICE --

    This code requires a lot of very precise positioning to work (which is why it isn't mobile friendly) so unless you are an experienced HTML coder, please do not touch anything other than the colors or content areas because you might accidentally break the code!
    
-->

<div class="mx-auto my-5" style="max-width:650px;">
<div class="row no-gutters mx-auto">

<!-- Fish body -->

<div class="col">
    
    <div class="card mx-auto rounded-0 border-0 bg-transparent" style="max-width:500px; height:150px; overflow:hidden;">
        <div>
            <div class="rounded-circle" style="background:#ddd; height:350px;"></div>
        </div>
    </div>

    <div class="card mx-auto rounded-0 border-0 bg-transparent" style="max-width:500px; height:150px; overflow:hidden; transform:rotate(180deg);">
        <div>
            <div class="rounded-circle" style="background:#ddd; height:350px;"></div>
        </div>
    </div>
    
    <div style="position:absolute; top:120px; left:50px;">
        <div class="rounded-circle" style="height:45px; width:45px; background:#fff;"></div>
    </div>
    
    <!-- Content area -->
    
    <div style="position:absolute; top:60px; left:75px;">
        <div class="card rounded-0 p-2" style="height:175px; width:300px; background:rgba(0,0,0,0.2); color:#000; border-color:#000; border-width:2px; overflow:auto; font-family:trebuchet ms">
            <div>
                <h1 class="text-uppercase mb-0 mt-1" style="font-size:small">Name</h1>
                <span class="small mt-0">pronouns / title / etc.</span>
                <hr class="my-2" style="border-color:#000; opacity:0.2;">
                <p class="small">Write a short bio here. This box can scroll if needed. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Consequat semper viverra nam libero justo laoreet sit.</p>
            </div>
        </div>
    </div>

</div>

<!-- Fish tail -->

<div class="col" style="max-width:200px;">

    <div style="overflow:hidden; max-width:200px;">
        <div class="card mx-auto rounded-0 border-0 bg-transparent" style="height:150px; overflow:hidden;">
            <div>
                <div class="rounded-circle" style="background:#ddd; height:350px; width:450px;"></div>
            </div>
        </div>
        
        <div class="card mx-auto rounded-0 border-0 bg-transparent" style="height:150px; overflow:hidden; transform:rotate(180deg); float:left">
            <div>
                <div class="rounded-circle" style="background:#ddd; height:350px; width:450px;"></div>
            </div>
        </div>
    </div>

</div>

</div>

    <div class="float-right">
        <hr class="my-1 border-0">
        <p class="small"><a href="https://toyhou.se/Zoraptera" title="HTML by Zorapteryx" class="tooltipster"><i class="fa-sharp fa-bracket-square"></i> <i class="fa fa-dragon"></i> <i class="fa fa-telescope"></i> <i class="fa fa-sparkles"></i> <i class="fa-sharp fa-bracket-square-right"></i></a></p>
    </div>
    
</div>