Velocity-IIITDWD · pratikpakhale · Oct 20, 2022
diff --git a/pratikpakhale/app.js 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
diff --git a/pratikpakhale/index.html b/pratikpakhale/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"
+      integrity="sha512-gmwBmiTVER57N3jYS3LinA9eb8aHrJua5iQD7yqYCKa5x6Jjc7VDVaEA0je0Lu0bP9j7tEjV3+1qUm6loO99Kw=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    ></script>
+    <script src="app.js" defer></script>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="landing">
+        <nav>
+          <h1 id="logo">Ascend</h1>
+          <ul class="nav-links">
+            <li>Home</li>
+            <li>About</li>
+            <li>Contact</li>
+          </ul>
+        </nav>
+        <h2 class="big-text">Learning made easy!</h2>
+      </section>
+    </main>
+    <div class="intro">
+      <h1 class="hide">
+        <span class="text"> Welcome to Ascend </span>
+      </h1>
+      <h1 class="hide">
+        <span class="text"> Freelancing :) </span>
+      </h1>
+      <h1 class="hide">
+        <span class="text"> Amazing Products </span>
+      </h1>
+    </div>
+    <div class="slider"></div>
+  </body>
+</html>
diff --git a/pratikpakhale/styles.css 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%);
+}