[F2U HTML] Smol user (Code (Light))

<div class="container bg-faded p-3 mt-2" style="background-color:#111; background-image:url(https://images.unsplash.com/photo-1611702512763-ede5fd71ca92?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2574&q=80); background-position:center; background-size:cover; max-width:700px; min-heigh:350px; border: 3px solid #111; border-radius:20px;">
    <div class="row no-gutters">
        
<!-- ---------- PAGEDOLL IMAGE ---------- -->
        <div class="col-md-5">
            <div class="h-100" style="background-image:url(IMAGE_URL); background-position:center; background-repeat:no-repeat; background-size:contain; min-height:350px;">
            </div>
        </div>
        
        <div class="col-md-7">
        <div class="row no-gutters">
        
<!-- ---------- HEADER ---------- -->
        <div class="col-md-12">
            <div class="card border-0 m-1 p-3" style="min-height:50px; background-color:rgba(255,255,255,0.70); color:#666;">
                
                <h1 class="text-center text-uppercase display-4" style="letter-spacing:2px; font-size:1.7rem"><i class="fal fa-star fa-sm"></i> NameHere <i class="fal fa-star fa-sm"></i></h1>
                <hr class="w-100 mt-auto mb-2" style="background-color:#999;">
                <div class="text-center text-uppercase" style="letter-spacing:1px; font-size:0.7rem">Age • prn/prn • Other thing</div>
                
            </div>
        </div>
        
<!-- ---------- MAIN CONTENT ---------- -->
        <div class="col-md-12">
            <div class="card d-flex justify-content-around text-center border-0 m-1 p-3" style="min-height:180px; background-color:rgba(255,255,255,0.70); color:#666;">
               
  <p>
    Intended to be a user profile. Looks better with a light bg imo but doesn't need to be. Oh and this box doesn't scroll btw so maybe keep it short n sweet. 
  </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.
  </p>
                
            </div>
        </div>
        
<!-- ---------- FOOTER ---------- -->
        <div class="col-md-12">
            <div class="card text-center border-0 m-1 p-3" style="min-height:30px; background-color:rgba(255,255,255,0.70); color:#666;">
                
                <div style="letter-spacing:1.5px; font-size:0.7rem">
                    <a href="-" style="color:#666;">Sitename</a> • 
                    <a href="-" style="color:#666;">Sitename</a> •
                    <a href="-" style="color:#666;">Sitename</a>
                </div>
                
            </div>
        </div>
        
<!-- ---------- END ---------- -->
        </div>
        </div>
        
    </div>
</div>

<div class="container text-muted text-right my-1" style="max-width:700px; font-size:smaller;">
    <a href="-" class="tooltipster text-muted" title="Pagedoll image by -"><i class="far fa-image"></i></a> • 
    <a href="https://unsplash.com/" class="tooltipster text-muted" title="Background image from Unsplash"><i class="far fa-image"></i></a> • 
    <a href="https://toyhou.se/23295420.f2u-html-smol-user" class="tooltipster text-muted" title="Code by PastaTrash"><i class="far fa-code"></i></a>
</div>