diff --git a/index.html b/index.html index 76c66305..6975c21d 100644 --- a/index.html +++ b/index.html @@ -62,15 +62,15 @@ Designed to be efficient in its use of system resources, making it ideal for older hardware or devices with limited resources. Emphasizes minimalism and user-centric design, and it also focuses on penetration testing.

-
- +
+ Download - + Documentation @@ -117,7 +117,7 @@ Maltego Hashcat
- Find out all about Kali's Tools + Find out all about Kali's Tools
diff --git a/style.css b/style.css index fffe701a..663be97e 100644 --- a/style.css +++ b/style.css @@ -16,6 +16,7 @@ body { background-color: var(--dark-blue); color: white; line-height: 1.6; + justify-content: center; } .navbar { @@ -66,7 +67,7 @@ a { text-decoration: none; font-size: 0.9rem; text-transform: uppercase; - font-weight: 500; + font-weight: 800; } .hero { @@ -114,6 +115,66 @@ a { gap: 1rem; } +.glow-on-hover { + width: 220px; + height: 50px; + border: none; + outline: none; + color: #fff; + background: #111; + cursor: pointer; + position: relative; + z-index: 0; + border-radius: 10px; +} + +.glow-on-hover:before { + content: ''; + background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000); + position: absolute; + top: -2px; + left:-2px; + background-size: 400%; + z-index: -1; + filter: blur(5px); + width: calc(100% + 4px); + height: calc(100% + 4px); + animation: glowing 20s linear infinite; + opacity: 0; + transition: opacity .3s ease-in-out; + border-radius: 10px; +} + +.glow-on-hover:active { + color: #000 +} + +.glow-on-hover:active:after { + background: transparent; +} + +.glow-on-hover:hover:before { + opacity: 1; +} + +.glow-on-hover:after { + z-index: -1; + content: ''; + position: absolute; + width: 100%; + height: 100%; + background: #111; + left: 0; + top: 0; + border-radius: 10px; +} + +@keyframes glowing { + 0% { background-position: 0 0; } + 50% { background-position: 400% 0; } + 100% { background-position: 0 0; } +} + .btn { padding: 0.8rem 1.5rem; border-radius: 4px;