my personal website!
meowing.zip
website
seperate div classes for each of the button sections
+30
-6
+3
-3
index.html
+3
-3
index.html
···
60
60
<a style="font-size: 14px">friends</a>
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
-
<div style="padding: 5px; margin-bottom: 10px">
63
+
<div class="web-buttons" style="padding: 5px; margin-bottom: 10px">
64
64
<a href="https://aquamarine.gay"><img class="web-button" alt="aquamarine.gay" src="./assets/88x31/friends/aquamarine.gif"></a>
65
65
<a href="https://atapi.space"><img class="web-button" alt="atapi.space" src="./assets/88x31/friends/atapi.gif"></a>
66
66
<a href="https://daniela.lol"><img class="web-button" alt="daniela.lol" src="./assets/88x31/friends/daniela.gif"></a>
···
85
85
<div style="margin-bottom: 10px;">
86
86
<a style="font-size: 14px">others</a>
87
87
</div>
88
-
<div style="padding: 5px; margin-bottom: 20px;">
88
+
<div class="other-web-buttons" style="padding: 5px; margin-bottom: 20px;">
89
89
<a href="https://epicblazed.com"><img class="web-button" alt="epicblazed" src="./assets/88x31/others/epicblazed.png"></a>
90
90
<a href="https://googleballs.com"><img class="web-button" alt="googleballs.com" src="./assets/88x31/others/google-balls.png"></a>
91
91
<a href="https://smokepowered.com"><img class="web-button" alt="smokepowered.com" src="./assets/88x31/others/smokepowered.gif"></a>
···
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
-
<div style="padding: 5px;">
99
+
<div class="my-button" style="padding: 5px;">
100
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>
+27
-3
styles.css
+27
-3
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 .web-button {
136
+
.web-buttons:hover .web-button {
137
137
transition: ease-in-out 0.2s;
138
138
filter: blur(0.1em);
139
139
display: inline-block;
140
140
}
141
-
142
-
.main .web-button:hover {
141
+
.web-buttons .web-button:hover {
143
142
transition: ease-in-out 0.3s;
144
143
border: solid 1px;
145
144
border-radius: 10px;
···
147
146
filter: blur(0);
148
147
box-shadow: 0px 0px 10px light-dark(var(--light-text), var(--dark-text));
149
148
transform: scale(1.4, 1.4) rotate(2deg) translateX(-10px);
149
+
display: inline-block;
150
+
}
151
+
.other-web-buttons:hover .web-button {
152
+
transition: ease-in-out 0.2s;
153
+
filter: blur(0.1em);
154
+
display: inline-block;
155
+
}
156
+
.other-web-buttons .web-button:hover {
157
+
transition: ease-in-out 0.3s;
158
+
border: solid 1px;
159
+
border-radius: 10px;
160
+
border-color: light-dark(var(--light-accent), var(--dark-accent));
161
+
filter: blur(0);
162
+
box-shadow: 0px 0px 10px light-dark(var(--light-text), var(--dark-text));
163
+
transform: scale(1.4, 1.4) rotate(2deg) translateX(-10px);
164
+
display: inline-block;
165
+
}
166
+
.my-button .web-button:hover {
167
+
transition: ease-in-out 0.3s;
168
+
border: solid 1px;
169
+
border-radius: 10px;
170
+
border-color: light-dark(var(--light-accent), var(--dark-accent));
171
+
filter: blur(0);
172
+
box-shadow: 0px 0px 10px light-dark(var(--light-text), var(--dark-text));
173
+
transform: scale(1.4, 1.4);
150
174
display: inline-block;
151
175
}
152
176