diff --git a/login.html b/login.html index 1963998..91b115b 100644 --- a/login.html +++ b/login.html @@ -68,6 +68,25 @@ + + diff --git a/main.js b/main.js index c7d8d18..4be67d6 100644 --- a/main.js +++ b/main.js @@ -42,7 +42,9 @@ gsap.from('.home-l', 1.5, { opacity: 0, y: 300, delay: 0.8 }); if (window.innerWidth <= 766) { gsap.from('.home-content', 1.5, { opacity: 0, y: -300, delay: 0.8 }); gsap.from('.home-title img', 1.5, { opacity: 0, x: 100, delay: 1.3 }); + gsap.from('.product-video', 1.5, { opacity: 0, y: 300, delay: 0.8 }); } else { gsap.from('.home-content', 1.5, { opacity: 0, x: -300, delay: 0.8 }); gsap.from('.home-title img', 1.5, { opacity: 0, x: 300, delay: 1.2 }); + gsap.from('.product-video', 1.5, { opacity: 0, x: 300, delay: 0.8 }); } diff --git a/product.html b/product.html index cfca093..915701d 100644 --- a/product.html +++ b/product.html @@ -11,7 +11,7 @@ - Render Line + Render Line Download @@ -62,10 +62,57 @@
+
+
+

+ Render Line +

+

+ + Download
+ Create
+ Get inspired +
+ + +

+ +

+ Develop, Overachieve and Outshine! +

+ + + Get Free + +
+ +
+ +
+
+ +
diff --git a/source/Video/Video_Engine.mov b/source/Video/Video_Engine.mov new file mode 100644 index 0000000..9d15526 Binary files /dev/null and b/source/Video/Video_Engine.mov differ diff --git a/source/styles/style.css b/source/styles/style.css index 0450765..ac89a17 100644 --- a/source/styles/style.css +++ b/source/styles/style.css @@ -176,6 +176,10 @@ img { font-weight: var(--font-semi-bold); } +.nav-button:hover { + background: radial-gradient(#373737 0%, #00000000 100%); +} + .nav-close { position: absolute; top: 1rem; @@ -246,6 +250,25 @@ img { inset 0 4px 8px hsla(0, 0%, 44%, 0.4); } +.home-button:hover { + background: radial-gradient(#373737 0%, #00000000 100%); +} + +.dowload-button { + display: inline-block; + color: var(--title-color); + border: 1px solid var(--text-color); + padding: 1.125rem 3rem; + border-radius: 4rem; + font-weight: var(--font-semi-bold); + box-shadow: 0 8px 32px hsla(0, 0%, 32%, 0.3), + inset 0 4px 8px hsla(0, 0%, 44%, 0.4); +} + +.dowload-button:hover { + background: radial-gradient(#373737 0%, #00000000 100%); +} + .home-images { position: relative; display: flex; @@ -253,6 +276,17 @@ img { height: 250px; } +.product-video { + position: relative; + display: flex; + justify-content: center; +} + +.product-engine { + /* width: 256px; */ + top: -1rem; +} + .home-images img { position: absolute; } @@ -329,6 +363,7 @@ img { .footer-list { column-gap: .5rem; } + } /* Samsung Z Fold 5 */