diff --git a/my-app/src/page/Info.js b/my-app/src/page/Info.js index a1ef596..aaeb747 100644 --- a/my-app/src/page/Info.js +++ b/my-app/src/page/Info.js @@ -7,6 +7,9 @@ export const Info = () => { return (
+
+

早鳥優惠進行中

+

日期

@@ -48,7 +51,10 @@ export const Info = () => {

新臺幣 9500 元整

- 早鳥優惠:新臺幣 8900 元整(113 年 4 月 20 日 至 113 年 4 月 30 日) + 進行中 + + 早鳥優惠:新臺幣 8900 元整(113 年 4 月 20 日 至 113 年 4 月 30 日) +

diff --git a/my-app/src/style/_info.scss b/my-app/src/style/_info.scss index eb908a0..1ebe63c 100644 --- a/my-app/src/style/_info.scss +++ b/my-app/src/style/_info.scss @@ -307,6 +307,85 @@ } } } -.early_bird { - color: rgb(247, 180, 36); + +.early_bird_text { + position: relative; + color: $yellow-1; + font-weight: bold; + line-height: 1.8; + top: 1.1px; +} + +.early_bird-notice p { + position: relative; + display: flex; + margin: 5vh auto; + padding: 5px 5px 6px 27px; + text-align: center; + align-items: center; + justify-content: center; + width: 199px; + color: #fff; + background-color: green; + border-radius: 100px; + letter-spacing: 1.5px; +} + +.early_bird-notice p::before { + content: ""; + position: absolute; + width: 11px; + height: 11px; + margin-left: -82%; + margin-top: 0em; + background-color: #fff; + border-radius: 50%; + animation: pulse 2s infinite alternate; +} + +@keyframes pulse { + 0% { + transform: scale(1); + } + 100% { + transform: scale(1.5); + } +} + +.early_bird-label { + display: inline-block; + position: relative; + margin-right: 8px; + font-size: 0.7em; + padding: 0.15em 5px 0.25em 24px; + text-align: center; + align-items: center; + justify-content: center; + width: 80px; + color: #fff; + background-color: green; + border-radius: 100px; + letter-spacing: 1.5px; +} + +.early_bird-label::before { + content: ""; + position: absolute; + z-index: 3; + width: 0.7em; + height: 0.7em; + margin-left: -1.2em; + margin-top: 0.45em; + background-color: #fff; + border-radius: 50%; + animation: pulse-small 2s infinite alternate; +} + +@keyframes pulse-small { + 0% { + transform: scale(0.9); + } + 100% { + transform: scale(1.3); + } }