-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
181 lines (166 loc) · 5.72 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">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="切版練習">
<title>貓咖啡 Cat Cafe</title>
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="./reset.css">
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="./main.js"></script>
</head>
<body>
<div id="header">
<nav>
<ul>
<li><a href="#menu">餐點服務</a></li>
<li><a href="#about">關於我們</a></li>
<li><a href="#location">本店位置</a></li>
</ul>
</nav>
<h1 class="site-title"><img src="./logo.png" alt="logo"></h1>
</div>
<main>
<!-- Menu -->
<section id="menu">
<div class="menu-img fixed-bg">
<h2 class="sec-title">MENU</h2>
</div>
<div class="menu-content wrapper">
<div class="menu-item">
<h3 class="item-title">COFFEE</h3>
<dl class="coffee">
<dt>精選冰滴咖啡</dt>
<dd>NT$ 80</dd>
<dt>經典美式咖啡</dt>
<dd>NT$ 80</dd>
<dt>雪山卡布奇諾</dt>
<dd>NT$ 90</dd>
<dt>宇治抹茶拿鐵</dt>
<dd>NT$ 90</dd>
<dt>榛果拿鐵</dt>
<dd>NT$ 90</dd>
<dt>斯里蘭卡紅茶</dt>
<dd>NT$ 80</dd>
<dt>茉莉花茶</dt>
<dd>NT$ 70</dd>
<dt>蜜桃冰茶</dt>
<dd>NT$ 70</dd>
<dt>金萱烏龍茶</dt>
<dd>NT$ 80</dd>
<dt>紅玫瑰花茶</dt>
<dd>NT$ 90</dd>
</dl>
</div>
<div class="menu-item">
<h3 class="item-title">FOOD</h3>
<dl class="food">
<dt>燻鮭三明治</dt>
<dd>NT$120</dd>
<dt>菠菜蘑菇鹹派</dt>
<dd>NT$140</dd>
<dt>起司燻雞三明治</dt>
<dd>NT$110</dd>
<dt>法式經典牛角</dt>
<dd>NT$ 70</dd>
</dl>
<h3 class="item-title">DESERT</h3>
<dl class="Other">
<dt>瑪德蓮蛋糕</dt>
<dd>NT$ 70</dd>
<dt>焦糖冰淇淋鬆餅</dt>
<dd>NT$100</dd>
<dt>草莓乳酪蛋糕</dt>
<dd>NT$ 80</dd>
</dl>
</div>
</div>
</section>
<!-- About -->
<section id="about">
<div class="about-img fixed-bg">
<h2 class="sec-title">ABOUT</h2>
</div>
<div class="about-content wrapper">
<div class="about-item">
<h3 class="item-title">貓咖啡</h3>
<ul>
<li>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloribus reprehenderit a dolores modi hic
quia sunt quo necessitatibus quisquam possimus?Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Nulla, laboriosam!</p>
<li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Optio earum quaerat accusantium quia ad, a
explicabo quo reprehenderit architecto? Labore.Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Nisi, ex?</p>
<li>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eligendi numquam beatae molestias veniam.
Laudantium perspiciatis inventore quaerat consequatur vitae nesciunt!Lorem ipsum dolor sit amet
consectetur adipisicing elit. Tempora, exercitationem.</p>
<li>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reiciendis unde nostrum, modi eos impedit
veniam fugit labore magni consequuntur quis.Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed,
ab!</p>
<li>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reiciendis unde nostrum, modi eos impedit
veniam fugit labore magni consequuntur quis.Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed,
ab!</p>
</ul>
<a class="btn">
<span>閱讀更多</span>
</a>
</div>
</div>
</section>
<!-- Location -->
<section id="location">
<div class="location-img fixed-bg">
<h2 class="sec-title">LOCATION</h2>
</div>
<div class="location-content wrapper">
<div class="location-item">
<h3 class="item-title">本店位置</h3>
<div class="item-map">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3640.695078454821!2d120.3052886149941!3d22.59793098515825!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x346e05273e62bfeb%3A0xd6c682d6af7c0510!2z5aSn6bq0IOmXruaVuOS6p-euoeeQhuWkp-Wkp-Wkp-Wkp-Wkp-WkqOWkpOWkpOWkpOWkpuWQjeiZtA!5e0!3m2!1szh-TW!2stw!4v1649352948085!5m2!1szh-TW!2stw"
frameborder="0">
</iframe>
</div>
<div class="item-info">
<p>
<i class="fa-solid fa-location-dot" style="color: #feaf80;"></i>
<span>地址</span><br>
高雄市前鎮區中華五路789號5樓
</p>
<p>
<i class="fa-solid fa-clock" style="color: #feaf80;"></i>
<span>營業時間</span><br>星期一至星期五:上午 10:00 - 晚上 9:00<br>
星期六和星期日:上午 9:00 - 晚上 10:00
</p>
<p><i class="fa-solid fa-phone" style="color: #feaf80;"></i>
<span>電話</span><br> 07-123-4567
</p>
</div>
</div>
</div>
</section>
<a class="top" href="#"><i class="fa-solid fa-paw" style="color: #feaf80;"></i>
<span>top</span>
</a>
</main>
<footer id="footer">
<p>© 2023 貓咖啡</p>
</footer>
<script>
/*閱讀更多*/
const btn = document.querySelector('.btn');
const hiddenItems = document.querySelectorAll('#about ul li:nth-child(n+4)');
btn.addEventListener('click', function () {
for (var i = 0; i < hiddenItems.length; i++) {
hiddenItems[i].style.display = 'block';
}
btn.style.display = 'none';
btn.style.height = '0';
});
</script>
</body>
</html>