diff options
| author | Yuval Adam <_@yuv.al> | 2025-02-27 11:40:22 +0100 |
|---|---|---|
| committer | Yuval Adam <_@yuv.al> | 2025-02-27 11:40:22 +0100 |
| commit | 6e70bc78a66d21e7e6caf86f252b7972416f3ce5 (patch) | |
| tree | a13121858946871e77fcb429f5728b375fae93ef /index.html | |
| parent | 2320997f086b18b8c79434a86f44b3a1d0e64398 (diff) | |
redesign heh
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 89 |
1 files changed, 58 insertions, 31 deletions
@@ -1,14 +1,19 @@ <!DOCTYPE html> <html lang="en"> + <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vibes</title> + <link rel="preconnect" href="https://fonts.googleapis.com"> + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> + <link href="https://fonts.googleapis.com/css2?family=VT323&family=Fredoka:wght@400;600&display=swap" + rel="stylesheet"> <style> body { - font-family: 'Helvetica Neue', Arial, sans-serif; - background-color: #121212; - color: #ffffff; + font-family: 'Fredoka', sans-serif; + background-color: #ffd6e0; + color: #5a3d5c; margin: 0; padding: 0; display: flex; @@ -16,75 +21,96 @@ align-items: center; min-height: 100vh; text-align: center; + background-image: + linear-gradient(45deg, #ffd6e0 25%, transparent 25%), + linear-gradient(-45deg, #ffd6e0 25%, transparent 25%), + linear-gradient(45deg, transparent 75%, #ffd6e0 75%), + linear-gradient(-45deg, transparent 75%, #ffd6e0 75%); + background-size: 20px 20px; + background-color: #ffecf1; } - + .container { max-width: 800px; padding: 2rem; + background-color: rgba(255, 255, 255, 0.85); + border-radius: 20px; + box-shadow: 0 10px 25px rgba(90, 61, 92, 0.2); + border: 5px solid #c1a5e8; + image-rendering: pixelated; } - + h1 { - font-size: 4rem; + font-family: 'VT323', monospace; + font-size: 5rem; margin-bottom: 1rem; - background: linear-gradient(45deg, #ff00aa, #00aaff); + background: linear-gradient(45deg, #ff6ec4, #7873f5); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; + text-shadow: 3px 3px 0px rgba(255, 110, 196, 0.3); + letter-spacing: 2px; } - + p { font-size: 1.2rem; line-height: 1.6; margin-bottom: 2rem; - color: #aaaaaa; + color: #7c5295; } - + .experiments { display: flex; flex-direction: column; gap: 1rem; margin-top: 2rem; } - + .experiment-card { - background: rgba(255, 255, 255, 0.05); - border-radius: 10px; + background: #c1a5e8; + border-radius: 15px; padding: 1.5rem; transition: all 0.3s ease; text-decoration: none; - color: white; - border: 1px solid rgba(255, 255, 255, 0.1); + color: #5a3d5c; + border: 3px dashed #ff6ec4; + box-shadow: 5px 5px 0px #7873f5; + transform: rotate(-1deg); } - + .experiment-card:hover { - transform: translateY(-5px); - box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); - background: rgba(255, 255, 255, 0.1); - border-color: rgba(255, 255, 255, 0.2); + transform: translateY(-5px) rotate(1deg); + box-shadow: 8px 8px 0px #7873f5; + background: #d4c1f0; } - + .experiment-title { - font-size: 1.5rem; + font-family: 'VT323', monospace; + font-size: 2rem; margin-bottom: 0.5rem; + color: #5a3d5c; } - + .experiment-description { - color: #aaaaaa; + color: #5a3d5c; font-size: 1rem; } - + footer { margin-top: 4rem; - color: #666666; + color: #7c5295; font-size: 0.9rem; + font-family: 'VT323', monospace; + letter-spacing: 1px; } </style> </head> + <body> <div class="container"> <h1>Vibes</h1> - <p>A collection of creative web experiments and visual experiences.</p> - + <p>A collection of cute & creative web experiments and visual experiences ✨</p> + <div class="experiments"> <a href="isometric/index.html" class="experiment-card"> <div class="experiment-title">Isometric Triangles</div> @@ -93,10 +119,11 @@ </div> </a> </div> - + <footer> - © 2025 Vibes + © 2025 Vibes ♡ </footer> </div> </body> -</html> + +</html>
\ No newline at end of file |