-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
181 lines (167 loc) · 7.12 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
<!DOCTYPE html>
<html lang="en">
<!-- All of the meta data for the page belongs in the header tag -->
<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">
<link href="https://fonts.googleapis.com/css2?family=League+Spartan&display=swap" rel="stylesheet">
<title>Home</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="active home"><a href = "index.html"><i class="fa-solid fa-camera"></i> About</a></li>
<li><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" class="parallex">Yellowstone Photography</h1>
</header>
<main>
<div class="flip-card" id="animation">
<div class="flip-card-inner" tabindex="0">
<div class="flip-card-front">
<img src="images/camera.png" alt="Camera at Yellowstone" id="camera" class="special">
</div>
<div class="flip-card-back">
<h1>Cameras</h1>
<p>The camera used for most of these pictures of the Canon EOS-1D X Mark II.</p>
</div>
</div>
</div>
<button onclick="changeLanguage(this)" id="languageFront">中文</button>
<div class="homeflex">
<div id="hometext">
<p class="en">Over the summer, my family went to Yellowstone and Grand Teton National Park.
It was an amazing and beautiful trip, and I wanted to share some of the pictures.
My dad takes really great photos, and I wanted to be able to share them somewhere in some way.
He brought 3 cameras on the trip and took a lot of really cool pictures of the landscape.
We were also lucky and managed to see a lot of wildlife and got some really cool pictures of them too.
This site just showcases some of the really cool things we got to see that my dad captured really well.
</p>
<p class="ch">
整个夏天，我的家人去了黄石公园和大提顿国家公园。
这是一次奇妙而美丽的旅行，我想分享一些照片。
我爸爸拍了很棒的照片，我希望能够以某种方式在某个地方分享它们。
他在旅途中带了 3 台相机，拍了很多非常酷的风景照片。
我们也很幸运，设法看到了很多野生动物，也拍到了一些非常酷的照片。
这个网站只是展示了我们看到的一些非常酷的东西，我爸爸拍得非常好。
</p>
<p class="en">Yellowstone and Grand Teton National Park are located in the northwest corner of Wyoming.
We flew into Jackson Hole and drove to the two national parks.
We started in Grand Teton and then Yellowstone.
Yellowstone is the oldest national park and its most famous attraction is Old Faithful geyser.
We spent one week exploring these parks before driving back through Grand Teton to Jackson Hole.
</p>
<p class="ch">
黄石公园和大提顿国家公园位于怀俄明州的西北角。
我们飞入杰克逊霍尔，然后驱车前往两个国家公园。
我们从大提顿开始，然后是黄石。
黄石公园是最古老的国家公园，最著名的景点是老忠实间歇泉。
我们花了一周的时间探索这些公园，然后开车穿过大提顿回到杰克逊霍尔。
</p>
</div>
<div>
<form action="https://formspree.io/f/xwkyqqan" method="POST">
<fieldset>
<legend>Contact Form</legend>
<div class="formflex">
<div class="form_entry">
<label for="name_id">Your Name:</label>
<input type="text" placeholder="Enter Your Name" id="name_id" name="name" required>
</div>
<div class="form_entry">
<label for="email_id">Your Email:</label>
<input type="email" placeholder="Enter Your Email" id="email_id" name="email" required>
</div>
<div class="form_entry">
<label for="number_id">Your Phone Number:</label>
<input type="text" placeholder="Enter Your Number" id="number_id" name="number">
</div>
<div class="form_entry">
<label for="msg">Message:</label>
<textarea placeholder="Leave a Message" id="msg" name="mesg" required></textarea>
</div>
</div>
<input type="submit" value = "Contact Me">
</fieldset>
</form>
</div>
<div id="factGenerator">
<button onclick="randomFact()">Click for a Random Yellowstone Fact!</button>
<p id="fact"></p>
<a href="wildlife.html" class="generatorLink" id="wildlife">Wildlife</a>
<a href="landscape.html" class="generatorLink" id="landscape">Landscape</a>
</div>
</div>
</main>
<!-- Footer is a sematic tag page that aids readability -->
<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 randomFact() {
var display = document.getElementById('fact');
var wildlifeLink = document.getElementById('wildlife');
var landscapeLink = document.getElementById('landscape');
var possibleFacts = [
"Yellowstone National Park is over 2 million acres.",
"Yellowstone has more than 900 miles of hiking trails.",
"There are over 67 species of mammals in the park. Click below to see some pictures.",
"There are over 330 species of birds within the park. Click below to see some pictures.",
"Half of the world's hydrothermal features are found at Yellowstone. Click below to see some pictures.",
"Yellowstone is a supervolcano. Click below to see some pictures."
]
var randomNumber = Math.floor(Math.random() * 6);
display.innerText = possibleFacts[randomNumber];
wildlifeLink.style.display = "none";
landscapeLink.style.display = "none";
if (randomNumber == 2 || randomNumber == 3) {
wildlifeLink.style.display = "inline-block";
}
if (randomNumber == 4 || randomNumber == 5) {
landscapeLink.style.display = "inline-block";
}
}
</script>
</body>
</html>