Cacher is the code snippet organizer for pro developers

<link href="https://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" />
<link href="https://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet" />

body{
  background :url('https://secure.gravatar.com/bg/12644612/af6a767d734b064b41a323094ba03aab');
  background-size:cover;
  font-size:16px;
  line-height:25px;
}

.container .accordion{
  width: 400px;
  margin :100px auto;
  color : #fff;
  borer-radius:15px;
  background :#222930;
  box-shadow: 0px 0px 2px 5px rgba(34, 41, 48, .3);
  border: 1px solid #222930;
}

.container .accordion-group{
  background :#383C47;
  border:none;
}

.container .accordion-heading{
  background :#383C47;
  border-bottom:none;
  padding :5px;
}

.container .accordion-heading a{
  color: #BECAD5;
  text-decoration:none;
}

.container .accordion-heading span{
   float:right;
  margin-top:3px;
  color:#333
}

.profile{
  width:80px;
  margin: 10px;
  display:inline-block;
}

.info{
  width: 200px;
  margin:10px;
  display:inline-block;
}

.name{
  font-weight: bold;
  color:#5A9BC9;
}

.details{
  color:
}
.message{
  padding:3px;
  border-bottom:1px solid #5A9BC9;
  min-height:40px;
}
.msg-pic{
  width:30px;
  float :left;
  margin:5px 10px;
}
.msg-desc{
  width:310px;
  display:inline-block;
}

.container .accordion-body{
  background :#222930;
  box-shadow: 0px 0px 7px #0F1316 inset;
}

.container .accordion-inner{
  border:none;
  font-size:14px;
  line-height:22px;
  color: #6388A3;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://getbootstrap.com/2.3.2/assets/js/bootstrap-collapse.js"></script>
<script src="https://getbootstrap.com/2.3.2/assets/js/bootstrap-button.js"></script>

$(document).ready(function(){
  $('#max').click(function(){
    alert('Logout');
  })
});

<div class="container">
<div class="accordion" id="accordion2">
                <div class="accordion-group">
                  <div class="accordion-heading">
                
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">  
                      <i class="icon-user icon-white"></i>
                        Profile
                    </a>
                  </div>
                  <div id="collapseOne" class="accordion-body collapse in">
                    <div class="accordion-inner">
                      <img class="profile" src="http://www.doyoubuzz.com/var/users/_/2016/11/15/18/1300826/avatar/1253797/avatar_cp_big.jpg?t=1521686265"></img>
                    
                    <div class="info">
                      <div class="name"> HARUN PEHLİVAN</div>
                      <div class="details">INFORMATION TECHNOLOGY FOUNDER,CEO BLOGGER</div>
                    </div>
                        <div class="desc">
                           <a href="https://harunpehlivantebimtebitagem.carrd.co" target="_blank"> FOUNDER,CEO BLOGGER</a> 
                        </div>
                     
                    </div>
                  </div>
                </div>
                <div class="accordion-group">
                  <div class="accordion-heading">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
                            <i class="icon-envelope icon-white"></i>
                      Message
                      <span class="badge badge-warning">4</span>
                    </a>
                  </div>
                  <div id="collapseTwo" class="accordion-body collapse">
                    <div class="accordion-inner">
                      <div class="message">
                         <img class="msg-pic" src="http://www.doyoubuzz.com/var/users/_/2016/11/15/18/1300826/avatar/1253797/avatar_cp_big.jpg?t=1521686265"></img>
                          <div class="msg-desc">
                          <a href="https://tr.gravatar.com/tebm" target="_blank"> Gravatar</a> 
                          <i class="icon-eye-open icon-white"></i>
                          </div>
                      </div>
                      
                       <div class="message">
                         <img class="msg-pic" src="http://www.doyoubuzz.com/var/users/_/2016/11/15/18/1300826/avatar/1253797/avatar_cp_big.jpg?t=1521686265"></img>
                          <div class="msg-desc">
                          <a href="http://www.doyoubuzz.com/harun-pehlivan" target="_blank"> E-CV</a>
                          <i class="icon-eye-open icon-white"></i>
                          </div>
                       </div>
                  
                  
                   <div class="message">
                         <img class="msg-pic" src="http://www.doyoubuzz.com/var/users/_/2016/11/15/18/1300826/avatar/1253797/avatar_cp_big.jpg?t=1521686265"></img>
                          <div class="msg-desc">
https://www.freecodecamp.org/harunpehlivan                            <i class="icon-eye-open icon-white"></i>
                          </div>
                       </div>
                  <div class="message">
                         <img class="msg-pic" src="http://www.doyoubuzz.com/var/users/_/2016/11/15/18/1300826/avatar/1253797/avatar_cp_big.jpg?t=1521686265"></img>
                          <div class="msg-desc">
HARUN PEHLİVAN INFORMATION TECHNOLOGY GROUP
                          <i class="icon-eye-open icon-white"></i>
                          </div>
                       </div>
                    
                    </div>
                  </div>
                </div>
                <div class="accordion-group">
                  <div class="accordion-heading">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
                      <i class="icon-cog icon-white"></i>
                   Setting
                    </a>
                  </div>
                  <div id="collapseThree" class="accordion-body collapse">
                    <div class="accordion-inner">
                      <a href="http://tebimtebitagem.yetkinforum.com/" target="_blank"> HARUN PEHLİVAN INFORMATION TECHNOLOGY GROUP</a>
                    </div>
                  </div>
                </div>
  <div class="accordion-group" id="max">
                  <div class="accordion-heading">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseFour">
                      <i class="icon-off icon-white"></i>
                   Logout
                    </a>
                  </div>
                  <div id="collapseFour" class="accordion-body collapse">
            </div>
        </div>
</div>
</div>