Initial commit

HTML/FiveM/style.css

@@ -0,0 +1,209 @@
+#serverInfo {
+    position: relative;
+    height: 30px;
+    margin-bottom: 5px;
+}
+
+#serverInfo span {
+    font-size: 15px;
+    color: var(--light);
+}
+
+#players {
+    position: absolute;
+    top: 50%;
+    left: 5px;
+    transform: translate(0, -50%);
+    width: max-content;
+}
+
+#servername {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: max-content;
+    text-decoration: none;
+    cursor: pointer;
+    color: var(--light);
+}
+
+#serverStatus {
+    position: absolute;
+    top: 50%;
+    left: calc(100% - 20px);
+    transform: translate(-100%, -50%);
+    width: max-content;
+}
+
+#whatIsPrincep {
+    height: max-content;
+    padding: 20px 50px 20px 20px;
+    color: var(--light);
+}
+
+#diashow {
+    height: 1000px;
+    padding: 5px;
+}
+
+.slides {
+    display: none;
+    height: 100%;
+    width: auto;
+    margin: auto;
+}
+
+.animate {
+    position: relative;
+    animation: diashowAnimation 16s;
+}
+
+@keyframes diashowAnimation {
+    0% {
+        left: -500px;
+        opacity: 0;
+    }
+    5% {
+        left: 0;
+        opacity: 1;
+    }
+    45% {
+        left: 0;
+        opacity: 1;
+    }
+    50% {
+        left: 500px;
+        opacity: 0;
+        display: none;
+    }
+    100% {
+        left: 500px;
+        opacity: 0;
+        display: none;
+    }
+}
+
+#jobs {
+    margin-top: 50px;
+    position: relative;
+    height: 500px;
+    color: var(--light);
+}
+
+#jobs h2 {
+    width: 100%;
+    text-align: center;
+}
+
+.jobs {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.jobs div {
+    position: relative;
+    box-sizing: border-box;
+    border: 1px grey solid;
+    width: 300px;
+    height: 200px;
+    transition: 100ms;
+    user-select: none;
+    margin: auto;
+    overflow: visible;
+}
+
+.jobs img {
+    position: absolute;
+    height: 25%;
+    width: auto;
+    top: 40%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    transition: 500ms ease-in-out;
+    background: var(--dark);
+}
+
+.jobs h1 {
+    position: absolute;
+    text-align: center;
+    text-transform: uppercase;
+    top: 75%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    transition: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
+    font-size: 20px;
+}
+
+.jobs span {
+    position: absolute;
+    width: 80%;
+    height: max-content;
+    opacity: 0;
+    top: 70%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(0, 0);
+    transition: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
+    font-size: 11px;
+    overflow: hidden;
+}
+
+.jobs div:hover {
+    border-color: var(--red);
+    transform: scale(1.5);
+}
+
+.jobs div:hover img {
+    top: 0;
+}
+
+.jobs div:hover h1 {
+    top: 30%;
+}
+
+.jobs div:hover span {
+    opacity: 100;
+    transform: translate(-50%, -50%) scale(1, 1);
+}
+
+#changelogDiscord {
+    height: 800px;
+    overflow: hidden;
+}
+
+#changelog {
+    float: left;
+    height: 100%;
+    width: calc(100% - 500px);
+    padding: 20px;
+    color: var(--light);
+    overflow-y: scroll;
+}
+
+#changelog h2 {
+    text-decoration: underline;
+}
+
+.feature {
+    margin-bottom: 20px;
+}
+
+.features li {
+    margin-bottom: 5px;
+}
+
+#discord {
+    width: 500px;
+    float: right;
+}
+
+#discord iframe {
+    width: 100%;
+    height: 100%;
+}