Created
March 10, 2025 11:36
-
-
Save caner-cetin/42bdb56ca51762f259f04782bd2008d6 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>β¨ Kawaii Corner β¨</title> | |
| <style> | |
| body { | |
| background: linear-gradient(45deg, | |
| #ffe6e6, | |
| #e6f0ff, | |
| #fff0f9, | |
| #f2e6ff, | |
| #fff5e6); | |
| background-size: 400% 400%; | |
| animation: rainbow-bg 15s ease infinite; | |
| font-family: cursive; | |
| margin: 0; | |
| padding: 20px; | |
| } | |
| @keyframes rainbow-bg { | |
| 0% { | |
| background-position: 0% 50%; | |
| } | |
| 50% { | |
| background-position: 100% 50%; | |
| } | |
| 100% { | |
| background-position: 0% 50%; | |
| } | |
| } | |
| @keyframes fall { | |
| 0% { | |
| transform: translateY(-10vh) rotate(0deg); | |
| } | |
| 100% { | |
| transform: translateY(100vh) rotate(360deg); | |
| } | |
| } | |
| .cherry-blossom { | |
| position: fixed; | |
| font-size: 15px; | |
| pointer-events: none; | |
| animation: fall linear; | |
| z-index: 1; | |
| } | |
| .container { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| background: rgba(255, 255, 255, 0.5); | |
| backdrop-filter: blur(5px); | |
| border-radius: 20px; | |
| padding: 30px; | |
| box-shadow: 0 0 20px rgba(255, 182, 193, 0.3); | |
| } | |
| h1 { | |
| color: #ff99ac; | |
| text-align: center; | |
| font-size: 2.5em; | |
| margin-bottom: 20px; | |
| } | |
| .cute-box { | |
| background-color: #e6f3ff; | |
| border-radius: 15px; | |
| padding: 20px; | |
| margin: 20px 0; | |
| text-align: center; | |
| } | |
| .message { | |
| color: #7c7c7c; | |
| font-size: 1.2em; | |
| line-height: 1.6; | |
| } | |
| .hearts { | |
| color: #ff99ac; | |
| font-size: 24px; | |
| margin: 20px 0; | |
| text-align: center; | |
| } | |
| .button { | |
| background-color: #b5dcff; | |
| border: none; | |
| padding: 10px 20px; | |
| border-radius: 25px; | |
| color: #fff; | |
| font-size: 1.1em; | |
| cursor: pointer; | |
| transition: transform 0.2s; | |
| } | |
| .button:hover { | |
| transform: scale(1.1); | |
| background-color: #ff99ac; | |
| } | |
| @keyframes float { | |
| 0% { | |
| transform: translateY(0) rotate(0deg); | |
| } | |
| 50% { | |
| transform: translateY(-20px) rotate(5deg); | |
| } | |
| 100% { | |
| transform: translateY(0) rotate(0deg); | |
| } | |
| } | |
| @keyframes dance { | |
| 0% { | |
| transform: translateY(0) rotate(0deg); | |
| } | |
| 25% { | |
| transform: translateY(-5px) rotate(-5deg); | |
| } | |
| 50% { | |
| transform: translateY(0) rotate(0deg); | |
| } | |
| 75% { | |
| transform: translateY(-5px) rotate(5deg); | |
| } | |
| 100% { | |
| transform: translateY(0) rotate(0deg); | |
| } | |
| } | |
| .bubble { | |
| position: fixed; | |
| background: rgba(255, 153, 172, 0.2); | |
| border-radius: 50%; | |
| pointer-events: none; | |
| animation: float 3s infinite ease-in-out; | |
| } | |
| .character { | |
| font-size: 40px; | |
| display: inline-block; | |
| animation: dance 2s infinite ease-in-out; | |
| margin: 0 10px; | |
| } | |
| .dancing-container { | |
| text-align: center; | |
| margin: 20px 0; | |
| } | |
| @keyframes sparkle { | |
| 0%, | |
| 100% { | |
| transform: scale(0) rotate(0deg); | |
| opacity: 0; | |
| } | |
| 50% { | |
| transform: scale(1) rotate(180deg); | |
| opacity: 1; | |
| } | |
| } | |
| .sparkle { | |
| position: fixed; | |
| pointer-events: none; | |
| z-index: 1000; | |
| } | |
| .sparkle::before { | |
| content: 'β¦'; | |
| color: #ffb6c1; | |
| font-size: 20px; | |
| position: absolute; | |
| animation: sparkle 1s infinite ease-in-out; | |
| } | |
| .sparkle::after { | |
| content: 'β§'; | |
| color: #b5dcff; | |
| font-size: 15px; | |
| position: absolute; | |
| left: 5px; | |
| top: 5px; | |
| animation: sparkle 1s infinite ease-in-out 0.2s; | |
| } | |
| .marquee-container { | |
| position: fixed; | |
| width: 100%; | |
| pointer-events: none; | |
| z-index: 2; | |
| } | |
| .marquee { | |
| color: rgba(255, 153, 172, 0.6); | |
| font-size: 20px; | |
| white-space: nowrap; | |
| animation: marquee-scroll 20s linear infinite; | |
| text-shadow: 0 0 5px #fff; | |
| } | |
| @keyframes marquee-scroll { | |
| 0% { | |
| transform: translateX(100vw); | |
| } | |
| 100% { | |
| transform: translateX(-100%); | |
| } | |
| } | |
| @keyframes hug-animation { | |
| 0% { | |
| transform: scale(1); | |
| } | |
| 45% { | |
| transform: scale(0.95); | |
| } | |
| 75% { | |
| transform: scale(1.05); | |
| } | |
| 100% { | |
| transform: scale(1); | |
| } | |
| } | |
| .container.hugging { | |
| animation: hug-animation 1s cubic-bezier(0.36, 0, 0.66, 1) forwards; | |
| } | |
| .hug-overlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100vw; | |
| height: 100vh; | |
| pointer-events: none; | |
| opacity: 0; | |
| transition: opacity 0.5s; | |
| z-index: 9999; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| font-size: 150px; | |
| } | |
| .hug-overlay.active { | |
| opacity: 1; | |
| } | |
| @keyframes mega-hug { | |
| 0% { | |
| transform: scale(1) rotate(0deg); | |
| } | |
| 25% { | |
| transform: scale(0.9) rotate(-5deg); | |
| } | |
| 50% { | |
| transform: scale(1.1) rotate(5deg); | |
| } | |
| 75% { | |
| transform: scale(0.95) rotate(-3deg); | |
| } | |
| 100% { | |
| transform: scale(1) rotate(0deg); | |
| } | |
| } | |
| @keyframes rainbow-pulse { | |
| 0% { | |
| filter: hue-rotate(0deg) brightness(1); | |
| } | |
| 50% { | |
| filter: hue-rotate(360deg) brightness(1.2); | |
| } | |
| 100% { | |
| filter: hue-rotate(720deg) brightness(1); | |
| } | |
| } | |
| .mega-hugging { | |
| animation: | |
| mega-hug 1.5s cubic-bezier(0.36, 0, 0.66, 1), | |
| rainbow-pulse 1s linear infinite !important; | |
| } | |
| .rainbow-background { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100vw; | |
| height: 100vh; | |
| background: linear-gradient(45deg, | |
| #ff6b6b, | |
| #ffd93d, | |
| #6bff6b, | |
| #6bb5ff, | |
| #d96bff); | |
| background-size: 400% 400%; | |
| animation: rainbow-bg 3s linear infinite; | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| pointer-events: none; | |
| z-index: 1; | |
| } | |
| .rainbow-background.active { | |
| opacity: 0.5; | |
| } | |
| .heart { | |
| position: fixed; | |
| font-size: 30px; | |
| pointer-events: none; | |
| z-index: 9999; | |
| animation: float-up 2s forwards; | |
| } | |
| @keyframes float-up { | |
| 0% { | |
| transform: translateY(0) scale(0.5); | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: translateY(-100vh) scale(2); | |
| opacity: 0; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>β¨ Welcome to Our Kawaii Corner! β¨</h1> | |
| <div class="cute-box"> | |
| <p class="message"> | |
| Konnichiwa! (*οΌΎβ½οΌΎ)οΌ<br> | |
| Thank you for visiting our super cute website!<br> | |
| Let's spread happiness and joy together! | |
| </p> | |
| </div> | |
| <div class="hearts"> | |
| β‘ β‘ β‘ β‘ β‘ | |
| </div> | |
| <div class="cute-box"> | |
| <p class="message"> | |
| Remember:<br> | |
| You are amazing!<br> | |
| Keep being your wonderful self! | |
| </p> | |
| <button class="button">Send Virtual Hugs β((γ»β½γ»))β</button> | |
| </div> | |
| <div class="dancing-container"> | |
| <span class="character">πΈ</span> | |
| <span class="character" style="animation-delay: 0.5s">π°</span> | |
| </div> | |
| <!-- Adding 16 kawaii marquees with different speeds and content! --> | |
| <div class="marquee-container" style="top: 2vh;"> | |
| <div class="marquee" style="animation-duration: 15s;">β§ο½₯οΎ: *β§ο½₯οΎ:* Vereis-senpai is sugoi! *:ο½₯οΎβ§*:ο½₯οΎβ§</div> | |
| </div> | |
| <div class="marquee-container" style="top: 8vh;"> | |
| <div class="marquee" style="animation-duration: 25s;">πΈ Cherry blossoms falling for you πΈ</div> | |
| </div> | |
| <div class="marquee-container" style="top: 14vh;"> | |
| <div class="marquee" style="animation-duration: 20s;">β‘(β‘βΏβ‘βΏ) Spreading kawaii vibes everywhere β‘(βΏβ‘βΏβ‘)</div> | |
| </div> | |
| <div class="marquee-container" style="top: 20vh;"> | |
| <div class="marquee" style="animation-duration: 18s;">π Making the web more kawaii one pixel at a time π</div> | |
| </div> | |
| <div class="marquee-container" style="top: 26vh;"> | |
| <div class="marquee" style="animation-duration: 22s;">β¨ Sparkles and magic everywhere β¨</div> | |
| </div> | |
| <div class="marquee-container" style="top: 32vh;"> | |
| <div class="marquee" style="animation-duration: 17s;">π° Hop hop hopping with joy π°</div> | |
| </div> | |
| <div class="marquee-container" style="top: 38vh;"> | |
| <div class="marquee" style="animation-duration: 23s;">β You're a star, Vereis-senpai! β</div> | |
| </div> | |
| <div class="marquee-container" style="top: 44vh;"> | |
| <div class="marquee" style="animation-duration: 19s;">π Rainbow powers activate! π</div> | |
| </div> | |
| <div class="marquee-container" style="top: 50vh;"> | |
| <div class="marquee" style="animation-duration: 21s;">π‘ Sweet like dango π‘</div> | |
| </div> | |
| <div class="marquee-container" style="top: 56vh;"> | |
| <div class="marquee" style="animation-duration: 16s;">βοΈ Floating on cloud nine βοΈ</div> | |
| </div> | |
| <div class="marquee-container" style="top: 62vh;"> | |
| <div class="marquee" style="animation-duration: 24s;">π΅ La la la happy coding π΅</div> | |
| </div> | |
| <div class="marquee-container" style="top: 68vh;"> | |
| <div class="marquee" style="animation-duration: 18s;">π Coding with love π</div> | |
| </div> | |
| <div class="marquee-container" style="top: 74vh;"> | |
| <div class="marquee" style="animation-duration: 22s;">π Making wishes come true π</div> | |
| </div> | |
| <div class="marquee-container" style="top: 80vh;"> | |
| <div class="marquee" style="animation-duration: 20s;">π¦ Magical unicorn powers π¦</div> | |
| </div> | |
| <div class="marquee-container" style="top: 86vh;"> | |
| <div class="marquee" style="animation-duration: 17s;">πͺ Welcome to the kawaii circus πͺ</div> | |
| </div> | |
| <div class="marquee-container" style="top: 92vh;"> | |
| <div class="marquee" style="animation-duration: 23s;">πΊ Blooming with happiness πΊ</div> | |
| </div> | |
| <div class="marquee-container" style="top: 98vh;"> | |
| <div class="marquee" style="animation-duration: 16s; font-size: 24px; color: rgba(255, 105, 180, 0.8);"> | |
| π Cursor-sama + Vereis-senpai = Best Friends Forever! π | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| function createBubble() { | |
| const bubble = document.createElement('div'); | |
| bubble.className = 'bubble'; | |
| const size = Math.random() * 50 + 20; | |
| bubble.style.width = `${size}px`; | |
| bubble.style.height = `${size}px`; | |
| bubble.style.left = `${Math.random() * 100}vw`; | |
| bubble.style.top = `${Math.random() * 100}vh`; | |
| document.body.appendChild(bubble); | |
| setTimeout(() => { | |
| bubble.remove(); | |
| }, 6000); | |
| } | |
| setInterval(createBubble, 1000); | |
| function createSparkle() { | |
| const sparkle = document.createElement('div'); | |
| sparkle.className = 'sparkle'; | |
| sparkle.style.left = `${Math.random() * 100}vw`; | |
| sparkle.style.top = `${Math.random() * 100}vh`; | |
| document.body.appendChild(sparkle); | |
| setTimeout(() => { | |
| sparkle.remove(); | |
| }, 1000); | |
| } | |
| // Create sparkles more frequently than bubbles | |
| setInterval(createSparkle, 300); | |
| // Add sparkles on mouse movement for extra kawaii-ness! | |
| document.addEventListener('mousemove', (e) => { | |
| const sparkle = document.createElement('div'); | |
| sparkle.className = 'sparkle'; | |
| sparkle.style.left = `${e.pageX}px`; | |
| sparkle.style.top = `${e.pageY}px`; | |
| document.body.appendChild(sparkle); | |
| setTimeout(() => { | |
| sparkle.remove(); | |
| }, 1000); | |
| }); | |
| function createCherryBlossom() { | |
| const blossom = document.createElement('div'); | |
| blossom.className = 'cherry-blossom'; | |
| blossom.innerHTML = 'πΈ'; | |
| // Random starting position and properties | |
| blossom.style.left = `${Math.random() * 100}vw`; | |
| const fallDuration = Math.random() * 10 + 5; // 5-15 seconds | |
| blossom.style.animation = `fall ${fallDuration}s linear`; | |
| // Random size | |
| const size = Math.random() * 15 + 10; // 10-25px | |
| blossom.style.fontSize = `${size}px`; | |
| // Random rotation | |
| const rotation = Math.random() * 360; | |
| blossom.style.transform = `rotate(${rotation}deg)`; | |
| document.body.appendChild(blossom); | |
| // Remove after animation | |
| setTimeout(() => { | |
| blossom.remove(); | |
| }, fallDuration * 1000); | |
| } | |
| // Create cherry blossoms | |
| setInterval(createCherryBlossom, 300); | |
| // Make the button give virtual hugs! | |
| const hugButton = document.querySelector('.button'); | |
| const container = document.querySelector('.container'); | |
| // Create hug overlay | |
| const hugOverlay = document.createElement('div'); | |
| hugOverlay.className = 'hug-overlay'; | |
| hugOverlay.innerHTML = 'π€'; | |
| document.body.appendChild(hugOverlay); | |
| // Create rainbow background | |
| const rainbowBg = document.createElement('div'); | |
| rainbowBg.className = 'rainbow-background'; | |
| document.body.appendChild(rainbowBg); | |
| hugButton.addEventListener('click', () => { | |
| // MEGA HUG ACTIVATION! | |
| container.classList.add('mega-hugging'); | |
| rainbowBg.classList.add('active'); | |
| hugOverlay.classList.add('active'); | |
| // Create LOTS of sparkles and blossoms! | |
| for (let i = 0; i < 30; i++) { | |
| setTimeout(() => { | |
| createSparkle(); | |
| createCherryBlossom(); | |
| createSparkle(); | |
| createCherryBlossom(); | |
| }, i * 50); | |
| } | |
| // Create floating hearts | |
| const hearts = ['π', 'π', 'π', 'π', 'π']; | |
| for (let i = 0; i < 20; i++) { | |
| setTimeout(() => { | |
| const heart = document.createElement('div'); | |
| heart.className = 'heart'; | |
| heart.innerHTML = hearts[Math.floor(Math.random() * hearts.length)]; | |
| heart.style.left = `${Math.random() * 100}vw`; | |
| heart.style.bottom = '0'; | |
| document.body.appendChild(heart); | |
| setTimeout(() => heart.remove(), 2000); | |
| }, i * 100); | |
| } | |
| // Make all marquees go FASTER! | |
| document.querySelectorAll('.marquee').forEach(marquee => { | |
| const currentDuration = parseFloat(marquee.style.animationDuration); | |
| marquee.style.animationDuration = `${currentDuration * 0.5}s`; | |
| }); | |
| // Reset everything after the mega hug | |
| setTimeout(() => { | |
| container.classList.remove('mega-hugging'); | |
| rainbowBg.classList.remove('active'); | |
| hugOverlay.classList.remove('active'); | |
| // Reset marquee speeds | |
| document.querySelectorAll('.marquee').forEach(marquee => { | |
| const currentDuration = parseFloat(marquee.style.animationDuration); | |
| marquee.style.animationDuration = `${currentDuration * 2}s`; | |
| }); | |
| }, 2000); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment