HTML & CSS Skills Assessment


index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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=Archivo:wght@400;700&family=Libre+Baskerville:wght@400;700&display=swap" rel="stylesheet">
<title>The Green Book Digital Archive</title>
</head>
<body>
<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>
<div class="container">
<h1>Welcome to the Green Book Digital Archive</h1>
<p>
Honoring the legacy of <strong>safe travel</strong> for African Americans during the era of
<a href="https://en.wikipedia.org/wiki/Racial_segregation_in_the_United_States" target="_blank" rel="noopener noreferrer">segregation</a>.
</p>
<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>
<figure class="media">
<a href="https://ids.si.edu/ids/deliveryService?id=NMAAHC-2015_97_42_001&max_w=700" target="_blank" rel="noopener noreferrer">
<img src="https://ids.si.edu/ids/deliveryService?id=NMAAHC-2015_97_42_001&max_w=700" alt="The Negro Motorist Green Book, 1941 cover">
</a>
<figcaption>
Figure 1. Cover of the 1941 edition. Source:
<a href="https://ids.si.edu/ids/deliveryService?id=NMAAHC-2015_97_42_001&max_w=700" target="_blank" rel="noopener noreferrer">National Museum of African American History and Culture</a>
</figcaption>
</figure>
<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>
<li>1896 — Plessy v. Ferguson established “separate but equal”</li>
<li>1964 — Civil Rights Act passed, reducing segregation</li>
<li>1965 — Voting Rights Act, further dismantling Jim Crow laws</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="square-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://en.wikipedia.org/wiki/Colvin_House" target="_blank" rel="noopener noreferrer">Colvin House — Historic Green Book listed hotel, Los Angeles, CA</a></li>
</ul>
</section>
<section>
<h2>The Real Story of the Green Book</h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/b33PN2NB2Do?si=AnBGc15zJt2vdKLz" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</section>
<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>
"Carry your Green Book with you—You may need it."
– Victor Hugo Green
</blockquote>
<figure class="media">
<a href="https://digitalcollections.nypl.org/items/47e874a0-1a74-0132-a7fb-58d385a7bbd0" target="_blank" rel="noopener noreferrer">
<img src="https://cdn.britannica.com/42/201942-050-57DA92AE/Cover-The-Negro-Travelers-Green-Book.jpg" alt="The Negro Travelers' Green Book, 1956 cover">
</a>
<figcaption>
Figure 2. Cover of the 1956 edition. Source:
<a href="https://www.britannica.com/topic/The-Green-Book-travel-guide" target="_blank" rel="noopener noreferrer">Britannica</a>
</figcaption>
</figure>
</section>
<section>
<h2>Green Book Trivia</h2>
<ul class="emoji-list">
<li>By the 1950s, the guide listed over 15,000 businesses across the U.S., Canada, Mexico, and the Caribbean.</li>
<li>Postal workers helped compile listings by reporting safe locations along their routes.</li>
<li>The Esso Oil Company sponsored and sold the Green Book nationwide.</li>
<li>Many local Black-owned businesses were first publicly recognized through the Green Book.</li>
<li>Green Book editions were updated annually, reflecting the changing social landscape.</li>
<li>Victor Hugo Green, the founder, was a postal worker in Harlem.</li>
</ul>
</section>
<section>
<h2>Additional Historical Context</h2>
<ol class="roman-list">
<li>1896 — Plessy v. Ferguson legalized segregation under “separate but equal.”</li>
<li>1930s–1960s — Sundown towns required Black people to leave by nightfall, making guides essential.</li>
<li>1965 — Voting Rights Act and Civil Rights Act marked the beginning of the end of segregation.</li>
</ol>
</section>
<section>
<h2>Green Book Legacy Today</h2>
<p>
Modern exhibits and archives, including the Smithsonian and National Civil Rights Museum, showcase the Green Book as a cultural artifact.
Today, its legacy inspires conversations on safe travel, resilience, and community preservation.
</p>
<figure class="media">
<a href="https://upload.wikimedia.org/wikipedia/commons/5/5a/GreenBookBusiness.jpg" target="_blank" rel="noopener noreferrer">
<img src="https://upload.wikimedia.org/wikipedia/commons/5/5a/GreenBookBusiness.jpg" alt="Historic Green Book listed business exterior, Los Angeles, CA">
</a>
<figcaption>Historic Green Book–listed business, Los Angeles, CA.</figcaption>
</figure>
<iframe width="560" height="315" src="https://www.youtube.com/embed/0j3F-uwfI9Y" title="Black Travel History Video" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</section>
<footer>
<p><small>© 2025 – The Green Book Digital Archive</small></p>
</footer>
</div>
</body>
</html>
WikipediaWikipedia
Racial segregation in the United States
Facilities and services such as housing, healthcare, education, employment, and transportation have been systematically separated in the United States based on racial categorizations. Notably, racial segregation in the United States was the legally and/or socially enforced separation of African Americans from whites, as well as the separation of other ethnic minorities from majority communities. While mainly referring to the physical separation and provision of separate facilities, it can also refer to other manifestations such as prohibitions against interracial marriage (enforced with anti-miscegenation laws), and the separation of roles within an institution. The U.S. Armed Forces were fo… Show more
https://en.wikipedia.org/wiki/Racial_segregation_in_the_United_States

