diff --git a/app.js b/app.js new file mode 100644 index 0000000..63e93ca --- /dev/null +++ b/app.js @@ -0,0 +1,7 @@ +const tl= gsap.timeline({defaults: {ease:'power1.out'}}); + +tl.to(".text",{ y:"0%", duration:1, stagger:0.25}); +tl.to('.slider',{y:"-100%",duration:1.5,delay:0.5}); +tl.to('.intro',{y:"-100%",duration:1},"-=1"); +tl.fromTo('nav',{opacity:0},{opacity:1,duration:1}); +tl.fromTo('big-text',{opacity:0},{opacity:1,duration:1},'-=1'); diff --git a/hero.jpg b/hero.jpg new file mode 100644 index 0000000..8c6590d Binary files /dev/null and b/hero.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..ab1454e --- /dev/null +++ b/index.html @@ -0,0 +1,58 @@ + + + + + + + + Document + + + + + + + + + + +
+
+ +

Stay OnFloat

+
+
+
+
+

+ Creating inovation +

+ +

+ For Everyday +

+

+ people. +

+ +
+
+
+ + + + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..ff64f44 --- /dev/null +++ b/style.css @@ -0,0 +1,90 @@ +*{ + margin:0; + padding:0; + box-sizing:border-box; +} + +main{ + font-family:"Heebo",sans-serif; +} + +.landing{ + min-height: 100vh; + background:url("./hero.jpg") ; + background-size: cover; + padding: 0rem 5rem; +} + +nav{ + display: flex; + align-items: center; + justify-content: space-between; + min-height: 10vh; +} + +.nav-links{ + display: flex; + list-style: none; +} + +.nav-links li{ + padding-left: 10rem; + font: size 1.2rem; +} + +#logo{ + font-family: "lobster",cursive; + font-weight: lighter; + font-size: 2rem; +} + +.big-text{ + position: absolute; + top: 30%; + left: 50%; + transform: translate(-50%,-30%); + font-size: 5rem; + font-family: "lobster",cursive; + color:rgb(61,61,61); +} + +.intro{ + background: black; + position: fixed; + top:0; + left:0; + height: 100%; + width: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +.slider{ + background: rgb(97,105,109); + position: fixed; + top:0; + left:0; + height: 100%; + width: 100%; + transform: translateY(100%); + +} + + + +.intro-text{ + color:rgb(223,223,223); + font-family:"Heebo",sans-serif; + font-size: 3rem; +} + +.hide{ + background: black; + overflow: hidden; +} + +.hide span{ + transform: translateY(100%); + display: inline-block; +} \ No newline at end of file