Skills Assessments

Green Book HTML + CSS

Index
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The Green Book Digital Archive</title>
<!-- External stylesheet: keep this file empty for now; we'll add CSS later -->
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<!-- Google Fonts-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav>
<ul>
<li><a href="index.html" class="current">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="history.html">History</a></li>
<li><a href="locations.html">Locations</a></li>
</ul>
</nav>

<h1>Welcome to the Green Book Digital Archive</h1>
<p>
Preserving the history of <strong>safe travel</strong> for Black Americans during
<a href="https://en.wikipedia.org/wiki/Racial_segregation_in_the_United_States" target="_blank" rel="noopener noreferrer">segregation</a>.
</p>

<!-- Video -->
<section>
<h2>The Green Book Explained</h2>
<iframe width="560" height="315"
src="https://www.youtube.com/embed/QIZLDmF_vko?si=cbauwo-5A2DE_4YH"
title="Introduction to the Green Book"
frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
</section>

<!-- What Was the Green Book -->
<section>
<h2>What Was the Green Book</h2>
<p>
The <em>Negro Motorist Green Book</em> was a travel guide published between 1936 and 1966
to help Black travelers find safe accommodations, restaurants, and businesses.
</p>

<blockquote>
"There will be a day sometime in the near future when this guide will not have to be published."
– Victor Hugo Green
</blockquote>

<!-- Figure 1: local image with caption + citation -->
<figure class="media">
<a href="https://digitalcollections.nypl.org/items/47e874a0-1a74-0132-a7fb-58d385a7bbd0" target="_blank" rel="noopener noreferrer">
<img src="greenbook_1941.jpg"
alt="The Negro Motorist Green Book, 1941 cover"
class="highlight-img">
</a>
<figcaption>
Figure 1. Cover of the 1941 edition. Source:
<a href="https://digitalcollections.nypl.org/items/47e874a0-1a74-0132-a7fb-58d385a7bbd0" target="_blank" rel="noopener noreferrer">NYPL Digital Collections</a>
</figcaption>
</figure>

<!-- Figure 2: web image with gradient frame (class applied later in CSS) -->
<figure class="media">
<a href="https://digitalcollections.nypl.org/items/47e874a0-1a74-0132-a7fb-58d385a7bbd0" target="_blank" rel="noopener noreferrer">
<img src="https://iiif.nypl.org/iiif/3/5206294/full/max/0/default.jpg"
alt="Scanned 1941 Green Book cover"
class="highlight-img">
</a>
<figcaption>
Figure 2. NYPL scan of the 1941 cover. Source:
<a href="https://digitalcollections.nypl.org/items/47e874a0-1a74-0132-a7fb-58d385a7bbd0" target="_blank" rel="noopener noreferrer">NYPL Digital Collections</a>
</figcaption>
</figure>
</section>

<!-- Lists (variations) -->
<section>
<h2>Major Historical Milestones</h2>
<ol class="roman-list">
<li>1936 — First edition published in New York City</li>
<li>1948 — Expanded to nationwide coverage</li>
<li>1966 — Final edition following civil rights legislation</li>
</ol>
</section>

<section>
<h2>Steps to Using the Green Book</h2>
<ol class="numeric-list">
<li>Find your destination.</li>
<li>Locate safe hotels and restaurants.</li>
<li>Plan your route using listed locations.</li>
<li>Enjoy safe travels!</li>
</ol>
</section>

<section class="locations-section">
<h2>Safe Locations Listed in the Green Book</h2>
<ul class="circle-list">
<li><a href="https://en.wikipedia.org/wiki/Hotel_Theresa" target="_blank" rel="noopener noreferrer">Hotel Theresa — New York City, NY</a></li>
<li>Astor Motel — Chicago, IL</li>
<li>The Dew Drop Inn — New Orleans, LA</li>
<li><a href="https://www.thejaxsonmag.com/article/jacksonvilles-four-surviving-green-book-sites/" target="_blank" rel="noopener noreferrer">Sanders Hotel — Jacksonville, FL</li>
</ul>
</section>

<footer>
<p><small>© 2025 – The Green Book Digital Archive</small></p>
</footer>

