SOURCE

<div class="wrapper">
    <div class="image">
				<img src="http://placekitten.com/240/140" >
    </div>
    <article>
    		<h2 class="title">Animation Films</h2>
        <h3 class="byline"><i class="fas fa-map-marker-alt"></i>Animiations</h3>
        <p class="desc">Lorem ipsum is simply dummy text of the printing and typersetting industry. ipsum is simply dummy text.</p>
    </article>
    <div class="ratings">
        <span class="fas fa-star light"></span>
        <span class="fas fa-star light"></span>
        <span class="fas fa-star light"></span>
        <span class="fas fa-star"></span>
        <span class="fas fa-star"></span>
        <span class="fab fa-weibo"></span>
    </div>
</div>

<script src="https://kit.fontawesome.com/414be51970.js" crossorigin="anonymous"></script>

*{margin：0; padding:0;}

.wrapper{
  width: 240px;
  margin: 0 auto;
  box-shadow: 0 0 10px rgba(0,0,0,.3);
  border-radius: 10px;
}

.image img{
  width: 100%;  /* 一定要指定图片的宽度为100%, 以符合父容器宽度 */ 
  display: block;
  border-radius: 10px 10px 0 0;
}

article .title{
  font-size: 18px;
  color: #717171;
  margin: 13px 0 15px 0;
}

article .byline{
  color: #acaaa;
  font-size: 0.5em;
}
article .byline i{
  margin-right: 7px;
}

article .desc{
  font-size: 14px;
  color: #acaaa;
  line-height: 1.8;
}

article, .ratings{
  padding: 0 1.8em;
}

.ratings{
  border-top: 1px solid #ccc;
  height: 46px;
}

.ratings{
 line-height: 46px;
 color: #ddd;
}

.light{
  color: gold;
}

.ratings .fa-weibo {
  display: block;
  float: right;
  line-height: 46px;
}