Make card image with text better
This commit is contained in:
parent
1c66904e48
commit
573f02df52
3 changed files with 25 additions and 9 deletions
|
@ -30,10 +30,15 @@
|
||||||
<div id="card">
|
<div id="card">
|
||||||
<h2>Asahi</h2>
|
<h2>Asahi</h2>
|
||||||
<div style="display: flex; justify-content: center; align-items: center;">
|
<div style="display: flex; justify-content: center; align-items: center;">
|
||||||
<img src="/imgs/asahiPFP.png" class="pfp">
|
<div style="width: 50%;">
|
||||||
<div>
|
<img src="/imgs/asahiPFP.png" class="pfp">
|
||||||
<p>They/Them</p>
|
</div>
|
||||||
<p>Marcy & Violet <3 </p>
|
<div style="width: 50%;">
|
||||||
|
<div style="display: inline-block; float: left;">
|
||||||
|
<p>They/Them</p>
|
||||||
|
<p>Marcy & Violet <3</p>
|
||||||
|
</div>
|
||||||
|
<!-- <p>THIS TEXT IS THE EPIC EXTREME FILLER TO TEST THE SITE'S FORMATTING :fire:</p> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<hr>
|
<hr>
|
||||||
|
|
|
@ -27,11 +27,17 @@
|
||||||
<div id="card">
|
<div id="card">
|
||||||
<h2>{Violet}</h2>
|
<h2>{Violet}</h2>
|
||||||
<div style="display: flex; justify-content: center; align-items: center;">
|
<div style="display: flex; justify-content: center; align-items: center;">
|
||||||
<img src="https://api.violets-purgatory.dev/v1/pfp" class="pfp">
|
<div style="width: 50%;">
|
||||||
<div>
|
<img src="https://api.violets-purgatory.dev/v1/pfp" class="pfp">
|
||||||
<p>They/Them</p>
|
</div>
|
||||||
<p>Developer</p>
|
<div style="width: 50%;">
|
||||||
<p>{DISCORD_STATUS}</p>
|
<div style="display: inline-block; float: left;">
|
||||||
|
<p>They/Them</p>
|
||||||
|
<p>Developer</p>
|
||||||
|
<p>Dating Asahi <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>
|
||||||
</div>
|
</div>
|
||||||
<hr>
|
<hr>
|
||||||
|
|
|
@ -40,12 +40,17 @@
|
||||||
.pfp {
|
.pfp {
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
border: darkgray 4px solid;
|
border: darkgray 4px solid;
|
||||||
|
float: right;
|
||||||
width: 60%;
|
width: 60%;
|
||||||
aspect-ratio: 1/1;
|
aspect-ratio: 1/1;
|
||||||
transform: scale(0.9);
|
transform: scale(0.9);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.CLAlign {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
.activity {
|
.activity {
|
||||||
border-width: 3px;
|
border-width: 3px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
|
Loading…
Reference in a new issue