<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<style>
body { padding-top: 90px; }
.bg-p {
background-color: #FF745C;
}
.fa {
color: #FF745C;
}
.bg-s {
background-color: #e2e2e2;
}
.bg-i {
background-color: #f8f9fa!important;
}
.text-receive {
color: #676463;
}
.text-small {
font-size: 1rem;
}
.text-muted {
color: #e2e2e2;
}
.btn-outline-primary {
color: #676463;
border-color: #676463;
}
.messages-box,
.chat-box {
overflow-y: scroll;
margin: 10px 16px;
height: 100%;
padding-bottom: 40px !important;
overflow: auto;
}
.rounded-lg {
border-radius: 0.5rem;
}
input::placeholder {
font-size: 1rem;
color: #999;
}
</style>
<body>
<!-- Just an image -->
<nav class="navbar navbar-light bg-light fixed-top shadow-sm">
<a class="navbar-brand" href="#">
<img src="https://i.ibb.co/M5YdtLy/logo.png" width="150px" border="0"/>
<a href="#"><button type="button" class="btn btn-outline-primary btn-sm">Reset Chat</button></a>
</a>
</nav>
<div class="px-0 py-0 chat-box bg-white">
<!-- Sender Message-->
<div class="media my-3 w-75">
<div class="media-body">
<div class="bg-s rounded py-3 px-3">
<p class="text-small mb-0 text-receive">Lorem ipsum dolor sit amet.</p>
</div>
<p class="small mb-0 text-muted">Bot<span> - </span>Time</p>
</div>
</div>
<!-- Reciever Message-->
<div class="media my-3 w-75 ml-auto">
<div class="media-body">
<div class="bg-p rounded py-3 px-3 mb-0">
<p class="text-small mb-0 text-receive text-white">Lorem ipsum dolor sit amet.</p>
</div>
<p class="small mb-0 text-muted">You<span> - </span>Time</p>
</div>
</div>
<!-- Sender Message-->
<div class="media my-3 w-75">
<div class="media-body">
<div class="bg-s rounded py-3 px-3">
<p class="text-small mb-0 text-receive">Lorem ipsum, dolor sit amet consectetur adipisicing.</p>
</div>
<p class="small mb-0 text-muted">Bot<span> - </span>Time</p>
</div>
</div>
<!-- Reciever Message-->
<div class="media my-3 w-75 ml-auto">
<div class="media-body">
<div class="bg-p rounded py-3 px-3 mb-0">
<p class="text-small mb-0 text-receive text-white">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum aspernatur quae itaque!</p>
</div>
<p class="small mb-0 text-muted">You<span> - </span>Time</p>
</div>
</div>
<!-- Sender Message-->
<div class="media my-3 w-75">
<div class="media-body">
<div class="bg-s rounded py-3 px-3">
<p class="text-small mb-0 text-receive">Lorem ipsum dolor sit.</p>
</div>
<p class="small mb-0 text-muted">Bot<span> - </span>Time</p>
</div>
</div>
<!-- Reciever Message-->
<div class="media my-3 w-75 ml-auto">
<div class="media-body">
<div class="bg-p rounded py-3 px-3 mb-0">
<p class="text-small mb-0 text-receive text-white">Lorem ipsum dolor sit amet.</p>
</div>
<p class="small mb-0 text-muted">You<span> - </span>Time</p>
</div>
</div>
<!-- Sender Message-->
<div class="media my-3 w-75">
<div class="media-body">
<div class="bg-s rounded py-3 px-3">
<p class="text-small mb-0 text-receive">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem commodi ea ipsa culpa quia dicta!</p>
</div>
<p class="small mb-0 text-muted">Bot<span> - </span>Time</p>
</div>
</div>
<!-- Reciever Message-->
<div class="media my-3 w-75 ml-auto">
<div class="media-body">
<div class="bg-p rounded py-3 px-3 mb-0">
<p class="text-small mb-0 text-receive text-white">Lorem ipsum dolor sit amet.</p>
</div>
<p class="small mb-0 text-muted">You<span> - </span>Time</p>
</div>
</div>
<!-- Sender Message-->
<div class="media my-3 w-75">
<div class="media-body">
<div class="bg-s rounded py-3 px-3">
<p class="text-small mb-0 text-receive">Lorem ipsum dolor sit amet.</p>
</div>
<p class="small mb-0 text-muted">Bot<span> - </span>Time</p>
</div>
</div>
<!-- Reciever Message-->
<div class="media my-3 w-75 ml-auto">
<div class="media-body">
<div class="bg-p rounded py-3 px-3 mb-0">
<p class="text-small mb-0 text-receive text-white">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto laudantium, adipisci quibusdam rem quidem aspernatur perferendis suscipit voluptas excepturi tempora et totam? Dolorum vel numquam at tempora, et dicta laudantium!</p>
</div>
<p class="small mb-0 text-muted">You<span> - </span>Time</p>
</div>
</div>
</div>
<!-- Typing area -->
<form action="#" class="bg-light fixed-bottom shadow-lg">
<div class="input-group">
<input type="text" placeholder="Type a message" aria-describedby="button-addon2" class="form-control bg-i rounded-0 border-0 py-4 bg-s">
<div class="input-group-append">
<button id="button-addon2" type="submit" class="btn btn-link bg-i"> <i class="fa fa-paper-plane"></i></button>
</div>
</div>
</form>
</body>
</html>
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.