Vision Board

by Florin Pop

HTML

<div class="container">
    <div class="vision">
        <img src="http://data.hdwallpapers.im/bible_with_three_lovely_roses.jpg" alt="Bible">
        <p>Spiritual Goal: Read the entire Bible by the end of the year!</p>
    </div>
    <div class="vision">
        <img src="https://scontent-fra3-1.xx.fbcdn.net/hphotos-xat1/v/t1.0-9/12074968_907002336036432_299445218082043235_n.jpg?oh=d950168d3a598d0d94f2af02cd85a94f&oe=56CF3CAC" alt="Freeletics">
        <p>Health Goal: Get to xkg by the end of the year!</p>
    </div>
    <div class="vision">
        <img src="http://images.askmen.com/money/investing_150/195_investing_flash.jpg" alt="Dollar">
        <p>Financial Goal: Make $100/week average!</p>
    </div>
    <div class="vision">
        <img src="http://www.barbarianmeetscoding.com/images/i-love-javascript.jpg" alt="javascript">
        <p>Professional Goal: Make the BibleApp playable by the end of the year!</p>
    </div>
        <div class="clear"></div>
</div>

CSS

.container {
    width: 500px;
    border:1px solid lightgrey;
}

.vision {
    float:left;
    margin:0 25px;
}

.vision img {
    width: 200px;
    height: 100px;
}

.vision p {
    width: 200px;
    text-align: center;
}

.clear {
    clear: both;
}