THE MEME HUB/title> <style> @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Baloo+2:wght@600&display=swap'); body { margin: 0; height: 100vh; background: linear-gradient(135deg, #3c1c78, #6a4bd8, #a891ff); font-family: 'Baloo 2', cursive; display: flex; justify-content: center; align-items: center; color: #f2eaff; } .container { display: flex; width: 95%; max-width: 1000px; height: 85%; background: #2d165f; border: 6px solid #6a4bd8; border-radius: 40px; box-shadow: inset 0 0 15px #a891ff, 0 0 40px #6a4bd8; overflow: hidden; position: relative; } /* LEFT PANEL: buttons */ .info-panel { width: 40%; background: #3c207d; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 2rem; border-right: 5px dashed #6a4bd8; } .info-panel h1 { font-size: 1.5rem; margin-bottom: 2rem; color: #cbb7ff; text-shadow: 1px 1px 0 #4a2a87, 2px 2px 0 #000; } nav { display: flex; flex-direction: column; gap: 1.2rem; width: 100%; } nav a { background: #6a4bd8; border: 4px solid #a891ff; border-radius: 25px; padding: 1rem; text-decoration: none; color: #f2eaff; font-weight: bold; font-size: 1rem; text-align: center; box-shadow: 0 4px #4a2a87; transition: 0.2s; } nav a:hover { background: #8e70ff; transform: translateY(-4px); box-shadow: 0 6px #2d165f; } /* RIGHT PANEL: mascot + bubble */ .character-panel { flex: 1; background: #4a2a87; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; padding: 1.5rem; } .character-panel img { max-height: 250px; } .speech-bubble { background: #cbb7ff; color: #2d165f; border: 3px solid #6a4bd8; border-radius: 20px; padding: 1rem; font-size: 0.95rem; max-width: 350px; text-align: left; box-shadow: 2px 2px 0 #4a2a87; font-weight: bold; margin-top: 1.2rem; } </style> </head> <body> <div class="container">  <div class="info-panel"> <h1>💜 BADMEMER Hub 💜</h1> <nav> <a href="#" onmouseover="setDialog('I draw from time to time 🎨')" onmouseout="resetDialog()">Gallery</a> <a href="#" onmouseover="setDialog('I stream aslso 📺')" onmouseout="resetDialog()">Streams</a> <a href="#" onmouseover="setDialog('my stream calender 💖')" onmouseout="resetDialog()">Support</a> <a href="#" onmouseover="setDialog('IDK 📱')" onmouseout="resetDialog()">Socials</a> </nav> </div>  <div class="character-panel"> <img id="mascot" src="idel.gif" alt="Mascot"> <div class="speech-bubble" id="bubble"> Howdy hey </div> </div> </div> <script> const mascot = document.getElementById("mascot"); const bubble = document.getElementById("bubble"); function setDialog(text) { mascot.src = "webtalk.gif"; // switch to talking gif bubble.innerText = text; } function resetDialog() { mascot.src = "idel.gif"; // switch back to idle gif bubble.innerText = "Hiya! 💕 Hover over a button to hear me talk!"; } </script> </body> </html>