<div id="vision-board">
		<div class="block small-block light-bg">
			<p><span class="highlight">Grow</span></p>
			<p>Learn to Design &amp;<br><strong>Code Websites</strong></p>
		</div>

		<div class="block small-block center">
			<img src="https://live.staticflickr.com/65535/50399753496_0df990e050_t.jpg" alt="flower">
		</div>

		<div class="block small-block center light-bg">
			<p>
				HTML<br>
				CSS<br>
				JavaScript<br>
				WordPress<br>
				Python
			</p>
		</div>
		
		<div class="block large-block">
			<p><span class="highlight">Freelance</span></p>
			<p>Make Enough Side Cash to <br><strong>Pay off debt</strong></p>
			<img src="https://live.staticflickr.com/65535/50399753646_84c88ba7db_t.jpg" alt="piggy bank">
		</div>

		<div class="block large-block center dark-bg">
			<img src="https://live.staticflickr.com/65535/50399059333_f206217aa2_t.jpg" alt="eye">
			<p class="title"><span class="marker">2020</span><br>Vision Board</p>
		</div>

		<div class="block right large-block">
			<img src="https://live.staticflickr.com/65535/50399753831_466c566d16_t.jpg" alt="airplane">
			<p><span class="highlight">Travel</span></p>
			<p>Plan a Trip Where I Can <br><strong>Work Remotely</strong></p>
		</div>

		<div class="block small-block top-padding center light-bg">
			<p>
				Walk Dog ++<br>
				Meditate<br>
				Yoga<br>
				Snuggle Pup
			</p>
		</div>

		<div class="block small-block top-padding center">
			<img src="https://live.staticflickr.com/65535/50399908907_01e253e72a_t.jpg" alt="dog">
		</div>

		<div class="block small-block right light-bg">
			<p><span class="highlight">Mind &amp; Body</span></p>
			<p>Exercise More<br>&amp; Find Zen in<br><strong>Challenge</strong></p>
		</div>
	</div>
body {
    background: #E8E8E8;
}

#vision-board {
    margin: 50px auto;
    width: 1200px;
    height: 850px;
    overflow: auto;
    background: url('https://live.staticflickr.com/65535/50399752916_10c2f3f03b_t.jpg');
    background-size: cover;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
}

.block {
    float: left;
    box-sizing: border-box;
    width: 400px;
}

.small-block {
    padding: 20px 40px;
    height: 210px;
}

.large-block {
    padding: 70px 40px;
    height: 430px;
}

.center {
    text-align: center;
}

.right {
    text-align: right;
}

.dark-bg {
    background: #3B3B3B;
    color: #FFFFFF;
}

.light-bg {
    background: #FFFFFF;
}

.highlight {
    padding: 5px 15px;
    background: #FFF44F;
    font-size: 18px;
}

.marker {
    font-family: 'Permanent Marker', cursive;
    font-weight: normal;
}

strong {
    font-size: 38px;
    text-transform: none;
    line-height: 38px;
}

.title {
    margin: 10px 0;
    font-size: 30px;
}

.top-padding {
    padding-top: 40px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.