diff --git a/SPA_202308/.vscode/settings.json b/SPA_202308/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/SPA_202308/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/SPA_202308/images/01.jpg b/SPA_202308/images/01.jpg new file mode 100644 index 0000000..466195d Binary files /dev/null and b/SPA_202308/images/01.jpg differ diff --git a/SPA_202308/index.html b/SPA_202308/index.html index 101d6f5..9a956fe 100644 --- a/SPA_202308/index.html +++ b/SPA_202308/index.html @@ -54,19 +54,36 @@ /* 相反方向則用負數 */ } - .s09_text{ - z-index: 10; + .btn-modal{ + z-index: 5; + } - background-color: rgba(0, 0, 0, 0.6); - margin: 15px; - padding: 15px; - border-radius: 15px; - color: white; + .s09_text { + z-index: 10; + + background-color: rgba(0, 0, 0, 0.6); + margin: 15px; + padding: 15px; + border-radius: 15px; + color: white; + } + + .s12_text { + z-index: 10; + + background-color: rgba(0, 0, 0, 0.6); + margin: 15px; + padding: 15px; + border-radius: 15px; + color: white; } /* 螢幕小於768(最大上限到768) */ @media screen and (max-width: 768px) { - .s05_text, .s07_text { + + .s05_text, + .s07_text, + .s11_text { z-index: 10; background-color: rgba(0, 0, 0, 0.7); @@ -80,10 +97,60 @@ right: 0; } - .s07_img{ + .s07_img { left: 0; } } + + .timeline-section { + position: relative; + } + + .timeline-section::before { + position: absolute; + content: ""; + top: 0; + bottom: 0; + /* 線的粗度 */ + width: 3px; + /* background-color: aqua; */ + /* 漸層色要使用在圖片上! */ + background-image: linear-gradient(180deg, rgba(30, 240, 230, 0.1), rgba(30, 240, 230, 0.9)); + left: 50%; + transform: translateX(-50%); + } + + .timeline-section-pointer { + position: relative; + } + + .timeline-section-pointer::before { + position: absolute; + content: ""; + top: 50; + width: 20px; + height: 20px; + border-radius: 50%; + left: 50%; + /* 中空的圓=邊框圈 */ + background-color: #ffffff; + border: 4px solid rgba(30, 240, 230, 0.9); + transform: translateX(-50%); + } + + .timeline-section-pointer:hover::before { + width: 30px; + height: 30px; + border: 10px solid rgba(30, 240, 230, 0.9); + } + + @media screen and (max-width: 768px) { + + .timeline-section::before, + .timeline-section-pointer::before { + display: none; + } + } @@ -135,8 +202,8 @@ @@ -235,7 +302,7 @@
-
01.特殊不想第二章，落實雜誌管理員工，人物
@@ -272,13 +339,11 @@
05.嘿嘿轉變教學臉上家園訊息跟着，還是十大保密二手共
- - @@ -347,7 +412,7 @@

動態互動展區

- +
特展展區介紹
@@ -434,16 +499,21 @@

展覽價值

-
+
+
- +
- +
@@ -462,7 +532,7 @@

展覽價值

- +
@@ -489,6 +559,121 @@

展覽價值

+ +
+
+
+
+
+
+
+
+
+
+

展場合作與租借

+

不同機構、組織或個人之間合作舉辦、籌劃或參與展覽活動的行為。這種合作可以在不同層面和範疇進行，旨在共同實現特定的目標，並加強展覽的品質和影響力。

+
+
+
+
+

展場租借

+

103

+
+
+

合作次數

+

527

+
+
+

展友人數

+

2077

+
+
+

累積展次

+

945

+
+
+
+
+
+
+
+ + + +
+
+
+
+
+
+

看展好朋友

+

策略人才尚未，正好多個動態其他解決方案沒人大多我又，當年持續不好意思，冠軍原文比賽逐漸符合負責，傳。

+
+
+
+
+
+
+

01.選取有興趣的展場

+

紡織收藏刷新收費不到校園普通，你有人才說明影片得分女人電子郵件今年，參加圖像化長期，一句話碩士，女。

+
+
+
+
+
+
+ +
+
+
+
+

02.線上加入專屬群組

+

紡織收藏刷新收費不到校園普通，你有人才說明影片得分女人電子郵件今年，參加圖像化長期，一句話碩士，女。

+
+
+
+
+
+
+ +
+
+
+
+

03.討論合適時間 +

+

紡織收藏刷新收費不到校園普通，你有人才說明影片得分女人電子郵件今年，參加圖像化長期，一句話碩士，女。

+
+
+
+
+
+
+ +
+
+
+
+

04.一起與展友逛展吧!

+

紡織收藏刷新收費不到校園普通，你有人才說明影片得分女人電子郵件今年，參加圖像化長期，一句話碩士，女。

+
+
+
+
+
+
+
+
+
+
@@ -537,10 +722,10 @@

展場工讀生

@@ -556,6 +740,34 @@

展場工讀生

+ + \ No newline at end of file