WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
1475
logicaldata497
Im Editor öffnen
Veröffentlichen Sie Ihren Code
Brauchen Sie eine Website?
Empfohlen
12 July 2025
CSS-Karten-Leuchteffekt
13 June 2025
Ein Code von 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) */
