<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Creative Crafter</title> <script type="module" src="https://cdn.jsdelivr.net/npm/ldrs/dist/auto/quantum.js"></script> <style> body, html { height: 100%; margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center; background-color: #e6f7ff; /* Leichtes Blau */ } .loader-container { display: none; justify-content: center; align-items: center; height: 100%; width: 100%; position: fixed; top: 0; left: 0; background-color: rgba(173, 216, 230, 0.8); /* Halbtransparenter bläulicher Hintergrund */ z-index: 9999; /* Sicherstellen, dass die Ladeanimation immer im Vordergrund ist */ } /* Ladeanimation anzeigen */ .loading .loader-container { display: flex; } @font-face { font-family: "Titillium"; src: url("/Titillium-Web-Regular.ttf"); } body { font-family: 'Titillium'; } h1, h2, h3 { text-align: center; } .button { padding: 16px 32px; /* Doppelte Größe */ border-radius: 8px; background: linear-gradient(to bottom, #007bff, #0056b3); /* Blau */ box-shadow: 0 2px 4px rgba(0,0,0,0.7); transition: all 0.2s; display: flex; align-items: center; gap: 8px; margin-top: 20px; /* Abstand zum oberen Inhalt */ } .button:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.6); } .button:active { box-shadow: 0 0px 1px rgba(0,0,0,0.8); transform: scale(0.995); } .button-text { font-weight: 600; color: white; font-size: 1.5em; /* Textgröße anpassen */ } </style> </head> <body> <!-- Ladeanimation --> <div class="loader-container"> <l-quantum size="90" speed="1.75" color="black" ></l-quantum> </div> <!-- Deine anderen Inhalte hier --> <h1><img src="/icons/Controller.png" height="150svh"> <br/> Creative Crafter</h1> <h3>Hey there! I'm Creative Crafter, your go-to gamer. On this website, I showcase my latest and greatest games.<br/> Note: All games are available in German <span>🇩🇪</span> only. Enjoy the adventure!</h3> <h2><img src="/icons/spiele.png" height="25vh">Programming</h2> <!-- Button hinzufügen --> <button class="button" onclick="window.location.href='/programmieren/spiele/'"> <div class="button-inner"> <span class="button-text">Games</span> </div> </button> <script> // Ladeanimation beim Laden der Seite anzeigen document.body.classList.add('loading'); // Ladeanimation entfernen, wenn die Seite vollständig geladen ist window.addEventListener('load', () => { document.body.classList.remove('loading'); }); </script> </body> </html>