├── README.md
├── assets
    ├── images
    │   └── background.png
    └── styles
    │   └── style.css
├── index.html
└── robots.txt


/README.md:
--------------------------------------------------------------------------------
 1 | # Minecraft Server Website
 2 | 
 3 | This is a simple website for a Minecraft server that you can use to display information about your server. It includes multiple buttons and the ability to copy your server's IP.
 4 | 
 5 | ## Setup
 6 | 
 7 | To set up this website for your Minecraft server, follow these steps:
 8 | 
 9 | 1. Fork this repository to your Github account.
10 | 2. Edit the `index.html` file to include information about your server.
11 | 3. Customize the `assets/style.css` file to change the look and feel of the website.
12 | 4. Upload any images or other assets you want to use to the `assets/images/` folder.
13 | 5. Commit your changes and push them to your forked repository.
14 | 6. Host this site on your favourite hosting!
15 | 
16 | ## Features
17 | 
18 | This Minecraft server website includes the following features:
19 | 
20 | - Copy server's ip
21 | - Multiple buttons
22 | - Customizable
23 | - Easy to use
24 | 


--------------------------------------------------------------------------------
/assets/images/background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OLIMINATOR/mc-server-website/8e02ba1efa010928edd65c30db3d6c76c68ade6c/assets/images/background.png


