-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
65 lines (64 loc) · 5.04 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>My Grandma's Story</title>
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid p-5 text-center text-black bg-img" style="background-image: url('images/headerImg.jpeg'); background-size: 100%;">
<h1>My Grandma's Story</h1>
<h2>The story of JFK and my grandma.</h2>
</div>
<div class="container-fluid p-4" style="background-color: lightgrey;">
<div class="d-flex justify-content-between align-items-center text-center">
<img class="rounded object-fit-cover" width="100px" height="100px" src="images/merced1.jpg" alt="Merced, California">
<p class="ms-4 me-4">Karen Bohrer, my grandma, is 70 years old and grew up in Merced, California. She was a single day away from her eleventh birthday when the event occured.</p>
<img class="rounded object-fit-cover" width="100px" height="100px" src="images/merced2.jpg" alt="Merced, California">
</div>
</div>
<div class="container-fluid p-4" style="background-color: grey;">
<div class="d-flex justify-content-between align-items-center text-center">
<img class="rounded object-fit-cover" width="100px" height="100px" src="images/jfkDeath1.jpg" alt="JFK's Death">
<p class="ms-4 me-4">On November 21, 1963, President John F. Kennedy was visiting Dallas, Texas, when he was shot in the neck and head. He died half an hour later in a hospital.</p>
<img class="rounded object-fit-cover" width="100px" height="100px" src="images/jfkDeath2.jpg" alt="JFK's Death">
</div>
</div>
<div class="container-fluid p-4" style="background-color: darkgrey;">
<div class="d-flex justify-content-between align-items-center text-center">
<img class="rounded object-fit-cover" width="100px" height="100px" src="images/oswald1.jpg" alt="Lee Harvey Oswald">
<p class="ms-4 me-4">The assassin, Lee Harvey Oswald, was arrested for the murder but was shot and killed by a local nightclub owner. In 1979, a committee on the event decided that Kennedy was most likely assassinated because of a conspiracy.</p>
<img class="rounded object-fit-cover" width="100px" height="100px" src="images/oswald2.jpg" alt="Lee Harvey Oswald">
</div>
</div>
<div class="container-fluid p-4" style="background-color: dimgrey;">
<div class="d-flex justify-content-between align-items-center text-center">
<img class="rounded object-fit-cover" width="100px" height="100px" src="images/jfkMourning.jpg" alt="People mourning JFK">
<p class="ms-4 me-4">This had a significant impact on America’s people and politics. Citizens nationwide mourned his death, as his memorial was broadcasted on television. The vice president, Lyndon B. Johnson, was very quickly put in office.</p>
<img class="rounded object-fit-cover" width="100px" height="100px" src="images/johnson.jpg" alt="Lyndon B. Johnson">
</div>
</div>
<div class="container-fluid p-4" style="background-color: gainsboro;">
<div class="d-flex justify-content-between align-items-center text-center">
<img class="rounded object-fit-cover" width="100px" height="100px" src="images/class1.jpg" alt="School classroom in the 1960s">
<p class="ms-4 me-4">That morning, my grandma was studying in class when her principal burst into the room to tell the class about the shooting. It was a traumatic time for her that she will remember forever.</p>
<img class="rounded object-fit-cover" width="100px" height="100px" src="images/class2.jpg" alt="School classroom in the 1960s">
</div>
</div>
<div class="container-fluid p-4" style="background-color: ghostwhite;">
<div class="d-flex justify-content-between align-items-center text-center">
<img class="rounded object-fit-cover" width="100px" height="100px" src="images/news1.jpg" alt="News broadcast in the 1960s">
<p class="ms-4 me-4">She spent a lot of time watching the news, the funeral, and anything else talking about the assassination on television. Her father would keep repeating, “This is history in the making."</p>
<img class="rounded object-fit-cover" width="100px" height="100px" src="images/news2.jpg" alt="News broadcast in the 1960s">
</div>
</div>
<div class="container-fluid bg-dark text-center text-white p-4">
<small>Source: Mieczkowski, Yanek. "John F. Kennedy assassination." World Book Student, World Book, 2023, <a href="https://www.worldbookonline.com/student/article?id=ar756727">www.worldbookonline.com/student/article?id=ar756727</a>. Accessed 9 Jan. 2023.</small>
<br>
<small>© 2023 William Bohrer. All rights reserved. Created for educational purposes. Licensed under the MIT License: <a href="https://github.com/wbohrer28/mygrandmasstory/blob/main/LICENSE">Full license</a></small>
</div>
</body>
</html>