From a3a627b6ab65806a33e3fc71a6318989db0da8da Mon Sep 17 00:00:00 2001
From: Dibyendu Ghosh <113688814+Dib2147@users.noreply.github.com>
Date: Fri, 27 Oct 2023 10:43:15 +0530
Subject: [PATCH] Create landingpage.html

---
 landingpage.html | 307 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 307 insertions(+)
 create mode 100644 landingpage.html
diff --git a/landingpage.html b/landingpage.html
new file mode 100644
index 0000000..f8bab19
--- /dev/null
+++ b/landingpage.html
@@ -0,0 +1,307 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"
+      integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    ></script>
+    <script>
+      $(document).ready(function () {
+        $(".loadingbar").delay(4500).animate({ left: "0" }, 5500),
+          $(".loadingBox").delay(500).animate({ opacity: "1" }, 1e3),
+          $(".splashupperscreen").delay(9e3).animate({ height: "0" }, 2e3),
+          $(".splashlowerscreen").delay(9e3).animate({ height: "0", opacity: "0" }, 3e3, function () {$(".splashScreen").hide();}),
+          $(".splashScreen")
+            .delay(8300)
+            .queue(function () {
+              $(".splashScreen").addClass("visibleSplash"),
+                $(".loadingContainer").delay(8e3).addClass("splashdone"),
+                $("body").css({ overflow: "visible" }),
+                $("header.main-header").addClass("zindex-visible");
+            }),
+          jQuery(window).on("load", function () {
+            jQuery(this).scrollTop(1);
+          });
+      });
+    </script>
+    <title>DIBYENDU</title>
+    <meta
+      name="viewport"
+      content="width=device-width,initial-scale=1,maximum-scale=5,minimum-scale=1"
+    />
+   
+   
+  </head>
+  <body>
+    <div id="root"></div>
+    <div id="portal-root"></div>
+    <style>
+      .visibleSplash {
+        overflow: visible !important;
+        z-index: 999 !important;
+      }
+      .splashupperscreen {
+        width: 120%;
+        height: 50vh;
+        position: absolute;
+        top: 0;
+        left: -10%;
+        background: #000;
+        overflow: hidden;
+        z-index: 999;
+      }
+      .splashlowerscreen {
+        width: 120%;
+        height: 50vh;
+        position: absolute;
+        bottom: 0;
+        left: -10%;
+        background: #000;
+        overflow: hidden;
+        z-index: 9;
+      }
+      .loadingContainer {
+        width: 600px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        text-align: center;
+        overflow: hidden;
+        z-index: 9999;
+      }
+      .loadingBox {
+        width: 100%;
+        height: 100%;
+        opacity: 0;
+      }
+      .splashLogo {
+        width: 50%;
+        margin: 0 0 20px;
+      }
+      .loadingBarContainer {
+        width: 100%;
+        background: #30303c;
+        height: 1px;
+        display: block;
+        margin: 40px 0 0;
+        overflow: hidden;
+      }
+      .loadingbar {
+        width: 100%;
+        height: 10px;
+        background-image: linear-gradient(90deg, #37abff, #ff78e5 50%, #00d85a);
+        background-image: -webkit-gradient(
+          linear,
+          left top,
+          right top,
+          from(#37abff),
+          color-stop(50%, #ff78e5),
+          to(#00d85a)
+        );
+        position: absolute;
+        left: -100%;
+      }
+      body {
+        overflow: hidden;
+      }
+      .loading {
+        position: fixed;
+        left: 50%;
+        top: calc(20% - 0px);
+        -webkit-transform: translateX(-50%) translateY(-50%);
+        -ms-transform: translateX(-50%) translateY(-50%);
+        transform: translateX(-50%) translateY(-50%);
+        font-weight: 300;
+        font-size: 15px;
+        letter-spacing: 4px;
+        z-index: 9999999999;
+        width: 100%;
+      }
+      .loading span {
+        -webkit-animation: loading 1.4s infinite alternate;
+        animation: loading 1.4s infinite alternate;
+        color: #fff;
+        font-family: Urbanist;
+        font-weight: 400;
+        font-size: 12px;
+        display: inline-block;
+        padding: 0 5px;
+      }
+      .loading span:nth-child(1) {
+        -webkit-animation-delay: 0s;
+        animation-delay: 0s;
+      }
+      .loading span:nth-child(2) {
+        -webkit-animation-delay: 0.1s;
+        animation-delay: 0.1s;
+      }
+      .loading span:nth-child(3) {
+        -webkit-animation-delay: 0.2s;
+        animation-delay: 0.2s;
+      }
+      .loading span:nth-child(4) {
+        -webkit-animation-delay: 0.3s;
+        animation-delay: 0.3s;
+        /* visibility: hidden;
+        width: 0;
+        height: 0; */
+      }
+      .loading span:nth-child(5) {
+        -webkit-animation-delay: 0.4s;
+        animation-delay: 0.4s;
+      }
+      .loading span:nth-child(6) {
+        -webkit-animation-delay: 0.5s;
+        animation-delay: 0.5s;
+      }
+      .loading span:nth-child(7) {
+        -webkit-animation-delay: 0.6s;
+        animation-delay: 0.6s;
+      }
+      .loading span:nth-child(8) {
+        -webkit-animation-delay: 0.7s;
+        animation-delay: 0.7s;
+      }
+      .loading span:nth-child(9) {
+        -webkit-animation-delay: 0.8s;
+        animation-delay: 0.8s;
+      }
+      .loading span:nth-child(10) {
+        -webkit-animation-delay: 0.9s;
+        animation-delay: 0.9s;
+      }
+      .loading span:nth-child(11) {
+        -webkit-animation-delay: 1s;
+        animation-delay: 1s;
+      }
+      .loading span:nth-child(12) {
+        -webkit-animation-delay: 1.1s;
+        animation-delay: 1.1s;
+      }
+      .loading span:nth-child(13) {
+        -webkit-animation-delay: 1.2s;
+        animation-delay: 1.2s;
+      }
+      .loading span:nth-child(14) {
+        -webkit-animation-delay: 1.3s;
+        animation-delay: 1.3s;
+      }
+      .loading span:nth-child(15) {
+        -webkit-animation-delay: 1.4s;
+        animation-delay: 1.4s;
+      }
+      .loading span:nth-child(16) {
+        -webkit-animation-delay: 1.5s;
+        animation-delay: 1.5s;
+      }
+      .loading span:nth-child(17) {
+        -webkit-animation-delay: 1.6s;
+        animation-delay: 1.6s;
+      }
+      .loading span:nth-child(18) {
+        -webkit-animation-delay: 1.7s;
+        animation-delay: 1.7s;
+      }
+      .loading span:nth-child(19) {
+        -webkit-animation-delay: 1.8s;
+        animation-delay: 1.8s;
+      }
+      .loading span:nth-child(20) {
+        -webkit-animation-delay: 1.9s;
+        animation-delay: 1.9s;
+      }
+      .loading span:nth-child(21) {
+        -webkit-animation-delay: 2s;
+        animation-delay: 2s;
+      }
+      .loading span:nth-child(22) {
+        -webkit-animation-delay: 2.1s;
+        animation-delay: 2.2s;
+      }
+      .loading span:nth-child(23) {
+        -webkit-animation-delay: 2.3s;
+        animation-delay: 2.3s;
+      }
+      .loading span:nth-child(24) {
+        -webkit-animation-delay: 2.4s;
+        animation-delay: 2.4s;
+      }
+      .loading span:nth-child(25) {
+        -webkit-animation-delay: 2.5s;
+        animation-delay: 2.5s;
+      }
+      .loading span:nth-child(26) {
+        -webkit-animation-delay: 2.6s;
+        animation-delay: 2.6s;
+      }
+      @-webkit-keyframes loading {
+        0% {
+          opacity: 1;
+        }
+        100% {
+          opacity: 0;
+        }
+      }
+      @keyframes loading {
+        0% {
+          opacity: 1;
+        }
+        100% {
+          opacity: 0;
+        }
+      }
+      .loadingContainer.splashdone {
+        width: 100%;
+        animation: line 1s linear forwards;
+      }
+      @keyframes line {
+        from {
+          left: 50%;
+          width: 50%;
+          opacity: 1;
+        }
+        to {
+          left: 50%;
+          width: 100%;
+          opacity: 0;
+        }
+      }
+      @media screen and (max-width: 767px) {
+        .loading {
+          width: 100% !important;
+          max-width: fit-content !important;
+          display: flex;
+        }
+        .loadingContainer {
+          width: 300px !important;
+        }
+      }
+    </style>
+    <div class="splashScreen">
+      <div class="splashupperscreen"></div>
+      <div class="loadingContainer">
+        <div class="loadingBox">
+          <div class="loading">
+            <span>D</span> <span>I</span> <span>B</span> <span>Y</span>
+             <span>E</span> <span>N</span> <span>D</span><span>U</span> 
+             <span></span> <span>L</span> <span>T</span> <span>D</span>
+          </div>
+          <div class="loadingBarContainer"><div class="loadingbar"></div></div>
+        </div>
+      </div>
+      <div class="splashlowerscreen"></div>
+    </div>
+   
+    
+  </body>
+</html>
+
+
+
+
+
+
