├── js
    └── playercount.js
├── .gitattributes
├── favicon.ico
├── img
    ├── slide1.png
    ├── slide2.png
    ├── slide3.png
    ├── features1.png
    ├── features2.png
    ├── features3.png
    ├── serverlogo.png
    └── minecraft-chest.jpg
├── .htaccess
├── README.md
├── css
    ├── setup.css
    ├── style.css
    └── rules.css
├── setup.html
├── subpages
    ├── webmap.html
    └── rules.html
└── index.html


/js/playercount.js:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 | 


--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ricardoborsato/TheGrassBlock/HEAD/favicon.ico


--------------------------------------------------------------------------------
/img/slide1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ricardoborsato/TheGrassBlock/HEAD/img/slide1.png


--------------------------------------------------------------------------------
/img/slide2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ricardoborsato/TheGrassBlock/HEAD/img/slide2.png


--------------------------------------------------------------------------------
/img/slide3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ricardoborsato/TheGrassBlock/HEAD/img/slide3.png


--------------------------------------------------------------------------------
/img/features1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ricardoborsato/TheGrassBlock/HEAD/img/features1.png


--------------------------------------------------------------------------------
/img/features2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ricardoborsato/TheGrassBlock/HEAD/img/features2.png


--------------------------------------------------------------------------------
/img/features3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ricardoborsato/TheGrassBlock/HEAD/img/features3.png


--------------------------------------------------------------------------------
/img/serverlogo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ricardoborsato/TheGrassBlock/HEAD/img/serverlogo.png


--------------------------------------------------------------------------------
/img/minecraft-chest.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ricardoborsato/TheGrassBlock/HEAD/img/minecraft-chest.jpg


