Quay lại-
2
-
0
-
FacebookGiớ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ãy bình luận để nhặt 100 thóc nhé
Sản phẩm cùng tác giả
-
Nhà sáng tạo Đoàn Chính LiêmShopping -
Nhà sáng tạo Đoàn Chính LiêmTrang web bán hàng -
Nhà sáng tạo Đoàn Chính LiêmChat Room
Đăng nhập để tham gia bình luận