Violet/Violets-Purgatory
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Make card image with text better

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

9
static/asahi/index.html
View file

@ -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;">
<div style="width: 50%;">
<img src="/imgs/asahiPFP.png" class="pfp"> <img src="/imgs/asahiPFP.png" class="pfp">
<div> </div>
<div style="width: 50%;">
<div style="display: inline-block; float: left;">
<p>They/Them</p> <p>They/Them</p>
<p>Marcy & Violet &lt;3 </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>
</div> </div>
<hr> <hr>

8
static/index.html
View file

@ -27,12 +27,18 @@
<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;">
<div style="width: 50%;">
<img src="https://api.violets-purgatory.dev/v1/pfp" class="pfp"> <img src="https://api.violets-purgatory.dev/v1/pfp" class="pfp">
<div> </div>
<div style="width: 50%;">
<div style="display: inline-block; float: left;">
<p>They/Them</p> <p>They/Them</p>
<p>Developer</p> <p>Developer</p>
<p>Dating Asahi &lt;3</p>
<p>{DISCORD_STATUS}</p> <p>{DISCORD_STATUS}</p>
</div> </div>
<!-- <p>THIS TEXT IS THE EPIC EXTREME FILLER TO TEST THE SITE'S FORMATTING :fire:</p> -->
</div>
</div> </div>
<hr> <hr>
<div> <div>

5
static/root.css
View file

@ -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;