Ethan Au
Comic
about.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canada's Wartime Manufacturing</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav class="nav-header">
<h1>Canada's Wartime Manufacturing</h1>
<ul>
<li><a href="index.html">Cover</a></li>
<li><a href="about.html" class="active">About</a></li>
<li><a href="page1.html">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
<li><a href="page4.html">Page 4</a></li>
<li><a href="page5.html">Page 5</a></li>
<li><a href="page6.html">Page 6</a></li>
<li><a href="page7.html">Page 7</a></li>
<li><a href="page8.html">Page 8</a></li>
</ul>
</nav>
</header>
<main>
<img src="pages/About.png" alt="About Comic">
<div class="buttons" style="margin-top: 20px;">
<a href="index.html">Previous Page</a>
<a href="page1.html">Next Page</a>
</div>
</main>
</body>
</html>
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canada's Wartime Manufacturing</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav class="nav-header">
<h1>Canada's Wartime Manufacturing</h1>
<ul>
<li><a href="index.html" class="active">Cover</a></li>
<li><a href="about.html">About</a></li>
<li><a href="page1.html">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
<li><a href="page4.html">Page 4</a></li>
<li><a href="page5.html">Page 5</a></li>
<li><a href="page6.html">Page 6</a></li>
<li><a href="page7.html">Page 7</a></li>
<li><a href="page8.html">Page 8</a></li>
</ul>
</nav>
</header>
<main>
<img src="pages/Cover.png" alt="Cover">
<div class="buttons" style="margin-top: 20px;">
<div></div>
<a href="about.html">Next Page</a>
</div>
</main>
</body>
</html>
page1.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canada's Wartime Manufacturing</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav class="nav-header">
<h1>Canada's Wartime Manufacturing</h1>
<ul>
<li><a href="index.html">Cover</a></li>
<li><a href="about.html">About</a></li>
<li><a href="page1.html" class="active">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
<li><a href="page4.html">Page 4</a></li>
<li><a href="page5.html">Page 5</a></li>
<li><a href="page6.html">Page 6</a></li>
<li><a href="page7.html">Page 7</a></li>
<li><a href="page8.html">Page 8</a></li>
</ul>
</nav>
</header>
<main>
<img src="pages/Comic 1.png" alt="Page 1">
<div class="buttons">
<a href="about.html">Previous Page</a>
<a href="page2.html">Next Page</a>
</div>
</main>
</body>
</html>
page2.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canada's Wartime Manufacturing</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav class="nav-header">
<h1>Canada's Wartime Manufacturing</h1>
<ul>
<li><a href="index.html">Cover</a></li>
<li><a href="about.html">About</a></li>
<li><a href="page1.html">Page 1</a></li>
<li><a href="page2.html" class="active">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
<li><a href="page4.html">Page 4</a></li>
<li><a href="page5.html">Page 5</a></li>
<li><a href="page6.html">Page 6</a></li>
<li><a href="page7.html">Page 7</a></li>
<li><a href="page8.html">Page 8</a></li>
</ul>
</nav>
</header>
<main>
<img src="pages/Comic 2.png" alt="Page 2">
<div class="buttons">
<a href="page1.html">Previous Page</a>
<a href="page3.html">Next Page</a>
</div>
</main>
</body>
</html>
page3.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canada's Wartime Manufacturing</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav class="nav-header">
<h1>Canada's Wartime Manufacturing</h1>
<ul>
<li><a href="index.html">Cover</a></li>
<li><a href="about.html">About</a></li>
<li><a href="page1.html">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html" class="active">Page 3</a></li>
<li><a href="page4.html">Page 4</a></li>
<li><a href="page5.html">Page 5</a></li>
<li><a href="page6.html">Page 6</a></li>
<li><a href="page7.html">Page 7</a></li>
<li><a href="page8.html">Page 8</a></li>
</ul>
</nav>
</header>
<main>
<img src="pages/Comic 3.png" alt="Page 3">
<div class="buttons">
<a href="page2.html">Previous Page</a>
<a href="page4.html">Next Page</a>
</div>
</main>
</body>
</html>
page4.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canada's Wartime Manufacturing</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav class="nav-header">
<h1>Canada's Wartime Manufacturing</h1>
<ul>
<li><a href="index.html">Cover</a></li>
<li><a href="about.html">About</a></li>
<li><a href="page1.html">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
<li><a href="page4.html" class="active">Page 4</a></li>
<li><a href="page5.html">Page 5</a></li>
<li><a href="page6.html">Page 6</a></li>
<li><a href="page7.html">Page 7</a></li>
<li><a href="page8.html">Page 8</a></li>
</ul>
</nav>
</header>
<main>
<img src="pages/Comic 4.png" alt="Page 4">
<div class="buttons">
<a href="page3.html">Previous Page</a>
<a href="page5.html">Next Page</a>
</div>
</main>
</body>
</html>
page5.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canada's Wartime Manufacturing</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav class="nav-header">
<h1>Canada's Wartime Manufacturing</h1>
<ul>
<li><a href="index.html">Cover</a></li>
<li><a href="about.html">About</a></li>
<li><a href="page1.html">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
<li><a href="page4.html">Page 4</a></li>
<li><a href="page5.html" class="active">Page 5</a></li>
<li><a href="page6.html">Page 6</a></li>
<li><a href="page7.html">Page 7</a></li>
<li><a href="page8.html">Page 8</a></li>
</ul>
</nav>
</header>
<main>
<img src="pages/Comic 5.png" alt="Page 5">
<div class="buttons">
<a href="page4.html">Previous Page</a>
<a href="page6.html">Next Page</a>
</div>
</main>
</body>
</html>
page6.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canada's Wartime Manufacturing</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav class="nav-header">
<h1>Canada's Wartime Manufacturing</h1>
<ul>
<li><a href="index.html">Cover</a></li>
<li><a href="about.html">About</a></li>
<li><a href="page1.html">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
<li><a href="page4.html">Page 4</a></li>
<li><a href="page5.html">Page 5</a></li>
<li><a href="page6.html" class="active">Page 6</a></li>
<li><a href="page7.html">Page 7</a></li>
<li><a href="page8.html">Page 8</a></li>
</ul>
</nav>
</header>
<main>
<img src="pages/Comic 6.png" alt="Page 6">
<div class="buttons">
<a href="page5.html">Previous Page</a>
<a href="page7.html">Next Page</a>
</div>
</main>
</body>
</html>
page7.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canada's Wartime Manufacturing</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav class="nav-header">
<h1>Canada's Wartime Manufacturing</h1>
<ul>
<li><a href="index.html">Cover</a></li>
<li><a href="about.html">About</a></li>
<li><a href="page1.html">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
<li><a href="page4.html">Page 4</a></li>
<li><a href="page5.html">Page 5</a></li>
<li><a href="page6.html">Page 6</a></li>
<li><a href="page7.html" class="active">Page 7</a></li>
<li><a href="page8.html">Page 8</a></li>
</ul>
</nav>
</header>
<main>
<img src="pages/Comic 7.png" alt="Page 7">
<div class="buttons">
<a href="page6.html">Previous Page</a>
<a href="page8.html">Next Page</a>
</div>
</main>
</body>
</html>
page8.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canada's Wartime Manufacturing</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav class="nav-header">
<h1>Canada's Wartime Manufacturing</h1>
<ul>
<li><a href="index.html">Cover</a></li>
<li><a href="about.html">About</a></li>
<li><a href="page1.html">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
<li><a href="page4.html">Page 4</a></li>
<li><a href="page5.html">Page 5</a></li>
<li><a href="page6.html">Page 6</a></li>
<li><a href="page7.html">Page 7</a></li>
<li><a href="page8.html" class="active">Page 8</a></li>
</ul>
</nav>
</header>
<main>
<img src="pages/Comic 8.png" alt="Page 8">
<div class="buttons">
<a href="page7.html">Previous Page</a>
</div>
</main>
</body>
</html>
style.css:
* {
box-sizing: border-box;
}
html, body {
margin: 0;
font-family: Arial, sans-serif;
}
body {
display: flex;
flex-direction: column;
align-items: stretch;
}
header {
font-size: 1.2em;
position: sticky;
top: calc(-2.6em - 5px);
}
.nav-header {
background: rgb(190, 190, 190);
padding: 5px;
display: flex;
flex-direction: column;
align-items: center;
}
.nav-header h1 {
margin: 0;
padding-top: 5px;
}
.nav-header ul {
display: flex;
flex-direction: row;
list-style: none;
gap: 12px;
}
.nav-header ul li a {
text-decoration: none;
color: #283DFF;
}
.active {
color: #7f49ff !important;
}
.nav-header ul li a:hover {
text-decoration: underline;
}
main {
align-self: center;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
padding: 0 50px;
max-width: 900px;
margin: 30px 0;
}
main img {
width: 100%;
}
.buttons {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
}
.buttons a {
text-decoration: none;
color: white;
background-color: #2475a7;
padding: 15px;
border-radius: 10px;
transition: transform 0.1s ease-in-out;
}
.buttons a:hover {
text-decoration: underline;
transform: scale(1.1);
}