Work website. Evan
Introduction
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gordon Indian Residential School Project</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="page">
<header class="top">
<p class="small-title">Final Project</p>
<h1>Gordon Indian Residential School</h1>
<p class="subtitle">A storyboard about Gavin, Jackie, silence, and memory.</p>
</header>
<nav>
<a href="Index.HTML">Introduction</a>
<a href="about.HTML">About</a>
<a href="Story1.html">Story 1</a>
<a href="Story2.html">Story 2</a>
<a href="Story3.html">Story 3</a>
<a href="Story4.html">Story 4</a>
<a href="Story5.html">Story 5</a>
<a href="Story6.html">Story 6</a>
<a href="Story7.html">Story 7</a>
<a href="Story8.html">Story 8</a>
</nav>
<main>
<section class="paper-box">
<h2>Introduction</h2>
<p>
This final project tells the story of Gavin, an Indigenous boy who is taken away from his family and sent to Gordon Indian Residential School. The project follows his experience through a comic-style storyboard.
</p>
<p>
The story is not only about school life. It is about being separated from family, losing language, following strict rules, and carrying pain even after the school closes.
</p>
</section>
<section class="quote-box">
<p>
“People said he was free, but Gavin still felt lost.”
</p>
</section>
<section class="paper-box">
<h2>What This Website Includes</h2>
<p>
This website includes an introduction page, an about page, and eight storyboard pages. Each storyboard page tells one part of Gavin’s journey.
</p>
</section>
<a href="about.HTML">Next Page</a>
</main>
</div>
</body>
</html>
About
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About the Final Project</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="page">
<header class="top">
<p class="small-title">About Page</p>
<h1>About My Final Project</h1>
<p class="subtitle">The story behind the storyboard.</p>
</header>
<nav>
<a href="Index.HTML">Introduction</a>
<a href="about.HTML">About</a>
<a href="Story1.html">Story 1</a>
<a href="Story2.html">Story 2</a>
<a href="Story3.html">Story 3</a>
<a href="Story4.html">Story 4</a>
<a href="Story5.html">Story 5</a>
<a href="Story6.html">Story 6</a>
<a href="Story7.html">Story 7</a>
<a href="Story8.html">Story 8</a>
</nav>
<main>
<section class="paper-box">
<h2>About the Story</h2>
<p>
My final project is about an Indigenous boy named Gavin. He is taken away from his mother and brought to Gordon Indian Residential School. The story follows what happens to him inside the school and how the experience changes him.
</p>
<p>
Gavin meets another boy named Jackie. Their friendship becomes important because they both miss home and understand the pain of being separated from their families. The school tries to stop them from speaking their own language, but those small moments still matter to them.
</p>
</section>
<section class="paper-box">
<h2>Main Ideas</h2>
<ul class="simple-list">
<li>Family separation</li>
<li>Loss of language</li>
<li>Strict rules and punishment</li>
<li>Friendship and silence</li>
<li>Feeling lost after the school closes</li>
</ul>
</section>
<a href="Story1.html">Next Page</a>
</main>
</div>
</body>
</html>
Storyboard1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Story 1 - Gavin Arrives
</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="page">
<header class="top">
<p class="small-title">
Storyboard Page 1
</p>
<h1>Gavin Arrives at the School</h1>
<p class="subtitle">The beginning of Gavin's story.</p>
</header>
<nav>
<a href="Index.HTML">Introduction</a>
<a href="about.HTML">About</a>
<a href="Story1.html">Story 1</a>
<a href="Story2.html">Story 2</a>
<a href="Story3.html">Story 3</a>
<a href="Story4.html">Story 4</a>
<a href="Story5.html">Story 5</a>
<a href="Story6.html">Story 6</a>
<a href="Story7.html">Story 7</a>
<a href="Story8.html">Story 8</a>
</nav>
<main>
<section class="paper-box">
<h2>Story 1</h2>
<p> This first page of the storyboard shows Gavin being taken away from his mother and brought to Gordon Indian Residential School. It is the beginning of his experience away from home. </p>
</section>
<section class="story-image-box">
<img src="Story1.png" alt="Storyboard 1">
</section> <section class="paper-box">
<h2>What Happens in This Page</h2>
<p> Gavin does not fully understand what is happening. His mother is upset, and the school feels cold and unfamiliar. This page helps introduce the fear and confusion that Gavin feels at the start of the story. </p>
</section>
<div class="next-buttons">
<a href="Story2.html">Next Page</a>
</div>
</main>
</div>
</body>
</html>
Storyboard2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Story 2 - Gavin's daily life in residential school
</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="page">
<header class="top">
<p class="small-title">
Storyboard Page 2
</p>
<h1>Gavin's daily life at the School</h1>
</header>
<nav>
<a href="Index.HTML">Introduction</a>
<a href="about.HTML">About</a>
<a href="Story1.html">Story 1</a>
<a href="Story2.html">Story 2</a>
<a href="Story3.html">Story 3</a>
<a href="Story4.html">Story 4</a>
<a href="Story5.html">Story 5</a>
<a href="Story6.html">Story 6</a>
<a href="Story7.html">Story 7</a>
<a href="Story8.html">Story 8</a>
</nav>
<main>
<section class="paper-box">
<h2>Story 2</h2>
<p> This page of the storyboard shows Gavin and his friend Jackie's daily lives in Gordon Indian Residential School. They eat breakfast, pray, study and learn bible. </p>
</section>
<section class="story-image-box">
<img src="Story2.png" alt="Storyboard 2">
</section> <section class="paper-box">
</section>
<div class="next-buttons">
<a href="Story3.html">Next Page</a>
</div>
</main>
</div>
</body>
</html>
Storyboard3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Story 3 - Gavin's Heartache
</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="page">
<header class="top">
<p class="small-title">
Storyboard Page 3
</p>
<h1>Gavin's heartache</h1>
</header>
<nav>
<a href="Index.HTML">Introduction</a>
<a href="about.HTML">About</a>
<a href="Story1.html">Story 1</a>
<a href="Story2.html">Story 2</a>
<a href="Story3.html">Story 3</a>
<a href="Story4.html">Story 4</a>
<a href="Story5.html">Story 5</a>
<a href="Story6.html">Story 6</a>
<a href="Story7.html">Story 7</a>
<a href="Story8.html">Story 8</a>
</nav>
<main>
<section class="paper-box">
<h2>Story 3</h2>
<p> This page of the storyboard shows Gavin's heartache. He will talk to Jackie at night. </p>
</section>
<section class="story-image-box">
<img src="Story3.2.png" alt="Storyboard 3">
</section> <section class="paper-box">
</section>
<div class="next-buttons">
<a href="Story4.html">Next Page</a>
</div>
</main>
</div>
</body>
</html>
Storyboard4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Story 4 -
</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="page">
<header class="top">
<p class="small-title">
Storyboard Page 4
</p>
<h1>Gavin's heartache</h1>
</header>
<nav>
<a href="Index.HTML">Introduction</a>
<a href="about.HTML">About</a>
<a href="Story1.html">Story 1</a>
<a href="Story2.html">Story 2</a>
<a href="Story3.html">Story 3</a>
<a href="Story4.html">Story 4</a>
<a href="Story5.html">Story 5</a>
<a href="Story6.html">Story 6</a>
<a href="Story7.html">Story 7</a>
<a href="Story8.html">Story 8</a>
</nav>
<main>
<section class="paper-box">
<h2>Story 4</h2>
<p> This page of the storyboard shows Gavin's heartache. He will talk to Jackie at night. </p>
</section>
<section class="story-image-box">
<img src="Story4.png" alt="Storyboard 4">
</section> <section class="paper-box">
</section>
<div class="next-buttons">
<a href="Story5.html">Next Page</a>
</div>
</main>
</div>
</body>
</html>
Storyboard5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Story 5
</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="page">
<header class="top">
<p class="small-title">
Storyboard Page 5
</p>
<h1>Jackie passed away</h1>
</header>
<nav>
<a href="Index.HTML">Introduction</a>
<a href="about.HTML">About</a>
<a href="Story1.html">Story 1</a>
<a href="Story2.html">Story 2</a>
<a href="Story3.html">Story 3</a>
<a href="Story4.html">Story 4</a>
<a href="Story5.html">Story 5</a>
<a href="Story6.html">Story 6</a>
<a href="Story7.html">Story 7</a>
<a href="Story8.html">Story 8</a>
</nav>
<main>
<section class="paper-box">
<h2>Story 5</h2>
<p> This page of the storyboard shows Gavin's heartache. He will talk to Jackie at night. </p>
</section>
<section class="story-image-box">
<img src="Story5.png" alt="Storyboard 5">
</section> <section class="paper-box">
</section>
<div class="next-buttons">
<a href="Story6.html">Next Page</a>
</div>
</main>
</div>
</body>
</html>
Storyboard6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Story 6
</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="page">
<header class="top">
<p class="small-title">
Storyboard Page 6
</p>
<h1>Nothing change</h1>
</header>
<nav>
<a href="Index.HTML">Introduction</a>
<a href="about.HTML">About</a>
<a href="Story1.html">Story 1</a>
<a href="Story2.html">Story 2</a>
<a href="Story3.html">Story 3</a>
<a href="Story4.html">Story 4</a>
<a href="Story5.html">Story 5</a>
<a href="Story6.html">Story 6</a>
<a href="Story7.html">Story 7</a>
<a href="Story8.html">Story 8</a>
</nav>
<main>
<section class="paper-box">
<h2>Story 6</h2>
<p> This page of the storyboard tells Gavin nothing will change, eventhough his friend died. </p>
</section>
<section class="story-image-box">
<img src="Story6.png" alt="Storyboard 6">
</section> <section class="paper-box">
</section>
<div class="next-buttons">
<a href="Story7.html">Next Page</a>
</div>
</main>
</div>
</body>
</html>
Storyboard7
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Story 7
</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="page">
<header class="top">
<p class="small-title">
Storyboard Page 7
</p>
<h1>School close</h1>
</header>
<nav>
<a href="Index.HTML">Introduction</a>
<a href="about.HTML">About</a>
<a href="Story1.html">Story 1</a>
<a href="Story2.html">Story 2</a>
<a href="Story3.html">Story 3</a>
<a href="Story4.html">Story 4</a>
<a href="Story5.html">Story 5</a>
<a href="Story6.html">Story 6</a>
<a href="Story7.html">Story 7</a>
<a href="Story8.html">Story 8</a>
</nav>
<main>
<section class="paper-box">
<h2>Story 7</h2>
<p> This page of the storyboard shows the residential school close.</p>
</section>
<section class="story-image-box">
<img src="Story_7.png" alt="Storyboard 7">
</section> <section class="paper-box">
</section>
<div class="next-buttons">
<a href="Story8.html">Next Page</a>
</div>
</main>
</div>
</body>
</html>
Storyboard8
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Story 8
</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="page">
<header class="top">
<p class="small-title">
Storyboard Page 8
</p>
<h1>Gavin's future</h1>
</header>
<nav>
<a href="Index.HTML">Introduction</a>
<a href="about.HTML">About</a>
<a href="Story1.html">Story 1</a>
<a href="Story2.html">Story 2</a>
<a href="Story3.html">Story 3</a>
<a href="Story4.html">Story 4</a>
<a href="Story5.html">Story 5</a>
<a href="Story6.html">Story 6</a>
<a href="Story7.html">Story 7</a>
<a href="Story8.html">Story 8</a>
</nav>
<main>
<section class="paper-box">
<h2>Story 8</h2>
<p> This page of the storyboard shows Gavin doesn't know where he can go.</p>
</section>
<section class="story-image-box">
<img src="Story8.png" alt="Storyboard 8">
</section> <section class="paper-box">
</section>
<div class="next-buttons">
<a href="Index.HTML">back to home page</a>
</div>
</main>
</div>
</body>
</html>
Css style
body {
margin: 0;
background-color: #d8c6ae;
font-family: Arial, Helvetica, sans-serif;
color: #2d2620;
}
/* main paper */
.page {
width: 86%;
max-width: 1100px;
margin: 30px auto;
background-color: #fff8ec;
border: 4px solid #3d2b21;
padding: 28px;
box-shadow: 10px 10px 0 #8c6b55;
}
/* top title */
.top {
text-align: center;
padding: 25px;
background-color: #f0dfc4;
border: 3px solid #5b3b2c;
margin-bottom: 20px;
}
.small-title {
margin: 0;
letter-spacing: 2px;
color: #7a4b35;
font-size: 14px;
text-transform: uppercase;
}
h1 {
margin: 8px 0;
font-size: 40px;
color: #3d2b21;
}
.subtitle {
margin: 0;
font-size: 17px;
color: #5b3b2c;
}
/* navigation */
nav {
text-align: center;
background-color: #3d2b21;
padding: 12px;
margin-bottom: 25px;
}
nav a {
color: #fff8ec;
text-decoration: none;
display: inline-block;
margin: 6px;
padding: 8px 12px;
background-color: #7a4b35;
border: 2px solid #c9a77c;
}
nav a:hover {
background-color: #c9a77c;
color: #2d2620;
}
/* normal section boxes */
.paper-box {
background-color: white;
border: 3px solid #5b3b2c;
padding: 22px;
margin-bottom: 22px;
}
.paper-box h2 {
margin-top: 0;
color: #6a3f2f;
}
.paper-box p {
font-size: 17px;
}
/* quote */
.quote-box {
background-color: #2f2a24;
color: white;
padding: 22px;
margin: 25px 0;
border-left: 8px solid #c9a77c;
font-size: 22px;
font-style: italic;
}
/* list */
.simple-list {
font-size: 17px;
line-height: 1.8;
}
/* storyboard cards */
.story-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
}
.story-card {
background-color: white;
border: 3px solid #5b3b2c;
padding: 18px;
}
.story-card h3 {
margin-top: 0;
color: #6a3f2f;
}
.story-card p {
font-size: 16px;
}
.story-card a {
display: inline-block;
margin-top: 10px;
background-color: #7a4b35;
color: white;
text-decoration: none;
padding: 8px 18px;
border: 2px solid #3d2b21;
}
.story-card a:hover {
background-color: #c9a77c;
color: #2d2620;
}
/* phone screen */
@media screen and (max-width: 750px) {
.page {
width: 92%;
padding: 16px;
}
h1 {
font-size: 30px;
}
.story-list {
grid-template-columns: 1fr;
}
nav a {
font-size: 14px;
padding: 7px 9px;
}
}