Make card image with text better

This commit is contained in:
bingus_violet 2024-03-30 01:42:20 -05:00
parent 1c66904e48
commit 573f02df52
3 changed files with 25 additions and 9 deletions

View file

@ -30,10 +30,15 @@
<div id="card">
<h2>Asahi</h2>
<div style="display: flex; justify-content: center; align-items: center;">
<img src="/imgs/asahiPFP.png" class="pfp">
<div>
<p>They/Them</p>
<p>Marcy & Violet &lt;3 </p>
<div style="width: 50%;">
<img src="/imgs/asahiPFP.png" class="pfp">
</div>
<div style="width: 50%;">
<div style="display: inline-block; float: left;">
<p>They/Them</p>
<p>Marcy & Violet &lt;3</p>
</div>
<!-- <p>THIS TEXT IS THE EPIC EXTREME FILLER TO TEST THE SITE'S FORMATTING :fire:</p> -->
</div>
</div>
<hr>

View file

@ -27,11 +27,17 @@
<div id="card">
<h2>{Violet}</h2>
<div style="display: flex; justify-content: center; align-items: center;">
<img src="https://api.violets-purgatory.dev/v1/pfp" class="pfp">
<div>
<p>They/Them</p>
<p>Developer</p>
<p>{DISCORD_STATUS}</p>
<div style="width: 50%;">
<img src="https://api.violets-purgatory.dev/v1/pfp" class="pfp">
</div>
<div style="width: 50%;">
<div style="display: inline-block; float: left;">
<p>They/Them</p>
<p>Developer</p>
<p>Dating Asahi &lt;3</p>
<p>{DISCORD_STATUS}</p>
</div>
<!-- <p>THIS TEXT IS THE EPIC EXTREME FILLER TO TEST THE SITE'S FORMATTING :fire:</p> -->
</div>
</div>
<hr>

View file

@ -40,12 +40,17 @@
.pfp {
border-radius: 15px;
border: darkgray 4px solid;
float: right;
width: 60%;
aspect-ratio: 1/1;
transform: scale(0.9);
border-radius: 50%;
}
.CLAlign {
display: inline-block;
}
.activity {
border-width: 3px;
border-radius: 10px;