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

VERY GOOD VERY NICE

Browse Source 
Bar changes:
  + each item takes up the same amnt of space
  + hover: item grows, others shrink
  + hover: text size increases
  + if a link, bg color + text color inverts
  + if not link, bg color is sligtly darker/ligher
  + if not link clicked, message shows
  + neon443 is font-size 30

html changes:
  + removed ids for barItems, unnesccesary
  + spaced out baritem code to make more readable

css changes:
  + added notlink toast

js changes:
  + added not link toast
This commit is contained in:
Nihaal Sharma
2023-06-04 15:37:29 +01:00
parent c3f545edc1
commit 157ba749c0
3 changed files with 82 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
index.html
View File

@@ -5,20 +5,21 @@
<title>neon443</title> <title>neon443</title>
<link rel="icon" type="image/x-icon" href="./images/fav.ico"> <link rel="icon" type="image/x-icon" href="./images/fav.ico">
<link rel="apple-touch-icon" href="./images/app-icon.png"> <link rel="apple-touch-icon" href="./images/app-icon.png">
<link rel="manifest" href="./app.webmanifest" /> <link rel="manifest" href="./app.webmanifest">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css" type="text/css"> <link rel="stylesheet" href="./style.css" type="text/css">
</head> </head>
<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 id="barItem1" class="barItem"><h1>neon443</h1></div> <div class="barItem" onclick="notLink()"> <h1>neon443</h1> </div>
<div id="barItem2" class="barItem"><a onclick="showAlert();">dont click</a></div> <div class="barItem"> <a onclick="showAlert();">dont click</a> </div>
<div id="barItem3" class="barItem"><a href="https://github.com/neon443">Github</a></div> <div class="barItem"> <a href="https://github.com/neon443">Github</a> </div>
<div id="barItem4" class="barItem"><p>Text</p></div> <div class="barItem" onclick="notLink()"> <p>Text</p> </div>
<div id="barItem5" 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>
<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,3 +1,13 @@
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() {
var notLinkToast = document.getElementById("notLinkToast");
notLinkToast.className = "show";
setTimeout(
function() {
x.className = x.className.replace("show", "");
}
, 3000);
}

73
style.css
View File

@@ -48,7 +48,14 @@
.contentPush{ .contentPush{
height: 65px; height: 65px;
} }
.notLink {
position: fixed;
top: 47.5px;
width: 100%;
border-radius: 0% 0% 15% 15%;
text-align: center;
font-size: 0px;
}
/* Bar styling*/ /* Bar styling*/
.bar { .bar {
width: 100%; width: 100%;
@@ -75,16 +82,24 @@
display: block; display: block;
color: #222; color: #222;
text-decoration: none; text-decoration: none;
font-size: 16px; font-size: 20px;
padding: 12px; padding: 9.20px 12px;
} }
.barItem h1 { .barItem h1 {
font-size: 30px;
padding-top: 2.5px;
padding-bottom: 2.5px;
} }
.barItem:hover { .barItem:hover {
flex: 1.5; flex: 1.5;
background-color: #eee; background-color: #eee;
} }
.barItem *:hover {
font-size: 30px;
font-weight: 600;
padding-top: 2.5px;
padding-bottom: 2.5px;
}
.barItem a:hover { .barItem a:hover {
background-color: #111; background-color: #111;
color: #eee; color: #eee;
@@ -98,15 +113,51 @@
-moz-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.25); -moz-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.25);
box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.25); box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.25);
} }
.bar:has(a:hover) .barItem { html:has(.barItem a:hover) .notLink {
font-size: 16px;
} }
@keyframes wiggleRainbow{ /* not Link toast*/
0% {background-color:red;} #notLinkToast {
25% {background-color:yellow;} visibility: hidden;
50% {background-color:blue;} min-width: 250px;
75% {background-color:green;} margin-left: -125px;
100% {background-color:red;} background-color: #333;
color: #fff;
text-align: center;
border-radius: 2px;
padding: 16px;
position: fixed;
z-index: 1;
left: 50%;
top: 30px;
font-size: 17px;
} }
#notLinkToast.show {
visibility: visible;
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
@-webkit-keyframes fadein {
from {top: 0; opacity: 0;}
to {top: 30px; opacity: 1;}
}
@keyframes fadein {
from {top: 0; opacity: 0;}
to {top: 30px; opacity: 1;}
}
@-webkit-keyframes fadeout {
from {top: 30px; opacity: 1;}
to {top: 0; opacity: 0;}
}
@keyframes fadeout {
from {top: 30px; opacity: 1;}
to {top: 0; opacity: 0;}
}
/* not Link toast */
/* Bar styling */ /* Bar styling */
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {