simple card

<!--If you want to use your own background image, feel free to add an image URL!-->
<div class="container card card-block border-0" style="background: url(); background-color: #999; color: #000000; border-radius: 25px;">
   <div class="row m-1">
     <div class="col-sm-4 m-3 container card card-block rounded-0 border-0 text-center" style="border-radius: 25px; background-color: #fff;"><!--Feel free to change bg-color!-->
       <h1>~•NAME•~</h1>
       <hr class="mx-0" style="border-style: solid; border-color: #000000;"><!--Feel free to change border color!-->
       <img src="https://via.placeholder.com/600?text=SQUARE IMAGE" class="rounded-circle">
       <!--For a square image, leave class="" empty.
       For a square image with rounded corners, use class="rounded".
       For a circular image, use class="rounded-circle".-->
     </div>
     <div class="col-sm m-3 container card card-block rounded-0 border-0" style="border-radius: 25px; background-color: #fff;"><!--Feel free to change bg-color!-->
       <h1 class="text-center">~•ABOUT•~</h1>
       <hr class="mx-0" style="border-style: solid; border-color: #000000;"><!--Feel free to change border color!-->
       <p>
         Paragraph description goes here.
       </p>
     </div>
     <div class="col-sm-2 m-3 container card card-block rounded-0 border-0 text-center" style="border-radius: 25px; background-color: #fff;"><!--Feel free to change bg-color!-->
       <h1 class="text-center">~•INFO•~</h1>
       <hr class="mx-0" style="border-style: solid; border-color: #000000;"><!--Feel free to change border color!-->
         Species<br>
         Age<br>
         Gender<br>
         Pronouns<br>
         Orientation
         <hr class="mx-0" style="border-style: solid; border-color: #000000;"><!--Feel free to change border color!-->
         <b>Likes</b>item<br>item<br>item<br>
         <br>
         <b>Dislikes</b>item<br>item<br>item<br>
     </div>
   </div>
</div>