POC Card 20180306

Version 1.3 : Reduction Padding

by ced1

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<ul class="list-unstyled">
<li onclick="location.href = 'https://www.google.co.uk/';" class="media-item"> 

   <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRh7XgsEzmqjZE8ruxjvigenBpACp5khBSyFxxKcjTtwlyYH44X" alt="..." 
   class="img-circle pull-left media-object">
   
  <div class="media_body">
  
    <i class="fa fa-angle-right arrow-card"></i>
    <h4>Dr LOREM Ipsum</h4>
    <p>Chirurgie Plastique et Esthétique</p>

  </div>

</li>
</ul>

CSS

.media-item {
	position: relative;
	border: 1px solid #b0b0b0;
	margin: 7px;

	width: 490px;
	color: #b0b0b0;
	/*font-weight: bold;*/
	font-size: 18px;
	height: 130px;

  padding: 20px 0px;
  padding-left: 32px;
  /* background-color:red; */
}

h4 {
  color: black !important;
	font-size: 20px !important;
  font-weight: bold;
  /* background-color:pink; */
}
.media-object {
	width: 90px


}
.media_body{   
  text-align: left;
  padding-left:110px;
   /*background-color:green; */
}

.arrow-card {
    color: #8d6dc4;
    /* background-color:blue; */
    float: right;
    margin: 10px;
    padding-right: 20px;
    font-size: 50px;
    font-weight: bold;
}

.arrow-card:hover {
  color: #645E9D !important;
  font-size: 51px !important;
}