this string has no description
danielmorrisey.com
cnjtf
edited
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CNJTF - Concord Joint Task Force</title>
7 <script src="https://kit.fontawesome.com/0ca27f8db1.js" crossorigin="anonymous"></script>
8 <style>
9 :root {
10 --primary: #2563eb;
11 --primary-dark: #1e40af;
12 --bg-black: #000000;
13 --bg-gray: #0a0a0a;
14 --bg-card: #111111;
15 --text-white: #ffffff;
16 --text-gray: #a1a1aa;
17 --text-light: #d4d4d8;
18 --border: #27272a;
19 }
20
21 * {
22 margin: 0;
23 padding: 0;
24 box-sizing: border-box;
25 }
26
27 body {
28 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
29 background: var(--bg-black);
30 color: var(--text-white);
31 line-height: 1.7;
32 }
33
34 /* Navigation */
35 nav {
36 position: fixed;
37 top: 0;
38 left: 0;
39 right: 0;
40 background: rgba(0, 0, 0, 0.95);
41 backdrop-filter: blur(10px);
42 border-bottom: 1px solid var(--border);
43 padding: 1rem 0;
44 z-index: 1000;
45 }
46
47 nav .container {
48 max-width: 1200px;
49 margin: 0 auto;
50 padding: 0 2rem;
51 display: flex;
52 justify-content: space-between;
53 align-items: center;
54 }
55
56 .logo {
57 display: flex;
58 align-items: center;
59 gap: 0.75rem;
60 font-size: 1.5rem;
61 font-weight: 700;
62 color: var(--text-white);
63 letter-spacing: -0.5px;
64 }
65
66 .logo img {
67 width: 40px;
68 height: 40px;
69 object-fit: contain;
70 }
71
72 .nav-links {
73 display: flex;
74 gap: 2rem;
75 list-style: none;
76 }
77
78 .nav-links a {
79 color: var(--text-light);
80 text-decoration: none;
81 font-weight: 500;
82 font-size: 0.95rem;
83 transition: color 0.2s ease;
84 }
85
86 .nav-links a:hover {
87 color: var(--primary);
88 }
89
90 /* Container */
91 .container {
92 max-width: 1200px;
93 margin: 0 auto;
94 padding: 0 2rem;
95 }
96
97 /* Hero Section */
98 .hero {
99 padding: 8rem 0 6rem;
100 background:
101 linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.6)),
102 url('https://media.discordapp.net/attachments/1324271316492095489/1456046983222399162/image.png?ex=697bdaec&is=697a896c&hm=19e749c14f097425d00d3dc7cda19d061078c25760efe1860066e90b8be4de65&=&format=webp&quality=lossless');
103 background-size: cover;
104 background-position: center;
105 background-attachment: scroll;
106 text-align: center;
107 margin-top: 64px;
108 position: relative;
109 }
110
111 .hero h1 {
112 font-size: 3.5rem;
113 font-weight: 800;
114 color: var(--text-white);
115 margin-bottom: 1rem;
116 letter-spacing: -1px;
117 text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
118 }
119
120 .hero .subtitle {
121 font-size: 1.5rem;
122 font-weight: 500;
123 color: var(--text-white);
124 margin-bottom: 1rem;
125 text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
126 }
127
128 .hero .tagline {
129 font-size: 1.1rem;
130 color: var(--text-light);
131 margin-bottom: 2.5rem;
132 text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
133 }
134
135 .cta-button {
136 display: inline-flex;
137 align-items: center;
138 gap: 0.5rem;
139 padding: 0.875rem 2rem;
140 background: var(--primary);
141 color: white;
142 font-weight: 600;
143 font-size: 1rem;
144 text-decoration: none;
145 border-radius: 8px;
146 transition: all 0.2s ease;
147 }
148
149 .cta-button:hover {
150 background: var(--primary-dark);
151 transform: translateY(-1px);
152 box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
153 }
154
155 /* Section Styling */
156 section {
157 padding: 5rem 0;
158 }
159
160 .section-title {
161 font-size: 2.5rem;
162 font-weight: 700;
163 color: var(--text-white);
164 margin-bottom: 0.5rem;
165 text-align: center;
166 letter-spacing: -0.5px;
167 }
168
169 .section-subtitle {
170 text-align: center;
171 color: var(--text-gray);
172 font-size: 1.1rem;
173 margin-bottom: 3rem;
174 }
175
176 /* About Section */
177 #about {
178 background: var(--bg-gray);
179 }
180
181 .about-content {
182 max-width: 900px;
183 margin: 0 auto;
184 text-align: center;
185 }
186
187 .about-content p {
188 font-size: 1.1rem;
189 color: var(--text-light);
190 line-height: 1.8;
191 margin-bottom: 1.5rem;
192 }
193
194 .stats-grid {
195 display: grid;
196 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
197 gap: 2rem;
198 margin-top: 3rem;
199 }
200
201 .stat-card {
202 text-align: center;
203 padding: 2rem;
204 background: var(--bg-card);
205 border: 1px solid var(--border);
206 border-radius: 12px;
207 }
208
209 .stat-number {
210 font-size: 2.5rem;
211 font-weight: 800;
212 color: var(--primary);
213 margin-bottom: 0.5rem;
214 }
215
216 .stat-label {
217 color: var(--text-gray);
218 font-size: 0.95rem;
219 }
220
221 /* Subdivisions Grid */
222 #subdivisions {
223 background: var(--bg-black);
224 }
225
226 .subdivisions-grid {
227 display: grid;
228 grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
229 gap: 2rem;
230 margin-top: 3rem;
231 }
232
233 .subdivision-card {
234 background: var(--bg-card);
235 border: 1px solid var(--border);
236 border-radius: 12px;
237 padding: 2rem;
238 transition: all 0.2s ease;
239 }
240
241 .subdivision-card:hover {
242 box-shadow: 0 8px 30px rgba(37, 99, 235, 0.15);
243 transform: translateY(-4px);
244 border-color: var(--primary);
245 }
246
247 .subdivision-card h3 {
248 font-size: 1.5rem;
249 font-weight: 700;
250 color: var(--text-white);
251 margin-bottom: 0.75rem;
252 }
253
254 .subdivision-card .badge {
255 display: inline-block;
256 padding: 0.25rem 0.75rem;
257 background: rgba(37, 99, 235, 0.1);
258 color: var(--primary);
259 font-size: 0.8rem;
260 font-weight: 600;
261 border-radius: 20px;
262 margin-bottom: 1rem;
263 }
264
265 .subdivision-card p {
266 color: var(--text-gray);
267 line-height: 1.7;
268 margin-bottom: 1.5rem;
269 }
270
271 .subdivision-card ul {
272 list-style: none;
273 padding-left: 0;
274 }
275
276 .subdivision-card ul li {
277 color: var(--text-gray);
278 padding: 0.5rem 0;
279 padding-left: 1.5rem;
280 position: relative;
281 font-size: 0.95rem;
282 }
283
284 .subdivision-card ul li::before {
285 content: '•';
286 position: absolute;
287 left: 0;
288 color: var(--primary);
289 font-weight: bold;
290 }
291
292 /* Quick Links */
293 #links {
294 background: var(--bg-gray);
295 }
296
297 .quick-links-grid {
298 display: grid;
299 grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
300 gap: 1.5rem;
301 margin-top: 3rem;
302 }
303
304 .quick-link {
305 background: var(--bg-card);
306 border: 1px solid var(--border);
307 border-radius: 12px;
308 padding: 2rem;
309 text-align: center;
310 text-decoration: none;
311 color: var(--text-white);
312 transition: all 0.2s ease;
313 }
314
315 .quick-link:hover {
316 border-color: var(--primary);
317 box-shadow: 0 4px 20px rgba(37, 99, 235, 0.2);
318 transform: translateY(-2px);
319 }
320
321 .quick-link .icon {
322 font-size: 2.5rem;
323 margin-bottom: 1rem;
324 }
325
326 .quick-link h3 {
327 font-size: 1.1rem;
328 font-weight: 700;
329 margin-bottom: 0.5rem;
330 color: var(--text-white);
331 }
332
333 .quick-link p {
334 color: var(--text-gray);
335 font-size: 0.9rem;
336 }
337
338 /* Media Gallery */
339 #media {
340 background: var(--bg-black);
341 }
342
343 .media-gallery {
344 display: grid;
345 grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
346 gap: 2rem;
347 margin-top: 3rem;
348 }
349
350 .media-item {
351 position: relative;
352 aspect-ratio: 16/9;
353 background: var(--bg-card);
354 border: 1px solid var(--border);
355 border-radius: 12px;
356 overflow: hidden;
357 cursor: pointer;
358 transition: all 0.2s ease;
359 }
360
361 .media-item:hover {
362 transform: translateY(-4px);
363 box-shadow: 0 8px 30px rgba(37, 99, 235, 0.2);
364 border-color: var(--primary);
365 }
366
367 .media-placeholder {
368 width: 100%;
369 height: 100%;
370 display: flex;
371 align-items: center;
372 justify-content: center;
373 background: var(--bg-card);
374 font-size: 3rem;
375 color: var(--text-gray);
376 }
377
378 .media-caption {
379 position: absolute;
380 bottom: 0;
381 left: 0;
382 right: 0;
383 padding: 1rem;
384 background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
385 color: white;
386 font-weight: 600;
387 font-size: 0.9rem;
388 opacity: 0;
389 transition: opacity 0.2s ease;
390 }
391
392 .media-item:hover .media-caption {
393 opacity: 1;
394 }
395
396 /* Footer */
397 footer {
398 background: var(--bg-gray);
399 border-top: 1px solid var(--border);
400 padding: 3rem 0 2rem;
401 margin-top: 0;
402 text-align: center;
403 }
404
405 footer .footer-content {
406 margin-bottom: 2rem;
407 }
408
409 footer h3 {
410 font-size: 1.25rem;
411 font-weight: 700;
412 color: var(--text-white);
413 margin-bottom: 0.5rem;
414 }
415
416 footer p {
417 color: var(--text-gray);
418 margin-bottom: 0.25rem;
419 font-size: 0.95rem;
420 }
421
422 .footer-links {
423 display: flex;
424 justify-content: center;
425 gap: 2rem;
426 margin-top: 1.5rem;
427 }
428
429 .footer-links a {
430 color: var(--text-gray);
431 text-decoration: none;
432 font-size: 0.9rem;
433 transition: color 0.2s ease;
434 }
435
436 .footer-links a:hover {
437 color: var(--primary);
438 }
439
440 .copyright {
441 color: var(--text-gray);
442 font-size: 0.85rem;
443 padding-top: 2rem;
444 border-top: 1px solid var(--border);
445 }
446
447 /* Responsive */
448 @media (max-width: 768px) {
449 .hero h1 {
450 font-size: 2.5rem;
451 }
452
453 .hero .subtitle {
454 font-size: 1.25rem;
455 }
456
457 .nav-links {
458 gap: 1rem;
459 flex-wrap: wrap;
460 }
461
462 .subdivisions-grid,
463 .quick-links-grid,
464 .media-gallery,
465 .stats-grid {
466 grid-template-columns: 1fr;
467 }
468
469 .section-title {
470 font-size: 2rem;
471 }
472 }
473 </style>
474</head>
475<body>
476 <!-- Navigation -->
477 <nav>
478 <div class="container">
479 <div class="logo">
480 <img src="https://cdn.discordapp.com/emojis/1386840893872410745.webp" alt="CNJTF Logo">
481 CNJTF
482 </div>
483 <ul class="nav-links">
484 <li><a href="#home">Home</a></li>
485 <li><a href="#about">About</a></li>
486 <li><a href="#subdivisions">Subdivisions</a></li>
487 <li><a href="#links">Resources</a></li>
488 <li><a href="#media">Media</a></li>
489 </ul>
490 </div>
491 </nav>
492
493 <!-- Hero Section -->
494 <section id="home" class="hero">
495 <div class="hero-content">
496 <h1>CNJTF</h1>
497 <div class="subtitle">Concord Joint Task Force</div>
498 <div class="tagline">To defend the innocent</div>
499 <a href="https://discord.gg/your-invite-link" class="cta-button">
500 Join the Discord <i class="fa-brands fa-discord"></i>
501 </a>
502 </div>
503 </section>
504
505 <!-- About Section -->
506 <section id="about">
507 <div class="container">
508 <h2 class="section-title">About CNJTF</h2>
509 <p class="section-subtitle">Who we are and what we stand for</p>
510
511 <div class="about-content">
512 <p>
513 The Concord Joint Task Force (CNJTF) is a government-run civil defense organization. <br> Our goal is to keep the citizens of Concord safe from natural and manmade threats.
514 </p>
515 <p></p>
516
517 <div class="stats-grid">
518 <div class="stat-card">
519 <div class="stat-number">5</div>
520 <div class="stat-label">Specialized Divisions</div>
521 </div>
522 <div class="stat-card">
523 <div class="stat-number">100+</div>
524 <div class="stat-label">Active Members</div>
525 </div>
526 <div class="stat-card">
527 <div class="stat-number">1</div>
528 <div class="stat-label">Mission</div>
529 </div>
530 </div>
531 </div>
532 </div>
533 </section>
534
535 <!-- Subdivisions Section -->
536 <section id="subdivisions">
537 <div class="container">
538 <h2 class="section-title">Subdivisions</h2>
539 <p class="section-subtitle">Specialized units operating in perfect coordination</p>
540
541 <div class="subdivisions-grid">
542 <div class="subdivision-card">
543 <div class="badge">RIU</div>
544 <h3>Rapid Intervention Unit</h3>
545 <p>Elite tactical unit specializing in high-risk operations, reconnaissance, and rapid response missions. Our operators are trained for the most demanding scenarios.</p>
546 <ul>
547 <li>Advanced combat tactics</li>
548 <li>Covert reconnaissance</li>
549 <li>Hostage rescue operations</li>
550 <li>Counter-terrorism missions</li>
551 </ul>
552 </div>
553
554 <div class="subdivision-card">
555 <div class="badge">RSD</div>
556 <h3>Rescue Service Division</h3>
557 <p>Maintaining order and discipline within the task force. Our MPs ensure security protocols are followed and handle internal investigations with precision.</p>
558 <ul>
559 <li>Base security operations</li>
560 <li>Law enforcement protocols</li>
561 <li>Investigation services</li>
562 <li>Detention management</li>
563 </ul>
564 </div>
565
566 <div class="subdivision-card">
567 <div class="badge">SOCOM</div>
568 <h3>Special Operations Command
569</h3>
570 <p>Aerial superiority and transport operations. Our aviators provide critical air support, reconnaissance, and rapid deployment capabilities across all theaters.</p>
571 <ul>
572 <li>Close air support</li>
573 <li>Aerial reconnaissance</li>
574 <li>Combat air patrols</li>
575 <li>Troop transport operations</li>
576 </ul>
577 </div>
578
579 <div class="subdivision-card">
580 <div class="badge">TAPS</div>
581 <h3>Threat Analysis and Prevention Service</h3>
582 <p>Combat medical support and field hospital operations. Our medics are trained to provide life-saving care in the most challenging environments.</p>
583 <ul>
584 <li>Combat casualty care</li>
585 <li>Field hospital operations</li>
586 <li>Medical evacuation</li>
587 <li>Preventive medicine</li>
588 </ul>
589 </div>
590
591 <div class="subdivision-card">
592 <div class="badge">RRD</div>
593 <h3>Rapid Response Directorate</h3>
594 <p>Infrastructure and fortification specialists. Building, repairing, and securing critical installations while providing demolition and construction support.</p>
595 <ul>
596 <li>Base construction</li>
597 <li>Explosive ordnance disposal</li>
598 <li>Fortification engineering</li>
599 <li>Route clearance operations</li>
600 </ul>
601 </div>
602 </div>
603 </div>
604 </section>
605
606 <!-- Quick Links Section -->
607 <section id="links">
608 <div class="container">
609 <h2 class="section-title">Resources</h2>
610 <p class="section-subtitle">Essential resources and connections</p>
611
612 <div class="quick-links-grid">
613 <a href="https://www.roblox.com/games/your-game-id" class="quick-link">
614 <div class="icon">🎮</div>
615 <h3>Play Game</h3>
616 <p>Join CNJTF on Roblox</p>
617 </a>
618
619 <a href="https://discord.gg/your-invite-link" class="quick-link">
620 <div class="icon">💬</div>
621 <h3>Discord Server</h3>
622 <p>Connect with the community</p>
623 </a>
624
625 <a href="#" class="quick-link">
626 <div class="icon">📋</div>
627 <h3>Recruitment</h3>
628 <p>Join our ranks</p>
629 </a>
630
631 <a href="#" class="quick-link">
632 <div class="icon">📖</div>
633 <h3>Training Manual</h3>
634 <p>Learn tactics and procedures</p>
635 </a>
636
637 <a href="#" class="quick-link">
638 <div class="icon">🏆</div>
639 <h3>Leaderboards</h3>
640 <p>View top operatives</p>
641 </a>
642
643 <a href="#" class="quick-link">
644 <div class="icon">📰</div>
645 <h3>News & Updates</h3>
646 <p>Latest developments</p>
647 </a>
648
649 <a href="#" class="quick-link">
650 <div class="icon">⚙️</div>
651 <h3>Rules & Regulations</h3>
652 <p>Code of conduct</p>
653 </a>
654
655 <a href="#" class="quick-link">
656 <div class="icon">🎯</div>
657 <h3>Mission Archive</h3>
658 <p>Past operations</p>
659 </a>
660 </div>
661 </div>
662 </section>
663
664 <!-- Media Section -->
665 <section id="media">
666 <div class="container">
667 <h2 class="section-title">Media Gallery</h2>
668 <p class="section-subtitle">Screenshots from operations and training</p>
669
670 <div class="media-gallery">
671 <div class="media-item">
672 <div class="media-placeholder">📷</div>
673 <div class="media-caption">Base Operations Center</div>
674 </div>
675
676 <div class="media-item">
677 <div class="media-placeholder">📷</div>
678 <div class="media-caption">Special Operations Training</div>
679 </div>
680
681 <div class="media-item">
682 <div class="media-placeholder">📷</div>
683 <div class="media-caption">Air Support Mission</div>
684 </div>
685
686 <div class="media-item">
687 <div class="media-placeholder">📷</div>
688 <div class="media-caption">Formation Drill</div>
689 </div>
690
691 <div class="media-item">
692 <div class="media-placeholder">📷</div>
693 <div class="media-caption">Combat Patrol</div>
694 </div>
695
696 <div class="media-item">
697 <div class="media-placeholder">📷</div>
698 <div class="media-caption">Medical Training Exercise</div>
699 </div>
700
701 <div class="media-item">
702 <div class="media-placeholder">📷</div>
703 <div class="media-caption">Night Operations</div>
704 </div>
705
706 <div class="media-item">
707 <div class="media-placeholder">📷</div>
708 <div class="media-caption">Joint Task Force Assembly</div>
709 </div>
710
711 <div class="media-item">
712 <div class="media-placeholder">📷</div>
713 <div class="media-caption">Engineering Operations</div>
714 </div>
715 </div>
716
717 <p style="text-align: center; margin-top: 2rem; color: var(--text-gray);">
718 Replace the placeholder camera icons with your actual Roblox game screenshots
719 </p>
720 </div>
721 </section>
722
723 <!-- Footer -->
724 <footer>
725 <div class="container">
726 <div class="footer-content">
727 <h3>CNJTF</h3>
728 <p>Concord Joint Task Force</p>
729 <p>To defend the innocent</p>
730 </div>
731
732 <div class="footer-links">
733 <a href="#home">Home</a>
734 <a href="#about">About</a>
735 <a href="#subdivisions">Subdivisions</a>
736 <a href="#links">Resources</a>
737 <a href="#media">Media</a>
738 </div>
739
740 <div class="copyright">
741 © 2026 CNJTF - Concord Joint Task Force. All rights reserved.
742 </div>
743 </div>
744 </footer>
745
746 <script>
747 // Smooth scrolling for navigation links
748 document.querySelectorAll('a[href^="#"]').forEach(anchor => {
749 anchor.addEventListener('click', function (e) {
750 e.preventDefault();
751 const target = document.querySelector(this.getAttribute('href'));
752 if (target) {
753 target.scrollIntoView({
754 behavior: 'smooth',
755 block: 'start'
756 });
757 }
758 });
759 });
760 </script>
761</body>
762</html>