profile
<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>