diff --git a/css/0-1-nav.css b/css/0-1-nav.css new file mode 100644 index 0000000..e12df54 --- /dev/null +++ b/css/0-1-nav.css @@ -0,0 +1,30 @@ + +main nav { + padding: 24px; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 130%; + text-align: center; + color: #FFFDFC; + width: 100%; + position: fixed; + top: 0; +} + +.burger-menu { + width: 150px; + float: left; +} + +.nav-main { + text-align: center; + top: 54px; + color: #FFFDFC; + width: 100%; + height: 54px; +} + +.fixed-nav{ + z-index: 30; +} diff --git a/css/0-general.css b/css/0-general.css index 0b2f51f..6a679e4 100644 --- a/css/0-general.css +++ b/css/0-general.css @@ -3,33 +3,6 @@ body{ background: #020225; } -main nav { - padding: 24px; - font-style: normal; - font-weight: 400; - font-size: 24px; - line-height: 130%; - text-align: center; - color: #FFFDFC; - width: 100%; -} - -.burger-menu { - width: 150px; - float: left; -} - -.nav-main { - text-align: center; - top: 54px; - color: #FFFDFC; - width: 100%; - height: 54px; -} - -.fixed-nav{ - z-index: 30; -} main section { height: 1300px; diff --git a/css/2-we-come-from.css b/css/2-we-come-from.css index aef0abd..2862861 100644 --- a/css/2-we-come-from.css +++ b/css/2-we-come-from.css @@ -45,14 +45,14 @@ position: absolute; width: 345px; height: 690px; - left: 137px; + left: -137px; top: 1531px; } #phone-watches-2 { width: 88px; height: 176px; - left: 651px; + left: -200px; top: 470px; filter: blur(2px); } diff --git a/css/4-content.css b/css/4-content.css index 3146c46..15d775f 100644 --- a/css/4-content.css +++ b/css/4-content.css @@ -1,4 +1,25 @@ +#content_all { + position: relative; + top:200vh; + padding-top: 100px; + background: url('/img/bg_content.png'); + background-size: cover; + color: #FFFDFC; +} +#content_all .columns{ + margin: 0 auto; + max-width: 80vw; +} +#content_all .text{ + padding-top: 1vh; + padding-left: 80px; +} +#content_all .color-emphasis{ + color: #1E33DA; +} + + #content-1 h2, #content-2 h2, #content-3 h2, @@ -7,6 +28,7 @@ } #content{ + height: 200px; min-height: 200px; } @@ -52,24 +74,3 @@ order: 1; flex-grow: 0; } - -/**************** - - */ -#content_all .text{ - padding-top: 1vh; - padding-left: 80px; -} -#content_all .color-emphasis{ - color: #1E33DA; -} -#content_all { - padding-top: 100px; - background: url('/img/bg_content.png'); - background-size: cover; - color: #FFFDFC; -} -#content_all .columns{ - margin: 0 auto; - max-width: 80vw; -} diff --git a/css/main.css b/css/main.css index 75b6c75..7161fbf 100644 --- a/css/main.css +++ b/css/main.css @@ -11,6 +11,7 @@ libs custom */ @import '0-general.css'; +@import '0-1-nav.css'; @import '1-cover.css'; @import '1-2-main_title.css'; @import '2-we-come-from.css'; @@ -18,13 +19,3 @@ custom @import '4-content.css'; @import '5-popover.css'; @import '6-portfolio.css'; - - - - - - - -/**********************/ - - diff --git a/js/main.js b/js/main.js index 9c21f30..cc0ca34 100644 --- a/js/main.js +++ b/js/main.js @@ -21,15 +21,20 @@ gsap.to("#hand", { markers: development_debug, } }); +gsap.to("#main_title", { + top: 150, + duration: 1, + scrollTrigger: { + trigger: '#main_title', + scrub: 1, + markers: development_debug, + } +}); -gsap.fromTo("#phone-watches-1", { - top: 1531, - left: -100, - position:"relative", - }, +gsap.to("#phone-watches-1", { - left: 50, - top: (1531 - 200) , + left: 500, + top: (531 - 400) , scale: 0.8, duration: 1.5, ease: "sine", @@ -38,4 +43,4 @@ gsap.fromTo("#phone-watches-1", { scrub: 1, markers: development_debug, } - }) +})