129 lines
4.1 KiB
HTML
129 lines
4.1 KiB
HTML
<html>
|
|
<head>
|
|
<title>Chat Box UI Design</title>
|
|
<link rel="stylesheet" href="styles.css" />
|
|
|
|
<!-- Import this CDN to use icons -->
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"
|
|
/>
|
|
</head>
|
|
|
|
<body>
|
|
<!-- Main container -->
|
|
<div class="container">
|
|
<!-- msg-header section starts -->
|
|
<div class="msg-header">
|
|
<div class="container1">
|
|
<img src="user1.png" class="msgimg" />
|
|
<div class="active">
|
|
<p>User name</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- msg-header section ends -->
|
|
|
|
<!-- Chat inbox -->
|
|
<div class="chat-page">
|
|
<div class="msg-inbox">
|
|
<div class="chats">
|
|
<!-- Message container -->
|
|
<div class="msg-page">
|
|
<!-- Incoming messages -->
|
|
|
|
<div class="received-chats">
|
|
<div class="received-chats-img">
|
|
<img src="user2.png" />
|
|
</div>
|
|
<div class="received-msg">
|
|
<div class="received-msg-inbox">
|
|
<p>
|
|
Hi !! This is message from Riya . Lorem ipsum, dolor sit
|
|
amet consectetur adipisicing elit. Non quas nemo eum,
|
|
earum sunt, nobis similique quisquam eveniet pariatur
|
|
commodi modi voluptatibus iusto omnis harum illum iste
|
|
distinctio expedita illo!
|
|
</p>
|
|
<span class="time">18:06 PM | July 24</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Outgoing messages -->
|
|
<div class="outgoing-chats">
|
|
<div class="outgoing-chats-img">
|
|
<img src="user1.png" />
|
|
</div>
|
|
<div class="outgoing-msg">
|
|
<div class="outgoing-chats-msg">
|
|
<p class="multi-msg">
|
|
Hi riya , Lorem ipsum dolor sit amet consectetur
|
|
adipisicing elit. Illo nobis deleniti earum magni
|
|
recusandae assumenda.
|
|
</p>
|
|
<p class="multi-msg">
|
|
Lorem ipsum dolor sit amet consectetur.
|
|
</p>
|
|
|
|
<span class="time">18:30 PM | July 24</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="received-chats">
|
|
<div class="received-chats-img">
|
|
<img src="user2.png" />
|
|
</div>
|
|
<div class="received-msg">
|
|
<div class="received-msg-inbox">
|
|
<p class="single-msg">
|
|
Hi !! This is message from John Lewis. Lorem ipsum, dolor
|
|
sit amet consectetur adipisicing elit. iste distinctio
|
|
expedita illo!
|
|
</p>
|
|
<span class="time">18:31 PM | July 24</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="outgoing-chats">
|
|
<div class="outgoing-chats-img">
|
|
<img src="user1.png" />
|
|
</div>
|
|
<div class="outgoing-msg">
|
|
<div class="outgoing-chats-msg">
|
|
<p>
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
|
Velit, sequi.
|
|
</p>
|
|
|
|
<span class="time">18:34 PM | July 24</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- msg-bottom section -->
|
|
|
|
<div class="msg-bottom">
|
|
<div class="input-group">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
placeholder="Write message..."
|
|
/>
|
|
|
|
<span class="input-group-text send-icon">
|
|
<i class="bi bi-send"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|
|
|
|
|
|
|