<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;
}