about.html
<!-- about.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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=Archivo:wght@400;700&family=Libre+Baskerville:wght@400;700&display=swap" rel="stylesheet">
<title>About – The Green Book Digital Archive</title>
</head>
<body>
<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>
<div class="container">
<h1>About the Green Book Digital Archive</h1>
<p>
This digital archive is dedicated to preserving the history and legacy of the
<strong>Negro Motorist Green Book</strong>, a guide that helped African Americans travel safely during segregation.
Our goal is to educate visitors on the struggles and resilience of Black travelers in the U.S.
</p>
<section>
<h2>Purpose of the Archive</h2>
<ul class="emoji-list">
<li>Preserve historical documents, images, and videos related to the Green Book.</li>
<li>Highlight safe locations and businesses listed during the Jim Crow era.</li>
<li>Share educational resources for students, scholars, and the public.</li>
</ul>
</section>
<section>
<h2>Did You Know?</h2>
<ul class="emoji-list">
<li>Victor Hugo Green was a postal worker in Harlem.</li>
<li>The Green Book was updated annually to reflect safe places for Black travelers.</li>
<li>Some locations listed in the Green Book are now recognized as historic landmarks.</li>
</ul>
</section>
<footer>
<p><small>© 2025 – The Green Book Digital Archive</small></p>
</footer>
</div>
</body>
</html>

history.html
<!-- history.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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=Archivo:wght@400;700&family=Libre+Baskerville:wght@400;700&display=swap" rel="stylesheet">
<title>History – The Green Book Digital Archive</title>
</head>
<body>
<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>
<div class="container">
<h1>History of the Green Book</h1>
<p>
The <strong>Negro Motorist Green Book</strong> was published from 1936 to 1966 to help African Americans travel safely during the Jim Crow era.
It listed safe hotels, restaurants, gas stations, and other establishments across the U.S., Canada, and the Caribbean.
</p>
<section>
<h2>Key Historical Events</h2>
<ol class="roman-list">
<li>1936 — First Green Book edition published in New York City.</li>
<li>1948 — Nationwide coverage expanded to include multiple states.</li>
<li>1956 — Over 15,000 safe businesses listed across North America.</li>
<li>1964 — Civil Rights Act passed, reducing segregation.</li>
<li>1965 — Voting Rights Act signed into law.</li>
<li>1966 — Final Green Book edition published.</li>
</ol>
</section>
<section>
<h2>Impact on Black Travel</h2>
<ul class="square-list">
<li>Provided a guide to avoid dangerous areas and sundown towns.</li>
<li>Encouraged economic support of Black-owned businesses.</li>
<li>Strengthened a sense of community and resilience among travelers.</li>
</ul>
</section>
<footer>
<p><small>© 2025 – The Green Book Digital Archive</small></p>
</footer>
</div>
</body>
</html>

