diff --git a/Screenshot 2022-10-20 200124.png b/Screenshot 2022-10-20 200124.png new file mode 100644 index 0000000..6c9fdbd Binary files /dev/null and b/Screenshot 2022-10-20 200124.png differ diff --git a/app.js b/app.js new file mode 100644 index 0000000..213ab20 --- /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/index.html b/index.html new file mode 100644 index 0000000..c085fc5 --- /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..ec81877 --- /dev/null +++ b/style.css @@ -0,0 +1,87 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} + +main{ + font-family: "Heebo" ,sans-serif; +} + +.landing{ + min-height: 100vh; + background: url("./Screenshot\ 2022-10-20\ 200124.png"); + 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; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +.intro-text{ + color: rgb(233, 233, 233); + font-family: "Heebo",sans-serif; + font-size: 3rem; +} + +.slider{ + background: rgb(97, 105, 109); + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform: translateY(100%); +} + +.hide{ + background: black; + overflow: hidden; +} + +.hide span{ + transform: translateY(100%); + display: inline-block; +}