full thing

public/colors.json

@@ -0,0 +1,9 @@
+{
+    "red": "#b50002",
+    "blue": "#2780cd",
+    "orange": "#cd7427",
+    "pink": "#c400ff",
+    "green": "#27cd3f",
+    "grey": "#23272A",
+    "light_blue": "#7289DA"
+}

public/footer.css

@@ -0,0 +1,83 @@
+footer {
+  background-color: var(--dark-grey);
+  width: 100%;
+  height: 200px;
+  justify-content: space-evenly;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.underFooter {
+  background-color: var(--dark-grey);
+  font-size: large;
+  text-align: center;
+}
+
+.footerItem {
+  width: 25%;
+  height: 150px;
+  margin-top: 25px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: x-large;
+  text-align: center;
+}
+
+.footerDiscordLogo {
+  margin-top: 40px;
+  width: 78.15px;
+  height: 56.225px;
+  background-image: url("./img/logos/discord.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.footerDiscordLogo a {
+  float: left;
+  text-align: center;
+  background-color: transparent;
+  color: transparent;
+  padding-left: 25px;
+  padding-right: 55px;
+  padding-bottom: 55px;
+}
+
+.footerGithubLogo {
+  margin-top: 10px;
+  width: 32px;
+  height: 32px;
+  background-image: url("./img/logos/github.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.footerGithubLogo a {
+  float: left;
+  text-align: center;
+  background-color: transparent;
+  color: transparent;
+  padding: 16px;
+}
+
+#footerInvite {
+  margin-top: 1.5cm;
+  width: 6cm;
+  height: 1cm;
+  border-radius: 20px;
+  background-color: var(--main-accent);
+  text-align: center;
+  transition: 0.3s;
+  border: none;
+}
+
+#footerInvite a {
+  font-size: x-large;
+  color: white;
+  text-shadow: 0 0 2px white;
+  text-decoration: none;
+  padding: 14px 16px;
+}

public/guide.css

@@ -0,0 +1,155 @@
+@import "./master.css";
+
+h1 {
+    text-align: center;
+    font-size: 2vw;
+    text-shadow: 0 0 5px white;
+    padding: 1rem;
+  }
+
+h2 {
+    text-align: center;
+    font-size: 1.5vw;
+    text-shadow: 0 0 5px white;
+    padding: 1rem;
+}
+
+img {
+    float: right;
+    margin-right: 2rem;
+    margin-left: 1rem;
+    box-shadow: 0 0 30px -5px black;
+}
+
+#large {
+    width: 60%;
+}
+
+#larger {
+    width: 50%;
+}
+
+#normal {
+    width: 40%;
+}
+
+#smaller {
+    width: 30%;
+}
+
+#small {
+    width: 20%;
+}
+
+#smallest {
+    width: 10%;
+}
+
+#tiny {
+    width: 5%;
+}
+
+a {
+    color: #0066ff;
+    text-decoration: none;
+}
+
+a:visited {
+    color: #0066ff;
+    text-decoration: none;
+}
+
+a:link {
+    color: #0066ff;
+    text-decoration: none;
+}
+
+a:active {
+    color: #0066ff;
+    text-decoration: none;
+}
+
+a:hover {
+    color: #0066ff;
+    text-decoration: underline;
+}
+
+.nav {
+    display: flex;
+    flex-direction: column;
+    background: var(--dark-grey);
+    width: auto;
+    padding: 1rem;
+    float: left;
+    flex-direction: column;
+    height: 100%;
+    position: fixed;
+}
+
+#nav-text {
+    float: left;
+    text-align: center;
+    padding: 14px 16px;
+    font-size: x-large;
+    text-shadow: 0 0 2px white;
+}
+
+.nav a {
+    transition: 0.4s;
+    float: left;
+    padding: 14px 16px;
+    font-size: x-large;
+    text-shadow: 0 0 2px white;
+}
+
+.nav a:visited {
+    color: rgb(255, 255, 255);
+    text-decoration: none;
+    background-color: transparent;
+}
+
+.nav a:link {
+    color: rgb(255, 255, 255);
+    text-decoration: none;
+    background-color: transparent;
+}
+
+.nav a:active {
+    color: rgb(255, 255, 255);
+    text-decoration: none;
+    background-color: transparent;
+}
+
+.nav a:hover {
+    transition: 0.4s;
+    color: rgb(255, 255, 255);
+    background-color: transparent;
+    text-decoration: underline;
+}
+
+.wrapper {
+    background-color: var(--dark-grey);
+    width: 75%;
+    height: auto;
+    margin-left: 23.5%;
+    margin-bottom: 2rem;
+    border-radius: 5rem;
+    box-shadow: 0 0 30px -5px black;
+    font-size: 1.5rem;
+}
+
+.text {
+    margin-left: 2rem;
+}
+
+#getting-started {
+    text-align: left;
+}
+
+#queue-management {
+    text-align: left;
+}
+
+#customizability {
+    text-align: left;
+}

