basic (f2u) (CODE)

<div class="d-flex mx-auto px-5 justify-content-center" style="max-width:750px;">
    <div class="row justify-content-center">
        
        <!-- image -->
        <div class="col-auto mt-auto mb-1">
            <div class="row rounded-circle bg-faded" style="aspect-ratio: 1/1;min-width:175px;min-height:175px;
            
            background-image:url( IMAGE_URL_HERE );
            
            background-size:cover;">
            </div>
            <div class="row justify-content-center mt-2">
                <p class="text-sm text-muted font-weight-light" style="font-size:0.75em;font-family:monospace;max-width:175px;">
                    
                    <!-- quote -->
                    <i>"Quote here..."</i>
                    
                </p>
            </div>
        </div>
        
        <div class="col" style="padding-right:0;max-width:600px;min-width:200px;">
            
            <!-- name -->
            <h1 class="text-right font-weight-light mx-3 text-muted text-uppercase" style="letter-spacing:2px;">NAME HERE</h1>
            
            <!-- textbox -->
            <div class="pl-3 pb-2 pt-1 card round bg-faded" style="min-width:220px">
                
                <!-- head -->
                <div class="row px-2 no-gutters">
                    <div class="col-auto mt-1"><h3 class="font-weight-light text-primary"><i>about.</i></h3></div>
                    <div class="col ml-4"><p><hr></p></div>
                    
                    <!-- icon -->
                    <div class="col-auto mt-1 ml-3"><span class="fa-light fa-star text-muted"></span></div>
                </div>
                
                <!-- textbox text -->
                <div class="overflow-auto pr-3 pl-1" style="min-width:200px;max-height:150px;">
                    
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tortor at risus viverra adipiscing. Id diam vel quam elementum. Scelerisque fermentum dui faucibus in ornare quam viverra orci sagittis. Porttitor eget dolor morbi non arcu risus quis varius. Aenean pharetra magna ac placerat vestibulum lectus. Et malesuada fames ac turpis egestas. Laoreet suspendisse interdum consectetur libero id. Lobortis mattis aliquam faucibus purus in massa tempor nec feugiat. Maecenas pharetra convallis posuere morbi leo urna molestie. Sed faucibus turpis in eu mi bibendum neque egestas congue. Netus et malesuada fames ac turpis.
                    </p>
                    <p>
                        Enim neque volutpat ac tincidunt vitae semper quis. Egestas maecenas pharetra convallis posuere morbi leo urna molestie. Arcu cursus vitae congue mauris rhoncus aenean vel. Viverra vitae congue eu consequat ac felis donec. Faucibus ornare suspendisse sed nisi. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Libero enim sed faucibus turpis in eu mi. Ultricies leo integer malesuada nunc. Gravida arcu ac tortor dignissim convallis. Euismod in pellentesque massa placerat duis. Consectetur a erat nam at lectus urna duis convallis.
                    </p>
                    
                </div>
            </div>
        </div>
    </div>
</div>
<div class="mx-auto px-5 pt-1" style="max-width:750px;">
    <p class="text-right" style="font-size:0.75em;"><a class="tooltipster" title="code by tofusoup" href="https://toyhou.se/tofusoup"><i class="fa-light fa-code"></i></a></p>
</div>