FINAL CODING
This is the final coding for the project
Index
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The Gold Rush</title>
<link rel="stylesheet" href="style.css">
</head>
<div class="Home">
<body>
<h1>The Gold Rush</h1>
<nav class="navbar">
<ul>
<li><a href="index.html">Cover</a></li>
<li><a href="summary.html">Summary</a></li>
<li><a href="page1.html">Page1</a></li>
<li><a href="page2.html">Page2</a></li>
<li><a href="page3.html">Page3</a></li>
<li><a href="page4.html">Page4</a></li>
<li><a href="page5.html">Page5</a></li>
<li><a href="page6.html">Page6</a></li>
<li><a href="page7.html">Page7</a></li>
<li><a href="page8.html">Page8</a></li>
</ul>
</nav>
<main>
<img src="Cover.gif" alt="Cover">
</main>
</body>
</div>
</html>
Summary
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Summary</title>
<link rel="stylesheet" href="style.css">
</head>
<div class="Home">
<body>
<h1>Summary</h1>
<nav class="navbar">
<ul>
<li><a href="index.html">Cover</a></li>
<li><a href="summary.html">Summary</a></li>
<li><a href="page1.html">Page1</a></li>
<li><a href="page2.html">Page2</a></li>
<li><a href="page3.html">Page3</a></li>
<li><a href="page4.html">Page4</a></li>
<li><a href="page5.html">Page5</a></li>
<li><a href="page6.html">Page6</a></li>
<li><a href="page7.html">Page7</a></li>
<li><a href="page8.html">Page8</a></li>
</ul>
</nav>
<main>
<h2>
In 1896, news of gold being discovered in the Yukon inspired many people to join the Klondike Gold Rush.
One of them was David, a 21-year-old man living in poverty with his mother and four siblings.
After reading about the gold discovery in a newspaper, he asked his family to travel to the Yukon in
hopes of finding a better life.
The family quit their jobs, gathered a year's food and supplies, and traveled to Alaska.
Despite hearing warnings from discouraged prospectors, they continued along the difficult 33-mile
Chilkoot Trail.
After months of carrying supplies and building boats at Lake Bennett, they sailed down the Yukon River,
surviving dangerous rapids that killed many travelers.
After nearly a year-long journey, the family finally reached the gold fields.
David, his mother, and his brother began mining and soon discovered gold.
They worked hard and collected a large amount of it before returning home.
The story ends with an elderly David revealing that he and his family became wealthy from the gold they
found.
Thanks to the risk they took during the Klondike Gold Rush, they escaped poverty and never suffered from
hunger again.
</h2>
</main>
</body>
</div>
</html>
Page1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page 1</title>
<link rel="stylesheet" href="style.css">
</head>
<div class="Home">
<body>
<h1>Page 1</h1>
<nav class="navbar">
<ul>
<li><a href="index.html">Cover</a></li>
<li><a href="summary.html">Summary</a></li>
<li><a href="page1.html">Page1</a></li>
<li><a href="page2.html">Page2</a></li>
<li><a href="page3.html">Page3</a></li>
<li><a href="page4.html">Page4</a></li>
<li><a href="page5.html">Page5</a></li>
<li><a href="page6.html">Page6</a></li>
<li><a href="page7.html">Page7</a></li>
<li><a href="page8.html">Page8</a></li>
</ul>
</nav>
<main>
<img src="Page1.jpg" alt="1">
</main>
</body>
</div>
</html>
Page2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page 2</title>
<link rel="stylesheet" href="style.css">
</head>
<div class="Home">
<body>
<h1>Page 2</h1>
<nav class="navbar">
<ul>
<li><a href="index.html">Cover</a></li>
<li><a href="summary.html">Summary</a></li>
<li><a href="page1.html">Page1</a></li>
<li><a href="page2.html">Page2</a></li>
<li><a href="page3.html">Page3</a></li>
<li><a href="page4.html">Page4</a></li>
<li><a href="page5.html">Page5</a></li>
<li><a href="page6.html">Page6</a></li>
<li><a href="page7.html">Page7</a></li>
<li><a href="page8.html">Page8</a></li>
</ul>
</nav>
<main>
<img src="page2.gif" alt="2">
</main>
</body>
</div>
</html>
Page3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page 3</title>
<link rel="stylesheet" href="style.css">
</head>
<div class="Home">
<body>
<h1>Page 3</h1>
<nav class="navbar">
<ul>
<li><a href="index.html">Cover</a></li>
<li><a href="summary.html">Summary</a></li>
<li><a href="page1.html">Page1</a></li>
<li><a href="page2.html">Page2</a></li>
<li><a href="page3.html">Page3</a></li>
<li><a href="page4.html">Page4</a></li>
<li><a href="page5.html">Page5</a></li>
<li><a href="page6.html">Page6</a></li>
<li><a href="page7.html">Page7</a></li>
<li><a href="page8.html">Page8</a></li>
</ul>
</nav>
<main>
<img src="page3.gif" alt="3">
</main>
</body>
</div>
</html>
Page4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page 4</title>
<link rel="stylesheet" href="style.css">
</head>
<div class="Home">
<body>
<h1>Page 4</h1>
<nav class="navbar">
<ul>
<li><a href="index.html">Cover</a></li>
<li><a href="summary.html">Summary</a></li>
<li><a href="page1.html">Page1</a></li>
<li><a href="page2.html">Page2</a></li>
<li><a href="page3.html">Page3</a></li>
<li><a href="page4.html">Page4</a></li>
<li><a href="page5.html">Page5</a></li>
<li><a href="page6.html">Page6</a></li>
<li><a href="page7.html">Page7</a></li>
<li><a href="page8.html">Page8</a></li>
</ul>
</nav>
<main>
<img src="page4.jpg" alt="4">
</main>
</body>
</div>
</html>
Page5
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page 5</title>
<link rel="stylesheet" href="style.css">
</head>
<div class="Home">
<body>
<h1>Page 5</h1>
<nav class="navbar">
<ul>
<li><a href="index.html">Cover</a></li>
<li><a href="summary.html">Summary</a></li>
<li><a href="page1.html">Page1</a></li>
<li><a href="page2.html">Page2</a></li>
<li><a href="page3.html">Page3</a></li>
<li><a href="page4.html">Page4</a></li>
<li><a href="page5.html">Page5</a></li>
<li><a href="page6.html">Page6</a></li>
<li><a href="page7.html">Page7</a></li>
<li><a href="page8.html">Page8</a></li>
</ul>
</nav>
<main>
<img src="page5.jpg" alt="5">
</main>
</body>
</div>
</html>
Page6
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page 6</title>
<link rel="stylesheet" href="style.css">
</head>
<div class="Home">
<body>
<h1>Page 6</h1>
<nav class="navbar">
<ul>
<li><a href="index.html">Cover</a></li>
<li><a href="summary.html">Summary</a></li>
<li><a href="page1.html">Page1</a></li>
<li><a href="page2.html">Page2</a></li>
<li><a href="page3.html">Page3</a></li>
<li><a href="page4.html">Page4</a></li>
<li><a href="page5.html">Page5</a></li>
<li><a href="page6.html">Page6</a></li>
<li><a href="page7.html">Page7</a></li>
<li><a href="page8.html">Page8</a></li>
</ul>
</nav>
<main>
<img src="page6.gif" alt="6">
</main>
</body>
</div>
</html>
Page7
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page 7</title>
<link rel="stylesheet" href="style.css">
</head>
<div class="Home">
<body>
<h1>Page 7</h1>
<nav class="navbar">
<ul>
<li><a href="index.html">Cover</a></li>
<li><a href="summary.html">Summary</a></li>
<li><a href="page1.html">Page1</a></li>
<li><a href="page2.html">Page2</a></li>
<li><a href="page3.html">Page3</a></li>
<li><a href="page4.html">Page4</a></li>
<li><a href="page5.html">Page5</a></li>
<li><a href="page6.html">Page6</a></li>
<li><a href="page7.html">Page7</a></li>
<li><a href="page8.html">Page8</a></li>
</ul>
</nav>
<main>
<img src="page7.jpg" alt="7">
</main>
</body>
</div>
</html>
Page8
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page 8</title>
<link rel="stylesheet" href="style.css">
</head>
<div class="Home">
<body>
<h1>Page 8</h1>
<nav class="navbar">
<ul>
<li><a href="index.html">Cover</a></li>
<li><a href="summary.html">Summary</a></li>
<li><a href="page1.html">Page1</a></li>
<li><a href="page2.html">Page2</a></li>
<li><a href="page3.html">Page3</a></li>
<li><a href="page4.html">Page4</a></li>
<li><a href="page5.html">Page5</a></li>
<li><a href="page6.html">Page6</a></li>
<li><a href="page7.html">Page7</a></li>
<li><a href="page8.html">Page8</a></li>
</ul>
</nav>
<main>
<img src="page8.jpg" alt="8">
</main>
</body>
</div>
</html>
CSS Style
main {
width: 800px;
margin: 30px auto;
transition: ease-in-out;
}
.navbar ul {
list-style-type: none;
background-color: #ffc04b;
padding: 0%;
margin: 0;
text-align: center;
}
.navbar li {
display: inline-block;
font-size: 25px;
}
.navbar a {
color: white;
text-decoration: none;
padding: 15px;
display: inline-block;
}
.container {
width: 80%;
max-width: 1000px;
margin: auto;
padding: 20px;
}