--------------------------------------------------------------------------------
/.htaccess:
--------------------------------------------------------------------------------
1 | RewriteEngine on
2 | RewriteCond %{THE_REQUEST} /([^.]+)\.html [NC]
3 | RewriteRule ^ /%1 [NC,L,R]
4 | 
5 | RewriteCond %{REQUEST_FILENAME}.html -f
6 | RewriteRule ^ %{REQUEST_URI}.html [NC,L]


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ![](https://i.imgur.com/60KCjp8.png?1)
 2 | 
 3 | # TheGrassBlock
 4 |  A Simple Minecraft Server Website
 5 | 
 6 | # Information
 7 |  If you think that something must be changed, please let me know.
 8 |  I tried to explain every line inside it. What is possible to change and such.
 9 |  
10 | # Check the Wiki!
11 |  Make sure to also check the Wiki for additional help:
12 |  https://github.com/ricardoborsato/TheGrassBlock/wiki
13 | 


--------------------------------------------------------------------------------
/css/setup.css:
--------------------------------------------------------------------------------
 1 | @import url(https://fonts.googleapis.com/css?family=Roboto:300);
 2 | 
 3 | .login-page {
 4 |   width: 360px;
 5 |   padding: 8% 0 0;
 6 |   margin: auto;
 7 | }
 8 | .form {
 9 |   position: relative;
10 |   z-index: 1;
11 |   background: #FFFFFF;
12 |   max-width: 360px;
13 |   margin: 0 auto 100px;
14 |   padding: 45px;
15 |   text-align: center;
16 |   box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
17 | }
18 | .form input {
19 |   font-family: "Roboto", sans-serif;
20 |   outline: 0;
21 |   background: #f2f2f2;
22 |   width: 100%;
23 |   border: 0;
24 |   margin: 0 0 15px;
25 |   padding: 15px;
26 |   box-sizing: border-box;
27 |   font-size: 14px;
28 | }
29 | .form button {
30 |   font-family: "Roboto", sans-serif;
31 |   text-transform: uppercase;
32 |   outline: 0;
33 |   background: rgb(25, 150, 25);
34 |   width: 100%;
35 |   border: 0;
36 |   padding: 15px;
37 |   color: #FFFFFF;
38 |   font-size: 14px;
39 |   transition: all 0.3 ease;
40 |   cursor: pointer;
41 |   border-width: 10px;
42 |   transition: 0.3s;
43 | 
44 | }
45 | .form button:hover,.form button:active,.form button:focus {
46 |   background: rgb(12, 116, 12);
47 |   transition: 0.3s;
48 | 
49 | }
50 | .form .message {
51 |   margin: 15px 0 0;
52 |   color: #b3b3b3;
53 |   font-size: 12px;
54 | }
55 | .form .message a {
56 |   color: #4CAF50;
57 |   text-decoration: none;
58 | }
59 | .form .register-form {
60 |   display: none;
61 | }
62 | .container {
63 |   position: relative;
64 |   z-index: 1;
65 |   max-width: 300px;
66 |   margin: 0 auto;
67 | }
68 | .container:before, .container:after {
69 |   content: "";
70 |   display: block;
71 |   clear: both;
72 | }
73 | .container .info {
74 |   margin: 50px auto;
75 |   text-align: center;
76 | }
77 | .container .info h1 {
78 |   margin: 0 0 15px;
79 |   padding: 0;
80 |   font-size: 36px;
81 |   font-weight: 300;
82 |   color: #1a1a1a;
83 | }
84 | .container .info span {
85 |   color: #4d4d4d;
86 |   font-size: 12px;
87 | }
88 | .container .info span a {
89 |   color: #000000;
90 |   text-decoration: none;
91 | }
92 | .container .info span .fa {
93 |   color: #EF3B3A;
94 | }
95 | 
96 | .card-img-top {
97 |   height: 50px 50px;
98 | }


--------------------------------------------------------------------------------
/setup.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <!-- Required meta tags -->
 5 |     <meta charset="utf-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 7 |     <link rel="stylesheet" href="css/setup.css">
 8 |     <script src="js/playercount.js"></script>
 9 |     <!-- Bootstrap CSS -->
10 |     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
11 | 
12 |     <title>Setup Area</title>
13 | 
14 |     <!-- ... -->
15 | 
16 |   <body>
17 |       
18 |     <section>
19 |         <div class="container text-center">
20 |             <div class="login-page text-center">
21 |                 <div class="form col">
22 |                     <h2>Setup Area</h2>
23 |                     <form class="login-form" action="index.html">
24 |                     <input type="text" placeholder="Your Server Name" name="servername" id="servername"/>
25 |                     <input type="text" placeholder="Server IP" name="ip" onkeyup="formChanged()" onchange="formChanged()"/>
26 |                     <input type="text" placeholder="Server Port" name="port" onkeyup="formChanged()" onchange="formChanged()"/>
27 |                     <button onclick="setup()">Setup</button>
28 |                 </form>
29 |                 </div>
30 |             </div>
31 |         </div>
32 |     </section>
33 | 
34 |     <!-- Optional JavaScript -->
35 |     <!-- jQuery first, then Popper.js, then Bootstrap JS -->
36 |     <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
37 |     <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
38 |     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
39 |   </body>
40 | </html>


--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
  1 | .carousel-item {
  2 |   height: auto;
  3 |   min-height: 350px;
  4 |   background: no-repeat center center scroll;
  5 |   -webkit-background-size: cover;
  6 |   -moz-background-size: cover;
  7 |   -o-background-size: cover;
  8 |   background-size: cover;
  9 | }
 10 | 
 11 | #whythegrass {
 12 |   text-align: center;
 13 | }
 14 | 
 15 | .borderwhite {
 16 |   border-width: 5px;
 17 |   border-color: white;
 18 | }  
 19 | 
 20 | /* Website Color Themes */
 21 | /* Main Color */
 22 | .main-f-color {
 23 |   color: rgb(112, 215, 94);
 24 |   transition: 0.4s;
 25 | }
 26 | /* Color when hovering by the mouse pointer */
 27 | .main-f-color:hover {
 28 |   box-shadow: 0 0 7px 2px rgb(65, 179, 45);   
 29 |   color: rgb(65, 179, 45);   
 30 |   transition: 0.4s; 
 31 | }
 32 | 
 33 |   /* Every TAG into Html files that uses this class, will
 34 |   get a gray color */
 35 | 
 36 | .textgray {
 37 |   color: gray;
 38 | }
 39 | 
 40 |   /* Every TAG into Html files that uses this class, will
 41 |   get a black color */
 42 | 
 43 | .textblack {
 44 |   color: black;
 45 | }
 46 | 
 47 |   /* Every TAG into Html files that uses this class, will
 48 |   get a black color */
 49 | 
 50 |   .textwhite {
 51 |     color: white;
 52 |   }
 53 | 
 54 |   /* Every TAG into Html files that uses this class, will
 55 |   get a gray background color */
 56 | 
 57 | .backgray {
 58 |   background-color: rgb(248, 248, 248);
 59 | }
 60 | 
 61 | section div {
 62 |   text-align: center;
 63 | }
 64 | 
 65 | .center {
 66 |   text-align: center;
 67 | }
 68 | 
 69 | .left {
 70 |   text-align: left;
 71 | }
 72 | 
 73 | .right {
 74 |   text-align: right;
 75 | }
 76 | 
 77 | /* testimonials */
 78 | 
 79 | 
 80 | #testimonials {
 81 |   padding: 1% 15%;
 82 |   text-align: center;
 83 |   color: white;
 84 | }
 85 | 
 86 | .testemonial-image {
 87 |   width: 10%;
 88 |   border-radius: 100%;
 89 |   margin: 20px;
 90 | }
 91 | 
 92 | /* 
 93 | #serverfeatures {
 94 |   text-align: left;
 95 | }
 96 | */
 97 | 
 98 | /* Server features blocks */
 99 | 
