ocean birds

<!-- this is a html-only f2u code by herosjourney
- though if other css is involved, it'll look different

this should look at least decent with all current site skins.
 -->


<div class="container ml-3 p-5" style="background-image:url('https://i.imgur.com/7MclyC8.jpeg'); max-width:850px; border-radius:30px;">

<div class="card m-2 p-3 h-100" style="background:#023641; color:#c3deec;">
    <div class="row gx-2">
    <!-- card image -->
        <div class="col-4"><img src="https://i.imgur.com/lhSvWYG.jpeg"></div>


    <!-- user info -->
    <div class="col-8">

        <!-- USERNAME -->

    <h1 class="text-center" style="color:#c0e7e6">username</h1>
    <hr class="w-80">

        <!-- LINKS | THESE CENTER AUTOMATICALLY, SEPARATED FOR EASE OF EDITING -->
    <div class="text-center mt-n2" style="color:#5ab5d1">
        <a href="LINK" target="_blank" class="mx-2" style="font-size:16pt; color:inherit;"><i class="fa-brands fa-bluesky"></i></a>
        <a href="LINK" target="_blank" class="mx-2" style="font-size:16pt; color:inherit;"><i class="fa-brands fa-trello"></i></a>
        <a href="LINK" target="_blank" class="mx-2" style="font-size:16pt; color:inherit"><i class="fa-brands fa-deviantart"></i></a>
        <a href="LINK" target="_blank" class="mx-2" style="font-size:16pt; color:inherit"><i class="fa-brands fa-tumblr"></i></a>
        <a href="LINK" class="mx-2" style="font-size:16pt; color:inherit"><i class="fa-brands fa-twitter"></i></a>
    </div>

    <!-- USER BLURB -->
    <div class="pt-2 text-justify w-90"><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. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>

<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. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>

<!-- END OF USER COLUMN-->
    </div>
    </div>
</div>


</div>

<div class="container"><a href="https://toyhou.se/~herosjourney"><i class="fa-duotone fa-solid fa-code"></i> CODE</a></div>