WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
1634
logicaldata497
Abrir no Editor
Publique Seu Código
Recomendado
17 April 2025
Um código de Metehan
HTML
Copy
<!DOCTYPE html> <html lang="en"> <body> <div class="card"> <div class="chat-header">Chat</div> <div class="chat-window"> <ul class="message-list"></ul> </div> <div class="chat-input"> <input type="text" class="message-input" placeholder="Type your message here"> <button class="send-button">Send</button> </div> </div> </body> </html>
CSS
Copy
body{ display:flex; height:100vh; justify-content:center; align-items:center; background:black; overflow:hidden; } .card { width: 400px; background-color: #212121; border-radius: 5px; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); } .chat-header { background-color: #171717; color: #fff; padding: 10px; font-size: 18px; border-top-left-radius: 5px; border-top-right-radius: 5px; } .chat-window { height: 220px; overflow:hidden; } .message-list { list-style: none; margin: 0; padding: 0; } .chat-input { display: flex; align-items: center; padding: 10px; background-color: #2f2f2f; border-radius:5px; } .message-input { flex: 1; border: none; outline: none; padding: 5px; font-size: 14px; background-color: #2f2f2f; color:white; } .send-button { border: none; border-radius:5px; outline: none; background-color: #676767; color: #fff; font-size: 14px; padding: 5px 10px; cursor: pointer; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */
