-
Notifications
You must be signed in to change notification settings - Fork 0
/
test.html
175 lines (168 loc) · 5.53 KB
/
test.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tea Select</title>
<!-- favicon -->
<link rel="icon" href="./favicon.png" />
<!-- reset -->
<link rel="stylesheet" href="./normalize.css" />
<!--
fonawesome -->
<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"
/>
<!-- google font -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300&family=Noto+Serif+TC:wght@300&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="./navbar.css" />
</head>
<body>
<img class="fixed-img" src="./tea garden.jpg" alt="teaGraden" />
<header class="title">
<div class="hb">
<span></span>
<span></span>
<span></span>
</div>
<nav>
<a href="./news.html">最新</a>
<a href="./about.html">關於我們</a>
<a href="#">商品介紹</a>
</nav>
<div class="nav-img">
<a href="./fontPage.html"><img src="./Group 49.png" alt="logo" /></a>
</div>
<nav>
<a href="./location.html">聯絡我們</a>
<a href="./join.html">加盟</a>
<a href="./location.html">會員</a>
</nav>
</header>
<div class="banner">
<div class="banner-title">
<!-- <h1>聯絡我們</h1>
<h1>Contact us</h1> -->
</div>
</div>
<div class="sale">
<div class="sale-title">
<h2>好評必喝推薦</h2>
</div>
<div class="sale-card">
<div class="card">
<img src="./飲料圖片/黑糖.jpg" alt="黑糖" />
<h3>黑糖珍珠鮮奶</h3>
</div>
<div class="card">
<img src="./飲料圖片/奶蓋.jpg" alt="奶蓋" />
<h3>奶蓋綠茶</h3>
</div>
<div class="card">
<img src="./飲料圖片/烏龍茶.jpg" alt="烏龍茶" />
<h3>琥珀烏龍</h3>
</div>
<div class="card">
<img src="./飲料圖片/抹茶那堤.jpg" alt="抹茶" />
<h3>抹茶那堤</h3>
</div>
</div>
</div>
<div class="font-about">
<div class="about-text">
<h2>關於TeaSelect</h2>
<p>
TeaSelect創立於2023年，近年健康意識抬頭，
消費者也更注重原物料的來源，因此TeaSelect
也更注重也更注重朔源管理，將茶葉來源清楚地
提供給消費者，讓消費者可以安心地享用一杯好茶.....
</p>
<a href="#">了解更多</a>
</div>
<div class="about-img">
<img src="./font-about-img.jpg" alt="font-about-img" />
</div>
</div>
<div class="filter">
<div class="flex-select">
<div class="select">
<i class="fa-solid fa-leaf"></i>
<p>關於茶葉，這裡有更好的選擇</p>
</div>
<div class="select">
<i class="fa-solid fa-list-check"></i>
<p>通過檢驗，讓您喝得更安心</p>
</div>
<div class="select">
<i class="fa-solid fa-fire"></i>
<p>慢火烘培，散發出清香的氣味</p>
</div>
<div class="select">
<i class="fa-solid fa-glass-water-droplet"></i>
<p>新鮮現泡，只提供最好的飲品</p>
</div>
</div>
</div>
<div class="news">
<h2 class="news-title">最新消息</h2>
<div class="news-info">
<p>2023/11/15</p>
<p>我們非常榮幸地宣布，每月15日為我們的特別日子----會員日!</p>
</div>
<div class="news-info">
<p>2023/11/11</p>
<p>
我們滿懷興奮和喜悅，宣布一個令人振奮的消息—Tea Select中壢店正式開幕！
</p>
</div>
<a href="#" class="news-more-info">更多資訊</a>
</div>
<div class="store-search">
<h2>門市查詢</h2>
<div class="input-group">
<input type="text" placeholder="請輸入縣市" />
<input type="text" placeholder="地區" />
<input type="text" class="address" placeholder="請輸入地址" />
<a href="#">查詢</a>
</div>
</div>
<footer>
<div class="footer-info">
<img src="./footer-logo.svg" alt="teaSelect" />
<div class="info">
<div class="breadcrumb">
<span>客服電話</span>
<span>商品列表</span>
<span>收到最新消息</span>
<span>加盟Tea Select</span>
</div>
<div class="info-icon">
<i class="fa-brands fa-line"></i>
<i class="fa-brands fa-instagram"></i>
<i class="fa-brands fa-square-facebook"></i>
</div>
</div>
<div class="contact">
<p>客服時間:09:00~17:00</p>
<p>電話:03-3322221</p>
<p>信箱:[email protected]</p>
</div>
</div>
<div class="copyright">
<p>
本網站為緯育TibaMe_前端設計工程師班學員專題成果作品，本平台僅供學習、展示之用。
</p>
</div>
</footer>
<script src="./navbar.js"></script>
</body>
</html>