neon443/neon443.github.io
1
0
Fork 0
mirror of https://github.com/neon443/neon443.github.io.git synced 2026-03-11 15:16:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

notLinkTst, fixed fadeout notlink anim

Browse Source
This commit is contained in:
Nihaal Sharma
2023-06-06 17:43:09 +01:00
parent 97c743c065
commit 80e27eaa56
3 changed files with 38 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
index.html
View File

@@ -12,14 +12,14 @@
<script type="text/javascript" src="./script.js"></script> <script type="text/javascript" src="./script.js"></script>
<body> <body>
<div class="bar"> <div class="bar">
<div class="barItem" onclick="notLink()"> <h1>neon443</h1> </div> <div class="barItem" onclick="ntLnk()"> <h1>neon443</h1> </div>
<div class="barItem"> <a onclick="showAlert();">dont click</a> </div> <div class="barItem"> <a onclick="showAlert();">dont click</a> </div>
<div class="barItem"> <a href="https://github.com/neon443">Github</a> </div> <div class="barItem"> <a href="https://github.com/neon443">Github</a> </div>
<div class="barItem" onclick="notLink()"> <p>Text</p> </div> <div class="barItem" onclick="ntLnk()"> <p>Text</p> </div>
<div class="barItem"> <a href="mailto:vape.master.69@hotmail.com">Contact</a> </div> <div class="barItem"> <a href="mailto:vape.master.69@hotmail.com">Contact</a> </div>
</div> </div>
<div class="contentPush"></div> <div class="contentPush"></div>
<div id="notLinkToast">Not a link!</div> <div id="ntLnkToast">Not a link!</div>
<p> <p>
<b>My Projects</b><br> <b>My Projects</b><br>
<b>├─</b> <a href="https://neon443.github.io/eaglercraft152/">eaglercraft152</a> - Minecraft 1.5.2<br> <b>├─</b> <a href="https://neon443.github.io/eaglercraft152/">eaglercraft152</a> - Minecraft 1.5.2<br>

10
script.js
View File

@@ -1,12 +1,12 @@
function showAlert() { function showAlert() {
alert("Hey! this is under development. i told u not to click."); alert("Hey! this is under development. i told u not to click.");
} };
function notLink() { function ntLnk() {
var notLinkToast = document.getElementById("notLinkToast"); var ntLnkToast = document.getElementById("ntLnkToast");
notLinkToast.className = "show"; ntLnkToast.className = "show";
setTimeout( setTimeout(
function() { function() {
notLinkToast.className = notLinkToast.className.replace("show", ""); ntLnkToast.className = ntLnkToast.className.replace("show", "");
}, 3000); }, 3000);
} }

44
style.css
View File

@@ -60,7 +60,7 @@
.contentPush{ .contentPush{
height: 65px; height: 65px;
} }
.notLink { .ntLnk {
position: fixed; position: fixed;
top: 47.5px; top: 47.5px;
width: 100%; width: 100%;
@@ -90,6 +90,7 @@
display: block; display: block;
text-decoration: none; text-decoration: none;
font-size: 20px; font-size: 20px;
color: #222;
padding: 9.2px 12px; padding: 9.2px 12px;
} }
.barItem h1 { .barItem h1 {
@@ -118,8 +119,20 @@
} }
html:has(.barItem a:hover) . {} html:has(.barItem a:hover) . {}
/* not Link toast*/ /* not Link toast*/
#notLinkToast { .tool {
visibility: hidden; text-decoration: none;
position: relative;
}
.tip * {
display: none;
}
.tip:hover * {
display: block;
position: fixed;
overflow: hidden;
}
#ntLnkToast {
display: none;
min-width: 250px; min-width: 250px;
margin-left: -125px; margin-left: -125px;
background-color: rgba(255, 255, 255, 0.25); background-color: rgba(255, 255, 255, 0.25);
@@ -136,23 +149,18 @@
backdrop-filter: blur(2.5px); backdrop-filter: blur(2.5px);
} }
#notLinkToast.show { #ntLnkToast.show {
visibility: visible; display: block;
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s forwards; animation-name: fadein;
animation: fadein 0.5s, fadeout 0.5s 2.5s forwards; 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 { @keyframes fadein {
from {top: 0; opacity: 0;} from {top: 0; opacity: 0;}
to {top: 45px; opacity: 1;} to {top: 45px; opacity: 1;}
} }
@-webkit-keyframes fadeout {
from {top: 45px; opacity: 1;}
to {top: 0; opacity: 0;}
}
@keyframes fadeout { @keyframes fadeout {
from {top: 45px; opacity: 1;} from {top: 45px; opacity: 1;}
to {top: 0; opacity: 0;} to {top: 0; opacity: 0;}
@@ -171,7 +179,9 @@
.bar { .bar {
background-color: rgba(0, 0, 0, 0.25); background-color: rgba(0, 0, 0, 0.25);
} }
.barItem * {
color: #ddd;
}
.barItem h1 { .barItem h1 {
border-color: #ddd; border-color: #ddd;
} }
@@ -186,7 +196,7 @@
-moz-box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.25); -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); box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.25);
} }
#notLinkToast { #ntLnkToast {
background-color: rgba(0, 0, 0, 0.25); background-color: rgba(0, 0, 0, 0.25);
} }
} }