ION_Archive/ion606.github.io
1
0
Fork 0
mirror of https://github.com/ION606/ion606.github.io.git synced 2026-05-14 22:16:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

moved link CSS to it's own file

Browse Source
This commit is contained in:
ION606
2024-04-07 09:12:41 -07:00
parent a78aa4aaf8
commit eed0e016a4
2 changed files with 150 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files
links.css
+143
View File
@@ -0,0 +1,143 @@
.home-button {
position: absolute;
top: 20px;
left: 20px;
width: 25px !important;
height: 25px !important;
text-align: center;
border-radius: 50%;
background-color: #ffffff;
color: #000000;
font-size: 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
padding: 10px !important;
}
.home-button:hover {
background-color: #e0e0e0;
transform: scale(1.1);
transition: background-color 0.3s, transform 0.3s;
}
.xxlarge {
width: 500px;
height: 500px;
left: 50%;
bottom: -250px;
animation-delay: 0s;
}
.xlarge {
width: 400px;
height: 400px;
left: 45%;
bottom: -200px;
animation-delay: -2s;
}
.large {
width: 300px;
height: 300px;
left: 40%;
bottom: -150px;
animation-delay: -4s;
}
.mediun {
width: 200px;
height: 200px;
left: 35%;
bottom: -100px;
animation-delay: -6s;
}
.small {
width: 100px;
height: 100px;
left: 30%;
bottom: -50px;
animation-delay: -8s;
}
body,
html {
height: 100%;
margin: 0;
overflow: hidden;
}
.ripple-background {
position: relative;
height: 100%;
background-color: #000;
/* Consider a dark background for contrast */
}
.circle {
position: absolute;
border-radius: 50%;
animation: ripple 15s infinite ease-in-out;
box-shadow: 0px 0px 1px 0px #fff;
opacity: 0;
}
.links-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
position: absolute;
z-index: 1;
}
.link {
background-color: #ffffffc2;
color: #000000;
text-decoration: none;
padding: 10px 20px;
margin: 5px 0;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s, transform 0.3s;
display: block;
width: max-content;
max-width: 90%;
}
.link:hover {
background-color: #e0e0e0;
/* Slightly darker background on hover */
transform: translateY(-2px);
/* Slight lift effect */
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fade-in {
animation: fadeIn 5s ease-in;
opacity: 0;
animation-fill-mode: forwards;
}
@keyframes ripple {
0% {
transform: scale(0);
opacity: 0.75;
}
100% {
transform: scale(4);
opacity: 0;
}
}
links.html
+7 -144
View File
@@ -4,152 +4,15 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:title" content="ION606.com">
<meta property="og:description"
content="My personal website!">
<meta property="og:image" content="https://avatars.githubusercontent.com/u/58801387">
<meta property="og:url" content="https://ion606.com/">
<meta property="og:type" content="website">
<title>Ripple Effect Background</title> <title>Ripple Effect Background</title>
<style>
.home-button {
position: absolute;
top: 20px;
left: 20px;
width: 25px !important;
height: 25px !important;
text-align: center;
border-radius: 50%;
background-color: #ffffff;
color: #000000;
font-size: 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
padding: 10px !important;
}
.home-button:hover { <link rel="stylesheet" href="links.css">
background-color: #e0e0e0;
transform: scale(1.1);
transition: background-color 0.3s, transform 0.3s;
}
.xxlarge {
width: 500px;
height: 500px;
left: 50%;
bottom: -250px;
animation-delay: 0s;
}
.xlarge {
width: 400px;
height: 400px;
left: 45%;
bottom: -200px;
animation-delay: -2s;
}
.large {
width: 300px;
height: 300px;
left: 40%;
bottom: -150px;
animation-delay: -4s;
}
.mediun {
width: 200px;
height: 200px;
left: 35%;
bottom: -100px;
animation-delay: -6s;
}
.small {
width: 100px;
height: 100px;
left: 30%;
bottom: -50px;
animation-delay: -8s;
}
body,
html {
height: 100%;
margin: 0;
overflow: hidden;
}
.ripple-background {
position: relative;
height: 100%;
background-color: #000;
/* Consider a dark background for contrast */
}
.circle {
position: absolute;
border-radius: 50%;
animation: ripple 15s infinite ease-in-out;
box-shadow: 0px 0px 1px 0px #fff;
opacity: 0;
}
.links-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
position: absolute;
z-index: 1;
}
.link {
background-color: #ffffffc2;
color: #000000;
text-decoration: none;
padding: 10px 20px;
margin: 5px 0;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s, transform 0.3s;
display: block;
width: max-content;
max-width: 90%;
}
.link:hover {
background-color: #e0e0e0;
/* Slightly darker background on hover */
transform: translateY(-2px);
/* Slight lift effect */
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fade-in {
animation: fadeIn 5s ease-in;
opacity: 0;
animation-fill-mode: forwards;
}
@keyframes ripple {
0% {
transform: scale(0);
opacity: 0.75;
}
100% {
transform: scale(4);
opacity: 0;
}
}
</style>
<script> <script>
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {