<head>
<link href="https://fonts.googleapis.com/css?family=Macondo+Swash+Caps|Open+Sans" rel="stylesheet">
</head>
<div class="parent-div"> <!--parent div-->
<div class="large-section">
<p>
This is your life. Do what you love, and do it often. If you don’t like something, change it. If you don’t like your job,
<span style="color: blue">quit</span>.
</p>
<br>
<p>If you don’t have enough time, stop watching <span style= "font-weight: bold">TV</span>.
</p>
</div>
<div class="d-a"><!-- start d-a -->
If you are looking for the love of your life, stop; They will be waiting for you when you start doing things you love.
</div>
<div class="d-b"><!--start d-b -->
Stop over analyzing, life is simple. All emotions are beautiful. When you eat, appreciate every last bite.
</div>
<div class="d-c"><!-- start d-c -->
Open your mind, arms, and heart to new things and people, we are united in our differences.
</div>
<div class="d-d"> <!-- start d-d -->
Ask the next person you see what their passion is and share your inspiring dream with them.
</div>
<div class="d-e"><!-- start d-e -->
Travel often; getting lost will help you find yourself.
</div>
<div class="d-f"><!-- start d-f -->
Some opportunities only come once, seize them.
</div>
<div class="bottom">
<p>
Life is about the people you meet, and the things you create with them so go out and start creating.
</p>
<p>
Life is short. Live your dream and share your passion.
</p>
</div>
</div>
.parent-div{
background: #0066cc;
overflow: auto;
width: 544px;
}
.large-section{
background: #99ffcc;
padding: 8px;
font-family: 'Open Sans', sans-serif;
font-size: 18px;
text-align: center;
width: 180px;
font-variant: small-caps;
float: left;
border: black solid;
}
.d-a{
background: #ff99b3;
padding: 8px;
font-family: 'Macondo Swash Caps', cursive;
font-size: 18px;
text-align: center;
width: 320px;
font-stretch: expanded;
float: left;
border: black solid;
}
.d-b{
background: #9933ff;
padding: 8px;
font-family: 'Macondo Swash Caps', cursive;
font-size: 22px;
text-align: center;
width: 320px;
font-style: italic;
float: left;
border: black solid;
}
.d-c{
background: #ff99b3;
padding: 8px;
font-family: 'Macondo Swash Caps', cursive;
font-size: 18px;
text-align: center;
font-stretch: expanded;
width: 160px;
height: 127px;
float: left;
border: black solid;
}
.d-d{
background: #809fff;
padding: 8px;
font-family: 'Macondo Swash Caps', cursive;
font-size: 18px;
text-align: center;
font-stretch: expanded;
width: 138px;
height: 127px;
float: left;
border: black solid;
}
.d-e{
background: #9933ff;
padding: 8px;
font-family: 'Macondo Swash Caps', cursive;
font-size: 22px;
text-align: center;
width: 240px;
font-style: italic;
float: left;
border: black solid;
}
.d-f{
background: #809fff;
padding: 8px;
font-family: 'Macondo Swash Caps', cursive;
font-size: 18px;
text-align: center;
font-stretch: expanded;
width: 260px;
height: 52px;
float: left;
border: black solid;
}
.bottom{
background: #99ffcc;
padding: 20px;
font-family: 'Open Sans', sans-serif;
font-size: 18px;
font-weight: bold;
text-align: center;
width: 500px;
font-variant: small-caps;
float: left;
border: black solid;
text-decoration: underline
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.