my personal website!
meowing.zip
website
reworked my about me. also a pronouns box with symbols showing what is okay and preferable
+36
-4
+10
-4
about-me.html
+10
-4
about-me.html
···
63
63
<bg-gradient aria-hidden="true"></bg-gradient>
64
64
<bg aria-hidden="true"></bg>
65
65
<div class="main">
66
-
<h3>who am i?</h3>
66
+
<h3><i style="margin-right: 10px;" class="ph ph-info"></i>who am i?</h3>
67
67
<div class="divider"></div>
68
+
<div class="about">
68
69
<a style="font-size: 13px;">
69
70
hiiii!! my name is Niko, this is my lil corner of the web <small style="font-size: 10px;">(waow)</small>!<br><br>
70
-
im a biromantic, asexual, genderfluid individual who suffers with a schizoaffective disorder <small style="font-size: 10px;">(more specfically the bipolar type)</small>
71
-
<br><br>i like computer-adjecent things and i also like to do video editing and VFX stuff <small style="font-size: 10px;">(every once in a blue moon)</small>!!
72
-
<br><br><a style="margin-top: 20px; color: light-dark(#d20f39, #f38ba8); font-size: 15px;" markdown="1">im autistic as Fuck!!! so communication *might* be hard, please keep that in mind if u ever choose to talk to me, its not that i dont care!!</a>
71
+
im a biromantic, asexual, genderfluid individual who likes computer-adjecent things and i also like to do video editing and VFX stuff <small style="font-size: 10px;">(every once in a blue moon)</small> !!
72
+
<br><br><a style="margin-top: 20px; color: light-dark(#d20f39, #f38ba8); font-size: 15px;">im autistic as Fuck!!! so communication *might* be hard, please keep that in mind if u ever choose to talk to me, its not that i dont care!!</a>
73
73
</a>
74
+
</div>
75
+
<div style="margin-top: 5px;" class="pronouns-box">
76
+
<h3 style="margin-top: 5px; font-size: 15px;"><i style="margin-right: 10px;" class="ph ph-info"></i>pronouns</h3>
77
+
<div class="divider"></div>
78
+
<a><i class="ph ph-heart" style="color: light-dark(#ea76cb, #f5c2e7);"></i> it/its<br><i style="color: light-dark(#04a5e5, #89dceb);" class="ph ph-thumbs-up"></i> they/them<br><i style="color: light-dark(#df8e1d, #f9e2af);" class="ph ph-smiley-meh"></i> she/her<br><i style="margin-right: 5px; color: light-dark(#d20f39, #f38ba8);" class="ph ph-x-circle"></i>he/him<br></a>
79
+
</div>
74
80
</div>
75
81
</div>
76
82
<div class="main">
+26
styles.css
+26
styles.css
···
65
65
padding: 20px;
66
66
box-shadow: 10px 5px 10px var(--crust);
67
67
}
68
+
.main .about {
69
+
text-align: "left";
70
+
margin-top: 10px;
71
+
width: 50%;
72
+
display: inline-block;
73
+
}
74
+
.main .pronouns-box {
75
+
background-color: light-dark(#dce0e880, #11111b80);
76
+
margin-top: 20px;
77
+
outline: 2px solid;
78
+
outline-color: var(--accent);
79
+
border-radius: 25px;
80
+
padding: 20px;
81
+
box-shadow: 10px 5px 10px var(--crust);
82
+
width: 35%;
83
+
display: inline-block;
84
+
margin-left: 100px;
85
+
}
68
86
.main:hover {
87
+
outline: 5px dashed;
88
+
outline-color: var(--accent);
89
+
opacity: 1;
90
+
background-color: var(--crust);
91
+
transform: scale(1.01, 1.01);
92
+
transition: ease-in-out 0.3s;
93
+
}
94
+
.pronouns-box:hover {
69
95
outline: 5px dashed;
70
96
outline-color: var(--accent);
71
97
opacity: 1;