WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
cardinal numbers
1229
Kamilcia
Open In Editor
Publish Your Code
HTML
Copy
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Kamilcia, cardinal numbers</title> <link rel="stylesheet" href="styles.css"> </head> <body> <!-- Session code container --> <div class="session-code" id="sessionCode"></div> <div class="container"> <div class="item highlighted" data-text="Text 1">1</div> <div class="item" data-text="Text 2">2</div> <div class="item" data-text="Text 3">3</div> <div class="item" data-text="Text 4">4</div> <div class="item" data-text="Text 5">5</div> <div class="item" data-text="Text 6">6</div> <div class="item" data-text="Text 7">7</div> </div> <div class="text-display">Text 1!</div> <script src="script.js"></script> </body> </html>
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Helvetica Neue', sans-serif; background-color: #000; display: flex; justify-content: center; align-items: center; height: 100vh; flex-direction: column; color: white; text-align: center; } .container { display: flex; justify-content: center; gap: 2rem; margin-bottom: 20px; } .item { font-size: 4rem; font-weight: 700; cursor: pointer; color: #ffffff; transition: transform 0.3s ease, color 0.3s ease; padding: 0.5rem 1rem; border-radius: 8px; border: 2px solid transparent; } .item:hover { color: #e63946; transform: scale(1.2); } .highlighted { background-color: #ffffff; color: #000000; } .text-display { font-size: 1.5rem; color: #e63946; opacity: 1; transition: opacity 0.5s ease; max-width: 80%; line-height: 1.5; } .text-display.show { opacity: 1; } body { font-family: 'Poppins', sans-serif; background: #000; padding: 20px; } .session-code { position: fixed; top: 20px; right: 20px; background-color: rgba(0, 0, 0, 0.7); color: #2ddf0f; padding: 10px 15px; border-radius: 8px; font-size: 0.6rem; z-index: 10; }
JS
Copy
document.addEventListener('DOMContentLoaded', function () { const items = document.querySelectorAll('.item'); const textDisplay = document.querySelector('.text-display'); const sessionCodeElement = document.getElementById('sessionCode'); function generateSessionCode() { const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'; let code = ''; for (let i = 0; i < 4; i++) { const randomIndex = Math.floor(Math.random() * chars.length); code += chars[randomIndex]; } sessionCodeElement.innerHTML = `${code}`; } generateSessionCode(); items.forEach(item => { item.addEventListener('mouseenter', () => { const text = item.getAttribute('data-text'); textDisplay.innerHTML = text; items.forEach(i => i.classList.remove('highlighted')); item.classList.add('highlighted'); }); }); });
