-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathabout.html
273 lines (245 loc) · 10.3 KB
/
about.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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<style>
@media (max-width: 720px) {
#container {
display: block;
box-sizing: border-box;
}
#content {
margin-left: 0;
padding: 0%;
width: 100%;
box-sizing: border-box;
}
#sidebar {
display: none;
box-sizing: border-box;
}
}
#sidebar {
font-size: large;
width: 20%;
height: 100%;
background-color: #e3bfa9;
padding: 5px;
box-sizing: border-box;
position: fixed;
}
#sidebar div {
margin-bottom: 10px;
}
#sidebar a {
display: block;
margin: 5px 0;
padding-left: 5px;
text-decoration: none;
color: #4e5454
}
#sidebar a:hover {
color: #e3bfa9;
background-color: #4e5454;
border-radius: 15px;
}
#content {
margin-left: 20%;
padding: 5px;
width: 80%;
box-sizing: border-box;
}
.clearfix {
clear:both;
}
.grid {
display:grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
width: 100%;
box-sizing: border-box;
}
.grid > div {
padding: 20px;
text-align: center;
}
.grid img {
width: 100%;
max-width: 200px;
height: auto;
}
.grid p {
font-size: large;
}
.bday {
display: flex;
flex-direction: column;
padding: 10px;
align-items: center;
text-align: center;
width: 100%;
box-sizing: border-box;
}
.bday img {
width: 100%;
max-width: 590px;
height: auto;
}
td img {
width: 100%;
max-width: 200px;
height: auto;
}
td {
text-align: center;
font-size: large;
width:50%;
}
#map {
padding: 5px;
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<nav class="navbar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="experience.html">Experience</a></li>
<li><a href="hobbies.html">Hobbies</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<div>
<div id="container">
<div id="sidebar">
<h3>About:</h3>
<div><a href="#family">My Family</a></div>
<div><a href="#pets">My Pets</a></div>
<div><a href="#birthday">My Birthday</a></div>
<div><a href="#favorites">My Favorites</a></div>
<div><a href="#sTrips">Stateside Trips</a></div>
<div><a href="#iTrips">International Trips</a></div>
</div>
<div id="content">
<h1 id="family">My Family</h1>
<dl>
<!--I don't want to put pictures of my family on this site, because that seems to personal-->
<dt>My Mom</dt>
<dd>My mom is an elementary school teacher for K - 6th grade. She teaches acceleated content to K - 3rd graders and acceleated Reading to 4th and 5th graders.</dd>
<dd>My favorite thing about her is how she is always in my corner. I love spending lots of time with her!</dd>
<dt>My Dad</dt>
<dd>My dad works in insurance. He started working from home right before the pandemic.</dd>
<dd>My favorite thing about him is how he is always supporting me. I love how he always encourages me to get out of my comfort zone!</dd>
<dt>Me</dt>
<dd>I am the oldest of three girls. I am a sophomore at NKU studying Computer Science and Cybersecurity.</dd>
<dd>I am the vice-president of WiCyS, and I tutor with NKU's math department. I also work at Chick-fil-A.</dd>
<dt>Courtney</dt>
<dd>Courtney is a senior in high school. She really enjoys her engineering classes!</dd>
<dd>Courney is a member of her school's Claybusters club. She is also a member of the Archery club. She works at Skyline Chili.</dd>
<dt>Hailey</dt>
<dd>Hailey is an 8th grader in middle school. She really likes her English teacher.</dd>
<dd>Hailey is participating in her school's 8th grade play. She is also a member of the Euchre club!</dd>
</dl>
<br>
<h1 id="pets">My Pets</h1>
<p align="center" style="font-size:large; padding-bottom:0%; margin-bottom:0%">I have two dogs. They are siblings from the same litter, but they look nothing alike!</p>
<div class="grid">
<div>
<img src="imgs/carrie.jpg">
<br>
Carrie
<br>
<p>Carrie is my dog. She is extraordinarily energetic, but she also loves to cuddle. She loves table scraps and treats, but she won't eat vegetables!</p>
</div>
<div>
<img src="imgs/garth.jpg">
<br>
Garth
<br>
<p>Garth is my sister's dog. He is extraordinarily lazy, but he loves roughhouse with Carrie. He also does not like vegetables, but he is pickier in general!</p>
</div>
</div>
<h1 id="birthday">My Birthday</h1>
<div class="bday">
<img src="imgs/starsign.jpg" />
<p>My birthday is July 5th. That means my star sign is Cancer. I don't love the negative connotation surrounding the name, and I always feel weird saying, "I'm a Cancer" on the rare occasion people ask. I do think I lucked out on my birthstone; it's ruby!</p>
</div>
<h1 id="favorites">My Favorites</h1>
<ul>
<li><b>Favorite Ice-Cream Flavor:</b> Moose Tracks</li>
<li><b>Favorite Drink:</b> Cherry Coke</li>
<li><b>Favorite Dinner:</b> Steak with Rolls and a Loaded Baked Potato</li>
<li><b>Favorite Color:</b> Red</li>
<li><b>Favorite Author:</b> Sarah J. Maas, to learn more visit my <a href="hobbies.html">Hobbies Page</a></li>
<li><b>Favorite Class:</b> Web Dev, to learn more visit my <a href="experience.html">Experience Page</a></li>
</ul>
<br>
<h1 id="sTrips">Stateside Trips</h1>
<h2>For most of my life, my family has taken an annual vacation outside of Ohio, where we live. These are the states I have visited. (I do not count just spending the night on the way to another state.)</h2>
<img id="map" src="imgs/statesMap.png" />
<br>
<h1 id="iTrips">International Trips</h1>
<h2>My sister and I visited London (England), Paris (France), and Barcelona (Spain) in June 2022.</h2>
<table width="100%" border="1">
<tr>
<td colspan="2" align="center"><h2>Europe</h2></td>
</tr>
<tr>
<td>
<img src="imgs/europe/england1.jpg" />
<br>
Windsor Castle
</td>
<td>
<img src="imgs/europe/england2.jpg" />
<br>
Queen Elizabeth II's Platinum Jubilee
</td>
</tr>
<tr>
<td colspan="2" align="center"><h2>France</h2></td>
</tr>
<tr>
<td>
<img src="imgs/europe/france1.jpg" />
<br>
Arc de Triomphe
</td>
<td>
<img src="imgs/europe/france2.jpg" />
<br>
Eiffel Tower
</td>
</tr>
<tr>
<td colspan="2" align="center"><h2>Spain</h2></td>
</tr>
<tr>
<td>
<img src="imgs/europe/spain1.jpg" />
<br>
Park Güell
</td>
<td>
<img src="imgs/europe/spain2.jpg" />
<br>
Basílica de la Sagrada Família
</td>
</tr>
</table>
<h2>UPCOMING TRIP: Athens, Greece in December 2024!</h2>
<h2>UPCOMING TRIP: Tokyo, Japan in June 2027!</h2>
</div>
<div class="clearfix"></div>
</div>
</div>
</body>
</html>