Add files via upload

Aditya0950 · Apr 8, 2024 · 754002d · 754002d
1 parent 15d33fd
commit 754002d
Show file tree

Hide file tree

Showing 3 changed files with 116 additions and 13 deletions.
diff --git a/index.html b/index.html
@@ -16,6 +16,14 @@
 
 <body>
   <div id="Container">
+    <div id="Loader">
+      <h1>Created</h1>
+      <h1>By</h1>
+      <h1>
+        <a href="https://aditya0950.github.io/Aditya-Kumar/" target="_blank">AdityaKumar</a>
+      </h1>
+    </div>
+
     <div id="Cursor">
       <p>-</p>
     </div>
@@ -367,11 +375,11 @@ <h2>design projects</h2>
         <div id="P-Box">
           <p class="Top-p">Our portfolio encompasses a wide range</p>
           <p class="Top-p">of digital designs essential for the growth</p>
-  
+
           <p class="Medium-p">of modern businesses. From B2B SaaS and B2C mobile</p>
           <p class="Medium-p">apps to marketing design for promotions, we display our</p>
           <p class="Medium-p">work created for early-stage startups and enterprises at</p>
-  
+
           <p class="End">various stages of their growth.</p>
         </div>
       </div>
@@ -386,14 +394,15 @@ <h2>NODO</h2>
           </div>
 
           <div id="Left-Middle">
-            <p>A promo website for unique cinematography equipment. Inertia Wheels MAX – the first-hand wheels developed to streamline the operating experience.</p>
+            <p>A promo website for unique cinematography equipment. Inertia Wheels MAX – the first-hand wheels developed
+              to streamline the operating experience.</p>
           </div>
         </div>
 
         <div id="Container-Right">
           <div id="Right-Hover">
             <i class="ri-arrow-right-up-line"></i>
-            
+
             <div id="Hover-Bottom">
               <p>View</p>
               <p>Case study</p>

diff --git a/script.js b/script.js
@@ -1,3 +1,22 @@
+let slider = document.querySelector("#Loader");
+
+setTimeout(function () {
+  HoverBox.style.bottom = "2.5%";
+  setTimeout(function () {
+    HoverBox.style.right = "10.5%";
+  }, 1000)
+}, 7500)
+
+setTimeout(function () {
+  slider.style.top = "-100%";
+}, 6500)
+
+let page1Container = document.querySelector("#Page1 #Page1Container");
+
+setTimeout(function () {
+  page1Container.style.top = "0%";
+}, 8000)
+
 let container = document.querySelector("#Container");
 let cursor = document.querySelector("#Cursor");
 
@@ -29,6 +48,14 @@ navtalk.addEventListener("mouseleave", function () {
   navtalk.style.marginLeft = "0vw";
 })
 
+let page2 = document.querySelector("#Page2");
+
+page2.addEventListener("mouseenter", function () {
+  rightPart.forEach(function (Page2part) {
+    Page2part.style.left = "0%";
+  })
+})
+
 let rightPart = document.querySelectorAll("#Right .Part");
 
 rightPart.forEach(function (part) {
@@ -56,10 +83,16 @@ let navbottomA = document.querySelectorAll("#NavBottomContainer a");
 
 Page1.addEventListener("mouseenter", function () {
   cursor.style.display = "flex";
+  nav.style.height = "7.25vw";
 })
 
 Page1.addEventListener("mouseleave", function () {
   cursor.style.display = "none";
+  nav.style.height = "3.25vw";
+
+  navbottomA.forEach(function (a) {
+    a.style.display = "none";
+  })
 })
 
 nav.addEventListener("mouseover", function () {

diff --git a/style.css b/style.css
@@ -27,22 +27,76 @@ body {
     src: url(Assets/Gilroy-Medium.ttf);
 }
 
+@font-face {
+    font-family: Style;
+    src: url(Assets/Bythemis\ Quertas\ Personal\ Use.ttf);
+}
+
 /* Sidebar */
 
 ::-webkit-scrollbar {
-    width: 0.25vw;
+    width: 0vw;
 }
 
-::-webkit-scrollbar-track {
-    background-color: gainsboro;
+body {
+    transition: all ease 0.65s;
 }
 
-::-webkit-scrollbar-thumb {
-    border-radius: 50vw;
-    background-color: #0DA34E;
+/* Main Conding Starts */
+
+/* This is slider */
+
+#Container #Loader {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0%;
+    z-index: 99;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #111111;
+    backdrop-filter: blur(25px);
+    transition: all ease 0.65s;
+    border-bottom: 0.01vw solid gainsboro;
 }
 
-/* Main Conding Starts */
+#Loader h1 {
+    opacity: 0;
+    position: absolute;
+    font-size: 7.5vw;
+    animation: load 1s linear;
+}
+
+#Loader :nth-child(1) {
+    animation-delay: 2s;
+}
+
+#Loader :nth-child(2) {
+    animation-delay: 3.5s;
+}
+
+#Loader :nth-child(3) {
+    animation-delay: 5s;
+}
+
+#Loader :nth-child(3) a {
+    color: red;
+    display: block;
+    font-weight: 400;
+    font-family: "Style";
+    text-decoration: none;
+}
+
+@keyframes load {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
 
 /* This is cursor */
 
@@ -78,12 +132,13 @@ body {
     align-items: center;
     justify-content: space-between;
     position: fixed;
-    bottom: 2.5%;
-    right: 10.5%;
+    bottom: -100%;
+    right: -100%;
     z-index: 9999;
     padding: 2vw 0.5vw 2vw 1.75vw;
     border-radius: 5vw;
     background-color: #111111;
+    transition: all ease 0.65s;
 }
 
 #HoverBox #Right {
@@ -195,6 +250,7 @@ nav:hover #NavBottom {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
+    background-color: #111111;
 }
 
 #NavBottomContainer a {
@@ -268,11 +324,14 @@ nav:hover #NavBottom {
 #Page1 #Page1Container {
     width: 100%;
     height: 90%;
+    position: relative;
+    top: -100%;
     display: flex;
     padding-top: 7.5vw;
     align-items: center;
     justify-content: center;
     flex-direction: column;
+    transition: all ease 0.65s;
 }
 
 #Page1Container h1 {
@@ -444,13 +503,15 @@ h3 {
 #Page2Container #Right {
     width: 50%;
     height: 100%;
+    overflow: hidden;
 }
 
 #Right .Part {
     width: 100%;
     height: 25%;
     display: flex;
     position: relative;
+    left: -100%;
     cursor: pointer;
     padding: 1.25vw 0vw 3.25vw 0vw;
     align-items: flex-start;