Responsive Chat UI with pure CSS.
HTML Code
<div class="container">
<div class="navbar">
<div>
<a href="">Home</a>
</div>
<div class="profile">
<a href="">Profile </a>
</div>
<div class="logout">
<a href="">Logout</a>
</div>
</div>
<div class="rows">
<div class="sidebar">
<div class="card">
<div class="card-header bg-info">
<img src="images/user-profile.png" alt="">
<div class="detail">
<p>Name</p>
</div>
</div>
<div class="card-body">
<div class="contact">
<a href="" class="contact-btn">
<div><img src="images/user-profile.png" alt=""></div>
<div>Name</div>
<div>7 dec</div>
</a>
</div>
<div class="contact">
<a href="#" class="contact-btn active">
<div><img src="images/user-profile.png" alt=""></div>
<div>Name</div>
<div>7 dec</div>
</a>
</div>
<div class="contact">
<a href="#" class="contact-btn">
<div><img src="images/user-profile.png" alt=""></div>
<div>Name</div>
<div>7 dec</div>
</a>
</div>
<div class="contact">
<a href="#" class="contact-btn">
<div><img src="images/user-profile.png" alt=""></div>
<div>Name</div>
<div>7 dec</div>
</a>
</div>
<div class="contact">
<a href="#" class="contact-btn">
<div><img src="images/user-profile.png" alt=""></div>
<div>Name</div>
<div>7 dec</div>
</a>
</div>
<div class="contact">
<a href="#" class="contact-btn">
<div><img src="images/user-profile.png" alt=""></div>
<div>Name</div>
<div>7 dec</div>
</a>
</div>
<div class="contact">
<a href="#" class="contact-btn">
<div><img src="images/user-profile.png" alt=""></div>
<div>Name</div>
<div>7 dec</div>
</a>
</div>
<div class="contact">
<a href="#" class="contact-btn">
<div><img src="images/user-profile.png" alt=""></div>
<div>Name</div>
<div>7 dec</div>
</a>
</div>
<div class="contact">
<a href="#" class="contact-btn">
<div><img src="images/user-profile.png" alt=""></div>
<div>Name</div>
<div>7 dec</div>
</a>
</div>
<div class="contact">
<a href="#" class="contact-btn">
<div><img src="images/user-profile.png" alt=""></div>
<div>Name</div>
<div>7 dec</div>
</a>
</div>
<div class="contact">
<a href="#" class="contact-btn">
<div><img src="images/user-profile.png" alt=""></div>
<div>Name</div>
<div>7 dec</div>
</a>
</div>
</div>
</div>
</div>
<div class="main">
<div class="card">
<div class="card-header bg-info">
<img src="images/user-profile.png" alt="">
<p>Name</p>
</div>
<div class="card-body msg-body">
<div class="media received">
<img src="images/user-profile.png" alt="">
<div class="message">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, sint?</p>
</div>
</div>
<div class="media received">
<img src="images/user-profile.png" alt="">
<div class="message">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt voluptates
molestias ut ad ex. Voluptatibus optio at hic saepe in, dolor voluptatem quos culpa
voluptate placeat. Nesciunt saepe perferendis eius.</p>
</div>
</div>
<div class="media sent">
<img src="images/user-profile.png" alt="">
<div class="message">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, sint?</p>
</div>
</div>
<div class="media received">
<img src="images/user-profile.png" alt="">
<div class="message">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, sint?</p>
</div>
</div>
<div class="media sent">
<img src="images/user-profile.png" alt="">
<div class="message">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, sint?</p>
</div>
</div>
<div class="media received">
<img src="images/user-profile.png" alt="">
<div class="message">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, sint?</p>
</div>
</div>
<div class="media sent">
<img src="images/user-profile.png" alt="">
<div class="message">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, sint?</p>
</div>
</div>
<div class="media received">
<img src="images/user-profile.png" alt="">
<div class="message">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, sint?</p>
</div>
</div>
<div class="media sent">
<img src="images/user-profile.png" alt="">
<div class="message">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, sint?</p>
</div>
</div>
<div class="media received">
<img src="images/user-profile.png" alt="">
<div class="message">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, sint?</p>
</div>
</div>
</div>
<div class="compose">
<form action="">
<textarea name="" id="" rows="1" placeholder="Type Here..."></textarea>
<button>Send</button>
<button>Like</button>
</form>
</div>
</div>
</div>
</div>
</div>
CSS Code
body {
padding: 0;
margin: 0;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serifs;
}
* {
padding: 0;
margin: 0;
}
.container {
width: 90%;
margin: auto
}
.navbar {
height: 50px;
margin-bottom: 5px;
background: #17a2b8;
border: 1px solid #17a2b8;
display: flex;
justify-content: flex-end;
border-radius: 0 0 5px 5px
}
.navbar div {
padding: 13px;
font-size: 18px;
}
.navbar div:nth-child(1) {
margin-right: auto;
font-weight: bold;
}
.navbar div a {
color: #fff;
text-decoration: none;
}
.card {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, 0.125);
border-radius: 0.25rem;
}
.card-header {
padding: 0.75rem 1.25rem;
margin-bottom: 0;
background-color: rgba(0, 0, 0, 0.03);
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
display: flex;
}
.bg-info {
background-color: #17a2b8 !important;
color: #fff;
}
.rows {
display: flex;
}
.card-header img {
width: 48px;
height: 48px;
}
.sidebar {
flex: 1 1 240px;
}
.sidebar .card-body {
max-height: 530px;
overflow-y: scroll;
}
.sidebar .card {
border-right: 0;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
.sidebar .card-header p,
.main .card-header p {
margin-top: 15px;
margin-left: 10px;
}
.sidebar .card .card-body {
border-right: 1px solid rgba(0, 0, 0, 0.125);
}
.sidebar .card-body .contact a {
height: 50px;
/*border: 1px solid #17a2b8*/
}
.sidebar .card-body .contact a img {
width: 48px;
height: 48px;
margin-right: 15px
}
.sidebar .card-body .contact .contact-btn {
padding: 10px;
display: flex;
flex-wrap: wrap;
height: 50px;
border-bottom: 1px solid #eee;
text-decoration: none;
color: #333;
}
.sidebar .card-body .contact .contact-btn div {
flex: 1
}
.sidebar .card-body .contact .contact-btn div:nth-child(2) {
flex: 4;
flex-shrink: 6;
}
.sidebar .card-body .contact .contact-btn:hover, .active {
background: #eee;
}
/*Sidebar end*/
/*msg body start*/
.main {
flex: 3 3 500px;
clear: both;
min-width: 400px;
}
.main .card {
border-left: 0px;
border-top-left-radius: 0;
border-bottom-left-radius: 0px;
}
.main .card-body {
max-height: 474px;
overflow-y: scroll
}
.media {
display: flex;
margin: 10px;
}
.main .media img {
width: 48px !important;
height: 48px;
}
.media .message {
padding: 5px 10px;
background: #eee;
}
.received .message {
border-radius: 0 10px 10px 10px;
margin-left: 10px;
}
.sent {
flex-flow: row-reverse;
}
.sent .message {
margin-right: 10px;
border-radius: 10px 0px 10px 10px;
}
.compose {
padding: 10px;
}
.compose form {
display: flex;
}
.compose form textarea {
flex: 3 3 400px;
border: 0px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
resize: none;
color: #17a2b8
}
.compose button{
flex-basis: 50px;
font-weight: bold;
border: 0px;
background: transparent;
color: #17a2b8;
cursor: pointer;
}
/*msg body end*/
@media all and (max-width:700px) {
.sidebar {
flex: 1 1 30px;
}
.sidebar .card-body .contact .contact-btn div:nth-child(2) {
display: none;
}
.sidebar .card-body .contact .contact-btn div:nth-child(3) {
display: none;
}
.sidebar .card-body .contact .contact-btn {
display: flex;
justify-content: center;
align-content: center;
margin: auto
}
.sidebar .card-header p {
display: none;
}
}
Javascript Code
$(document).ready(function () {
$(".msg-body").animate({
scrollTop: 1000
}, 2000);
console.log('ready')
})
Note!
You need to include jquery for javascript code to be workYour Suggestion is valuable for us please write down in comment box.
Post a Comment