-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
137 lines (121 loc) · 3.99 KB
/
index.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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UserPFP</title>
<link rel="stylesheet" type="text/css" href="styles.css"> <!-- Link to an external CSS file -->
<link href="https://fonts.googleapis.com/css2?family=Uni+Sans:wght@400;700&display=swap" rel="stylesheet">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<style>
/* Reset some default styles */
body {
margin: 0;
padding: 0;
font-family: 'Uni Sans', sans-serif;
}
/* Style the navbar similar to server.html */
.navbar {
text-align: center;
background-color: #4a4d52;
padding: 15px;
margin-bottom: 20px;
}
.navbar a {
color: white;
text-decoration: none;
margin: 0 15px;
}
/* Center the header */
.header {
text-align: center;
margin-bottom: 20px;
/* Increase the margin for a better separation */
}
/* Style the widget container without margin */
.widget {
max-width: 800px;
/* Adjusted max-width for better readability */
text-align: center;
/* Center the content within the widget */
}
/* Style the iframe within the widget */
.widget iframe {
width: 100vw;
height: auto;
border: none;
}
/* Apply styles similar to server.html */
.github-icon {
width: 50px;
height: 50px;
transition: transform 0.3s, filter 0.3s;
}
.github-icon:hover {
transform: scale(1.2);
filter: brightness(1.5);
}
.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;
}
.server-button:hover {
background-color: #4a4d52;
}
.server-container {
text-align: center;
margin: 20px;
}
.server-info {
margin-top: 20px;
}
.server-image {
max-width: 100%;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.server-buttons {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="navbar">
<a href="index.html">Home</a>
<a href="staff.html">Staff</a>
<a href="server.html">Discord</a>
</div>
<div class="header">
<h1>UserPFP</h1>
<p>UserPFP allows you to use a gif in Discord without Nitro!</p>
<br>
<h2>How to Request a Profile Picture (PFP):</h2>
<p>You can click the instructions.</p>
<a href="https://discord.gg/userpfp-1129784704267210844">1. Join the UserPFP Discord Server.</a>
<br>
<a href="https://discord.com/channels/1129784704267210844/1162834399801384970">2. Familiarize yourself with the
server rules.</a>
<br>
<a href="https://discord.com/channels/1129784704267210844/1162800344603037856">3. Navigate to the #request-here
channel.</a>
<br>
<a href="https://discord.com/channels/1129784704267210844/1162800681409855600">4. Await approval from our
team.</a>
<br>
<p>Example PFPs:</p>
</div>
<div class="widget" style="justify-content: center;">
<!-- Your widget content goes here -->
<br>
<iframe src="https://userpfp.github.io/website/widget.html" width="100%" height="300" frameborder="0"></iframe>
<br>
<iframe src="https://userpfp.github.io/website/widget.html" width="100%" height="300" frameborder="0"></iframe>
</div>
</body>
</html>