diff --git a/app.js b/app.js new file mode 100644 index 0000000..8f3d43c --- /dev/null +++ b/app.js @@ -0,0 +1,10 @@ +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/img.jpg b/img.jpg new file mode 100644 index 0000000..033909b Binary files /dev/null and b/img.jpg differ diff --git a/index.htm b/index.htm new file mode 100644 index 0000000..abadbdb --- /dev/null +++ b/index.htm @@ -0,0 +1,47 @@ + + + + + + + Afloat + + + + + + + +
+
+ +

Stay Afloat

+
+
+
+
+

+ Creating Innovation +

+

+ For Everyday +

+

+ People. +

+ +
+
+
+ + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..6f73cb1 --- /dev/null +++ b/style.css @@ -0,0 +1,89 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} + +main{ + font-family: 'Times New Roman', Times, serif; +} +.landing{ + min-height: 100vh; + background: url('./img.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: 'Dancing Script', cursive; font-weight: lighter; + font-size: 2rem; +} + +.big_text{ + position: absolute; + top: 30%; + left: 50%; +font-size: 5rem; +font-family: 'Dancing Script', cursive; +color: rgb(61,61,61); +transform: translate(-150px, -30px); +} + +.intro{ + background: black; +position: fixed; +top: 0; +left: 0; +width: 100%; +height: 100%; +display: flex; +justify-content: center; +align-items: center; + +} +.slider{ + background: rgb(226, 183, 239); +position: fixed; +top: 0; +left: 0; +width: 100%; +height: 100%; +transform: translateY(100%); + + +} + +.intro_text{ + color: rgb(234, 174, 235); + font-family: 'Montserrat', sans-serif; + font-size: 2.4rem; +} + +.hide{ + background: black; + overflow: hidden; + +} +.hide span{ + display: inline-block; + transform: translateY(100%); +} \ No newline at end of file