--------------------------------------------------------------------------------
/assets/styles/style.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |     --main-color: rgb(94, 136, 73);
  3 |     --main-color-dark: rgb(58, 88, 44);
  4 |     --border-color: hsla(0, 0%, 100%, 0.349);
  5 |     --copy-ip-hover: rgba(255, 255, 255, 0.102);
  6 |     --copy-ip-click: rgba(255, 255, 255, 0.2);
  7 |     --background-color: rgb(12, 13, 14);
  8 | }
  9 | 
 10 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 11 | article,
 12 | aside,
 13 | details,
 14 | figcaption,
 15 | figure,
 16 | footer,
 17 | header,
 18 | hgroup,
 19 | nav,
 20 | section,
 21 | summary {
 22 |     display: block;
 23 | }
 24 | audio,
 25 | canvas,
 26 | video {
 27 |     display: inline-block;
 28 |     *display: inline;
 29 |     *zoom: 1;
 30 | }
 31 | audio:not([controls]) {
 32 |     display: none;
 33 |     height: 0;
 34 | }
 35 | [hidden] {
 36 |     display: none;
 37 | }
 38 | html {
 39 |     font-size: 100%;
 40 |     -webkit-text-size-adjust: 100%;
 41 |     -ms-text-size-adjust: 100%;
 42 | }
 43 | html,
 44 | button,
 45 | input,
 46 | select,
 47 | textarea {
 48 |     font-family: sans-serif;
 49 | }
 50 | body {
 51 |     margin: 0;
 52 | }
 53 | a:focus {
 54 |     outline: thin dotted;
 55 | }
 56 | a:active,
 57 | a:hover {
 58 |     outline: 0;
 59 | }
 60 | h1 {
 61 |     font-size: 2em;
 62 |     margin: 0.67em 0;
 63 | }
 64 | h2 {
 65 |     font-size: 1.5em;
 66 |     margin: 0.83em 0;
 67 | }
 68 | h3 {
 69 |     font-size: 1.17em;
 70 |     margin: 1em 0;
 71 | }
 72 | h4 {
 73 |     font-size: 1em;
 74 |     margin: 1.33em 0;
 75 | }
 76 | h5 {
 77 |     font-size: 0.83em;
 78 |     margin: 1.67em 0;
 79 | }
 80 | h6 {
 81 |     font-size: 0.75em;
 82 |     margin: 2.33em 0;
 83 | }
 84 | abbr[title] {
 85 |     border-bottom: 1px dotted;
 86 | }
 87 | b,
 88 | strong {
 89 |     font-weight: bold;
 90 | }
 91 | blockquote {
 92 |     margin: 1em 40px;
 93 | }
 94 | dfn {
 95 |     font-style: italic;
 96 | }
 97 | mark {
 98 |     background: #ff0;
 99 |     color: #000;
100 | }
101 | p,
102 | pre {
103 |     margin: 1em 0;
104 | }
105 | code,
106 | kbd,
107 | pre,
108 | samp {
109 |     font-family: monospace, serif;
110 |     _font-family: "courier new", monospace;
111 |     font-size: 1em;
112 | }
113 | pre {
114 |     white-space: pre;
115 |     white-space: pre-wrap;
116 |     word-wrap: break-word;
117 | }
118 | q {
119 |     quotes: none;
120 | }
121 | q:before,
122 | q:after {
123 |     content: "";
124 |     content: none;
125 | }
126 | small {
127 |     font-size: 75%;
128 | }
129 | sub,
130 | sup {
131 |     font-size: 75%;
132 |     line-height: 0;
133 |     position: relative;
134 |     vertical-align: baseline;
135 | }
136 | sup {
137 |     top: -0.5em;
138 | }
139 | sub {
140 |     bottom: -0.25em;
141 | }
142 | dl,
143 | menu,
144 | ol,
145 | ul {
146 |     margin: 1em 0;
147 | }
148 | dd {
149 |     margin: 0 0 0 40px;
150 | }
151 | menu,
152 | ol,
153 | ul {
154 |     padding: 0 0 0 40px;
155 | }
156 | nav ul,
157 | nav ol {
158 |     list-style: none;
159 |     list-style-image: none;
160 | }
161 | img {
162 |     border: 0;
163 |     -ms-interpolation-mode: bicubic;
164 | }
165 | svg:not(:root) {
166 |     overflow: hidden;
167 | }
168 | figure {
169 |     margin: 0;
170 | }
171 | form {
172 |     margin: 0;
173 | }
174 | fieldset {
175 |     border: 1px solid #c0c0c0;
176 |     margin: 0 2px;
177 |     padding: 0.35em 0.625em 0.75em;
178 | }
179 | legend {
180 |     border: 0;
181 |     padding: 0;
182 |     white-space: normal;
183 |     *margin-left: -7px;
184 | }
185 | button,
186 | input,
187 | select,
188 | textarea {
189 |     font-size: 100%;
190 |     margin: 0;
191 |     vertical-align: baseline;
192 |     *vertical-align: middle;
193 | }
194 | button,
195 | input {
196 |     line-height: normal;
197 | }
198 | button,
199 | html input[type="button"],
200 | input[type="reset"],
201 | input[type="submit"] {
202 |     -webkit-appearance: button;
203 |     cursor: pointer;
204 |     *overflow: visible;
205 | }
206 | button[disabled],
207 | input[disabled] {
208 |     cursor: default;
209 | }
210 | input[type="checkbox"],
211 | input[type="radio"] {
212 |     box-sizing: border-box;
213 |     padding: 0;
214 |     *height: 13px;
215 |     *width: 13px;
216 | }
217 | input[type="search"] {
218 |     -webkit-appearance: textfield;
219 |     -moz-box-sizing: content-box;
220 |     -webkit-box-sizing: content-box;
221 |     box-sizing: content-box;
222 | }
223 | input[type="search"]::-webkit-search-cancel-button,
224 | input[type="search"]::-webkit-search-decoration {
225 |     -webkit-appearance: none;
226 | }
227 | button::-moz-focus-inner,
228 | input::-moz-focus-inner {
229 |     border: 0;
230 |     padding: 0;
231 | }
232 | textarea {
233 |     overflow: auto;
234 |     vertical-align: top;
235 | }
236 | table {
237 |     border-collapse: collapse;
238 |     border-spacing: 0;
239 | }
240 | 
241 | body {
242 |     background-color: var(--background-color);
243 |     /* background-image: url("../images/background.png"); */
244 |     background-size: cover;
245 |     background-repeat: no-repeat;
246 |     font-family: "Outfit", sans-serif;
247 |     padding: 0.5rem;
248 |     overflow-y: hidden;
249 | }
250 | 
251 | main {
252 |     display: flex;
253 |     justify-content: center;
254 |     align-items: center;
255 |     flex-direction: column;
256 |     height: 100vh;
257 |     text-align: center;
258 | }
259 | 
260 | h1 {
261 |     color: white;
262 |     font-size: 4.25rem;
263 | 
264 |     margin-bottom: 1.5rem;
265 | }
266 | 
267 | p {
268 |     color: white;
269 |     font-size: 1.2rem;
270 |     font-weight: 200;
271 |     max-width: 40rem;
272 | }
273 | 
274 | button {
275 |     background-color: transparent;
276 |     border: solid gray 1px;
277 |     padding: 0.75rem 3rem;
278 |     border-radius: 0.5rem;
279 |     display: flex;
280 |     align-items: center;
281 |     gap: 0.5rem;
282 |     color: white;
283 |     font-size: larger;
284 |     margin-bottom: 0.5rem;
285 |     transition: all 0.1s;
286 | }
287 | 
288 | button svg {
289 |     width: 1rem;
290 |     height: 1rem;
291 | }
292 | 
293 | button:hover {
294 |     background-color: rgba(255, 255, 255, 0.1);
295 | }
296 | 
297 | button:active {
298 |     background-color: rgba(255, 255, 255, 0.2);
299 | }
300 | 
301 | nav {
302 |     display: flex;
303 |     justify-content: center;
304 |     align-items: center;
305 |     gap: 2rem;
306 |     width: 100%;
307 |     margin-top: 2rem;
308 | }
309 | 
310 | @media only screen and (max-width: 786px) {
311 |     body {
312 |         overflow-y: visible;
313 |     }
314 |     h1 {
315 |         padding-top: 4rem;
316 |     }
317 |     nav {
318 |         flex-direction: column;
319 |         padding-bottom: 4rem;
320 |     }
321 | }
322 | 
323 | nav a {
324 |     color: white;
325 |     text-decoration: none;
326 |     background: var(--main-color);
327 |     border: 2px solid var(--border-color);
328 |     box-shadow: 0px 5px 0px var(--main-color-dark);
329 |     border-radius: 1px;
330 |     padding: 0.5rem 3rem;
331 |     transition: all 0.1s;
332 |     font-weight: bold;
333 |     font-size: 1.2rem;
334 |     text-transform: uppercase;
335 | }
336 | 
337 | nav a:hover {
338 |     box-shadow: none;
339 |     transform: translateY(5px);
340 | }
341 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |         <!-- Primary Meta Tags -->
 8 |         <title>YourServer</title>
 9 |         <meta name="title" content="YourServer" />
