WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Virtual Keyboard HTML CSS JavaScript
665
Ghufron
Open In Editor
Publish Your Code
Recommended
20 September 2025
CSS Sphere Animation HTML Example
16 November 2023
CSS OTP Page
30 June 2023
Responsive CSS Navbar
HTML
Copy
Keyboard and Monitor
CSS
Copy
* { margin: 0; padding: 0; font-weight: bold; outline: none; cursor: pointer; } body { background: #a3b1c6; display: flex; height: 100vh; align-items: center; justify-content: center; } .container { width: 950px; display: flex; justify-content: center; align-items: center; height: 800px; position: absolute; } .monitor { height: 300px; width: 500px; background: #a3b1c6; border: 10px solid #a3b1c6; position: absolute; top: 5vh; box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.3), -8px -8px 15px rgba(245, 345, 245, 0.25), 8px 8px 15px rgba(0, 0, 0, 0.25) inset; border-radius: 20px; text-align: center; font-size: 30px; } .keyboard { height: 350px; width: 850px; box-shadow: 5px 5px 15px rgba(107, 188, 238, 0.3), -8px -8px 15px rgba(245, 245, 245, 0.25); display: flex; justify-content: center; flex-direction: column; align-items: center; padding: 10px; border-radius: 20px; position: relative; top: 22vh; } .keyboard input { height: 60px; width: 60px; box-shadow: 3px 3px 15px rgba(6, 106, 121, 0.3), -5px -5px 10px rgba(245, 245, 245, 0.25); border: 5px solid #a3b1c6; margin: 10px; border-radius: 10px; background:rgba(6, 120, 149, 0.81); font-size: 23px; } .keyboard input:focus{ color: white; box-shadow: 5px 5px 15px rgba(110, 191, 235, 0.3), -8px -8px 15px rgba(245, 245, 245, 0.25), 5px 5px 15px rgba(0, 0, 0, 0.25) inset; } .keyboard .spacebar { width: 300px; } .keyboard .backspace { width: 120px; font-size: 19px; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */