<div class="card bg-dark border-0 p-1 mx-auto" style="width:360px; height:150px">
<!--- banner image --->
<div style="background-image: url('https://cdn.discordapp.com/attachments/1018721946705334334/1148836332924317816/23220512.png'); height:110px">
<!--- icon image --->
<img src="https://cdn.discordapp.com/attachments/1018721946705334334/1148836332924317816/23220512.png" style="border-radius: 50%; height:100px;position: absolute; left: 7px; top: 45px;">
<div class="card p-1 mx auto" style="width:auto;position: absolute; left: 110px; top: 99px;">
<!--- info --->
<p style="font-size:13px">
NAME • CON/TENT •️ OTHER
</p>
</div>
<!--- social info --->
<p style=";position: absolute; left: 95px; top: 128px; font-size:11px">
QUESTIONS: 10 • ANSWERS: 10 • FOLLOWERS: 100
</p>
</div>
</div>
<!--- card two which is the bio --->
<div class="card bg-dark border-0 p-1 mx-auto" style="width:360px; height:auto;margin:5px">
<p><b><i class="fa-solid fa-user"></i> USER BIO:</b><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit.
</p>
</div>
<!--- card three --->
<div class="card bg-dark border-0 p-1 mx-auto" style="width:360px; height:170px; margin: 5px;">
<div style="height:170px;border:0px;overflow:auto;">
<!--- question one --->
<div class="card p-1 mx auto" style="width:280px; margin-bottom: 6px;">
<p style="font-size:13px">
<i class="fa-solid fa-question"></i> |<b> Question </b><br> A | answer Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
<!--- question two --->
<div class="card p-1 mx auto" style="width:280px; margin-bottom: 6px;">
<p style="font-size:13px">
<i class="fa-solid fa-question"></i> |<b> Question </b><br> A | answer Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
<!--- question three --->
<div class="card p-1 mx auto" style="width:280px; margin-bottom: 6px;">
<p style="font-size:13px">
<i class="fa-solid fa-question"></i> |<b> Question </b><br> A | answer Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
<!--- question four --->
<div class="card p-1 mx auto" style="width:280px; margin-bottom: 6px;">
<p style="font-size:13px">
<i class="fa-solid fa-question"></i> |<b> Question </b><br> A | answer Lorem ipsum dolor sit amet, consectetur adipiscing elit. .
</p>
</div>
<!--- question five --->
<div class="card p-1 mx auto" style="width:280px; margin-bottom: 6px;">
<p style="font-size:13px">
<i class="fa-solid fa-question"></i> |<b> Question </b><br> A | answer Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
<!--- question six --->
<div class="card p-1 mx auto" style="width:280px; margin-bottom: 6px;">
<p style="font-size:13px">
<i class="fa-solid fa-question"></i> |<b> Question </b><br> A | answer Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
<!--- question seven --->
<div class="card p-1 mx auto" style="width:280px; margin-bottom: 6px;">
<p style="font-size:13px">
<i class="fa-solid fa-question"></i> |<b> Question </b><br> A | answer Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
<!--- question eight --->
<div class="card p-1 mx auto" style="width:280px; margin-bottom: 6px;">
<p style="font-size:13px">
<i class="fa-solid fa-question"></i> |<b> Question </b><br> A | answer Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
<!--- question nine --->
<div class="card p-1 mx auto" style="width:280px; margin-bottom: 6px;">
<p style="font-size:13px">
<i class="fa-solid fa-question"></i> |<b> Question </b><br> A | answer Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
<!--- question ten --->
<div class="card p-1 mx auto" style="width:280px; margin-bottom: 6px;">
<p style="font-size:13px">
<i class="fa-solid fa-question"></i> |<b> Question </b><br> A | answer Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
<!--- end code --->
</div>
</div>