10 |         <meta name="description" content="YourServer Description" />
11 | 
12 |         <!-- Open Graph / Facebook -->
13 |         <meta property="og:type" content="website" />
14 |         <meta property="og:url" content="https://yourserver.com/" />
15 |         <meta property="og:title" content="YourServer" />
16 |         <meta property="og:description" content="YourServer Description" />
17 |         <meta
18 |             property="og:image"
19 |             content="https://metatags.io/assets/meta-tags-16a33a6a8531e519cc0936fbba0ad904e52d35f34a46c97a2c9f6f7dd7d336f2.png"
20 |         />
21 | 
22 |         <!-- Twitter -->
23 |         <meta property="twitter:card" content="summary_large_image" />
24 |         <meta property="twitter:url" content="https://yourserver.com/" />
25 |         <meta property="twitter:title" content="YourServer" />
26 |         <meta property="twitter:description" content="YourServer Description" />
27 |         <meta name="theme-color" content="#5e8849" />
28 |         <meta
29 |             property="twitter:image"
30 |             content="https://metatags.io/assets/meta-tags-16a33a6a8531e519cc0936fbba0ad904e52d35f34a46c97a2c9f6f7dd7d336f2.png"
31 |         />
32 |         <link rel="preconnect" href="https://fonts.googleapis.com" />
33 |         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
34 |         <link
35 |             href="https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap"
36 |             rel="stylesheet"
37 |         />
38 |         <link rel="stylesheet" href="assets/styles/style.css" />
39 |     </head>
40 |     <body>
41 |         <main>
42 |             <h1>Your Server</h1>
43 |             <button onclick="copyIp()">
44 |                 <svg
45 |                     xmlns="http://www.w3.org/2000/svg"
46 |                     fill="none"
47 |                     viewBox="0 0 24 24"
48 |                     stroke-width="1.5"
49 |                     stroke="currentColor"
50 |                     class="w-6 h-6"
51 |                 >
52 |                     <path
53 |                         stroke-linecap="round"
54 |                         stroke-linejoin="round"
55 |                         d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184"
56 |                     />
57 |                 </svg>
58 |                 <!-- Remember to change the ip in the copyIp function -->
59 |                 mc.yourserver.com
60 |             </button>
61 |             <p>
62 |                 Lorem ipsum dolor sit <strong>amet</strong> consectetur
63 |                 adipisicing elit. Perferendis provident velit quibusdam
64 |                 doloremque dolorum molestias.
65 |             </p>
66 |             <nav>
67 |                 <a href="" title="">Store</a>
68 |                 <a href="" title="">Vote</a>
69 |                 <a href="" title="">Banlist</a>
70 |                 <a href="" title="" target="_blank">Example</a>
71 |             </nav>
72 |         </main>
73 |         <script>
74 |             function copyIp() {
75 |                 navigator.clipboard
76 |                     .writeText("mc.yourserver.com")
77 |                     .catch((error) => {
78 |                         console.error(
79 |                             `Failed to copy "${text}" to clipboard: ${error}`
80 |                         );
81 |                     });
82 |             }
83 |         </script>
84 |     </body>
85 | </html>
86 | 


--------------------------------------------------------------------------------
/robots.txt:
--------------------------------------------------------------------------------
1 | User-agent: *
2 | 


--------------------------------------------------------------------------------