-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhometown.html
205 lines (173 loc) · 8.99 KB
/
hometown.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
<!DOCTYPE html>
<html lang="en-US">
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<script src="https://kit.fontawesome.com/b37b8c0ad2.js" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<link href="styles.css" rel="stylesheet">
<title>My Hometown</title>
</head>
<body>
<div class="lang-menu hometown blurable">
<div><i class="fas fa-globe hometown" id="lang-button"></i></div>
<div class="lang-drop-down hometown">
<a id="lang" href="hometown_ua.html">Українська</a>
</div>
</div>
<header class="blurable" style="background-image: url(img/hometown/sky.jpeg);">
<div class="container-fluid" style="color: #e2dfd0;">
<div class="row justify-content-center"><h1>ZHOVTI VODY</h1></div>
<div class="row justify-content-center"><h3>My hometown</h3></div>
<div class="row justify-content-end">
<div class="col-6 col-sm-4"><p style="text-align: right; font-size: 1.15em; letter-spacing: 2px;"><cite>A man travels the world over in search of what he needs and returns home to find it.</cite><br />George A. Moore</p>
</div>
</div>
</div>
</header>
<main class="hometown-svg">
<div class="sticky" id="nav-bar">
<div class="menu-btn hometown">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div id="nav-drop-down" class="menu-down menu-up">
<a href="index.html"><i class="fab fa-raspberry-pi hometown"></i><span class="hometown">Intro</span></a>
<a href="hometown.html" id="current"><i class="fas fa-home hometown"></i><span class="hometown">Hometown</span></a>
<a href="outdoors.html"><i class="fas fa-hiking hometown"></i><span class="hometown">Outdoors</span></a>
<a href="cities.html"><i class="fas fa-city hometown"></i><span class="hometown">Cities</span></a>
</div>
</div>
<div class="container-fluid blurable" style="margin-top: -2.5rem; padding-bottom: 2rem;">
<div class="row align-items-center presentation">
<div class="col-lg-4" style="margin-top: 4.3rem;">
<div class="article-holder hometown">
<div class="heading hometown"><h2>Zhovti Vody</h2></div>
<div class="col article hometown">
<article>
<p>I was born in a relatively small town in central Ukraine: Zhovti Vody. The name literally means "yellow waters." It is best know back home for the famous cossack battle lead by Bohdan Khmelnytsky against the Rzeczpospolita in 1648. Remarkably, while that battle was named after Zhovti Vody the town was only established some 250 years later. </p>
<p>It is a rather tranquil little town that drowns in trees. It feels like one huge park in the summer and a colorful forest in the fall. The most notable structure is the Palace of Culture which strikes a random visitor as an outsider. It is just too grand and too beautiful for the town while also seems to be an out of time reminiscence.</p>
<p>One more remarkable feature of Zhovti Vody is that it is one of the few places where the uranium ore is still being produced and enriched. This inevitably affected the infrastructure design laid out back in the USSR times. Due to town's strategic value it never got the railway connection (the nearest station is 20km away). This secluded the place from the outer world which is felt even more profoundly now that the roads around it are degrading. One must have true determination (or a jeep) to reach Zhovti Vody.</p>
</article>
</div>
</div>
</div>
<div class="col-lg-8 map-gal">
<div class="row tabs justify-content-end">
<button class="col-auto tablink hometown" onclick="openTab(event, 'map')" id="default">Map</button>
<button class="col-auto tablink hometown" onclick="openTab(event, 'gallery')">Gallery</button>
</div>
<div id="map" class="col tab1content hometown">
<iframe src="https://www.google.com/maps/d/u/0/embed?mid=1JfLtcnHwunr1ZSAIxNF9O52jxujipAEw" width="100%" height="100%" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
</div>
<div id="gallery" class="col tab1content hometown">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel" data-interval="10000">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="img/hometown/monument.jpg" alt="Monument">
<div class="carousel-caption d-none d-md-block" id="carousel-cap">
<h5>Iconic symbol of Zhovti Vody</h5>
<p>Maksym Kryvonis, Bohdan Khmelnytsky, Ivan Bohun</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/hometown/palace.jpg" alt="Palace of Culture">
<div class="carousel-caption d-none d-md-block">
<h5>Palace of Culture</h5>
<p>Build in 1957</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/hometown/lenin.jpg" alt="Empty Lenin pedestal">
<div class="carousel-caption d-none d-md-block">
<h5>Empty Lenin pedestal</h5>
<p>His absence is more profound than his presence ever was</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="blurable hometown">
<div class="row justify-content-center" style="margin: 0;">
<div class="col-auto">All rights reserved ©2019. Made in Istanbul<br />Powered by Bootstrap.CSS</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
document.querySelector(".menu-btn > div").addEventListener("click", function(e) {
e.stopPropagation();
e.preventDefault();
});
document.querySelector(".menu-btn").addEventListener("click", menuBtnTransform);
document.querySelector(".menu-btn").addEventListener("click", dropDownMenu);
document.querySelector(".menu-btn").addEventListener("click", blur);
document.getElementById("lang-button").addEventListener("click", langMenu);
function langMenu () {
document.querySelector(".lang-drop-down").classList.toggle("down");
}
function menuBtnTransform() {
var x = document.getElementsByClassName("menu-btn");
for (var a = 0; a < x.length; a++) {
var b = x[a];
b.classList.toggle("change");
}
}
function dropDownMenu() {
document.getElementById("nav-drop-down").classList.toggle("menu-up");
}
window.onclick = function(event) {
if (!event.target.matches('.menu-btn')) {
var dropdown = document.getElementById("nav-drop-down");
if (!dropdown.classList.contains('menu-up')) {
dropdown.classList.add('menu-up');
}
document.querySelector(".menu-btn").classList.remove('change');
var deblur = document.getElementsByClassName("blurable");
for (var a = 0; a < deblur.length; a++) {
deblur[a].classList.remove("blur");
}
document.querySelector("main").classList.remove("blur-background");
}
if (!event.target.matches('#lang-button')) {
document.querySelector(".lang-drop-down").classList.remove("down");
}
}
function blur() {
var a = document.getElementsByClassName("blurable");
for (var b = 0; b < a.length; b++) {
a[b].classList.toggle("blur");
}
document.querySelector("main").classList.toggle("blur-background");
}
document.getElementById("default").click();
function openTab(evt, tabName) {
var i, tabcontent, tablink;
tabcontent = document.getElementsByClassName("tab1content");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablink = document.getElementsByClassName("tablink");
for (i = 0; i < tablink.length; i++) {
tablink[i].className = tablink[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</body>
</html>