location.html
<!-- locations.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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=Archivo:wght@400;700&family=Libre+Baskerville:wght@400;700&display=swap" rel="stylesheet">
<title>Locations – The Green Book Digital Archive</title>
</head>
<body>
<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>
<div class="container">
<h1>Green Book Listed Locations</h1>
<p>
The Green Book listed thousands of safe hotels, restaurants, and businesses for Black travelers.
Here are some notable examples from across the United States:
</p>
<section>
<h2>Highlighted Locations</h2>
<ul class="square-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://en.wikipedia.org/wiki/Colvin_House" target="_blank" rel="noopener noreferrer">Colvin House — Los Angeles, CA</a></li>
</ul>
</section>
<section>
<h2>Tips for Researchers</h2>
<ul class="emoji-list">
<li>Check archived editions to see changes over time.</li>
<li>Visit museums and heritage centers for original Green Book copies.</li>
<li>Explore historic businesses that still exist today.</li>
</ul>
</section>
<footer>
<p><small>© 2025 – The Green Book Digital Archive</small></p>
</footer>
</div>
</body>
</html>
WikipediaWikipedia
Hotel Theresa
The Hotel Theresa is located at 2082–96 Adam Clayton Powell Jr. Boulevard between West 124th and 125th Streets in the Harlem neighborhood of Manhattan, New York City. In the mid-20th century, it was a vibrant center of African American life in the area and the city.
The 13-story hotel was built in 1912–13 by German-born stockbroker Gustavus Sidenberg (1843–1915), whose wife the hotel is named after, and was designed by the firm of George & Edward Blum, who specialized in designing apartment buildings. The hotel, which was known in its heyday as "the Waldorf of Harlem", exemplifies the Blums' inventive use of terracotta for ornamentation, and has been called "one of the most visually strik… Show more
https://en.wikipedia.org/wiki/Hotel_Theresa

WikipediaWikipedia
Colvin House
The Colvin House is a house at 5940 North Sheridan Road in Chicago, Illinois, United States. The house was built in 1909 in the Prairie Style by George W. Maher. It was designated a Chicago Landmark on October 5, 1994. This residence was built for Edwin M. Colvin, his wife Clara and their four children. Colvin moved to Chicago in 1885 and worked in the printing industry, ultimately becoming an executive with F.W. Hall Printing Company.
Published in Architectural Record in February 1916, the design reflects Maher's earlier work for such houses as Pleasant Home for John Farson and the A.B. Leach house. The building's roof is topped with Ludowici clay tile.

style.css
/* style.css */
/* Google Fonts */
body {
font-family: 'Libre Baskerville', serif;
color: #2A2A2A;
background-color: #F7F5EF;
margin: 0;
padding: 0;
line-height: 1.6;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Archivo', sans-serif;
color: #0B3D2E;
margin-top: 1em;
margin-bottom: 0.5em;
}
.container {
max-width: 1000px;
margin: 0 auto;
padding: 20px;
}
nav {
background-color: #0B3D2E;
padding: 10px 0;
}
nav ul {
list-style: none;
display: flex;
justify-content: center;
margin: 0;
padding: 0;
}
nav li {
margin: 0 15px;
}
nav a {
color: #F7F5EF;
text-decoration: none;
font-weight: 600;
}
nav a:hover {
color: #A5BFA4;
}
nav a.current {
border-bottom: 2px solid #1E6B4E;
}
p {
margin-bottom: 1em;
}
a {
color: #1E6B4E;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
section {
margin: 2em 0;
}
.media img {
max-width: 100%;
height: auto;
display: block;
margin: 0.5em 0;
}
figcaption {
font-size: 0.9em;
color: #555;
}
ul.square-list {
list-style-type: square;
padding-left: 20px;
}
ul.emoji-list li::before {
content: "• ";
color: #1E6B4E;
font-weight: bold;
}
ol.roman-list {
list-style-type: upper-roman;
padding-left: 25px;
}
ol.numeric-list {
list-style-type: decimal;
padding-left: 25px;
}
blockquote {
border-left: 4px solid #1E6B4E;
padding-left: 15px;
margin-left: 0;
font-style: italic;
background-color: #E8F0E8;
color: #0B3D2E;
}
footer {
background-color: #0B3D2E;
color: #F7F5EF;
text-align: center;
padding: 15px 0;
margin-top: 3em;
}