</body>
</html>
About
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>About — The Green Book Digital Archive</title>
<!-- External stylesheet: keep this file empty for now; we'll add CSS later -->
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html" class="current">About</a></li>
<li><a href="history.html">History</a></li>
<li><a href="locations.html">Locations</a></li>
</ul>
</nav>

<h1>About the Project</h1>
<p>
Our goal is to preserve and teach the story of <strong>safe travel</strong> for Black Americans during
<a href="https://en.wikipedia.org/wiki/Racial_segregation_in_the_United_States" target="_blank" rel="noopener noreferrer">segregation</a>,
using the <em>Negro Motorist Green Book</em> as a guide.
</p>

<section>
<h2>What This Archive Covers</h2>
<ul class="circle-list">
<li>Context: how and why the Green Book was created</li>
<li>People: Victor Hugo Green and community networks</li>
<li>Places: hotels, restaurants, and service stations</li>
<li>Practices: mapping routes and planning safe travel</li>
</ul>
</section>

<section>
<h2>Credits & Sources</h2>
<figure class="media">
<a href="https://digitalcollections.nypl.org/items/47e874a0-1a74-0132-a7fb-58d385a7bbd0" target="_blank" rel="noopener noreferrer">
<img src="https://iiif.nypl.org/iiif/3/5206294/full/max/0/default.jpg"
alt="Green Book 1941 cover (NYPL)"
class="highlight-img img-medium">
</a>
<figcaption>
Figure A. NYPL scan of the 1941 <em>Green Book</em>.
Source: <a href="https://digitalcollections.nypl.org/items/47e874a0-1a74-0132-a7fb-58d385a7bbd0" target="_blank" rel="noopener noreferrer">NYPL Digital Collections</a>
</figcaption>
</figure>
</section>

<section>
<h2>How Students Can Contribute</h2>
<ol class="numeric-list">
<li>Add citations and improve captions.</li>
<li>Suggest additional locations and oral histories.</li>
<li>Experiment with design—colors, type, layouts.</li>
<li>Document your process for future classes.</li>
</ol>
</section>

<footer>
<p><small>© 2025 – The Green Book Digital Archive</small></p>
</footer>

</body>
</html>
History
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>History — The Green Book Digital Archive</title>
<!-- External stylesheet: keep this file empty for now; we'll add CSS later -->
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="history.html" class="current">History</a></li>
<li><a href="locations.html">Locations</a></li>
</ul>
</nav>

<h1>History of the Green Book</h1>
<p>
The <em>Negro Motorist Green Book</em> (1936–1966) helped Black travelers navigate a segregated nation by listing
hotels, restaurants, and service stations where they could expect safety and dignity.
</p>

<section>
<h2>Origins & Purpose</h2>
<p>
Created by <strong>Victor Hugo Green</strong>, a postal worker from Harlem, the guide began as a local listing
and expanded nationally as automobile travel grew more common.
</p>
<blockquote>
“There will be a day sometime in the near future when this guide will not have to be published.” — Victor Hugo Green
</blockquote>
</section>

<section>
<h2>Timeline of Key Milestones</h2>
<ol class="roman-list">
<li>1936 — First edition published in New York City</li>
<li>1948 — Expanded to nationwide coverage</li>
<li>1966 — Final edition following civil rights legislation</li>
</ol>
</section>

<section>
<h2>Green Book Trivia</h2>
<ul class="circle-list">
<li>By 1962, the <em>Green Book</em> had a national circulation of over 2 million copies <a href="https://www.nps.gov/articles/000/the-green-book-an-historic-context.htm"target="_blank" rel="noopener noreferrer">
(NPS)
</a>. </li>
<li>Information collected by a network of fellow postal workers is what initially made it possible for Victor Green to give the <em>Green Book</em> its national scope (Ibid).</li>
<li>A fictional version of the <em>Green Book</em> is featured in the 2020 HBO series <em>Lovecraft Country</em> when the protagonists drive from Chicago to New England. </li>
</ul>
</section>

