From 754002d070e6026717572bb0ddebb50f5c22ec65 Mon Sep 17 00:00:00 2001 From: Aditya Kumar <121501207+Aditya0950@users.noreply.github.com> Date: Mon, 8 Apr 2024 20:46:58 +0530 Subject: [PATCH] Add files via upload --- index.html | 17 +++++++++--- script.js | 33 +++++++++++++++++++++++ style.css | 79 +++++++++++++++++++++++++++++++++++++++++++++++------- 3 files changed, 116 insertions(+), 13 deletions(-) diff --git a/index.html b/index.html index 4621d63..6cc85a6 100644 --- a/index.html +++ b/index.html @@ -16,6 +16,14 @@
+
+

Created

+

By

+

+ AdityaKumar +

+
+

-

@@ -367,11 +375,11 @@

design projects

Our portfolio encompasses a wide range

of digital designs essential for the growth

- +

of modern businesses. From B2B SaaS and B2C mobile

apps to marketing design for promotions, we display our

work created for early-stage startups and enterprises at

- +

various stages of their growth.

@@ -386,14 +394,15 @@

NODO

-

A promo website for unique cinematography equipment. Inertia Wheels MAX – the first-hand wheels developed to streamline the operating experience.

+

A promo website for unique cinematography equipment. Inertia Wheels MAX – the first-hand wheels developed + to streamline the operating experience.

- +

View

Case study

diff --git a/script.js b/script.js index bdb2970..17fc2a2 100644 --- 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 index b1f1059..9ba0561 100644 --- 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,6 +503,7 @@ h3 { #Page2Container #Right { width: 50%; height: 100%; + overflow: hidden; } #Right .Part { @@ -451,6 +511,7 @@ h3 { height: 25%; display: flex; position: relative; + left: -100%; cursor: pointer; padding: 1.25vw 0vw 3.25vw 0vw; align-items: flex-start;