Initial commit

HTML/FiveM/assets/components/footer/index.html

@@ -0,0 +1,25 @@
+<link rel="stylesheet" type="text/css" href="/assets/components/footer/style.css">
+
+<footer class="footer">
+    <div class="footer_buttons">
+        <input type="button" value="Startseite" id="https://princep.de/">
+        <input type="button" value="Regeln" id="https://princep.de/rules">
+        <input type="button" value="Autos" id="https://princep.de/cars">
+        <input type="button" value="Team" id="https://princep.de/team">
+    </div>
+    <div class="footer_content">
+        <div class="footer_info">
+            <h1>Was ist Princep</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid dolores dolorum earum error facilis, ipsum officiis pariatur quos sequi tenetur. Beatae cupiditate deleniti ea error ex inventore iure, quod veniam!
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium exercitationem ipsam magni necessitatibus nesciunt nihil non voluptas voluptatum! Animi aperiam commodi dignissimos eveniet fugiat optio quis ratione reiciendis sed sunt.
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias architecto, assumenda consequatur enim perferendis quisquam repudiandae! A deleniti eius error itaque laborum libero, nobis perferendis quaerat repellendus repudiandae ut vel!
+            </p>
+        </div>
+        <div class="footer_links">
+            <a href="https://discord.com/invite/6rMgNTa5" target="_blank" rel="noopener noreferrer">Discord</a><br>
+            <a href="https://cfx.re/join/dyklgj" target="_blank" rel="noopener noreferrer">Zum Server verbinden</a><br>
+            <a href="ts3server://princep.de:9987">Teamspeak</a>
+        </div>
+    </div>
+</footer>

HTML/FiveM/assets/components/footer/script.ts

@@ -0,0 +1,6 @@
+const footer_buttons = document.getElementsByClassName("footer_buttons")[0].children as HTMLCollectionOf<HTMLInputElement>;
+for (let button of footer_buttons) {
+    button.onclick = () => {
+        location.href = button.id;
+    }
+}

HTML/FiveM/assets/components/footer/style.css

@@ -0,0 +1,61 @@
+.footer {
+    width: 100%;
+    height: 200px;
+    background-color: var(--darker);
+    color: var(--light);
+    overflow: hidden;
+}
+
+.footer_buttons {
+    width: 100%;
+    height: 50px;
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+}
+
+.footer_buttons input {
+    width: 150px;
+    height: 40px;
+    margin: 5px 20px;
+    color: var(--light);
+    background: none;
+    border: 2px var(--light) solid;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 15px;
+    transition: 200ms;
+}
+
+.footer_buttons input:hover {
+    background: var(--light);
+    color: var(--dark);
+}
+
+.footer_content {
+    width: 100%;
+    height: 140px;
+}
+
+.footer_info {
+    float: left;
+    height: 100%;
+    width: 80%;
+    padding: 10px;
+    overflow: hidden;
+}
+
+.footer_links {
+    float: right;
+    height: 100%;
+    width: 20%;
+}
+
+.footer_links a {
+    text-align: center;
+    text-decoration: none;
+    color: inherit;
+    margin: auto;
+    display: block;
+    cursor: pointer;
+}