Add index.html

MoonTM-GIT · web-flow · commit fbda1bbf9a82 · 2021-02-07T17:38:44.000+01:00
diff --git a/JavaDiscord/index.html b/JavaDiscord/index.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="description" content="With over 2,000 Members and 20,000 Messages sent each month, join one of the biggest Java Communities to help, get help and discuss programming in Java."/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./css/styles.css">
+    <link rel="stylesheet" href="./css/queries.css">
+    <link rel="shortcut icon" href="./assets/LogoRedWhite.png" type="image/x-icon">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
+    <title>Java Discord - Java Community on Discord</title>
+</head>
+<body>
+    <!-- Navbar -->
+    <div class="Navbar" id="navbar">
+        <nav>
+            <img src="./assets/LogoRedWhite.png" alt="JavaDiscordLogo">
+            <button class="hamburger" id="hamburger">
+                <i class="fas fa-bars"></i>
+            </button>
+            <ul class="nav-ul" id="nav-ul">
+                <li><a href="https://github.com/java-discord" target="_blank">GitHub</a></li>
+                <li><a href="#" class="active-link">Home<hr></a></li>
+                <li><a href="./rules.html">Rules</a></li>
+            </ul>
+            <a href="https://discord.gg/x65hqE6" class="nav-ul join-btn" id="nav-ul">Join</a>
+        </nav>
+    </div>
+    <!-- Content -->
+    <header>
+        <div class="container">
+            <div class="left-box">
+                <h1>HELP.<br>CODE.<br>LEARN.</h1>
+            </div>
+            <div style="flex: 2;"></div>
+            <div class="right-box">
+                <p>
+                    Get help, share ideas and chat with thousands of Java developers from across the globe. <br>
+                    Welcome to the Java Discord, one of the biggest
+                    Java Communities on Discord.
+                </p>
+                <div class="button">
+                    <a href="https://discord.gg/x65hqE6">JOIN NOW!</a>
+                </div>
+            </div>
+        </div>
+    </header>
+    <!-- Footer -->
+    <footer>
+        <div class="copyright">
+            <p>&copy 2021 JavaDiscord | JavaDiscord is not affiliated, associated, or endorsed with/by Discord or Oracle</p>
+        </div>
+    </footer>
+    <!-- JS -->
+    <script type="text/javascript">
+        // Hamburger menu
+        const hamburger = document.getElementById("hamburger");
+        const navUL = document.getElementById("nav-ul");
+        const navbar = document.querySelector("nav");
+
+        hamburger.addEventListener("click", () => {
+            navUL.classList.toggle("show");
+            navbar.classList.toggle("bottom-shadow-effect");
+        });
+
+        // Scroll effect
+        window.addEventListener("scroll", function() {
+            var navbar = document.getElementById("navbar");
+            navbar.classList.toggle("navbar-scrolling", window.scrollY > 0);
+        });
+    </script>
+</body>
+</html>
