forked from ricardoborsato/TheGrassBlock
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
571 lines (546 loc) · 25.2 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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
<!doctype html>
<html lang="en" style="zoom: 85%;">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 🪐 - Description (For SEO) - 🪐 -->
<!---------------------------------------------------------------------->
<meta name="description" content="TheGrassBlock Server. A Nice Minecraft Server. It is the best! Lets play together">
<!---------------------------------------------------------------------->
<!-- 🪐 - Description (For SEO) - 🪐 -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/24b38c7cb1.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- For the Player Count -->
<script src="https://cdn.jsdelivr.net/gh/leonardosnt/mc-player-counter/dist/mc-player-counter.min.js"></script>
<!-- Credits: https://github.com/leonardosnt/mc-player-counter -->
<!-- 🪐 - FavIcon - 🪐 -->
<!---------------------------------------------------------------------->
<link rel="shortcut icon" href="favicon.ico"/>
<!---------------------------------------------------------------------->
<!-- 🪐 - FavIcon - 🪐 -->
<!-- 🪐 - Website Title - 🪐 -->
<!---------------------------------------------------------------------->
<title class='webistetitle'>TheGrassBlock Server</title>
<!---------------------------------------------------------------------->
<!-- 🪐 - Website Title - 🪐 -->
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<!-- 🪐 - Website Logo - 🪐 -->
<!---------------------------------------------------------------------->
<a href="index.html"><img src="img/serverlogo.png" style="width: 50px; padding-right: 10px;"></a>
<!---------------------------------------------------------------------->
<!-- 🪐 - Website Logo - 🪐 -->
<!-- 🪐 - Navigation Name - 🪐 -->
<!---------------------------------------------------------------------->
<a class="navbar-brand" href="index.html">TheGrassBlock Server</a>
<!---------------------------------------------------------------------->
<!-- 🪐 - Navigation Name - 🪐 -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="shop.html">Shop</a>
</li>
<li class="nav-item">
<a class="nav-link" href="subpages/webmap.html">WebMap</a>
</li>
<li class="nav-item">
<a class="nav-link" href="subpages/rules.html">Rules</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Forums</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
About Us
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Minigames</a>
<a class="dropdown-item" href="#">Vote</a>
<!-- Other Page:
<a class="dropdown-item" href="#">OtherPage</a>
-->
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Contact</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<!-- Top Navigation End -->
<!-- Carousel Images Starts here (Inside the "header" tag) -->
<header>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item active" style="background-image: url(img/slide1.png)">
<div class="carousel-caption d-none d-md-block">
<h3 class="display-4">The Adventure Starts Here</h3>
<p class="lead">Everything that you can call home</p>
</div>
</div>
<!-- Slide Two - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url(img/slide2.png)">
<div class="carousel-caption d-none d-md-block">
<h3 class="display-4">Build whatever you wish</h3>
<p class="lead">Let's your imagination fly. <br>The Sky is the limit!</p>
</div>
</div>
<!-- Slide Three - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url(img/slide3.png)">
<div class="carousel-caption d-none d-md-block">
<h3 class="display-4">Join in our Community</h3>
<p class="lead">We're a Friendly Community! Let's play together!</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</header>
<!-- Carousel Ends here -->
<!-- Player number count and IP -->
<section class="container" style="padding-top: 1rem;">
<div class="alert alert-success container" role="alert">
<!-- 🪐 - Player Count - 🪐 -->
<!---------------------------------------------------------------------->
Let's break some blocks? Join now at <b>mc.thegrassblock.org</b> with others
<b><span data-playercounter-ip="mc.thegrassblock.org:25565">0</span></b> players online.
<!---------------------------------------------------------------------->
<!-- 🪐 - Player Count - 🪐 -->
</div>
</section>
<!-- Main Features Title -->
<section class="py-5" style="margin-top: 1rem;">
<div class="container">
<h4 class="display-4">Why the GrassBlock?</h4>
<p class="lead">The best server ever! Lightweight is the way!</p>
</div>
</section>
<!-- Main Features -->
<section id="whythegrass">
<div class="container">
<div class="row textgray center">
<div class="feature-box col-lg-4">
<i class="fas fa-memory fa-4x main-f-color" style="margin-top: 5%; box-shadow: none;"></i>
<h3 class="textblack">Faster than Flash</h3>
<p class="descbox textgray">We are hosted with a great hosting! Our package is the best one so you won't experience lag or crashes that interrupts the gameplay.</p>
</div>
<div class="feature-box col-lg-4">
<i class="fas fa-rocket fa-4x main-f-color" style="margin-top: 5%; box-shadow: none;"></i>
<h3 class="textblack">Locally play</h3>
<p class="descbox textgray">Near to you! As we have no lag, the ping is also extremely low. Seems you're playing locally!</p>
</div>
<div class="feature-box col-lg-4">
<i class="fas fa-heart fa-4x main-f-color" style="margin-top: 5%; box-shadow: none;"></i>
<h3 class="textblack">Guaranteed fun.</h3>
<p class="descbox textgray">Find the love of your Minecraft. Play with us and increase</p>
</div>
</div>
</div>
</section>
<!-- News Section Title -->
<section class="py-5" style="margin-top: 1rem;">
<div class="container">
<h4 class="display-4">News</h4>
<p class="lead">News coming out of the oven!</p>
</div>
</section>
<!-- News Section -->
<section>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<!-- New News item -->
<div class="carousel-item active">
<div class="container">
<div class="row">
<div class="col left col-sm-12 col-lg-6">
<img src="img/minecraft-chest.jpg" alt="" srcset="" class="img-news">
</div>
<div class="col left col-sm-12 col-lg-6">
<!-- News Title -->
<h4>
Steve Just found a New Chest!
</h4>
<!-- News content -->
<p>
Our server was having an event when suddenly Steve found a chest
in the middle of the world.
There was any expectations about it but it actually found diamonds!
That ways great Steve!
<!-- A little line break =) -->
<br>
Steve took all diamonds from the Chest and took for him. The point is that
a player forgot to protect the chest! Oh no, Steve!
<!-- A little line break =) -->
<br>
Steve Ran around the TheGrassBlock Spawn and starting dropping all diamonds
from the mystery unknown player and then quit from the server.
<!-- A little line break =) -->
<br>
Whata day? uh!
</p>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>
<section class="py-5" style="margin-top: 1rem;">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<h4 class="display-4">Features</h4>
<p class="lead">Some features of our Server!</p>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section>
<div class="container">
<div class="row center container" style="margin-right: 0px; margin-left: 0px;">
<!-- Item starts -->
<div class="textblack main-f-color featureboxes col-sm-12 col-md-4">
<img class="img-featureboxes" src="img/features1.png" alt="" srcset="" style="padding-top: 10px;">
<h5 class="textblack">Great Economy</h5>
<p class="textblack">
Our economy is very balanced! There is no way to be very rich or very poor.
<br>
Buy items from the Villagers' tents and invest in your adventure!
</p>
</div>
<!-- Item Ends -->
<!-- Item starts -->
<div class="textblack main-f-color featureboxes col-sm-12 col-md-4">
<img class="img-featureboxes" src="img/features2.png" alt="" srcset="" style="padding-top: 10px;">
<h5 class="textblack">Towny System</h5>
<p class="textblack">
Buy your own house today! TheGrassBlock runs with the greatest Towny system.
<br>
Build your house in our city today!
</p>
</div>
<!-- Item Ends -->
<div class="textblack main-f-color featureboxes col-sm-12 col-md-4">
<img class="img-featureboxes" src="img/features3.png" alt="" srcset="" style="padding-top: 10px;">
<h5 class="textblack">Friendly PVP</h5>
<p class="textblack">
TheGrassBlock has daily PvP Events just for fun!
<br>
Bring your friends and let's practice together!
<br>
Are you ready to show us your abilities?
</p>
</div>
<!-- Item Ends -->
</div>
</div>
</section>
<section class="py-5" style="margin-top: 1rem;">
<div class="container">
<h4 class="display-4">Listen to the players!</h4>
<p class="lead">Several famous people play at TheGrassBlock and recommend to everyone to come and meet the family!</p>
</div>
</section>
<!-- Testemunials -->
<section id="testimonials" style="padding-bottom: 3rem; background-color: rgb(205, 255, 214);">
<!-- SRC= Use Player's username. E.g.: petter Example below-->
<img class="testemonial-image" src="https://minotar.net/avatar/joao" alt="testemunialbyyoutuber">
<p class="textblack">Petter, A Famous Youtuber</p>
<h4 class="textblack"><i>"TheGrassBlock is the Server! There is no words how describe it."</h4>
<h4 class="textblack"><i>"It's simply awesome and recommended."</i></h4>
</section>
<!-- Staff Cards Title -->
<section class="py-5" style="margin-top: 1rem;">
<div class="container">
<h4 class="display-4">Meet our team!</h4>
<p class="lead">Our Bests Helpers! You can always count with them!</p>
</div>
</section>
<!-- Staff Cards Cards -->
<section style="padding-bottom: 3rem;">
<div class="container">
<div class="card-deck">
<div class="row">
<!-- Start a Staff Card -->
<div class="col-sm-12 col-md-3 col-lg-3">
<div class="card border-success">
<div class="container">
<img class="card-img-top" src="https://minotar.net/avatar/petter" alt="Card image cap">
</div>
<div class="card-body">
<h4 class="card-title">
<!--Staff Name-->
Player1
</h4>
<!-- On style="color: blueviolet;" you can change the color. Feel free to use Color codes such REX 👀!-->
<h6 class="card-title" style="color: blueviolet;">
<!-- Staff Role -->
[Owner]
</h6>
<p class="card-text">
<!-- Staff Information -->
Player1 is TheGrassBlock Founder.
He worked hard on begginig to keep the Server Alive and make everyting possible.
</p>
</div>
<div class="card-footer">
<small class="text-muted">
<!-- Staff Card Bottom -->
Joined on 2011
</small>
</div>
</div>
</div>
<!-- Ends a Staff Card -->
<!-- Start a Staff Card -->
<div class="col-sm-12 col-md-3 col-lg-3">
<div class="card border-success">
<div class="container">
<img class="card-img-top" src="https://minotar.net/avatar/zixer" alt="Card image cap">
</div>
<div class="card-body">
<h4 class="card-title">
<!--Staff Name-->
Player2
</h4>
<!-- On style="color: blueviolet;" you can change the color. Feel free to use Color codes such REX 👀!-->
<h6 class="card-title" style="color: blueviolet;">
<!-- Staff Role -->
[Co-Owner]
</h6>
<p class="card-text">
<!-- Staff Information -->
Player2 is TheGrassBlock Co-Owner.
Usually is online everyday and gives all Information to the Player1, the server owner.
</p>
</div>
<div class="card-footer">
<small class="text-muted">
<!-- Staff Card Bottom -->
Joined on 2012
</small>
</div>
</div>
</div>
<!-- Ends a Staff Card -->
<!-- Start a Staff Card -->
<div class="col-sm-12 col-md-3 col-lg-3">
<div class="card border-success">
<div class="container">
<img class="card-img-top" src="https://minotar.net/avatar/Gandalf" alt="Card image cap">
</div>
<div class="card-body">
<h4 class="card-title">
<!--Staff Name-->
Gandalf
</h4>
<!-- On style="color: ;" you can change the color. Feel free to use Color codes such REX 👀!-->
<h6 class="card-title" style="color: rgb(214, 43, 0);">
<!-- Staff Role -->
[Admin]
</h6>
<p class="card-text">
<!-- Staff Information -->
Gandalf is our First Server Admin.
Makes every player inspired.
Gandalf also uses the magic to Setup every server coner!
</p>
</div>
<div class="card-footer">
<small class="text-muted">
<!-- Staff Card Bottom -->
Joined on 2013
</small>
</div>
</div>
</div>
<!-- Ends a Staff Card -->
<!-- Start a Staff Card -->
<div class="col-sm-12 col-md-3 col-lg-3">
<div class="card border-success">
<div class="container">
<img class="card-img-top" src="https://minotar.net/avatar/Police" alt="Card image cap">
</div>
<div class="card-body">
<h4 class="card-title">
<!--Staff Name-->
Player3
</h4>
<!-- On style="color: ;" you can change the color. Feel free to use Color codes such REX 👀!-->
<h6 class="card-title" style="color: rgb(0, 0, 175);">
<!-- Staff Role -->
[Mod]
</h6>
<p class="card-text">
<!-- Staff Information -->
Player3 is the Eye of Police!
Pay atention to every place! Don't use Hacks! Don't go against the Rules!
She'll make Justice!
</p>
</div>
<div class="card-footer">
<small class="text-muted">
<!-- Staff Card Bottom -->
Joined on 2013
</small>
</div>
</div>
</div>
<!-- Ends a Staff Card -->
<!-- Start a Staff Card -->
<div class="col-sm-12 col-md-3 col-lg-3">
<div class="card border-success">
<div class="container">
<img class="card-img-top" src="https://minotar.net/avatar/Notch" alt="Card image cap">
</div>
<div class="card-body">
<h4 class="card-title">
<!--Staff Name-->
Other
</h4>
<!-- On style="color: ;" you can change the color. Feel free to use Color codes such REX 👀!-->
<h6 class="card-title" style="color: rgb(0, 0, 175);">
<!-- Staff Role -->
[Mod]
</h6>
<p class="card-text">
<!-- Staff Information -->
Other exampe to exemplify the example.
The card lines should give 1 line on mobile or 4 cards on desktop.
</p>
</div>
<div class="card-footer">
<small class="text-muted">
<!-- Staff Card Bottom -->
Joined on 2013
</small>
</div>
</div>
</div>
<!-- Ends a Staff Card -->
</div>
</div>
</div>
</section>
<!-- End Staff Cards Card Section-->
<!-- Footer -->
<footer class="page-footer font-small bg-dark pt-4">
<!-- Footer Elements -->
<div class="container">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-6 mb-4">
<h4 style="color: white;">TheGrassBlock</h4>
<p class="textgray">
The best Minecraft Server since 1985!
<br>
Where the GrassBlocks were the main objective!
<br>
Made with Love by thw highest Minecrafters in the world.
From plugins developer TheGrassBlock was originally
created to be a simple Survival Server, but now it has
the most Survival Comunnity from America and Europe!
</p>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-6 mb-4">
<h4 style="color: white;">Connect with us!</h4><br>
<div class="row">
<!-- Discord icon -->
<div class="col-sm-12 col-md-3">
<a class="medias" href="https://linkhere">
<i class="fab fa-discord fa-2x" style="color: #7289DA;"></i>
Discord
</a>
</div>
<!-- Youtube icon -->
<div class="col-sm-12 col-md-3">
<a class="medias" href="https://linkhere">
<i class="fab fa-youtube fa-2x" style="color: red;"></i>
Youtube
</a>
</div>
<!-- Twitter Icon -->
<div class="col-sm-12 col-md-3">
<a class="medias" href="https://linkhere">
<i class="fab fa-twitter fa-2x" style="color: #1DA1F2;"></i>
Twitter
</a>
</div>
<!-- Facebook Icon -->
<div class="col-sm-12 col-md-3">
<a class="medias" href="https://linkhere">
<i class="fab fa-facebook-f fa-2x" style="color: #4267B2;"></i>
Facebook
</a>
</div>
</div>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
<!-- Footer Elements -->
<div class="footer-copyright page-footer text-center py-3" style="color: white; background-color: rgb(37, 41, 46);">
© 2020 Copyright:
<a href="index.html">TheGrassBlock Server</a>
</div>
</footer>
<!-- Footer -->
<!-- Staff Cards Propouses -->
<style>
.card {
margin-top: 10px;
transition: 0.5s;
}
.card:hover {
transform: scale(1.01);
transition: 0.5s;
}
</style>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS, then Playercount -->
<script type="text/javascript" src="js/playercount.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>