30. head in the clouds

<div class="container" style="max-width: 775px;">
  <div class="row no-gutters">
    <div class="col-sm-7 p-1">
      <div class="card h-100 text-center bg-faded">
        <!-- feature image -->
        <div style="background-image: url(https://cdn.discordapp.com/attachments/730913454726316074/1019697520835838072/haha_what_if_I_redesigned_snail_again_alt.png); background-size: cover; min-height: 300px; border-radius: .25rem .25rem 0 0;"></div>
        <!-- username and quick info -->
        <h1 class="mb-1 mt-2 text-primary" style="text-decoration: underline;">username</h1>
        <p class="mb-3">pro/nouns · info · other info</p>
      </div>
    </div>
    <div class="col-sm-5 p-1">
      <div class="card h-100 text-center p-3 bg-faded" style="min-height: 300px;">
        <div class="my-auto">
          <!-- a short blurb - this box doesn't scroll, it just keeps growing, so best suited for 1-3 short paragraphs-->
          <h3 style="text-decoration: underline;" class="text-primary">about me</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio </p>
          <p>Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros.</p>
        </div>
        <!-- code credit - you can move/reformat it, but please make sure it's visible -->
        <p style="opacity: 0.4;" class="text-secondary">html by <a href="https://toyhou.se/snail-legs" style="text-decoration: underline;" class="text-secondary">snail-legs</a></p>
      </div>
    </div>
  </div>
  <!-- links - add as many as you'd like, but I'd reccomend anywhere between 3-6 links -->
  <div class="d-flex justify-content-around align-items-center flex-wrap px-5">
    <a href="#">link name</a>
    <a href="#">link name</a>
    <a href="#">link name</a>
    <a href="#">link name</a>
  </div>
</div>