neon443/neon443.github.io
1
0
Fork 0
mirror of https://github.com/neon443/neon443.github.io.git synced 2026-03-11 07:09:12 +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>
<body>
<div class="bar">
<div class="barItem" onclick="notLink()"> <h1>neon443</h1> </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" onclick="notLink()"> <p>Text</p> </div>
<div class="barItem"> <a href="mailto:vape.master.69@hotmail.com">Contact</a> </div>
<div class="barItem" onclick="ntLnk()"> <h1>neon443</h1> </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" onclick="ntLnk()"> <p>Text</p> </div>
<div class="barItem"> <a href="mailto:vape.master.69@hotmail.com">Contact</a> </div>
</div>
<div class="contentPush"></div>
<div id="notLinkToast">Not a link!</div>
<div id="ntLnkToast">Not a link!</div>
<p>
<b>My Projects</b><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() {
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);
}

44
style.css
View File

@@ -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);
}
}