<!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;
    
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.