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

Stay Afloat

+
+
+
+
+

+ Creating inovation +

+

+ For Everyday +

+

+ people. +

+
+
+
+ + + + diff --git a/read_me.txt b/read_me.txt new file mode 100644 index 0000000..4dd3246 --- /dev/null +++ b/read_me.txt @@ -0,0 +1,4 @@ +Imroz Khan +21BDS022 +DSAI +Batch \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..7810835 --- /dev/null +++ b/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; +}