my personal website!
meowing.zip
website
new neat little animations for the website buttons when hovering them waow
+38
-39
+26
-26
index.html
+26
-26
index.html
···
61
61
<a style="font-size: 12px; color: light-dark(var(--light-subtext), var(--dark-subtext));"><small>let me know if you want urs added here!</small></a>
62
62
</div>
63
63
<div style="padding: 5px; margin-bottom: 10px">
64
-
<a href="https://aquamarine.gay"><img alt="aquamarine.gay" src="./assets/88x31/friends/aquamarine.gif"></a>
65
-
<a href="https://atapi.space"><img alt="atapi.space" src="./assets/88x31/friends/atapi.gif"></a>
66
-
<a href="https://daniela.lol"><img alt="daniela.lol" src="./assets/88x31/friends/daniela.gif"></a>
67
-
<a href="https://eeep.ee"><img width="88" width="31" alt="a cropped rotated fox face emoji, in shades of gray, meant to looks like a platinum fox" src="./assets/88x31/friends/chfour.svg"/></a>
68
-
<a href="https://f0urst4r.net/"><img src="./assets/88x31/friends/f0urst4r.gif" alt="F0URST4R" title="F0URST4R"></a>
69
-
<a href="https://ielenia.lgbt"><img alt="ielenia.lgbt" src="./assets/88x31/friends/ielenia.png"></a>
70
-
<a href="https://invoxiplaygames.uk"><img alt="invoxiplaygames.uk" src="./assets/88x31/friends/invoxiplaygames.png"></a>
71
-
<a href="https://jack.cab"><img alt="jack.cab" src="./assets/88x31/friends/jackcab.png"></a>
72
-
<a href="https://jbc.lol"><img src="./assets/88x31/friends/jbc.svg" alt="jb's site" style="image-rendering: pixelated;"/></a>
73
-
<a href="https://notfire.cc"><img alt="notfire.cc" src="./assets/88x31/friends/notfire.gif"></a>
74
-
<a href="https://potatoe.ca"><img alt="potatoe.ca" src="./assets/88x31/friends/potatoe.png"></a>
75
-
<a href="https://shiver-j.neocities.org"><img alt="shiver j." src="./assets/88x31/friends/shiverj.png"></a>
76
-
<a href="https://sneexy.synth.download"><img src="./assets/88x31/friends/sneexy.svg" alt="Sneexy"></a>
77
-
<a href="https://reimu.info"><img alt="reimu.info" src="./assets/88x31/friends/ezio.png"></a>
78
-
<a href="https://rodents.rodeo"><img alt="rodents.rodeo" src="./assets/88x31/friends/mjdxp.png"></a>
79
-
<a href="https://ry.cd-rom.net"><img alt="ry.cd-rom.net" src="./assets/88x31/friends/ryfox.png"></a>
80
-
<a href="https://thxdeeply.com"><img alt="thxdeeply.com" src="./assets/88x31/friends/thxdeeply.gif"></a>
81
-
<a href="https://w.on-t.work"><img alt="w.on-t.work" src="./assets/88x31/friends/wont-work.png"></a>
82
-
<a href="https://witchfuneral.quest"><img alt="witchfuneral.quest" src="./assets/88x31/friends/witchfuneral.png"></a>
83
-
<a href="https://zenfyr.dev/"><img src="./assets/88x31/friends/zenfyr.webp" alt="zenfyr" title="zenfyr"></a>
64
+
<a href="https://aquamarine.gay"><img class="web-button" alt="aquamarine.gay" src="./assets/88x31/friends/aquamarine.gif"></a>
65
+
<a href="https://atapi.space"><img class="web-button" alt="atapi.space" src="./assets/88x31/friends/atapi.gif"></a>
66
+
<a href="https://daniela.lol"><img class="web-button" alt="daniela.lol" src="./assets/88x31/friends/daniela.gif"></a>
67
+
<a href="https://eeep.ee"><img class="web-button" width="88" width="31" alt="a cropped rotated fox face emoji, in shades of gray, meant to looks like a platinum fox" src="./assets/88x31/friends/chfour.svg"/></a>
68
+
<a href="https://f0urst4r.net/"><img class="web-button" src="./assets/88x31/friends/f0urst4r.gif" alt="F0URST4R" title="F0URST4R"></a>
69
+
<a href="https://ielenia.lgbt"><img class="web-button" alt="ielenia.lgbt" src="./assets/88x31/friends/ielenia.png"></a>
70
+
<a href="https://invoxiplaygames.uk"><img class="web-button" alt="invoxiplaygames.uk" src="./assets/88x31/friends/invoxiplaygames.png"></a>
71
+
<a href="https://jack.cab"><img alt="jack.cab" class="web-button" src="./assets/88x31/friends/jackcab.png"></a>
72
+
<a href="https://jbc.lol"><img class="web-button" src="./assets/88x31/friends/jbc.svg" alt="jb's site" style="image-rendering: pixelated;"/></a>
73
+
<a href="https://notfire.cc"><img class="web-button" alt="notfire.cc" src="./assets/88x31/friends/notfire.gif"></a>
74
+
<a href="https://potatoe.ca"><img class="web-button" alt="potatoe.ca" src="./assets/88x31/friends/potatoe.png"></a>
75
+
<a href="https://shiver-j.neocities.org"><img class="web-button" alt="shiver j." src="./assets/88x31/friends/shiverj.png"></a>
76
+
<a href="https://sneexy.synth.download"><img class="web-button" src="./assets/88x31/friends/sneexy.svg" alt="Sneexy"></a>
77
+
<a href="https://reimu.info"><img class="web-button" alt="reimu.info" src="./assets/88x31/friends/ezio.png"></a>
78
+
<a href="https://rodents.rodeo"><img class="web-button" alt="rodents.rodeo" src="./assets/88x31/friends/mjdxp.png"></a>
79
+
<a href="https://ry.cd-rom.net"><img class="web-button" alt="ry.cd-rom.net" src="./assets/88x31/friends/ryfox.png"></a>
80
+
<a href="https://thxdeeply.com"><img class="web-button" alt="thxdeeply.com" src="./assets/88x31/friends/thxdeeply.gif"></a>
81
+
<a href="https://w.on-t.work"><img class="web-button" alt="w.on-t.work" src="./assets/88x31/friends/wont-work.png"></a>
82
+
<a href="https://witchfuneral.quest"><img class="web-button" alt="witchfuneral.quest" src="./assets/88x31/friends/witchfuneral.png"></a>
83
+
<a href="https://zenfyr.dev/"><img class="web-button" src="./assets/88x31/friends/zenfyr.webp" alt="zenfyr" title="zenfyr"></a>
84
84
</div>
85
85
<div style="margin-bottom: 10px;">
86
86
<a style="font-size: 14px">others</a>
87
87
</div>
88
88
<div style="padding: 5px; margin-bottom: 20px;">
89
-
<a href="https://epicblazed.com"><img alt="epicblazed" src="./assets/88x31/others/epicblazed.png"></a>
90
-
<a href="https://googleballs.com"><img alt="googleballs.com" src="./assets/88x31/others/google-balls.png"></a>
91
-
<a href="https://smokepowered.com"><img alt="smokepowered.com" src="./assets/88x31/others/smokepowered.gif"></a>
92
-
<a href="https://starlightnet.work"><img loading="lazy" src="./assets/88x31/others/starlight-network.png" alt="The Starlight Network"></a>
93
-
<a href="https://synth.download"><img src="./assets/88x31/others/synth.download.svg" alt="Synth.Download!"></a>
89
+
<a href="https://epicblazed.com"><img class="web-button" alt="epicblazed" src="./assets/88x31/others/epicblazed.png"></a>
90
+
<a href="https://googleballs.com"><img class="web-button" alt="googleballs.com" src="./assets/88x31/others/google-balls.png"></a>
91
+
<a href="https://smokepowered.com"><img class="web-button" alt="smokepowered.com" src="./assets/88x31/others/smokepowered.gif"></a>
92
+
<a href="https://starlightnet.work"><img class="web-button" loading="lazy" src="./assets/88x31/others/starlight-network.png" alt="The Starlight Network"></a>
93
+
<a href="https://synth.download"><img class="web-button" src="./assets/88x31/others/synth.download.svg" alt="Synth.Download!"></a>
94
94
</div>
95
95
<div style="margin-bottom: 10px;">
96
96
<a style="font-size: 14px">and here is mine!</a>
97
97
<a style="font-size: 12px; color: light-dark(var(--light-subtext), var(--dark-subtext));"><small>feel free to add mine (hotlinking is ok!)</small></a>
98
98
</div>
99
99
<div style="padding: 5px;">
100
-
<a href="https://gayfamicom.lol"><img src="./assets/88x31/gayfamicom.png" alt="my cool ass button"></a>
100
+
<a href="https://gayfamicom.lol"><img class="web-button" src="./assets/88x31/gayfamicom.png" alt="my cool ass button"></a>
101
101
</div>
102
102
</div>
103
103
<a style="color: light-dark(var(--light-accent), var(--dark-accent)); padding: 10px;" href="https://tangled.org/gayfamicom.lol/site"><small>website source!</small></a>
+12
-13
styles.css
+12
-13
styles.css
···
133
133
.dropdown-content a:hover {
134
134
background-color: light-dark(var(--light-subtext), var(--dark-subtext));
135
135
}
136
-
.main:hover img {
136
+
.main:hover .web-button {
137
137
transition: ease-in-out 0.2s;
138
138
filter: blur(0.1em);
139
-
justify-content: center;
140
-
align-items: center;
139
+
display: inline-block;
141
140
}
142
-
.main img:hover {
143
-
transition: ease-in-out 0.5s;
144
-
border: solid 2px;
141
+
142
+
.main .web-button:hover {
143
+
transition: ease-in-out 0.3s;
144
+
border: solid 1px;
145
145
border-radius: 10px;
146
146
border-color: light-dark(var(--light-accent), var(--dark-accent));
147
-
height: auto;
148
-
width: 100px;
149
147
filter: blur(0);
150
-
justify-content: center;
151
-
align-items: center;
152
148
box-shadow: 0px 0px 10px light-dark(var(--light-text), var(--dark-text));
149
+
transform: scale(1.4, 1.4) rotate(2deg) translateX(-10px);
150
+
display: inline-block;
153
151
}
154
152
155
153
.pfp {
···
179
177
background-color: light-dark(var(--light-accent), var(--dark-accent));
180
178
color: light-dark(var(--light-background), var(--dark-background));
181
179
border-color: light-dark(var(--light-background), var(--dark-background));
182
-
height: auto;
183
180
transition: ease-in-out 0.5s;
184
-
padding: 10px;
185
-
font-size: 16px;
181
+
position: relative;
182
+
transform: scale(2);
183
+
letter-spacing: 1px;
184
+
padding: 12px;
186
185
}
187
186
188
187
/* mask to close menu by clicking on the button */