public/main.css

@@ -0,0 +1,95 @@
+@import "./master.css";
+
+#phrase {
+  margin-left: 20%;
+  margin-top: 3cm;
+  margin-bottom: 6cm;
+  height: 150px;
+  width: 60%;
+  font-size: xx-large;
+}
+
+#logo {
+  background-image: url("./img/logos/musix_round.png");
+  display: block;
+  width: 128px;
+  height: 128px;
+  float: right;
+}
+
+#invite {
+  margin-top: 1cm;
+  margin-left: 5cm;
+  width: 6cm;
+  height: 1cm;
+  border-radius: 20px;
+  background-color: var(--light-blue);
+  text-align: center;
+  transition: 0.3s;
+  border: none;
+}
+
+#invite a {
+  font-size: x-large;
+  color: white;
+  text-shadow: 0 0 2px white;
+  text-decoration: none;
+  padding: 14px 16px;
+}
+
+#invite:hover {
+  transform: scale(1.2);
+}
+
+#wrapper {
+  margin-top: 1cm;
+  height: 500px;
+  background-image: url("./img/backgrouds/wave.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+#space {
+  height: 3cm;
+}
+
+#items {
+  margin-top: 25px;
+  height: 250px;
+  justify-content: space-evenly;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.item {
+  height: 250px;
+  width: 200px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 5px 25px;
+  font-size: x-large;
+  text-align: center;
+}
+
+@media (max-width: 1016px) {
+  #wrapper {
+    height: 700px;
+  }
+
+  #invite {
+    margin-left: 1cm;
+  }
+}
+
+@media (max-width: 516px) {
+  #wrapper {
+    height: 1200px;
+  }
+
+  #invite {
+    margin-left: 0cm;
+  }
+}

public/main.js

@@ -0,0 +1,11 @@
+getColors().then((colors) => {
+  if (document.URL.includes("/guide")) {
+    document.documentElement.style.setProperty("--main-accent", colors.green);
+  }
+});
+
+async function getColors() {
+  const res = await fetch("./public/colors.json");
+  const final = await res.json();
+  return final;
+}

public/master.css

@@ -0,0 +1,23 @@
+@import "./styling.css";
+
+body {
+  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
+  margin: 0;
+  background-image: url("./img/backgrouds/background.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  background-position: center;
+  height: auto;
+  color: white;
+}
+
+header h1 {
+  text-align: center;
+  font-size: 6vw;
+  text-shadow: 0 0 5px white;
+}
+
+.rounded-circle {
+  border-radius: 50% !important;
+}

public/misc.css

@@ -0,0 +1,15 @@
+@import "./master.css";
+
+#body {
+    width: 80%;
+    height: 100px;
+    margin-top: 10%;
+    margin-left: 10%;
+    margin-bottom: 50%;
+    text-align: center;
+    background-color: orange;
+    color: red;
+    font-size: xx-large;
+    border-radius: 10px;
+    box-shadow: 0 0 30px -5px orange;
+}

public/nav.css

