WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Un código de alejandrokundrah
1137
alejandrokundrah
Abrir en el editor
Publica tu código
Recomendado
30 November 2024
Menú del sitio
25 August 2024
Efecto de desplazamiento de GSAP
13 June 2025
Un código de Metehan
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) */