-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
496 lines (440 loc) · 24.1 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
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
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
<!DOCTYPE html>
<html>
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-3TG2ZLY8KF"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-3TG2ZLY8KF');
</script>
<title>Anna Boser</title>
<!-- favicon -->
<link href="./favicon.ico" rel=icon>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif;}
body, html {
height: 100%;
color: #777;
line-height: 1.8;
}
/* Create a Parallax Effect */
.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4, .bgimg-5 {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* First image (Logo. Full height) */
.bgimg-1 {
background-image: url('./images/Map_cropped.jpg');
min-height: 100%;
}
/* Second image (Portfolio) */
.bgimg-2 {
background-image: url('./images/sideways.jpg');
min-height: 400px;
}
/* Third image (Contact) */
.bgimg-3 {
background-image: url("https://news.ucsb.edu/sites/default/files/styles/large_2340x1212/public/2024-03/Sunflower-field-istock.jpg?itok=2sUdW6dp");
min-height: 400px;
}
/* Fourth image (Contact) */
.bgimg-4 {
background-image: url('./images/Laughter.jpg');
min-height: 400px;
}
/* Fifth image (Students) */
.bgimg-5 {
background-image: url('./images/students/Yang_and_Anna.jpeg');
min-height: 400px;
}
.w3-wide {letter-spacing: 10px;}
.w3-hover-opacity {cursor: pointer;}
/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1600px) {
.bgimg-1, .bgimg-2, .bgimg-3 {
background-attachment: scroll;
min-height: 400px;
}
}
</style>
</head>
<body>
<!-- Navbar (sit on top) -->
<div class="w3-top">
<div class="w3-bar" id="myNavbar">
<a class="w3-bar-item w3-button w3-hover-black w3-hide-medium w3-hide-large w3-right" href="javascript:void(0);" onclick="toggleFunction()" title="Toggle Navigation Menu">
<i class="fa fa-bars"></i>
</a>
<a href="#home" class="w3-bar-item w3-button">HOME</a>
<a href="#about" class="w3-bar-item w3-button w3-hide-small"> ABOUT</a>
<a href="#portfolio" class="w3-bar-item w3-button w3-hide-small"> RESEARCH</a>
<a href="#news" class="w3-bar-item w3-button w3-hide-small"> NEWS</a>
<a href="#students" class="w3-bar-item w3-button w3-hide-small"> MENTORSHIP</a>
<!--a href="https://anna-boser.github.io/CV.pdf" class="w3-bar-item w3-button w3-hide-small"> CV</a-->
<a href="https://docs.google.com/document/d/1xtDXaXpn9IZYt6Ek7E7Jq4FxEvyNdZO5" class="w3-bar-item w3-button w3-hide-small"> CV</a>
<a href="#contact" class="w3-bar-item w3-button w3-hide-small"> CONTACT</a>
<!--a href="https://anna-boser.github.io/Blog/" class="w3-bar-item w3-button w3-hide-small w3-right"> BLOG</a-->
</div>
<!-- Navbar on small screens -->
<div id="navDemo" class="w3-bar-block w3-white w3-hide w3-hide-large w3-hide-medium">
<a href="#about" class="w3-bar-item w3-button w3-hide-small"> ABOUT</a>
<a href="#portfolio" class="w3-bar-item w3-button w3-hide-small"> RESEARCH</a>
<a href="#news" class="w3-bar-item w3-button w3-hide-small"> NEWS</a>
<a href="#students" class="w3-bar-item w3-button w3-hide-small"> MENTORSHIP</a>
<a href="https://docs.google.com/document/d/1xtDXaXpn9IZYt6Ek7E7Jq4FxEvyNdZO5" class="w3-bar-item w3-button w3-hide-small"> CV</a>
<a href="#contact" class="w3-bar-item w3-button w3-hide-small"> CONTACT</a>
<!--a href="#" class="w3-bar-item w3-button w3-hide-small w3-right"> BLOG</a-->
</div>
</div>
<!-- First Parallax Image with Logo Text -->
<div class="bgimg-1 w3-display-container w3-opacity-min" id="home">
<div class="w3-display-middle" style="white-space:nowrap;">
<span class="w3-center w3-padding-large w3-black w3-xlarge w3-wide w3-animate-opacity">ANNA BOSER</span>
</div>
</div>
<!-- Container (About Section) -->
<div class="w3-content w3-container w3-padding-64" id="about">
<h3 class="w3-center">ABOUT ME</h3>
<p class="w3-center"><em>Environmental science, remote sensing, and machine learning.</em></p>
<p>I am a PhD student at the Bren School for Environmental Science and Management at UC Santa Barbara.
<a href="http://www.ashleylarsen.com/">Ashley Larsen</a>, <a href="http://caylor.eri.ucsb.edu/">Kelly Caylor</a>, and <a href="http://caylor.eri.ucsb.edu/">Tamma Carleton</a> advise me, and my work is supported by the <a href="https://www.nsfgrfp.org/">NSF GRFP</a>, the Eugene Cota-Robles Fellowship, and the Fulbright Fellowship Program.
I hold a BA in Statistics from UC Berkeley, and am the <a href="https://news.berkeley.edu/2020/05/11/rejection-turned-out-great-for-berkeleys-top-graduating-senior/">2020 recipient of UC Berkeley's University Medal</a>.
I am also the 2024 recipient of the AGU <a href="https://www.agu.org/honors/science-solutions">Science for Solutions Award</a>.
</p>
<div class="w3-row">
<div class="w3-col m6 w3-center w3-padding-large">
<img src="./images/Cabbages.jpg" class="w3-round w3-image w3-padding-large" alt="Photo of Me" width="500" height="333">
</div>
<!-- Hide this text on small devices -->
<div class="w3-col m6 w3-padding-large">
<p> I am an agro-hydrologist, a remote sensing scientist, and a machine learning practitioner.
My work strives to inform better water management practices in order to balance food security, sustainability, and economic development in water scarce agricultural regions.
To do so, I leverage satellite data and artificial intelligence to study irrigation practices and their effect on water resources in both data-rich agricultural regions like California and under-resourced areas in Sub-Saharan Africa.
</p>
</div>
</div>
</div>
<!-- Second Parallax Image with Portfolio Text -->
<div class="bgimg-2 w3-display-container w3-opacity-min">
<div class="w3-display-middle">
<span class="w3-xxlarge w3-text-white w3-wide">RESEARCH</span>
</div>
</div>
<!-- Container (Portfolio Section) -->
<div class="w3-content w3-container w3-padding-64" id="portfolio">
<h3 class="w3-center">MY WORK</h3>
<p class="w3-center"><em>Here are some of my recent research projects.</em></p>
<div class="w3-row">
<div class="w3-col m6 w3-center w3-padding-large">
<img src="./images/ET_ag.jpg" class="w3-round w3-image" alt="agriculture" width="500" height="333">
</div>
<!-- Hide this text on small devices -->
<div class="w3-col m6">
<h3 class="w3-center">Saving water in California Agriculture</h3>
<p>California is one of the most agriculturally productive and water stressed regions in the world.
This project uses satellites and machine learning techniques to estimate crop water consumption in the California Central Valley.
These estimates can be used to quantify the water saving potential of different water management strategies, such as crop switching, fallowing, and improvements in irrigation efficiency.
This work has been <a href=https://www.nature.com/articles/s41467-024-46031-2>published in Nature Communications</a>.
</p>
</div>
</div>
<div class="w3-row">
<!-- Hide this text on small devices -->
<div class="w3-col m6">
<h3 class="w3-center">stagg:: A data pre-processing R package for climate impacts analysis</h3>
<p>stagg is an R package that transforms raw gridded climate data into tabular administrative-level variables intended for use in climate econometrics analyses.
Flexible options let users control specifications like nonlinear transformations, weighted spatial aggregation, and temporal aggregation with a few lines of code.
Our package GitHub is <a href=https://github.com/tcarleton/stagg>here</a>, and a helpful cheatsheet can be downloaded <a href=https://www.tammacarleton.com/_files/ugd/a0ab35_dc697daefcd84020a6e30e03cf4592a3.pdf?index=true>here</a>.
It's a work in progress -- please send us feedback!
</p>
</div>
<div class="w3-col m6 w3-center w3-padding-large">
<img src="./images/stagg.jpg" class="w3-round w3-image" alt="stagg" width="500" height="333">
</div>
</div>
<div class="w3-row">
<div class="w3-col m6 w3-center w3-padding-large">
<img src="./images/ML-val.jpg" class="w3-round w3-image" alt="ML validation" width="500" height="333">
</div>
<!-- Hide this text on small devices -->
<div class="w3-col m6">
<h3 class="w3-center">Validating spatio-temporal environmental machine learning models</h3>
<p> Machine learning has revolutionized environmental sciences by estimating scarce environmental data, but properly validating such data is cruicial for its appropriate downstream use.
In this work, I invesitgate the impact of common validation pitfalls on the interpretation of the validity of environmental machine learning models.
I find that models with poor performance can appear to perform well when evaluated on the wrong data splits, and that this effect is exacerbated when not accounting for Simpson's paradox.
This work has been <a href=https://iopscience.iop.org/article/10.1088/2515-7620/ad2e44>published in Envrironmental Research Communications</a>.
</p>
</div>
</div>
<div class="w3-row">
<!-- Hide this text on small devices -->
<div class="w3-col m6">
<h3 class="w3-center">West Nile Virus Risk Maps</h3>
<p>West Nile virus (WNV) is the most prevaluent mosquito-borne disease in California, and mitigation hinges on fine grained understanding of the risk landscape.
We use high resolution land surface temperature measurements from ECOSTRESS in conjuction with mechanistic understandings of WNV risk to map mosquito biting rates and transmission rates at unprecedented spatial and temporal scales.
This work is <a href="https://iopscience.iop.org/article/10.1088/1748-9326/ac3589">published in Environmental Research Letters</a>, and a follow-on study further validating this method is in review.
</p>
</div>
<div class="w3-col m6 w3-center w3-padding-large">
<img src="./images/wnv.png" class="w3-round w3-image" alt="WNV risk maps" width="500" height="333">
</div>
</div>
<div class="w3-row">
<div class="w3-col m6 w3-center w3-padding-large">
<img src="./images/super-res.jpg" class="w3-round w3-image" alt="Super-resolution" width="500" height="333">
</div>
<!-- Hide this text on small devices -->
<div class="w3-col m6">
<h3 class="w3-center">Downscaling remote sensing data using deep learning</h3>
<p>High resolution remote sensing data has revolutionized the environmental sciences, but some key data types are only available at coarse resolutions.
This project uses deep learning to downscale coarse resolution data to fine resolution data.
We use a U-Net architecture to predict fine resolution land surface temperature from coarse resolution land surface temperature and high resolution red, green, and blue imagery.
We additionally devise a strategy to minimize the amount of ground truth data needed to train the model.
</p>
</div>
</div>
<div class="w3-row">
<!-- Hide this text on small devices -->
<div class="w3-col m6">
<h3 class="w3-center">COVID-19 in Schools</h3>
<p>In an effort to curb the COVID-19 epidemic, government officials have halted the functioning of many institutions, including schools.
However, many questions remain unanswered regarding the effectiveness of this intervention, and if and when to reopen schools.
This project, conducted by the Remais Group at UC Berkeley, uses an agent based SEIR model to assess the effect of school closures on the COVID-19 epidemic in the Bay Area.
The manuscript is <a href="https://royalsocietypublishing.org/doi/10.1098/rsif.2020.0970">published in the Journal of the Joyal Society Interface</a>.
</p>
</div>
<div class="w3-col m6 w3-center w3-padding-large">
<img src="./images/COVID.jpg" class="w3-round w3-image" alt="COVID modeling" width="500" height="333">
</div>
</div>
<div class="w3-row">
<div class="w3-col m6 w3-center w3-padding-large">
<img src="./images/FRGU.JPG" class="w3-round w3-image" alt="Photo of French Guiana" width="500" height="333">
</div>
<!-- Hide this text on small devices -->
<div class="w3-col m6">
<h3 class="w3-center">HIV in French Guiana</h3>
<p>According to the World Health Organization, French Guiana is the site of a generalized HIV epidemic.
On the border of French Guiana and Brazil, the prevalence and severity of HIV cases is significantly more severe.
In partnership with IDsante, a local NGO, this project aims to characterize the epidemic on the border and investigate the contibuting social, economic, and political factors.
Read more about this research <a href="https://www.tandfonline.com/doi/abs/10.1080/09540121.2018.1524111?scroll=top&needAccess=true&journalCode=caic20">here</a>,
<a href="https://journals.lww.com/aidsonline/FullText/2018/03130/Addressing_HIV_on_the_French_Guianese_Brazilian.1.aspx?casa_token=Hk4kP5bmf6QAAAAA:oLVVA8A0bcmotNy3xHlTvjf2UZtOzoIqcXIsVC_hrWEQfVwOet-FSsx0YiI88JNWwUkA6XKg5AJe8t54NAMUzVsX">here</a>,
and <a href="https://www.researchgate.net/publication/320215123_VIH_SUR_LA_FRONTIERE_FRANCO-BRESILIENNE_MOBILITE_ET_PRECARITE_SUR_UNE_REGION_EN_EPIDEMIE_GENERALISEE">here</a>.
</p>
</div>
</div>
</div>
<!-- Modal for full size images on click-->
<div id="modal01" class="w3-modal w3-black" onclick="this.style.display='none'">
<span class="w3-button w3-large w3-black w3-display-topright" title="Close Modal Image"><i class="fa fa-remove"></i></span>
<div class="w3-modal-content w3-animate-zoom w3-center w3-transparent w3-padding-64">
<img id="img01" class="w3-image">
<p id="caption" class="w3-opacity w3-large"></p>
</div>
</div>
<!-- Third Parallax Image with News Text -->
<div class="bgimg-3 w3-display-container w3-opacity-min">
<div class="w3-display-middle">
<span class="w3-xxlarge w3-text-white w3-wide">NEWS</span>
</div>
</div>
<!-- Container (News Section) -->
<div class="w3-content w3-container w3-padding-64" id="news">
<h3 class="w3-center">MEDIA COVERAGE</h3>
<p class="w3-center"><em>Science communication is an emphasis of my work.</em></p>
<!-- News Row 0 -->
<div class="w3-row-padding w3-padding-16 w3-center">
<div class="w3-half">
<a href="https://www.kcbx.org/environment-and-energy/2024-04-10/ucsb-research-shows-more-options-for-reducing-water-use-in-agriculture">
<img src="https://npr.brightspotcdn.com/dims4/default/92bc3b4/2147483647/strip/true/crop/3304x2264+0+0/resize/1760x1206!/format/webp/quality/90/?url=http%3A%2F%2Fnpr-brightspot.s3.amazonaws.com%2F0e%2F4d%2F5d28abd644248492dfe0e52eaf1e%2Fanna-boser-presenting.jpg" alt="California's farms navigating water crisis" style="width:100%">
<h3>UCSB research shows more options for reducing water use in agriculture</h3>
<p class="w3-opacity">NPR KCBX Central Coast Public Radio</p>
</a>
</div>
<div class="w3-half">
<a href="https://www.newsweek.com/california-overlooking-ways-save-water-1883202">
<img src="https://d.newsweek.com/en/full/2367595/crops-being-watered.webp?w=790&f=9ddce0969d2d76f3b1f4b4087e457ec1" alt="California Overlooking Ways to Save Water" style="width:100%">
<h3>California 'Overlooking' Ways To Save Water, Study Suggests</h3>
<p class="w3-opacity">Newsweek</p>
</a>
</div>
</div>
<!-- News Row 1 -->
<div class="w3-row-padding w3-padding-16 w3-center">
<div class="w3-half">
<a href="https://www.earth.com/news/californias-farms-have-a-good-chance-of-navigating-the-water-crisis/">
<img src="https://www.earth.com/_next/image/?url=https%3A%2F%2Fcff2.earth.com%2Fuploads%2F2024%2F03%2F25090059%2FUCSB-agriculture-water-savings-farming-practices-machine-learning-climate-change-California-crop-switching-sustainable-agriculture-groundwater-management--960x640.jpeg&w=1920&q=75" alt="California's farms navigating water crisis" style="width:100%">
<h3>California's farms have a good chance of navigating the water crisis</h3>
<p class="w3-opacity">Earth.com</p>
</a>
</div>
<div class="w3-half">
<a href="https://news.ucsb.edu/2024/021398/small-changes-can-yield-big-savings-agricultural-water-use">
<img src="https://news.ucsb.edu/sites/default/files/styles/large_2340x1212/public/2024-03/Sunflower-field-istock.jpg?itok=2sUdW6dp" alt="Small Changes in Agricultural Water Use" style="width:100%">
<h3>Small changes can yield big savings in agricultural water use</h3>
<p class="w3-opacity">The Current</p>
</a>
</div>
</div>
<!-- News Row 2 -->
<div class="w3-row-padding w3-padding-16 w3-center">
<div class="w3-half">
<a href="https://calmatters.org/environment/water/2024/03/california-farms-water-conservation/">
<img src="https://i0.wp.com/calmatters.org/wp-content/uploads/2024/03/092022_Holtville-Sprinklers_REUTERS_CM_01.jpg?resize=1200%2C800&ssl=1" alt="California Farms Water Conservation" style="width:100%">
<h3>California farmers could save a lot of water — but their profits would suffer</h3>
<p class="w3-opacity">CalMatters</p>
</a>
</div>
<div class="w3-half">
<a href="https://www.usgs.gov/centers/eros/science/eyes-earth-episode-76-ecostress-and-disease-risk">
<img src="https://d9-wret.s3.us-west-2.amazonaws.com/assets/palladium/production/s3fs-public/styles/side_image/public/media/images/EoE%20-%20ECOSTRESS%20and%20Disease%20Risk%20thumbnail%20JPG.jpg?itok=vEzqpbPM" alt="ECOSTRESS and Disease Risk" style="width:100%">
<h3>ECOSTRESS and Disease Risk</h3>
<p class="w3-opacity">USGS Eyes on Earth</p>
</a>
</div>
</div>
<!-- News Row 3 -->
<div class="w3-row-padding w3-padding-16 w3-center">
<div class="w3-half">
<a href="https://www.youtube.com/watch?v=xhOr7rOR6zk">
<iframe width="640" height="360" src="https://www.youtube.com/embed/xhOr7rOR6zk" title="How to save the earth from space | Anna Boser | TEDxYouth@EB" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<h3>How to save the earth from space</h3>
<p class="w3-opacity">TEDxYouth@EB</p>
</a>
</div>
</div>
<!-- Additional News Items -->
<!-- Add more news items here if needed -->
</div>
<!-- Third Parallax Image with News Text -->
<div class="bgimg-5 w3-display-container w3-opacity-min">
<div class="w3-display-middle">
<span class="w3-xxlarge w3-text-white w3-wide">MENTORSHIP</span>
</div>
</div>
<!-- Undergraduate Students Section -->
<div class="w3-content w3-container w3-padding-64" id="students">
<h3 class="w3-center">UNDERGRADUATE STUDENTS</h3>
<p class="w3-center"><em>I mentor to contribute to a stronger, inclusive scientific future.</em></p>
<div class="w3-row-padding w3-center w3-margin-bottom">
<!-- Row 1 -->
<div class="w3-col m4 w3-padding-small">
<img src="./images/students/Ryan.jpg" alt="Ryan Stofer" style="width:100%" class="w3-hover-opacity">
<p>Ryan Stofer</p>
</div>
<div class="w3-col m4 w3-padding-small">
<img src="./images/students/Jason.png" alt="Jason Perez" style="width:100%" class="w3-hover-opacity">
<p>Jason Perez</p>
</div>
<div class="w3-col m4 w3-padding-small">
<img src="./images/students/Tyler.jpg" alt="Tyler Liddell" style="width:100%" class="w3-hover-opacity">
<p>Tyler Liddell</p>
</div>
</div>
<div class="w3-row-padding w3-center w3-margin-bottom">
<!-- Row 2 -->
<div class="w3-col m4 w3-padding-small">
<img src="./images/students/Mitali.jpeg" alt="Mitali Gaidhani" style="width:100%" class="w3-hover-opacity">
<p>Mitali Gaidhani</p>
</div>
<div class="w3-col m4 w3-padding-small">
<img src="./images/students/Yibo.jpeg" alt="Yibo Liang" style="width:100%" class="w3-hover-opacity">
<p>Yibo Liang</p>
</div>
<div class="w3-col m4 w3-padding-small">
<img src="./images/students/Yang.jpeg" alt="Yang Hu" style="width:100%" class="w3-hover-opacity">
<p>Yang Hu</p>
</div>
</div>
<div class="w3-row-padding w3-center w3-margin-bottom">
<!-- Row 3 -->
<div class="w3-col m4 w3-padding-small">
<img src="./images/students/Emily.jpg" alt="Emily Miller" style="width:100%" class="w3-hover-opacity">
<p>Emily Miller</p>
</div>
</div>
</div>
<!-- Fourth Parallax Image with Portfolio Text -->
<div class="bgimg-4 w3-display-container w3-opacity-min">
<div class="w3-display-middle">
<span class="w3-xxlarge w3-text-white w3-wide">CONTACT</span>
</div>
</div>
<!-- Container (Contact Section) -->
<div class="w3-content w3-container w3-padding-64" id="contact">
<h3 class="w3-center">GET IN TOUCH</h3>
<div class="w3-row w3-padding-32 w3-section">
<div class="w3-col m4 w3-container">
<img src="./images/Gardens.jpg" class="w3-image w3-round" style="width:100%">
</div>
<div class="w3-col m8 w3-panel">
<div class="w3-large w3-margin-bottom">
<i class="fa fa-map-marker fa-fw w3-hover-text-black w3-xlarge w3-margin-right"></i> Santa Barbara, CA<br>
<i class="fa fa-envelope fa-fw w3-hover-text-black w3-xlarge w3-margin-right"></i> Email: annaboser at ucsb.edu<br>
</div>
<!-- <p>Swing by for a cup of <i class="fa fa-coffee"></i>, or leave me a note:</p>
<form action="/action_page.php" target="_blank">
<div class="w3-row-padding" style="margin:0 -16px 8px -16px">
<div class="w3-half">
<input class="w3-input w3-border" type="text" placeholder="Name" required name="Name">
</div>
<div class="w3-half">
<input class="w3-input w3-border" type="text" placeholder="Email" required name="Email">
</div>
</div>
<input class="w3-input w3-border" type="text" placeholder="Message" required name="Message">
<button class="w3-button w3-black w3-right w3-section" type="submit">
<i class="fa fa-paper-plane"></i> SEND MESSAGE
</button>
</form> -->
</div>
</div>
</div>
<!-- Footer -->
<footer class="w3-center w3-black w3-padding-64 w3-opacity w3-hover-opacity-off">
<a href="#home" class="w3-button w3-light-grey"><i class="fa fa-arrow-up w3-margin-right"></i>To the top</a>
<div class="w3-xlarge w3-section">
<a href="https://twitter.com/BoserAnna" <i class="fa fa-twitter w3-hover-opacity" ></i></a>
<a href="https://www.linkedin.com/in/anna-boser-23b336138/" <i class="fa fa-linkedin w3-hover-opacity" ></i></a>
<a href="https://github.com/anna-boser" <i class="fa fa-github w3-hover-opacity" ></i></a>
</div>
</footer>
<script>
// Modal Image Gallery
function onClick(element) {
document.getElementById("img01").src = element.src;
document.getElementById("modal01").style.display = "block";
var captionText = document.getElementById("caption");
captionText.innerHTML = element.alt;
}
// Change style of navbar on scroll
window.onscroll = function() {myFunction()};
function myFunction() {
var navbar = document.getElementById("myNavbar");
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
navbar.className = "w3-bar" + " w3-card" + " w3-animate-top" + " w3-white";
} else {
navbar.className = navbar.className.replace(" w3-card w3-animate-top w3-white", "");
}
}
// Used to toggle the menu on small screens when clicking on the menu button
function toggleFunction() {
var x = document.getElementById("navDemo");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
</body>
</html>