diff --git a/pratikpakhale/app.js b/pratikpakhale/app.js new file mode 100644 index 0000000..7dcaa4e --- /dev/null +++ b/pratikpakhale/app.js @@ -0,0 +1,49 @@ +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, + delete: 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/pratikpakhale/hero.jpg b/pratikpakhale/hero.jpg new file mode 100644 index 0000000..a525392 Binary files /dev/null and b/pratikpakhale/hero.jpg differ diff --git a/pratikpakhale/index.html b/pratikpakhale/index.html new file mode 100644 index 0000000..dcea74a --- /dev/null +++ b/pratikpakhale/index.html @@ -0,0 +1,44 @@ + + + + + + + Document + + + + + +
+
+ +

Learning made easy!

+
+
+
+

+ Welcome to Ascend +

+

+ Freelancing :) +

+

+ Amazing Products +

+
+
+ + diff --git a/pratikpakhale/styles.css b/pratikpakhale/styles.css new file mode 100644 index 0000000..5317845 --- /dev/null +++ b/pratikpakhale/styles.css @@ -0,0 +1,93 @@ +@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&family=Poppins:wght@500&family=Ubuntu:wght@300&display=swap'); + + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +main { + font-family: 'Poppins'; +} + +.landing { + min-height: 100vh; + background: url('./hero.jpg'); + background-size: cover; + padding: 0rem 5rem; +} + +nav { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 0; +} + +.nav-links { + list-style: none; + display: flex; +} + +.nav-links li { + padding-left: 10rem; + font-size: 1.2rem; +} + +#logo { + font-family: 'Ubuntu'; + font-weight: lighter; + font-size: 2rem; +} + +.big-text { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-family: 'Lato'; + color: #333; + font-size: 3rem; +} + +.hide { + background-color: black; + overflow: hidden; +} + +.hide span { + transform: translateY(100%); + display: inline-block; +} + +.intro { + background: black; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +.intro .text { + color: rgb(191, 208, 223); + font-family: 'ubuntu'; + font-size: 3rem; + line-height: 4rem; +} + + +.slider { + background: rgb(145, 223, 225); + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform: translateY(100%); +} \ No newline at end of file