100 | .featureboxes {
101 |   border: 0px solid white;
102 |   transition: 0.15s;
103 |   width: auto;
104 |   height: auto;
105 |   text-align: center;
106 | }
107 | 
108 | .featureboxes:hover {
109 |   transition: 0.15s;
110 |   transform: scale(1.01); /* (110% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
111 |   border-radius: 3px;
112 |   text-align: center;
113 | }
114 | 
115 | /* The following class resizes the images for features */
116 | .img-featureboxes {
117 |   max-width: 100px;
118 |   max-height: 100px;
119 |   width: auto;
120 |   height: auto;
121 |   text-align: center;
122 | }
123 | 
124 | /* For the Player count */
125 | .playercount {
126 |   display: inline-block;
127 | }
128 | 
129 | /* For the News. Should have a predetermined size */
130 | .img-news {
131 |   max-width: 700px;
132 |   max-height: 350px;
133 | }
134 | 
135 | /* For footer Medias */
136 | 
137 | .medias {
138 |   color: gray;
139 |   text-decoration: none;
140 |   text-align: center;
141 | }
142 | 
143 | .medias:hover 
144 | {
145 |    color: gray;
146 |    text-decoration: none; 
147 |    cursor: pointer;  
148 | }
149 | 
150 | .card-img-top {
151 |   max-width: 150px;
152 |   max-height: 150px;
153 |   width: auto;
154 |   height: auto;
155 |   text-align: center;
156 |   align-content: center;
157 |   padding-top: 1rem;
158 | }


--------------------------------------------------------------------------------
/css/rules.css:
--------------------------------------------------------------------------------
  1 | .carousel-item {
  2 |     height: auto;
  3 |     min-height: 350px;
  4 |     background: no-repeat center center scroll;
  5 |     -webkit-background-size: cover;
  6 |     -moz-background-size: cover;
  7 |     -o-background-size: cover;
  8 |     background-size: cover;
  9 |   }
 10 |   
 11 |   #whythegrass {
 12 |     text-align: center;
 13 |   }
 14 |   
 15 |   .borderwhite {
 16 |     border-width: 5px;
 17 |     border-color: white;
 18 |   }  
 19 |   
 20 |   /* Website Color Themes */
 21 |   /* Main Color */
 22 |   .main-f-color {
 23 |     color: rgb(112, 215, 94);
 24 |     transition: 0.4s;
 25 |   }
 26 |   /* Color when hovering by the mouse pointer */
 27 |   .main-f-color:hover {
 28 |     box-shadow: 0 0 7px 2px rgb(65, 179, 45);   
 29 |     color: rgb(65, 179, 45);   
 30 |     transition: 0.4s; 
 31 |   }
 32 |   
 33 |     /* Every TAG into Html files that uses this class, will
 34 |     get a gray color */
 35 |   
 36 |   .textgray {
 37 |     color: gray;
 38 |   }
 39 |   
 40 |     /* Every TAG into Html files that uses this class, will
 41 |     get a black color */
 42 |   
 43 |   .textblack {
 44 |     color: black;
 45 |   }
 46 |   
 47 |     /* Every TAG into Html files that uses this class, will
 48 |     get a black color */
 49 |   
 50 |     .textwhite {
 51 |       color: white;
 52 |     }
 53 |   
 54 |     /* Every TAG into Html files that uses this class, will
 55 |     get a gray background color */
 56 |   
 57 |   .backgray {
 58 |     background-color: rgb(248, 248, 248);
 59 |   }
 60 |   
 61 |   section div {
 62 |     text-align: center;
 63 |   }
 64 |   
 65 |   .center {
 66 |     text-align: center;
 67 |   }
 68 |   
 69 |   .left {
 70 |     text-align: left;
 71 |   }
 72 |   
 73 |   .right {
 74 |     text-align: right;
 75 |   }
 76 |   
 77 |   /* testimonials */
 78 |   
 79 |   
 80 |   #testimonials {
 81 |     padding: 1% 15%;
 82 |     text-align: center;
 83 |     color: white;
 84 |   }
 85 |   
 86 |   .testemonial-image {
 87 |     width: 10%;
 88 |     border-radius: 100%;
 89 |     margin: 20px;
 90 |   }
 91 |   
 92 |   /* 
 93 |   #serverfeatures {
 94 |     text-align: left;
 95 |   }
 96 |   */
 97 |   
 98 |   /* Server features blocks */
 99 |   
