-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
119 lines (113 loc) · 4.67 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
<!DOCTYPE html>
<html lang="zh=Hants">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
crossorigin="anonymous"
referrerpolicy="no-referrer" />
<link rel="stylesheet" href="./style/style.css" />
<title>日本旅遊推薦</title>
</head>
<body>
<img class="fixed-img" src="./images/富士山2.jpg" alt="fixed-img" />
<header>
<section class="logo">
<img src="./images/網站Logo.svg" alt="logo" />
<h1>2024日本旅遊推薦</h1>
</section>
<nav>
<ul>
<li>
<a href="#"><i class="fa-regular fa-paper-plane"></i> 日本旅遊</a>
</li>
<li>
<a href="#"><i class="fa-regular fa-user"></i> 會員登錄</a>
</li>
<li>
<a href="#"><i class="fa-regular fa-calendar"></i> 預約行程</a>
</li>
<li>
<a href="#"><i class="fa-regular fa-address-book"></i> 聯絡我們</a>
</li>
</ul>
</nav>
</header>
<main>
<section class="background-img">
<div class="filter"></div>
<h3>休閒空間，特殊假期。<br />安排一趟日本旅遊行程，可以放鬆身心</h3>
</section>
<section class="info-circles">
<h3>遊玩主題</h3>
<div class="circles">
<div class="circle">
<img src="./images/北海道雪景.jpg" alt="北海道雪景" />
<p>北海道美景，美不勝收</p>
</div>
<div class="circle">
<img src="./images/日本壽司.jpg" alt="日本壽司" />
<p>日本道地壽司與美食</p>
</div>
<div class="circle">
<img src="./images/富士山.jpg" alt="富士山" />
<p>富士山風景與溫泉</p>
</div>
<div class="circle">
<img src="./images/清水寺.jpg" alt="清水寺" />
<p>京都清水寺，千年古都</p>
</div>
</div>
</section>
<section class="empty-container">
<h3>今天就開始規劃行程，找到最適合的方案!</h3>
</section>
<section class="google-map">
<h3>日本地理位置</h3>
<p>
日本在地理上屬於東北亞，東鄰太平洋，西以日本海、朝鮮海峽、東海與歐亞大陸的西伯利亞、朝鮮半島、中國大陸鄰接，南以菲律賓海與台灣、馬里亞納群島鄰接，北以宗谷海峽、鄂霍次克海與庫頁島、千島群島鄰接。日本一年四季都是舒爽怡人的氣候，四季變化分明。
南部暖和，越往北部越寒冷。
特別是冬天吹西北季風，在日本海側會下很多雪。
另一方面、在太平洋側會持續是被稱為「冬晴」的乾燥晴天。
</p>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6362095.348533023!2d138.8796942994618!3d36.12877557978968!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x34674e0fd77f192f%3A0xf54275d47c665244!2z5pel5pys!5e0!3m2!1szh-TW!2stw!4v1695871151170!5m2!1szh-TW!2stw"
style="border: 0"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</section>
</main>
<footer>
<section class="logo">
<img src="./images/網站Logo.svg" alt="logo" />
<h3>2024日本旅遊推薦</h3>
</section>
<section class="links">
<a href="#"><img src="./Icons/facebook.svg" alt="facebook" /></a>
<a href="#"><img src="./Icons/instagram.svg" alt="instagram" /></a>
<a href="#"><img src="./Icons/twitter.svg" alt="twitter" /></a>
<a href="#"><img src="./Icons/youtube.svg" alt="youtube" /></a>
</section>
</footer>
<script>
setInterval(() => {
let topBackground = document.querySelector("section.background-img");
if (
topBackground.style.backgroundImage == 'url("./images/日本櫻花.jpg")'
) {
topBackground.style.backgroundImage = 'url("./images/京都古城.jpg")';
} else if (
topBackground.style.backgroundImage == 'url("./images/京都古城.jpg")'
) {
topBackground.style.backgroundImage = 'url("./images/大阪街頭.jpg")';
} else {
topBackground.style.backgroundImage = 'url("./images/日本櫻花.jpg")';
}
}, 3000);
</script>
</body>
</html>