-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
300 lines (266 loc) · 9.98 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
<!DOCTYPE html>
<html lang="en">
<head>
<!--
This is the page head - it contains info the browser uses to display the page
You won't see what's in the head in the page
Scroll down to the body element for the page content
-->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="https://glitch.com/favicon.ico" />
<!--
This is an HTML comment
You can write text in a comment and the content won't be visible in the page
-->
<title>Anna Varveris</title>
<!-- Meta tags for SEO and social sharing -->
<link rel="canonical" href="https://glitch-hello-website.glitch.me/" />
<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=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<meta
name="description"
content="Hi, my name is Anna! I'm an International Relations Student at Adelphi University passionate about diplomacy and advocacy of global issues."
/>
<meta name="robots" content="index,follow" />
<meta property="og:title" content="Hello World!" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://glitch-hello-website.glitch.me/" />
<meta
property="og:description"
content="Hi, my name is Anna! I'm an International Relations Student at Adelphi University passionate about diplomacy and advocacy of global issues."
/>
<meta
property="og:image"
content="https://cdn.glitch.com/605e2a51-d45f-4d87-a285-9410ad350515%2Fhello-website-social.png?v=1616712748147"
/>
<!-- Import the webpage's stylesheet -->
<link rel="stylesheet" href="/style.css" />
<!-- Import the webpage's javascript file -->
<script src="https://kit.fontawesome.com/66aa7c98b3.js" crossorigin="anonymous"></script>
<script src="/script.js" defer></script>
<script>
window.onload=function(){
const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav-menu");
hamburger.addEventListener("click", mobileMenu);
function mobileMenu() {
hamburger.classList.toggle("active");
navMenu.classList.toggle("active");
}
}
</script>
</head>
<body>
<!--
This is the body of the page
Look at the elements and see how they appear in the rendered page on the right
Each element is defined using tags, with < and > indicating where each one opens and closes
There are elements for sections of the page, images, text, and more
The elements include att inributes referenced in the CSS for the page style
-->
<!-- The wrapper and content divs set margins and positioning -->
<header class="header">
<nav class="navbar">
<a href="index.html" class="nav-logo">Anna Varveris</a>
<ul class="nav-menu">
<li class="nav-item">
<a href="#home" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#work" class="nav-link">Work</a>
</li>
<li class="nav-item">
<a href="#about" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="#contact" class="nav-link">Contact</a>
</li>
</ul>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</nav>
</header>
<div class="wrapper">
<!-- HOME -->
<div class="content" role="main" id="home">
<!-- This is the start of content for our page -->
<br/>
<br/>
<br/>
<img
src="https://cdn.glitch.global/8ce6616c-afce-4093-8825-722815cc3636/97B96F2E-138F-4F16-8548-663B54FABF4E.png?v=1648583632748"
class="illustration"
alt="Editor illustration"
title="Click the image!"
/>
<br/>
<h1 class="title">Hey, I'm Anna!</h1>
<!-- Instructions on using this project -->
<div class="instructions">
<p>
Passionate about diplomacy and advocacy of global issues
<br/>
<br/>
↳ International Relations Student at <a href="https://www.adelphi.edu">Adelphi University</a>
<br/>
<br/>
↳ Environmental Law and Development Enthusiast
</p>
<!-- ADD BUTTON HERE -->
<!-- Once you've added the button from the readme, click it in the page -->
<!-- Check out the function in script.js to see how it works -->
</div>
</div>
<br/>
<!-- WORK -->
<div class="content" role="main">
<h1 class="title" id="work">Work</h1>
<p>
Explore the work I've done on topics ranging from cultural studies to environmental policy!
</p>
<h2>
Education in Latin America
</h2>
<p>
Latin America as we know it today has its roots in colonization.
In the political turmoil, social and economic inequalities, environmental insecurity, the consequences of this practice remain.
<br/>
<br/>
Although Latin America has shifted towards democracy, the inequalities between the wealthy and poor are very apparent in its education system.
</p>
<a
class="button-test"
href="https://docs.google.com/document/d/1dKfGdyz2MHsY_h5DiFWCUuwaOkgfncmNRhDSAs4ipWA/edit"
target="_blank"
rel="noopener noreferrer"
>
Read the full paper!
</a>
<br/>
<h2>
Levermore Global Scholars Student Council
</h2>
<p>
As a class representative, I connect with other students in my grade and inform them of opportunities within the program, as well as help out with Student Council events.
</p>
<a
class="button-test"
href="https://www.linkedin.com/in/annavarveris"
target="_blank"
rel="noopener noreferrer"
>
Learn more!
</a>
<br/>
<h2>
Latino Students Association
</h2>
<p>
Through my involvement in this organization, I have spoken about my experience as a person of Latina descent growing up in the United States, as well as issues within our community.
</p>
<a
class="button-test"
href="https://www.linkedin.com/in/annavarveris"
target="_blank"
rel="noopener noreferrer"
>
Learn more!
</a>
<br/>
<!--
<h2>
Title
</h2>
<p>
Description here!
</p>
-->
</div>
<br/>
<!-- ABOUT -->
<div class="content" role="main">
<h1 class="title" id="about">About</h1>
<br/>
<img
src="https://cdn.glitch.global/8ce6616c-afce-4093-8825-722815cc3636/791431FA-C803-47C0-BA44-1A2AD85F2438.png?v=1648583629871"
class="illustration"
alt="Editor illustration"
title="Click the image!"
/>
<p>
Growing up in a Greek-Dominican household, I have
always been open to learning new perspectives and
different cultural experiences.
<br/>
<br/>
I am currently pursuing a <a href="https://www.adelphi.edu/program/undergraduate/international-relations/">Bachelor's degree in International Relations</a>, with an interest in Environmental
Policy. I have taken coursework in conflict resolution,
political economy, and international law. Alongside my
degree, I hope to build a better tomorrow through the
efforts of diplomacy and advocacy of global issues.
<br/>
<br/>
At Adelphi University, I am a part of the Levermore Global
Scholars Program, an "academic community dedicated
to preparing students to become global thinkers and
leaders in a changing world." I am also a part of
the Environment Action Coalition, Latino Students
Association and the International Students Society to
further expand my knowledge on global and regional
issues.
</p>
</div>
<br/>
<!-- CONTACT -->
<div class="content" role="main">
<h1 class="title" id="contact">Contact</h1>
<p>
Let's connect and chat more on how we can
work together!
</p>
<form
action="https://formspree.io/f/mzbopzgv"
method="POST"
>
<label class="email-form" style="width: 1000px;">
Your email:
<br/>
<input type="email" name="email" style="width: 300px;">
</label>
<br/>
<br/>
<label>
Your message:
<br/>
<textarea name="message" style="width: 300px;"></textarea>
</label>
<br/>
<br/>
<!-- your other form fields go here -->
<button type="submit" class="button-test">Submit</button>
</form>
</div>
<br/>
<br/>
<!-- FOOTER: The footer holds our remix button — you can use it for structure or cut it out ✂ -->
<footer class="socialsfooter">
<p class="socialsfooter">
Thanks for scrolling by! Want to connect?
</p>
<div class="icons">
<a href="https://linkedin.com/in/annavarveris"><i class="fab fa-linkedin"></i></a>
<a href="https://instagram.com/anna.varveris"><i class="fab fa-instagram"></i></a>
<a href="mailto:anna.varveris918@gmail.com?subject = Feedback&body = Message"><i class="fa fa-envelope"></i></a>
<p class="socialsfooter">
Built with ❤ by <a href="https://youtube.com/skylerbasco">Skyler Basco</a>.
</p>
</div>
</footer>
</div>
</body>
</html>