<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!--Designed and written by Harsh Aryan -->
<!DOCTYPE html>
<html>
<head>
<link href="" rel="icon">
<link href="" rel="apple-touch-icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700,700i|Montserrat:300,400,500,700" rel="stylesheet">
<!-- Bootstrap CSS File -->
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Libraries CSS Files -->
<link href="lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="lib/animate/animate.min.css" rel="stylesheet">
<link href="lib/ionicons/css/ionicons.min.css" rel="stylesheet">
<link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
<link href="lib/lightbox/css/lightbox.min.css" rel="stylesheet">
<!-- Main Stylesheet File -->
</head>
<body>
<!--==========================
Chats
============================-->
<section id="chatsys" class="chatsys-bg">
<div class="container" style="margin-bottom: 100px;">
<header class="section-header">
<h3>Chats - Designed by Harsh Aryan</h3>
</header>
<br>
<div class="row">
<div class="col-md-12 col-lg-12 wow " data-wow-duration="1.4s" style="padding:0px;">
<div class="box" style="background-color: #00366f;width: 70%;margin: auto;">
<div class="col-md-12 col-lg-12 wow " data-wow-duration="1.4s" style="padding:0px;">
<div class="box">
<div class="profimg"><img src="img/account.png" style="width: 50px; height: 50px;"><a href="accdet.html" style="margin-left: 5%; color: black; font-size: 18px;font-weight: bold;">Harsh Aryan</a>
<!-- Use a profile image here -->
</div>
</div>
</div>
<div class="col-md-12 col-lg-12 wow " data-wow-duration="1.4s" style="padding:0px;">
<div class="box" style="height: auto;overflow-y: scroll;max-height: 500px;">
<li style="list-style-type: none;"><div class="sent text-right">Hey man this is best thing.<BR><small>12:09AM</small></div></li><br><br><br>
<li style="list-style-type: none;"><div class="income float-left">Hey man this is best thing.<BR><small>12:09AM</small></div></li><br><br><br>
<li style="list-style-type: none;"><div class="sent text-right">Hey man this is best thing.<BR><small>12:09AM</small></div></li><br><br><br>
<li style="list-style-type: none;"><div class="income float-left">Hey man this is best thing.<BR><small>12:09AM</small></div></li><br><br><br>
<li style="list-style-type: none;"><div class="sent text-right">Hey man this is best thing.<BR><small>12:09AM</small></div></li><br><br><br>
<li style="list-style-type: none;"><div class="sent text-right">Hey man this is best thing.<BR><small>12:09AM</small></div></li><br><br><br>
<li style="list-style-type: none;"><div class="income float-left">Hey man this is best thing.<BR><small>12:09AM</small></div></li><br><br><br>
<li style="list-style-type: none;"><div class="sent text-right">Hey man this is best thing.<BR><small>12:09AM</small></div></li><br><br><br>
<li style="list-style-type: none;"><div class="income float-left">Hey man this is best thing.<BR><small>12:09AM</small></div></li><br><br><br>
<li style="list-style-type: none;"><div class="sent text-right">Hey man this is best thing.<BR><small>12:09AM</small></div></li><br><br><br>
<li style="list-style-type: none;"><div class="sent text-right">Hey man this is best thing.<BR><small>12:09AM</small></div></li><br><br><br>
<li style="list-style-type: none;"><div class="income float-left">Hey man this is best thing.<BR><small>12:09AM</small></div></li><br><br><br>
<li style="list-style-type: none;"><div class="sent text-right">Hey man this is best thing.<BR><small>12:09AM</small></div></li><br><br><br>
<li style="list-style-type: none;"><div class="income float-left">Hey man this is best thing.<BR><small>12:09AM</small></div></li><br><br><br>
<li style="list-style-type: none;"><div class="sent text-right">Hey man this is best thing.<BR><small>12:09AM</small></div></li><br><br><br>
<li style="list-style-type: none;"><div class="sent text-right">Hey man this is best thing.<BR><small>12:09AM</small></div></li><br><br><br>
<li style="list-style-type: none;"><div class="income float-left">Hey man this is best thing.<BR><small>12:09AM</small></div></li><br><br><br>
<li style="list-style-type: none;"><div class="sent text-right">Hey man this is best thing.<BR><small>12:09AM</small></div></li><br><br><br>
<li style="list-style-type: none;"><div class="income float-left">Hey man this is best thing.<BR><small>12:09AM</small></div></li><br><br><br>
<li style="list-style-type: none;"><div class="sent text-right">Hey man this is best thing.<BR><small>12:09AM</small></div></li><br><br><br>
</div>
<div class="col-md-12 col-lg-12 wow bounceInUp" data-wow-duration="1.4s" style="padding:0px;">
<div class="box">
<div class="fom">
<form action="#" method="get">
<input type="text" class="col-lg-11 col-md-11 col-sm-11" style="height: auto;width: 90%;padding: 10px;" placeholder="Write your message here!">
<button class="btn btn-primary col-lg-1 col-md-1 col-sm-1" style="margin: auto;float: right;padding:10px"><i class="fa fa-send"></i>Send</button>
<!-- In send button i am using <i class="fa fa-send"></i> but its not working here but it will work on your server or system-->
</form>
</div>
</div>
<a href="#" style="float: left;color: white; font-size:20px; font-weight: bolder;" class=" col-lg-12 text-center">BACK</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<style>
.income{
float: left;
padding: 10px;
width: auto;
height: 20px auto;
background-color: pink;
border-left: 5px solid deeppink;
}
.sent{
float: right;
padding: 10px;
width: auto;
height: 20px auto;
background-color: aqua;
border-right: 5px solid dodgerblue;
}
</style>
</body>
</html>
body {
background: #fff;
color: #444;
font-family: "Open Sans", sans-serif;
}
@media (min-width: 992px){
.search-sec{
position: relative;
top: -114px;
background: rgba(26, 70, 104, 0.51);
}
}
@media (max-width: 992px){
.search-sec{
background: #1A4668;
}
}
a {
color: #007bff;
transition: 0.5s;
}
a:hover,
a:active,
a:focus {
color: #0b6bd3;
outline: none;
text-decoration: none;
}
p {
padding: 0;
margin: 0 0 30px 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Montserrat", sans-serif;
font-weight: 400;
margin: 0 0 20px 0;
padding: 0;
}
.section-header h3 {
font-size: 36px;
color: #283d50;
text-align: center;
font-weight: 500;
position: relative;
}
.section-header p {
text-align: center;
margin: auto;
font-size: 15px;
padding-bottom: 60px;
color: #556877;
width: 50%;
}
.chatsys-bg {
background: #ecf5ff;
}
#chatsys {
padding: 60px 0 40px 0;
box-shadow: inset 0px 0px 12px 0px rgba(0, 0, 0, 0.1);
}
#chatsys .box {
padding: 30px;
position: relative;
overflow: hidden;
border-radius: 10px;
margin: 0 5px 20px 5px;
background: #fff;
box-shadow: 0 10px 29px 0 rgba(68, 88, 144, 0.1);
transition: all 0.3s ease-in-out;
padding: 20px;
}
#chatsys .icon {
border: 2px solid black;
position: absolute;
left: 10px;
top: 7%;
}
#services .icon i {
font-size: 64px;
line-height: 1;
transition: 0.5s;
}
#chatsys .title {
margin-left: 40px;
font-weight: 700;
margin-bottom: 15px;
font-size: 18px;
}
#chatsys .title a {
color: #111;
}
#chatsys .box:hover .title a {
color: #007bff;
}
#chatsys .description {
font-size: 14px;
margin-left: 40px;
line-height: 24px;
margin-bottom: 0;
}
