2

Create a Chatbox UI Template using HTML and CSS

 5 months ago
source link: https://www.geeksforgeeks.org/create-a-chatbox-ui-template-using-html-and-css/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Create a Chatbox UI Template using HTML and CSS

Discuss
Courses

Real-time chat applications are designed to provide a responsive and interactive experience, where messages are delivered and displayed immediately as they are sent. This means that users can engage in conversations and receive updates in real-time, without significant delays.

In the chat application UI, received messages display left aligned and sent messages display right aligned. Also, the avatar image (or image) is displayed before the sent and received messages. Here, we will design a Chatbox UI using HTML and CSS.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<style>
.chat-container {
max-width: 600px;
margin: 50px auto;
background-color: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.message-container {
display: flex;
flex-direction: column;
}
.message {
padding: 10px;
margin: 10px;
border-radius: 5px;
max-width: 70%;
word-wrap: break-word;
display: flex;
align-items: center;
}
.sender-message {
background-color: #e0e0e0;
color: #000;
align-self: flex-start;
}
.receiver-message {
background-color: #4CAF50;
color: #fff;
align-self: flex-end;
}
.avatar {
width: 30px;
height: 30px;
border-radius: 50%;
margin-right: 10px;
}
.message input {
width: calc(100% - 20px);
padding: 8px;
margin: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
.message button {
padding: 8px;
margin: 10px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
<title>Chat Template UI using HTML and CSS</title>
</head>
<body>
<div class="chat-container">
<div class="message-container">
<div class="message sender-message">
<img src=
alt="Sender Avatar"
class="avatar">
Hello there!
</div>
<div class="message receiver-message">
<img src=
alt="Receiver Avatar" 
class="avatar">
Hi! How can I help you today?
</div>
<div class="message sender-message">
<img src=
alt="Sender Avatar"
class="avatar">
I have a question about your products.
</div>
<div class="message receiver-message">
<img src=
alt="Receiver Avatar" 
class="avatar">
Sure, feel free to ask!
</div>
</div>
<div class="message">
<input type="text" 
placeholder="Type your message...">
<button>Send</button>
</div>
</div>
</body>
</html>

Output:

Chat-template
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!
Last Updated : 13 Dec, 2023
Like Article
Save Article

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK