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 7 <!-- âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 8 SEO META 9 ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ --> 10 <title>America 250 School Year â The Declaration of Independence Song</title> 11 <meta name="description" content="The Semiquincentennial continues through the 2026â27 school year. Use the Declaration of Independence Song for Celebrate Freedom Week, Constitution Day, and classroom memorization. 50,000+ students since 2001." /> 12 <meta name="keywords" content="America 250 school year, semiquincentennial education, Celebrate Freedom Week, Constitution Day 2026, Declaration of Independence classroom, America 250 teachers" /> 13 <meta name="author" content="DeclarationSong.com" /> 14 <link rel="canonical" href="https://declarationsong.com/anniversary.html" /> 15 <link rel="icon" type="image/svg+xml" href="favicon.svg" /> 16 <link rel="apple-touch-icon" href="favicon.svg" /> 17 18 <!-- Open Graph --> 19 <meta property="og:type" content="website" /> 20 <meta property="og:title" content="America 250 School Year â The Declaration of Independence Song" /> 21 <meta property="og:description" content="July 4, 2026 marked 250 years. The classroom year continues: Celebrate Freedom Week, Constitution Day, and verbatim Declaration memorization." /> 22 <meta property="og:url" content="https://declarationsong.com/anniversary.html" /> 23 <meta property="og:image" content="https://declarationsong.com/og-image.jpg" /> 24 25 <!-- Twitter Card --> 26 <meta name="twitter:card" content="summary_large_image" /> 27 <meta name="twitter:title" content="America 250 School Year" /> 28 <meta name="twitter:description" content="The Semiquincentennial continues in classrooms. Celebrate Freedom Week and Constitution Day resources for teachers." /> 29 <meta name="twitter:image" content="https://declarationsong.com/og-image.jpg" /> 30 31 <!-- âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 32 GOOGLE ANALYTICS 4 33 ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ -->
vendor: 66 bytes, lines 33-34
33 34 <script async src="https://www.googletagmanager.com/gtag/js?id=
34G-PMYFJPL6LQ
vendor: 14 bytes, lines 34-35
34"></script> 35
35<script> 36
vendor: 139 bytes, lines 36-39
36window.dataLayer = window.dataLayer || []; 37 function gtag(){dataLayer.push(arguments);} 38 gtag('js', new Date()); 39 gtag('config', '
39G-PMYFJPL6LQ
vendor: 8 bytes, lines 39-40
39'); 40
40gtag('config', 'GT-WRH5B8G'); 41 </script>
41 42 43 <!-- Fonts --> 44 <link rel="preconnect" href="https://fonts.googleapis.com" /> 45 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> 46 <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700&family=Inter:wght@400;500;600&family=Cinzel:wght@700;900&display=swap" rel="stylesheet" /> 47 48 <style> 49 /* âââ Reset & Base âââââââââââââââââââââââââââââââââââââââââââ */ 50 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } 51 52 :root { 53 --navy: #0B1F3A; 54 --navy2: #0F2A50; 55 --red: #B22234; 56 --red2: #8B0000; 57 --gold: #C9A84C; 58 --gold2: #E8C870; 59 --cream: #FDF6E3; 60 --white: #FFFFFF; 61 --gray: #8A99AA; 62 --section-pad: clamp(60px, 8vw, 100px); 63 } 64 65 html { scroll-behavior: smooth; } 66 67 body { 68 font-family: 'Inter', sans-serif; 69 background: var(--navy); 70 color: var(--white); 71 line-height: 1.6; 72 overflow-x: hidden; 73 } 74 75 /* âââ Stars Background ââââââââââââââââââââââââââââââââââââââââ */ 76 .stars-bg { 77 position: fixed; 78 inset: 0; 79 pointer-events: none; 80 z-index: 0; 81 background: 82 radial-gradient(ellipse at 20% 50%, rgba(201,168,76,0.05) 0%, transparent 60%), 83 radial-gradient(ellipse at 80% 20%, rgba(178,34,52,0.05) 0%, transparent 50%); 84 } 85 .stars-bg::before { 86 content: ''; 87 position: absolute; 88 inset: 0; 89 background-image: 90 radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.6) 0%, transparent 100%), 91 radial-gradient(1px 1px at 25% 35%, rgba(255,255,255,0.4) 0%, transparent 100%), 92 radial-gradient(1px 1px at 40% 10%, rgba(255,255,255,0.7) 0%, transparent 100%), 93 radial-gradient(1px 1px at 55% 28%, rgba(255,255,255,0.5) 0%, transparent 100%), 94 radial-gradient(1px 1px at 70% 8%, rgba(255,255,255,0.6) 0%, transparent 100%), 95 radial-gradient(1px 1px at 85% 20%, rgba(255,255,255,0.4) 0%, transparent 100%), 96 radial-gradient(1px 1px at 15% 55%, rgba(255,255,255,0.3) 0%, transparent 100%), 97 radial-gradient(1px 1px at 90% 45%, rgba(255,255,255,0.5) 0%, transparent 100%), 98 radial-gradient(1px 1px at 60% 60%, rgba(255,255,255,0.3) 0%, transparent 100%), 99 radial-gradient(1px 1px at 5% 80%, rgba(255,255,255,0.4) 0%, transparent 100%), 100 radial-gradient(1px 1px at 78% 75%, rgba(255,255,255,0.3) 0%, transparent 100%), 101 radial-gradient(1px 1px at 33% 88%, rgba(255,255,255,0.5) 0%, transparent 100%), 102 radial-gradient(2px 2px at 50% 5%, rgba(255,255,255,0.8) 0%, transparent 100%), 103 radial-gradient(2px 2px at 95% 60%, rgba(255,255,255,0.6) 0%, transparent 100%); 104 } 105 106 /* âââ Utility âââââââââââââââââââââââââââââââââââââââââââââââââ */ 107 .container { max-width: 1100px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; } 108 .section { padding: var(--section-pad) 0; position: relative; } 109 .gold-text { color: var(--gold2); } 110 .red-text { color: #E04455; } 111 112 .divider { 113 width: 80px; height: 3px; 114 background: linear-gradient(90deg, var(--red), var(--gold)); 115 margin: 0 auto 32px; 116 border-radius: 2px; 117 } 118 .divider.left { margin: 0 0 32px; } 119 120 /* âââ NAV âââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 121 nav { 122 position: fixed; 123 top: 0; left: 0; right: 0; 124 z-index: 100; 125 padding: 16px 0; 126 transition: background 0.3s, backdrop-filter 0.3s; 127 } 128 nav.scrolled { 129 background: rgba(11, 31, 58, 0.95); 130 backdrop-filter: blur(12px); 131 border-bottom: 1px solid rgba(201,168,76,0.15); 132 } 133 .nav-inner { 134 display: flex; 135 align-items: center; 136 justify-content: space-between; 137 } 138 .nav-brand { 139 font-family: 'Cinzel', serif; 140 font-size: 14px; 141 letter-spacing: 2px; 142 color: var(--gold2); 143 text-decoration: none; 144 text-transform: uppercase; 145 } 146 .nav-links { display: flex; gap: 28px; list-style: none; } 147 .nav-links a { 148 color: rgba(255,255,255,0.75); 149 text-decoration: none; 150 font-size: 13px; 151 letter-spacing: 1px; 152 text-transform: uppercase; 153 transition: color 0.2s; 154 } 155 .nav-links a:hover { color: var(--gold2); } 156 .nav-links a.active { color: var(--gold2); border-bottom: 2px solid var(--gold2); padding-bottom: 2px; } 157 158 @media (max-width: 600px) { 159 .nav-links { display: none; } 160 } 161 162 /* âââ HERO ââââââââââââââââââââââââââââââââââââââââââââââââââââ */ 163 #hero { 164 min-height: 100vh; 165 display: flex; 166 align-items: center; 167 justify-content: center; 168 text-align: center; 169 padding: 120px 24px 80px; 170 position: relative; 171 overflow: hidden; 172 } 173 174 #hero::before { 175 content: ''; 176 position: absolute; 177 inset: 0; 178 background: 179 radial-gradient(ellipse at center top, rgba(178,34,52,0.18) 0%, transparent 60%), 180 radial-gradient(ellipse at center bottom, rgba(201,168,76,0.10) 0%, transparent 60%), 181 linear-gradient(180deg, rgba(11,31,58,0) 0%, rgba(11,31,58,0.85) 100%); 182 z-index: 0; 183 } 184 185 /* Waving flag stripes accent */ 186 #hero::after { 187 content: ''; 188 position: absolute; 189 top: 0; left: 0; right: 0; 190 height: 5px; 191 background: linear-gradient(90deg, 192 #B22234 0%, #B22234 33%, 193 #FFFFFF 33%, #FFFFFF 66%, 194 #B22234 66%, #B22234 100%); 195 } 196 197 .hero-content { position: relative; z-index: 1; max-width: 900px; } 198 199 .anniversary-badge { 200 display: inline-flex; 201 align-items: center; 202 gap: 8px; 203 background: rgba(201,168,76,0.12); 204 border: 1px solid rgba(201,168,76,0.35); 205 border-radius: 100px; 206 padding: 8px 20px; 207 font-size: 13px; 208 letter-spacing: 2px; 209 text-transform: uppercase; 210 color: var(--gold2); 211 margin-bottom: 32px; 212 font-weight: 600; 213 } 214 .anniversary-badge .star { font-size: 11px; } 215 216 .hero-eyebrow { 217 font-family: 'Cinzel', serif; 218 font-size: clamp(11px, 1.5vw, 13px); 219 letter-spacing: 4px; 220 text-transform: uppercase; 221 color: var(--gold); 222 margin-bottom: 16px; 223 } 224 225 h1 { 226 font-family: 'Playfair Display', serif; 227 font-size: clamp(48px, 8vw, 90px); 228 font-weight: 900; 229 line-height: 1.15; 230 margin-bottom: 24px; 231 padding-bottom: 0.12em; 232 background: linear-gradient(135deg, #FFFFFF 0%, var(--gold2) 50%, #FFFFFF 100%); 233 -webkit-background-clip: text; 234 -webkit-text-fill-color: transparent; 235 background-clip: text; 236 } 237 238 .hero-sub { 239 font-size: clamp(16px, 2.2vw, 20px); 240 color: rgba(255,255,255,0.78); 241 max-width: 680px; 242 margin: 0 auto 40px; 243 line-height: 1.65; 244 } 245 246 .hero-cta-group { 247 display: flex; 248 flex-wrap: wrap; 249 gap: 14px; 250 justify-content: center; 251 margin-bottom: 56px; 252 } 253 254 .btn { 255 display: inline-flex; 256 align-items: center; 257 gap: 8px; 258 padding: 14px 28px; 259 border-radius: 6px; 260 font-size: 15px; 261 font-weight: 600; 262 text-decoration: none; 263 transition: all 0.25s; 264 border: 2px solid transparent; 265 cursor: pointer; 266 letter-spacing: 0.3px; 267 } 268 .btn-primary { 269 background: var(--red); 270 color: white; 271 border-color: var(--red); 272 box-shadow: 0 4px 20px rgba(178,34,52,0.35); 273 } 274 .btn-primary:hover { 275 background: var(--red2); 276 border-color: var(--red2); 277 transform: translateY(-2px); 278 box-shadow: 0 8px 28px rgba(178,34,52,0.5); 279 } 280 .btn-outline { 281 background: transparent; 282 color: rgba(255,255,255,0.85); 283 border-color: rgba(255,255,255,0.3); 284 } 285 .btn-outline:hover { 286 background: rgba(255,255,255,0.08); 287 border-color: rgba(255,255,255,0.6); 288 transform: translateY(-2px); 289 } 290 .btn-gold { 291 background: var(--gold); 292 color: var(--navy); 293 border-color: var(--gold); 294 } 295 .btn-gold:hover { 296 background: var(--gold2); 297 border-color: var(--gold2); 298 transform: translateY(-2px); 299 } 300 301 .scroll-down { 302 position: absolute; 303 bottom: 30px; 304 left: 50%; 305 transform: translateX(-50%); 306 display: flex; 307 flex-direction: column; 308 align-items: center; 309 gap: 6px; 310 color: rgba(255,255,255,0.35); 311 font-size: 11px; 312 letter-spacing: 2px; 313 text-transform: uppercase; 314 z-index: 1; 315 } 316 .scroll-down svg { 317 animation: bounce 2s ease-in-out infinite; 318 }
319 @keyframes bounce { 320 0%, 100% { transform: translateY(0); } 321 50% { transform: translateY(6px); } 322 } 323 324 /* âââ SECTION HEADERS âââââââââââââââââââââââââââââââââââââââââ */ 325 .section-header { text-align: center; margin-bottom: 52px; } 326 .section-label { 327 font-family: 'Cinzel', serif; 328 font-size: 11px; 329 letter-spacing: 4px; 330 text-transform: uppercase; 331 color: var(--gold); 332 margin-bottom: 12px; 333 } 334 .section-title { 335 font-family: 'Playfair Display', serif; 336 font-size: clamp(28px, 4.5vw, 48px); 337 font-weight: 700; 338 line-height: 1.2; 339 color: white; 340 margin-bottom: 16px; 341 } 342 .section-desc { 343 font-size: 17px; 344 color: rgba(255,255,255,0.6); 345 max-width: 560px; 346 margin: 0 auto; 347 } 348 349 /* âââ PARCHMENT QUOTE âââââââââââââââââââââââââââââââââââââââââ */ 350 .parchment-quote { 351 background: linear-gradient(135deg, #2A1F0A, #1A1305); 352 border: 1px solid rgba(201,168,76,0.25); 353 border-left: 4px solid var(--gold); 354 border-radius: 8px; 355 padding: 32px 28px; 356 position: relative; 357 margin: 40px auto; 358 max-width: 800px; 359 } 360 .parchment-quote::before { 361 content: 'â'; 362 position: absolute; 363 top: -14px; 364 left: 20px; 365 font-size: 36px; 366 color: var(--gold); 367 line-height: 1; 368 } 369 .parchment-quote p { 370 font-family: 'Playfair Display', serif; 371 font-style: italic; 372 font-size: clamp(15px, 1.8vw, 18px); 373 line-height: 1.7; 374 color: var(--cream); 375 margin: 0 0 16px; 376 } 377 .parchment-quote cite { 378 font-size: 12px; 379 letter-spacing: 2px; 380 text-transform: uppercase; 381 color: var(--gold); 382 font-style: normal; 383 } 384 385 /* âââ STAT CARDS GRID âââââââââââââââââââââââââââââââââââââââââ */ 386 .stat-cards { 387 display: grid; 388 grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); 389 gap: 28px; 390 margin: 52px 0; 391 } 392 .stat-card { 393 background: rgba(255,255,255,0.04); 394 border: 1px solid rgba(255,255,255,0.09); 395 border-radius: 12px; 396 padding: 32px 24px; 397 text-align: center; 398 transition: all 0.25s; 399 } 400 .stat-card:hover { 401 background: rgba(255,255,255,0.08); 402 border-color: rgba(201,168,76,0.3); 403 transform: translateY(-4px); 404 box-shadow: 0 12px 40px rgba(0,0,0,0.3); 405 } 406 .stat-card-icon { 407 font-size: 40px; 408 margin-bottom: 16px; 409 } 410 .stat-card-label { 411 font-family: 'Cinzel', serif; 412 font-size: 14px; 413 letter-spacing: 2px; 414 text-transform: uppercase; 415 color: var(--gold); 416 margin-bottom: 8px; 417 } 418 .stat-card-number { 419 font-family: 'Playfair Display', serif; 420 font-size: 32px; 421 font-weight: 700; 422 color: var(--gold2); 423 line-height: 1.1; 424 margin-bottom: 8px; 425 } 426 .stat-card-text { 427 font-size: 14px; 428 color: rgba(255,255,255,0.6); 429 line-height: 1.6; 430 } 431 432 /* âââ CONTENT CARDS (How to Celebrate) ââââââââââââââââââââââââ */ 433 .content-cards { 434 display: grid; 435 grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); 436 gap: 24px; 437 margin: 52px 0; 438 } 439 .content-card { 440 background: rgba(255,255,255,0.04); 441 border: 1px solid rgba(255,255,255,0.09); 442 border-radius: 12px; 443 padding: 28px 24px; 444 transition: all 0.25s; 445 } 446 .content-card:hover { 447 background: rgba(255,255,255,0.08); 448 border-color: rgba(201,168,76,0.3); 449 transform: translateY(-3px); 450 box-shadow: 0 12px 40px rgba(0,0,0,0.3); 451 } 452 .content-card-icon { 453 font-size: 36px; 454 margin-bottom: 12px; 455 } 456 .content-card-title { 457 font-family: 'Playfair Display', serif; 458 font-size: 18px; 459 font-weight: 700; 460 color: var(--gold2); 461 margin-bottom: 8px; 462 } 463 .content-card-text { 464 font-size: 14px; 465 color: rgba(255,255,255,0.6); 466 line-height: 1.65; 467 } 468 .content-card a { 469 color: var(--gold2); 470 text-decoration: none; 471 transition: opacity 0.2s; 472 } 473 .content-card a:hover { opacity: 0.8; text-decoration: underline; } 474 475 /* âââ COUNTDOWN âââââââââââââââââââââââââââââââââââââââââââââââ */ 476 .countdown-box { 477 background: linear-gradient(135deg, rgba(201,168,76,0.15), rgba(178,34,52,0.1)); 478 border: 1px solid rgba(201,168,76,0.25); 479 border-radius: 12px; 480 padding: 40px 32px; 481 text-align: center; 482 margin: 52px 0; 483 max-width: 500px; 484 margin-left: auto; 485 margin-right: auto; 486 } 487 .countdown-label { 488 font-family: 'Cinzel', serif; 489 font-size: 13px; 490 letter-spacing: 3px; 491 text-transform: uppercase; 492 color: var(--gold); 493 margin-bottom: 12px; 494 } 495 .countdown-text { 496 font-family: 'Playfair Display', serif; 497 font-size: clamp(28px, 5vw, 42px); 498 font-weight: 900; 499 color: var(--gold2); 500 line-height: 1.1; 501 } 502 503 /* âââ WATERMARK TEXT ââââââââââââââââââââââââââââââââââââââââââ */ 504 .watermark-section { 505 position: relative; 506 overflow: hidden; 507 } 508 .watermark-section::before { 509 content: '250'; 510 position: absolute; 511 top: 50%; 512 left: 50%; 513 transform: translate(-50%, -50%); 514 font-family: 'Playfair Display', serif; 515 font-size: clamp(180px, 30vw, 340px); 516 font-weight: 900; 517 color: rgba(201,168,76,0.05); 518 pointer-events: none; 519 white-space: nowrap; 520 } 521 522 /* âââ FOOTER ââââââââââââââââââââââââââââââââââââââââââââââââââ */ 523 footer { 524 background: #060E1A; 525 border-top: 1px solid rgba(201,168,76,0.12); 526 padding: 48px 0 32px; 527 text-align: center; 528 } 529 .footer-brand { 530 font-family: 'Cinzel', serif; 531 font-size: 20px; 532 color: var(--gold2); 533 margin-bottom: 12px; 534 letter-spacing: 2px; 535 } 536 .footer-tagline { 537 font-size: 13px; 538 color: rgba(255,255,255,0.35); 539 letter-spacing: 1px; 540 margin-bottom: 28px; 541 } 542 .footer-links { display: flex; justify-content: center; gap: 24px; margin-bottom: 28px; flex-wrap: wrap; } 543 .footer-links a { color: rgba(255,255,255,0.4); text-decoration: none; font-size: 13px; transition: color 0.2s; } 544 .footer-links a:hover { color: var(--gold2); } 545 .footer-copy { font-size: 12px; color: rgba(255,255,255,0.2); } 546 547 /* âââ MEDIA QUERIES âââââââââââââââââââââââââââââââââââââââââââ */ 548 @media (max-width: 768px) { 549 .stat-cards, .content-cards { grid-template-columns: 1fr; } 550 } 551 552 </style> 553</head> 554<body> 555 556<!-- Starfield --> 557<div class="stars-bg"></div> 558 559<!-- âââ NAVIGATION ââââââââââââââââââââââââââââââââââââââââââââââââ --> 560<nav id="nav"> 561 <div class="container nav-inner"> 562 <a href="index.html" class="nav-brand">Declaration Song</a> 563 <ul class="nav-links"> 564 <li><a href="index.html">Home</a></li> 565 <li><a href="about.html">Our Story</a></li> 566 <li><a href="teachers.html">For Teachers</a></li> 567 <li><a href="anniversary.html" class="active">America 250</a></li> 568 <li><a href="index.html#faq">FAQ</a></li> 569 </ul> 570 </div> 571</nav> 572 573<!-- âââ HERO ââââââââââââââââââââââââââââââââââââââââââââââââââââââ --> 574<section id="hero"> 575 <div class="hero-content"> 576 <div class="anniversary-badge">
577 <span class="star">â </span> 578 Semiquincentennial School Year · 2026â27 579 <span class="star">â </span> 580 </div> 581 <h1>America Is 250</h1> 582 <p class="hero-sub"> 583 July 4, 2026 marked the anniversary. The work continues in classrooms: Celebrate Freedom Week, Constitution Day, and every student who still needs the founding words by heart. 584 </p> 585 <div class="hero-cta-group"> 586 <a href="teachers.html" class="btn btn-primary"> 587 <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M2 1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1H2c-.55 0-1-.45-1-1V2c0-.55.45-1 1-1zm0 1v11h12V2H2z"/></svg> 588 Teacher Resources 589 </a> 590 <a href="teachers.html#downloads" class="btn btn-gold"> 591 Free Worksheets 592 </a> 593 <a href="index.html#listen" class="btn btn-outline"> 594 <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M3 2.5l10 5.5-10 5.5V2.5z"/></svg> 595 Listen / Buy Album 596 </a> 597 </div> 598 </div> 599 <div class="scroll-down"> 600 <span>Scroll</span> 601 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 602 <path d="M12 5v14M19 12l-7 7-7-7"/> 603 </svg> 604 </div> 605</section> 606 607<!-- âââ THE WORDS THAT STARTED IT ALL ââââââââââââââââââââââââââââ --> 608<section class="section watermark-section"> 609 <div class="container"> 610 <div class="section-header"> 611 <p class="section-label">The Preamble</p> 612 <h2 class="section-title">The Words That Started It All</h2> 613 </div> 614 615 <div class="parchment-quote"> 616 <p>We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty and the pursuit of Happiness.</p> 617 <cite>Declaration of Independence, July 4, 1776</cite> 618 </div> 619 620 <p style="text-align: center; font-size: 17px; color: rgba(255,255,255,0.68); max-width: 720px; margin: 40px auto 0; line-height: 1.7;"> 621 These 35 words launched a revolution. They have inspired freedom movements worldwide. Yet fewer and fewer Americans â students especially â can recite them from memory. 622 </p> 623 </div> 624</section> 625 626<!-- âââ WHY IT MATTERS NOW ââââââââââââââââââââââââââââââââââââââââ --> 627<section class="section"> 628 <div class="container"> 629 <div class="section-header"> 630 <p class="section-label">Impact</p> 631 <h2 class="section-title">Why It Matters Now</h2> 632 <div class="divider"></div> 633 </div> 634 635 <div class="stat-cards"> 636 <div class="stat-card"> 637 <div class="stat-card-icon">ð</div> 638 <div class="stat-card-label">250 Years</div> 639 <div class="stat-card-number">The school year of America 250.</div> 640 <div class="stat-card-text">July 4 opened the Semiquincentennial. Classrooms carry it through 2026â27 â the last milestone like this was the 1976 bicentennial.</div> 641 </div> 642 <div class="stat-card"> 643 <div class="stat-card-icon">ð«</div> 644 <div class="stat-card-label">50,000+ Students</div> 645 <div class="stat-card-number">Have learned the opening words</div> 646 <div class="stat-card-text">through The Declaration of Independence Song since 2001.</div> 647 </div> 648 <div class="stat-card"> 649 <div class="stat-card-icon">ðµ</div> 650 <div class="stat-card-label">2 Songs</div> 651 <div class="stat-card-number">For every age level</div> 652 <div class="stat-card-text">The full Declaration (grades 4+) and the Declaration Sing-Along (Kâ3) make this accessible to all.</div> 653 </div> 654 </div> 655 </div> 656</section> 657 658<!-- âââ THE SEMIQUINCENTENNIAL ââââââââââââââââââââââââââââââââââââ --> 659<section class="section" style="background: linear-gradient(180deg, var(--navy) 0%, #071529 100%); position: relative; overflow: hidden;"> 660 <div class="container"> 661 <div class="section-header"> 662 <p class="section-label">250th Anniversary</p> 663 <h2 class="section-title">What Is the Semiquincentennial?</h2> 664 <div class="divider"></div> 665 </div> 666 667 <p style="font-size: 17px; color: rgba(255,255,255,0.68); max-width: 720px; margin: 0 auto 24px; line-height: 1.75; text-align: center;"> 668 On July 4, 2026, America marked 250 years of independence â a <strong>semiquincentennial</strong>. Congress established the <a href="https://america250.org" target="_blank" rel="noopener" style="color: var(--gold2); text-decoration: none; border-bottom: 1px solid rgba(212,175,55,0.4);">America250 Commission</a> to lead the national commemoration, and schools are still using the 2026â27 year to teach the founding documents. 669 </p> 670 671 <p style="font-size: 17px; color: rgba(255,255,255,0.68); max-width: 720px; margin: 0 auto; line-height: 1.75; text-align: center;"> 672 <strong>The Declaration of Independence Song is a classroom companion for that school year</strong> â verbatim text set to music, not a pop anthem about independence. Students can memorize and recite the opening of the Declaration itself. 673 </p> 674 </div> 675</section> 676 677<!-- âââ HOW TO CELEBRATE ââââââââââââââââââââââââââââââââââââââââââ --> 678<section class="section"> 679 <div class="container"> 680 <div class="section-header"> 681 <p class="section-label">Celebrate America</p> 682 <h2 class="section-title">
682How to Use It This School Year</h2> 683 <div class="divider"></div> 684 </div> 685 686 <div class="content-cards"> 687 <div class="content-card"> 688 <div class="content-card-icon">ðµ</div> 689 <div class="content-card-title">Play It in Class</div> 690 <div class="content-card-text">Preview a sample on <a href="https://www.youtube.com/watch?v=CMsLCpGgJZE" target="_blank" rel="noopener">YouTube</a>, then <a href="index.html#buy">buy the album</a> for the complete tracks offline â no ads, no Wi-Fi required.</div> 691 </div> 692 693 <div class="content-card"> 694 <div class="content-card-icon">ð</div> 695 <div class="content-card-title">Download Worksheets</div> 696 <div class="content-card-text">Free fill-in-the-blank worksheets for grades Kâ3 and 4+ are on the <a href="teachers.html#downloads">Teacher Resources</a> page.</div> 697 </div> 698 699 <div class="content-card"> 700 <div class="content-card-icon">ð</div> 701 <div class="content-card-title">Celebrate Freedom Week</div> 702 <div class="content-card-text">Texas and many other states teach the Declaration the week of Constitution Day. In 2026 that window is about <strong>September 14â20</strong>, including grades 3â12 recitation.</div> 703 </div> 704 705 <div class="content-card"> 706 <div class="content-card-icon">ð </div> 707 <div class="content-card-title">Constitution Day / Week</div> 708 <div class="content-card-text">September 17 is Constitution Day. Use the verbatim song for assemblies, morning meetings, and choir â not a countdown to a date that has already passed.</div> 709 </div> 710 </div> 711 </div> 712</section> 713 714<!-- âââ NEXT CLASSROOM WINDOW ââââââââââââââââââââââââââââââââââââ --> 715<section class="section"> 716 <div class="container"> 717 <div class="countdown-box"> 718 <div class="countdown-label">Next classroom window</div> 719 <div class="countdown-text">Sept 14â20, 2026</div> 720 <p style="margin-top:16px; color:rgba(255,255,255,0.65); font-size:15px; line-height:1.6;"> 721 Celebrate Freedom Week / Constitution Day · No live countdown 722 </p> 723 </div> 724 </div> 725</section> 726 727<!-- âââ HELP AMERICA REMEMBER CTA ââââââââââââââââââââââââââââââââ --> 728<section class="section" style="background: linear-gradient(180deg, #071529 0%, var(--navy2) 100%);"> 729 <div class="container"> 730 <div class="section-header"> 731 <h2 class="section-title">Help America Remember</h2> 732 <p class="section-desc" style="font-size: 18px; margin-bottom: 36px;"> 733 Share the Declaration of Independence Song this school year. Together, we can make sure the next generation knows these founding words by heart. 734 </p> 735 </div> 736 737 <div style="text-align: center;"> 738 <a href="https://www.facebook.com/declarationsong" class="btn btn-primary" target="_blank" rel="noopener" style="display: inline-flex; align-items: center; gap: 8px; margin-bottom: 28px;"> 739 <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg> 740 Follow on Facebook 741 </a> 742 </div> 743 744 <div style="display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 20px;"> 745 <a 746 href="https://twitter.com/intent/tweet?text=Over%2050%2C000%20students%20have%20learned%20the%20Declaration%20of%20Independence%20through%20this%20song!%20%F0%9F%8E%B5%F0%9F%87%BA%F0%9F%87%B8%20Verbatim%20text%20for%20Celebrate%20Freedom%20Week.&url=https%3A%2F%2Fdeclarationsong.com" 747 class="btn btn-outline" style="display: inline-flex; align-items: center; gap: 6px; padding: 12px 20px; font-size: 14px;" 748 target="_blank" rel="noopener"> 749 <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.23
7491H2.747l7.73-8.835L1.254 2.25H8.08l4.259 5.63zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg> 750 Share on X 751 </a> 752 753 <a 754 href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdeclarationsong.com%2Fanniversary.html" 755 class="btn btn-outline" style="display: inline-flex; align-items: center; gap: 6px; padding: 12px 20px; font-size: 14px;" 756 target="_blank" rel="noopener"> 757 <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg> 758 Share on Facebook 759 </a> 760 761 <a href="/cdn-cgi/l/email-protection#5c632f293e36393f2861083439796e6c18393f303d2e3d28353332796e6c333a796e6c153238392c39323839323f39796e6c0f33323b7a3e3338256115796e6c283433293b3428796e6c253329796e6b38796e6c30332a39796e6c2834352f796e6c79196e79646c796568796e6c083439796e6c18393f303d2e3d28353332796e6c333a796e6c153238392c39323839323f39796e6c0f33323b796e6c2f39282f796e6c283439796e6c3a352e2f28796e6c6e6c6c796e6c2b332e382f796e6c333a796e6c1d31392e353f3d7b2f796e6c3a3329323835323b796e6c38333f2931393228796e6c2833796e6c31292f353f796e1f796e6c2b332e38796e6c3a332e796e6c2b332e3872796e6c0c392e3a393f28796e6c3a332e796e6c1f3930393e2e3d2839796e6c1a2e3939383331796e6c0b39393772796c1d796c1d3428282c2f796f1d796e1a796e1a38393f303d2e3d283533322f33323b723f3331796e1a3d3232352a392e2f3d2e257234283130" class="btn btn-outline" style="display: inline-flex; align-items: center; gap: 6px; padding: 12px 20px; font-size: 14px;"> 762 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg> 763 Email a Friend 764 </a> 765 766 <button class="btn btn-outline" style="display: inline-flex; align-items: center; gap: 6px; padding: 12px 20px; font-size: 14px;" onclick="copyLink()"> 767 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg> 768 Copy Link 769 </button> 770 </div> 771 <p id="copy-confirm" style="display: none; color: var(--gold2); font-size: 13px; text-align: center; margin-top: 12px; letter-spacing: 1px;">â Link copied to clipboard!</p> 772 </div> 773</section> 774 775<!-- âââ FOOTER âââââââââââââââââââââââââââââââââââââââââââââââââââââ --> 776<footer> 777 <div class="container"> 778 <div class="footer-brand">Declaration Song</div> 779 <div class="footer-tagline">America's Founding Words · Set to Music</div> 780 <div class="footer-links"> 781 <a href="index.html">Home</a> 782 <a href="about.html">Our Story</a> 783 <a href="teachers.html">For Teachers</a> 784 <a href="anniversary.html">America 250</a> 785 <a href="index.html#faq">FAQ</a> 786 <a href="https://www.facebook.com/declarationsong" target="_blank" rel="noopener">Facebook</a> 787 <a href="/cdn-cgi/l/email-protection#a9c3c8cac2cbc6d0cde9cdcccac5c8dbc8ddc0c6c7dac6c7ce87cac6c4">Contact</a> 788 </div> 789 <div class="footer-copy"> 790 © <span id="year"></span> DeclarationSong.com · All rights reserved 791 </div> 792 </div> 793</footer> 794 795<!-- âââ JAVASCRIPT âââââââââââââââââââââââââââââââââââââââââââââââââ -->
vendor: 109 bytes, lines 795-796
795 796<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
796<script> 797 // Dynamic year in footer 798 document.getElementById('year').textContent = new Date().getFullYear(); 799 800 // Sticky nav background on scroll 801 const nav = document.getElementById('nav'); 802 window.addEventListener('scroll', () => { 803 nav.classList.toggle('scrolled', window.scrollY > 40); 804 }, { passive: true }); 805 806 // Copy link to clipboard 807 function copyLink() { 808 const url = window.location.href.split('#')[0]; 809 navigator.clipboard.writeText(url).then(() => { 810 const confirm = document.getElementById('copy-confirm'); 811 confirm.style.display = 'block'; 812 setTimeout(() => { confirm.style.display = 'none'; }, 3000); 813 }); 814 } 815 816 // Smooth reveal on scroll (Intersection Observer) 817 const observer = new IntersectionObserver((entries) => { 818 entries.forEach(e => { 819 if (e.isIntersecting) { 820 e.target.style.opacity = '1'; 821 e.target.style.transform = 'translateY(0)'; 822 } 823 }); 824 }, { threshold: 0.1 }); 825 826 document.querySelectorAll('.stat-card, .content-card').forEach(el => { 827 el.style.opacity = '0'; 828 el.style.transform = 'translateY(20px)'; 829 el.style.transition = 'opacity 0.55s ease, transform 0.55s ease'; 830 observer.observe(el); 831 }); 832 833</script>
833 834
835<script>(function(){function c(){var b=a.contentDocument||(a.contentWindow&&a.contentWindow.document);if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'a4028c926b43a204',t:'MTc5MDI2MDg3Nw=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script>
835<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"15c4593af4ac43618a86d8bb7a7c67f4","r":1,"spa":2}' crossorigin="anonymous"></script>
835 836</body> 837</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.