<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="container">
<section class="row">
<div class="col-md-2 dairesel">
<img src="https://avatars0.githubusercontent.com/u/37827216?s=460&u=d34d46d156e01cf8af6ab9c62fddf06424eec20a&v=4" draggable="false" class="_2goTk _1Jdop _3Whw5" style="visibility: visible;">
<h4>Mert Can Altın</h4>
<nav class="navbar navbar-light bg-light">
<form class="form-inline">
<input class="form-control mr-sm-2 bg-light " type="search" placeholder="Ara veya yeni bir sohbet başlat" aria-label="Search">
</form>
</nav>
<ul class="list-unstyled">
<li class="media my-4">
<img class="mr-3" src="https://media-exp1.licdn.com/dms/image/C4D03AQEmegXBSbVoLw/profile-displayphoto-shrink_100_100/0?e=1609977600&v=beta&t=1l-ztjLb2eN6H7H8oMffzrUJbdD4L8_Lv3rcGI_Kwd8" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1">Yasin Kaya</h5>
ajansnovart.com
</div>
</li>
<li class="media my-4">
<img class="mr-3" src="https://i.pinimg.com/280x280_RS/7e/4e/6c/7e4e6c03d1eaee4d751f76c96e481e29.jpg" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1">Ferhat Üzüm</h5>
Merhaba mert !
</div>
</li>
<li class="media">
<img class="mr-3" src="https://yt3.ggpht.com/a/AATXAJzeEZdJx1h9afBD51d1kmZfzB-76UlmVhHYhH_x=s900-c-k-c0x00ffffff-no-rj" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1">Ajans Novart</h5>
Bootstrap deneme
</li>
</ul>
</div>
<div class="col-md-2 ikon">
<span><div class="PVMjB"><div aria-disabled="false" role="button" tabindex="0" title="Durum"><span data-testid="status-v3" data-icon="status-v3" class=""><svg id="ee51d023-7db6-4950-baf7-c34874b80976" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="currentColor" d="M12 20.664a9.163 9.163 0 0 1-6.521-2.702.977.977 0 0 1 1.381-1.381 7.269 7.269 0 0 0 10.024.244.977.977 0 0 1 1.313 1.445A9.192 9.192 0 0 1 12 20.664zm7.965-6.112a.977.977 0 0 1-.944-1.229 7.26 7.26 0 0 0-4.8-8.804.977.977 0 0 1 .594-1.86 9.212 9.212 0 0 1 6.092 11.169.976.976 0 0 1-.942.724zm-16.025-.39a.977.977 0 0 1-.953-.769 9.21 9.21 0 0 1 6.626-10.86.975.975 0 1 1 .52 1.882l-.015.004a7.259 7.259 0 0 0-5.223 8.558.978.978 0 0 1-.955 1.185z"></path></svg></span></div><span></span></div><div class="PVMjB"><div aria-disabled="false" role="button" tabindex="0" title="Yeni sohbet"><span data-testid="chat" data-icon="chat" class=""><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="currentColor" d="M19.005 3.175H4.674C3.642 3.175 3 3.789 3 4.821V21.02l3.544-3.514h12.461c1.033 0 2.064-1.06 2.064-2.093V4.821c-.001-1.032-1.032-1.646-2.064-1.646zm-4.989 9.869H7.041V11.1h6.975v1.944zm3-4H7.041V7.1h9.975v1.944z"></path></svg></span></div><span></span></div><div class="PVMjB"><div aria-disabled="false" role="button" tabindex="0" title="Diğer seçenekler"><span data-testid="menu" data-icon="menu" class=""><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="currentColor" d="M12 7a2 2 0 1 0-.001-4.001A2 2 0 0 0 12 7zm0 2a2 2 0 1 0-.001 3.999A2 2 0 0 0 12 9zm0 6a2 2 0 1 0-.001 3.999A2 2 0 0 0 12 15z"></path></svg></span></div><span></span></div></span>
</div>
<div class="col-md-8">
<div class="card">
<div class="card-header">
Mesajlar
</div>
<div class=" d-flex justify-content-center">
<div class="mesgs">
<div class="msg_history">
<div class="incoming_msg">
<div class="incoming_msg_img dairesel"> <img src="https://yt3.ggpht.com/a/AATXAJzeEZdJx1h9afBD51d1kmZfzB-76UlmVhHYhH_x=s900-c-k-c0x00ffffff-no-rj" alt="sunil"> </div>
<div class="received_msg">
<div class="received_withd_msg">
<p>Merhaba Bugün nasılsın ? umarım daha iyisindir</p>
<span class="time_date"> 11:01 Akşam | haziran 15</span></div>
</div>
</div>
<div class="outgoing_msg">
<div class="sent_msg">
<p>Merhaba Bugün nasılsın ? umarım daha iyisindir</p>
<span class="time_date"> 11:01 Akşam | temmuz 9</span> </div>
</div>
<div class="incoming_msg">
<div class="incoming_msg_img dairesel"> <img src="https://yt3.ggpht.com/a/AATXAJzeEZdJx1h9afBD51d1kmZfzB-76UlmVhHYhH_x=s900-c-k-c0x00ffffff-no-rj" alt="sunil"> </div> <div class="received_msg">
<div class="received_withd_msg">
<p>Merhaba Bugün nasılsın ? umarım daha iyisindir</p>
<span class="time_date"> 11:01 Akşam | Öğleden Sonra</span></div>
</div>
</div>
<div class="outgoing_msg">
<div class="sent_msg">
<p>Merhaba Bugün nasılsın ? umarım daha iyisindir</p>
<span class="time_date"> 11:01 Akşam | Bugün</span> </div>
</div>
<div class="incoming_msg">
<div class="incoming_msg_img dairesel"> <img src="https://yt3.ggpht.com/a/AATXAJzeEZdJx1h9afBD51d1kmZfzB-76UlmVhHYhH_x=s900-c-k-c0x00ffffff-no-rj" alt="sunil"> </div> <div class="received_msg">
<div class="received_withd_msg">
<p>Merhaba Bugün nasılsın ? umarım daha iyisindir</p>
<span class="time_date"> 11:01 Akşam | Dün</span></div>
</div>
</div>
</div>
</div>
</div>
<div class="chat">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Gönder</span>
</div>
<textarea placeholder="Hey hadi buraya bir şeyler yaz !" class="form-control" aria-label="With textarea"></textarea>
</div>
</div>
</div>
</section>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</html>
.dairesel img{
width: 60px;
height: 60px;
border-radius: 175px;
border-color: #ecf0f1;
border-width: 8px;
border-style: solid;
margin-top: 15px;
}
img{ max-width:100%;}
.inbox_people {
background: #f8f8f8 none repeat scroll 0 0;
float: left;
overflow: hidden;
width: 40%; border-right:1px solid #c4c4c4;
}
.inbox_msg {
border: 1px solid #c4c4c4;
clear: both;
overflow: hidden;
}
.top_spac{ margin: 20px 0 0;}
.recent_heading {float: left; width:40%;}
.srch_bar {
display: inline-block;
text-align: right;
width: 60%; padding:
}
.headind_srch{ padding:10px 29px 10px 20px; overflow:hidden; border-bottom:1px solid #c4c4c4;}
.recent_heading h4 {
color: #05728f;
font-size: 21px;
margin: auto;
}
.srch_bar input{ border:1px solid #cdcdcd; border-width:0 0 1px 0; width:80%; padding:2px 0 4px 6px; background:none;}
.srch_bar .input-group-addon button {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: medium none;
padding: 0;
color: #707070;
font-size: 18px;
}
.srch_bar .input-group-addon { margin: 0 0 0 -27px;}
.chat_ib h5{ font-size:15px; color:#464646; margin:0 0 8px 0;}
.chat_ib h5 span{ font-size:13px; float:right;}
.chat_ib p{ font-size:14px; color:#989898; margin:auto}
.chat_img {
float: left;
width: 11%;
}
.chat_ib {
float: left;
padding: 0 0 0 15px;
width: 88%;
}
.chat_people{ overflow:hidden; clear:both;}
.chat_list {
border-bottom: 1px solid #c4c4c4;
margin: 0;
padding: 18px 16px 10px;
}
.inbox_chat { height: 550px; overflow-y: scroll;}
.active_chat{ background:#ebebeb;}
.incoming_msg_img {
display: inline-block;
width: auto;
}
.received_msg {
display: inline-block;
padding: 0 0 0 10px;
vertical-align: top;
width: 92%;
}
.received_withd_msg p {
background: #ebebeb none repeat scroll 0 0;
border-radius: 3px;
color: #646464;
font-size: 14px;
margin: 0;
padding: 5px 10px 5px 12px;
width: 100%;
}
.time_date {
color: #747474;
display: block;
font-size: 12px;
margin: 8px 0 0;
}
.received_withd_msg { width: 57%;}
.mesgs {
float: left;
padding: 30px 15px 0 25px;
width: 60%;
}
.sent_msg p {
background: #dbf8c6 none repeat scroll 0 0;
border-radius: 3px;
font-size: 14px;
margin: 0; color:#303030;
padding: 5px 10px 5px 12px;
width:100%;
}
.outgoing_msg{ overflow:hidden; margin:26px 0 26px;}
.sent_msg {
float: right;
width: 46%;
}
.input_msg_write input {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: medium none;
color: #4c4c4c;
font-size: 15px;
min-height: 48px;
width: 100%;
}
.type_msg {border-top: 1px solid #c4c4c4;position: relative;}
.msg_send_btn {
background: #05728f none repeat scroll 0 0;
border: medium none;
border-radius: 50%;
color: #fff;
cursor: pointer;
font-size: 17px;
height: 33px;
position: absolute;
right: 0;
top: 11px;
width: 33px;
}
.messaging { padding: 0 0 50px 0;}
.msg_history {
margin-right: : -90px;
height: 539px;
overflow-y: auto;
}
.form-inline .form-control {
display: inline-block;
width: 328px !important;
vertical-align: middle;
}
.chat{
background-image: url("");
background-image: url("https://cdn.hipwallpaper.com/i/53/27/2GIK4Z.png");
background-color: #cccccc;
}
.bg-light {
background-color: #ededed!important;
}
.ikon span {
margin-top: 15px;
display: flex;
align-items: center;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.