<div id="vision-board">
<div class="block small-block light-bg">
<p><span class="highlight">Grow</span></p>
<p>Learn to Design &<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 & Body</span></p>
<p>Exercise More<br>& 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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.