├── CNAME
├── img
    └── logo
    │   ├── animated.gif
    │   └── sticker.png
├── README.md
├── css
    └── styles.css
└── index.html


/CNAME:
--------------------------------------------------------------------------------
1 | firestartermc.com


--------------------------------------------------------------------------------
/img/logo/animated.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/firestarter/web/main/img/logo/animated.gif


--------------------------------------------------------------------------------
/img/logo/sticker.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/firestarter/web/main/img/logo/sticker.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | <h1>web</h1>
2 | 
3 | # but gitgud lul
4 | 
5 | > preview:
6 | 
7 | [<img src="https://i.ibb.co/6rgQpc1/image.png">](https://firestartermc.com)


--------------------------------------------------------------------------------
/css/styles.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;500&display=swap');
  2 | 
  3 | :root {
  4 |   --nizz-color: #ff9040;
  5 |   --bg-color: #131110;
  6 |   --text-color: #d3d3d3;
  7 | }
  8 | 
  9 | * {
 10 |   font-family: "Lexend", sans-serif;
 11 | }
 12 | 
 13 | h1,
 14 | h4,
 15 | a,
 16 | p,
 17 | li {
 18 |   color: var(--text-color);
 19 | }
 20 | 
 21 | li {
 22 |   line-height: 1.5em;
 23 |   padding: 0.5em;
 24 | }
 25 | 
 26 | code {
 27 |   color: var(--nizz-color);
 28 | }
 29 | 
 30 | strong {
 31 |   font-weight: 500;
 32 | }
 33 | 
 34 | body {
 35 |   display: flex;
 36 |   align-items: center;
 37 |   justify-content: center;
 38 |   background-color: var(--bg-color);
 39 |   height: 100vh;
 40 |   margin: 0;
 41 |   animation: fade 2s;
 42 | }
 43 | 
 44 | .content {
 45 |   margin: auto;
 46 |   display: flex;
 47 |   justify-content: center;
 48 |   flex-direction: column;
 49 |   align-items: center;
 50 |   max-width: 40em;
 51 | }
 52 | 
 53 | .heading {
 54 |   display: flex;
 55 |   justify-content: center;
 56 |   align-items: center;
 57 |   margin-bottom: 0.5em;
 58 |   margin-right: auto;
 59 |   color: var(--nizz-color);
 60 |   background: linear-gradient(to right, #FF4621 0%, #FF9B4F 100%);
 61 |   -webkit-background-clip: text;
 62 |   -webkit-text-fill-color: transparent;
 63 | }
 64 | 
 65 | .main-text {
 66 |   text-align: left;
 67 |   max-width: 500px;
 68 | }
 69 | 
 70 | .sub-text {
 71 |   margin-top: 0;
 72 |   margin-right: auto;
 73 |   color: #f4f4f4;
 74 |   font-weight: 500;
 75 | }
 76 | 
 77 | .navigation {
 78 |   margin: 2em 0;
 79 | }
 80 | 
 81 | .navigation a {
 82 |   font-weight: 500;
 83 |   background-color: #24211F;
 84 |   padding: 0.35em 0.8em;
 85 |   border-radius: 0.3em;
 86 |   text-decoration: none;
 87 |   color: #fed7aa;
 88 |   margin-right: 0.3em;
 89 |   box-shadow: 0 2px 15px 0 rgb(0 0 0 / 2%);
 90 | 
 91 |   transition: background-color 0.3s ease;
 92 | }
 93 | 
 94 | .navigation a:hover {
 95 |   background-color: #2C2926;
 96 |   color: var(--nizz-color);
 97 | }
 98 | 
 99 | .discord-button {
100 |   background-color: #6775AC !important;
101 |   color: white !important;
102 | }
103 | 
104 | .discord-button:hover {
105 |   background-color: #7483BF !important;
106 |   color: #fed7aa !important;
107 | }
108 | 
109 | .copyright {
110 |   color: #a3a3a3;
111 |   text-align: center;
112 | }
113 | 
114 | .repeating-before {
115 |   list-style: none;
116 |   padding: 0;
117 |   margin: 0;
118 | }
119 | 
120 | .repeating-before li {
121 |   padding-left: 1rem;
122 |   text-indent: -1.7rem;
123 | }
124 | 
125 | .repeating-before li:nth-child(1n)::before {
126 |   content: "🪶 ";
127 | }
128 | 
129 | .repeating-before li:nth-child(2n)::before {
130 |   content: "✨ ";
131 | }
132 | 
133 | .repeating-before li:nth-child(3n)::before {
134 |   content: "💸 ";
135 | }
136 | 
137 | .repeating-before li:nth-child(4n)::before {
138 |   content: "🗺️ ";
139 | }
140 | 
141 | .repeating-before li:nth-child(5n)::before {
142 |   content: "🔥 ";
143 | }
144 | 
145 | #logo {
146 |   padding-right: 10px;
147 |   width: 32px;
148 |   height: 32px;
149 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <title>firestarter - simple, cozy, friendly smp</title>
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |   <meta name="description" content="A community-centric Minecraft SMP server with a simple, relaxing, and uncluttered experience that complements the vanilla game!">
 8 |   <meta name="author" content="Firestarter Staff">
 9 |   <meta name="keywords" content="Minecraft,survival,smp,server,realm,economy,smp,claims,pets,1.20">
10 | 
11 |   <meta name="theme-color" content="#ea580c">
12 |   <meta name="og:type" content="website">
13 |   <meta name="og:image" content="https://firestartermc.com/img/logo/animated.gif">
14 | 
15 |   <link rel="icon" type="image/png" href="./img/logo/sticker.png">
16 |   <link rel="stylesheet" href="css/styles.css" type="text/css">
17 | </head>
18 | 
19 | <body>
20 |   <div class="content">
21 |     <h1 class="heading"><img id="logo" src="img/logo/sticker.png" alt="firestarter logo">firestarter</h1>
22 |     <h3 class="sub-text"> A simple, community-centric Minecraft SMP server!</h3>
23 |     <br />
24 | 
25 |     <div class="main-text">
26 |       <ul class="repeating-before">
27 |         <li>A community SMP that was founded in August of 2019, aiming to create a fun, cozy, and
28 |           relaxing place to play Minecraft!
29 |         </li>
30 |         <li><strong>Simplicity</strong> is our central focus! Our simple <a href="https://firestartermc.com/guide">rules</a>
31 |           prohibit griefing and protect your builds from disaster.
32 |         </li>
33 |         <li>Our economy is player-driven- players can create their own shops and warps, auction off items at
34 |           their own prices, and trade with other players.
35 |         </li>
36 |         <li>We have a gigantic map, with lots of space for everybody to build and explore! Our 
37 |           <strong>80,000 x 80,000</strong> block map is interconnected by a full library of player warps!
38 |         </li>
39 |         <li>We stay up to date! Come join us at
40 |           <code>firestartermc.com</code> with Minecraft 1.20: The Trails & Tales Update.
41 |         </li>
42 |       </ul>
43 |     </div>
44 |     <br />
45 |     
46 |     <div class="nav-wrapper">
47 |       <div class="navigation">
48 |         <a href="https://firestartermc.com/guide" target="_blank">Guide</a>
49 |         <a href="https://vote.firestartermc.com" target="_blank">Vote</a>
50 |         <a href="https://store.firestartermc.com" target="_blank">Store</a>
51 |         <a href="https://discord.gg/yzj9HrF" target="_blank" class="discord-button">Discord</a>
52 |       </div>
53 |     </div>
54 | 
55 |     <p class="current-player-count">_ playing right now! 🫶🏻</p>
56 |     <p class="copyright">firestarter © 2019-2023<br />We are not affiliated with Mojang AB.</p>
57 |   </div>
58 | 
59 |   <!-- some fun statistics 🌿 -->
60 |   <script src="https://mcapi.us/scripts/minecraft.min.js"></script>
61 |   <script>
62 |     MinecraftAPI.getServerStatus('mc.firestartermc.com', (err, status) => {
63 |         if (err) {
64 |           return document.querySelector('.current-player-count').innerHTML = 'ten gazillion playing right now! 🤯';
65 |         }
66 | 
67 |         var playerCount = status.players.now
68 |         document.querySelector('.current-player-count').innerHTML = (playerCount == 0 ? `Nobody playing right now. 🥲` : `${status.players.now} playing right now! 🫶🏻`)
69 |     });
70 |   </script>
71 | </body>
72 | 
73 | </html>


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