-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
98 lines (97 loc) · 4.83 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://kit.fontawesome.com/613e568d39.js" crossorigin="anonymous"></script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="With over 23,500 Members and 50,000 Messages sent each month, join one of the biggest Java Communities to help, get help and discuss programming in Java."/>
<link rel="stylesheet" href="/css/global/styles.css">
<link rel="stylesheet" href="/css/global/navbar.css">
<link rel="stylesheet" href="/css/pages/index/indexFooter.css">
<link rel="stylesheet" href="/css/pages/index/index.css">
<link rel="stylesheet" href="/css/pages/index/indexResponsive.css">
<link rel="shortcut icon" href="/assets/ServerLogo.png" type="image/x-icon">
<title>Discord Java Community</title>
</head>
<body>
<!-- NAVBAR -->
<div class="navbar" id="navbar">
<nav>
<img src="/assets/ServerLogo.png" alt="JavaCommunityLogo">
<button class="hamburger" id="hamburger">
<i class="fa-solid fa-bars"></i>
</button>
<ul class="nav-ul" id="nav-ul">
<li><a class="active-link" href="/index.html">Home</a></li>
<li><a href="/rules.html">Rules</a></li>
<li><a href="/soon.html">Coming soon!</a></li>
</ul>
<div class="nav-right">
<a href="/r/github.html" target="_blank" class="social-btn"><i class="fa-brands fa-github fa-3x"></i></a>
<a href="/r/twitter.html" target="_blank" class="social-btn"><i class="fa-brands fa-twitter fa-3x"></i></a>
<a href="/r/join.html" target="_blank" class="join-btn">Join</a>
</div>
</nav>
</div>
<!-- BODY -->
<!-- INTRODUCTION -->
<div class="introduction-container">
<div class="introduction-text">
<h1>HELP. <a style="color:#ff212d">CODE.</a> LEARN.</h1>
<p class="paragraph introduction-paragraph">With over 23,500 Members and 50,000 Messages sent each month, join one of the biggest community-made Java servers on Discord to help, get help and discuss programming in Java.</p>
<a href="/r/join.html" target="_blank" class="introduction-join-btn">Join</a>
</div>
<div class="introduction-image">
<img src="/assets/Channels.png" alt="" style="width:85%;">
</div>
</div>
<!-- DATA/STATS -->
<div class="data-container">
<div class="data-field">
<p>1,200+</p>
<p class="data-field-subtitle">active users¹</p>
</div>
<div class="data-field">
<p>23,500+</p>
<p class="data-field-subtitle">members</p>
</div>
<div class="data-field">
<p>12,500+</p>
<p class="data-field-subtitle">messages each week²</p>
</div>
</div>
<!-- MEET QOTW -->
<div class="qotw-container">
<div class="qotw-text">
<h1>MEET QUESTION OF THE WEEK</h1>
<p class="paragraph qotw-paragraph">Question Of The Week is a weekly Java-related question you can answer and be awarded points for. Check it out in <b class="special-word">#❓︱question-of-the-week</b> on the Discord Java Community.</p>
<a href="/soon.html" target="_blank" class="paragraph qotw-learn-more"><i class="fa-solid fa-arrow-right"></i> Learn More</a>
</div>
<div class="qotw-image">
<img src="/assets/QOTWLeaderboard.png" alt="" style="width:65%;">
</div>
</div>
<!-- PARTNERS -->
<div class="partner-container">
<h1>WITH SUPPORT FROM</h1>
<div class="partner-imgs">
<a href="/r/jetbrains.html" target="_blank"><img src="https://resources.jetbrains.com/storage/products/company/brand/logos/jb_beam.svg" alt="JetBrains Logo"></a>
<a href="/r/discord4j.html" target="_blank"><img src="/assets/discord4j.svg" alt="Discord4J Logo"></a>
</div>
</div>
<!-- FOOTER -->
<div class="footer-container" style="color: black;">
<div class="left">©️ 2023 Discord Java Community <br> We are not affiliated, associated, and/or endorsed with/by Discord or Oracle.</div>
<div class="right">¹ Users that sent a message in the last month, data gathered from Discord's Insight page. <br> ² Data gathered from Discord's Insight page.</div>
</div>
<!-- Hamburger Menu JavaScript -->
<script type="text/javascript">
const hamburger = document.getElementById("hamburger");
const navUL = document.getElementById("nav-ul");
hamburger.addEventListener("click", () => {
navUL.classList.toggle("show");
});
</script>
</body>
</html>