diff --git a/r4tnx/hero.jpg b/r4tnx/hero.jpg new file mode 100644 index 0000000..46929d7 Binary files /dev/null and b/r4tnx/hero.jpg differ diff --git a/r4tnx/index.html b/r4tnx/index.html new file mode 100644 index 0000000..365516f --- /dev/null +++ b/r4tnx/index.html @@ -0,0 +1,46 @@ + + + + + + + Slide Animation + + + +
+
+ +

IT IS WHAT IT IS

+
+
+
+
+

+ Knowledge +

+

+ is a +

+

+ Curse. +

+
+
+
+ + + + diff --git a/r4tnx/script.js b/r4tnx/script.js new file mode 100644 index 0000000..b39a52d --- /dev/null +++ b/r4tnx/script.js @@ -0,0 +1,11 @@ +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%", duratiion: 1.5 }, "-=1") + +tl.fromTo("nav", { opacity: 0 }, { opacity: 1, duration: 1 }) + +tl.fromTo(".big-text", { opacity: 0 }, { opacity: 1, duration: 1 }) diff --git a/r4tnx/style.css b/r4tnx/style.css new file mode 100644 index 0000000..dcb1c6e --- /dev/null +++ b/r4tnx/style.css @@ -0,0 +1,85 @@ +@import url("https://fonts.googleapis.com/css2?family=Ranchers&display=swap"); + +* { + 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; + justify-content: space-between; + align-items: center; + min-height: 10vh; +} +.nav-links { + display: flex; + list-style: none; +} + +.nav-links li { + padding-left: 5rem; + font-size: 1.2rem; +} + +#logo { + font-family: "Ranchers"; + font-weight: lighter; + font-size: 2rem; +} + +.big-text { + position: absolute; + top: 30%; + left: 50%; + transform: translate(-50%, -30%); + font-size: 5rem; + font-family: "Ranchers"; + color: rgb(0, 0, 0); +} + +.intro { + background-color: black; + position: fixed; + top: 0; + left: 0; + height: 100%; + width: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +.slider { + background-color: rgb(160, 160, 160); + position: fixed; + top: 0; + left: 0; + height: 100%; + width: 100%; + transform: translateY(100%); +} + +.intro-text { + color: white; + font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif; + font-size: 3rem; +} + +.hide { + background: black; + overflow: hidden; +} +.hide span { + transform: translateY(100%); + display: inline-block; +}