<div class="container">
  <div class="row">
    <div class="col-md-4">
      <p>
        Lorem Ipsum pasajlarının birçok çeşitlemesi vardır. Ancak bunların büyük bir çoğunluğu mizah katılarak veya rastgele sözcükler eklenerek değiştirilmişlerdir.
      </p>

      <div class="wrapper">
        <img src="http://www.placehold.it/100x100/092C74/FFFFFF?text=JD" />
        <h3>John DOE</h3>
        <small>Web Developer</small>
        <ul>
          <li>★</li>
          <li>★</li>
          <li>★</li>
          <li>★</li>
          <li>★</li>    
        </ul>
      </div>        
    </div>      
    <div class="col-md-4">
      <p>
        Lorem Ipsum pasajlarının birçok çeşitlemesi vardır. Ancak bunların büyük bir çoğunluğu mizah katılarak veya rastgele sözcükler eklenerek değiştirilmişlerdir.
      </p>

      <div class="wrapper">
        <img src="http://www.placehold.it/100x100/092C74/FFFFFF?text=JD" />
        <h3>John DOE</h3>
        <small>Web Developer</small>
        <ul>
          <li>★</li>
          <li>★</li>
          <li>★</li>
          <li>★</li>
          <li>★</li>    
        </ul>
      </div>        
    </div>      
    <div class="col-md-4">
      <p>
        Lorem Ipsum pasajlarının birçok çeşitlemesi vardır. Ancak bunların büyük bir çoğunluğu mizah katılarak veya rastgele sözcükler eklenerek değiştirilmişlerdir.
      </p>

      <div class="wrapper">
        <img src="http://www.placehold.it/100x100/092C74/FFFFFF?text=JD" />
        <h3>John DOE</h3>
        <small>Web Developer</small>
        <ul>
          <li>★</li>
          <li>★</li>
          <li>★</li>
          <li>★</li>
          <li>★</li>    
        </ul>
      </div>        
    </div>          
  </div>    
</div>  

html, body{
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  color: #333;
  
  padding: 20px;
}

p{
  position: relative;
  padding: 20px 20px 20px 65px;
  background: orange;
  border-radius: 10px;
  margin-bottom: 35px;
  color: white;
}

/* Speach bouble Quote */
p:before{
  content: "\201C"; /*Unicode for Left Double Quote*/
  
  /*Font*/
  font-family: Georgia, serif;
  font-size: 60px;
  font-weight: bold;
  
  /*Positioning*/
  position: absolute;
  left: 20px;
  top: 5px;
}

/* Speech bouble triangle */
p:after{
  content: ' ';
  border: 10px solid;
  border-color: orange transparent transparent orange;
  position: absolute;
  bottom: -20px;
  left: 30px;
}

.wrapper{
  margin-bottom: 50px;
}
.wrapper img{
  float: left;
  border-radius: 20px;
  margin-right: 20px;
}
.wrapper h3{
  padding: 15px 0 0 0;
  color: orange;  
}
.wrapper small{
  display: block;
  color: #999;
  margin-top: -10px;
}
.wrapper ul{
  list-style: none;
}
.wrapper ul li{
  display: inline;
  font-size: 1.3em;
}
.wrapper ul li:nth-child(-n+4){
  color: orange;
}