this string has no description
rsd
701 lines 21 kB view raw
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: #7f0000; 11 --primary-dark: #8d3f3f; 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: #8d3f3f; 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/1464268163242918073/611.png?ex=697c19be&is=697ac83e&hm=cf7bf8bb66f5c5c9e8b5c997d233e8367b46640422d0c439fe80fd267762690d&=&format=webp&quality=lossless&width=1078&height=606'); 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://media.discordapp.net/attachments/1404328302948253827/1408251443458211951/jtf_rsd.png?ex=697bffdc&is=697aae5c&hm=924d6d7177c2b16e99110508176ac6d45fefc9d7b9416c2cdab4d81544041b9a&=&format=webp&quality=lossless&width=710&height=710" alt="CNJTF Logo"> 481 JTF-RSD 482 </div> 483 <ul class="nav-links"> 484 <li><a href="#home">Home</a></li> 485 <li><a href="#about">About RSD</a></li> 486 <li><a href="#subdivisions">FMU</a></li> 487 <li><a href="#subdivisions">FPT</a></li> 488 <li><a href="#links">Resources</a></li> 489 <li><a href="#media">Media</a></li> 490 </ul> 491 </div> 492 </nav> 493 494 <!-- Hero Section --> 495 <section id="home" class="hero"> 496 <div class="hero-content"> 497 <h1>JTF-RSD</h1> 498 <div class="subtitle">Concord Joint Task Force Rescue Service Division </div> 499 <div class="tagline">idk what to put here</div> 500 <a href="https://discord.gg/your-invite-link" class="cta-button"> 501 Subdivisions<i class="fa-solid fa-arrows-split-up-and-left"></i> 502 </a> 503 <a href="https://discord.gg/your-invite-link" class="cta-button"> 504 About <i class="fa-solid fa-book"></i> 505 </a> 506 </div> 507 </section> 508 509 <!-- About Section --> 510 <section id="about"> 511 <div class="container"> 512 <h2 class="section-title">About RSD</h2> 513 <p class="section-subtitle">JTF Rescue Service Division</p> 514 515 <div class="about-content"> 516 <p> 517Welcome to the Rescue Service Division of the Concord Joint Task Force. This is a roleplay-focused subdivision. Agents in this division will be deployed for Fire & EMS style operations. 518 </p> 519 <p></p> 520 </div> 521 </div> 522 </section> 523 524 <!-- Subdivisions Section --> 525 <section id="subdivisions"> 526 <div class="container"> 527 <h2 class="section-title">Subdivisions</h2> 528 <p class="section-subtitle">Specialized units operating in perfect coordination</p> 529 530 <div class="subdivisions-grid"> 531 <div class="subdivision-card"> 532 <div class="badge">RIU</div> 533 <h3>Rapid Intervention Unit</h3> 534 <p>Elite tactical unit specializing in high-risk operations, reconnaissance, and rapid response missions. Our operators are trained for the most demanding scenarios.</p> 535 <ul> 536 <li>Advanced combat tactics</li> 537 <li>Covert reconnaissance</li> 538 <li>Hostage rescue operations</li> 539 <li>Counter-terrorism missions</li> 540 </ul> 541 </div> 542 543 <div class="subdivision-card"> 544 <div class="badge">RSD</div> 545 <h3>Rescue Service Division</h3> 546 <p>Maintaining order and discipline within the task force. Our MPs ensure security protocols are followed and handle internal investigations with precision.</p> 547 <ul> 548 <li>Base security operations</li> 549 <li>Law enforcement protocols</li> 550 <li>Investigation services</li> 551 <li>Detention management</li> 552 </ul> 553 </div> 554 </div> 555 </div> 556 </section> 557 558 <!-- Quick Links Section --> 559 <section id="links"> 560 <div class="container"> 561 <h2 class="section-title">Resources</h2> 562 <p class="section-subtitle">Essential resources and connections</p> 563 564 <div class="quick-links-grid"> 565 <a href="https://www.roblox.com/games/your-game-id" class="quick-link"> 566 <div class="icon">🎮</div> 567 <h3>Play Game</h3> 568 <p>Join CNJTF on Roblox</p> 569 </a> 570 571 <a href="https://discord.gg/your-invite-link" class="quick-link"> 572 <div class="icon">💬</div> 573 <h3>Discord Server</h3> 574 <p>Connect with the community</p> 575 </a> 576 577 <a href="#" class="quick-link"> 578 <div class="icon">📋</div> 579 <h3>Recruitment</h3> 580 <p>Join our ranks</p> 581 </a> 582 583 <a href="#" class="quick-link"> 584 <div class="icon">📖</div> 585 <h3>Training Manual</h3> 586 <p>Learn tactics and procedures</p> 587 </a> 588 589 <a href="#" class="quick-link"> 590 <div class="icon">🏆</div> 591 <h3>Leaderboards</h3> 592 <p>View top operatives</p> 593 </a> 594 595 <a href="#" class="quick-link"> 596 <div class="icon">📰</div> 597 <h3>News & Updates</h3> 598 <p>Latest developments</p> 599 </a> 600 601 <a href="#" class="quick-link"> 602 <div class="icon">⚙️</div> 603 <h3>Rules & Regulations</h3> 604 <p>Code of conduct</p> 605 </a> 606 607 <a href="#" class="quick-link"> 608 <div class="icon">🎯</div> 609 <h3>Mission Archive</h3> 610 <p>Past operations</p> 611 </a> 612 </div> 613 </div> 614 </section> 615 616 <!-- Media Section --> 617 <section id="media"> 618 <div class="container"> 619 <h2 class="section-title">Media Gallery</h2> 620 <p class="section-subtitle">Screenshots from operations and training</p> 621 622 <div class="media-gallery"> 623 <div class="media-item"> 624 <div class="media-placeholder">📷</div> 625 <div class="media-caption">Base Operations Center</div> 626 </div> 627 628 <div class="media-item"> 629 <div class="media-placeholder">📷</div> 630 <div class="media-caption">Special Operations Training</div> 631 </div> 632 633 <div class="media-item"> 634 <div class="media-placeholder">📷</div> 635 <div class="media-caption">Air Support Mission</div> 636 </div> 637 638 <div class="media-item"> 639 <div class="media-placeholder">📷</div> 640 <div class="media-caption">Formation Drill</div> 641 </div> 642 643 <div class="media-item"> 644 <div class="media-placeholder">📷</div> 645 <div class="media-caption">Combat Patrol</div> 646 </div> 647 648 <div class="media-item"> 649 <div class="media-placeholder">📷</div> 650 <div class="media-caption">Medical Training Exercise</div> 651 </div> 652 653 <div class="media-item"> 654 <div class="media-placeholder">📷</div> 655 <div class="media-caption">Night Operations</div> 656 </div> 657 658 <div class="media-item"> 659 <div class="media-placeholder">📷</div> 660 <div class="media-caption">Joint Task Force Assembly</div> 661 </div> 662 663 <div class="media-item"> 664 <div class="media-placeholder">📷</div> 665 <div class="media-caption">Engineering Operations</div> 666 </div> 667 </div> 668 669 <p style="text-align: center; margin-top: 2rem; color: var(--text-gray);"> 670 Replace the placeholder camera icons with your actual Roblox game screenshots 671 </p> 672 </div> 673 </section> 674 675 <!-- Footer --> 676 <footer> 677 <div class="container"> 678 <div class="copyright"> 679 © 2026 CNJTF - Concord Joint Task Force. All rights reserved. 680 <p>This is a fan made website, and is not offical</p> 681 </div> 682 </div> 683 </footer> 684 685 <script> 686 // Smooth scrolling for navigation links 687 document.querySelectorAll('a[href^="#"]').forEach(anchor => { 688 anchor.addEventListener('click', function (e) { 689 e.preventDefault(); 690 const target = document.querySelector(this.getAttribute('href')); 691 if (target) { 692 target.scrollIntoView({ 693 behavior: 'smooth', 694 block: 'start' 695 }); 696 } 697 }); 698 }); 699 </script> 700</body> 701</html>