<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 ---------->
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
</body>
<div class="container">
<div class="left-panel">
<div class="col-xs-12 col-sm-6 col-lg-8">
<div class="panel panel-default">
<div class="panel-body">
<div class="col-md-12">
<div class="thumbnail">
<a href="#"><img src="http://www.istanbluegayrimenkul.com/wp-content/uploads/2014/05/image6.jpg" alt=""/></a>
</div>
<div class="icerik-bilgi">
<a href="#"><h2>Lorem ipsum dolor sit amet</h2></a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut condimentum eget nunc quis semper. Nunc pellentesque nec libero sed viverra. Donec turpis velit, suscipit sit amet mauris quis, viverra ornare massa. Morbi tellus eros, fringilla eu sodales id, ultricies ut sapien. Duis et tristique enim, vitae mattis neque. Aliquam efficitur, dui id laoreet blandit, lorem […]</p>
<div class="btn-group">
<a class="btn btn-social btn-facebook" href="#" data-toggle="tooltip" title="Share Facebook"><i class="fa fa-facebook"></i></a>
<a class="btn btn-social btn-twitter" href="#" data-toggle="tooltip" title="Share Twitter"><i class="fa fa-twitter"></i></a>
<a class="btn btn-social btn-google" href="#" data-toggle="tooltip" title="Share Google"><i class="fa fa-google"></i></a>
</div>
<a href="#">
<button type="button" class="btn btn-primary">
<span class="btn btn-google">Read More <i class="fa fa-chevron-right"></i></span>
</button>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="left-panel">
<div class="col-xs-12 col-sm-6 col-lg-6">
<div class="panel panel-default">
<div class="panel-body">
<div class="col-md-12">
<div class="thumbnail">
<a href="#"><img src="http://www.istanbluegayrimenkul.com/wp-content/uploads/2014/05/image6.jpg" alt=""/></a>
</div>
<div class="icerik-bilgi">
<a href="#"><h2>Lorem ipsum dolor sit amet</h2></a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut condimentum eget nunc quis semper. Nunc pellentesque nec libero sed viverra. Donec turpis velit, suscipit sit amet mauris quis, viverra ornare massa. Morbi tellus eros, fringilla eu sodales id, ultricies ut sapien. Duis et tristique enim, vitae mattis neque. Aliquam efficitur, dui id laoreet blandit, lorem […]</p>
<div class="btn-group">
<a class="btn btn-social btn-facebook" href="#" data-toggle="tooltip" title="Share Facebook"><i class="fa fa-facebook"></i></a>
<a class="btn btn-social btn-twitter" href="#" data-toggle="tooltip" title="Share Twitter"><i class="fa fa-twitter"></i></a>
<a class="btn btn-social btn-google" href="#" data-toggle="tooltip" title="Share Google"><i class="fa fa-google"></i></a>
</div>
<a href="#">
<button type="button" class="btn btn-primary">
<span class="btn btn-google">Read More <i class="fa fa-chevron-right"></i></span>
</button>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="left-panel">
<div class="col-xs-12 col-sm-6 col-lg-4">
<div class="panel panel-default">
<div class="panel-body">
<div class="col-md-12">
<div class="thumbnail">
<a href="#"><img src="http://www.istanbluegayrimenkul.com/wp-content/uploads/2014/05/image6.jpg" alt=""/></a>
</div>
<div class="icerik-bilgi">
<a href="#"><h2>Lorem ipsum dolor sit amet</h2></a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut condimentum eget nunc quis semper. Nunc pellentesque nec libero sed viverra. Donec turpis velit, suscipit sit amet mauris quis, viverra ornare massa. Morbi tellus eros, fringilla eu sodales id, ultricies ut sapien. Duis et tristique enim, vitae mattis neque. Aliquam efficitur, dui id laoreet blandit, lorem […]</p>
<div class="btn-group">
<a class="btn btn-social btn-facebook" href="#" data-toggle="tooltip" title="Share Facebook"><i class="fa fa-facebook"></i></a>
<a class="btn btn-social btn-twitter" href="#" data-toggle="tooltip" title="Share Twitter"><i class="fa fa-twitter"></i></a>
<a class="btn btn-social btn-google" href="#" data-toggle="tooltip" title="Share Google"><i class="fa fa-google"></i></a>
</div>
<a href="#">
<button type="button" class="btn btn-primary">
<span class="btn btn-google">Read More <i class="fa fa-chevron-right"></i></span>
</button>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="left-panel">
<div class="col-xs-12 col-sm-6 col-lg-2">
<div class="panel panel-default">
<div class="panel-body">
<div class="col-md-12">
<div class="thumbnail">
<a href="#"><img src="http://www.istanbluegayrimenkul.com/wp-content/uploads/2014/05/image6.jpg" alt=""/></a>
</div>
<div class="icerik-bilgi">
<a href="#"><h2>Lorem ipsum dolor sit amet</h2></a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut condimentum eget nunc quis semper. Nunc pellentesque nec libero sed viverra. Donec turpis velit, suscipit sit amet mauris quis, viverra ornare massa. Morbi tellus eros, fringilla eu sodales id, ultricies ut sapien. Duis et tristique enim, vitae mattis neque. Aliquam efficitur, dui id laoreet blandit, lorem […]</p>
<div class="btn-group">
<a class="btn btn-social btn-facebook" href="#" data-toggle="tooltip" title="Share Facebook"><i class="fa fa-facebook"></i></a>
<a class="btn btn-social btn-twitter" href="#" data-toggle="tooltip" title="Share Twitter"><i class="fa fa-twitter"></i></a>
<a class="btn btn-social btn-google" href="#" data-toggle="tooltip" title="Share Google"><i class="fa fa-google"></i></a>
</div>
<a href="#">
<button type="button" class="btn btn-primary">
<span class="btn btn-google">Read More <i class="fa fa-chevron-right"></i></span>
</button>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
body{font-family: 'Open Sans', sans-serif; padding:100px;}
a, p, h2{text-decoration:none;}
/* PANEL */
.left-panel .panel-default{border-bottom-left-radius:7px; border-bottom-right-radius:7px; border-bottom:2px #DDD solid;}
.left-panel .panel-default .panel-body {padding:0; margin:0;}
.left-panel .panel-default .panel-body .col-md-12{margin:0; padding:0;}
.left-panel .panel-default .panel-body .thumbnail{border:none; margin:0; padding:0; position:relative;}
.left-panel .panel:hover img {opacity:.8;}
.left-panel .panel-default .panel-body .icerik-bilgi{margin:30px;}
.icerik-bilgi .btn-primary{float:right; margin-bottom:30px;}
.icerik-bilgi h2{margin-bottom:30px; color:#333;}
.icerik-bilgi h2:hover{color:#E74C3C; text-decoration:none;}
.icerik-bilgi a:hover{text-decoration:none;}
.icerik-bilgi p{margin-bottom:30px; line-height:25px; font-size:16px;}
.icerik-bilgi .btn-group{float:left;}
.btn-group a{font-size:26px; color:#CCC;}
.btn-group .btn-facebook:hover{color:#3B5998;}
.btn-group .btn-twitter:hover{color:#55ACEE;}
.btn-group .btn-google:hover{color:#DD4B39;}
