diff --git a/Nikhil Karthik/app.js b/Nikhil Karthik/app.js new file mode 100644 index 0000000..8266514 --- /dev/null +++ b/Nikhil Karthik/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/Nikhil Karthik/hero.jpg b/Nikhil Karthik/hero.jpg new file mode 100644 index 0000000..8c6590d Binary files /dev/null and b/Nikhil Karthik/hero.jpg differ diff --git a/Nikhil Karthik/index.html b/Nikhil Karthik/index.html new file mode 100644 index 0000000..e14cb08 --- /dev/null +++ b/Nikhil Karthik/index.html @@ -0,0 +1,48 @@ + + + + + + + + Slide Animation + + +
+
+ +

Stay Afloat

+
+
+
+
+

+ Creating inovation +

+

+ For Everyday +

+

+ people. +

+
+
+
+ + + + \ No newline at end of file diff --git a/Nikhil Karthik/style.css b/Nikhil Karthik/style.css new file mode 100644 index 0000000..8e8ab4d --- /dev/null +++ b/Nikhil Karthik/style.css @@ -0,0 +1,81 @@ +* { + 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; + 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