-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathserver.html
110 lines (98 loc) · 3.64 KB
/
server.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>USERPFP Discord Server</title>
<link href="https://fonts.googleapis.com/css2?family=Uni+Sans:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="styles.css"> <!-- Link to an external CSS file -->
<link rel="icon" href="favicon.ico" type="image/x-icon">
<style>
/* Add a hover animation for the GitHub icon */
.github-icon {
width: 50px;
/* Adjust the size of the GitHub icon */
height: 50px;
transition: transform 0.3s, filter 0.3s;
/* Add a smooth transition */
}
.github-icon:hover {
transform: scale(1.2);
/* Increase the size on hover */
filter: brightness(1.5);
/* Add brightness on hover */
}
/* Add a hover animation for the "Join Server" button */
.server-button {
display: inline-block;
padding: 10px 20px;
margin-top: 10px;
text-decoration: none;
color: #fff;
background-color: #7289da;
border-radius: 5px;
transition: background-color 0.3s;
/* Add a smooth transition */
}
.server-button:hover {
background-color: #4a4d52;
/* Change the background color on hover */
}
/* Style the server container */
.server-container {
text-align: center;
margin: 20px;
}
/* Style the server info */
.server-info {
margin-top: 20px;
}
/* Style the server image */
.server-image {
max-width: 100%;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
/* Style the server buttons container */
.server-buttons {
margin-top: 20px;
}
/* Center the navbar links */
.navbar {
text-align: center;
background-color: #333;
padding: 15px;
}
.navbar a {
color: white;
text-decoration: none;
margin: 0 15px;
}
</style>
</head>
<body>
<div class="navbar">
<a href="https://userpfp.github.io/website/index.html">Home</a>
<a href="https://userpfp.github.io/website/staff.html">Staff</a>
<a href="https://userpfp.github.io/website/server.html">Discord</a>
</div>
<div class="server-container">
<img class="server-image"
src="https://cdn.discordapp.com/discovery-splashes/1129784704267210844/bd091e64962f6ea55e749b1fcb90f36d.jpg?size=2048"
alt="Server Banner">
<div class="server-info">
<h1>Welcome to USERPFP Discord Server</h1>
<p>Join our community where members hang out, share AI art, code, and have team wars between characters. We
have a gallery channel that you can post Gaming clips and AI art in. We have a coding channel that you
can use to share code, and you can use the support channel if you need any support. Join and let your
Profile Picture guide the way!</p>
</div>
<div class="server-buttons">
<a href="https://github.com/userpfp/userpfp" target="_blank">
<img class="github-icon" src="https://cdn-icons-png.flaticon.com/512/25/25231.png" alt="GitHub Icon">
</a>
<a class="server-button" href="https://discord.com/invite/userpfp-1129784704267210844" target="_blank">Join
Server</a>
</div>
</div>
</body>
</html>