-
Notifications
You must be signed in to change notification settings - Fork 0
/
landscape.html
150 lines (143 loc) · 6.35 KB
/
landscape.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="images/camera.png">
<link rel="stylesheet" href="css/html5reset.css">
<link rel="stylesheet" href="css/all.min.css">
<link rel="stylesheet" href="css/style.css">
<title>Landscape</title>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXMT8M416L"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXMT8M416L');
</script>
</head>
<body>
<a class = "skip" href="#main">Skip to Main Content</a>
<header>
<nav>
<ul class="nav_links">
<li class="home"><a href = "index.html"><i class="fa-solid fa-camera"></i> About</a></li>
<li class="active"><a href = "landscape.html"><i class="fa-solid fa-mountain-sun"></i> Landscape</a></li>
<li><a href = "wildlife.html"><i class="fa-solid fa-cow"></i> Wildlife</a></li>
<li><a href = "family.html"><i class="fa-solid fa-people-group"></i> Family</a></li>
</ul>
</nav>
<h1 id="main">Landscape</h1>
</header>
<main>
<button onclick="changeLanguage(this)" id="language">中文</button>
<p class="en">Yellowstone and Teton were really beautiful. The main attraction was obviously the hot springs, but everything
overall was really nice with the mountains in the background. Some of my favorite pictures are not actually
from the main attractions, but different places where we observed just how beautiful it is with less people.
Whenever we visit somewhere new, I end up changing my laptop screensaver to one of these new pictures.
Sometimes I also change my phone background as well if there's a nice portrait picture.
</p>
<p class="ch">
黄石和提顿真的很漂亮。主要的吸引力显然是温泉，但一切
总体而言，背景中的山脉非常好。我最喜欢的一些图片实际上并不是
从主要景点出发，但在不同的地方，我们观察到它是多么美丽，人少。
每当我们访问新的地方时，我最终都会将我的笔记本电脑屏幕保护程序更改为这些新图片之一。
如果有一张漂亮的肖像照片，有时我也会更改我的手机背景。
</p>
<div class='gridGallery'>
<figure id="A" onmouseover="color(this)"
onmouseout="blackwhite(this)">
<img src = "images/blackpool.jpg" alt = "blue hot spring" class='image'/>
<figcaption class="fig_text">Black Pool of West Thumb Geyser Basin</figcaption>
</figure>
<figure id="B" onmouseover="color(this)"
onmouseout="blackwhite(this)">
<img src = "images/grandprismaticspring.jpg" alt = "colorful spring with trees in front" class='image'/>
<figcaption class="fig_text">Grand Prismatic Spring</figcaption>
</figure>
<figure id="C" onmouseover="color(this)"
onmouseout="blackwhite(this)">
<img src = "images/lamarvalley.jpg" alt = "grass with hills in the background" class='image'/>
<figcaption class="fig_text">Lamar Valley</figcaption>
</figure>
<figure id="D" onmouseover="color(this)"
onmouseout="blackwhite(this)">
<img src = "images/mammothhotsprings.jpg" alt = "white hot springs with mountain background" class='image'/>
<figcaption class="fig_text">Mammoth Hot Springs with Mt Everts in Background</figcaption>
</figure>
<figure id="E" onmouseover="color(this)"
onmouseout="blackwhite(this)">
<img src = "images/sunstarburst.jpg" alt = "sun shining through tree" class='image'/>
<figcaption class="fig_text">Sun Star Burst through the Tree at 44.969956855632034, -110.70268118221108</figcaption>
</figure>
<figure id="F" onmouseover="color(this)"
onmouseout="blackwhite(this)">
<img src = "images/sunset.jpg" alt = "sunset over springs" class='image'/>
<figcaption class="fig_text">Sunset Near Old Faithful</figcaption>
</figure>
<figure id="G" onmouseover="color(this)"
onmouseout="blackwhite(this)">
<img src = "images/moonrise.jpg" alt = "moon in dark blue sky" class='image'/>
<figcaption class="fig_text">Moon Rise at Hayden Valley Overlook</figcaption>
</figure>
<figure id="H" onmouseover="color(this)"
onmouseout="blackwhite(this)">
<img src = "images/westthumb.jpg" alt = "hot springs in front of lake" class='image'/>
<figcaption class="fig_text">West Thumb View</figcaption>
</figure>
<figure id="I" onmouseover="color(this)"
onmouseout="blackwhite(this)">
<img src = "images/lonepine.jpg" alt = "lone pine tree" class='image'/>
<figcaption class="fig_text">Lone Pine Tree across Heron Pond (185 m away) and Grand Teton Peak in Background (13 mi away)</figcaption>
</figure>
</div>
</main>
<footer>
<p>Claire Wan ~ Yellowsone Photographs</p>
</footer>
<script>
function changeLanguage(item) {
console.log('button pressed')
// console.log(document.get)
var ch = document.getElementsByClassName('ch');
var en = document.getElementsByClassName('en');
console.log("inner text: " + item.innerText)
// console.log(item.innerText)
if (item.innerText == 'English') {
console.log("ENGLISH")
for (let i = 0; i < ch.length; i++) {
ch[i].style.display = "none";
en[i].style.display = "block";
}
item.innerText = '中文'
}
else {
console.log("CHINESE")
for (let i = 0; i < ch.length; i++) {
ch[i].style.display = "block";
en[i].style.display = "none";
}
item.innerText = 'English'
}
}
function color(item) {
console.log(item)
var image = item.getElementsByClassName('image')[0];
var text = item.getElementsByClassName('fig_text')[0];
console.log(image)
image.style.filter = 'none'
image.style.transition = '0.75s'
text.style.display = 'table-caption';
}
function blackwhite(item) {
var image = item.getElementsByClassName('image')[0];
var text = item.getElementsByClassName('fig_text')[0];
console.log(image)
image.style.filter = 'grayscale(100%)'
image.style.transition = '3s'
text.style.display = 'none';
}
</script>
</body>
</html>