<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <div class="faaliyetler container-fluid"> <div class="faaliyetler-ic container"> <div class="baslik text-center"> <h2>Faaliyetler</h2> </div> <div class="icerik"> <div class="row"> <div class="col-md-3"> <div class="panel panel-default"> <div class="panel-heading">Faaliyet Alanı 1</div> <div class="panel-body">Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir. Lorem Ipsum kullanmanın amacıdır.</div>, <div class="panel-footer"> <div class="clearfix"> <a class="devam pull-right" href="#">Devamı</a> </div> </div> </div> </div> <div class="col-md-3"> <div class="panel panel-default"> <div class="panel-heading">Faaliyet Alanı 1</div> <div class="panel-body">Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir. Lorem Ipsum kullanmanın amacıdır.</div>, <div class="panel-footer"> <div class="clearfix"> <a class="devam pull-right" href="#">Devamı</a> </div> </div> </div> </div> <div class="col-md-3"> <div class="panel panel-default"> <div class="panel-heading">Faaliyet Alanı 1</div> <div class="panel-body">Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir. Lorem Ipsum kullanmanın amacıdır.</div>, <div class="panel-footer"> <div class="clearfix"> <a class="devam pull-right" href="#">Devamı</a> </div> </div> </div> </div> <div class="col-md-3"> <div class="panel panel-default"> <div class="panel-heading">Faaliyet Alanı 1</div> <div class="panel-body">Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir. Lorem Ipsum kullanmanın amacıdır.</div>, <div class="panel-footer"> <div class="clearfix"> <a class="devam pull-right" href="#">Devamı</a> </div> </div> </div> </div> <div class="col-md-3"> <div class="panel panel-default"> <div class="panel-heading">Faaliyet Alanı 1</div> <div class="panel-body">Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir. Lorem Ipsum kullanmanın amacıdır.</div>, <div class="panel-footer"> <div class="clearfix"> <a class="devam pull-right" href="#">Devamı</a> </div> </div> </div> </div> <div class="col-md-3"> <div class="panel panel-default"> <div class="panel-heading">Faaliyet Alanı 1</div> <div class="panel-body">Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir. Lorem Ipsum kullanmanın amacıdır.</div>, <div class="panel-footer"> <div class="clearfix"> <a class="devam pull-right" href="#">Devamı</a> </div> </div> </div> </div> <div class="col-md-3"> <div class="panel panel-default"> <div class="panel-heading">Faaliyet Alanı 1</div> <div class="panel-body">Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir. Lorem Ipsum kullanmanın amacıdır.</div>, <div class="panel-footer"> <div class="clearfix"> <a class="devam pull-right" href="#">Devamı</a> </div> </div> </div> </div> <div class="col-md-3"> <div class="panel panel-default"> <div class="panel-heading">Faaliyet Alanı 1</div> <div class="panel-body">Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir. Lorem Ipsum kullanmanın amacıdır.</div>, <div class="panel-footer"> <div class="clearfix"> <a class="devam pull-right" href="#">Devamı</a> </div> </div> </div> </div> </div> </div> </div> </div>

.faaliyetler { background: url('/resimler/faaliyet-bg.png') top center no-repeat; } .faaliyetler .faaliyetler-ic {} .faaliyetler .faaliyetler-ic .baslik { padding: 10px 0 50px 0; } .faaliyetler .faaliyetler-ic .baslik h2 { font-weight: 800; text-transform: uppercase; color: #4e4e4e; font-size: 23px; } .faaliyetler .faaliyetler-ic .icerik {} .faaliyetler .faaliyetler-ic .icerik .panel { cursor: pointer; } .faaliyetler .faaliyetler-ic .icerik .panel:hover .panel-footer { background: #777; } .faaliyetler .faaliyetler-ic .icerik .panel:hover a.devam { background: #f2565a !important; } .faaliyetler .faaliyetler-ic .icerik .panel-default { margin-bottom: 30px; } .faaliyetler .faaliyetler-ic .icerik .panel-default .panel-heading { background: #f2565a; color: #fff; font-size: 18px; font-weight: 800; } .faaliyetler .faaliyetler-ic .icerik .panel-default .panel-body {} .faaliyetler .faaliyetler-ic .icerik .panel-default .panel-footer { box-shadow: none; border: none; } .faaliyetler .faaliyetler-ic .icerik .panel-default .panel-footer a.devam { background: #777; color: #fff; padding: 4px 15px; font-size: 14px; text-transform: uppercase; font-weight: 700; border-radius: 200px; } .faaliyetler .faaliyetler-ic .icerik .panel-default .panel-footer a.devam:hover { background: #3e3e3e; }