a phising page made for Crimson Defence CTF
dunkirk.sh
1body {
2 font-family: "Open Sans", sans-serif;
3 margin: 0;
4 padding: 0;
5 box-sizing: border-box;
6 background-color: #f9f9f9;
7 color: #333;
8}
9h1, h2, h3, h4 {
10 font-family: "Archivo", sans-serif;
11}
12header {
13 background-color: #c62828; /* Red */
14 color: white;
15 padding: 15px 0;
16 text-align: center;
17}
18header h1 {
19 margin: 0;
20}
21nav {
22 background-color: #b71c1c; /* Dark Red */
23 overflow: hidden;
24}
25nav a {
26 color: white;
27 padding: 15px 20px;
28 text-decoration: none;
29 display: inline-block;
30 text-align: center;
31}
32nav a:hover {
33 background-color: #9a1a1a; /* Even darker red for hover effect */
34}
35.container {
36 width: 80%;
37 margin: 20px auto;
38}
39section {
40 margin-bottom: 30px;
41}
42.cta {
43 background-color: #d32f2f; /* Bright Red */
44 color: white;
45 padding: 20px;
46 text-align: center;
47 border-radius: 5px;
48}
49.cta a {
50 color: white;
51 text-decoration: none;
52 font-weight: bold;
53 font-size: 18px;
54}
55.cta a:hover {
56 text-decoration: underline;
57}
58footer {
59 background-color: #c62828; /* Red */
60 color: white;
61 padding: 10px 0;
62 text-align: center;
63}
64/* Additional Styling for Input Fields */
65input[type="text"], input[type="password"], button {
66 padding: 10px;
67 font-size: 16px;
68 margin: 10px 0;
69 width: 100%;
70 border: 2px solid #c62828; /* Red borders */
71 border-radius: 5px;
72}
73button {
74 background-color: #c62828;
75 color: white;
76 border: none;
77 cursor: pointer;
78 transition-duration: 0.4s;
79}
80button:hover {
81 background-color: #b71c1c;
82}
83.column {
84 float: left;
85 width: 48%;
86 padding: 10px;
87 height: auto;
88 text-align: center;
89}
90
91/* Clear floats after the columns */
92.row:after {
93 content: "";
94 display: table;
95 clear: both;
96}
97
98/* Responsive layout */
99@media (max-width: 600px) {
100 .column {
101 width: 100%;
102 }
103}
104
105.intro-text {
106 background-color: #f1f1f1;
107 padding: 20px;
108 border-left: 5px solid #c62828;
109 margin-bottom: 30px;
110}
111
112figcaption {
113 font-style: italic;
114 font-size: smaller;
115}
116
117.flex-container {
118 display: flex;
119}
120
121/* Style for the job-listings section */
122.job-listings {
123 list-style-type: none; /* Removes default list bullets */
124 padding: 0;
125 margin: 0;
126}
127
128.job-item {
129 background-color: #fff; /* White background for each job item */
130 border: 1px solid #ddd; /* Light gray border for separation */
131 border-radius: 8px; /* Rounded corners */
132 margin-bottom: 20px; /* Space between job items */
133 padding: 20px;
134 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Light shadow for depth */
135 transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition effect */
136}
137
138.job-item:hover {
139 transform: translateY(-5px); /* Slight lift effect on hover */
140 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); /* Stronger shadow on hover */
141}
142
143.job-item h4 {
144 font-size: 1.6rem;
145 color: #c62828; /* color for job title */
146 margin-bottom: 10px;
147 font-weight: bold;
148}
149
150.job-item p {
151 font-size: 1rem;
152 line-height: 1.6;
153 color: #555; /* Slightly gray text for better readability */
154 margin-bottom: 10px;
155}
156
157.job-item a.apply-button {
158 display: inline-block;
159 background-color: #c62828; /* color for the button */
160 color: white;
161 padding: 10px 20px;
162 text-decoration: none;
163 font-weight: 600;
164 border-radius: 5px;
165 text-align: center;
166 margin-top: 15px;
167 transition: background-color 0.3s ease;
168}
169
170.job-item a.apply-button:hover {
171 background-color: #b71c1c; /* Darker on hover */
172}
173
174/* Services */
175
176/* Section styling for each service section */
177#creditunion-services {
178 background-color: #f9f9f9;
179 border: 1px solid #ddd;
180 margin-bottom: 20px;
181 padding: 20px;
182 border-radius: 8px;
183}
184
185/* Styling for each section's heading */
186#creditunion-services h2 {
187 font-size: 1.8rem;
188 color: #c62828;
189 margin-bottom: 10px;
190 font-weight: bold;
191}
192
193/* Paragraph styling */
194#creditunion-services p {
195 font-size: 1rem;
196 line-height: 1.6;
197 color: #555;
198 margin-bottom: 20px;
199}
200
201/* Service list styling */
202.service-list {
203 list-style-type: none;
204 padding-left: 0;
205 margin-top: 10px;
206}
207
208.service-list li {
209 font-size: 1rem;
210 color: #333;
211 margin-bottom: 10px;
212}
213
214.service-list li strong {
215 color: #c62828; /* color for service titles */
216}
217
218/* Service content layout */
219.service-content {
220 display: flex;
221 justify-content: space-between;
222 align-items: center;
223 gap: 20px;
224}
225
226.text-content {
227 flex: 1;
228}
229
230.image-content {
231 flex: 0 0 250px; /* Fixed width for images */
232}
233
234.image-content img {
235 width: 100%;
236 height: auto;
237 border-radius: 8px;
238}
239
240/* Call to Action button styling */
241.cta-button {
242 display: inline-block;
243 background-color: #c62828;
244 color: white;
245 padding: 15px 25px;
246 text-decoration: none;
247 text-align: center;
248 font-size: 1.2rem;
249 font-weight: bold;
250 border-radius: 5px;
251 margin-top: 30px;
252 transition: background-color 0.3s ease;
253}
254
255.cta-button:hover {
256 background-color: #b71c1c;
257}
258
259/* Add some padding between each section */
260#creditunion-services + #creditunion-services {
261 margin-top: 20px;
262}
263
264/* Board */
265
266/* Board of Directors Section */
267#board-of-directors {
268 margin-bottom: 30px;
269}
270
271#board-of-directors h2 {
272 font-size: 2rem;
273 color: black;
274 margin-bottom: 20px;
275 font-weight: bold;
276 text-align: center;
277}
278
279#board-of-directors h3 {
280 font-size: 1.6rem;
281 color: #333;
282 margin-top: 20px;
283 font-weight: bold;
284}
285
286#board-of-directors p {
287 font-size: 1rem;
288 color: #555;
289 line-height: 1.6;
290}
291
292/* Board member layout */
293.board-member {
294 display: flex;
295 align-items: center;
296 margin-bottom: 20px;
297 padding: 15px;
298 background-color: #f9f9f9;
299 border: 1px solid #ddd;
300 border-radius: 8px;
301}
302
303.board-member-image {
304 margin-right: 20px;
305 flex-shrink: 0;
306}
307
308.board-member-image img {
309 width: 100px; /* Fixed size for the image */
310 height: 100px;
311 border-radius: 50%; /* Make the image circular */
312 object-fit: cover; /* Ensures the image fits within the circle */
313}
314
315.board-member-info {
316 flex-grow: 1;
317}
318
319.board-member-info h4 {
320 font-size: 1.4rem;
321 color: #333;
322 margin: 0;
323 font-weight: bold;
324}
325
326.board-member-info p {
327 font-size: 1rem;
328 color: #555;
329 margin-top: 5px;
330 line-height: 1.6;
331}
332
333/* Add hover effect for the board member items */
334.board-member:hover {
335 background-color: #eef2f9;
336 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
337 cursor: pointer;
338}
339
340/* Policy Menu Styling*/
341.button-menu {
342 display: flex;
343 justify-content: center;
344 gap: 20px;
345 margin-bottom: 40px;
346}
347
348.button-menu a {
349 display: inline-block;
350 padding: 15px 30px;
351 background-color: #c62828;
352 color: #fff;
353 font-size: 16px;
354 text-decoration: none;
355 border-radius: 4px;
356 text-align: center;
357 transition: background-color 0.3s ease;
358}
359
360.button-menu a:hover {
361 background-color: #b71c1c;
362}
363
364.button-menu a:active {
365 background-color: #002244;
366}
367
368/* Reviews for index*/
369.reviews-container {
370 max-width: 1200px;
371 margin: 20px auto;
372 padding: 20px;
373}
374.review {
375 display: flex;
376 align-items: center;
377 background-color: white;
378 padding: 20px;
379 margin-bottom: 20px;
380 border-radius: 8px;
381 box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
382}
383.review img {
384 width: 100px;
385 height: 100px;
386 border-radius: 50%;
387 object-fit: cover;
388 margin-right: 20px;
389}
390.review-content {
391 max-width: 800px;
392}
393.review-content h3 {
394 margin-top: 0;
395 color: #333;
396}
397.review-content p {
398 color: #555;
399 font-size: 1rem;
400 line-height: 1.5;
401}
402.review-content p:last-child {
403 font-style: italic;
404 color: #333;
405}
406
407/* Dropdown nav bar */
408
409/* Navbar container */
410.navbar {
411 overflow: hidden;
412 background-color: #b71c1c;
413}
414
415/* Links inside the navbar */
416
417.navbar a {
418 float: left;
419 font-size: 16px;
420 color: white;
421 text-align: center;
422 padding: 14px 16px;
423 text-decoration: none;
424}
425
426/* The dropdown container */
427.dropdown {
428 float: left;
429 overflow: hidden;
430}
431
432/* Dropdown button */
433.dropdown .dropbtn {
434 font-size: 16px;
435 border: none;
436 outline: none;
437 color: white;
438 padding: 14px 16px;
439 background-color: inherit;
440 font-family: inherit; /* Important for vertical align on mobile phones */
441 margin: 0; /* Important for vertical align on mobile phones */
442}
443
444/* Add a red background color to navbar links on hover */
445.navbar a:hover, .dropdown:hover .dropbtn {
446 background-color: #9a1a1a;
447}
448
449/* Dropdown content (hidden by default) */
450.dropdown-content {
451 display: none;
452 position: absolute;
453 background-color: #f9f9f9;
454 min-width: 160px;
455 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
456 z-index: 1;
457}
458
459/* Links inside the dropdown */
460.dropdown-content a {
461 float: none;
462 color: black;
463 padding: 12px 16px;
464 text-decoration: none;
465 display: block;
466 text-align: left;
467}
468
469/* Add a grey background color to dropdown links on hover */
470.dropdown-content a:hover {
471 background-color: #ddd;
472}
473
474/* Show the dropdown menu on hover */
475.dropdown:hover .dropdown-content {
476 display: block;
477}
478
479.topnav-right {
480 float: right;
481}