diff --git a/css/cover.css b/css/cover.css index 04eb578..cc8b0a9 100644 --- a/css/cover.css +++ b/css/cover.css @@ -1,41 +1,42 @@ #hand { - background: url('/img/hand 1.png'); + background: url('/img/hand 1.png') center; background-size: cover; - - position: absolute; + position: relative; width: 100vw; height: 1300px; left: 1px; top: -2px; - + z-index: 0 +} +#main_title_container{ + position:absolute; + z-index: 2; + top: 0; + backdrop-filter: blur(3px); } - #cover { - background: url('/img/BG 1.png') no-repeat; + background: url('/img/BG 1.png') center no-repeat; background-size: cover; } - +#cover +.title-container{ + text-align:center; +} #cover h2 { - position: absolute; - top: 10vh; - left: 42vw; - /* Subtitle/desktop_1 */ - font-family: 'GT Walsheim Pro', Arial; font-style: normal; font-weight: 600; font-size: 40px; line-height: 120%; - - /* or 48px */ text-align: center; letter-spacing: -0.04em; - /* Secondary 100 */ color: #FFFDFC; + z-index: 2; + position: relative; } #cover .button { @@ -43,21 +44,17 @@ position: relative; right: 0; - top: calc(1 / 3 * 100vh); + top: 33vh; bottom: 0; width: 150px; height: 150px; padding: 1rem; color: white; - font-family: 'GT Walsheim Pro', Arial; font-style: normal; font-weight: 400; font-size: 18px; line-height: 26px; background: linear-gradient(329.49deg, rgba(255, 216, 244, 0) 34.06%, rgba(255, 207, 242, 0.2) 77.26%); - backdrop-filter: blur(2.96px); - - /* Note: backdrop-filter has minimal browser support */ + backdrop-filter: blur(3px); border-radius: 100%; - left: 3rem; } diff --git a/css/welcome.css b/css/welcome.css index bc0bf8b..9f25003 100644 --- a/css/welcome.css +++ b/css/welcome.css @@ -1,12 +1,48 @@ -/************ section 2 ************/ +#welcome{ + text-shadow: 0 0 1rem #333; + position: absolute; + background: #000; + +} +#welcome img { + position: absolute; +} +#welcome h2 { + font-weight: 600; + font-size: 100px; + line-height: 90px; + text-align: center; + letter-spacing: -0.04em; + color: #F9F3F1; + z-index: 2; + position: relative; + width: 1060px; + + margin-top:400px; + +} + +#welcome .color-emphasis, +#content .color-emphasis { + color: #1E33DA; +} + +#welcome .phone-container { + background: url('/img/section2_phone.png'); + background-size: cover; +} + +/************ phones ************/ .phones-land{ z-index:-1; position: static; + float:left; } #phone-watches-1 { + position: absolute; width: 345px; height: 690px; left: 137px; @@ -36,30 +72,4 @@ top: 1523px; filter: blur(6px); } -#welcome img { - position: absolute; -} -#welcome h2 { - font-weight: 600; - font-size: 100px; - line-height: 90px; - text-align: center; - letter-spacing: -0.04em; - color: #F9F3F1; - z-index: 2; - position: relative; - width: 1060px; - margin-top:400px; - -} - -#welcome .color-emphasis, -#content .color-emphasis { - color: #1E33DA; -} - -#welcome .phone-container { - background: url('/img/section2_phone.png'); - background-size: cover; -} diff --git a/js/main.js b/js/main.js index 30a53f1..9c21f30 100644 --- a/js/main.js +++ b/js/main.js @@ -5,15 +5,15 @@ let development_debug = true; gsap.fromTo("#main_title", { opacity: 0, top: 200 -},{ - opacity:1, +}, { + opacity: 1, top: 100, duration: 1.5, ease: "sine" }) gsap.to("#hand", { - top: 400, + top: 300, duration: 1, scrollTrigger: { trigger: '#cover', @@ -21,3 +21,21 @@ gsap.to("#hand", { markers: development_debug, } }); + +gsap.fromTo("#phone-watches-1", { + top: 1531, + left: -100, + position:"relative", + }, + { + left: 50, + top: (1531 - 200) , + scale: 0.8, + duration: 1.5, + ease: "sine", + scrollTrigger: { + trigger: '#welcome', + scrub: 1, + markers: development_debug, + } + })