diff --git a/Kshitiz/app.js b/Kshitiz/app.js new file mode 100644 index 0000000..efee407 --- /dev/null +++ b/Kshitiz/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"); \ No newline at end of file diff --git a/Kshitiz/hero.jpg b/Kshitiz/hero.jpg new file mode 100644 index 0000000..e47fff7 Binary files /dev/null and b/Kshitiz/hero.jpg differ diff --git a/Kshitiz/index.html b/Kshitiz/index.html new file mode 100644 index 0000000..1d9a391 --- /dev/null +++ b/Kshitiz/index.html @@ -0,0 +1,43 @@ + + + + + + + + + + Slide Animation + + +
+
+ +

Stay Afloat

+
+
+
+
+

+ Creating inovation +

+

+ For Everyday +

+

+ people. +

+
+
+
+ + + + \ No newline at end of file diff --git a/Kshitiz/styles.css b/Kshitiz/styles.css new file mode 100644 index 0000000..c6dee1d --- /dev/null +++ b/Kshitiz/styles.css @@ -0,0 +1,83 @@ +* { + 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; + color: aliceblue; + } + #logo { + font-family: "Lobster", cursive; + font-weight: lighter; + font-size: 2rem; + color: aliceblue; + } + + .big-text { + position: absolute; + top: 30%; + left: 50%; + transform: translate(-50%, -30%); + font-size: 5rem; + font-family: "Lobster", cursive; + color: rgb(231, 223, 223); + } + + .intro { + background: black; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + } + .slider { + background: rgb(97, 105, 109); + 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