-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
135 lines (128 loc) · 7.04 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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Empowering the Next Generation of Cyber Defenders">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css">
<link rel="icon" href="/favicon.ico">
<title>Cyber Defense Academy</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');
body {
background-image: url('https://github.com/SpiderLabs/zpminternational/blob/main/AiCS%20Title%20Page.png?raw=true');
background-size: cover;
background-attachment: fixed;
background-position: center;
color: white;
font-family: Arial, sans-serif;
}
header h1 {
font-family: 'Orbitron', sans-serif;
font-size: 2.5rem;
}
section {
background-color: rgba(0, 0, 0, 0.7);
border-radius: 10px;
padding: 20px;
margin: 20px auto;
}
#backstory {
background-color: rgba(255, 255, 255, 0.9);
color: black;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<!-- Header -->
<header class="bg-blue-800 text-white py-4">
<div class="container mx-auto flex justify-between items-center">
<h1 class="text-2xl font-bold">Cyber Defense Academy</h1>
<nav>
<ul class="flex space-x-4">
<li><a href="#home" class="hover:underline">Home</a></li>
<li><a href="#tutorials" class="hover:underline">Tutorials</a></li>
<li><a href="#labs" class="hover:underline">Labs</a></li>
<li><a href="#community" class="hover:underline">Community</a></li>
</ul>
</nav>
</div>
</header>
<!-- Hero Section -->
<section id="home" class="text-center">
<h2 class="text-4xl font-extrabold">Empowering the Next Generation of Cyber Defenders</h2>
<p class="mt-4">Explore tutorials, labs, and real-world applications to master cybersecurity.</p>
<a href="#tutorials" class="mt-6 inline-block px-6 py-3 bg-white text-blue-700 font-bold rounded shadow hover:bg-gray-100">Start Learning</a>
</section>
<!-- Backstory Section -->
<section id="backstory" class="text-center">
<div class="container mx-auto">
<h3 class="text-3xl font-bold">The ZPM International Challenge</h3>
<p class="mt-4">In the world of cybersecurity, threats are ever-evolving, and adversaries like APT 42a continue to push the boundaries of sophisticated cyberattacks. ZPM International stands at the forefront of this battle, architecting innovative security defenses to counteract these threats.</p>
<p class="mt-4">By diving into these tutorials and labs, you'll take on the role of a cyber defender, learning to mitigate real-world threats, fortify systems, and think like an attacker to better protect against them. The battle against APT 42a is fierce, and the knowledge you gain here could be the difference in turning the tide of cyber warfare.</p>
<p class="mt-4">Are you ready to join the ranks of defenders and rise to the challenge?</p>
<a href="https://github.com/SpiderLabs/zpminternational/tree/main?tab=readme-ov-file#zpm-international-architecting-security-defenses-against-apt-42a" target="_blank" class="text-blue-600 hover:underline">Read the Full Backstory</a>
</div>
</section>
<!-- Tutorials Section -->
<section id="tutorials" class="text-center">
<div class="container mx-auto">
<h3 class="text-3xl font-bold">Tutorials</h3>
<p class="mt-4">Step-by-step guides to strengthen your cybersecurity skills.</p>
<div class="grid place-items-center mt-8">
<div class="bg-white text-black rounded-lg shadow p-6 max-w-md">
<h4 class="text-xl font-semibold">ZPM International Table of Contents</h4>
<p class="mt-2">Comprehensive tutorials and resources for cybersecurity defense.</p>
<a href="https://github.com/SpiderLabs/zpminternational/blob/main/TOC.md" target="_blank" class="text-blue-600 hover:underline">Explore Tutorials</a>
</div>
</div>
</div>
</section>
<!-- Labs Section -->
<section id="labs" class="text-center">
<div class="container mx-auto">
<h3 class="text-3xl font-bold">Labs</h3>
<p class="mt-4">Hands-on exercises to apply your knowledge in real-world scenarios.</p>
<div class="grid place-items-center mt-8">
<div class="bg-white text-black rounded-lg shadow p-6 max-w-md">
<h4 class="text-xl font-semibold">Labs Directory</h4>
<p class="mt-2">Explore various labs to practice and enhance your skills.</p>
<a href="https://github.com/SpiderLabs/zpminternational/blob/main/LABS/TOC.md" target="_blank" class="text-blue-600 hover:underline">Explore Labs</a>
</div>
</div>
</div>
</section>
<!-- Community Section -->
<section id="community" class="text-center">
<div class="container mx-auto">
<h3 class="text-3xl font-bold">Join the Community</h3>
<p class="mt-4">Connect with fellow students and professionals at defensivesecurity.org to share insights and grow together.</p>
<p class="mt-4">(Note: I have no affiliation with defensivesecurity.org, it just seems like a useful site).</p>
<a href="https://defensivesecurity.org/" target="_blank" class="mt-6 inline-block px-6 py-3 bg-blue-800 text-white font-bold rounded shadow hover:bg-blue-700">Join Now</a>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="text-center">
<div class="container mx-auto">
<h3 class="text-3xl font-bold">Contact Me</h3>
<p class="mt-4">Have questions or need more information? Feel free to reach out.</p>
<a href="mailto:[email protected]" class="mt-6 inline-block px-6 py-3 bg-blue-800 text-white font-bold rounded shadow hover:bg-blue-700">Email Me</a>
</div>
</section>
<!-- Footer -->
<footer class="bg-blue-800 text-white py-6">
<div class="container mx-auto text-center">
<p>© 2025 Cyber Defense Academy. All rights reserved.</p>
<nav class="mt-4">
<ul class="flex justify-center space-x-4">
<li><a href="#home" class="hover:underline">Home</a></li>
<li><a href="#tutorials" class="hover:underline">Tutorials</a></li>
<li><a href="#labs" class="hover:underline">Labs</a></li>
<li><a href="#community" class="hover:underline">Community</a></li>
</ul>
</nav>
</div>
</footer>
</body>
</html>