-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy patheurope.html
171 lines (156 loc) · 12 KB
/
europe.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>europe</title>
<link rel="stylesheet" href="css/html5reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body class="europe-page">
<header>
<a href = "#main" class="skip-link2">Skip to Main Content</a>
<nav>
<ul class="nav-bar">
<li><a href = "index.html" class="current-page">home</a></li>
<li><a href = "north-america.html">north america</a></li>
<li><a href = "latin-america.html">latin america</a></li>
<li><a href = "europe.html">europe</a></li>
<li><a href="https://www.instagram.com/izzyd.pics"><img src="images/instagram-white.png" alt="Instagram Icon" height="20"></a></li>
<li><a href="mailto:[email protected]"><img src="images/envelope-white.png" alt="Email Icon" height="20"></a></li>
</ul>
</nav>
</header>
<main id="main">
<h1>europe</h1>
<img src="images/europe.png" alt="map of europe" class="map-img">
<div class="ams">
<h2>amsterdam, holland</h2>
<img src="images2/ams/ams-canal.jpg" alt="a large canal surrounded by buildings" width="300" class="location-img">
<p>I visited Amsterdam while backpacking through Europe with my best friend in July 2022</p>
<p class="scroll-instructions">Feel free to scroll through the images below</p>
<div class="ams-grid" tabindex="0">
<img src="images2/ams/ams-basquiat.JPG" alt="a basquiat painting of a man in a yellow shirt" width="300">
<img src="images2/ams/ams-bike.JPG" alt="an orange bike propped against a tree" width="300">
<img src="images2/ams/ams-bird.jpg" alt="black bird sitting on a sign selling fruit" width="300">
<img src="images2/ams/ams-cafe.jpg" alt="brown cafe with red seats outside" width="300">
<img src="images2/ams/ams-canal2.jpg" alt="canal with a large tree and boats" width="300">
<img src="images2/ams/ams-coffee.jpg" alt="coffee with latte art hearts" width="300">
<img src="images2/ams/ams-coffeeshop.jpg" alt="couches in a coffee shop" width="300">
<img src="images2/ams/ams-corner.jpg" alt="street corner with a maroon wall and crossing sign" width="300">
<img src="images2/ams/ams-green.jpg" alt="tall green building" width="300">
</div>
</div>
<div class="barc">
<h2>barcelona, spain</h2>
<img src="images2/barc/barc-sagrada.JPG" alt="la sagrada familia church through tree leaves" width="300" class="location-img">
<p>I visited Barcelona while backpacking through Europe with my best friend in July 2022</p>
<p class="scroll-instructions">Feel free to scroll through the images below</p>
<div class="barc-grid" tabindex="0">
<img src="images2/barc/barc-courtyard.JPG" alt="girl standing in an old courtyard" width="300">
<img src="images2/barc/barc-fruit.JPG" alt="a blue fruit stand" width="300">
<img src="images2/barc/barc-painting.JPG" alt="colorful painting of an angel" width="300">
<img src="images2/barc/barc-statue.JPG" alt="rock statue in front of church" width="300">
<img src="images2/barc/barc-window.JPG" alt="stained glass window" width="300">
<img src="images2/barc/barc-bowl.jpg" alt="acai bowl topped with fruit" width="300">
<img src="images2/barc/barc-castle.jpg" alt="a castle surrounded by trees" width="300">
<img src="images2/barc/barc-gaudi.jpg" alt="gaudi building with unique architecture" width="300">
<img src="images2/barc/barc-sangria.jpg" alt="a glass of red sangria" width="300">
</div>
</div>
<div class="berlin">
<h2>berlin, germany</h2>
<img src="images2/berlin/berlin-tracks.jpg" alt="building with red roof across train tracks" width="300" class="location-img">
<p>I spent New Year Eve 2024 in Berlin and stayed for a week with friends</p>
<p class="scroll-instructions">Feel free to scroll through the images below</p>
<div class="berlin-grid" tabindex="0">
<img src="images2/berlin/berlin-beer.JPG" alt="glass of green beer" width="300">
<img src="images2/berlin/berlin-bookstore.jpg" alt="interior of a bookstore" width="300">
<img src="images2/berlin/berlin-cafe.jpg" alt="cafe with leaves hanging from ceiling" width="300">
<img src="images2/berlin/berlin-chairs.jpg" alt="orange chairs in front of a shop window" width="300">
<img src="images2/berlin/berlin-club.jpg" alt="exterior of a club at night with a bunny sign" width="300">
<img src="images2/berlin/berlin-coffee.jpg" alt="latte with swirling heart latte art" width="300">
<img src="images2/berlin/berlin-corner.jpg" alt="red motorcycle parked on a street corner" width="300">
<img src="images2/berlin/berlin-couch.jpg" alt="old brown coach on the sidewalk" width="300">
<img src="images2/berlin/berlin-gear.jpg" alt="green bike gear on display in a store" width="300">
<img src="images2/berlin/berlin-house.jpg" alt="white house with tall trees in front" width="300">
<img src="images2/berlin/berlin-market.jpg" alt="farmers market indoors with vegetables for sale" width="300">
<img src="images2/berlin/berlin-mural.JPG" alt="girl looking up at a large mural" width="300">
<img src="images2/berlin/berlin-plants.jpg" alt="street corner with plants and paintings" width="300">
<img src="images2/berlin/berlin-steps.JPG" alt="large castle with steps leading up to it" width="300">
<img src="images2/berlin/berlin-store.jpg" alt="store display with nooks containing shoes" width="300">
<img src="images2/berlin/berlin-tattoo.jpg" alt="tattoo shop window with trinkets on display" width="300">
</div>
</div>
<div class="greece">
<h2>naxos, greece</h2>
<img src="images/greece/greece-arch.JPG" alt="a large stne arch with people looking at it" width="300" class="location-img">
<p>I visited the islands of Greece with my family for a family reunion in June 2022</p>
<p class="scroll-instructions">Feel free to scroll through the images below</p>
<div class="greece-grid" tabindex="0">
<img src="images/greece/greece-cat.JPG" alt="a cat on a wall at sunset" width="300">
<img src="images/greece/greece-cat2.JPG" alt="a cat sitting in front of vegetable crates" width="300">
<img src="images/greece/greece-city.JPG" alt="an island city from across the waterway" width="300">
<img src="images/greece/greece-flowers.jpg" alt="purple plants with a city in the distance" width="300">
<img src="images/greece/greece-ocean.JPG" alt="paragliders in the ocean" width="300">
<img src="images/greece/greece-salad.JPG" alt="bowl of salad with outdoor seating by the ocean" width="300">
<img src="images/greece/greece-street.JPG" alt="an alleyway covered in plants" width="300">
</div>
</div>
<div class="paris">
<h2>paris, france</h2>
<img src="images/paris/paris-eiffel.JPG" alt="a girl taking a picture of the eiffel tower in the distance" width="300" class="location-img">
<p>I visited Paris while backpacking in Europe with my best friend in July 2022</p>
<p class="scroll-instructions">Feel free to scroll through the images below</p>
<div class="paris-grid" tabindex="0">
<img src="images/paris/paris-archway.JPG" alt="arc de triomphe archway in paris" width="300">
<img src="images/paris/paris-building.JPG" alt="street corner with sunset reflected on buildings" width="300">
<img src="images/paris/paris-car.JPG" alt="red car parked on a sloped street" width="300">
<img src="images/paris/paris-chateau.JPG" alt="gardens with a castle in the background" width="300">
<img src="images/paris/paris-corner.jpg" alt="girl standing on a street corner" width="300">
<img src="images/paris/paris-daychurch.JPG" alt="a large white cathedral during the day" width="300">
<img src="images/paris/paris-interior.JPG" alt="interior of a castle with murals on the cieling" width="300">
<img src="images/paris/paris-museum.JPG" alt="corner of a stone museum with window cielings and trees" width="300">
<img src="images/paris/paris-nightchurch.JPG" alt="large white cathedral illuminated at night" width="300">
<img src="images/paris/paris-park.JPG" alt="castle gardens with man lounging in chair outside" width="300">
<img src="images/paris/paris-sculpture.JPG" alt="white sculpture of woman with arms cut off" width="300">
<img src="images/paris/paris-tower.jpg" alt="eiffel tower lit up at sunset" width="300">
</div>
</div>
<div class="swe">
<h2>norkopping, sweden</h2>
<img src="images/swe/swe-building2.jpg" alt="yellow buildings with blue sky behind" width="300" class="location-img">
<p>I've visited my family in Sweden multiple times, the most recent being for Christmas in December 2023</p>
<p class="scroll-instructions">Feel free to scroll through the images below</p>
<div class="swe-grid" tabindex="0">
<img src="images/swe/swe-bake.jpg" alt="table with cookies and decorating supplies" width="300">
<img src="images/swe/swe-building.jpg" alt="corner of the roof of a yellow building" width="300">
<img src="images/swe/swe-cave.jpg" alt="girl with headlamp emerging from a cave" width="300">
<img src="images/swe/swe-fika.jpg" alt="store display with various baked goods" width="300">
<img src="images/swe/swe-forest.JPG" alt="two men looking at a frozen lake in the woods" width="300">
<img src="images/swe/swe-fruit.jpg" alt="three pieces of fruit on a place" width="300">
<img src="images/swe/swe-house.JPG" alt="blue house with trees to the right" width="300">
<img src="images/swe/swe-lights.jpg" alt="sidewalk in a blizzard with street lamps on the right" width="300">
<img src="images/swe/swe-pear.jpg" alt="green bottles of pear absolut vodka" width="300">
<img src="images/swe/swe-red.jpg" alt="walkway at night lit up with red lights" width="300">
<img src="images/swe/swe-santas.jpg" alt="shelf covered in figure santas" width="300">
<img src="images/swe/swe-shop.jpg" alt="shelves of a second hand store with books and records" width="300">
<img src="images/swe/swe-snow.jpg" alt="red houses covered in snow" width="300">
<img src="images/swe/swe-street.jpg" alt="street covered in snow with yellow castle in distance" width="300">
<img src="images/swe/swe-water.jpg" alt="waterway with industrial buildings behind" width="300">
</div>
</div>
</main>
<script>
document.querySelectorAll('.ams-grid, .barc-grid, .berlin-grid, .greece-grid, .paris-grid, .swe-grid').forEach(grid => {
grid.addEventListener('keydown', function(e) {
if (e.key === 'ArrowRight') {
this.scrollBy(300, 0);
} else if (e.key === 'ArrowLeft') {
this.scrollBy(-300, 0);
}
});
});
</script>
</body>
</html>