<section>
<h2>Violence in the Civil Rights Era</h2>
<ol class="roman-list">
<li>1960 — <a href="https://www.jacksonville.com/story/news/local/2020/06/20/what-happened-on-ax-handle-saturday-aug-27-1960-in-jacksonville/112301630/?gnt-cfr=1&gca-cat=p&gca-uir=true&gca-epti=z114905e001400v114905b0049xxd004965&gca-ft=116&gca-ds=sophi" target="_blank" rel="noopener noreferrer"> Ax Handle Saturday. </a> A white mob in Jacksonville, FL attacks sit-in protestors with ax handles and baseball bats. </li>
<li>1961 — The first <a href= "https://kinginstitute.stanford.edu/freedom-rides" target="_blank" rel="noopener noreferrer"> Freedom Ride </a> is organized by CORE. Black and white participants encounter harrassment and violence. </li>
<li>1964 — Civil Rights activists <a "href=https://www.pbs.org/wgbh/americanexperience/features/freedomsummer-murder/" target="_blank" rel="noopener noreferrer">Chaney, Goodman, and Schwerner</a> are murdered by K.K.K. affiliates in Neshoba County, MI. </li>
</ol>
</section>

<section>
<h2>Oral History</h2>
<iframe width="560" height="315"
src="https://www.youtube.com/embed/QYsHkPx9mn0"
title="
'Negro Motorist Green Book' Oral Histories: Dr. Angenita Brown"
frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
</section>

<section>


</section>

<section>
<h2>Further Reading</h2>
<ul class="circle-list">
<li>
<a href="https://en.wikipedia.org/wiki/Racial_segregation_in_the_United_States" target="_blank" rel="noopener noreferrer">
Segregation in the United States (Wikipedia)
</a>
</li>
<li>
<a href="https://digitalcollections.nypl.org/" target="_blank" rel="noopener noreferrer">
NYPL Digital Collections
</a>
</li>
<li>
<a href="https://www.nps.gov/articles/000/the-green-book-an-historic-context.htm"target="_blank" rel="noopener noreferrer">
The Green Book: An Historic Context
</a>
</li>
</ul>
</section>

<footer>
<p><small>© 2025 – The Green Book Digital Archive</small></p>
</footer>

</body>
</html>
Locations
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Locations — The Green Book Digital Archive</title>
<!-- External stylesheet: keep this file empty for now; we'll add CSS later -->
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="history.html">History</a></li>
<li><a href="locations.html" class="current">Locations</a></li>
</ul>
</nav>

<h1>Locations Listed in the Green Book</h1>
<p>
Many establishments welcomed Black travelers and advertised in the guide. These lists give a sampling and
teach how to style different bullet and number formats with CSS classes.
</p>

<section class="locations-section">
<h2>Featured Cities</h2>
<ul class="emoji-list">
<li>
<a href="https://en.wikipedia.org/wiki/Hotel_Theresa" target="_blank" rel="noopener noreferrer">
Hotel Theresa — New York City, NY
</a>
</li>
<li>Astor Motel — Chicago, IL</li>
<li>The Dew Drop Inn — New Orleans, LA</li>
<li><a href="https://www.thejaxsonmag.com/article/jacksonvilles-four-surviving-green-book-sites/" target="_blank" rel="noopener noreferrer">Sanders Hotel — Jacksonville, FL</a></li>
</ul>
</section>

<section>
<h2>Planning Steps</h2>
<ol class="numeric-list">
<li>Find your destination.</li>
<li>Locate safe hotels and restaurants.</li>
<li>Plan your route using listed locations.</li>
<li>Enjoy safe travels!</li>
</ol>
</section>

<section>
<h2>Gallery</h2>
<figure class="media">
<a href="https://www.jacksonville.com/picture-gallery/news/2019/06/14/12-most-endangered-buildings-in/68092607007/" target="_blank" rel="noopener noreferrer">
<img src="wynnhotel_lenapebar.jpg" alt="Black and white photograph of a two-story brick building on a street corner. A sign reads 'LENAPE BAR.' Two small cars decorated for a parade and packed with people pass by. A small crowd observes from the sidewalk."
class="highlight-img img-large">
</a>
<figcaption>The Sanders Hotel (2nd floor) and Lenape Bar and Grill (1st) at 644 West Ashley St., c. 1950. Source: Florida Times Union, courtesy of La Villa Cultural Museum. </figcaption>
</figure>

<figure class="media">
<a href="https://digitalcollections.nypl.org/items/47e874a0-1a74-0132-a7fb-58d385a7bbd0" target="_blank" rel="noopener noreferrer">
<img src="https://iiif.nypl.org/iiif/3/5206294/full/max/0/default.jpg"
alt="Green Book 1941 cover (NYPL)"
class="highlight-img img-large">
</a>
<figcaption>Web image with gradient highlight frame (CSS later).</figcaption>
</figure>
</section>

