First alpha of website 3.0

2023-05-12 11:46:53 -04:00
1 parent 3dda56561f
commit 788330a55a
@@ -0,0 +1,13 @@
+Tutorialzine License:
+
+Home: https://tutorialzine.com/license
+
+The source code and techniques, covered in our tutorials, are free for use in your personal and commercial projects. The text and images of our articles, however, are copyrighted and may not be used or copied without written permission (this includes translation of the articles in different languages).
+
+You can use, modify and build upon our code for your (or your clients’) personal and commercial projects with no attribution necessary.
+
+You are not allowed to redistribute our demo files directly (you are encouraged to share a link to the tutorials instead).
+
+If you plan to include our source code in site templates or to package it with other forms of digital content, meant for direct selling on online marketplaces (such as ThemeForest, ActiveDen etc.), you are required to include a back-link to the article in question on Tutorialzine.com.
+
+Feel free to contact us if you have any questions about our licensing terms.
@@ -1 +1,9 @@
-# website
+# TrueOG Website
+
+This is the primary git repository representing the live state on [TrueOG.net](https://true-og.net/).
+
+The code for the website is licensed under the permissive [Tutorialzine License](https://tutorialzine.com/license).
+
+The font is licensed under [MIT](https://mit-license.org).
+
+All other assets, including TrueOG's logos, are licensed under [The Unlicense](https://unlicense.org/).
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Alex Gabites
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
@@ -0,0 +1,24 @@
+This is free and unencumbered software released into the public domain.
+
+Anyone is free to copy, modify, publish, use, compile, sell, or
+distribute this software, either in source code form or as a compiled
+binary, for any purpose, commercial or non-commercial, and by any
+means.
+
+In jurisdictions that recognize copyright laws, the author or authors
+of this software dedicate any and all copyright interest in the
+software to the public domain. We make this dedication for the benefit
+of the public at large and to the detriment of our heirs and
+successors. We intend this dedication to be an overt act of
+relinquishment in perpetuity of all present and future rights to this
+software under copyright law.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
+
+For more information, please refer to <https://unlicense.org>
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+<msapplication>
+<tile>
+<square70x70logo src="favicon-76.png"/>
+<square150x150logo src="favicon-228.png"/>
+<TileColor>#2b5797</TileColor>
+</tile>
+</msapplication>
+</browserconfig> 
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="220" height="220">
+  <circle cx="110" cy="110" r="98" fill="#fff"/>
+  <path d="M110 55c-30.36 0-55 24.64-55 55s24.64 55 55 55c26.24246 0 48.21121-18.39947 53.6875-43h-29.5c-4.42278 8.8816-13.59782 15-24.1875 15-14.904 0-27-12.096-27-27s12.096-27 27-27c10.19663 0 19.09382 5.65083 23.6875 14h29.75C157.59313 72.905598 135.88327 55 110 55z"/>
+  <path fill="#fff" d="M158.5 42.5c-39.17708 39.177083-78.354167 78.35417-117.53125 117.53125 6.993314 6.67474 14.066166 13.26592 21.0625 19.9375l117.9375-117.9375c-6.67172-6.996203-13.26292-14.069039-19.9375-21.0625-.51042.510417-1.02083 1.020833-1.53125 1.53125z"/>
+  <path fill="red" d="M160 44 44 160l18 17L177 62z"/>
+  <path fill="red" d="M110 12c-54.096 0-98 43.904-98 98s43.904 98 98 98 98-43.904 98-98-43.904-98-98-98zm0 20c43.056 0 78 34.944 78 78s-34.944 78-78 78-78-34.944-78-78 34.944-78 78-78z"/>
+</svg>
@@ -0,0 +1,178 @@
+<!-- Define file as HTML for browser. -->
+<!DOCTYPE html>
+<!-- Declare native language. -->
+<html lang="en">
+	<!-- Declare Head for metadata. -->
+	<head>
+
+		<!-- Set website character set and dimensions so that it displays correctly. -->
+		<meta charset="UTF-8">
+		<!-- Inform old browsers that the site is supported. -->
+		<meta http-equiv="X-UA-Compatible" content="IE=edge">
+		<!-- Scale the site to the screen size of the device viewing it. -->
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+
+		<!-- Link to favicons for thumbnails in browsers. -->
+		<!-- Generic: -->
+		<link rel="icon" type="image/x-icon" href="assets/favicons/favicon.ico">
+		<link rel="icon" href="assets/images/favicons/favicon-32.png" sizes="32x32">
+		<link rel="icon" href="assets/images/favicons/favicon-57.png" sizes="57x57">
+		<link rel="icon" href="assets/images/favicons/favicon-76.png" sizes="76x76">
+		<link rel="icon" href="assets/images/favicons/favicon-96.png" sizes="96x96">
+		<link rel="icon" href="assets/images/favicons/favicon-128.png" sizes="128x128">
+		<link rel="icon" href="assets/images/favicons/favicon-192.png" sizes="192x192">
+		<link rel="icon" href="assets/images/favicons/favicon-228.png" sizes="228x228">
+		<!-- Android: -->
+		<link rel="shortcut icon" sizes="196x196" href="assets/images/favicons/favicon-196.png">
+		<!-- iOS: -->
+		<link rel="apple-touch-icon" href="assets/images/favicons/favicon-120.png" sizes="120x120">
+		<link rel="apple-touch-icon" href="assets/images/favicons/favicon-152.png" sizes="152x152">
+		<link rel="apple-touch-icon" href="assets/images/favicons/favicon-180.png" sizes="180x180">
+		<!-- Windows 8 IE 10: -->
+		<meta name="msapplication-TileColor" content="#FFFFFF">
+		<meta name="msapplication-TileImage" content="assets/images/favicons/favicon-144.png">
+		<!-- Windows 8.1 + IE11 and above: -->
+		<meta name="msapplication-config" content="assets/images/favicons/browserconfig.xml"/>
+
+		<!-- Declare Page Title. -->
+		<title>TrueOG</title>
+
+		<!-- Import Font Awesome 4.7 and keep the rendering engine awake using PHP trick. -->
+		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css?v=<?php echo time(); ?>">
+		<!-- Import custom CSS and keep the rendering engine awake using PHP trick. -->
+		<link rel="stylesheet" href="stylesheet.css?v=<?php echo time(); ?>">
+
+	<!-- Close Head. -->
+	</head>
+
+	<!-- Declare Body. -->
+	<body>
+
+		<!-- Declare Header. -->
+		<header>
+
+			<!-- Display TrueOG logo in top left of navbar. -->
+			<a href="https://www.true-og.net/" target="_blank">
+			<img src="assets/images/logos/true-og-logo-transparent-background.png" class="main-logo" alt="Logo"></a>
+
+			<!-- Declare navigation menu. -->
+			<nav class="outlined">
+
+				<!-- Declare navigation button for Games. -->
+				<li><a href="#smp">&nbsp;&nbsp;<i class="fa fa-gamepad bukkit-gold">&nbsp;&nbsp;</i><strong>Games</strong></a></li>
+				<!-- Declare navigation button for Shop. -->
+				<li><a href="#shop">&nbsp;&nbsp;<i class="fa fa-shopping-bag bukkit-red">&nbsp;&nbsp;</i><strong>Shop</strong></a></li>
+				<!-- Declare navigation button for Team. -->
+				<li><a href="#team">&nbsp;&nbsp;<i class="fa fa-users bukkit-dark-purple">&nbsp;&nbsp;</i><strong>Team</strong></a></li>
+				<!-- Declare navigation button for FAQ. -->
+				<li><a href="#faq">&nbsp;&nbsp;<i class="fa fa-question-circle bukkit-darkgreen">&nbsp;&nbsp;</i><strong>FAQ</strong></a></li>
+
+			<!-- Close navigation menu. -->
+			</nav>
+
+		<!-- Close Header. -->
+		</header>
+
+		<!-- TODO: Refactor/Comment below this line -->
+		<section class="banner">
+			<div class="background-image" style="background-image: url(assets/images/galaxy-background.png);"></div>
+			<p class="simple-highlight bukkit-green">The <a href="https://github.com/true-og/true-og/">Open Source</a>,</p>
+			<p class="simple-highlight bukkit-blue">Community-First,</p>
+			<p><span class="simple-highlight bukkit-dark-red"><u>&nbsp;OG</u></span><span class="simple-highlight bukkit-gold">&nbsp;&nbsp;Minecraft Experience!&nbsp;</span></p>
+    		<h5 style="font-family: minecraft; text-shadow: 3px 3px 1px black; padding-top: 20px;" class="bukkit-blue">
+    		<?php
+    			$waiting_day = 1686837600;
+    			$time_left = $waiting_day - time();
+
+    			$days = floor($time_left / (60*60*24));
+    			$time_left %= (60 * 60 * 24);
+
+    			$hours = floor($time_left / (60 * 60));
+    			$time_left %= (60 * 60);
+
+    			$min = floor($time_left / 60);
+    			$time_left %= 60;
+
+    			echo "$days days, $hours hours, and $min minutes until soft launch.";
+    		?>
+    		</h5>
+
+			<a style="text-decoration:none; font-size: 3.5vw; color: #738ADB; margin-top: 8%; text-shadow: 0px 0px 30px white, 0 2px 0 white;" href="https://discord.gg/ma9pMYpBU6">&nbsp;JOIN DISCORD&nbsp;</a>
+		</section>
+
+		<div class="games" id="smp">
+			<div class="box">
+				<div class="flex-child grid outlined">
+					<h1 style="color: white; text-align: center"><i class="fa fa-cubes bukkit-darkgreen"></i>&nbsp;The <span class="bukkit-darkgreen">True</span><span class="bukkit-dark-red">OG</span> SMP:</h1>
+					<p style="color: white; font-size: 2.5vh; padding: 0vh"><br>Our biggest and best gamemode, the SMP is where it all began. <span class="bukkit-darkgreen">True</span><span class="bukkit-dark-red">OG</span>'s founders were once players on a server which announced a map reset and a general shift away from the "OG" gameplay meta.<br><br>We revolted against their bad choices by buying the map, splitting from the original server, and making the worlds into our own. We rebuilt the old SMP's features from the ground up, fixing many bugs, opening up the code to the community, and enhancing the experience wherever possible.<br><br>Our SMP has grown into its own, preserving the incredible history of the original worlds, enabling a unique, yet familiar meta that evokes memories of 2011-2013 community-run SMP servers.</p>
+				</div>
+			</div>
+			<div class="box">
+				<div class="flex-child large grid zoomedout roundedcorners" style="filter: drop-shadow(0 0 0.3rem #FFAA00); background-image: url(assets/images/smp-banner-two.png)"></div>
+				<div class="flex-child small grid splitter outlined">
+					<h2 style="color: white; text-align: center"><strong class="bukkit-gold">The "OG" Meta:</strong></h2>
+					<p class="bukkit-gold" style="font-size: 2.5vh"><br>OG means more to us than "not being pay-to-win". OG is about maintaining and building upon what we loved about SMP servers back in the day. A simple, robust economy. Competative, fast-paced PvP. Worlds that become richer and more fun to explore as the versions go by, giving players a sense of deep time and community. The <span class="bukkit-darkgreen">True</span><span class="bukkit-red">OG</span> Meta is more "OG" than OG:SMP and more anarchistic than anarchy. Here, you are truly free to play however you want, on a fair playing field. No bots. No hacks. There's nothing quite like it in Minecraft, or any other game for that matter.</p>
+				</div>
+			</div>
+			<div class="box">
+				<div class="flex-child small grid splitter bukkit-red outlined">
+					<h2 style="text-align: center"><strong>Great on 1.8:</strong></h2>
+					<p style="font-size: 2.5vh"><br>Unlike some other servers, we don't believe in leaving our loyal players in the dust with no support. There are good reasons many people continue to use Minecraft 1.8. From performance, to combat, to mods. If you are one of them, welcome home! Here you will experience being treated like a first class citizen. We have working fishing rods, ladders, lily pads, and brewing stands. All potions work on 1.8 at their correct durations. Builds at spawn have been optimized for 1.8 block appearance. You can even craft enchanted golden apples!</p>
+				</div>
+				<div class="flex-child large grid zoomedout roundedcorners" style="filter: drop-shadow(0 0 0.3rem #FF5555); background-image: url(assets/images/smp-banner-five.png)"></div>
+			</div>
+		</div>
+
+		<!-- <div class="games" id="duels">
+			<div class="box">
+				<div class="flex-child grid outlined">
+					<h1 style="color: white; text-align: center"><i class="fa fa-heartbeat bukkit-dark-red"></i>&nbsp;<span class="bukkit-darkgreen">True</span><span class="bukkit-dark-red">OG</span> Duels:</h1>
+					<p style="color: white; font-size: 2.5vh; padding: 0vh"><br>A long-requested feature of the Season 1 community, <span class="bukkit-darkgreen">True</span><span class="bukkit-red">OG</span> Duels allow you to challenge anyone to a fight without risking your gear, experience, or SMP stats. Duel stats are tracked in an entirely seperate system called <a href="https://dotesports.com/general/news/elo-ratings-explained-20565" target="_blank" class="bukkit-blue">ELO</a>.<br><br>All duels take place using glorious 1.8 PVP! You will be equipped with golden apples, ender pearls, a variety of potions, and weapons/armor according to your kit selections. You can cycle through a random arena, or pick your favorite from over a dozen custom builds. If you are feeling confident, you can even duel for Diamonds!</p>
+				</div>
+			</div>
+			<div class="container bukkit-green" style="margin-bottom: 2vh; filter: drop-shadow(0 0 0.3rem black);">
+				<img src="assets/images/Atlantis.png" class="image-item zoomedout roundedcorners" alt="Atlantis">
+				<span class="overlay">Atlantis</span>
+				<img src="assets/images/Blizzard.png" class="image-item zoomedout roundedcorners" alt="Blizzard">
+				<div class="overlay"><span>Blizzard</span></div>
+				<img src="assets/images/Castle.png" class="image-item zoomedout roundedcorners" alt="Castle">
+				<div class="overlay"><span>Castle</span></div>
+				<img src="assets/images/Cave.png" class="image-item zoomedout roundedcorners" alt="Cave">
+				<div class="overlay"><span>Cave</span></div>
+				<img src="assets/images/Colosseum.png" class="image-item zoomedout roundedcorners" alt="Colosseum">
+				<div class="overlay"><span>Colosseum</span></div>
+				<img src="assets/images/Ender.png" class="image-item zoomedout roundedcorners" alt="Ender">
+				<div class="overlay"><span>Ender</span></div>
+				<img src="assets/images/Frozone.png" class="image-item zoomedout roundedcorners" alt="Frozone">
+				<div class="overlay"><span>Frozone</span></div>
+				<img src="assets/images/Fungi.png" class="image-item zoomedout roundedcorners" alt="Fungi">
+				<div class="overlay"><span>Fungi</span></div>
+				<img src="assets/images/Hell.png" class="image-item zoomedout roundedcorners" alt="Hell">
+				<div class="overlay"><span>Hell</span></div>
+				<img src="assets/images/Olympus.png" class="image-item zoomedout roundedcorners" alt="Olympus">
+				<div class="overlay"><span>Olympus</span></div>
+				<img src="assets/images/Sewer.png" class="image-item zoomedout roundedcorners" alt="Sewer">
+				<div class="overlay"><span>Sewer</span></div>
+			</div>
+		</div>-->
+
+		<footer>
+			<ul>
+				<li><a href="https://github.com/true-og/website/" target="_blank"><i class="fa fa-github-square"></i></a></li>
+				<li><a href="https://www.facebook.com/people/True-OG/100076093982787/" target="_blank"><i class="fa fa-facebook-square"></i></a></li>
+				<li><a href="https://twitter.com/TrueOGSMP/" target="_blank"><i class="fa fa-twitter-square"></i></a></li>
+			</ul>
+			<p><a href="https://shop.trueg.net/" target="_blank">Donation Store</a></p>
+			<p><br>Forked From <a href="https://tutorialzine.com/2016/06/freebie-landing-page-template-with-flexbox/" target="_blank">tutorialzine</a> under an<a href="https://tutorialzine.com/license/" target="_blank"> Open Source License</a><br><br></p>
+			<p><a href="https://questioncopyright.org/understanding-free-content/" target="_blank">
+			<img src="assets/images/logos/Anti-copyright.svg" style="width: 50px" alt="Anti-Copyright Logo"></a>
+			&nbsp;<a href="https://iww.org/" target="_blank">
+			<img src="assets/images/logos/iww.png" style="width: 48px" alt="IWW Union Logo"</a></a>
+			<p class="bukkit-blue"><br>Ad astra per aspera</p></span>
+		</footer>
+
+		<a href="#" class="top"><i class="fa fa-arrow-circle-o-up"></i></a>
+
+	</body>
+
+</html>
@@ -0,0 +1,687 @@
+/*-------------
+ 	General Section:
+-------------*/
+
+@font-face {
+
+font-family: minecraft;
+    src:
+        url('assets/fonts/minecraft.woff2') format('woff2'),
+        url('assets/fonts/minecraft.woff') format('woff'),
+        url('assets/fonts/minecraft.ttf') format('truetype');
+
+}
+
+*{
+
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+
+}
+
+body {
+
+	font-family: minecraft;
+	background-color: black;
+
+}
+
+.top {
+
+  --offset: 50px; 
+  position: sticky;
+  bottom: 1%;
+  left: 96%;
+  margin-top: calc(100vh + var(--offset));
+  padding: 10px;
+  width: 35px;
+  background: #AA00AA;
+  border-radius: 35px;
+  font-size: 35px;
+  text-decoration: none;
+  text-align: right;
+  color: white;
+  white-space: nowrap;
+  opacity: 85%;
+
+}
+
+ul, nav {
+
+	list-style: none;
+
+}
+
+a {
+
+	text-decoration: none;
+	color: inherit;
+	cursor: pointer;
+	opacity: 0.9;
+
+}
+
+a:hover {
+
+	opacity: 1.0;
+	cursor: hand;
+
+}
+
+a.btn {
+
+	color: white;
+	border-radius: 4px;
+	background-color: #2196F3;
+	font-weight: 800;
+	text-align: center;
+
+}
+
+section {
+
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	padding: 62.5px 50px;
+
+}
+
+@media (max-width: 1000px) {
+
+	section {
+
+		padding: 50px 25px;
+
+	}
+
+}
+
+@media (max-width: 600px) {
+
+	section {
+
+		padding: 40px 15px;
+
+	}
+
+}
+
+section p {
+
+	max-width: 800px;
+	text-align: center;
+	margin-bottom: 17.5px;
+	padding: 0 20px;
+
+}
+
+/* Outlines text with a white border to make it more visible */
+.outlined {
+
+	text-shadow: 0px 2px black;
+
+}
+
+/* Rounds the corners of images */
+.roundedcorners {
+
+	border-radius: 15px;
+
+}
+
+/* Make images appear at 100% zoom in responsive contexts */
+.zoomedout {
+
+	background-repeat: no-repeat;
+	background-position: center center;
+	-webkit-background-size: cover;
+	-moz-background-size: cover;
+	-o-background-size: cover;
+	background-size: cover;
+
+}
+
+/*-------------
+ 	Header Section:
+-------------*/
+
+header {
+
+	position: absolute;
+	top: 0;
+	z-index: 10;
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	color: #FFFFFF;
+	padding-right: 3vh;
+	padding-bottom: 5vh;
+
+}
+
+header nav {
+
+	display: flex;
+	text-align: center;
+	font-size: 3vh;
+
+}
+
+header nav li {
+
+	margin: 0 2vh;
+	line-height: 5vh;
+
+}
+
+header nav li:first-child {
+
+	margin-left: 0;
+
+}
+
+header nav li:last-child {
+
+	margin-right: 0;	
+
+}
+
+@media (max-width: 1000px) {
+
+	header {
+
+		padding: 20px 30px;
+
+	}
+
+}
+
+@media (max-width: 700px) {
+
+	header {
+
+		flex-direction: column;
+
+	}
+
+	header h2 {
+
+		margin-bottom: 15px;
+
+	}
+
+}
+
+.main-logo {
+
+	max-width: 25%;
+	display: inline-block;
+	padding-left: 5%;
+
+}
+
+/*----------------
+ 	Flexbox Layout Section:
+----------------*/
+
+.box {
+
+    height: auto;
+	display: flex;
+	margin: 2%;
+	margin-left: 12%;
+	margin-right: 12%;
+
+}
+
+.flex-child {
+
+    flex: 1;
+    flex-wrap: wrap;
+
+}
+
+.splitter {
+
+    margin: 3%;
+
+}
+
+/*----------------
+ 	banner Section:
+----------------*/
+
+.banner {
+
+	position: relative;
+	justify-content: center;
+	min-height: 100vh;
+	text-align: center;
+	font-size: 45px;
+	text-shadow: 0 1px 0 #FFFFFF, 0 3px 0 #FFFFFF, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15);
+	padding: 3em 0;
+
+}
+
+.banner .background-image {
+
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-size: cover;
+	z-index: -1;
+
+}
+
+.banner .background-image:after {
+
+	content: '';
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	opacity: 0.15;
+
+}
+
+.simple-highlight {
+
+	background-color: #20202080;
+	margin: 8px, 8px, 4px, 4px;
+
+}
+
+@media (max-width: 800px) {
+
+	.hero {
+
+		min-height: 600px;
+
+	}
+
+}
+
+/*--------------------
+ 	Games Section:
+---------------------*/
+
+#smp {
+
+		background-image: url(assets/images/smp-banner-one.png);
+		background-size: cover;
+
+}
+
+#duels {
+
+		background-image: url(assets/images/smp-banner-six.png);
+		background-size: cover;
+
+}
+
+.container {
+
+	display: flex;
+	flex-wrap: wrap;
+	padding: 5%;
+	width: 40%;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+
+}
+
+.games {
+
+	display: flex;
+	flex-wrap: wrap;
+
+}
+
+.grid div {
+
+	padding: 10px;
+	height: 350px;
+	border-radius: 3px;
+	background-clip: content-box;
+	background-size: cover;
+	background-position: center;
+
+}
+
+.games .grid div.small {
+
+	flex-basis: 40%;
+
+}
+
+.games .grid div large {
+
+	flex-basis: 60%;
+
+}
+
+
+@media (max-width: 1000px) {
+
+	.games .grid div small,
+	.games .grid div.large {
+
+		flex-basis: 100%;
+
+	}
+
+}
+
+/*----------------------
+ 	Features Section:
+----------------------*/
+
+.features {
+
+	background-color: #f7f7f7;
+
+}
+
+.features .grid nav {
+
+	flex-basis: 33%;
+	text-align: center;
+
+}
+
+.features .grid nav i {
+
+    font-size: 50px;
+    color: #2196F3;
+    margin-bottom: 25px;
+
+}
+
+.features .grid nav h4 {
+
+	color: #555;
+    font-size: 20px;
+    margin-bottom: 25px;
+
+}
+
+.features .grid li p {
+
+    margin: 0;
+
+}
+
+@media (max-width: 1000px) {
+
+	.features .grid li {
+
+		flex-basis: 70%;
+		margin-bottom: 65px;
+
+	}
+
+	.features .grid li:last-child {
+
+		margin-bottom: 0;
+
+	}
+
+}
+
+
+@media (max-width: 600px) {
+
+	.features .grid li {
+
+		flex-basis: 100%;
+
+	}
+
+}
+
+/*--------------------
+ 	Reviews Section:
+--------------------*/
+
+.reviews {
+
+	background-color: #FFFFFF;
+
+}
+
+.reviews .quote{
+
+	text-align: center;
+	width: 80%;
+    font-size: 22px;
+    font-weight: 300;
+    line-height: 1.5;
+    margin-bottom: 20px;
+    padding: 0;
+
+}
+
+.reviews .author{
+
+    font-size: 18px;
+    margin-bottom: 50px;
+
+}
+
+.reviews .author:last-child{
+
+    margin-bottom: 0;
+
+}
+
+@media (max-width: 1000px) {
+
+	.reviews .quote{
+
+		font-size: 20px;
+
+	}
+
+	.reviews .author{
+
+	    font-size: 16px;
+
+	}
+
+}
+
+/*---------------------
+ 	Contact Section:
+---------------------*/
+
+.contact {
+
+	background-color: #f7f7f7;
+
+}
+
+.contact form {
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-wrap: wrap;
+	max-width: 800px;
+	width: 80%;
+
+}
+
+.contact form input {
+
+	padding: 15px;
+	flex: 1;
+	margin-right: 30px;
+	font-size: 18px;
+	color: #555;
+
+}
+
+.contact form .btn{
+
+	padding: 18px 42px;
+
+}
+
+
+@media (max-width: 800px) {
+
+	.contact form input {
+
+		flex-basis: 100%;
+		margin: 0 0 20px 0;
+
+	}
+
+}
+
+/*-------------
+ 	Footer Section:
+-------------*/
+
+footer {
+
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	text-align: center;
+	color: white;
+	background-color: black;
+	padding: 60px 0;
+
+}
+
+footer ul {
+
+	display: flex;
+	margin-bottom: 25px;
+	font-size: 32px;
+
+}
+
+footer ul li {
+
+	margin: 0 8px;
+
+}
+
+footer ul li:first-child {
+
+	margin-left: 0;
+
+}
+
+footer ul li:last-child {
+
+	margin-right: 0;	
+
+}
+
+footer p {
+
+	text-transform: uppercase;
+	font-size: 14px;
+	color: rgba(255,255,255,0.6);
+	margin-bottom: 10px;
+
+}
+
+footer p a {
+
+	color: #FFFFFF;
+
+}
+
+@media (max-width: 700px) {
+
+	footer {
+
+		padding: 80px 15px;
+
+	}
+
+}
+
+/*----------------
+ 	Color Section:
+----------------*/
+
+/* Minecraft color code "Dark Blue" (&1) */
+.bukkit-darkblue {
+
+	color: #0000AA;
+
+}
+.bukkit-darkblue {
+
+	background-color: #0000AA;
+
+}
+
+/* Minecraft color code "Gold" (&6) */
+.bukkit-gold {
+
+	color: #FFAA00;
+
+}
+
+/* Minecraft color code "Aqua" (&b) */
+.bukkit-blue {
+
+	color: #55FFFF;
+
+}
+
+/* Minecraft color code "Dark Red" (&4) */
+.bukkit-dark-red {
+
+	color: #AA0000;
+
+}
+
+/* Minecraft color code "Dark Green" (&2) */
+.bukkit-darkgreen {
+
+	color: #00AA00;
+
+}
+
+/* Minecraft color code "Green" (&a) */
+.bukkit-green {
+
+	color: #55FF55;
+
+}
+
+/* Minecraft color code "Dark Purple" (&5) */
+.bukkit-dark-purple {
+
+	color: #AA00AA;
+
+}
+
+
+/* Minecraft color code "Red" (&c) */
+.bukkit-red {
+
+	color: #FF5555;
+
+}
+
+/* The color used in the discord logo */
+.discord-blue {
+
+	color: #738ADB;
+
+}