-
Notifications
You must be signed in to change notification settings - Fork 0
/
contact.html
117 lines (111 loc) · 3.13 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
109
110
111
112
113
114
115
116
---
layout: "wrapper"
title: "welcome to discuss our research!"
---
<head>
<style>
.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap; /* Ensure it wraps on smaller screens */
margin: 0 auto;
}
.contact-section, .image-section, .address-section {
flex: 1; /* Each section will take equal width */
margin: 10px; /* Add some space around the sections */
}
.contact-section {
order: 1; /* Positioning order for flex items */
}
.image-section {
order: 2;
}
.address-section {
order: 3;
}
h1 {
text-transform: uppercase;
}
img {
max-width: 100%;
height: auto;
display: block; /* Ensure the image is block-level */
margin-bottom: 10px; /* Add some space below the image */
}
.get-directions {
background: #fff;
padding: 10px;
border-radius: 4px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
margin-top: 10px; /* Space it from the contact info */
}
.displayAddress {
margin-bottom: 10px;
}
.directions-link {
display: inline-block;
text-decoration: none;
color: #000;
background: #eee;
padding: 5px 10px;
border-radius: 4px;
transition: background-color 0.3s;
}
.directions-link:hover {
background: #ddd;
}
.fa-directions {
margin-right: 5px;
}
</style>
</head>
<div class="container">
<div class="contact-section">
<h1>Contact</h1>
<p>
PI (Xiaojie Qiu): <a href="mailto:[email protected]">[email protected]</a><br>
Admin. Contact (Hadley Bickford): <a href="mailto:[email protected]">[email protected]</a><br>
</p>
<div class="get-directions">
<div class="displayAddress">
<span>BioMedical Innovations Building</span><br>
<span>240 Pasteur Drive</span><br />
<span>Palo Alto</span><br />
<span>California</span><br />
<span>ZIP code: 94304</span><br />
</div>
<p></p>
<a href="https://maps.google.com/maps?q=from%3A+current+location+to%3A+240+Pasteur+Drive+Palo+Alto+CA+94304+USA" target="_blank" class="directions-link">
<i class="fa fa-external-link" aria-hidden="true"></i>
Google Map
</a>
</div>
</div>
<div class="image-section">
<a href="https://med.stanford.edu/base.html?tab=proxy">
<img src="assets/images/bmi-exterior.jpg" alt="Stanford BMI Image">
</a>
<p>
<strong>Stanford BMI exterior</strong><br>
<!-- Xiaojie Qiu<br>
Room 3753<br>
Biomedical Innovation Building<br>
240 Pasteur Drive<br>
Stanford University<br>
CA 94305 -->
</p>
</div>
<div class="address-section">
<a href="https://campus-map.stanford.edu/?id=07-600&lat=37.432896&lng=-122.177414&zoom=17&srch=biome">
<img src="assets/images/BMI_campus_map.png" alt="Stanford BMI Image">
</a>
<p>
<strong>Stanford interactive campus map</strong><br>
<!-- Qiu Lab<br>
Biomedical Innovation Building<br>
240 Pasteur Drive<br>
Stanford University<br>
CA 94305 -->
</p>
</div>
</div>