From 80e27eaa56cced3ecfdc210e2fbe5a92482b230c Mon Sep 17 00:00:00 2001 From: Nihaal Sharma Date: Tue, 6 Jun 2023 17:43:09 +0100 Subject: [PATCH] notLinkTst, fixed fadeout notlink anim --- index.html | 12 ++++++------ script.js | 10 +++++----- style.css | 44 +++++++++++++++++++++++++++----------------- 3 files changed, 38 insertions(+), 28 deletions(-) diff --git a/index.html b/index.html index 973c2a1..b18a6dd 100644 --- a/index.html +++ b/index.html @@ -12,14 +12,14 @@
-

neon443

-
dont click
-
Github
-

Text

-
Contact
+

neon443

+
dont click
+
Github
+

Text

+
Contact
-
Not a link!
+
Not a link!

My Projects
├─ eaglercraft152 - Minecraft 1.5.2
diff --git a/script.js b/script.js index 49c0c32..78a7964 100644 --- a/script.js +++ b/script.js @@ -1,12 +1,12 @@ function showAlert() { alert("Hey! this is under development. i told u not to click."); -} +}; -function notLink() { - var notLinkToast = document.getElementById("notLinkToast"); - notLinkToast.className = "show"; +function ntLnk() { + var ntLnkToast = document.getElementById("ntLnkToast"); + ntLnkToast.className = "show"; setTimeout( function() { - notLinkToast.className = notLinkToast.className.replace("show", ""); + ntLnkToast.className = ntLnkToast.className.replace("show", ""); }, 3000); } \ No newline at end of file diff --git a/style.css b/style.css index bb215c8..17c935e 100644 --- a/style.css +++ b/style.css @@ -60,7 +60,7 @@ .contentPush{ height: 65px; } -.notLink { +.ntLnk { position: fixed; top: 47.5px; width: 100%; @@ -90,6 +90,7 @@ display: block; text-decoration: none; font-size: 20px; + color: #222; padding: 9.2px 12px; } .barItem h1 { @@ -118,8 +119,20 @@ } html:has(.barItem a:hover) . {} /* not Link toast*/ - #notLinkToast { - visibility: hidden; +.tool { + text-decoration: none; + position: relative; +} +.tip * { + display: none; +} +.tip:hover * { + display: block; + position: fixed; + overflow: hidden; +} + #ntLnkToast { + display: none; min-width: 250px; margin-left: -125px; background-color: rgba(255, 255, 255, 0.25); @@ -136,23 +149,18 @@ backdrop-filter: blur(2.5px); } - #notLinkToast.show { - visibility: visible; - -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s forwards; - animation: fadein 0.5s, fadeout 0.5s 2.5s forwards; + #ntLnkToast.show { + display: block; + animation-name: fadein; + animation-duration: 0.5s; + animation-name: fadeout; + animation-delay: 2.6s; + animation-duration: 0.5s; } - @-webkit-keyframes fadein { - from {top: 0; opacity: 0;} - to {top: 45px; opacity: 1;} - } @keyframes fadein { from {top: 0; opacity: 0;} to {top: 45px; opacity: 1;} } - @-webkit-keyframes fadeout { - from {top: 45px; opacity: 1;} - to {top: 0; opacity: 0;} - } @keyframes fadeout { from {top: 45px; opacity: 1;} to {top: 0; opacity: 0;} @@ -171,7 +179,9 @@ .bar { background-color: rgba(0, 0, 0, 0.25); } - + .barItem * { + color: #ddd; + } .barItem h1 { border-color: #ddd; } @@ -186,7 +196,7 @@ -moz-box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.25); box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.25); } - #notLinkToast { + #ntLnkToast { background-color: rgba(0, 0, 0, 0.25); } }