<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.0/css/font-awesome.min.css" />
<div class="container">
<div class="row">
<div class="accord">
<div class="panel-group" id="accordion">
<div class="panel panel-default accord1">
<div class="panel-heading" style="background-color:#fff;">
<h4 data-toggle="collapse" data-parent="#accordion" href="#collapse1" class="panel-title expand">
<div class="right-arrow pull-right"><i class="fa fa-angle-down" aria-hidden="true"></i>
</div>
<i class="fa fa-shield" aria-hidden="true"></i>
<a href="#" class="name">Sed te dolorum fuisset signiferumque, vis laoreet</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div>
</div>
</div>
<div class="panel panel-default accord2">
<div class="panel-heading" style="background-color:#fff;">
<h4 data-toggle="collapse" data-parent="#accordion" href="#collapse2" class="panel-title expand">
<div class="right-arrow pull-right"><i class="fa fa-angle-down" aria-hidden="true"></i></div>
<i class="fa fa-file-o" aria-hidden="true"></i>
<a href="#" class="name">Dicam dicunt vivendo ex cum, per graeci tritani</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div>
</div>
</div>
<div class="panel panel-default accord3">
<div class="panel-heading" style="background-color:#fff;">
<h4 data-toggle="collapse" data-parent="#accordion" href="#collapse3" class="panel-title expand">
<div class="right-arrow pull-right"><i class="fa fa-angle-down" aria-hidden="true"></i></div>
<i class="fa fa-umbrella" aria-hidden="true"></i>
<a href="#" class="name">Putent putant albucius his te, cu paulo</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div>
</div>
</div>
</div>
</div>
</div>
</div>
.accord .accord1{
padding: 0 40px 0 20px;
background-color: transparent;
border-color: #ddd;
box-shadow: 0 1px 4px 0 rgba(204,204,204,.75);
font-family: 'Poppins',sans-serif;
font-size: 24px;
}
.accord .name{
text-decoration: none;
}
.accord p{
font-size: 17px;
font-family: 'Poppins',sans-serif;
color: #000;
align-items: flex-end;
}
.accord .panel-heading{
background-color: #f5f5f5;
}
.accord .fa{
line-height: 3;
}
.accord .accord2{
padding: 0 40px 0 20px;
background-color: transparent;
border-color: #ddd;
box-shadow: 0 1px 4px 0 rgba(204,204,204,.75);
font-family: 'Poppins',sans-serif;
font-size: 24px;
}
.accord .accord3{
padding: 0 40px 0 20px;
background-color: transparent;
border-color: #ddd;
box-shadow: 0 1px 4px 0 rgba(204,204,204,.75);
font-family: 'Poppins',sans-serif;
font-size: 24px;
}