<footer>
<p><small>© 2025 – The Green Book Digital Archive</small></p>
</footer>

</body>
</html>
CSS
:root {
/* Layout sizing */
--max-width: 960px; /* readable line length */
--gutter-x: clamp(16px, 4vw, 56px); /* page side padding that adapts */

/* Moody Vintage Forest palette (from your swatches) */
--paper: #F4EDE4; /* lightest tone → page background */
--ink: #102F19; /* darkest tone → main text */
--brand: #1C7240; /* nav + heading emphasis */
--frame: #1C7240; /* borders/frames/accents */
--pop: #A4A69C; /* hover, subtle highlight */

/* Derived tones */
--brand-dark: #102F19; /* darker partner for nav gradient */
--muted: #102F19; /* captions/secondary text */
--rule: #A4A69C; /* soft lines for borders */

/* Depth & motion */
--shadow-soft: 0 4px 10px rgba(0,0,0,.08); /* gentle lift */
--shadow: 0 8px 20px rgba(0,0,0,.14); /* deeper on hover */
--t-fast: 120ms;
--t-med: 200ms;
}

/* ============ 2) BASE & CENTERING ============ */
/* box-sizing makes padding/borders predictable */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; } /* nicer jumps for in-page links */

/* Page defaults: background, type, gutters */
body {
margin: 0;
padding: 16px var(--gutter-x); /* page gutters so content never kisses edges */
background: var(--paper);
color: var(--ink);
font: 16px/1.7 'Merriweather', serif; /* link Google Fonts in HTML */
}

/* Constrain and center top-level blocks to the same width */
nav, h1, h1 + p, section, footer {
max-width: var(--max-width);
margin-inline: auto; /* centers horizontally in the page */
}

/* ============ 3) NAVIGATION ============ */
/* A centered “card” nav with a subtle gradient and hover feedback */
nav {
background: linear-gradient(135deg, var(--brand), var(--brand-dark));
box-shadow: var(--shadow-soft);
margin: 8px auto 26px; /* space above/below */
}
nav ul {
list-style: none;
margin: 0;
padding: 12px;
display: flex;
justify-content: center; /* real centering */
gap: 18px 22px; /* row & wrap spacing */
flex-wrap: wrap; /* wrap on small screens */
}
nav a {
color: #fff;
text-decoration: none;
font: 700 17px 'Monteserrat', sans-serif;
letter-spacing: .2px;
padding: 8px 12px; /* larger click target */
transition: background-color var(--t-med) ease, transform var(--t-fast) ease;
}
nav a:hover,
nav a:focus-visible {
background: rgba(255,255,255,.18); /* visible but tasteful */
transform: translateY(-1px); /* tiny “lift” */
outline: none;
}
/* Mark the current page link in the HTML with class="current" */
nav a.current {
background: rgba(255,255,255,.28);
box-shadow: inset 0 0 0 2px rgba(255,255,255,.22);
}

/* ============ 4) TITLE & TAGLINE ============ */
/* h1 is centered and uses the display font */
h1 {
font-family: 'Oswald', sans-serif;
color: var(--brand);
font-size: clamp(30px, 4.8vw, 46px); /* fluid sizing */
text-align: center;
margin: 0 auto 10px;
padding: 10px 0;
letter-spacing: .2px;
}

