diff --git a/assets/css/index.css b/assets/css/index.css index fd06e06..810aae9 100644 --- a/assets/css/index.css +++ b/assets/css/index.css @@ -27,6 +27,7 @@ body { overflow-y: auto; touch-action: pan-y; -webkit-overflow-scrolling: touch; + scrollbar-width: thin; } .background { @@ -38,6 +39,9 @@ body { } .navbar { + position: fixed; + width: 100%; + z-index: 64; display: flex; flex-direction: row; background-color: #fff; @@ -140,6 +144,7 @@ body { height: max-content; background: #f5f7fa; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02); + margin-top: 80px; } .landing-content { @@ -277,7 +282,22 @@ body { } .product-container { - background: #ecf4fa; + background: #fff; + position: relative; +} + +.product-container::before { + content: ""; + position: absolute; + bottom: 36px; + right: 36px; + background-image: url("/assets/images/cloud-banner.png"); + background-repeat: no-repeat; + background-size: auto 100%; + width: 160px; + height: 160px; + opacity: 0.4; + animation: flex 3s infinite alternate; } .product-container .lightxi-icon-background { @@ -351,6 +371,9 @@ body { .lightxi-subtitle { position: relative; + display: flex; + flex-direction: row; + align-items: center; font-size: 18px; font-weight: 600; user-select: none; @@ -361,6 +384,15 @@ body { text-align: center; } +.lightxi-subtitle svg { + width: 16px !important; + height: 16px !important; + margin-right: 6px; + color: #3b97ff; + transition: .25s; + transform: translateY(1px); +} + .lightxi-subtitle::after { content: ""; display: inline-block; @@ -379,6 +411,10 @@ body { width: 75px; } +.lightxi-subtitle:hover svg { + color: #005fff; +} + .product-list { display: flex; flex-direction: row; @@ -502,7 +538,6 @@ body { padding: 28px 32px; border-radius: 6px; transition: .2s ease-out; - user-select: none; text-decoration: none; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); @@ -511,13 +546,21 @@ body { } .feature-item-title { + display: flex; + flex-direction: row; + align-items: center; font-size: 24px; font-weight: 700; - user-select: none; color: #333; transition: .25s; } +.feature-item-title svg { + margin-right: 6px; + color: #0052d9; + transform: translateY(1px); +} + .feature-item:hover { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); transform: translateY(-5px); @@ -528,7 +571,6 @@ body { } .feature-item-description { - user-select: none; color: #4b5b76; } @@ -571,8 +613,14 @@ body { } .feature-container { - background: #fff; + background-color: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); + + background-image: url("/assets/images/partical-background.png"); + background-repeat: no-repeat; + background-size: auto 100%; + background-position: top; + filter: saturate(200%); } .creative-container { @@ -582,6 +630,21 @@ body { box-shadow: 2px 2px 10px rgba(255, 255, 255, 0.2); } +.creative-container::before { + --line: rgb(0 0 0 / 10%); + content: ""; + height: 100%; + width: 100vw; + position: absolute; + background: linear-gradient(90deg, var(--line) 1px, transparent 1px 10vmin) 0 -5vmin / 10vmin 10vmin, linear-gradient(var(--line) 1px, transparent 1px 10vmin) 0 -5vmin / 10vmin 10vmin; + -webkit-mask: linear-gradient(-15deg, transparent 50%, white); + mask: linear-gradient(-15deg, transparent 50%, white); + top: 0; + z-index: 0; + transform: rotate(180deg); + pointer-events: none; +} + .software { border: 1px solid #252529; background: rgba(24, 23, 23, 0.95); @@ -726,12 +789,12 @@ body { } .list-item { - color: #9193a8 !important; + color: #aeb0c0 !important; transition: .25s; } .list-item:hover { - color: #c3c5d0 !important; + color: #d3d3da !important; } .footer-list a { @@ -991,6 +1054,12 @@ body { .credit { align-items: center; } + + .product-item { + width: 90%; + height: max-content; + padding-bottom: 36px; + } } @media (max-width: 480px) { diff --git a/assets/images/cloud-banner.png b/assets/images/cloud-banner.png new file mode 100644 index 0000000..07fd900 Binary files /dev/null and b/assets/images/cloud-banner.png differ diff --git a/assets/images/deeptrain-background.png b/assets/images/deeptrain-background.png new file mode 100644 index 0000000..b4faadc Binary files /dev/null and b/assets/images/deeptrain-background.png differ diff --git a/assets/images/partical-background.png b/assets/images/partical-background.png new file mode 100644 index 0000000..3ac3a6f Binary files /dev/null and b/assets/images/partical-background.png differ diff --git a/index.html b/index.html index 8db1310..3665527 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,7 @@ - +