writers-list

by jamna

HTML

<ul>
<li><a href="#"><img src="http://lorempixel.com/142/106/food"/>
 <p class="brief-info">Contrary to popular belief, Lorem Ipsum is not simply random text.</p>
 <p class="name">Contrary to popular belief</p>
 </a></li>
<li><a href="#"><img src="http://lorempixel.com/142/106/food"/>
 <p class="brief-info">Contrary to popular belief, Lorem Ipsum is not simply random text.</p>
 <p class="name">Contrary to popular belief</p>
 </a></li>
    <li><a href="#"><img src="http://lorempixel.com/142/106/food"/>
 <p class="brief-info">Contrary to popular belief, Lorem Ipsum is not simply random text.</p>
 <p class="name">Contrary to popular belief</p>
 </a></li>
    <li><a href="#"><img src="http://lorempixel.com/142/106/food"/>
 <p class="brief-info">Contrary to popular belief, Lorem Ipsum is not simply random text.</p>
 <p class="name">Contrary to popular belief</p>
 </a></li>
    <li><a href="#"><img src="http://lorempixel.com/142/106/food"/>
 <p class="brief-info">Contrary to popular belief, Lorem Ipsum is not simply random text.</p>
 <p class="name">Contrary to popular belief</p>
 </a></li>
    <li><a href="#"><img src="http://lorempixel.com/142/106/food"/>
 <p class="brief-info">Contrary to popular belief, Lorem Ipsum is not simply random text.</p>
 <p class="name">Contrary to popular belief</p>
 </a></li>
</ul>

CSS

ul li {     display: inline;
    float: left;
    margin-right: 13px;
    min-height: 242px;
    padding-bottom: 20px;
    position: relative;
    text-decoration: none;
    width: 142px; }