abrollab.github.io/contact.html at main · abrollab/abrollab.github.io · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Us | Abrol Lab</title>
    <meta name="description" content="Get in touch with our lab - we're always open to collaboration and new opportunities">

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://abrollab.github.io/contact.html">
    <meta property="og:title" content="Contact Us | Abrol Lab">
    <meta property="og:description" content="Get in touch with Abrol Lab - opportunities for undergraduate researchers, graduate students, and collaborations">
    <meta property="og:image" content="https://abrollab.github.io/images/homepage/research-group-picture.png">

    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="https://abrollab.github.io/contact.html">
    <meta property="twitter:title" content="Contact Us | Abrol Lab">
    <meta property="twitter:description" content="Get in touch with Abrol Lab - opportunities for undergraduate researchers, graduate students, and collaborations">
    <meta property="twitter:image" content="https://abrollab.github.io/images/homepage/research-group-picture.png">

    <link rel="stylesheet" href="css/styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
    <!-- Navigation -->
    <nav class="navbar">
        <div class="nav-container">
            <a href="index.html" class="nav-logo">Abrol Lab</a>
            <ul class="nav-menu">
                <li class="nav-item"><a href="index.html" class="nav-link">Home</a></li>
                <li class="nav-item"><a href="about.html" class="nav-link">About</a></li>
                <li class="nav-item"><a href="research.html" class="nav-link">Research</a></li>
                <li class="nav-item"><a href="team.html" class="nav-link">Team</a></li>
                <li class="nav-item"><a href="publications.html" class="nav-link">Publications</a></li>
                <li class="nav-item"><a href="news.html" class="nav-link">Lab News</a></li>
                <li class="nav-item"><a href="contact.html" class="nav-link active">Contact</a></li>
            </ul>
            <div class="hamburger">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </div>
        </div>
    </nav>

    <!-- Page Header -->
    <section class="page-header">
        <div class="container">
            <h1 class="page-title fade-in">Contact Us</h1>
            <p class="page-subtitle fade-in">Let's start a conversation</p>
        </div>
    </section>

    <!-- Contact Info -->
    <section class="section">
        <div class="container">
            <div class="section-header contact-header fade-in-up">
                <h2 class="section-title">Get in Touch</h2>
                <p class="section-subtitle">Whether you're interested in joining our lab, collaborating on research, or just want to learn more about our work, we'd love to hear from you.</p>
            </div>
            <div class="contact-grid contact-centered">
                <div class="contact-info contact-full-width fade-in-up">

                    <div class="contact-details contact-cards-row">
                        <div class="contact-item contact-card-style">
                            <div class="contact-icon">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
                                    <circle cx="12" cy="10" r="3"/>
                                </svg>
                            </div>
                            <div class="contact-text">
                                <h3>Location</h3>
                                <p>University Name<br>Department of [Your Department]<br>Building Name, Room XXX<br>City, State ZIP Code</p>
                            </div>
                        </div>

                        <div class="contact-item contact-card-style">
                            <div class="contact-icon">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
                                    <polyline points="22,6 12,13 2,6"/>
                                </svg>
                            </div>
                            <div class="contact-text">
                                <h3>Email</h3>
                                <p>abrol at csun dot edu</p>
                            </div>
                        </div>

                        <div class="contact-item contact-card-style">
                            <div class="contact-icon">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <circle cx="12" cy="12" r="10"/>
                                    <path d="M12 6v6l4 2"/>
                                </svg>
                            </div>
                            <div class="contact-text">
                                <h3>Office Hours</h3>
                                <p>Monday - Friday<br>9:00 AM - 5:00 PM<br>By appointment</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Opportunities Section -->
    <section class="section bg-light">
        <div class="container">
            <div class="section-header fade-in-up">
                <h2 class="section-title">Join Our Lab</h2>
                <p class="section-subtitle">Current opportunities for students</p>
            </div>
            <div class="opportunities-grid">
                <div class="opportunity-card fade-in-up">
                    <h3>Undergraduate Researchers</h3>
                    <p>We're always looking for motivated undergraduate students to join our research team. Whether you're interested in independent study, honors thesis, or summer research, we have opportunities available.</p>
                    <ul>
                        <li>Flexible time commitment</li>
                        <li>Hands-on research experience</li>
                        <li>Mentorship from graduate students and PI</li>
                        <li>Opportunity for co-authorship</li>
                    </ul>
                </div>
                <div class="opportunity-card fade-in-up">
                    <h3>Graduate Students</h3>
                    <p>We accept motivated graduate students through the university's graduate program. If you're interested in pursuing cutting-edge research in [field], we'd love to hear from you.</p>
                    <ul>
                        <li>Fully funded positions</li>
                        <li>State-of-the-art facilities</li>
                        <li>Collaborative environment</li>
                        <li>Conference travel support</li>
                    </ul>
                </div>
                <div class="opportunity-card fade-in-up">
                    <h3>Visiting Researchers</h3>
                    <p>We welcome visiting researchers and collaborators from other institutions. If you're interested in a short-term visit or long-term collaboration, please reach out.</p>
                    <ul>
                        <li>Collaborative projects</li>
                        <li>Seminar presentations</li>
                        <li>Knowledge exchange</li>
                        <li>International partnerships</li>
                    </ul>
                    <a href="mailto:abrol@csun.edu" class="link-arrow">Get in Touch →</a>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h3>Abrol Lab</h3>
                    <p>Advancing research and education in [Your Field]</p>
                </div>
                <div class="footer-section">
                    <h4>Quick Links</h4>
                    <ul>
                        <li><a href="about.html">About Us</a></li>
                        <li><a href="research.html">Research</a></li>
                        <li><a href="team.html">Team</a></li>
                        <li><a href="publications.html">Publications</a></li>
                        <li><a href="news.html">Lab News</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h4>Contact</h4>
                    <p>University Name<br>Department Building, Room XXX<br>City, State ZIP</p>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2025 Abrol Lab. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <script src="js/script.js"></script>
</body>
</html>