my personal website!
meowing.zip
website
a potential guestbook? maybe?
+156
-7
+4
-1
about-me.html
+4
-1
about-me.html
···
1
1
<!DOCTYPE html>
2
2
<html>
3
3
<head>
4
-
<title>about me!</title>
4
+
<title>about me! - gayfamicom's cool and awesome website</title>
5
5
<link rel="icon" type="image/x-icon" href="./assets/images/favicon.png">
6
6
</head>
7
7
<link rel="stylesheet" href="styles.css">
···
16
16
<div class="dropdown">
17
17
<a href="." class="dropbtn">< go back!</a>
18
18
</div>
19
+
<div class="dropdown" tabindex="1">
20
+
<a style="margin-left: 5px;" class="dropbtn" href="./guestbook.html">guestbook</a>
21
+
</div>
19
22
<div class="dropdown" tabindex="1">
20
23
<a style="margin-left: 5px;" class="dropbtn" href="./blog.html">blog</a>
21
24
</div>
assets/88x31/others/starlight-network.png
assets/88x31/others/starlight-network.png
This is a binary file and will not be displayed.
+78
guestbook.html
+78
guestbook.html
···
1
+
<!DOCTYPE html>
2
+
<html>
3
+
<head>
4
+
<title>guestbook - gayfamicom's cool and awesome website!</title>
5
+
<link rel="icon" type="image/x-icon" href="./assets/images/favicon.png">
6
+
</head>
7
+
<link rel="stylesheet" href="styles.css">
8
+
<footer>
9
+
<div style="display: flex;">
10
+
<img style="border-radius: 15px; border: 2px solid #ca9ee6; width: 70px; height: auto" src="./assets/images/pfp.jpg" alt="fursona">
11
+
<a style=" padding: 20px; text-align: center">sign my guestbook<small style="color: #9399b2 ;margin-left: 10px; font-size: 12px;">gayfamicom's cool and awesome website!~</small></a>
12
+
</div>
13
+
</div>
14
+
<div class="divider"></div>
15
+
<div style="font-size: 15px; margin-top: 20px; margin-left: 2px; margin-bottom: 10px; display: flex;">
16
+
<div class="dropdown">
17
+
<a href="./about-me.html" class="dropbtn">about me</a>
18
+
</div>
19
+
<div class="dropdown" tabindex="1">
20
+
<a style="margin-left: 5px;" href="." class="dropbtn">< go back!</a>
21
+
</div>
22
+
<div class="dropdown" tabindex="1">
23
+
<a style="margin-left: 5px;" class="dropbtn" href="./blog.html">blog</a>
24
+
</div>
25
+
<div class="dropdown" tabindex="1">
26
+
<i class="db2" tabindex="1"></i>
27
+
<a style="margin-left: 5px;" class="dropbtn">follow me on socials</a>
28
+
<div class="dropdown-content">
29
+
<a style="color: #89b4fa; border: 0px soild transparent; border-radius: 20px;" href="https://bsky.app/profile/did:web:gayfamicom.lol" target="_blank">bluesky</a>
30
+
<a style="color: #94e2d5; border: 0px soild transparent; border-radius: 20px;" rel="me" href="https://hero.chaogarden.social/@gayfamicom" target="_blank">fediverse</a>
31
+
<a style="color: #f38ba8; border: 0px soild transparent; border-radius: 20px;" href="https://youtube.com/@gayfamicom" target="_blank">youtube</a>
32
+
</div>
33
+
</div>
34
+
<div class="dropdown" tabindex="1">
35
+
<i class="db2" tabindex="1"></i>
36
+
<a style="margin-left: 5px;" class="dropbtn">add me!</a>
37
+
<div class="dropdown-content">
38
+
<a style="color: #89dceb; border: 0px soild transparent; border-radius: 20px;" href="https://steamcommunity.com/id/gayfamicom/" target="_blank">steam</a>
39
+
</div>
40
+
</div>
41
+
<div class="dropdown" tabindex="1">
42
+
<i class="db2" tabindex="1"></i>
43
+
<a style="margin-left: 5px;" class="dropbtn">contact info</a>
44
+
<div class="dropdown-content">
45
+
<a style="color: #89b4fa; border: 0px soild transparent; border-radius: 20px;" href="https://signal.me/#eu/xhGmxYVp-uOwNmQMWmpPv_O3NvCOA6pH7O1FOt_C1VG3Wkd-9TxAdr1qkhvumTX1" target="_blank">signal</a>
46
+
<a style="color: #94e2d5; border: 0px soild transparent; border-radius: 20px;" href="xmpp:gayfamicom@synth.download">xmpp</a>
47
+
<a style="color: #b4befe; border: 0px soild transparent; border-radius: 20px;" href="https://discord.com/users/752389000945467482" target="_blank">discord</a>
48
+
<a style="color: #eba0ac; border: 0px soild transparent; border-radius: 20px;" href="mailto:mail@gayfamicom.lol">email</a>
49
+
</div>
50
+
</div>
51
+
<a style="margin-left: 15px; font-size: 12px; color: #6c7086;">gallery (under construction)</a>
52
+
</div>
53
+
</footer>
54
+
<body>
55
+
<div class="main">
56
+
<div style="margin-bottom: 10px">
57
+
<a>sign my guestbook</a>
58
+
<a style="color: #9399b2;"><small>maybe..</small></a>
59
+
</div>
60
+
<div class="divider"></div>
61
+
<form id="guestForm">
62
+
<div class="form-input">
63
+
<label style="font-size: 14px" for="name">name:</label>
64
+
<input class="input" size="15" type="text" id="name" name="name" placeholder="optional">
65
+
<label style="font-size: 14px" for="pronouns">pronouns:</label>
66
+
<input class="input" size="10" type="text" id="pronouns" name="pronouns" placeholder="optional">
67
+
</div>
68
+
<div class="form-input">
69
+
<label style="font-size: 14px" for="message">message:</label>
70
+
<input class="form-input_message" size="46" height="100" type="text" id="message" name="message" required>
71
+
</div>
72
+
<a href="./guestbook.html" style="border-radius: 10px;" class="dropbtn">see what others wrote!</a>
73
+
<button style="margin-left: 142px;" class="dropbtn" type="submit">sign</button>
74
+
</form>
75
+
</div>
76
+
<a style="color: #9399b2; padding: 10px;" href="https://tangled.org/gayfamicom.lol/site"><small>website source!</small></a>
77
+
<a style="color: #9399b2; padding: 10px;"><small>last modified: 2026-02-25T01:31:08Z</small></a>
78
+
</body>
+16
-6
index.html
+16
-6
index.html
···
9
9
<div style="display: flex;">
10
10
<img style="border-radius: 15px; border: 2px solid #ca9ee6; width: 70px; height: auto" src="./assets/images/pfp.jpg" alt="fursona">
11
11
<a style=" padding: 20px; text-align: center">gayfamicom's cool and awesome website!<small style="color: #9399b2 ;margin-left: 10px; font-size: 12px;">awwahhff mrrroow!~</small></a>
12
+
<div style="margin-top: 20px;">
13
+
<a style="font-size: 14px;">visitor count: </a>
14
+
<a href="https://nixie.starlightnet.work">
15
+
<img style="border-radius: 15px; border: 2px solid #ca9ee6;" src="https://nixie.starlightnet.work/?fg=%23926eaf&bg=%231b151e&pixel=1" alt="view counter" referrerpolicy="no-referrer-when-downgrade"/></a>
16
+
<div>
17
+
<small style="color: #9399b2 ;margin-left: 10px; font-size: 10px;">powered by nixie (thanks starlightnet.work!)</small>
18
+
</div>
19
+
</div>
12
20
</div>
13
21
<div class="divider"></div>
14
22
<div style="font-size: 15px; margin-top: 20px; margin-left: 2px; margin-bottom: 10px; display: flex;">
···
45
53
</div>
46
54
</div>
47
55
<a style="margin-left: 15px; font-size: 12px; color: #6c7086;">gallery (under construction)</a>
56
+
<a style="margin-left: 15px; font-size: 12px; color: #6c7086;">guestbook (under construction)</a>
48
57
</div>
49
58
</footer>
50
59
···
56
65
</div>
57
66
<div class="divider"></div>
58
67
<div style="margin-bottom: 10px;">
59
-
<a>friends</a>
60
-
<a style="color: #9399b2;"><small>let me know if you want urs added here!</small></a>
68
+
<a style="font-size: 14px">friends</a>
69
+
<a style="font-size: 12px; color: #9399b2;"><small>let me know if you want urs added here!</small></a>
61
70
</div>
62
71
<div style="padding: 5px; margin-bottom: 10px">
63
72
<a href="https://aquamarine.gay"><img alt="aquamarine.gay" src="./assets/88x31/friends/aquamarine.gif"></a>
···
82
91
<a href="https://zenfyr.dev/"><img src="./assets/88x31/friends/zenfyr.webp" alt="zenfyr" title="zenfyr"></a>
83
92
</div>
84
93
<div style="margin-bottom: 10px;">
85
-
<a>others</a>
94
+
<a style="font-size: 14px">others</a>
86
95
</div>
87
96
<div style="padding: 5px; margin-bottom: 20px;">
88
97
<a href="https://epicblazed.com"><img alt="epicblazed" src="./assets/88x31/others/epicblazed.png"></a>
89
98
<a href="https://googleballs.com"><img alt="googleballs.com" src="./assets/88x31/others/google-balls.png"></a>
90
-
<a href="https://nixie.starlightnet.work"><img src="https://nixie.starlightnet.work/?fg=%23926eaf&bg=%231b151e&pixel=1" alt="view counter" referrerpolicy="no-referrer-when-downgrade"/></a>
91
99
<a href="https://smokepowered.com"><img alt="smokepowered.com" src="./assets/88x31/others/smokepowered.gif"></a>
100
+
<a href="https://starlightnet.work"><img loading="lazy" src="./assets/88x31/others/starlight-network.png" alt="The Starlight Network"></a>
92
101
<a href="https://synth.download"><img src="./assets/88x31/others/synth.download.svg" alt="Synth.Download!"></a>
93
102
</div>
94
103
<div style="margin-bottom: 10px;">
95
-
<a>and here is mine!</a>
96
-
<a style="color: #9399b2;"><small>feel free to add mine (hotlinking is ok!)</small></a>
104
+
<a style="font-size: 14px">and here is mine!</a>
105
+
<a style="font-size: 12px; color: #9399b2;"><small>feel free to add mine (hotlinking is ok!)</small></a>
97
106
</div>
98
107
<div style="padding: 5px;">
99
108
<a href="https://gayfamicom.lol"><img src="./assets/88x31/gayfamicom.png" alt="my cool ass button"></a>
···
105
114
<a rel="me" href="https://fuzzies.wtf/@gayfamicom"></a>
106
115
<a rel="me" href="https://app.wafrn.net/blog/gayfamicom"></a>
107
116
<a rel="me" href="https://booping.synth.download/@gayfamicom"></a>
117
+
<a rel="me" href="https://waf.moe/blog/gayfamicom"></a>
108
118
</html>
+20
script.js
+20
script.js
···
1
+
const guestForm = document.getElementById('guestForm');
2
+
const guestList = document.getElementById('guestList');
3
+
4
+
guestForm.addEventListener('submit', function (e) {
5
+
e.preventDefault();
6
+
7
+
const name = document.getElementById('name').value;
8
+
const pronouns = document.getElementById('pronouns').value;
9
+
const message = document.getElementById('message').value;
10
+
11
+
const guestCard = document.createElement('div');
12
+
guestCard.classList.add('guest-card');
13
+
guestCard.innerHTML = `
14
+
<h2>${name}</h2>
15
+
<p><strong>pronouns:</strong> ${pronouns}</p>
16
+
<p><strong>message:</strong> ${message}</p>
17
+
guestList.appendChild(guestCard);
18
+
19
+
guestForm.reset();
20
+
});
+38
styles.css
+38
styles.css
···
1
+
button {
2
+
font-family: "Iosevka Aile", monospace;
3
+
font-size: 17px;
4
+
border-radius: 10px;
5
+
}
1
6
body {
2
7
background-color: #1e1e2e;
3
8
color: #cdd6f4;
···
29
34
margin-top: 10px;
30
35
box-shadow: 10px 5px 10px #11111b;
31
36
}
37
+
38
+
.form-input {
39
+
margin-bottom: 11px;
40
+
}
41
+
42
+
.form-input_message {
43
+
display: block;
44
+
margin-top: 10px;
45
+
color: #ca9ee6;
46
+
border: 1px solid #ca9ee6;
47
+
border-radius: 10px;
48
+
background: #1e1e2e;
49
+
padding: 10px;
50
+
resize: both;
51
+
overflow: hidden;
52
+
font-family: "Iosevka Aile", monospace;
53
+
}
32
54
33
55
/* dd container */
34
56
.dropdown {
···
44
66
border-radius: 15px;
45
67
background: #1e1e2e;
46
68
padding: 8px;
69
+
}
70
+
.input {
71
+
color: #ca9ee6;
72
+
border: 1px solid #ca9ee6;
73
+
border-radius: 10px;
74
+
background: #1e1e2e;
75
+
padding: 7px;
76
+
font-family: "Iosevka Aile", monospace;
77
+
}
78
+
79
+
.guest {
80
+
border: 2px dashed #ca9ee6;
81
+
padding: 10px;
82
+
color: #ca9ee6;
83
+
background: #1e1e2e;
84
+
font-family: "Iosevka Aile", monospace;
47
85
}
48
86
49
87
/* dd content */