diff --git a/README.md b/README.md
index ffe3ab1..ca3e8c3 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,11 @@
-# RXHomepage
+# RedXen Homepage
+
+## What is this?
+
+Well, nothing special...
+This is just the homepage i use for the community i am running [here](http://redxen.dynu.net)
+
+## Why do i host it on GitHub?
+
+If anyone wants to contribute, see my code practices or something similar, then here it is.
+It is also easier to check on something or manage changes.
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..91c38dd
--- /dev/null
+++ b/index.html
@@ -0,0 +1,70 @@
+
+
+
+
About us
+
+ We are a small community of gamers that play the same games and enjoy the same things!
+
+
Updates
+
+ 10 May - Adapted the homepage to almost all viewports
+ 6 May - Got a new homepage! The one you are on now
+ 1 May - Discord revamp with new channels, categories and roles
+
+
Servers
+
+ Currently planning on hosting servers for some games but our bandwidth doesn't allow it for now.
+ In the near future we will get better bandwidth.
+ The approx. number of players that wouldn't impact performance would be ~ 5 players.
+ That amount is too low for a server.
+
+
Current Staff
+
+ Owner: casKd
+ Administrator: Davids_Trains
+ Super-Moderator: McDonlad
+ Moderators: ChuppaChupps & Korato
+
+
Current Setup
+
+ Our current server setup consists of:
+ Intel i3-2100
+ 6GB DDR3 RAM
+ 220 KB/s upload speed
+ 830 KB/s download speed
+ Our forum powered by Discourse
+ Cloud service powered by Nextcloud
+ All running through nginx reverse proxy
+
+
+
+
+
\ No newline at end of file
diff --git a/res/stylesheet-min.css b/res/stylesheet-min.css
new file mode 100644
index 0000000..540ea3b
--- /dev/null
+++ b/res/stylesheet-min.css
@@ -0,0 +1,156 @@
+/*Root*/
+:root {
+ background-color: rgb(110, 0, 0);
+ height: 100%;
+}
+
+/*Top bar settings*/
+#box {
+ background: linear-gradient(to left, rgb(220, 0, 0), rgb(170, 0, 0));
+ width: 100%;
+ height: 60px;
+ position: fixed;
+ top: 0;
+ left: 0;
+ transition: ease-in-out 400ms;
+ z-index: 2;
+}
+#box:hover #title {
+ height: 40px;
+ transition: ease-in-out 200ms;
+ line-height: 40px;
+}
+#box:hover > #links-top a {
+ padding-top: 10px;
+ padding-bottom: 10px;
+ opacity: 1;
+}
+#box:hover ~ #content {
+ top: 80px;
+ transition: ease-in-out 300ms;
+}
+#box:hover {
+ height: 80px;
+ transition: ease-in-out 300ms;
+}
+
+/*Links in top bar*/
+#links-top {
+ top: 0;
+ position: absolute;
+ text-align: center;
+ width: 100%;
+ height: auto;
+ background-color: rgba(0, 0, 0, 0.4);
+ transition: ease-in-out 300ms;
+}
+#links-top a {
+ text-decoration: none;
+ color: #fff;
+ padding-top: 5px;
+ padding-bottom: 5px;
+ font-family: 'Quicksand', sans-serif;
+ font-size: 20px;
+ display: inline-block;
+ transition: ease-in-out 200ms;
+ padding-right: 5px;
+ padding-left: 5px;
+ opacity: 0.6;
+}
+#links-top a:hover {
+ color: rgb(200,0,50);
+ padding-right: 20px;
+ padding-left: 20px;
+ transition: ease-in-out 200ms;
+}
+
+/*Title Bar*/
+#title {
+ font-family: 'Abel', sans-serif;
+ font-size: 20px;
+ line-height: 30px;
+ bottom: 0;
+ width: 100%;
+ left: 0;
+ height: 30px;
+ display: block;
+ text-align: center;
+ position: absolute;
+ color: #fff;
+ transition: ease-in-out 200ms;
+}
+
+/*Page Content*/
+#content {
+ background-color: rgba(50,50,50,0.5);
+ color: #fff;
+ height: auto;
+ top: 60px;
+ width: 100%;
+ transition: ease-in-out 200ms;
+ position: absolute;
+ z-index: 0;
+ left: 0;
+ text-align: center;
+ vertical-align: middle;
+ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+}
+#content:hover {
+ background-color: rgba(200,200,200,0.8);
+ color: #000;
+}
+
+/*Content types*/
+.subtitle {
+ font-size: 14px;
+ line-height: 22px;
+ width: 100%;
+ color: #fff;
+ height: 22px;
+ background-color: rgba(0, 0, 0, 0.4);
+ font-family: 'Glegoo', serif;
+ transition: ease-in-out 300ms;
+}
+.subtitle:hover {
+ height: 30px;
+ line-height: 30px;
+ transition: ease-in-out 200ms;
+ background-color: rgba(0, 0, 0, 0.8);
+ color: rgb(200,0,50);
+}
+.text {
+ font-size: 10px;
+ line-height: 12px;
+ font-family: 'Quicksand', sans-serif;
+ transition: ease-in-out 150ms;
+}
+
+/*Footer Settings*/
+#footer {
+ font-family: 'Quicksand', sans-serif;
+ width: 100%;
+ height: auto;
+ background-color: rgba(0, 0, 0, 0.4);
+ color: #fff;
+ font-size: 14px;
+ line-height: 24px;
+ transition: ease-in-out 200ms;
+}
+#footer:hover {
+ transition: ease-in-out 300ms;
+ line-height: 30px;
+ background-color: rgba(0, 0, 0, 0.8);
+}
+#footer a {
+ text-decoration: none;
+ color: #fff;
+ padding-right: 5px;
+ padding-left: 5px;
+ transition: ease-in-out 300ms;
+}
+#footer a:hover {
+ color: rgb(200,0,50);
+ padding-right: 20px;
+ padding-left: 20px;
+ transition: ease-in-out 200ms;
+}
\ No newline at end of file
diff --git a/res/stylesheet.css b/res/stylesheet.css
new file mode 100644
index 0000000..961e656
--- /dev/null
+++ b/res/stylesheet.css
@@ -0,0 +1,170 @@
+/*Root*/
+:root {
+ background-color: rgb(110, 0, 0);
+ background-image: url('https://s14.postimg.cc/6ge0ofcrl/image.jpg');
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-attachment: fixed;
+ background-position: center;
+ height: 100%;
+}
+
+/*Top bar settings*/
+#box {
+ background: linear-gradient(to left, rgb(220, 0, 0), rgb(170, 0, 0));
+ width: 100%;
+ height: 80px;
+ position: fixed;
+ top: 0;
+ left: 0;
+ transition: ease-in-out 400ms;
+ z-index: 2;
+}
+#box:hover > #links-top a {
+ font-size: 150%;
+ padding-top: 10px;
+ padding-bottom: 10px;
+ opacity: 1;
+}
+#box:hover ~ #content {
+ top: 120px;
+ transition: ease-in-out 300ms;
+}
+#box:hover {
+ height: 120px;
+ transition: ease-in-out 300ms;
+}
+
+/*Links in top bar*/
+#links-top {
+ top: 0;
+ position: absolute;
+ text-align: center;
+ width: 100%;
+ height: auto;
+ background-color: rgba(0, 0, 0, 0.4);
+ transition: ease-in-out 300ms;
+}
+#links-top a {
+ text-decoration: none;
+ color: #fff;
+ padding-top: 5px;
+ padding-bottom: 5px;
+ font-family: 'Quicksand', sans-serif;
+ font-size: 16px;
+ display: inline-block;
+ transition: ease-in-out 200ms;
+ padding-right: 5px;
+ padding-left: 5px;
+ opacity: 0.6;
+}
+#links-top a:hover {
+ color: rgb(200,0,50);
+ padding-right: 20px;
+ padding-left: 20px;
+ transition: ease-in-out 200ms;
+}
+
+/*Title Bar*/
+#title {
+ font-family: 'Abel', sans-serif;
+ font-size: 30px;
+ line-height: 40px;
+ bottom: 0;
+ width: 80%;
+ left: 10%;
+ height: 40px;
+ display: block;
+ text-align: center;
+ position: absolute;
+ background-color: rgba(0,0,0,0.2);
+ color: #fff;
+ border-top-right-radius: 5px;
+ border-top-left-radius: 5px;
+ transition: ease-in-out 200ms;
+}
+#title:hover {
+ background-color: rgba(255,255,255,0.8);
+ transition: ease-in-out 200ms;
+ color: #000;
+ height: 50px;
+ line-height: 50px;
+}
+
+/*Page Content*/
+#content {
+ background-color: rgba(50,50,50,0.5);
+ color: #fff;
+ height: auto;
+ top: 80px;
+ width: 80%;
+ transition: ease-in-out 200ms;
+ position: absolute;
+ left: 10%;
+ z-index: 0;
+ text-align: center;
+ vertical-align: middle;
+ border-bottom-left-radius: 5px;
+ border-bottom-right-radius: 5px;
+ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+}
+#content:hover {
+ background-color: rgba(200,200,200,0.8);
+ color: #000;
+}
+
+/*Content types*/
+.subtitle {
+ font-size: 20px;
+ line-height: 40px;
+ width: 100%;
+ color: #fff;
+ height: 40px;
+ background-color: rgba(0, 0, 0, 0.4);
+ font-family: 'Glegoo', serif;
+ transition: ease-in-out 300ms;
+}
+.subtitle:hover {
+ height: 50px;
+ line-height: 50px;
+ transition: ease-in-out 200ms;
+ background-color: rgba(0, 0, 0, 0.8);
+ color: rgb(200,0,50);
+}
+.text {
+ font-size: 12px;
+ line-height: 18px;
+ font-family: 'Quicksand', sans-serif;
+ transition: ease-in-out 150ms;
+}
+/*Footer Settings*/
+#footer {
+ font-family: 'Quicksand', sans-serif;
+ width: 100%;
+ height: auto;
+ border-bottom-left-radius: 5px;
+ border-bottom-right-radius: 5px;
+ background-color: rgba(0, 0, 0, 0.4);
+ color: #fff;
+ font-size: 24px;
+ line-height: 40px;
+ transition: ease-in-out 200ms;
+}
+#footer:hover {
+ transition: ease-in-out 300ms;
+ line-height: 60px;
+ background-color: rgba(0, 0, 0, 0.8);
+}
+#footer a {
+ text-decoration: none;
+ color: #fff;
+ padding-right: 5px;
+ padding-left: 5px;
+ transition: ease-in-out 300ms;
+}
+#footer a:hover {
+ color: rgb(200,0,50);
+ padding-right: 20px;
+ padding-left: 20px;
+ transition: ease-in-out 200ms;
+}
\ No newline at end of file
diff --git a/res/window.js b/res/window.js
new file mode 100644
index 0000000..764d3f4
--- /dev/null
+++ b/res/window.js
@@ -0,0 +1,8 @@
+$(window).on ("load resize", function() {
+ if ($(window).width() < 720) {
+ $('#style').attr('href','res/stylesheet-min.css');
+ }
+ else {
+ $('#style').attr('href','res/stylesheet.css');
+ }
+});
\ No newline at end of file