-
Notifications
You must be signed in to change notification settings - Fork 0
/
uiux.html
651 lines (649 loc) · 28 KB
/
uiux.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
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
<!DOCTYPE html>
<html lang="zh-hant">
<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" />
<title>必須公車｜BUSY BUS</title>
<link href="img/S-logo.ico" rel="shortcut icon" />
<link rel="stylesheet" href="./style/uiux.css" />
<link rel="stylesheet" href="./style/navbar.css" />
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/bootstrap-grid.min.css"
rel="stylesheet"
integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0"
crossorigin="anonymous"
/>
<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@100;300;400;500;700;900&display=swap"
rel="stylesheet"
/>
<script
src="https://kit.fontawesome.com/548e1038d8.js"
crossorigin="anonymous"
></script>
</head>
<body>
<main>
<div class="position-relative">
<div class="busy-bus-header-bg"></div>
<div class="busy-bus-header-cont">
<div class="busy-bus-logo">
<img src="./img/uiux/busy-bus-logo_logo.png" class="logo-image" />
<div class="logo-text-cont">
<h1>必須公車</h1>
<p>BUSY BUS</p>
</div>
</div>
<img
class="header-phone-img"
src="./img/uiux/busy-bus-header-image-1.png"
/>
</div>
</div>
<section class="about-busy-bus">
<div class="title-uiux-light reveal">ABOUT BUSY BUS</div>
<div class="about-busy-bus-cont">
<div class="about-busy-bus-image reveal"></div>
<div class="about-busy-bus-text reveal">
<p class="pdb-32">
BUSY
BUS是一款公共交通軟體，製作此專案主要是因為目前雖然交通發達，但是仍有些給予使用者的交通資訊還尚未成熟，且公車仍然是目前全國最普及的公共大眾運輸。
</p>
<p>
因此，希望透過資訊整合與優化介面設計，並且強化對用戶的通知提醒，讓長期使公車運輸的用戶在外出交通上能帶來更加便利的體驗。
</p>
</div>
</div>
</section>
<section class="goals">
<div class="goals-cont">
<div class="title-uiux-dark reveal">GOALS</div>
<div class="goals-flex">
<div class="goals-card reveal">
<h2>優化使用體驗</h2>
<p>
簡化使用流程，整合主要的功能介面，讓使用者更直覺地操作我們的產品。
</p>
</div>
<div class="goals-card reveal">
<h2>降低時間成本</h2>
<p>
即時接收當前資訊，減少不必要的時間浪費，並更精準地瞭解抵達站牌的資訊。
</p>
</div>
<div class="goals-card reveal">
<h2>達成出行便利性</h2>
<p>即使來到陌生的地方旅行，也能夠掌握目前公車交通的資訊。</p>
</div>
</div>
</div>
</section>
<section class="persona">
<div class="title-uiux-light reveal">PERSONA</div>
<div class="persona-wrapper">
<div class="persona-left-side reveal">
<div class="persona-dialog-box">
<div class="dialog-circle"></div>
<h2>佳惠</h2>
<table class="persona-dialog-info">
<tr>
<td>年齡</td>
<td><span>28歲</span></td>
</tr>
<tr>
<td>職業</td>
<td><span>行政人員</span></td>
</tr>
<tr>
<td>交通</td>
<td><span>公車</span></td>
</tr>
</table>
</div>
<div class="persona-dialog-box-trig"></div>
<img src="./img/BUSYBUS-persona-avatar_jiahui.png" />
</div>
<div class="persona-right-side reveal">
<div class="color-upc1-border right-side-info-box">
<p>
佳惠是一名內湖科技園區內的上班族，因為住家在汐止的關係，附近沒有可以捷運、火車可以直達，僅能依靠公車來完成直達交通，距離上班的地點在公車上的通勤時間約莫花費20
- 30分鐘。
</p>
<p>
因為她本身是個夜貓族，通常很晚睡，所以在搭公車的時候經常會在公車上小睡片刻，但是又害怕錯過下車站牌，所以也不太能好好在公車上休息。
</p>
<div class="color-upc1-font right-side-info-box-title">
關於佳惠
</div>
</div>
<div class="color-ufc-border right-side-info-box">
<p>
<i class="fa-solid fa-circle" style="color: #ed6a5e"></i
> 經常在公車站等車時，大多數站台設備簡陋，容易受到日曬和雨淋的影響。
</p>
<p>
<i class="fa-solid fa-circle" style="color: #ed6a5e"></i
> 在搭公車上下班時，會因為滑手機滑得太專心，或是不小心睡著了，而錯過抵達目的地最近的站牌。
</p>
<div class="color-ufc-font right-side-info-box-title">痛點</div>
</div>
<div class="color-udc-border right-side-info-box">
<p>
<i class="fa-solid fa-circle" style="color: #3c8bb8"></i
> 她希望能夠擁有一個可以知道從住家到公司的公車班次、且距離最近的站牌在哪裡、預計什麼時候會到站、也能把該站牌存起來的公車交通APP。
</p>
<p>
<i class="fa-solid fa-circle" style="color: #3c8bb8"></i
> 她也希望可以在公車上睡一會兒，或是在公車站內專心使用手機，這樣就不會錯過下車的時機。
</p>
<div class="color-udc-font right-side-info-box-title">目標</div>
</div>
</div>
</div>
<div class="persona-wrapper fd-rrc">
<div class="persona-left-side reveal">
<div class="persona-dialog-box-cg">
<div class="dialog-circle-cg"></div>
<h2>彥廷</h2>
<table class="persona-dialog-info">
<tr>
<td>年齡</td>
<td><span>25歲</span></td>
</tr>
<tr>
<td>職業</td>
<td><span>業務</span></td>
</tr>
<tr>
<td>交通</td>
<td><span>公車、機車</span></td>
</tr>
</table>
</div>
<div class="persona-dialog-box-trig-cg"></div>
<img src="./img/BUSYBUS-persona-avatar_yanting.png" />
</div>
<div class="persona-right-side reveal">
<div class="color-ugc-border right-side-info-box">
<p>
彥廷目前是一位業務，在台中通勤通常都以機車為主。為了拓展自己的業績，目前積極地想到外縣市來創造更多的業績營收。
</p>
<p>
雖然自己擁有一台機車，但因為很常要到外縣市出差，尤其像是台北、高雄等地區，變得需要仰賴當地的運具。即便有便利的火車與捷運運輸系統，但經常會前往一些一般捷運或火車不能直達的地點，還需轉乘公車。
</p>
<div class="color-ugc-font right-side-info-box-title">
關於彥廷
</div>
</div>
<div class="color-ufc-border right-side-info-box">
<p>
<i class="fa-solid fa-circle" style="color: #ed6a5e"></i
> 由於他對當地的公車路線和站點不熟悉，可能會花費很多時間在尋找適合的公車路線上，導致行程不便和耽誤工作進度。
</p>
<p>
<i class="fa-solid fa-circle" style="color: #ed6a5e"></i
> 在不熟悉的地方搭乘公車，可能因為不熟悉路線和站點而擔心錯過上下車站點。尤其是在忙碌的工作環境下，容易分心忽略公車提醒或錯過站點，這將導致他浪費時間和增加旅途中的壓力。
</p>
<div class="color-ufc-font right-side-info-box-title">痛點</div>
</div>
<div class="color-udc-border right-side-info-box">
<p>
<i class="fa-solid fa-circle" style="color: #3c8bb8"></i
> 他希望能夠立即獲得當地搭乘公車的即時到站時間，並在指定區間內知道公車預計何時會到達站牌。
</p>
<p>
<i class="fa-solid fa-circle" style="color: #3c8bb8"></i
> 他希望在到達目的地之前，APP能夠提前提醒他距離下車還有幾站，這樣他就有時間做好下車的準備（尤其是在上下班巔峰人潮時期）。
</p>
<div class="color-udc-font right-side-info-box-title">目標</div>
</div>
</div>
</div>
</section>
<section class="user-insight">
<div class="user-insight-cont">
<div class="title-uiux-dark reveal">USER INSIGHT</div>
<div class="circle-size1 color-spec-primary"></div>
<div class="circle-size2 color-spec-primary"></div>
<div class="circle-size3 color-spec-primary"></div>
<div class="circle-size4 color-spec-primary"></div>
<img
src="./img/BUSYBUS-avatar_user-insight.png"
class="user-insight-avatar"
/>
<div class="insight-content">
<div class="insight-part">
<div class="insight-dialog mgl-24 reveal">
<p>
收藏一些我常搭的公車與站牌，這樣我就<strong>可以不用透過搜尋直接看到我想要知道的公車資訊</strong>！
</p>
</div>
<div class="insight-dialog mgr-64 reveal">
<p>
想要<strong>搜尋附近的公車站牌有哪些</strong>，這樣我就能知道我該搭哪一班公車！
</p>
</div>
<div class="insight-dialog mgl-32 reveal">
<p>
如果<strong>知道公車的位置在哪</strong>會比較方便前往，可以的話有抵達站牌的路線圖更好！
</p>
</div>
</div>
<div class="insight-part">
<div class="insight-dialog mgr-64 reveal">
<p>
因為<strong>我的所在地與要去的地方沒有捷運站</strong>，只能透過公車完成交通！
</p>
</div>
<div class="insight-dialog mgl-24 reveal">
<p>
不知道我要搭看公車什麼時候會到，而且目前<strong>最接近站牌的公車距離我現在的位置趕不趕得上</strong>！
</p>
</div>
<div class="insight-dialog mgr-48 reveal">
<p>
我想要在搭公車的時候<strong>設定提醒，這樣就不會錯過上下車的時機</strong>，可以不用一直盯著螢幕看是不是快要到了！
</p>
</div>
</div>
</div>
</div>
</section>
<section class="functional-map">
<div class="title-uiux-light reveal">FUNCTIONAL MAP</div>
<div class="reveal">
<img src="./img/BUSYBUS_functional-map.png" class="" />
</div>
</section>
<section class="flow-chart">
<div class="title-uiux-light reveal">FLOW CHART</div>
<div class="reveal">
<div class="flow-chart-box">
<h2>尋找附近站牌</h2>
<img src="./img/BUSYBUS_flow-chart-1.png" />
</div>
</div>
<div class="reveal">
<div class="flow-chart-box bg-opacity-0">
<h2>移除/編輯站牌</h2>
<img src="./img/BUSYBUS_flow-chart-2.png" />
</div>
</div>
<div class="reveal">
<div class="flow-chart-box">
<h2>新增常用站牌</h2>
<img src="./img/BUSYBUS_flow-chart-3.png" />
</div>
</div>
</section>
<section class="design-system">
<div class="title-uiux-light">DESIGN SYSTEM</div>
<div>
<h2 class="design-system-title reveal">COLOR</h2>
<div class="color">
<div class="primary-color-flex reveal">
<h3>PRIMARY COLOR</h3>
<div class="primary-color">
<div class="d-flex fd-r mgb-24">
<div class="color-box-mgr-push">
<div class="color-box color-primary1"></div>
<p>#6D5BD3</p>
</div>
<div class="color-box-mgr-push">
<div class="color-box color-black"></div>
<p>#262626</p>
</div>
<div>
<div
class="color-box color-white"
style="border: 4px #c6c6c6 solid"
></div>
<p>#FBFBFB</p>
</div>
</div>
<div class="d-flex fd-r mgb-24">
<div class="color-box-mgr-push">
<div class="color-box color-primary2"></div>
<p>#8A6DE3</p>
</div>
<div class="color-box-mgr-push">
<div class="color-box color-primary0"></div>
<p>#4230A9</p>
</div>
<div>
<div class="color-box"></div>
</div>
</div>
<div class="d-flex fd-r mgb-24">
<div class="color-box-mgr-push">
<div class="color-box color-primary3"></div>
<p>#C3B8E4</p>
</div>
<div class="color-box-mgr-push">
<div class="color-box-long color-gradient"></div>
<p>#8A6DE3,#C3B8E4</p>
</div>
</div>
<div class="d-flex fd-r mgb-24">
<div class="color-box-mgr-push">
<div class="color-box color-primary4"></div>
<p>#E4DFF4</p>
</div>
</div>
</div>
</div>
<div class="neatral-system-color-flex">
<div class="neutral-color-flex reveal">
<h3>NEUTRAL COLOR</h3>
<div class="neutral-color reveal">
<div class="d-flex fd-r mgb-24">
<div class="color-box-mgr-push">
<div class="color-box color-neutral800"></div>
<p>#363636</p>
</div>
<div class="color-box-mgr-push">
<div class="color-box color-neutral700"></div>
<p>#565656</p>
</div>
<div class="color-box-mgr-push">
<div class="color-box color-neutral500"></div>
<p>#969696</p>
</div>
<div class="color-box-mgr-push">
<div class="color-box color-neutral400"></div>
<p>#C6C6C6</p>
</div>
<div class="color-box-mgr-push">
<div class="color-box color-neutral200"></div>
<p>#E6E6E6</p>
</div>
<div>
<div class="color-box color-neutral100"></div>
<p>#F6F6F6</p>
</div>
</div>
</div>
</div>
<div class="system-color-flex reveal">
<h3>SYSTEM COLOR</h3>
<div class="system-color reveal">
<div class="d-flex fd-r mgb-24">
<div class="color-box-mgr-push">
<div class="color-box color-failed"></div>
<p>#ED6A5E</p>
</div>
<div class="color-box-mgr-push">
<div class="color-box color-warning"></div>
<p>#F5C249</p>
</div>
<div class="color-box-mgr-push">
<div class="color-box color-success"></div>
<p>#3CB843</p>
</div>
<div>
<div class="color-box color-default"></div>
<p>#3C8BB8</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<h2 class="design-system-title reveal">TYPOGRAPHY</h2>
<div
class="d-flex justify-content-space-between align-items-center reveal"
>
<div>
<div class="typo-type" style="font-weight: 700">Aa</div>
<p style="font-weight: 700">bold/700</p>
</div>
<div>
<div class="typo-type" style="font-weight: 500">Aa</div>
<p style="font-weight: 500">medium/500</p>
</div>
<div>
<div class="typo-type" style="font-weight: 300">Aa</div>
<p style="font-weight: 300">light/300</p>
</div>
<div class="typo-table">
<table>
<tr>
<td class="typo-font-size">32px</td>
<td style="font-size: 32px; font-weight: 700">三重國小</td>
</tr>
<tr>
<td class="typo-font-size">24px</td>
<td style="font-size: 24px; font-weight: 700">三重國小</td>
</tr>
<tr>
<td class="typo-font-size">20px</td>
<td style="font-size: 20px; font-weight: 500">三重國小</td>
</tr>
<tr>
<td class="typo-font-size">16px</td>
<td style="font-size: 16px; font-weight: 500">三重國小</td>
</tr>
<tr>
<td class="typo-font-size">12px</td>
<td style="font-size: 14px; font-weight: 300">三重國小</td>
</tr>
<tr>
<td class="typo-font-size">8px</td>
<td style="font-size: 8px; font-weight: 300">三重國小</td>
</tr>
</table>
</div>
</div>
</div>
</section>
<section class="component-bg">
<div class="design-system-component">
<h2 class="design-system-title reveal">COMPONENT</h2>
<div class="component-wrapper">
<div class="component-part-1-2-group">
<div class="component-part-1 reveal">
<div class="component-content">
<h3>下拉式選單</h3>
<p>Dropdown menu</p>
<img src="./img/dropdownMenu.png" alt="" />
</div>
<div class="component-content">
<h3>按鈕樣式</h3>
<p>Buttons</p>
<img src="./img/buttons.png" alt="" />
</div>
</div>
<div class="component-part-2 reveal">
<div class="component-content">
<h3>公車列表系統</h3>
<p>Option list</p>
<img src="./img/optionList.png" alt="" />
</div>
</div>
</div>
<div class="component-part-3 reveal">
<div class="component-content">
<h3>輸入欄</h3>
<p>Input text bar</p>
<img src="./img/inputTextBar.png" alt="" />
</div>
<div class="component-content">
<h3>圖標</h3>
<p>Icons</p>
<img src="./img/icons.png" alt="" />
</div>
<div class="component-content">
<h3>導覽列</h3>
<p>Navigation bar</p>
<img src="./img/navigitionBar.png" alt="" />
</div>
</div>
</div>
</div>
</section>
<section class="wireframe-bg">
<div class="wireframe">
<div class="title-uiux-dark reveal">WIREFRAME</div>
<div class="wireframe-rwd-web reveal">
<div class="wireframe-flex w-flex-1">
<div class="wireframe-screen-1 wireframe-cont">
<img src="./img/wireframe1.png" alt="wireframe1" />
<img src="./img/prototype1.png" alt="prototype1" />
</div>
<div class="wireframe-screen-2 wireframe-cont">
<img src="./img/wireframe2.png" alt="wireframe2" />
<img src="./img/prototype2.png" alt="prototype2" />
</div>
<div class="wireframe-screen-3 wireframe-cont">
<img src="./img/wireframe3.png" alt="wireframe3" />
<img src="./img/prototype3.png" alt="prototype3" />
</div>
</div>
<div class="wireframe-flex w-flex-2">
<div class="wireframe-screen-4 wireframe-cont">
<img src="./img/wireframe4.png" alt="wireframe4" />
<img src="./img/prototype4.png" alt="prototype4" />
</div>
<div class="wireframe-screen-5 wireframe-cont">
<img src="./img/wireframe5.png" alt="wireframe5" />
<img src="./img/prototype5.png" alt="prototype5" />
</div>
<div class="wireframe-screen-6 wireframe-cont">
<img src="./img/wireframe6.png" alt="wireframe6" />
<img src="./img/prototype6.png" alt="prototype6" />
</div>
<div class="wireframe-screen-7 wireframe-cont">
<img src="./img/wireframe7.png" alt="wireframe7" />
<img src="./img/prototype7.png" alt="prototype7" />
</div>
</div>
<div class="wireframe-flex w-flex-3">
<div class="wireframe-screen-8 wireframe-cont">
<img src="./img/wireframe8.png" alt="wireframe8" />
<img src="./img/prototype8.png" alt="prototype8" />
</div>
<div class="wireframe-screen-9 wireframe-cont">
<img src="./img/wireframe9.png" alt="wireframe9" />
<img src="./img/prototype9.png" alt="prototype9" />
</div>
</div>
</div>
<div class="wireframe-rwd-phone reveal">
<div class="wireframe-flex">
<div class="wireframe-screen-1 wireframe-cont">
<img src="./img/wireframe1.png" alt="wireframe1" />
<img src="./img/prototype1.png" alt="prototype1" />
</div>
<div class="wireframe-screen-2 wireframe-cont">
<img src="./img/wireframe2.png" alt="wireframe2" />
<img src="./img/prototype2.png" alt="prototype2" />
</div>
<div class="wireframe-screen-3 wireframe-cont">
<img src="./img/wireframe3.png" alt="wireframe3" />
<img src="./img/prototype3.png" alt="prototype3" />
</div>
<div class="wireframe-screen-4 wireframe-cont">
<img src="./img/wireframe4.png" alt="wireframe4" />
<img src="./img/prototype4.png" alt="prototype4" />
</div>
<div class="wireframe-screen-5 wireframe-cont">
<img src="./img/wireframe5.png" alt="wireframe5" />
<img src="./img/prototype5.png" alt="prototype5" />
</div>
<div class="wireframe-screen-6 wireframe-cont">
<img src="./img/wireframe6.png" alt="wireframe6" />
<img src="./img/prototype6.png" alt="prototype6" />
</div>
<div class="wireframe-screen-7 wireframe-cont">
<img src="./img/wireframe7.png" alt="wireframe7" />
<img src="./img/prototype7.png" alt="prototype7" />
</div>
<div class="wireframe-screen-8 wireframe-cont">
<img src="./img/wireframe8.png" alt="wireframe8" />
<img src="./img/prototype8.png" alt="prototype8" />
</div>
<div class="wireframe-screen-9 wireframe-cont">
<img src="./img/wireframe9.png" alt="wireframe9" />
<img src="./img/prototype9.png" alt="prototype9" />
</div>
</div>
</div>
</div>
</section>
<section>
<img
src="./img/uiux/busybusbanner_ui-screen.jpg"
class="image-uiux-picture mgt-48"
/>
</section>
<section class="prototype">
<div class="title-uiux-light">PROTOTYPE</div>
<iframe
style="border: 1px solid rgba(0, 0, 0, 0.1)"
class="iframe"
src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FTEc0Xdm7RGBrsdJvCKCNAk%2Ftraffic-app%3Fpage-id%3D79%253A2024%26type%3Ddesign%26node-id%3D1291-21235%26viewport%3D283%252C272%252C0.06%26t%3DbilEjp2irNfKVnUA-1%26scaling%3Dscale-down%26starting-point-node-id%3D79%253A2026%26show-proto-sidebar%3D1%26mode%3Ddesign"
allowfullscreen
></iframe>
</section>
</main>
<nav class="navbar-wrapper navbar-rwd-web z-index-99">
<div class="navbar">
<div class="d-flex justify-content-space-between align-items-center">
<a href="./index.html#home"><div class="logo"></div></a>
<ul class="navbar-list font-weight-400">
<li>
<a href="./index.html#about-me" class="list-items about-me"
>關於我</a
>
</li>
<li>
<a href="./index.html#works" class="list-items works">作品集</a>
</li>
<li>
<a href="./index.html#contact-me" class="list-items contact-me"
>聯絡我</a
>
</li>
</ul>
</div>
</div>
</nav>
<nav class="navbar-wrapper navbar-rwd-phone z-index-99">
<div class="navbar">
<div class="container">
<div class="d-flex justify-content-space-between align-items-center">
<a href="./index.html#home"><div class="logo"></div></a>
<ul class="navbar-list font-weight-400">
<li>
<a href="./index.html#about-me" class="list-items works"
><i class="fa-solid fa-user" color="#a98109"></i
></a>
</li>
<li>
<a href="./index.html#works" class="list-items about-me"
><i class="fa-solid fa-image" color="#a98109"></i
></a>
</li>
<li>
<a href="./index.html#contact-me" class="list-items contact-me"
><i class="fa-solid fa-comments" color="#a98109"></i
></a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<footer>
<div class="footer">
<p>©2023 Designed By Stanley Haw</p>
</div>
</footer>
</body>
<script src="./script.js"></script>
</html>