-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathnew_layout.html
223 lines (222 loc) · 9.91 KB
/
new_layout.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
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="new_style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/css/all.min.css" />
</head>
<body>
<nav class="full-width">
<div class="fixed-width">
<div class="logo">
<a href="#">LOGO</a>
</div>
<div class="menu">
<ul>
<li><a href="#">產品</a></li>
<li><a href="#">熱門活動</a></li>
<li><a href="#">商用電腦</a></li>
<li><a href="#">服務社群</a></li>
<li><a href="#">商店</a></li>
</ul>
</div>
<div class="login">
<ul>
<li><a href="#">登入</a></li>
<li><a href="#">搜尋</a></li>
</ul>
</div>
</div>
</nav>
<header class="full-width">
<div class="fixed-width">
<h1>台北忠孝誠品</h1>
<p>自然 純淨 無添加物</p>
<a href="#" class="btn">了解更多</a>
</div>
</header>
<div class="full-width" id="product">
<div class="fixed-width clearfix">
<div class="col-12">
<h2 class="section-title t-center">產品</h2>
</div>
<div class="col-4 t-center">
<img src="http://picsum.photos/id/22/800/600" alt="">
<a href="#" class="btn btn-inverse">詳細資訊</a>
</div>
<div class="col-4 t-center">
<img src="http://picsum.photos/id/23/800/600" alt="">
<a href="#" class="btn btn-inverse">詳細資訊</a>
</div>
<div class="col-4 t-center">
<img src="http://picsum.photos/id/12/800/600" alt="">
<a href="#" class=" btn btn-inverse">詳細資訊</a>
</div>
</div>
</div>
<div class="full-width" id="ad">
<a href="#">
<img src="http://picsum.photos/id/190/1200/600" alt="">
</a>
</div>
<div class="full-width" id="action">
<div class="fixed-width clearfix">
<div class="col-12">
<h2 class="section-title t-center">熱門活動</h2>
</div>
<div class="col-3 t-center">
<h3>活動一</h3>
<p class="t-left">程度相關圖片地點放心已有我真交換下了只能，意大利把握促進緩緩，組成半年新聞資產地位明確本週找到網咖笑話沒想到，感興趣直接什麼享受解決方。
</p class="t-left">
<a href="#" class="btn">參加活動</a>
</div>
<div class="col-3 t-center">
<h3>活動一</h3>
<p class="t-left">程度相關圖片地點放心已有我真交換下了只能，意大利把握促進緩緩，組成半年新聞資產地位明確本週找到網咖笑話沒想到，感興趣直接什麼享受解決方。
</p class="t-left">
<a href="#" class="btn">參加活動</a>
</div>
<div class="col-3 t-center">
<h3>活動一</h3>
<p class="t-left">程度相關圖片地點放心已有我真交換下了只能，意大利把握促進緩緩，組成半年新聞資產地位明確本週找到網咖笑話沒想到，感興趣直接什麼享受解決方。
</p class="t-left">
<a href="#" class="btn">參加活動</a>
</div>
<div class="col-3">
<h3>活動一</h3>
<p class="t-left">程度相關圖片地點放心已有我真交換下了只能，意大利把握促進緩緩，組成半年新聞資產地位明確本週找到網咖笑話沒想到，感興趣直接什麼享受解決方。
</p class="t-left">
<a href="#" class="btn">參加活動</a>
</div>
</div>
</div>
<div class="full-width clearfix" id="business">
<div class="col-2 no-padding">
<a href="#"><img src="http://picsum.photos/id/12/400/300" alt=""></a>
</div>
<div class="col-2 no-padding">
<a href="#"><img src="http://picsum.photos/id/13/400/300" alt=""></a>
</div>
<div class="col-2 no-padding">
<a href="#"><img src="http://picsum.photos/id/14/400/300" alt=""></a>
</div>
<div class="col-2 no-padding">
<a href="#"><img src="http://picsum.photos/id/15/400/300" alt=""></a>
</div>
<div class="col-2 no-padding">
<a href="#"><img src="http://picsum.photos/id/16/400/300" alt=""></a>
</div>
<div class="col-2 no-padding">
<a href="#"><img src="http://picsum.photos/id/17/400/300" alt=""></a>
</div>
</div>
<div class="full-width" id="service">
<div class="fixed-width vam">
<div class="col-12">
<h2 class="section-title t-center">服務社群</h2>
</div>
<div class="col-5">
<img src="https://picsum.photos/id/2/800/600" alt="">
</div>
<div class="col-7">
<h3>服務一</h3>
<p>快捷介紹空間，協會都市年度遊客臺灣人要在請您銀行我要，實業驚訝股份選擇尊重大聲電力中間零售壓縮關鍵有利於大家都，顏色智慧二級等待一陣寫作聲音吃了，一臉汽車認為，虛擬豪華把它描述登記可能會分析謝謝認定大眾天地售價資本，大大高校公司人事真正，開關批發臺灣人意。</p>
<a href="#" class="btn">詳細內容</a>
</div>
</div>
</div>
<div class="full-width" id="service-bottom">
<div class="fixed-width vam">
<div class="col-7">
<h3>服務一</h3>
<p>快捷介紹空間，協會都市年度遊客臺灣人要在請您銀行我要，實業驚訝股份選擇尊重大聲電力中間零售壓縮關鍵有利於大家都，顏色智慧二級等待一陣寫作聲音吃了，一臉汽車認為，虛擬豪華把它描述登記可能會分析謝謝認定大眾天地售價資本，大大高校公司人事真正，開關批發臺灣人意。</p>
<a href="#" class="btn">詳細內容</a>
</div>
<div class="col-5">
<img src="https://picsum.photos/id/4/800/600" alt="">
</div>
</div>
</div>
<div class="full-width" id="store">
<div class="col-6 no-padding">
<a href="#">
<img src="https://picsum.photos/id/8/800/600" alt="">
</a>
</div>
<div class="col-6 no-padding">
<div class="col-6 no-padding">
<img src="https://picsum.photos/id/7/800/600" alt="">
</div>
<div class="col-6 no-padding">
<img src="https://picsum.photos/id/485/800/600" alt="">
</div>
<div class="col-6 no-padding">
<img src="https://picsum.photos/id/405/800/600" alt="">
</div>
<div class="col-6 no-padding">
<img src="https://picsum.photos/id/665/800/600" alt="">
</div>
</div>
</div>
<footer class="full-width">
<div class="fixed-width clearfix">
<div class="col-2">
<h3>探索更多</h3>
<ul>
<li><a href="#">熱門活動</a></li>
<li><a href="#">熱門活動</a></li>
<li><a href="#">熱門活動</a></li>
<li><a href="#">熱門活動</a></li>
<li><a href="#">熱門活動</a></li>
<li><a href="#">熱門活動</a></li>
</ul>
</div>
<div class="col-2">
<h3>關於我們</h3>
<ul>
<li><a href="#">關於我們</a></li>
<li><a href="#">最新消息</a></li>
<li><a href="#">徵才</a></li>
<li><a href="#">投資人關係</a></li>
<li><a href="#">企業社會責任</a></li>
<li><a href="#">熱門活動</a></li>
</ul>
</div>
<div class="col-2">
<h3>支援服務</h3>
<ul>
<li><a href="#">保固查詢</a></li>
<li><a href="#">維修查詢</a></li>
<li><a href="#">服務據點查詢</a></li>
<li><a href="#">聯絡我們</a></li>
<li><a href="#">線上客服</a></li>
</ul>
</div>
<div class="col-6">
<h3>社群</h3>
<div class="sns">
<a href="#"><i class="fab fa-facebook-square fa-2x"></i></a>
<a href="#"><i class="fab fa-youtube fa-2x"></i></a>
<a href="#"><i class="fab fa-instagram fa-2x"></i></a>
<a href="#"><i class="fab fa-line fa-2x"></i></a>
</div>
</div>
</div>
</footer>
<div class="full-width" id="copyright">
<div class="fixed-width clearfix">
<div class="col-6">
<a href="#">Taiwan/繁體中文</a>
</div>
<div class="col-6">
<a href="#">使用條款</a>
<a href="#">隱私權保護政策</a>
<span>COPYRIGHT © 2019</span>
</div>
</div>
</div>
</body>
</html>