100 |   .featureboxes {
101 |     border: 0px solid white;
102 |     transition: 0.15s;
103 |     width: auto;
104 |     height: auto;
105 |     text-align: center;
106 |   }
107 |   
108 |   .featureboxes:hover {
109 |     transition: 0.15s;
110 |     transform: scale(1.01); /* (110% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
111 |     border-radius: 3px;
112 |     text-align: center;
113 |   }
114 |   
115 |   /* The following class resizes the images for features */
116 |   .img-featureboxes {
117 |     max-width: 100px;
118 |     max-height: 100px;
119 |     width: auto;
120 |     height: auto;
121 |     text-align: center;
122 |   }
123 |   
124 |   /* For the Player count */
125 |   .playercount {
126 |     display: inline-block;
127 |   }
128 |   
129 |   /* For the News. Should have a predetermined size */
130 |   .img-news {
131 |     max-width: 700px;
132 |     max-height: 350px;
133 |   }
134 |   
135 |   /* For footer Medias */
136 |   
137 |   .medias {
138 |     color: gray;
139 |     text-decoration: none;
140 |     text-align: center;
141 |   }
142 |   
143 |   .medias:hover 
144 |   {
145 |      color: gray;
146 |      text-decoration: none; 
147 |      cursor: pointer;  
148 |   }
149 |   
150 |   .card-img-top {
151 |     max-width: 150px;
152 |     max-height: 150px;
153 |     width: auto;
154 |     height: auto;
155 |     text-align: center;
156 |     align-content: center;
157 |     padding-top: 1rem;
158 |   }


--------------------------------------------------------------------------------
/subpages/webmap.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en" style="zoom: 85%;">
  3 | 
  4 |   <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7 |     
  8 |     <!-- 🪐 - Description (For SEO) - 🪐 -->  
  9 |     <!---------------------------------------------------------------------->    
 10 |     <meta name="description" content="TheGrassBlock Server. A Nice Minecraft Server. It is the best! Lets play together">
 11 |     <!----------------------------------------------------------------------> 
 12 |     <!-- 🪐 - Description (For SEO) - 🪐 -->
 13 | 
 14 |     <link rel="stylesheet" href="../css/style.css">
 15 |     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
 16 |     <script src="https://kit.fontawesome.com/24b38c7cb1.js" crossorigin="anonymous"></script>
 17 |                           
 18 |     <!-- 🪐 - FavIcon - 🪐 -->  
 19 |     <!---------------------------------------------------------------------->
 20 |     <link rel="shortcut icon" href="../favicon.ico"/>
 21 |     <!---------------------------------------------------------------------->    
 22 |     <!-- 🪐 - FavIcon - 🪐 -->
 23 | 
 24 | 
 25 |     <!-- 🪐 - Website Title - 🪐 -->
 26 |     <!---------------------------------------------------------------------->    
 27 |     <title class='webistetitle'>Map - TheGrassBlock Server</title>                         
 28 |     <!---------------------------------------------------------------------->
 29 |     <!-- 🪐 - Website Title - 🪐 -->    
 30 | 
 31 |   </head>
 32 |   <body>
 33 |     <!-- Navigation -->
 34 |     <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
 35 |       <div class="container">
 36 | 
 37 |         <!-- 🪐 - Website Logo - 🪐 -->
 38 |         <!---------------------------------------------------------------------->  
 39 |         <a href="index.html"><img src="../img/serverlogo.png" style="width: 50px; padding-right: 10px;"></a>
 40 |         <!---------------------------------------------------------------------->  
 41 |         <!-- 🪐 - Website Logo - 🪐 -->
 42 |         
 43 |         <!-- 🪐 - Navigation Name - 🪐 -->
 44 |         <!---------------------------------------------------------------------->         
 45 |         <a class="navbar-brand" href="index.html">TheGrassBlock Server</a>
 46 |         <!---------------------------------------------------------------------->
 47 |         <!-- 🪐 - Navigation Name - 🪐 -->
 48 | 
 49 |         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
 50 |           <span class="navbar-toggler-icon"></span>
 51 |         </button>
 52 |         <div class="collapse navbar-collapse" id="navbarResponsive">
 53 |           <ul class="navbar-nav ml-auto">
 54 |             <li class="nav-item">
 55 |               <a class="nav-link" href="../index.html">Home
 56 |                     <span class="sr-only">(current)</span>
 57 |                   </a>
 58 |             </li>
 59 |             <li class="nav-item">
 60 |               <a class="nav-link" href="#">Shop</a>
 61 |             </li>
 62 |             <li class="nav-item active">
 63 |                 <a class="nav-link">WebMap</a>
 64 |             </li>    
 65 |             <li class="nav-item">
 66 |               <a class="nav-link" href="rules.html">Rules</a>
 67 |             </li>                        
 68 |             <li class="nav-item">
 69 |               <a class="nav-link" href="#">Forums</a>
 70 |             </li>
 71 |             <li class="nav-item dropdown">
 72 |               <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 73 |                 About Us
 74 |               </a>
 75 |               <div class="dropdown-menu" aria-labelledby="navbarDropdown">
 76 |                 <a class="dropdown-item" href="#">Minigames</a>
 77 |                 <a class="dropdown-item" href="#">Vote</a>    
 78 |                 <!-- Other Page:
 79 |                 <a class="dropdown-item" href="#">OtherPage</a>
 80 |                 -->           
 81 |                 <div class="dropdown-divider"></div>
 82 |                 <a class="dropdown-item" href="#">Contact</a>
 83 |               </div>
 84 |             </li>
 85 |           </ul>
 86 |         </div>
 87 |       </div>
 88 |     </nav>
 89 |     <!-- Top Navigation End -->
 90 | 
 91 |     <section class="py-5" style="margin-top: 2rem;">
 92 |         <div class="container">
 93 |           <h4 class="display-4">Minimap</h4>
 94 |           <p class="lead">🗺 Our Server Map! 🗺</p>
 95 |         </div>
 96 |       </section>
 97 |       <style>
 98 |         iframe {
 99 |             width: 75%; /* It should not be 100% */
100 |             height: 1000px;
101 |             display: block;
102 |             padding-top: 0rem;
103 |             padding-bottom: 10rem;
104 |         }
105 |       </style>
106 |     <section style="
107 |     padding-left: 2%;
108 |     padding-right: 2%;">
109 |         <div>    
110 |           <!-- You can set your Dynmap's map URL on the line (src="http://link")-->
111 |           <iframe 
112 |           class="container" 
113 |           frameBorder="0"
114 |           src="http://dynmap:8123/"><!-- <--- Dynmap Link Goes here <--- there -->
115 |           </iframe>
116 |         </div>
117 |     </section>
118 | 
119 |     <!-- Footer -->
120 |     <footer class="page-footer font-small bg-dark pt-4">
121 |       <!-- Footer Elements -->
122 |       <div class="container">
123 |         <!--Grid row-->
124 |         <div class="row">
125 |           <!--Grid column-->
126 |           <div class="col-md-6 mb-4">
127 |             <h4 style="color: white;">TheGrassBlock</h4>
128 |             <p class="textgray">
129 |               The best Minecraft Server since 1985!
130 |               <br>
131 |               Where the GrassBlocks were the main objective!
132 |               <br>
133 |               Made with Love by thw highest Minecrafters in the world.
134 |               From plugins developer TheGrassBlock was originally
135 |               created to be a simple Survival Server, but now it has
136 |               the most Survival Comunnity from America and Europe!
137 |             </p>
138 |           </div>
139 |           <!--Grid column-->
140 |           <!--Grid column-->
141 |           <div class="col-md-6 mb-4">
142 |             <h4 style="color: white;">Connect with us!</h4><br>
143 |             <div class="row">
144 |               <!-- Discord icon -->              
145 |               <div class="col-sm-12 col-md-3">
146 |                 <a class="medias" href="https://linkhere">
147 |                   <i class="fab fa-discord fa-2x" style="color: #7289DA;"></i>
148 |                   Discord
149 |                 </a>
150 |               </div>
151 |               <!-- Youtube icon -->
152 |               <div class="col-sm-12 col-md-3">
153 |                 <a class="medias" href="https://linkhere">
154 |                   <i class="fab fa-youtube fa-2x" style="color: red;"></i>
155 |                   Youtube
156 |                 </a>
157 |               </div>              
158 |               <!-- Twitter Icon --> 
159 |               <div class="col-sm-12 col-md-3">
160 |                 <a class="medias" href="https://linkhere">
161 |                   <i class="fab fa-twitter fa-2x" style="color: #1DA1F2;"></i>
162 |                   Twitter
163 |                 </a>
164 |               </div> 
165 |               <!-- Facebook Icon -->
166 |               <div class="col-sm-12 col-md-3">
167 |                 <a class="medias" href="https://linkhere">
168 |                   <i class="fab fa-facebook-f fa-2x" style="color: #4267B2;"></i>
169 |                   Facebook
170 |                 </a>
171 |               </div>                                         
172 |             </div>
173 |           </div>
174 |           <!--Grid column-->
175 |         </div>
176 |         <!--Grid row-->
177 |       </div>
178 |       <!-- Footer Elements -->
179 |       <div class="footer-copyright page-footer text-center py-3" style="color: white; background-color: rgb(37, 41, 46);">
180 |         © 2020 Copyright:
181 |         <a href="../index.html">TheGrassBlock Server</a>
182 |       </div>
183 |     </footer>
184 |     <!-- Footer -->
185 | 
186 |     <!-- Optional JavaScript -->
187 |     <!-- jQuery first, then Popper.js, then Bootstrap JS, then Playercount -->
188 |     <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
189 |     <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
190 |     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
191 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
192 |     <script type="text/javascript" src="js/playercount.js"></script>
193 |   </body>
194 | </html>


--------------------------------------------------------------------------------
/subpages/rules.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en" style="zoom: 85%;">
  3 | 
  4 |   <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7 |     
  8 |     <!-- 🪐 - Description (For SEO) - 🪐 -->  
  9 |     <!---------------------------------------------------------------------->    
 10 |     <meta name="description" content="TheGrassBlock Server. A Nice Minecraft Server. It is the best! Lets play together">
 11 |     <!----------------------------------------------------------------------> 
 12 |     <!-- 🪐 - Description (For SEO) - 🪐 -->
 13 | 
 14 |     <link rel="stylesheet" href="../css/rules.css">
 15 |     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
 16 |     <script src="https://kit.fontawesome.com/24b38c7cb1.js" crossorigin="anonymous"></script>
 17 |                           
 18 |     <!-- 🪐 - FavIcon - 🪐 -->  
 19 |     <!---------------------------------------------------------------------->
 20 |     <link rel="shortcut icon" href="../favicon.ico"/>
 21 |     <!---------------------------------------------------------------------->    
 22 |     <!-- 🪐 - FavIcon - 🪐 -->
 23 | 
 24 | 
 25 |     <!-- 🪐 - Website Title - 🪐 -->
 26 |     <!---------------------------------------------------------------------->    
 27 |     <title class='webistetitle'>Rules - TheGrassBlock Server</title>                         
 28 |     <!---------------------------------------------------------------------->
 29 |     <!-- 🪐 - Website Title - 🪐 -->    
 30 | 
 31 |   </head>
 32 |   <body>
 33 |     <!-- Navigation -->
 34 |     <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
 35 |       <div class="container">
 36 | 
 37 |         <!-- 🪐 - Website Logo - 🪐 -->
 38 |         <!---------------------------------------------------------------------->  
 39 |         <a href="index.html"><img src="../img/serverlogo.png" style="width: 50px; padding-right: 10px;"></a>
 40 |         <!---------------------------------------------------------------------->  
 41 |         <!-- 🪐 - Website Logo - 🪐 -->
 42 |         
 43 |         <!-- 🪐 - Navigation Name - 🪐 -->
 44 |         <!---------------------------------------------------------------------->         
 45 |         <a class="navbar-brand" href="index.html">TheGrassBlock Server</a>
 46 |         <!---------------------------------------------------------------------->
 47 |         <!-- 🪐 - Navigation Name - 🪐 -->
 48 | 
 49 |         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
 50 |           <span class="navbar-toggler-icon"></span>
 51 |         </button>
 52 |         <div class="collapse navbar-collapse" id="navbarResponsive">
 53 |           <ul class="navbar-nav ml-auto">
 54 |             <li class="nav-item">
 55 |               <a class="nav-link" href="../index.html">Home
 56 |                     <span class="sr-only">(current)</span>
 57 |                   </a>
 58 |             </li>
 59 |             <li class="nav-item">
 60 |               <a class="nav-link" href="#">Shop</a>
 61 |             </li>
 62 |             <li class="nav-item">
 63 |                 <a class="nav-link" href="webmap.html">WebMap</a>
 64 |             </li>
 65 |             <li class="nav-item active">
 66 |               <a class="nav-link">Rules</a>
 67 |             </li>                          
 68 |             <li class="nav-item">
 69 |               <a class="nav-link" href="#">Forums</a>
 70 |             </li>
 71 |             <li class="nav-item dropdown">
 72 |               <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 73 |                 About Us
 74 |               </a>
 75 |               <div class="dropdown-menu" aria-labelledby="navbarDropdown">
 76 |                 <a class="dropdown-item" href="#">Minigames</a>
 77 |                 <a class="dropdown-item" href="#">Vote</a>    
 78 |                 <!-- Other Page:
 79 |                 <a class="dropdown-item" href="#">OtherPage</a>
 80 |                 -->           
 81 |                 <div class="dropdown-divider"></div>
 82 |                 <a class="dropdown-item" href="#">Contact</a>
 83 |               </div>
 84 |             </li>
 85 |           </ul>
 86 |         </div>
 87 |       </div>
 88 |     </nav>
 89 |     <!-- Top Navigation End -->
 90 | 
 91 |     <section class="py-5" style="margin-top: 2rem;">
 92 |       <div class="container">
 93 |         <h4 class="display-4">Server Rules</h4>
 94 |         <p class="lead">⚠📜 Follow and Respect 📜⚠</p>
 95 |       </div>
 96 |   </section>
 97 | 
 98 |   <!-- Thanks @Skelly from Codepen! -->
 99 |   <section style="padding-bottom: 5rem;">
100 |     <div class="container py-3">
101 |       <div class="row">
102 |         <div class="col-10 mx-auto">
103 |           <div class="accordion" id="faqExample">
104 |             <div class="card">
105 |               <div class="card-header p-2" id="headingOne">
106 |                 <h5 class="mb-0">
107 |                   <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
108 |                     1. Respect Every Staff
109 |                   </button>
110 |                 </h5>
111 |               </div>
112 |               <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#faqExample">
113 |                 <div class="card-body">
114 |                   <b>Justificative:</b>
115 |                   You Must Respect evey staff from the server! It's the Majority! Staffs are users destined for the
116 |                   server peace maintenance and configuration. Let's respect them! 
117 |                 </div>
118 |               </div>
119 |             </div>
120 |             <!-- This is the " Two " page. -->             
121 |             <div class="card">
122 |               <div class="card-header p-2" id="headingTwo">
123 |                 <h5 class="mb-0">
124 |                   <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
125 |                     2. Respect Players
126 |                   </button>
127 |                 </h5>
128 |               </div>
129 |               <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#faqExample">
130 |                 <div class="card-body">
131 |                   The answer to the question can go here.
132 |                 </div>
133 |               </div>
134 |             </div>
135 |             <!-- This is the " Three " page. -->              
136 |             <div class="card">
137 |               <div class="card-header p-2" id="headingThree">
138 |                 <h5 class="mb-0">
139 |                   <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
140 |                     3. Have Much Fun
141 |                   </button>
142 |                 </h5>
143 |               </div>
144 |               <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#faqExample">
145 |                 <div class="card-body">
146 |                   The answer to the question can go here.
147 |                 </div>
148 |               </div>
149 |             </div>
150 |             <!-- This is the " Four " page. -->            
151 |             <div class="card">
152 |               <div class="card-header p-2" id="headingFour">
153 |                 <h5 class="mb-0">
154 |                   <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseThree">
155 |                     4. Do not use Hacks or Clients
156 |                   </button>
157 |                 </h5>
158 |               </div>
159 |               <div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#faqExample">
160 |                 <div class="card-body">
161 |                   The answer to this question can go here. This FAQ example can contain all the Q/A that is needed.
162 |                 </div>
163 |               </div>
164 |             </div>
165 |             <!-- Want a New Rule/Collapse Button? -->
166 |             <!-- Starts Below -->
167 |             <!-- This is the " Five " page. -->
168 |             <div class="card">
169 |               <!-- Please! NOTE THIS: id="headingFive" -->
170 |               <div class="card-header p-2" id="headingFive">
171 |                 <h5 class="mb-0">
172 |                   <!-- Please! NOTE THIS: data-target="#collapseFive" -->
173 |                   <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseFive" aria-expanded="false" aria-controls="collapseThree">
174 |                     5. XRAY? Here? No!
175 |                   </button>
176 |                 </h5>
177 |               </div>
178 |               <!-- Please! NOTE THIS: id="collapseFive" and  aria-labelledby="headingFive" -->
179 |               <div id="collapseFive" class="collapse" aria-labelledby="headingFive" data-parent="#faqExample">
180 |                 <div class="card-body">
181 |                   Don't use x-ray!
182 |                 </div>
183 |               </div>
184 |             </div>
185 |             <!-- Ends Above -->
186 |             <!-- Gotcha? Whenever you add a new "page" for the Rules -->
187 |             <!-- MAKE SURE to change these values in the commentaries -->
188 |             <!-- Above to six, seven, eight and such -->
189 |           </div>
190 |         </div>
191 |       </div>
192 |     </div>
193 |   </section>
194 | 
195 |     <!-- Footer -->
196 |     <footer class="page-footer font-small bg-dark pt-4">
197 |       <!-- Footer Elements -->
198 |       <div class="container">
199 |         <!--Grid row-->
200 |         <div class="row">
201 |           <!--Grid column-->
202 |           <div class="col-md-6 mb-4">
203 |             <h4 style="color: white;">TheGrassBlock</h4>
204 |             <p class="textgray">
205 |               The best Minecraft Server since 1985!
206 |               <br>
207 |               Where the GrassBlocks were the main objective!
208 |               <br>
209 |               Made with Love by thw highest Minecrafters in the world.
210 |               From plugins developer TheGrassBlock was originally
211 |               created to be a simple Survival Server, but now it has
212 |               the most Survival Comunnity from America and Europe!
213 |             </p>
214 |           </div>
215 |           <!--Grid column-->
216 |           <!--Grid column-->
217 |           <div class="col-md-6 mb-4">
218 |             <h4 style="color: white;">Connect with us!</h4><br>
219 |             <div class="row">
220 |               <!-- Discord icon -->              
221 |               <div class="col-sm-12 col-md-3">
222 |                 <a class="medias" href="https://linkhere">
223 |                   <i class="fab fa-discord fa-2x" style="color: #7289DA;"></i>
224 |                   Discord
225 |                 </a>
226 |               </div>
227 |               <!-- Youtube icon -->
228 |               <div class="col-sm-12 col-md-3">
229 |                 <a class="medias" href="https://linkhere">
230 |                   <i class="fab fa-youtube fa-2x" style="color: red;"></i>
231 |                   Youtube
232 |                 </a>
233 |               </div>              
234 |               <!-- Twitter Icon --> 
235 |               <div class="col-sm-12 col-md-3">
236 |                 <a class="medias" href="https://linkhere">
237 |                   <i class="fab fa-twitter fa-2x" style="color: #1DA1F2;"></i>
238 |                   Twitter
239 |                 </a>
240 |               </div> 
241 |               <!-- Facebook Icon -->
242 |               <div class="col-sm-12 col-md-3">
243 |                 <a class="medias" href="https://linkhere">
244 |                   <i class="fab fa-facebook-f fa-2x" style="color: #4267B2;"></i>
245 |                   Facebook
246 |                 </a>
247 |               </div>                                         
248 |             </div>
249 |           </div>
250 |           <!--Grid column-->
251 |         </div>
252 |         <!--Grid row-->
253 |       </div>
254 |       <!-- Footer Elements -->
255 |       <div class="footer-copyright page-footer text-center py-3" style="color: white; background-color: rgb(37, 41, 46);">
256 |         © 2020 Copyright:
257 |         <a href="../index.html">TheGrassBlock Server</a>
258 |       </div>
259 |     </footer>
260 |     <!-- Footer -->
261 | 
262 |     <!-- Optional JavaScript -->
263 |     <!-- jQuery first, then Popper.js, then Bootstrap JS, then Playercount -->
264 |     <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
265 |     <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
266 |     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
267 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
268 |     <script type="text/javascript" src="js/playercount.js"></script>
269 |   </body>
270 | </html>


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


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