-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathcontact.html
108 lines (105 loc) · 4.83 KB
/
contact.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
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Ruida Zeng</title>
<meta charset="utf-8">
<meta name="author" content="Ruida Zeng">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="images/icons/squirrel-icon.png" type="image/icon type">
<link rel="stylesheet" type="text/css" href="css/academic.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-1/css/all.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/academicons/1.8.6/css/academicons.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.1/cookieconsent.min.css" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/contact-style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
<script src="js/lazysizes.js"></script>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.1/cookieconsent.min.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<style>
/* Add margin to push the content below the navbar */
.contact-page-container {
margin-top: 80px; /* Adjust to match navbar height + desired spacing */
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light compensate-for-scrollbar" id="navbar-main">
<div class="container">
<div class="d-none d-lg-inline-flex">
<a class="navbar-brand" href="https://www.ruidazeng.com">Ruida Zeng</a>
</div>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar-content" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span><i class="fas fa-bars"></i></span>
</button>
<div class="navbar-brand-mobile-wrapper d-inline-flex d-lg-none">
<a class="navbar-brand" href="https://www.ruidazeng.com">Ruida Zeng</a>
</div>
<div class="navbar-collapse main-menu-item justify-content-end collapse" id="navbar-content">
<ul class="navbar-nav d-md-inline-flex">
<li class="nav-item">
<a class="nav-link " href="index.html"><span>Home</span></a>
</li>
<li class="nav-item">
<a class="nav-link " href="news.html"><span>News</span></a>
</li>
<li class="nav-item">
<a class="nav-link " href="publications.html"><span>Publications</span></a>
</li>
<li class="nav-item">
<a class="nav-link " href="projects.html"><span>Projects</span></a>
</li>
<li class="nav-item">
<a class="nav-link " href="blogs.html"><span>Blogs</span></a>
</li>
<li class="nav-item">
<a class="nav-link active " href="contact.html"><span>Contact</span></a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Contact Page Content -->
<div class="contact-page-container">
<div class="container">
<div style="text-align:center">
<h2>Contact Me</h2>
<p>Buy me a cup of <a href="https://www.buymeacoffee.com/ruida" target="_blank" rel="noopener noreferrer"><i class="fa fa-coffee"></i></a>, or leave me a message:</p>
</div>
<div class="row">
<div class="column">
<div id="map" style="width: 900px; height: 450px; max-width: 100%; max-height: 100%"></div>
<script>
var map = L.map('map').setView([41.82623931304847, -71.40200262550869], 14);
const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>'
}).addTo(map);
var marker = L.marker([41.82709057885313, -71.39949792902526]).addTo(map)
.bindPopup('Department of Computer Science, Brown University Providence, RI 02912')
</script>
</div>
<div class="column">
<form action="https://formspree.io/f/mjvlynlv", method="post">
<label for="name">Name</label>
<input type="text" id="name" required name="name" placeholder="Your name...">
<label for="email">Email</label>
<input type="text" id="email" required name="email" placeholder="Your email...">
<label for="subject">Subject</label>
<textarea id="subject" required name="subject" placeholder="Write something..." style="height:170px"></textarea>
<input type="submit" value="Submit">
</form>
</div>
</div>
</div>
</div>
<!-- End of Contact Page Content -->
<footer class="site-footer">
<p class="ss-copyright">
© Ruida Zeng 2025
</p>
</footer>
</body>
</html>