<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<div class="container" >
<div class="row" >
<div class="col-sm-9 col-md-9">
<div class="well">
<iframe width="800 " height="580" style="margin: 0 auto;" src="//v.calameo.com/?bkcode=006172870d14057a08502" frameborder="0" scrolling="no" allowtransparency="" allowfullscreen="allowfullscreen"></iframe>
</div>
</div>
<div class="col-sm-3 col-md-3">
<div class="panel-group" id="accordion" >
<div class="panel panel-default" >
<div class="panel-heading" >
<h4 class="panel-title" >
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="glyphicon glyphicon-folder-close" >
</span>Online İşlemler</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<table class="table">
<tr>
<td>
<span class="glyphicon glyphicon-pencil text-primary"></span><a href="https://ekaski.websitecim.com/odeme">Online Ödeme</a>
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-flash text-success"></span><a href="https://ekaski.websitecim.com/muracaat">Online Abonelik İşlemleri</a>