diff --git a/app.js b/app.js new file mode 100644 index 0000000..b982ecc --- /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..e14cb08 --- /dev/null +++ b/index.html @@ -0,0 +1,48 @@ + + + + + + + + Slide Animation + + +
+
+ +

Stay Afloat

+
+
+
+
+

+ 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..a594b5c --- /dev/null +++ b/style.css @@ -0,0 +1,85 @@ +* { + 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; + allign-items: centre; + 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; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + +} +.slider{ + background: rgb(194, 184, 184); + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform: translateY(100%); +} + +.intro-text{ + color: rgb(233, 233, 233); + 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