UNIT 17 • STAGE 1 OF 7

The Foundation

Set up the design system, build the hero section, and add your navigation and section stubs

UNIT
STEP 1

Unit 17: The Termination Era

Unit 17 documents the Termination Era of federal Indian policy, from 1953 to 1968. You are building the sixth research site in the Federal Indian Policy Series. The design system, the structure, and the approach are the same as Units 11 through 15. The history is new, and it connects directly to the present in ways that are close to home for students in Minnesota, North Dakota, and South Dakota.

This unit covers two simultaneous federal policies. The first: termination, in which Congress voted to end federal recognition of 109 Tribal nations, dissolving their trust lands and withdrawing federal services. The second: BIA Urban Relocation, in which the Bureau of Indian Affairs actively recruited Native people to move from reservations to cities, including Minneapolis and St. Paul. These policies were different in mechanism but connected in purpose: both were aimed at ending the distinct legal and political status of Native people in the United States.

The thesis for this site

The thesis you are building toward across all seven stages: "The federal government tried to end its relationship with Tribal nations. The nations survived it." This is not a hopeful addition to the history. It is the factual record. Every nation terminated in this era continued to exist as a community. Most were eventually restored. The survival was not passive. It was organized, litigated, legislated, and argued for by specific people over decades.

New JavaScript pattern in this unit: IntersectionObserver

Stage 7 introduces the IntersectionObserver API. It watches elements on the page and fires a function when they scroll into view. You will use it to create scroll-activated fade-in animations on the Today section cards. For now, just know it is coming. Stages 1 through 6 are all HTML and CSS, same as in Units 11 through 15.

STEP 2

The Design System

Unit 17 uses the same Prussian blue archival palette as Units 11 through 15. The CSS custom property names (--gold, --rust, etc.) are carried forward for teaching continuity. The values point to the same blue-gray palette. Nothing changes from Unit 15's design system.

// Same palette as Units 11-15. Variable names carry forward. :root {
  --bg-main:     #0D1B2A;  /* Ink Black, page background */
  --bg-section:  #1B263B;  /* Prussian Blue, alt section background */
  --bg-card:    #0D1B2A;  /* Same as bg-main, cards blend with page */
  --text-light:  #E0E1DD;  /* Alabaster, primary text */
  --text-dim:   #778DA9;  /* Lavender Grey, secondary text */
  --text-muted:  #506070;  /* Dim, labels, captions */
  --gold:       #778DA9;  /* Accent color, borders, tags, icons */
  --gold-light:  #A8BDD0;  /* Lighter accent, hover states */
  --gold-dim:   rgba(65,90,119,0.14)/* Tinted background fill */
  --gold-border:rgba(119,141,169,0.22)/* 22% opacity, card borders */
  --rust:       #415A77;  /* Dusk Blue, used for accents */
}
STEP 3

Build the Hero Section

The hero follows the same structure as Units 11 through 15: two-column grid, era badge, large Playfair Display title, thesis description with a bolded closing line, resource links, and two CTA buttons.

  • Era badge: "1953 - 1968"
  • Title: "Termination"
  • Thesis closing line: "The policy tried to end the nations. It did not."
  • Resource links: National Archives HCR 108, Native American Rights Fund (narf.org), Smithsonian NMAI

House Concurrent Resolution 108 (1953)

HCR 108 was passed on August 1, 1953. It was not itself a law, it was a resolution expressing the "sense of Congress." But it established official federal policy: the goal was to end federal supervision over Tribal nations and subject Native people to the same laws and privileges as other American citizens, as rapidly as possible. The word "termination" was used by federal officials to describe the process of ending a Tribal nation's federal recognition. It became the defining name for the era.

Within two weeks of HCR 108, Congress passed Public Law 280, transferring criminal and civil jurisdiction over Indian Country in several states to state governments without Tribal consent. Two policy changes in two weeks in August 1953.

STEP 4

Add the Nav and Section Stubs

Add the fixed nav with the six section anchor links and build empty <div> stubs for all six sections. You will fill each section in Stages 2 through 7.

Nav links: #the-policy, #the-scale, #the-relocation, #the-nations, #my-research, #today

Stage 1 Complete!

The design system is set, the hero is built, and the nav and section stubs are in place. Stage 2 adds the Policy section: HCR 108, Public Law 280, the stated justification for termination, and the Dillon Myer history box.

Code Editor
Live Preview