-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
194 lines (140 loc) · 7.18 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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
<!DOCTYPE html>
<html lang = "en" class = "index">
<head>
<meta charset="UTF-8">
<meta name = "description" content="HowdyHack 2020!">
<title>No Spies Allowed!</title>
<!-- The below links to our style sheets -->
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap">
<!-- Below is the tab image <3 -->
<link rel="icon" href="photos/poggers.png" type="image/x-icon"/>
<style>
footer{
position: fixed;
background-color: tan;
padding-bottom: 10px;
z-index: 1;
bottom: 0;
}
</style>
</head>
<section id="1">
<header>
<br>
<img src="photos/judo.png" style="position:absolute;height: 64px;width: 64px; left: 39%; top: 2%">
<h1 style="margin-left: 160px;text-align: center; position: relative;padding-bottom: 20px;">Cyber-Security Self Defense</h1>
<img src="photos/judo.png" style="position:absolute;height: 64px;width: 64px; right: 20%; top: 2%;">
<hr />
</header>
</section>
<body style = "text-align: center">
<div class="sidebar">
<p>Table of Contents:</p>
<br>
<a href="BaitandSwitch.html">Bait and Switch</a>
<a href="Malware&CookieTheft.html">Malware and Cookie Theft</a>
<a href="EavesdroppingandManInMiddle">Eaves - dropping and Man in the Middle</a>
<a href="Keylogging.html">Keylogging</a>
<a href="Phishing.html">Phishing</a>
<a href="WateringHoleAttacks.html">Watering Hole Attacks</a>
</div>
<!--The below is program for the first "page"-->
<div class = "main" style="padding-right: 10%">
<section id="2">
<br><br><br>
<img src = "photos/cyber-security.png" width = "256" height = "256" alt = "Cyber Security" style="float: left; shape-outside: circle(); margin-right: 0;">
<h3 class = "main" style="margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 0; padding-top: 100px;" >
Howdy! This is an interactive website that will teach you about the most popular ways in which hackers steal your data!
<br>
</h3>
<br>
<br>
<img src = "photos/hacker.png" width = "256" height = "256" alt = "Hacker" style="float: right;">
<h3 class = "main" style="margin-right: auto; margin-right: auto; margin-top: auto; margin-bottom: auto; padding-top: 100px;padding-bottom: 75px; position: relative;">
<a href="#3"><img src="photos/down-arrow.png" style="width:64px;height:64px; position: absolute; bottom: 40%; right: -150px;"></a>
There are many clever ways in which hackers can gain access to your private information,
some ways of which you might not have even known were possible.
</h3>
<img src = "photos/search.png" width = "256" height = "256" alt = "Searching" style="float: left; shape-outside: circle(); margin-right: 0;">
<h3 class = "main" style="margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 0; padding-top: 100px;" >
After exploring our website, you will be able to detect and avoid the most common hacking practices.
<br>
</h3>
</section>
</div>
<!--The below is program for the second "page"-->
<div class="main" style="padding-right: 10%">
<section id="3">
<h1 style="padding-top: 3%;">What is Cyber-Security and why is it important?</h1>
<img src = "photos/study.png" width = "256" height = "256" alt = "Studying" style="float: left; shape-outside: circle(); margin-right: 0;">
<h3 class = "main" style="margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 0; padding-top: 80px;" >
<blockquote cite = https://digitalguardian.com/blog/what-cyber-security></blockquote>
Cyber security refers to the body of technologies, processes, and practices designed to protect networks, devices, programs, and data from attack, damage, or unauthorized access.
</blockquote>
<br>
</h3>
<br>
<br>
<img src = "photos/thief.png" width = "256" height = "256" alt = "Thief" style="float: right;">
<h3 class = "main" style="margin-right: auto; margin-right: auto; margin-top: auto; margin-bottom: auto; padding-top: 100px; padding-bottom: 75px; position: relative;">
<a href="#4"><img src="photos/down-arrow.png" style="width:64px;height:64px; position: absolute; bottom: 40%; right: -150px;"></a>
The black market for illegally harvested data is increasing rapidly. Examples of harvested data include credit card numbers and social security numbers.
<br>
</h3>
<img src = "photos/chart.png" width = "256" height = "256" alt = "Income Chart" style="float: left; shape-outside: circle(); margin-right: 0;">
<h3 class = "main" style="margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 0; padding-top: 75px;" >
As more and more personal information is stored on the internet, the amount of hackers grows steadily and the demand for Cyber-Security increases as well.
<br>
</h3>
</section>
</div>
<br>
<br>
<!--The below is program for the third "page"-->
<div class="main" style="padding-right: 10%">
<h1 style="padding-top: 20%; margin-bottom:0px ;">What should I do?</h1>
<section id="4">
<img src = "photos/fight.png" width = "256" height = "256" alt = "Fight!" style="float: left; shape-outside: circle(); margin-right: 0;">
<h3 class = "main" style="margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 0; padding-top: 0px;" >
<blockquote cite = https://digitalguardian.com/blog/what-cyber-security></blockquote>
<br>
Despite the many ways hackers can attempt to steal your information, you need not fear. There are tons of ways to proactively fight back and protect yourself!
</blockquote>
<br>
</h3>
<br>
<br>
<br>
<img src = "photos/masquerade.png" width = "256" height = "256" alt = "Disguise" style="float: right; shape-outside: circle(); margin-right: 0;">
<h3 class = "main" style="margin-right: auto; margin-right: auto; margin-top: auto; margin-bottom: auto; padding-top: 100px; padding-bottom: 50px; position: relative;">
<a href="#2"><img src="photos/upload.png" style="width:64px;height:64px; position: absolute; bottom: 30%; right: -150px;"></a>
One way of the best ways of fighting back is by using a VPN. VPN's will disguise the info you send online and make it very difficult for hackers to trace you!
</h3>
<img src = "photos/knight.png" width = "256" height = "256" alt = "Guardian" style="float: left; shape-outside: circle(); margin-right: 0;">
<h3 class = "main" style="margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 0; padding-top: 100px; position: relative;" >
Anti-Virus softwares are effective at safeguarding your info. Anti-Virus software will detect and destroy malicious applications that may have been leaking your information.
<br>
</h3>
<br><br><br>
<h1>
The main way to prevent hackers from stealing your info is by recognizing the main ways they do so.
</h1>
<p>
Click on the table of contents to learn more about each type!
</p>
<br><br><br><br>
</section>
</div>
</body>
<footer style = "text-align: center; left: 150px; width: 100%;">
<a href = "About.html">About Us</a>
<br>
<a href = "Sources.html">Citations</a>
<br>
<a href = "#1">Back to the top of the page</a>
<!--Just spacing for looks-->
<br>
Icons made by <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a>
</footer>
</html>