/* The first <p> after <h1> becomes a standout “tagline card” */
h1 + p {
font-size: 18px;
font-weight: 500;
text-align: center;
max-width: 820px;
margin: 0 auto 24px;
padding: 16px 22px;

/* Brighter but on-palette gradient: light → sage → moss */
background: linear-gradient(135deg, #BFBFB8 0%, #A4A69C 55%, #4C594F 100%);

border: 1px solid var(--rule); /* thin border all around */
border-left: 8px solid var(--frame); /* accent stripe */
box-shadow: var(--shadow-soft);
color: var(--ink);
}

/* ============ 5) SECTIONS (CARDS) ============ */
/* White cards with gentle shadow; tiny hover lift for modern feel */
section {
background: #fff;
border: 1px solid var(--rule);
padding: 20px;
margin-block: 20px; /* space above and below each card */
box-shadow: var(--shadow-soft);
transition: box-shadow var(--t-med) ease, transform var(--t-fast) ease;
}
section:hover { box-shadow: var(--shadow); transform: translateY(-1px); }

/* Optional: a “ribbon” for locations sections (if you used that class) */
.locations-section, .locations-sections {
border-top: 4px solid var(--frame);
padding-top: 18px;
}

/* Subheadings use the display font and brand color for hierarchy */
h2, h3 {
font-family: 'Oswald', sans-serif;
color: var(--brand);
margin: 0 0 10px;
}
h2 { font-size: clamp(20px, 2.6vw, 28px); }
h3 { font-size: 20px; }

/* ============ 6) BLOCKQUOTE (CALLOUT) ============ */
/* Semantic quote with a left stripe and decorative quote mark */
blockquote {
margin: 16px auto;
padding: 14px 18px;
background: #fff;
border-left: 6px solid var(--frame);
box-shadow: var(--shadow-soft);
font-style: italic;
max-width: 880px;
position: relative;
}
blockquote::before {
content: "“";
font: 40px/1 Georgia, serif;
color: var(--frame);
opacity: .25;
position: absolute; left: 10px; top: -10px;
}

/* ============ 7) FIGURES & IMAGES ============ */
/* Default “photo mat” style: padding inside the border so it reads */
img {
display: block;
max-width: 320px; /* consistent default size */
height: auto;
margin: 22px auto;
padding: 12px; /* mat between image and frame */
border: 3px solid var(--frame);
background: #fff;
box-shadow: var(--shadow-soft);
transition: transform var(--t-med) ease, box-shadow var(--t-med) ease, filter var(--t-med) ease;
}
img:hover { transform: translateY(-2px) scale(1.01); box-shadow: var(--shadow); filter: saturate(1.03); }

figcaption {
text-align: center;
color: var(--muted);
font-size: .95rem;
margin-top: 6px;
}

/* A bolder gradient frame (use on Figure 2 with class="highlight-img") */
.highlight-img {
border: none; /* remove solid border */
padding: 16px; /* thicker mat inside gradient frame */
background: linear-gradient(135deg, var(--brand) 0%, var(--frame) 55%, var(--pop) 100%);
box-shadow: var(--shadow);
}

/* Optional size helpers you can stack with other classes */
.img-small { max-width: 200px; }
.img-medium { max-width: 260px; }
.img-large { max-width: 360px; }

/* ============ 8) LISTS & LINKS ============ */
/* Baseline spacing for lists */
ul, ol { padding-left: 50px; margin: .5rem 0 1rem; }
li { margin: 6px 0; }

/* Variants students can practice with */
.square-list { list-style: square; }
.circle-list { list-style: disc; }
.numeric-list { list-style: decimal; }
.roman-list { list-style: lower-roman; }

/* Colorize default markers (supported browsers) */
.square-list li::marker,
.circle-list li::marker,
.numeric-list li::marker,
.roman-list li::marker { color: var(--frame); }

/* Emoji bullets using ::before (no extra HTML elements) */
.emoji-list { list-style: none; padding-left: 25px; }
.emoji-list li { position: relative; padding-left: 28px; }
.emoji-list li::before { content: "📍"; position: absolute; left: 0; top: 0; }

/* Links: clear defaults, more visible on hover */
a {
color: var(--brand);
text-decoration: none;
transition: color var(--t-med) ease, text-decoration-color var(--t-med) ease;
}
p a, li a {
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: rgba(0,0,0,.25);
}
a:hover, a:focus-visible { color: var(--pop); text-decoration-color: var(--pop); outline: none; }

/* ============ 9) VIDEO (RESPONSIVE) ============ */
/* Keep embedded YouTube responsive without HTML changes */
iframe {
display: block;
width: 100%;
max-width: 820px;
aspect-ratio: 16 / 9;
height: auto;
margin: 14px auto;
border: 2px solid var(--frame);
box-shadow: var(--shadow-soft);
transition: box-shadow var(--t-med) ease, transform var(--t-fast) ease;
}
iframe:hover { box-shadow: var(--shadow); transform: translateY(-1px); }

/* ============ 10) FOOTER ============ */
footer {
text-align: center;
color: var(--muted);
font-weight: 600;
margin: 22px auto 8px;
}