<div class="container col-sm-12 col-md-7 p-2 justify-content-center">
<div class="row col-12 justify-content-center">
<div class="col-sm-12 col-md-7 card rounded-0 p-0" style="height: 270px;">
<!--top left font awesome emoji below, feel free to change it or adjust "text-primary" to "text-warning, text-secondary, text-info, text-danger or text-success" !-->
<i class="fa-solid fa-heart-pulse text-primary" style="font-size: 26px; position: absolute; left: -8px; top: -10px;"></i>
<!--icon end-->
<div class="card-header card-faded justify-content-between pb-1 px-3"><h3 class="font-weight-bold">
NAME
<span class="text-muted">,</span>
00
<span class="text-muted">
..
</span>
<br>
PR/NS</h3>
<!--
RIGHT SIDE OF HEADER TEXT BELOW! please feel free to replace stuff as you'd like, what i have so far is astrology sun + moon signs (find the txt symbols here, copy paste onto the x: https://myastrosecrets.com/zodiac-text-symbols-not-emoji/ ), MBTI, and then Enneagram. i don't want to spam this with links, but just google the quiz or etc if you're interested :D
you can replace these with whatever the hell you want!!! ik not everyone likes these personality descriptor things.
a quote might look nice! :3
the <br> = line break/starts a new line.
-->
<h4 class="text-muted">
x ☉ + x ☾
<br>
<b>MBTI</b>
-
<u>0w1</u>
</h4></div>
<!-- right side END -->
<!-- icon link below! replace the .png link to your own :3 -->
<div class="card-block pl-3 pr-2 py-2" style="overflow: auto;"> <img class="img-thumbnail rounded-0 bg-faded float-left mr-2 ml-n1 mb-n1"
src="https://media.discordapp.net/attachments/955323640541503508/1019654102759788554/unknown.png"
style="width: 110px; max-width: 100%; height: 110px; max-height: 100%; object-fit: cover;">
<!-- description start,
remove class="text-center" if you do not want centered text!
or alternatively change it to "text-right" for right-aligned text. -->
<p class="text-center">
write some text here! put some funny lil words or describe yourself. this box scrolls so do not worry :)
</p>
<p class="text-center">
another paragraph if you wantt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</p>
<hr class="my-2"> <!--this is the line divider-->
<p class="text-center"><sub>img credit/disclaimer/dni/etc whatever :3</sub></p>
<!-- description end-->
</div>
<div class="card-footer bg-faded py-1 px-2 text-center justify-content-between text-muted" style="font-size: 18px;">
<p class="m-0">
<!-- LINKS BELOW! please feel free to adjust to whatever content you want. see available font-awesome icons at fontawesome.com/icons.
title = what the text will show upon hover! please adjust as needed. and NOTE, in circlejourney/live editor, these tooltip pop-ups will NOT appear, they only appear live on toyhouse.
replace the # with your links! -->
<a href="#" target="_blank" data-toggle="tooltip" title="user#0000" class="text-warning"><i class="fa-brands fa-discord"></i></a> \
<a href="#" target="_blank" data-toggle="tooltip" title="rentry/carrd" class="text-primary"><i class="fa-solid fa-memo-pad"></i></a> \
<a href="#" target="_blank" data-toggle="tooltip" title="twitter" class="text-success"><i class="fa-brands fa-twitter"></i></a>
</p>
<p class="m-0">
<!-- CREDIT BELOW! please do not touch outside of changing what kind of icon it is. -->
<a href="https://toyhou.se/17995458.user-bio-03" data-toggle="tooltip" title="code by lukas" class="text-warning"><i class="fa-solid fa-circle-heart"></i></a>
</p>
</div>
</div>
<div class="col-sm-12 col-md-4 px-0 px-md-2 pt-2 pt-md-0" style="height: 270px;">
<!-- right image below, any size works if the subject is in the center! -->
<img class="img-fluid img-thumbnail rounded-0 w-100 h-100 bg-faded" src="https://media.discordapp.net/attachments/955323640541503508/1019655084377907320/unknown.png" style="object-fit: cover;">
</div>
</div>
</div>
