diff --git a/README.md b/README.md index 3c74e73..30a9467 100644 --- a/README.md +++ b/README.md @@ -9,6 +9,9 @@ ___ ## Site - +https://neocities.org +https://lazer-bunny.neocities.org/ +https://faeraphim.net/main/index.htm +https://lilithdev.neocities.org/ july.lol ___ diff --git a/sleepeesoftware.fr/index.html b/sleepeesoftware.fr/index.html index 510e8c5..f9accda 100644 --- a/sleepeesoftware.fr/index.html +++ b/sleepeesoftware.fr/index.html @@ -16,57 +16,53 @@ + +
- -
- - + + + + + diff --git a/sleepeesoftware.fr/style.css b/sleepeesoftware.fr/style.css index 337dc23..84e45ef 100644 --- a/sleepeesoftware.fr/style.css +++ b/sleepeesoftware.fr/style.css @@ -1,275 +1,39 @@ -:root { - --primary-color: #00ffff; - --secondary-color: #ff00ff; - --background-color: #0d0d0d; - --text-color: #f0f0f0; - --overlay-background: rgba(0, 0, 0, 0.85); - --button-background: #ff00ff; - --button-hover-background: #00ffff; - --scanline-color: rgba(255, 255, 255, 0.05); - --glow-color: rgba(0, 255, 255, 0.3); - --terminal-background: rgba(0, 0, 0, 0.9); - --terminal-border: #ff00ff; - /*--border-radius: 1.5%;*/ -} - -/* - effect -*/ - -@keyframes fadeIn { - from { opacity: 0; } - to { opacity: 1; } -} - -@keyframes scanlines { - 0% { transform: translateY(0); } - 50% { transform: translateY(-2px); } - 100% { transform: translateY(0); } -} - -@keyframes vhs-static { - 0% { transform: translate(0, 0); } - 25% { transform: translate(-1px, 1px); } - 50% { transform: translate(1px, -0.5px); } - 75% { transform: translate(-0.5px, 0.5px); } - 100% { transform: translate(0.5px, -1px); } -} - -@keyframes flicker { - 0%, 100% { opacity: 0.8; } - 50% { opacity: 1; } -} - -@keyframes pulse { - 0%, 100% { opacity: 1; } - 50% { opacity: 0.75; } -} - - -@keyframes rgb-split { - 0%, 100% { - transform: translate(0px, 0px); - } - 50% { - transform: translate(-0.5px, 0.5px); - } -} - -.fade-in { - animation: fadeIn 0.5s ease-out forwards; -} - -.hidden { - display: none; -} - -.crt-overlay { - position: fixed; - top: 0; - left: 0; - width: 100vw; - height: 100vh; - pointer-events: none; - z-index: -1; - mix-blend-mode: screen; - animation: flicker 1.5s infinite; - border-radius: var(--border-radius); - box-shadow: inset 0 0 40px var(--glow-color); -} - -.grid-bg { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: repeating-linear-gradient( - to right, - rgba(0, 255, 255, 0.1) 0px, - rgba(0, 255, 255, 0.1) 1px, - transparent 1px, - transparent 40px - ), repeating-linear-gradient( - to bottom, - rgba(0, 255, 255, 0.1) 0px, - rgba(0, 255, 255, 0.1) 1px, - transparent 1px, - transparent 40px - ); - background-color: var(--background-color); - z-index: -4; -} - -#top-nav { - max-width: 960px; - margin: 0 auto; - padding: 2rem; - position: relative; - display: flex; - justify-content: space-between; - align-items: center; - padding: 1rem 2rem; - background: rgba(0, 0, 0, 0.8); - border-bottom: 2px solid var(--secondary-color); - z-index: 1; -} - -#left-nav { - position:absolute; - padding: 2rem; - - left:0; -} - -#right-nav { - position:absolute; - padding: 2rem; - - right:0; -} - -nav ul { - display: flex; - flex-wrap: wrap; - gap: 1rem; - list-style: none; -} - -nav ul li a { - text-decoration: none; - color: var(--primary-color); - padding: 0.5rem 1rem; - border: 1px solid var(--primary-color); - border-radius: 4px; - text-shadow: 0 0 3px var(--primary-color); -} - -nav ul li a:hover { - background: var(--primary-color); - color: var(--background-color); -} - -#loading-screen { - position: fixed; - top: 0; - left: 0; - width: 100vw; - height: 100vh; - background-color: rgb(0, 0, 0); - display: flex; - align-items: center; - justify-content: center; - z-index: 9999; - cursor: pointer; - pointer-events: all; /* Ensure the user can click on the loading screen */ - z-index: 9999; - mix-blend-mode: screen; - box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.15); - animation: flicker 3.0s infinite; -} - -#loading-screen::before { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: url('/assets/RpdC.gif') repeat; - opacity: 0.05; - mix-blend-mode: screen; - z-index: -1; -} - -#loading-screen::after { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: repeating-linear-gradient( - 0deg, - rgba(255, 255, 255, 0.05) 0px, - rgba(255, 255, 255, 0.05) 1px, - transparent 1px, - transparent 4px - ); - animation: scanlines 0.1s linear infinite; - z-index: -2; -} - -.loading-text { - color: var(--primary-color); - font-family: 'Orbitron', sans-serif; - font-size: 2rem; - text-align: center; - text-shadow: 0 0 15px var(--primary-color), 0 0 30px var(--primary-color); - animation: pulse 1.5s infinite; - z-index: 10000; - cursor: pointer; -} - body { - margin: 0; - font-family: 'Orbitron', sans-serif; - color: var(--text-color); - background: var(--background-color); - overflow-x: hidden; + font-family: sans-serif; + display: grid; + grid-template-columns: 1fr 3fr; + gap: 20px; } -body::before { - content: ""; - position: fixed; - top: 0; left: 0; - width: 100%; - height: 100%; - z-index: 2; - pointer-events: none; - background: url('/assets/RpdC.gif') repeat; - opacity: 0.05; - mix-blend-mode: screen; -} - -body::after { - content: ""; - position: fixed; - top: 0; left: 0; - width: 100%; - height: 100%; - z-index: 1; - pointer-events: none; - background: repeating-linear-gradient( - 0deg, - --scanline-color 0px, - --scanline-color 1px, - transparent 1px, - transparent 4px - ); - animation: scanlines 0.1s linear infinite; -} - -.foreground-container { - max-width: 960px; - min-height: 720px; - margin: 0 auto; - padding: 2rem; - background-color: rgba(0, 0, 0, 0.85); - position: relative; - z-index: 1; -} - -footer a { - text-decoration: none; - color: var(--primary-color); -} - -footer a:hover { - color: var(--secondary-color); - -} - -footer p { +header, footer { + border-radius: 5px; + padding: 10px; + background-color: rebeccapurple; + color: whitesmoke; text-align: center; } + +aside { + border-right: 1px solid rebeccapurple; +} + +header { + grid-column: 1 / 3; + grid-row: 1; +} + +main { + grid-column: 2; + grid-row: 2; +} + +aside { + grid-column: 1; + grid-row: 2; +} + +footer { + grid-column: 1 / 3; + grid-row: 3; +} + diff --git a/sleepeesoftware.fr/stylebackup.css b/sleepeesoftware.fr/stylebackup.css new file mode 100644 index 0000000..dfc2cfd --- /dev/null +++ b/sleepeesoftware.fr/stylebackup.css @@ -0,0 +1,290 @@ +:root { + --primary-color: #00ffff; + --secondary-color: #ff00ff; + --background-color: #0d0d0d; + --text-color: #f0f0f0; + --overlay-background: rgba(0, 0, 0, 0.85); + --button-background: #ff00ff; + --button-hover-background: #00ffff; + --scanline-color: rgba(255, 255, 255, 0.05); + --glow-color: rgba(0, 255, 255, 0.3); + --terminal-background: rgba(0, 0, 0, 0.9); + --terminal-border: #ff00ff; +} + +@keyframes fadeIn { + from { opacity: 0; } + to { opacity: 1; } +} + +@keyframes scanlines { + 0% { transform: translateY(0); } + 50% { transform: translateY(-2px); } + 100% { transform: translateY(0); } +} + +@keyframes vhs-static { + 0% { transform: translate(0, 0); } + 25% { transform: translate(-1px, 1px); } + 50% { transform: translate(1px, -0.5px); } + 75% { transform: translate(-0.5px, 0.5px); } + 100% { transform: translate(0.5px, -1px); } +} + +@keyframes flicker { + 0%, 100% { opacity: 0.8; } + 50% { opacity: 1; } +} + +@keyframes pulse { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.75; } +} + + +@keyframes rgb-split { + 0%, 100% { + transform: translate(0px, 0px); + } + 50% { + transform: translate(-0.5px, 0.5px); + } +} + +.fade-in { + animation: fadeIn 0.5s ease-out forwards; +} + +.hidden { + display: none; +} + +.crt-overlay { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + pointer-events: none; + z-index: -1; + mix-blend-mode: screen; + animation: flicker 1.5s infinite; + border-radius: var(--border-radius); + box-shadow: inset 0 0 40px var(--glow-color); +} + +.grid-bg { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: repeating-linear-gradient( + to right, + rgba(0, 255, 255, 0.1) 0px, + rgba(0, 255, 255, 0.1) 1px, + transparent 1px, + transparent 40px + ), repeating-linear-gradient( + to bottom, + rgba(0, 255, 255, 0.1) 0px, + rgba(0, 255, 255, 0.1) 1px, + transparent 1px, + transparent 40px + ); + background-color: var(--background-color); + z-index: -4; +} + +#top-nav { + max-width: 960px; + margin: 0 auto; + padding: 2rem; + position: relative; + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem 2rem; + background: rgba(0, 0, 0, 0.8); + border-bottom: 2px solid var(--secondary-color); + z-index: 1; +} + +#left-nav { + position: fixed; + top: 96px; + left: 0; + width: 200px; + height: auto; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + padding: 1rem; + background: rgba(0, 0, 0, 0.85); + border-right: 2px solid var(--primary-color); + z-index: 5; + overflow-y: auto; +} + +#right-nav { + position: fixed; + top: 96px; + right: 0; + width: 200px; + height: auto; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-end; + padding: 1rem; + background: rgba(0, 0, 0, 0.85); + border-left: 2px solid var(--primary-color); + z-index: 5; + overflow-y: auto; +} + +nav ul { + display: flex; + flex-wrap: wrap; + gap: 1rem; + list-style: none; +} + +nav ul li a { + text-decoration: none; + color: var(--primary-color); + padding: 0.5rem 1rem; + border: 1px solid var(--primary-color); + border-radius: 4px; + text-shadow: 0 0 3px var(--primary-color); +} + +nav ul li a:hover { + background: var(--primary-color); + color: var(--background-color); +} + +#loading-screen { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background-color: rgb(0, 0, 0); + display: flex; + align-items: center; + justify-content: center; + z-index: 9999; + cursor: pointer; + pointer-events: all; /* Ensure the user can click on the loading screen */ + z-index: 9999; + mix-blend-mode: screen; + box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.15); + animation: flicker 3.0s infinite; +} + +#loading-screen::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: url('/assets/RpdC.gif') repeat; + opacity: 0.05; + mix-blend-mode: screen; + z-index: -1; +} + +#loading-screen::after { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: repeating-linear-gradient( + 0deg, + rgba(255, 255, 255, 0.05) 0px, + rgba(255, 255, 255, 0.05) 1px, + transparent 1px, + transparent 4px + ); + animation: scanlines 0.1s linear infinite; + z-index: -2; +} + +.loading-text { + color: var(--primary-color); + font-family: 'Orbitron', sans-serif; + font-size: 2rem; + text-align: center; + text-shadow: 0 0 15px var(--primary-color), 0 0 30px var(--primary-color); + animation: pulse 1.5s infinite; + z-index: 10000; + cursor: pointer; +} + +body { + margin: 0; + font-family: 'Orbitron', sans-serif; + color: var(--text-color); + background: var(--background-color); + overflow-x: hidden; +} + +body::before { + content: ""; + position: fixed; + top: 0; left: 0; + width: 100%; + height: 100%; + z-index: 2; + pointer-events: none; + background: url('/assets/RpdC.gif') repeat; + opacity: 0.05; + mix-blend-mode: screen; +} + +body::after { + content: ""; + position: fixed; + top: 0; left: 0; + width: 100%; + height: 100%; + z-index: 1; + pointer-events: none; + background: repeating-linear-gradient( + 0deg, + --scanline-color 0px, + --scanline-color 1px, + transparent 1px, + transparent 4px + ); + animation: scanlines 0.1s linear infinite; +} + +.main-content { + max-width: 960px; + min-height: 720px; + margin: 0 auto; + padding: 32px; + background-color: rgba(0, 0, 0, 0.85); + position: relative; + z-index: 1; +} + +footer a { + text-decoration: none; + color: var(--primary-color); +} + +footer a:hover { + color: var(--secondary-color); + +} + +footer p { + text-align: center; +}