Community

<!DOCTYPE html> <html> <head> <title>Chat Group</title> <style> /* Basic chat-like interface style */ .chat-container { width: 100%; max-width: 800px; margin: 0 auto; background-color: #f9f9f9; border: 1px solid #ddd; padding: 20px; } .chat-message { background-color: #fff; border: 1px solid #ccc; border-radius: 5px; margin-bottom: 10px; padding: 10px; } .user-avatar { width: 40px; height: 40px; border-radius: 50%; margin-right: 10px; } .message-content { font-size: 16px; } .chat-input { display: flex; align-items: center; margin-top: 20px; } .chat-input input[type=”text”] { flex: 1; padding: 10px; border: 1px solid #ccc; border-radius: 5px; } .chat-input button { background-color: #007bff; color: #fff; border: none; border-radius: 5px; padding: 10px 20px; cursor: pointer; } </style> </head> <body> <div class=”chat-container”> <div class=”chat-message”> <img src=”https://landscapeuganda.com/” alt=”User Avatar” class=”user-avatar”> <div class=”message-content”> <p><strong>User123:</strong> Hello, how are you?</p> </div> </div> <div class=”chat-message”> <img src=”user-avatar.jpg” alt=”User Avatar” class=”user-avatar”> <div class=”message-content”> <p><strong>User456:</strong> I’m doing great, thanks!</p> </div> </div> <!– More chat messages here –> <div class=”chat-input”> <input type=”text” placeholder=”Type your message”> <button>Send</button> </div> </div> </body> </html>
× Reach a designer!