Giới thiệu sản phẩm
Code
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Chat with Sidebar Menu</title> <link rel="stylesheet" href="styles.css"></head><style> body { font-family: Arial, sans-serif; margin: 0; background-color: #f0f2f5;}.container { display: flex; height: 100vh;}.sidebar { width: 250px; background-color: #4267b2; color: white; padding: 20px; box-shadow: 2px 0 5px rgba(0,0,0,0.1); display: flex; flex-direction: column;}.sidebar h2 { margin-top: 0;}.sidebar ul { list-style: none; padding: 0; margin: 0;}.sidebar ul li { margin: 10px 0;}.sidebar ul li a { color: white; text-decoration: none; font-size: 16px;}.sidebar ul li a:hover { text-decoration: underline;}.chat-container { flex: 1; display: flex; flex-direction: column; background-color: #fff;}.chat-header { background-color: #4267b2; color: white; padding: 10px; border-radius: 8px 8px 0 0; text-align: center;}.chat-body { flex: 1; padding: 10px; overflow-y: auto;}.message { margin-bottom: 10px; padding: 10px; border-radius: 10px; position: relative;}.message.received { background-color: #e9e9eb; align-self: flex-start;}.message.sent { background-color: #007bff; color: white; align-self: flex-end;}.message .timestamp { font-size: 0.8em; color: #888; position: absolute; bottom: 5px; right: 10px;}.chat-footer { display: flex; padding: 10px; border-top: 1px solid #ddd;}.chat-footer input { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 20px; margin-right: 10px;}.chat-footer button { background-color: #4267b2; color: white; border: none; border-radius: 20px; padding: 10px 15px; cursor: pointer;}.chat-footer button:hover { background-color: #365899;}</style><body> <div class="container"> <div class="sidebar"> <h2>Menu</h2> <ul> <li><a href="#">Home</a></li> <li><a href="#">Messages</a></li> <li><a href="#">Contacts</a></li> <li><a href="#">Settings</a></li> </ul> </div> <div class="chat-container"> <div class="chat-header"> <h2>Chat</h2> </div> <div class="chat-body"> <div class="message received"> <p>Hello! How are you?</p> <span class="timestamp">10:00 AM</span> </div> <div class="message sent"> <p>I'm good, thank you! And you?</p> <span class="timestamp">10:01 AM</span> </div> </div> <div class="chat-footer"> <input type="text" placeholder="Type a message..."> <button type="button">Send</button> </div> </div> </div></body></html>
Hình ảnh sản phẩm
Hãy bình luận để nhặt 100 thóc nhé
Sản phẩm cùng tác giả
Sản phẩm liên quan
Không có sản phẩm nào
Đăng nhập để tham gia bình luận