@@ -0,0 +1,137 @@
+@import "./styling.css";
+
+#navLogo {
+  margin-top: 5px;
+  margin-left: 5px;
+  margin-right: 5px;
+  width: 40px;
+  height: 40px;
+  background-image: url("./img/logos/Musix_logo_round_small.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  float: left;
+}
+
+nav {
+  float: top;
+  background: linear-gradient(
+    135deg,
+    var(--dark-grey) 50%,
+    var(--main-accent) 100%
+  );
+  width: 100%;
+  height: 50px;
+  box-shadow: 0 0 30px -5px black;
+}
+
+nav a {
+  transition: 0.4s;
+  float: left;
+  padding: 14px 16px;
+  font-size: x-large;
+  text-shadow: 0 0 2px white;
+}
+
+nav a:visited {
+  color: rgb(255, 255, 255);
+  text-decoration: none;
+  background-color: transparent;
+}
+
+nav a:link {
+  color: rgb(255, 255, 255);
+  text-decoration: none;
+  background-color: transparent;
+}
+
+nav a:active {
+  color: rgb(255, 255, 255);
+  text-decoration: none;
+  background-color: transparent;
+}
+
+nav a:hover {
+  color: rgb(255, 255, 255);
+  background-color: transparent;
+  text-decoration: underline;
+  background-color: var(--main-accent);
+}
+
+#navLogo a:hover {
+  background-color: transparent;
+}
+
+.dropbtn {
+  font-size: x-large;
+  float: right;
+  background-color: transparent;
+  color: transparent;
+  border: none;
+}
+
+@media (max-width: 1000px) {
+  nav {
+    float: none;
+    width: none;
+    height: none;
+    overflow: hidden;
+  }
+
+  nav a {
+    float: left;
+    padding: 14px 16px;
+  }
+
+  .dropbtn {
+    text-shadow: 0 0 4px white;
+  }
+
+  .dropdown {
+    float: left;
+    overflow: hidden;
+  }
+
+  .dropdown .dropbtn {
+    font-size: 16px;
+    border: none;
+    outline: none;
+    color: white;
+    padding: 14px 16px;
+    background-color: inherit;
+    font-family: inherit;
+    margin: 0;
+  }
+
+  nav a:hover,
+  .dropdown:hover .dropbtn {
+    background-color: var(---main-accent);
+  }
+
+  .dropdown-content {
+    display: none;
+    position: absolute;
+    background-image: url("./img/backgrouds/background.png");
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+    z-index: 1;
+  }
+
+  .dropdown-content a {
+    float: none;
+    color: var(--main-grey);
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+    text-align: left;
+    transition: 0.4s;
+  }
+
+  .dropdown-content a:hover {
+    background-color: var(--main-accent);
+  }
+
+  .dropdown:hover .dropdown-content {
+    display: block;
+  }
+}

public/releases.css

@@ -0,0 +1,68 @@
+@import "./master.css";
+
+.release {
+    margin-top: 50px;
+    margin-left: 10%;
+    height: 200px;
+    width: 80%;
+}
+
+.release img {
+    height: 100px;
+    width: 100px;
+}
+
+.release h1 {
+    margin-top: -100px;
+    text-align: center;
+}
+
+.release h1 #stable {
+    color: rgb(0, 255, 0);
+}
+
+.release h1 #unstable {
+    color: rgb(255, 0, 0);
+}
+
+.release h1 #private {
+    color: rgb(0, 4, 255);
+}
+
+.release h1 #offline {
+    color: rgb(62, 62, 63);
+}
+
+.release h1 #verified {
+    color: var(--light-blue);
+}
+
+.release h2 {
+    text-align: center;
+}
+
+.release #invite {
+    text-align: center;
+}
+
+.release #invite button {
+    width: 6cm;
+    height: 1cm;
+    border-radius: 20px;
+    background-color: var(--light-blue);
+    text-align: center;
+    transition: 0.3s;
+    border: none;
+}
+
+.release #invite button a {
+    font-size: x-large;
+    color: white;
+    text-shadow: 0 0 2px white;
+    text-decoration: none;
+    padding: 14px 16px;
+}
+
+.release #invite button:hover {
+    transform: scale(1.1);
+}

public/styling.css

@@ -0,0 +1,5 @@
+:root {
+    --main-accent: #b50002;
+    --dark-grey: #23272A;
+    --light-blue: #7289DA;
+  }

public/table.css

@@ -0,0 +1,43 @@
+.table {
+    width: 100%;
+    max-width: 100%;
+    margin-bottom: 1rem;
+    background-color: transparent;
+}
+
+table {
+    border-collapse: collapse;
+}
+
+*,
+::after,
+::before {
+    box-sizing: border-box;
+}
+
+.row {
+    background-color: #fff;
+    color: #23272A;
+    flex-grow: 1;
+}
+
+tbody {
+    display: table-row-group;
+    vertical-align: middle;
+    border-color: inherit;
+}
+
+.table-striped tbody tr:nth-of-type(odd) {
+    background-color: rgba(0, 0, 0, .05);
+}
+
+table td,
+.table th {
+    padding: .75rem;
+    vertical-align: top;
+    border-top: 1px solid #dee2e6;
+}
+
+th {
+    text-align: inherit;
+}