Pronouns!

This commit is contained in:
Violet 2023-10-22 12:16:47 -05:00
parent c8f5ec940b
commit 36c9ce6654
3 changed files with 112 additions and 3 deletions

View file

@ -16,9 +16,10 @@
<hr>
<h2>...Who?</h2>
<p>Hi! I'm Violet, a 14 year old web and game developer. <br> If it wasn't already clear, though, I am not a graphic designer TwT.</p>
<p class="chip">Violet</p>
<p class="chip">Violet</p><br>
<p class="chip">They/Them</p>
<p class="chip">Non-Binary</p>
<p class="chip"><a href="p">(More info)</a></p>
<hr>
<h2>Where you can find me:</h2>
<p class="chip" style="border-color: red;">Ko-Fi: <a href="https://ko-fi.com/bingus_violet" style="color: rgb(255, 100, 100)">bingus_violet</a> - Please donate!</p>

47
static/p/index.html Normal file
View file

@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pronouns - Violet's Purgatory</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<h1>Preferences</h1>
<p class="chip love">Love</p>
<p class="chip like">Like</p>
<p class="chip silly">Fine if used Silly/Jokingly</p>
<p class="chip fine">Neutral</p>
<p class="chip hate">Hate</p>
<hr>
<h1>Names</h1>
<p class="chip love">Violet, Vivi, Vi, V</p>
<p class="chip like">Purple</p>
<p class="chip silly">Purple guy</p>
<hr>
<h1>Pronouns</h1>
<p class="chip love">They/Them</p>
<p class="chip like">She/Her</p>
<p class="chip fine">Other</p>
<p class="chip hate">He/Him</p>
<hr>
<h1>Words</h1>
<h2>Honorifics</h2>
<p class="chip like">Mrs/Ms, Miss, Ma'am</p>
<p class="chip silly">Sir, Mr</p>
<p class="chip fine">Mx</p>
<h2>Other words</h2>
<p class="chip love">Any silly Enby/Slime related terms</p>
<p class="chip like">Dude, Partner</p>
<p class="chip silly">Guy, Pardner</p>
<hr>
<h2>This page will be updated over time!</h2>
</body>
</html>

View file

@ -1,7 +1,7 @@
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400&display=swap'); */
:root {
font-family: 'Rubik', Verdana, Geneva, Tahoma, sans-serif;
font-family: Verdana, Geneva, Tahoma, sans-serif;
padding: 0;
text-align: center;
}
@ -22,6 +22,10 @@ body {
margin: auto;
background-color: black;
max-width: 1100px;
animation-name: "fade-in";
animation-duration: 1.5s;
animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}
a {
@ -81,4 +85,61 @@ hr {
opacity: 0.25;
border-width: 2px;
margin: 20px 10%;
}
.love::before {
content: "<3 ";
color: rgb(255, 100, 150);
}
.like::before {
content: ":) ";
color: limegreen;
}
.silly::before {
content: ":P ";
color: aqua;
}
.fine::before {
content: ":/ ";
color: yellow;
}
.hate::before {
content: ">:( ";
color: red;
}
.love {
border-color: rgb(255, 100, 150);
}
.like {
border-color: limegreen;
}
.silly {
border-color: aqua;
}
.fine {
border-color: yellow;
}
.hate {
border-color: red;
}
@keyframes fade-in {
0% {
opacity: 0;
transform: translateY(20%)
}
100% {
opacity: 1;
transform: none;
}
}